4.17 – mavzu: HTML tili. Web-SAHIFA YARATISH USULLARI.
Reja
-
HTML tili va uning asoslari.
-
HTML xujjatning tuzilmasi.
-
Xujjat tanasi.
Tayanch iboralar: Html, xujjat, teg, web-sahifa, sayt, portal, gipermurojaat, atribut.
1. HTML tili va uning asoslari. Internet - sayyoramiz miqyosidagi kompyuter tarmoqlarining birlashmasidir. Agar kosmik stansiya a’zolarining E-mail dan foydalanishini inobatga olsak internetning sayyoramiz sarhadlaridan chiqqanini ham ko‘rishimiz mumkin.
Butun dunyo o‘rgimchak to‘ri WWW (World Wide Web) - bu ko‘p sonli o‘zaro bir-biriga bog‘langan hujjatlardir. Web sahifada boshqa Web sahifalar bilan bog‘lovchi chekli gipermurojaat bo‘ladi. Gipermurojaat mexanizmini bir necha so‘z bilan izohlash qiyin, lekin kamida bir marta Web sahifaga kirib ishlagan odam buni darhol tushunadi.
Gipermurojaat butunjahon o‘rgimchak to‘ridan hujjatning URL deb nomlanuvchi manzilini qidirishda ishlatiladi. Biz bilamizki Web sahifaning asosiy mohiyati axborotni tacvirlash va uni har bir foydalanuvchi uchun ochib berishdir. Bunda bir qancha funksional cheklanishlar mavjud, ya’ni biz oldindan Web sahifani ko‘ruvchining kompyuteri qanday, monitorining imkoniyati qanday va ko‘rish oynasining qanday o‘lchamda o‘rnatilganligini bilmaymiz. Biz hattoki foydalanuvchining qanday operatsion muhitda ishlayotganini ham bilmaymiz. Web sahifa esa INTEL mashinada ham Makentoshda ham bir xil ko‘rinishda bo‘lishi kerak. Foydalanuvchi o‘z operatsion muhitida qanday yozuv shriftlar o‘rnatganligi yoki uning videokartasi qancha rangni ko‘tara olishi ham malum emas. Yuqoridagi malumotlarning yo‘qligi yoki yetarli emasligi umumaxborot almashish tilining paydo bo‘lishiga to‘siq bo‘lishi kerak edi, lekin bunday bo‘lmadi.
Gap shundaki 1986 yili xalqaro standartlashtirish tashkiloti (ISO) tomonidan qog‘ozdagi hujjatni ekranda tasvirlash imkonini beruvchi hamma variantlarni etiborga olgan SGML (Standart Generalired Markup Language) tili yaratildi. Hamma imkoniyatlarni etiborga olgan kuchli sistema ishlab chiqildi. Web sahifa uchun bu yaxshi yo‘l deb hisoblangan edi. Lekin bu til qonun qoidalari izohi yuzlab sahifalarni egalladi. Bunday til asosida yaratilgan sahifani tasvirlovchi dasturni ishlab chiqish uchun juda ko‘p vaqt ketgan bo‘lardi, shuning uchun Internet ehtiyoji uchun SGML tilining malum bir qismi tanlab olindi va HTML (Hyper Text Markup Language) deb nomlandi. HTML tilida yozilgan Web sahifa faylida axborotning qanday tasvirlanishi haqidagi yo‘l yo‘riqlar ketma – ket joylashgan bo‘ladi. Bu fayl oddiy matnli fayl bo‘lib uni maxsus brauzer datsturlarsiz o‘qish qiyin. Grafik rasmlarni esa umumman ko‘rib bo‘lmaydi chunki uning o‘rnida brauzer dasturga biror rasm kerakligini ko‘rsatuvchi TEG turadi. Agar biz o‘z Web sahifamizni yaratmoqchi bo‘lsak, albatta HTML tilini yaxshi bilishimiz kerak bo‘ladi.
HTML tili nima? Ushbu savolga mavzular davomida javob olish mumkin. WWW uchun ixtiyoriy sahifa biror oddiy matn muharriri – masalan «Bloknot» dasturi - yordamida yaratilgan alohida matn fayli ko‘rinishida bo‘lishi mumkin. Windows operatsion tizimida web-sahifa fayllari "htm" yoki "html" kengaytmasiga ega bo‘ladi. Bunday fayllarni yaratish uchun qo‘llaniladigan qoidalar majmuasi HTML (Hyper Text Mark-up Language-gipermatnni belgilash tili) deb ataladi. HTML formatidagi fayllarni ochish jarayonida brauzerlar teglarni talqin qilish va sahifani o‘z darchasida yaratuvchisi qanday tasavvur qilgan bo‘lsa, o‘shanday qilib chiqarish imkoniga ega.
HTML standarti Web uchun yaratilgan boshqa standartlar kabi World Wide Web (World Wide Web Consortium, W3C) konsorsiumi rahbarligi ostida yaratilgan. Kerakli standartlar va spetsifikatsiyalarni, shu jumladan HTML tili uchun ham, http://www.3w.org saytidan topish mumkin.
HTML tili xaqida umumiy tushuncha va tilining teglari. HTML tilidagi boshqaruvga konstruksiyalar teglar (tegs) deb ataladi va xujjat matnga bevosita qo‘yiladi. Teg-bu belgilar (simvollar) to‘plamidir. Ularni yozish uchun burchak qavslar (“katta” va “kichik” belgilari) ishlatiladi, masalan: . Teglarni yozish sintaksisi umumiy xolda ko‘rinishga ega.
HTML tilidagi har bir teg maxsus vazifaga ega. Teglarning nomlarini yozish harflarning katta (yuqori registr) yoki kichik( quyi registr) harfi bilan yozishning ahamiyati yo‘q. Kompyuter uchun va <TITLE> yozuvlarini hech qanday farqi yo‘q, ularni bir xil qabul qiladi. Ammo, Web –sahifaga joylashtirilgan matnni teglardan ajratib turishini ta’minlash uchun, ularni bosh harflar bilan yozish tavsiya etiladi.
<p>Burchak qavslarni orasiga joylashtirilmagan hamma ob’ektlarni interpretator matn unsuri (elementi) deb tushunadi va ularni kompyuter ekranida aks ettiradi.</p>
<p>Odatda, <u>HTML</u> tilidagi bir teg xujjatning faqat bir qismiga, masalan abzatsga ta’sir etadi. Bunday xollarda ya’ni boshlovchi va tugatuvchi juft teglardan foydalaniladi. Juft teglarning ta’sir ko‘rsatish sohasi ochiluvchi teg qo‘yilgan joydan boshlanadi va yopiluvchi teg qo‘yilgan joyda tugaydi. Xizmatchi so‘zlar oldida < > (egri chiziq belgisining mavjudligi bilan yopiluvchi teg ochiluvchidan farq qiladi. Umumiy xolda ochiluvchi va yopiluvchi teglar HTML tilining dasturiy qatori(kodi) da quyidagi ko‘rinishga ega: <TYeG> juft teglarning ta’sir ko‘rsatish sohasi </TYeG>.
</p>
<p>Ochish va yopish teglari ichidagi matn <EM>konteyner</EM> (to contain — ichiga olgan) deb ataladi. Juft teglarning yopayotganda ichma-ich joylashish qoidasiga rioya qilish kerak. Bir-birining ichiga joylashgan ikki teg uchun oddiy bir misol quyida keltirilgan:</p>
<br />
<br /><V> Ushbu matnga bir teg ta’sir ko‘rsatadi.
<br />
<br /><i> Bu matnga esa ikki teg ta’sir ko‘rsatatdi <i>
<br />
<br /><V>
<p>Ayrim teglar faqat o‘zi e’lon qilingan joyga ta’sir etadi. Bunday xolda tegni yopishga zarurat yo‘q. Ular yakka teglar deb ataladi. Agar tegning nomini yozishda xatoga yo‘l qo‘yilsa, ya’ni HTML tilida mavjud bo‘lmagan so‘z yozilsa, u hech qanday ta’sir ko‘rsatmaydi.</p>
<br />
<br /><u><span lang="en-us">NTML</u></span>ning barcha teglari vazifasi va ishlash sohasiga ko‘ra ushbu asosiy guruhlarga bo‘linadi:
<p>xujjat tuzilmasini aniqlovchi teglar; </p>
<p>gipermatn bo‘laklari (paragraflar, ro‘yxatlar, jadvallar, tasvirlar)ni <a href="/mavzu-html5-tili-internetda-ishlatiladigan-asosiy-texnologiya.html">tashkil etuvchi teglar</a>;
</p>
<p>gipermatn murojaatlari; </p>
<p>dialog tashkil etish uchun shakllar;
</p>
<p>• dasturlarni chaqirish va h.k.</p>
<p>Har bir teg o‘z xususiyatlari (atributlar) ga ega bo‘lishi mumkin:
<br />
<br /><Teg 1-atribut nomi=“qiymat“ 2-atribut nomi=“qiymat“> ... </Teg>
<br />
<br /><b>Teglarning atributlari</b><b>.</b> Ko‘p xollarda teglar atributlardan foydalanib o‘z ta’sirlarini o‘zgartirishi mumkin. Atributlar-bu tegni to‘ldiruvchi xizmatchi so‘z bo‘lib, bir-birdan bo‘sh joy bilan ajratib yoziladi. Agar tegda bir necha atribut ishlatilsa, u xolda ular ham bir-biridan bo‘sh joy bilan ajratib yoziladi. Ular juft teglarda faqat ochiluvchiga qo‘shiladi. Yopiluvchi teglar hech qachon atributga ega bo‘lmaydi. Shuning uchun yopiluvchi teglarga atribut qo‘shib yozilmaydi.
</p>
<p>Atributlar va qiymatlarni yozish qoidalari:</p>
<p>teg nomidan so‘ng probel (bo‘sh joy) qo‘yib atributlarni boshlash mumkin;
</p>
<p>atributlar bir-biridan <a href="/amudaryo-muhandislik-texnikumi-v2.html">probellar bilan ajratiladi</a>; </p>
<p>atributlarni sanash tartibi ixtiyoriy;
</p>
<p>atributlar yopish tegida qayta takrorlanmaydi; </p>
<p>atributlarning qiymatlari barobardan keyin " " qavslari ichida beriladi;
</p>
<p>teglar nomida probellar ishlatilmaydi. </p>
<p>Masalan:<span> </span><EM><body bgcolor="FFFF00" text="000000">... va va tegining quyidagi atributlari bo‘lishi mumkin:
<br />
<br /><b>bgcolor</b> – xujjat foni rangini belgilaydi. Boshqa qiymat ko‘rsatilmasa oq, lekin turli brauzerlarda (masalan uchinchi avlodda kulrang edi) boshqacha ranglar ishlatilishi mumkin;
<br />
<br /><b>text</b> – matn rangini belgilaydi. Boshqa qiymat ko‘rsatilmasa qora rang;
<br />
<br /><b>link</b> – matnda kiritilgan va hali siz chaqirmagan gipermurojaat <a href="/arduino-platasiga-ulangan-rgb-led-rangini-boshqarish-uchun-pot.html">rangini belgilaydi</a>;
<br />
<br /><b>vlink</b> – siz chaqirib ulgurgan gipermurojaat rangini belgilaydi;
</p>
<p>vlink ning qiymati link nikidan farqlanishi maqsadga muvofiq;</p>
<br />
<br /><b>alink</b> – siz kursor ilan belgilagan gipermurojaat rangini belgilaydi;
<br />
<br /><b>background</b> – fon tasvirining URL ini ko‘rsatadi;
<p>bgproperties=fixed–fon tasviri matn bilan birga harakatlanmasligini ko‘rstadi, ya’ni matn fonga nisbatan harakatlanadi; </p>
<br />
<br /><b>leftmargin</b> – brauzer darchasining chap chekkasidan matnni qochirish kattaligini ko‘rsatadi. Boshqa qiymat ko‘rsatilmasa 10 piksel bo‘ladi;
<br />
<br /><b>marginwidth</b> – xuddi shu narsaning o‘zi, <a href="/anglichansha-sz-bolp-kriwdi-tmiyinlew-krsetiw.html">faqat Netscape uchun</a>;
<br />
<br /><b>topmargin</b> – brauzer darchasida yuqoridan matnni qochirish kattaligini ko‘rsatadi. Boshqa qiymat ko‘rsatilmasa 10 piksel bo‘ladi;
<br />
<br /><b>marginheight</b> – xuddi shu narsaning o‘zi, faqat Netscape uchun;
<p>Oxirgi ikkitasi agar siz sayt uchun yaratayotgan xujjatlarni chap va yuqori chegaralarga zich chiqarishni hohlasangiz sizga asqotadi. Agar leftmargin=0 hamda topmargin=0 deb e’lon qilmasangiz, u xolda matningiz yuqori va chap chegaralardan 10 pikselga uzoqlashadi. BGCOLOR, TEXT, LINK, ALINK va VLINK atributlarining qiymatlari yo o‘n oltilik sanoq tizimidagi RGB - qiymatda, yoki asosiy 16 rangdan biri bo‘ladi.</p>
<br />
<br /><i>Masalan: </i>
<br />
<br /><body background="images/bricks.jpg" bgcolor="#202020" text=
<p>"#FFFFFF" link="#FF0000" vlink="#505050" marginheight="30" topmargin="30" leftmargin="40" marginwidth="40"></p>
<p>Shunday qilib, HTML xujjatning tuzilmasini tasnif qilish uchun zarur bo‘lgan teglar haqidagi to‘liq ma’lumotga egamiz. HTML xujjatning oddiy tuzilmasi quyidagi ko‘rinishga ega bo‘lishi mumkin:
<br />
<br /><HTML>
<br />
<br /><span lang="en-us"><HEAD>
<br />
<br /><TITLE> Web–xujjatning sarlavhasi
Axborot texnologiyalari fani predmeti.
Assalomu alaykum bu mening birinchi sahifam
hush kelibsiz !
Ассалому алайкум, бу менинг биринчи сахифамдир.
="#CC0000"> Хуш келибсиз !
="#336699">.
</span><span>Менинг</span><span> </span><span>биринчи</span><span> </span><span>сахифам</span><span>
Ассалому алайкум, бу менинг биринчи сахифамдир .
Хуш келибсиз ! :)
="#336699" bgcolor="#00FFFF">
Ассалому алайкум, бу менинг биринчи сахифамдир.
="#CC0000"> Хуш келибсиз ! :)
="#336699 bgcolor="#000000">
4 -машқ
теги ёрдамида аниқланади.
="center">матн
="left">текст
="right">текст
Менинг <a href="/raqamli-iqtisodiyot-v8.html">биринчи сахифам </a>
="center">
Ассалому алайкум, бу менинг биринчи сахифамдир.
="#CC0000"> Хуш келибсиз !
қ"#336699" bgcolorқ"#000000">
Ассалому алайкум, бу менинг биринчи сахифамдир.
қ"#CC0000"> Хуш келибсиз ! :)
қ"#336699" bgcolorқ"#000000">
Ассалому алайкум, бу менинг биринчи сахифамдир.
қ"#CC0000"> Хуш келибсиз ! :)
қ"justify">
Интернетдан фойдаланиш учун унинг асосини, дастурий таъминотини жуда яхши билишимиз керак. Бунинг учун Web-сахифа, сайт, адрес, файллар, уларнинг таркиби ва турлари ћақида мукаммал билимга эга бўлишимиз керак.
Ассалому алайкум, бу менинг биринчи сахифамдир.
="#CC0000"> Хуш келибсиз !
="#336699">
Ассалому алайкум, бу менинг биринчи сахифамдир .
Хуш келибсиз ! :)
Менинг биринчи сахифам
Ассалому алайкум, бу менинг биринчи сахифамдир.
Хуш келибсиз ! :)
![]()
Tayyorlanadigan hisobotning mundarijasi:
1. Laboratoriya ishi nomi va maqsadi.
2. sahifa daturini kiritish.
3. natijani taqdim etish.
4. Xulosa.
Nazorat savollari:
-
1. Gipermatn tushunchasining asosiy g‘oyasi qachon va qayerda paydo bo‘lgan.
-
Gipermatn texnologiyasi qanday yangi imkoniyatlani yaratdi?
-
Gipermatn qanday tarkibiy qismlarga ega?
-
Avtomatlashtirilgan va avtomatlashtirilmagan gipermatnlarga misollar keltiring.
-
Giperbog‘lanishlarga ega bo‘lgan xujjatlar qanday yaratiladi?
-
WEB-sahifasidagi giper bog‘lanishlarni o‘rnattish uchun qaysi teglardan foydalanish mumkin?
-
Xujjatlar aro giperbog‘lanishlarni tashkil qilish qanday amalga oshiriladi?
-
va teglari qanday maqsadda ishlatiladi?
-
Xujjat bilan uning bo‘limlari orasidagi giperbog‘lanishlarni tashkil etish qanday amalga oshiriladi?
34.LABORAТORIYA ISHI
-
MAVZU: Hujjatlar o’rtasida bog’lanishlarni tashkil etish.
|
|
Kerakli texnik vositalar: Shaxsiy kompyuterlardan iborat kompyuter sinfi.
Kerakli dasturiy vositalar:
Ishning maqsadi: Тalabalarni axborot xavfsizligi, axborotlarni himoyalash usullari, antivirus dasturlari va ularning vazifalari bilan tanishtirish.
Topshiriqlar: Web sahifalarda hujjatlar o’rtasidagi bog’lanishlarni amalga oshirish.
Bajarish tartibi:
![]()
![]()
(1) - ![]()
(2) - ![]()
(3) - ![]()
(1) - ![]()
(2) - ![]()
(3) - ![]()
(4) - ![]()
(5) - ![]()
(6) - ![]()
Bloknot dasturini ishga tushirib, unda «сахифа6.html» faylni oching va quyidagi o’zgartirishlar kiriting.
Менинг биринчи сахифам
Ассалому алайкум, бу менинг биринчи сахифамдир.
Хуш келибсиз ! :)
![]()
Tayyorlanadigan hisobotning mundarijasi:
1. Laboratoriya ishi nomi va maqsadi.
2. sahifani tayorlab taqdimetish.
3. Xulosa
Nazorat savollari:
-
1.Gipermatn tushunchasining asosiy g‘oyasi qachon va qayerda paydo bo‘lgan.
-
2.Gipermatn texnologiyasi qanday yangi imkoniyatlani yaratdi?
-
3.Gipermatn qanday tarkibiy qismlarga ega?
-
Avtomatlashtirilgan va avtomatlashtirilmagan gipermatnlarga misollar keltiring.
-
Giperbog‘lanishlarga ega bo‘lgan xujjatlar qanday yaratiladi?
-
WEB-sahifasidagi giper bog‘lanishlarni o‘rnattish uchun qaysi teglardan foydalanish mumkin?
-
Xujjatlar aro giperbog‘lanishlarni tashkil qilish qanday amalga oshiriladi?
-
va teglari qanday maqsadda ishlatiladi?
-
Xujjat bilan uning bo‘limlari orasidagi giperbog‘lanishlarni tashkil etish qanday amalga oshiriladi?
|
