HTML tili asoslari

Загружено в:

06.05.2025

Скачано:

0

Размер:

1187.052734375 KB

Скачать

Mavzu: HTML TILI ASOSLARI Reja: 1. World Wide Web va HTML. 2. HTML dasturlash tili. 3. Блокнот dasturi. 4. Web hujjatlarni yaratishni avtomatlashtirish.0102 0F10 1213 14 1B13 08 1F13 20 2613 14

WWW ga kirish Internetning eng ma’lum va keng tarqalgan qismi bu WWW (World Wide Web) deb nomlanuvchi to’rdir. Bu to’r Web saytlar va alohida Web sahifalardan tashkil topgan. Web sahifalar esa HTML tili yordamida yaratiladi. HTML tilidan foydalanish uchun dasturchi mutaxassis bo’lish shart emas, chunki bu til juda oddiy va har kim undan foydalanishi mumkin. HTML da ishlash uchun oddiy kompyuter foydalanuvchisi bo’lish va internetda ishlash bo’yicha ozgina malakasi bo’lsa etarli. HTML tili yordamida har kim o’zining shaxsiy Web sahifasini yoki butun boshli bir Web saytini yaratish orqali o’zini butun dunyo axborot fazosida His qilishi mumkin. Albatta faqat HTML ni bilish interaktiv savdo saytlarini yaratish uchun etarli emas. Bunday jiddiy maqsadlar uchun dasturlash bo’yicha yaxshi bilim va internetning har xil texnologiyalarini bilish talab qilinadi.

HTML ning qisqacha tarixi  HTML( Hyper Text Markup Language) ”gipermatnli markerlash tili” dasturlash tilining dastlabki varianti Tim Berners-Li tomonidan 1990-yil CERN-Yadro tadqiqotlari Yevropa markazida yaratilgan. O‘sha davrda Internetni tez rivojlanishi natijasida bu dastur katta yutiqlarga erishdi va HTML imkoniyatlari kengaytirildi.  Dasturning HTML 2.0 versiyasi 1995 yili Internet Engineering kompaniyasi tomonidan tayyorlandi. HTML+ (1993) va HTML 3.0 (1995) – ko‘proq imkoniyatlarga ega bo‘lgan versiyalardir.  HTML versiyalarini umumlashtirish, ulardagi farqlarni bartaraf etish borasidagi ishlar 1997-yili yanvar oyda World Wide Web Consortium kompaniyasining ishchi guruhi tomonidan HTML 3.2 versiyasini vujudga kelishiga olib keldi. HTML 3.2 versiyasi katta imkoniyatlarga ega va u ko‘plab brouzerlar tomonidan bir xil tahlil qilinadi.  Hozirgi vaqtda HTML 4.2 versiyasi mavjud bo‘lib, unda jadval stilllari, skriptlar, kadrlar, obektlar bilan ishlash, turli yo‘nalishdagi yozuvlarni ishlatish, formalarning yangi xossalari kabi yangiliklar paydo bo‘ldi.  HTML-hujjatlar turli WEB brouzerlar yordamida ko‘riladi.

HTML HUJJATINING TUZILISHI. TEG lar HTML ning konstrukstiyasi TEG lar deyiladi. Brauzer TEG larni oddiy matnlardan farqlashi uchun ular burchak qavslarga(“ < ” “ > ”) olinadilar. TEG tasvirlash jarayoni Hatti Harakatlarining boshlanishini bildiradi. Juft teglarning ikkinchisi birinchisining Harakatini yakunlaydi. Masalan, Har bir Web sahifa <html> tegi bilan boshlanib </html> tegi bilan yopilishi kerak. Etibor bergan bo’lsangiz yopiluvchi teg ochiluvchidan slesh « / » belgisi bilan farq qiladi. Teg nomlari katta yoki kichik Harflar bilan yozilishi mumkin, bularni brauzer bir xil qabul qiladi. Ba’zi teglar uchun tugallovchi teg bo‘lishi shart emas. Masalan: <P> (abzats tegi) tegi uchun tugallovchi teg kerak emas. Bunday teglar odatda hujjatni o‘qilishini yaxshilash uchun ishlatiladi.

