logo
  1. Главная страница
  2. Презентации
  3. Информатика и ИТ
  4. Gipermatn hujjat yaratuvchi dasturlarning qiyosiy tahlili (CSS, HTML, Bootstrap)

Gipermatn hujjat yaratuvchi dasturlarning qiyosiy tahlili (CSS, HTML, Bootstrap)

Загружено в:

21.11.2024

Скачано:

0

Размер:

18328.0859375 KB
Скачать
LOGO O’ZBEKISTON RESPUBLIKASI OLIY VA O’RTA TA’LIM VAZIRLIGI TOSHKEN DAVLAT IQTISODIYOT UNIVERSITETI Iqtisodiyot fakulteti EK-63 guruh talabalarining Axborot komunikatsion texnologiyalar va tizimlari fanidan oraliq nazorat uchun tayyorlagan TAQDIMOT ISHI TOSHKENT-2018Tayyorladi: Sattorov Mironshoh Abdumannobov Ibrohim Mamatxo’jayev Otabek Tekshirdi: Do’smatova Nigora REJA: • Kirish • Gipermatn muharirlari va ularning tasnifi • HTML ishlatilishi va uning tasnifi. • CSS ishlatilishi va uning tasnifi. • Bootstrap ishlatilishi va uning tasnifiMavzu: Giper matn hujjat yaratuvchi dasturlarning qiyosiy tahlili (CSS, HTML, Bootstrap) 01 01 01 06 01 13 01 18 01 1A Kirish Hozirgi kunda texnika texnalogiya rivojlanishining ortidan dunyo bo’ylab ulkan o’zarishlar kelib chiqdi. Bu texnoloiyalarning rivojlanishi o’z navbatida komputer evolutsiasini tezlashtirib yubordi. Komputer rivojlanishi internetning ham rivojlanishi kuchaytirdi. Demak bu internetdagi saytlar qanday yasaladi bunday saytlarni yasaydigan dasturlar qaysilar quyida shular bilan tanishib chiqamiz. Komputerlarning eng rivojlanishini yuksak darajaga chiqishi komputerlarning oltin asri bu XX asrning 90- yillariga to’g’ri keladi. Aynan shu yillarda intermet olamining yaralishi ham bo’lib o’tadi bu esa o’z navbatida gipermatn dasturlari ya’ni HTMLa ham bog’liqdir. Giper matnlarning kelib chiqishi XX asrning oxiriga to’g’ri keladi. Kerakli ma&#39;lumotlarni ko’rishning gipermurojaat deb ataluvchi usul bilan kompyuter tarmoqlarida joylashtirish WWW-World Wide Web-Jahon axborot tarmog’i (butun dunyo o’rgimchak to’ri- vsemirnaya pautina) deb atalgan. 1989 yili CERN (Evropa elektron zarralar fizikasi labaratoriyasi) tadqiqotchilari tomonidan turli ilmiy guruhlar orasida o’zaro aloqani tashkil qilish maqsadida ish boshladilar. 1993 yildan boshlab WWW Internet ning eng ommaviy resurslaridan biriga aylandi. Gipermatn muharirlari va ularning tasnifi Bugungi kunda dunyo bo’yicha keng tarqalgan Gipermatn muharrirlari quyidailardan iborat: CSS, HTML, PHP, NET, AJAX, Java Script. Bu dasturlarning barchasi o’ziga xos hususiyatlariga ega va ularning ham barchasini asosini HTML tashkil etadi. WEB sahifalar HTML - &#34;gipermatnlarni belgilash tili&#34;da yozilgan hujjat sifatida tayyorlanadi. Kalit so’zlar deb nomlangan so’zlar orqali boshqa ma&#39;lumotlarga murojaat qilish-gipermurojaat deyiladi. Bunday giperaloqalar faqat so’zlar emas, balki tasvirlar, grafiklar va ularning qismlari orqali amalga oshirilishi mumkin. Gipermatnli hujjatlarni qidirish, topish va ekranda tasvirlash uchun sharxlovchi- brouzerlardan foydalaniladi.3605 19 1B1C 2E 1D 04 19 1C 19 2B Sayt yaratuvchi dasturlarning barchasi bir-biriga bog’liqdir. To’g’ri bu kabi dasturlarning biri bor bo’lsa ham sayt yaratishimiz mumkin. Biroq bu kabi saytlar ko’rinishi jixatdan unchalik odamlarni o’ziga jalb qilmaydi va juda ham oddiy ko’rinishda bo’ladi. Lekin bu kabi sayt yaratuvchi dasturlarning barchasini asosini HTML tashkil etadi. HTML ishlatilishi va unin tasnifi HTML nima ? HTML standart web sahifa yaratish tilidir. HTML kengaytmasi Hiper Text Markub Language(Gipermatn belilash tili) HTML belgilash yordamida veb-sahifalar tuzilishini tasvirlaydi HTML elementlari HTML -sahifalar qurilish bloklari HTML elementlari teglar bilan ifodalanadi HTML teglar &#34;sarlavha&#34;, &#34;xat&#34;, &#34;jadval&#34; va hokazo Brauzerlar HTML teglarini aks ettirmaydi, lekin ularni sahifaning mazmunini ko&#39;rsatish uchun foydalaniladi. HTML HTML yordamida algoritmlar quyidagicha kiritiladi: Har bir ketma-ketlik boshida <!DOCTYPE html> bo’lishi shart. Undan keying qadamda Boshlanish <html> tugashi </html> bo’ladi va saytning ko’rinadigan qismida <body> boshlanishiga </body> esa tugashiga o’rnatiladi. < !DOCTYPE  html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > This is a Heading < /h1 > < p > This is a paragraph. < /p > < /body > < /html > HTML teglari burchak qavslari bilan o&#39;ralgan element nomlari: HTML teglari odatda <p> va </ p> kabi juftliklarda keladi Juftlikdagi birinchi teg boshlang&#39;ich tegdir, ikkinchisining tagidagi yorliq tugundir Nishon yorlig&#39;i boshlang&#39;ich yorlig&#39;i kabi yoziladi, lekin teg nomidan oldinga slash qo&#39;shiladi <tagname>content goes here...</tagname> Matnni saqlashda .html formatidan foydalanish shart aks holda Brauzerlar uni oddiy matn sifatida ochadi. HTML tarixi 1986 ISO-8879 SGML 1991 CERN HTML 1994 HTML 2.0 tayyorlash jarayoni (W3C)tomonidan 1995 Mart HTML 3 + CSS ustida ishlash 1997 Yanvar HTML 3.2 Dekabr 1997 HTML 4.0 + CSS 2.0 24 dekabr 1999 HTML 4.012000 XHTML 1.0 2010 yil HTML 5.0 22 Yanvar 2008 yil W3C Rasman &#34;HTML 5 ishlanish jarayoni haqida HTMLda ranglar quyidagicha ifodalanadi . < h1  style =&#34;background-color:rgb(255, 99, 71);&#34;> ... < /h1 > < h1  style =&#34;background-color:#ff6347;&#34;> ... < /h1 > < h1  style =&#34;background-color:hsl(9, 100%, 64%);&#34;> ... < /h1 > < h1  style =&#34;background-color:rgba(255, 99, 71, 0.5);&#34;> ... < /h1 > < h1  style =&#34;background-color:hsla(9, 100%, 64%, 0.5);&#34;> ... < / h1 > HTMLda rasm o’rnatish uchun quyidai amal bajariladi: <img src=&#34;img_chania.jpg&#34; alt=&#34;Flowers in Chania&#34;> Va ekranda quyidai rasm paydo bo’ladi. CSS ishlatilishi va uning tasnifi HTML web sayt yaratishning asosini tashkil qilsa ham bugungi kuna kelib bu dasturning faqatgina o’zidan foydalangan xolda sayt yaratilmaydi. Chunki bu dastur orqali yaratilgan sayt e’tiborni o’ziga jalb qilolmaydi. Shuning uchun hozirda websayt yaratishda HTML, CSS va Bootstrapdan birgalikda foydalaniladi. CSS nima ? CSS kengaytmasi Cascading Style Sheets(Kaskadlarning jadvalli uslubi) CSS HTML elementlarining ekran, qog&#39;oz yoki boshqa ommaviy axborot vositalarida qanday aks ettirilishi kerakligini tasvirlaydi CSS ko&#39;p ishlarni tejaydi. Bir vaqtning o&#39;zida bir nechta veb-sahifalar tartibini boshqarishi mumkin Tashqi uslub jadvallari CSS fayllarida saqlanadi. body  {     background-color :  lightblue ; } h1  {     color :  white ;     text-align :  center ; } p  {     font-family :  verdana ;     font-size :  20px ; }CSSda esa HTMLda yaratilgan sahifa boyitiladi va unga harakatlanuvchi animatsiyalar, turli mediyalar o’rnatiladi. Unda body  {…} kabi kiritiladi. /* The animation code */ @keyframes example  {     from  { background-color :  red ;}     to  { background-color :  yellow ;} } /* The element to apply the animation to */ div  {     width :  100px ;     height :  100px ;     background-color :  red ;     animation-name :  example ;     animation-duration :  4s ; } CSSda HTMLda yaratilgan sahifaga animatsiyalarni qo’yish quyidagicha amalga oshiriladi: img  {     border-radius :  8px ; } img  {     border-radius :  50% ; }CSSda rasmlarga ishlov berishda quyidagi amallar bajariladi: !DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } #myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } </style> </head> <body> <h1>The rotateX() Method</h1> <p>The rotateX() method rotates an element around its X-axis at a given degree.</p> <div> This a normal div element. </div> <div id=&#34;myDiv&#34;> This div element is rotated 150 degrees. </div> <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p> </body> </html> CSSda 3D rasm o’rnatishning to’liq shakli Color Name HEX Color Shades Mix AliceBlue   #F0F8FF   Shades Mix AntiqueWhite   #FAEBD7   Shades Mix Aqua   #00FFFF   Shades Mix Aquamarine   #7FFFD4   Shades Mix Azure   #F0FFFF   Shades Mix Beige   #F5F5DC   Shades Mix Bisque   #FFE4C4   Shades Mix Black   #000000   Shades Mix font-family Example text Arial, Helvetica, sans-serif This is a heading This is a paragraph &#34;Arial Black&#34;, Gadget, sans-serif This is a heading This is a paragraph &#34;Comic Sans MS&#34;, cursive, sans-serif This is a heading This is a paragraph Impact, Charcoal, sans-serif This is a heading This is a paragraph &#34;Lucida Sans Unicode&#34;, &#34;Lucida Grande&#34;, sans-serif This is a heading This is a paragraph <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px; } </style> </head> <body> <h1>Text-shadow effect!</h1> <p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p> </body> </html> Text- shadow effect! Text- shadow effect! Bootstrap ishlatilishi va unin tasnifi Bootstrap sayt yaratuvchi dasturlar ichida eng mashxuri, chunki bu dastur yordamida mobile web saytlar yaratiladi. Bootstrap tarjimasi dastlabki yuklash degan ma’noni bildiradi. Bootstrap ham HTML va CSS bilan birga foydalaniladi. Bootstrap tez va oson veb-ishlab chiqish uchun bepul dastur hisoblanadi Bootstrap tipografiya, shakllar, tugmalar, jadvallar, navigatsiya, modallar, rasm karusellari va boshqa ko&#39;plab boshqa HTML-va CSS-ga asoslangan dizayni, shuningdek, ixtiyoriy JavaScript-ni boyitib juda mukammal sayt yaratishda qo’l keladi. Bootstrap, sizga osonlik bilan javob beruvchi dizaynlarni yaratish qobiliyatini beradi. Bootstrap tarixi Bootstrap Twitter-da Mark Otto va Yakob Thornton tomonidan ishlab chiqilgan va 2011-yil avgustda GitHub-da ochiq manba kodli mahsulot sifatida chiqarilgan. 2014-yil iyun oyida GitHub loyihasi Bootstrap loyihasi bo&#39;ldi Bootstrapning afzalliklari: Oddiy foydalanish: HTML va CSS-ning asosiy ma&#39;lumotlariga ega bo&#39;lgan har kim Bootstrap-dan foydalanishni boshlaydi Ta&#39;sirchan xususiyatlar: Bootstrapning sezgir CSS vositalari telefonlarga, planshetlarga va ish stollariga mos keladi Mobil birinchi yondashuv: Bootstrap 3- da, dastlabki mobil uslublar yadro freymining qismi hisoblanadi Brauzer mosligi: Bootstrap barcha zamonaviy brauzerlar (Chrome, Firefox, Internet Explorer, Safari va Opera) bilan mos keladi. < div  class =&#34;row&#34;>    < div  class =&#34;col-*-*&#34;>< /div >    < div  class =&#34;col-*-*&#34;>< /div > < /div > < div  class =&#34;row&#34;>    < div  class =&#34;col-*-*&#34;>< /div >    < div  class =&#34;col-*-*&#34;>< /div >    < div  class =&#34;col-*-*&#34;>< /div > < /div > < div  class =&#34;row&#34;>   ... < /div >Birinchidan; satr yaratish (<div class = &#34;row&#34;>). So&#39;ngra, kerakli sonni qo&#39;shing (teglar mos .col - * - * classes). .col - * - * ning raqamlari har bir satr uchun har doim 12 ta qo&#39;shilishi kerak. Rounded courner Circle Thumbnail < img  src =&#34;cinqueterre.j pg&#34;  class =&#34;img- rounded&#34;  alt =&#34;Cinque Terre&#34;> <img  src =&#34;cinqueterre.j pg&#34;  class=&#34; img- thumbnail&#34;  alt =&#34;Cinque Terre&#34;><img  src =&#34;cinqueterre.j pg&#34;  class =&#34;img- circle&#34;  alt =&#34;Cinque Terre&#34;> E’tiboringiz uchun raxmat

Похожие

Codecraft Bootstrap
HTML Gipermatni
HTML tilida matn, rang, jadval va rasmlar bilan ishlovchi teglar. HTMLda turli ro’yhatlar hosil qilish
HTML tili va uning asosiy teglari
HTML tili haqida ma’lumot va veb-sahifalar tayyorlash