Hujjat strukturasi  Har qanday Web sahifa ikkita qismdan tashkil topadi. Bular sarlavha qismi va asosiy qism . Sarlavha qismida Web sahifa haqidagi ma’lumot joylashadi, asosiy qismda esa Web sahifaning mazmuni bilan tasvirlanish qoidalari joylashadi. Sarlavha qismi quyidagi ochiluvchi <head> va yopiluvchi </head> teglari orasida joylashadi. Asosiy qism esa <body> va </body> teglari orasida joylashadi. Har qanday Web sahifaning umumiy ko‘rinishi quyidagicha bo‘ladi: <html> <head> <title> Hujjat sarlavhasi </title> </head> <body> Asosiy qism </body> </html>

Web sahifa yaratish.  Web sahifa kodi Bloknot dasturiga yoziladi. Bloknot dasturiga kirish uchun quyidagi ketma-ketlikni bajaramiz:  Пуск Программы Стандартные Блокнот Web sahifa kodi yozilgandan so’ng xotiraga saqlaymiz. Xotiraga saqlashda fayl nomidan keyin (nuqta) . html kengaytmasi yoziladi. Natijada matnli fayl web sahifa ko’rinishini oladi va uni ixtiyoriy brouzerda ko’rish mumkin. Masalan: <html> <head> <title> Mening birinchi web sahifam </title> </head> <body> web sahifaga kiruvchilarga alangali salom </body> </html>

Web sahifa ishga tushurilganda brauzerning eng yuqori satrida yuklanayotgan hujjat mazmunini anglatuvchi qisqacha yozuv turadi. Bu yozuvni hosil qilish uchun quyidagi ochiluvchi <title> va yopiluvchi </title> teglaridan fodalanamiz. Misol: <html> <head> <title> Web sahifa sarlavhasi </title> </head> <body> </body> </html>

Web sahifaning asosiy qismi <body> va </body> teglari orasida joylashadi. Bu oddiy matn bo’lishi mumkin. Brauzer bu matnni tug’ridan to’g’ri interpretastiya qilib ekranda tasvirlaydi. Bizga dastlabki Web sahifamizni yaratish uchun oddiy «Bloknot» matn muharriri kifoya. Quyida ko’rsatilgan misolni matn muharririda yozib, uni xotiraga yozishda kengaytmasini html yoki htm deb kiritishimiz kerak.  Misol:  <html>  <head>  <title>Mening birinchi Web sahifam </title>  </head>  <body>  Mening bu sahifamga kiruvchilarga alangali salom!!!  </body>  </html>

Bu faylni ishga tushirish uchun sichqoncha ko’rsatkichini shu fayl ustiga keltirib chap tugmasini ikki marta bosish kerak. Natijada ekranda quydagi ko’rinishdagi natija hosil bo’ladi:

 <body> tegi bir qancha qo’shimcha parametrlarga ega. Bu parametrlar tegning ochiluvchi qismida joylashadi. Parametrlar ikki qismdan iborat bo’ladi: parametr nomi va parametr qiymati. Masalan bgcolor parametri tasvirlanayotgan Web sahifa fonining rangini belgilaydi.  Masalan: <body bgcolor = “green”>  Parametrlarning satrli qiymatlari qo’shtirnoq ichida yoziladi. Biz quyida < body > tegining parametrlari bilan tanishamiz.  Background - fon sifatida biror bir grafik tasvirdan foydalanish.Parametr qiymati sifatida grafik tasvir joylashgan manzil (URL) beriladi.  Text - tasvirlanayotgan matn rangi.  Link - Web sahifadagi matnli gipermurojat rangi.  Vlink -foydalanuvchi tomonidan oldin murojat qilingan gipermurojaat rangi.  Alink - foydalanuvchi tomonidan tanlangan gipermurojaat rangi.  Lang – Web sahifa matni yozilgan tilni aniqlash.

Sarlavha tegi.  Hujjat odatda sarlavha, matn, matn sarlavhasi, qism sarlavhasi kabi strukturlanadi. Bu holni amalga oshirish uchun <Hx> tegi ishlatiladi. Bu yerda x o’rnida 1…6 gacha bo’lgan sonlarni joylashtirish mumkin. Misol: <html> <body> <h1> Qatlam 1</h1> <h2> Qatlam 2</h2> <h3> Qatlam 3</h3> <h4> Qatlam 4</h4> <h5> Qatlam 5</h5> <h6>Qatlam 6</h6> </body> </html> Natija: Qatlam 1 Qatlam 2 Qatlam 3 Qatlam 4 Qatlam 5 Qatlam 6

HTML tilida rang va o‘lchov birliklarini qo‘llashning standart qoidasi Rang berishning ikkita usuli mavjud. Ko‘p qo‘llaniladigan usul kerakli rangning RGB kodini ko‘rsatishdir. Ma’lumki har qanday rangni uchta asosiy: qizil , yashil va ko‘k ranglarning qorishmasidan hosil qilish mumkin. Brauzerlar bizga o’n olti milliondan ortiq rangni tasvirlash imkoniyatini beradi, chunki asosiy 3 ta rangdan har birining qiymati 0 dan 255 gacha qiymat qabul qiladi. Ixtiyoriy rang har biri asosiy ranglarning ulushini ifodalovchi 3 ta son majmuasidan iborat bo‘ladi. HTML tilida rang qulaylik uchun 16 lik sistemadagi 6 ta raqamlardan tashkil topadi. Masalan: Color = “#FF0000” 16 lik raqamlar oldida “#” belgisi qo‘yiladi. Rang ulushlarini ko‘rsatib turuvchi raqamlar tartibiga e’tibor berish kerak. Chunki birinchi qizil, ikkinchi yashil va uchinchi ko‘k rang ulushlari joylashadi. Biz yuqoridagi misolda qizil rangni tasvirlangan.

Ranglar va o‘lchov birliklari № Rang 16 lik kodi Yozma qiymati 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Qora Kumush rang Och qora Oq To’q qizil Qizil To’q qizil Och qizil Yashil Och yashil Olxo’ri rangi Sariq To’q ko‘k Ko’k Och ko’k To’q yashil #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF Black Silver Gray White Marron Red Purple Fuchsin Green Lime Olive Yellow Navy Blue Teal Aqua

Matnlarni bezash HTML tilida matnni tasvirlashning bir qancha usullari mavjud. Brauzer ekranida matn satrini tasvirlash uchun hech qanday teg ishlatishga hojat yo‘q. Matnni yozish kifoya. Lekin uni hattoki abzatsga bo‘lish ham teglarsiz amalga oshmaydi. Har xil kompyuter tizimlarida matnlarni abzatsga bo‘lish uchun har xil simvollar ishlatiladi, lekin HTML hujjati kompyuter tizimi qanday bo‘lishidan qa’tiy nazar bir xil tasvirlanishi lozim va shuning uchun abzatsni ifodalovchi teg kiritilishiga to‘g‘ri kelgan. Har bir abzats boshida <p> tegi qo‘yiladi, oxirida esa yopiluvchi </p> tegi qo‘yiladi. Bu teg o‘z parametrlariga ega. Bu parametrlar qatoriga align parametri kiradi. Align parametrini matnlarni tekislash (tenglash)da ishlatiladi. Abzatsni brauzer oynasining o‘ng yoki chap tomoniga tekislash, markazlashtirish yoki to‘la eniga yoyib yozish uchun ularga mos ravishda left , right , center va justify qiymatlari ishlatiladi. Bularning qo‘llanilishini quyidagi misolda ko‘ramiz:

Matnlarni tekislash <html> <head> <title> abzastlarni gorizontal tekislash </title> </head> <body> <p align = “left”> chap tomonga tekislash </p> <p align = “right”> o’ng tomonga tekislash </p> <p align = “center”> markazlashtirilgan abzast </p> <p align = “justify”> eni bo’yicha yoyib yozilgan abzast </p> </body> </html>

Font tegi <font> tegi matnlarini bezashda qo’llaniladi. <font> tegini yopiluvchi tegi </font> shunday ko‘rinishda bo‘ladi. <font> tegi quyidagi parametrlarga ega:  Size - matn o‘lchamini ko‘rsatish;  Color - matn rangini berish;  Face - matn qaysi shriftda tasvirlanishini belgilash; Size parametri qiymat sifatida 0 dan 7 gacha bo‘lgan sonlarni qabul qiladi. Bu sonlar matndagi simvollar o‘lchamini bildiradi. Masalan: shrift o‘lchamini bittaga oshirish uchun quyidagi konstruksiyani yozishimiz kerak: <font size = “+1”>  Shrift (simvol) o‘lchamlarini ikki birlikka kichraytirish uchun esa quyidagini yozishimiz kerak: <font size = “-2”>

Matnga rang berish Font tegining navbatdagi parametri bu color parametridir. Color -parametri quyidagicha yoziladi: <font color = “rang”> Masalan: qo‘llanilayotgan shrift simvollarini yashil rangda tasvirlash uchun quyidagini yozishimiz lozim: <font color = “green”> Navbatdagi face parametri esa qo‘llanilishi kerak bo‘lgan shriftni belgilaydi. Biz matnni face yordamida Times New Roman yoki arial black shriftlari yordamida tasvirlanishini ko‘rsatishimiz mumkin. Endi esa font tegining barcha parametrlari qatnashgan misolni ko‘ramiz: <html> <head><title> Matnlarni bezash </title> </head> <body> <font size = 4 color = black face = Times New Roman > Matn yozish </font> </body> </html>

HTMLda matnlarni tasvirlash. HTML simvollarni kursiv, qalin, ostiga chizilgan, katta yoki kichik holatlarda tasvirlash imkonini beradi.  <b> va </b> teglari belgilangan joydagi matnni qalin shriftda tasvirlaydi.  <i> va </i> teglari belgilangan joy matnini kursiv shriftda tasvirlaydi.  <u> va </u> teglari belgilangan joy matnini ostiga chizilgan shriftda tasvirlaydi.  <small> va </small> teglari belgilangan joy matnini kichraytirilgan shriftda tasvirlaydi.  <big> va </big> teglari belgilangan joy matnini kattalashtirilgan shriftda tasvirlaydi.  <sup> va </sup> teglari yuqori indeksni yozish uchun ishlatiladi.  <sub> va </sub> teglari pastki indekslarni yozish uchun ishlatiladi.  <br> tegi yangi satrdan yozish uchun ishlatiladi.

Bu teglar qatnashgan quyidagi misolni ko‘ramiz: <html> <head> <title> turli xil ko‘rinishda yozish </title> </head> <body> <b> Qalinlashtirilgan matn </b> <br> <i> Kursiv shaklidagi matn </i> <br> <u> Ostiga chizilgan matn </u> <br> <small> Kichraytirilgan matn </small> <br> <big> Kattalashtirilgan matn </big> <br> Suvni kimyoviy formulasi: H <sub>2 </sub> O <br> Kvadrat formula: x <sup> 2 </sup> +x+2=0 </body> </html>

Web sahifada grafik tasvirlarni joylashtirish. Grafik obyekt deganda har xil tipdagi rasmlar, fotorasmlar, tovushli fayllar va videokliplarni tushuniladi. Brauzerlar quyida yozilgan formatdagi grafik (rasm) fayllarni tasvirlaydi:  GIF;  JPG;  PNG; GIF formatidagi fayllar animatsion tasvirlarni yaratish imkonini beradi. JPG fayllar fototasvirlarni saqlash uchun ishlatiladi. PNG formati esa tasvirning yuqori sifati va grafik faylning kichik hajmda bo‘lishini ta’minlaydi. Web sahifada grafik fayllarni tasvirlash uchun <img> tegi o‘zining bir qancha parametrlari bilan qo‘llaniladi. Bu teg o‘zining yopiluvchi tegiga ega emas. <img> tegining asosiy uchta parametri mavjud:  Src  Alt  Border src - parametr orqali tasvirlanishi kerak bo‘lgan obyekt manzili ko‘rsatiladi. alt- parametri orqali tasvirga izoh hosil qilish mumkin. border -parametri bilan tasvir atrofidagi chegara qalinligi o‘rnatiladi.

$Web sahifaga jpg formatli rasmni bog’lash. <html> <head> <title> web sahifaga rasmni joylashtirish</title> </head> <body> <img src="d:\rasm\gerb.jpg" alt=“bu gerb” border="10"> </body> </html>$ $Bundan tashqari <img> tegining yana ikki parametri mavjud.Jimlik Holati bo’yicha grafik tasvir saqlangan paytda qanday gorizantal va vertikal o’lchamlarda saqlangan bo’lsa ekranda Ham xuddi shunday tasvirlanadi. Grafik tasvirni foydalanuvchi o’zi Xoxlagan o’lchamda tasvirlash imkoniyatiga ega, buning uchun height va width parametrlaridan foydalaniladi. Misol: <img border="0” alt="gerb“ src="d:\rasm\gerb.jpg“ width="492“ height="500">$

Web sahifaga video fayllarni joylashtirish. Web sahifani bezash uchun unga videoroliklar joylashtirish imkoniyati ham mavjud. Brauzerlar odatda:  AVI;  Real;  Video;  Windows Media; formatlaridagi videofayllarni tasvirlash imkoniyatiga ega. Ularni Web sahifa tarkibiga qo‘shish uchun ham <img> tegi ishlatiladi. Videofayl joylashgan manzilni ko‘rsatish uchun esa dynsrc parametri ishlatiladi. <img> tegiga <start> parametrini qo‘shish orqali yuklangan video klipni tasvirlash jarayonini boshqarish mumkin. <start> parametrining ikkita qiymati mavjud:  Mouseover;  Fileopen; Mouseover - parametri foydalanuvchi kursor ko‘rsatkichini videotasvir joylashgan soha ustiga olib kelishi bilan video tasvirning tasvirlanish jarayoni boshlanishini bildiradi. Fileopen - parametri esa Web sahifa kompyuterga to‘liq yuklanib bo‘lgandan keyin darhol tasvirlanish jarayoni boshlanishini bildiradi.

$<html> <head> <title> web sahifaga videofayl joylashtirish</title> </head> <body> <img dynsrc= “d:\video\informatika.avi“ start=“fileopen” > </body> </html> Eslatma: mouseover qiymati bilan ham web sahifaga video fayl yuklang.Web sahifaga avi formatli video faylni yuklash.$ $Web sahifada video fayllarni takroriy tasvirlash. Loop - parametri orqali videorolikning necha marta tasvirlanishini boshqarish mumkin. Buning uchun tasvirlanishlar sonini loop parametriga qiymat sifatida berishimiz zarur. Masalan: loop=“2” Loopdelay - parametri takroriy tasvirlanish jarayonida tasvirlanishlar orasidagi vaqtni belgilaydi va qiymati millisekundlarda beriladi. Masalan: loopdelay=“5000” takrorlashlar orasida 5 sekundlik tanaffus bilan tasvirlanadi. <html> <head> <title> web sahifaga videofayl joylashtirish</title> </head> <body> <img dynsrc= “d:\video\informatika.avi“ start=“fileopen” loop=“2” loopdelay=“5000”> </body> </html>$

Web sahifaga tovushli fayllarni yuklash. Tovushli fayllar Web sahifada fon hisobida qatnashadi. Tovushli fayl web sahifa to‘liq yuklangandan keyin bajariladi. Foydalanuvchi kompyuteriga web sahifa yuklanganda birinchi navbatda uning HTML tilida yozilgan fayli, keyin esa shu sahifada ishlatilgan grafik, video va audiofayllar yuklanadi. Web sahifaga tovushli fayl qo‘yishimiz uchun biz sahifaning sarlavhasiga, ya’ni <head> va </head> teglari orasiga <bgsound> tegini joylashtirishimiz kerak bo‘ladi. Bu tegning src parametri qiymat sifatida tovushli faylning manzilini qabul qiladi. Brauzerlar quyidagi audiofayllarni taniydi va o’qitish imkoniga ega:  MP3;  Real Audio;  WAV; Videokliplarda bo’lgani kabi audiofayllarda ham faylning necha marta takrorlanishini loop parametri bilan boshqarish mumkin. Qiymat sifatida esa takrorlanishlar soni beriladi. Agar audiofaylning to‘xtovsiz takrorlanishi zarur bo‘lsa loop parametriga “-1” qiymat berish kerak. Masalan: < bgsound src=”musiqa.mp3” loop=”-1”>

$<html> <head> <title> web sahifaga audiofayl joylashtirish </title> <bgsound src="d:\musiqa\madhiya.mp3“ > </head> <body> Web sahifaga audio fayl joylashtirilgan. </body> </html>Web sahifaga mp3 formatli audio faylni yuklash.$

HTML tili asoslari

06.05.2025

0

1187.052734375 KB

Похожие