O ZBEKISTON RESPUBLIKASI OLIY VA O RTA TA LIM VAZIRLIGI. TOSHKENT TO QIMACHILIK VA YENGIL SANOAT INSTITUTI. INFORMATIKA VA AT kafedrasi KURS ISHI

Transcription

1 O ZBEKISTON RESPUBLIKASI OLIY VA O RTA TA LIM VAZIRLIGI. TOSHKENT TO QIMACHILIK VA YENGIL SANOAT INSTITUTI INFORMATIKA VA AT kafedrasi KURS ISHI Mavzu:Html tili va unda web sahifalar yaratish Bajardi: Qobulov M. Guruh: Kurs ishi rahbari:qulmurodov M.E. Toshkent-2015

2 Html tili va unda web sahifalar yaratish Mundarija: I. Kirish... 2 II. Asosiy qism: 2.1 Html asosiy teglari Html Sahifaga tasvir joylashtirish Html hujjatlarni bir-biriga bog'lash Matnni tahrirlash III. Amaliy qism: 3.1 O zbekiston Respublikasi Konstitutsiyasiga doir web sahifa yaratish.23 Xulosa Foydalanilgan adabiyotlar...30

3 Kirish So'nggi paytda Internetni shiddat bilan rivojlanishi va uning foydalanuvchilari sonini kundan-kunga ortib borishi bois Internetda turli yo'nalishda web sahifalar soni ham ortib bormoqda. Internet orqali savdo-sotiq ishlarini olib borish, masofadan turib universitetlarga o'qishga kirish va nufuzli universitetlar diplomini olish ham mumkin. Turli provayderlar nafaqat firma va kompaniyalar balki dunyo bo'ylab millati, dini va tilaidan qatiy nazar oddiy fuqarolar uchun ham internetda o'z sahifalarini joylashtirish imkoniyatini taklif etmoqda. Internetda o'z sahifangizni yaratish uchun siz albatta web sahifa yaratish texnalogiyasi haqida dastlabki tushunchaga ega bo'lishingiz lozim. Ushbu qo'llanma bilan tanishib chiqsangiz web sahifa yaratish usullari va uning uchun eng zarur bo'lgan - HTML - hyper text markup language (gippermatnlar belgilash tili) haqida dastlabki ma'lumotga ega bo'lasiz. HTML - bu dasturlash tili emas, balki web safivada matn, tasvir va boshqa ma'lumotlarni qanday ko'rinishda joylashtirilishini belgilovchi vosita. WEB SITE Agarda internetda ishlagan bo lsangiz siz internet sahifasi nima ekanligini ko rgansiz. Misol qilib yoki kabi sahifalar bular hammasi Internet sitelardir, ularni har bir oynachasi bir web sahifadir. Har bir internet sahifa HTML ko dlari orqali yaratiladi. HTML bu HyperText Markup Language. Bu degani, bir programmalash tilidir.

4 2.1 Html teglari Bu HTML hujjatdagi turli elementlarni (matn, tasvir va boshqalar) web sahifada qanday ko'rinishda aks etirish lozimligini brauserga ko'rsatuvchi komandalar. Teglar malum o'lcham va vasifani bajaruvchi komandalardir. Teg quyidagi ko'rinishda bo'ladi: <TEG>hujjat elementi</teg> Ko'rib turgasningizdek teglar '<>' uchburchaksimon qo'shtirnoq ichiga olib yoziladi. Uchbur-chaksimon qo'shtirnoq ichiga Teg nomi va uning o'lchamlari yoziladi. Quyida teg va uning o'lchamlari yozilishiga misol keltirilgan: <B><FONT COLOR=red>Hello World!</FONT></B> Misolda keltirilgan teglar HTML hujjatga kiritilganda Hello World! jumla qizil rangda, ajratilib yoziladi. Teglar orasida kiritilgan matn, teg o'lchamlarida qanday komandalar berilgan bo'lsa shu komandalarga bo'ysingan holda ekranda hosil bo'ladi. Bu misolda Hello World! jumlasiga nisbatan ikkita teg ishlatilgan. 1 - teg <B> va 2 - teg <FONT>. Hello World! jumlasidan keyin yana ikki teg </B> va</font> yozilgan. Bularning farqi shundaki, birinchi ikkita teg ochuvchi va jumladan so'ng yozilgan ikkita teg esa jumla oldida yozilgan teglarni davomi ya ni yopuvchi teglardir. Yopuvchi teglarning vazifasi ocxilgan teg ta'sir maydoni tugaganligini belgilashdan iborat. HTML hujjatda deyarli barcha teglarni yopish lozim. '/' slesh belgisini qo'shish orqali yopuvchi teg yasaladi. Har doim eng oxiri ochgan tegni birinchi navbatda yopishni unitmang. Teglarning ocxilish va yopilish tartibini alishtirib yubormang, aks holda xatoliklar kelib chiqishi mumkin. Endi e tiboringizni <FONT COLOR=red> ga qaratamiz FONT (shrift) teg nomi,

5 COLOR (rang) - esa tegning tarkibidagi qo'shimcha o'lcham, red (qizil) - rangning belgisi. Bu teg matnni qizil harflar bilan yozilishini anglatadi. Ayni misolda ranglarni o'zgartirish uchun red so'zi orniga boshqa rang nomini kiritish kifoya. Mant shu zahoti siz kiritgan rang bilan ifodalanadi. Ushbu teg va uning qo'shimcha o'lchamlari qanday yozilishini eslab qoling. Bu sizga keyinchalik ham kerak bo ladi. Teglarning o'chami bir nechta bo'lishi mumkin va ularni kiritganda harbiri orasida bo'sh katakcha ya ni probel qoldirishni chiqarmang. Teglarni ishlatish shartlari Siz HTMLda teg tushunchasi haqida qisqacha tushunchaga ega bo'ldingiz. HTML teglarni ishlatganda ularni to'gri yozish muhim ahamiyatga ega. Quyida teglarni to'gri yozish va ishlatish shartlari haqida so'z yuritamiz. Bu borada quyidagi qoidalar mavjud: Barcha teglar uchburchakli qo'shtirnoq ichida yoziladi: <TEG> Ochuvchi teg -uchburchakli qo'shtirnoq, teg nomi va uning qo'shimcha o'lchamlari (zarur bo'lgan taqdirda). Yopuvchi teg - uchburchakli qo'shtirnoq, '/' slesh belgisi va teg nomi. Probel orqali yoziluvchi teglar o'lchamlari. Teg nomidan so'ng uning qo'shimcha o'lchamlari bo'lishi mumkin. Barcha o'lchamlar probel orqali ajratib yoziladi. Bitta harf hajmidagi bo'sh joy qoldirilish HTMLda probelni anglatadi. <TEG 1 - O'lcham = yuklatilgan vazifa 2 - O'lcham = yuklatilgan vazifa...> Qo'shtirnoq ichida yoziluvchi yuklatilgan vazifalar ma'nosi. Ma'lum vazifani bajaruvchi komandalar tenglik belgisidan so'ng qo'shtirnoq "..." ichida yoziladi. Agar probel ishlatilmagan taqdirda qo'shtirnoqni tushirib qoldirish mumkin. <FONT SIZE=2 FACE="Times Roman"> Har xil xatoliklar kelib chiqishini oldini olish uchun qo'shtirnoqlarni ishlatish maqsadga muvoffiq. Aksariyat teglar yakunlash komandasini talab qiladi.

6 Agar siz tegni yopmagan taqdiringizda aksariyat hollarda xatolik kelib chiqmaydi. Ammo ochilgan teg o lchamlari butun hujjatga ta'sir qiladi. Jadval ichida yopilmagan taqdirda bu xatolikni keltirib chiqarishi mumkin. Bu haqda jadvallar tuzish bo'limida so'z yuritamiz. Teglarni yopish qoidasi Har doim teglarni qatiy tartibga rioya qilgan holda yoping. Birinchi navbatda eng ohiri ocxilgan teg yopiladi va shu tariqa navbati bo'yicha barchasi yopiladi. <TEG1> <TEG2> <TEG3>... </TEG3> </TEG2> </TEG1> Teg harflar yozish shartlari. HTML hujjatda teglarni katta yoki kichik harflar bilan yozilishi hech qanday ahamiyatga ega emas. Hamma teglarni katta yoki kichik harflar bilan yozishingiz mumkin hattoki mana bunday <teg></teg> Sizga maslahimiz: barcha teglarni bir xil shakilda yozgan maqul. Teg o'lchamlarini yozish tartibi qanday bo'lishi ahamiyatsiz. Teg tarkibidagi o lchamlar qanday tartibda yozishingiz hech qanday o zgarishlarga sabab bo'lmaydi. Quyidagi ikki variyant ham to'g'ri: <TEG 1 - o'lcham=yuklatilgan vazifa. 2 - o'lcham=yuklatilgan vazifa. 3 - o'lcham=yuklatilgan vazifa.> <TEG 3 - o'cham=yuklatilgan vazifa. 1 - o'lcham=yuklatilgan vazifa. 2 - o'lcham=yuklatilgan vazifa.> HTML hujjat ichki tarkibi Har qanday HTML hujjat ichki qismi quyidagilarda tashkil topgan bo'ladi: <HTML> bu teg HTML hujjatni ochish uchun hizmat qiladi va u HTML hujjatning birinchi ochuvchi va ohirgi yupuvchi teg. Uning yagona vazifasi, mazkur hujjatni ochayotgan dasturga bu fayl HTML hujjatligi haqida axborot berishdan iborat. <HEAD> HEAD tegidan so'ng HTML hujjatning sitemaviy axborotlari haqida ma'lumot beradi.

7 <TITLE> Bu teg ochuvchi teg <HEAD> va yopuvchi teg /HEAD> orasida yoziladi. Ochuvchi va yopuvchi TITLE orasida kiritilgan axborot siz yaratayotgan hujjat nomini anglatadi. Siz kiritgan nom Brauser dasturi tomonidan va internetdagi qidiruv tizimlari tomonidan ishlatiladi. <BODY> BODY ochuvchi va yupuvchi teglari orasida yozilganlarning barchasi sizning HTML hujjatingizning tanasi hisoblanadi. Agar siz ushbu teg orasiga matn yozsangiz yoki tasvir kiritsangiz - bularning barchasini brauser ekranda namoyish etadi. Har qanday HTML hujjat quyida keltirilgan tartibda yozilishi shart: 2.2 Htmlda sahifaga tasvir joylashtirish Internet bilan ishlovchi dasturlar tasvirlarni (grafik elementlar) ochish imkoniga ega bo'lishi bilan internetda mavjud sahifalarning deyarli barchasi tasvirli axborotarni nashir eta boshladi. Siz yaratgan web sahifa qiziqarli va chiroyli dizayn asosiga qurilgan bo'lsa uning o'quvvhilar soni shubhasiz ortadi. Tarvirlar yordamida harakatlanuvchi tugmalar va Gif animatziyalarni kiritish mumkin. Biroq tasvirlar bilan ishlashda ularni hajmi va formatiga e tibor berish kerak. Hozirgi paytda internetga joylashtirilayotgan deyarli barcha sahifalarda ishlatilayotgan tasvirlar formati *.JPEG yoki *. GIF ni tashkil etadi. Bunga asosiy sabab, bu formatdagi tasvirlar hajmi juda ham oz. Bu formatdagi tasvirlar ishlatilganda Web sahifa hajmi ortib ketmaydi va sizning web sahifangizdan foydalanuvchi sahifani ochilishini uzoq vaqt kutmaydi. Agar siz boshqa formatdagi tasvirlardan web sahifani bezashda foydalansangiz uning hajmi ortib ketadi va undan foydalanuvcxilarga sahifani ochishda muammolar keltirib chiqaradi. Web safini bezatishda uning dizayiniga *.GIF formatdagi tasvirlardan foydalaning boshqa tasvirlar uchun *.JPEG dan foydalanishingiz mumkin.

8 <IMG SRC="image.gif" WIDTH=60 HEIGHT=70 BORDER=0 ALT="IMAGE" ALIGN=left> HTML hujjatning qaysi joyiga <IMG> tegini joylashtirsangiz, o sha joyda siz ko'rib turgandek tasvir hosil bo'lad. Yuqorida yozilgan <IMG> tegiga e tibor bersangiz, uni yopuvchi tegi yo'qligini sezasiz. Bu tegni yopish shart emas. Faqatgina uni ishlatishda talab qilinadigan shartlardan biri SRC. U siz tasvir sahifada ochilmaydi. Quyida <IMG> tegi o'lchamlari tasnifini keltiramiz. SRC Bu o'lcham ortida tasvir nomi va joylashgan joyga yo'l ko'rsatiladi. Uning yordamida brouser tasvirni qidiradi va ochishga harakat qiladi. Standart holda web sahifada ishlatilgan tasvirlar IMAGE papkasiga joylashtiriladi. Web sihifani o z kompuyteringizda yaratayotgan paytda tasvirga bo'lgan yo'lni quyidagi tartibda berasiz: C/Web sahifa/images/photo_01.gif bunda '/' belgisi papkalar nomlarini bir-biridan ajratish uchun ishlatiladi. Agar siz qo'ymoqchi bo'lgan fayl HTML fayllar joylashgan papkada bo'lsa, u holda tasvir joylashgan papkaga yo'lni mana bunday ifodalash mumkin: Images/photo_01.gif. Web sahifa internetga joylashtirilgan taqdirda tasvir joylashgan papkaga yo'l quyidagi tarzda ifodalanadi: sihifa nomi/images/ photo_01.gif WIDTH Tasvir eni o'lchamlarini pikselda belgilaydi. Agar orginal tasvir eni siz qo'ymoqchi bo'lgan joyga kattalik qilsa, siz uni bu teg yordamida uning enini qisqartirishingiz mumkin. Eng yaxshi variant, tasvirni tasvir tahrirlagich dasturi yordamida oldindan kerakli hajimlarini belgilab olishdir. Siz tasvirlarni web sahifaga joylashtirayotgan paytda har doim tasvir tahrirlagich dasturnii aktivlash- tirib qo'ying va o lchamlar to'g'ri kelmagan taqdirda uni tasvir bilan ishlovchi dastur yordamida qayta ishlang. HEIGHT Tasvir bo'yi o'lchamlarini kiritish uchun hizmat qiladi. Agar siz tasvirning real o'lchamlarini o'zgartirmoqchi bo'lsangiz unda: tasvir eni uchun WIDTH va tasvir bo'yi uchun HEIGHT teglaridan foydalanishingiz mumkin. Tasvir o'lchami 1 dan boshlab cheksiz sanoq sonlarni kiritishingiz mumkin.

9 BORDER Sahifaga kiritilgan tasvir atrofida chiziqli ramka hosil qiladi. Ramka qalinligin piksellar yordamida o'zgartiriladi. Ramka qalinligini sonlar bilan 1 dan cheksiz. Sahifada tasvir kiritigan maydondagi matn qaysi rangda bo'lsa, tasvir ramkasi ham o'sha rangda bo'ladi. ALT Agar brouser yoki sahifani ochuvchi dastur tasvirlarni ochish imkoniga ega bo'lmagan taqdirda ushbu o'lchamdan so'ng kiritilgan matn aynan shu joyda tasvir borligidan habar beradi. Brauser tasvirlarni ko'rsatish imkoniga ega bo'lsa, tasvir ustiga kursor olib kelinganda ALT o'lchamidan so'ng qanday so'z kiritilgan bo'lsa shu so'z yoki jumla kursor ostida hozil bo'ladi. Bu o'lcham ostida tasvir bilan bo'g'liq bo'lgan turli qo'shimcha ma'lumotlar kiritish mumkin. Agar brauser tasvirni umuman ko'rsatmagan taqdirda, tasvir hosil bo'lishi lozim bo'lgan maydonda ALT o'lchamidan so'ng kiritilgan ma'lumot ekranda hosil bo'ladi. ALIGN Bu o'lcham grafik elemet sahifadagi boshqa elementlarga nisbatan joylashtirish o'rnini tekislash uchun ishlatiladi. Yuqorida keltirilgan tasvir jadval va matnga nisbatan ALIGN teng left. Bu tasvirni sahifaning chap burchagida jadval va matnga nisbatan joylashtirilsin komandasini anglatadi. ALIGN o'lchamining ishlatilishi mumkin bo'lgan qo'shimcha komandalari: IMG tegini qo'llash qoidalari <IMG> tegi bilan bo'g'liq bo lgan, quyida keltirilgan asosiy qoidalar bilan tanishib chiqing va o z sahifangizni yaratishda ushbu qoidalarga doim rioya qilishga harakat qiling. Tasvir nomi va joylashgan o rnini yozganda harflarning bir xilda bo lishini taminlash katta ahamiyatga ega. Tasvir joylashgan joy nomi va tasvirning nomini kiritganda harflarni bir xilda yozilishi shart. Biror bir harfni tushrib qoldirish yoki xato yozilishi tasvirni ochishda xatoliklarni keltirib chiqaradi. Tasvir yoki papka nomini kiritganda probel ishlatmang.

10 Web safifani yaratayotganingizda fayllar yoki papkalar nomini kiritganda probel (bo'shliq) ishlatmang. Agar siz kiritgan nom ikki yoki bir necha so'zlardan iborat bo'lsa, probel ornida _ (pastdan chiziqsha) ishlatishingiz mumkin. Masalan:.../Chet_elga_sayohat/Germaniya/Baden_baden_01.jpeg Internetda ishlatiluvchi tasvir formatlari. Hozirgi paytda Internetda ikki xil formatdagi tasvirlar keng qollanilib kelinmoqda. Bu formatlar: GIF (bu formatdagi tasvirlar *.gif qisqartmasiga ega) hamda JPEG (bu formatdagi tasvirlar esa *. jpg yoki *.jpeg qisqartmasiga ega). Siz ham ushbu formatdagi tasvirlardan foydalaning. Boshqa formatdagi tasvirlarni aksariyat brauserlar ocha omidi. Har doim WIDTH va HEIGHT o'lchamlarini kiritishga harakat qiling. Bu sizning web sahifangizni ochilishini tezlashtiradi va tasvirlarni asl o lchamda bo'lishini ta'minlaydi. Tasvir hajmini suniy kichraytirish. WIDTH va HEIGHT orqali tasvirning real o'lchamini kichraytirish mumkin. Ammo bu usuldan iloji boricha kamroq foydalangan maqul. Eng yaxshi usul tasvirni real o'lchamini tasvir tahrirlagich dastur yordamida kichraytirish. Bu usul tasvirning ochilish vaqtini kamaytiradi. Tasvir hajmini suniy kattalashtirish. Tasvir o lchami kattalashtirilganda yoki kichraytirilganda uning sifatida o'zgarish sodir bo'ladi. Agar siz o lchamlarni o'zgartirganda bir xillikka e tibor bermasangiz, tasvir sifatini buzilishiga olib keladi. WIDTH va HEIGHT o lchamlari orqali tasvir hajmini kattalashtirganda, real o'lchamni 2 matra, 3 marta va shu tariqa oshishiga erishish kerak. Masalan tasvirning real o lchami WIDTH = 100, HEIGTH 200 ga teng bo'lsa, uni ikki marta kattalashtirganda WIDTH=200, HEIGTH= 400 ga teng bo'lishi shart. Bu usul tasvir sifatidagi salbiy o'zgarishlarni bir oz yumshatadi. Shuningdek, ayni holatni tasvir o'lchamini kichraytirishda ham qo'llash maqsadga muvoffiq. Har doim ALT o'lchamini qo'llang. Har doim ALT dan so'ng tasvirga aloqador qo'shimcha axborotni kiritishga harakat

11 qiling. Bunnig asosiy sababi, siz joylashtirgan tasvir ochilmangan taqdirda, Internetdan foydalanuvchi siz kiritgan tasvir izohini o'qiydi va minimum axborotga ega bo'ladi. 2.3 Havolalar - HTML hujjatlarni bir-biriga bog'lash Web sahifaga tasvir joylashtirishni o'zlashtirib olganingizdan so'ng, endigi navbatda havolalar haqida tushuncha olishingizning ayni mavridi. Havolar tufayli internet hozirgi mavqiyga erishdi. Havolalar yordamida ikki va undan ortiq (cheksiz) web sahaifalarni bir-biriga bo'glashingiz mumkin. Havola rus tilida "ссылка" deb ataladi. Havolaga bosish orqali siz ikkinchi sahifani ochishingiz mumkin. Havolalar yorsdamida web sahifangiz uchun menyu tuzishingiz mumkin. Havaolalar sizning web sahifangizdan foydalanuvchini sahifa bo'ylab tom ma'noda sayohat qilishi imkonini beradi va unga to'g'ri yo'lni ko'rsatib turadi. Siz yaratgan web sahifani ko'p qavatli katta binoga har bir sahifani shu binoning xonalariga taqqoslash mumkin. Bino bo'ylab sayohat qilayotgan "o'quvchi" har bir xonani ko'zdan kechirib chiqadi. Uni bino ichida adashib ketmasligi va kirgan xonalariga qaytib kirmasligi va buni yodda tutishi uchun unga bino xaritasi lozim. Havolalar ana shu "bino xaritasi" vazifasini o'taydi. Xarita aniq va ustalik bilan tuzilgan bo'lsa undan foydalanuvchi siz chizib bergan marshirut bo'yicha harakatlanadi hamda har bir sahifa bilan tanishib chiqadi. Navbatdagi oldimizda turgan vasifa "bino xaritasini" tuzushdan iborat. Buning uchun biz eng birinchi navbatda havolla tushunchasining tub ma'nosiga yetishimiz lozim. Havolalar tuzish usullari Havolalarni ta'sir doirasi va ularni qaysi sahifa bilan bog'lash vazifasini <A> ochuvchi hamda </A> yopuvchi teglari orasida belgilanadi. Ushbu teglar orasida uning o'lchamlari va kalit so'z joylashtiriladi. Ushbu teg orasida nimalarni joylashtirish mumkin? Deyarli hamma narsani. Bu

12 matn, tasvir, jadval va hatto harakatlanuvchi tasvir ham bo'lishi mumkin. Ulardan qaysi birini joylashtirish o'zingizga havola. Bu bo'limda oldimizga qo'ygan maqsadimiz havovolar tuzish. Maqsadga erishishning eng oson usuli barchasini oddiy misollardan boshlash. Shunga amal qilgan holda sizga havola tuzishning eng oddiy misolini keltiramiz: <A href="/pictures.html" mce_href="/pictures.html">bu sahifada</a> mening hayotim bilan bog'liq tasvirlar joylashgan. Tasvirlarni havola sifatida namoyon etish uchun <A> va </A> teglari orasida <IMG> tegi yordamida tasvir nomini va u joylashgan papkaga yo'lni ko'rsating. <A href="/pictures.html" mce_href="/pictures.html"> <IMG SRC="img/photo. jpeg" WIDTH="100" HEIGHT="100" ALT="Mening foto galeriyam"> </A> Bu sahifada mening hayotim bilan bog'liq tasvirlar joylashgan. Havolalar - <A> tegining qo'shimcha komandalari tasnifi Boshqa HTML teglari kabi <A> tegining ham qo'shimcha komandalari mavjud. Quyida ushbu komandalarning tasnifi keltiriladi. HREF Bu komanda yordamida havola qilinishi lozim bo'lgan HTML hujjat nomi va uning joylashgan joyi belgilanadi. Bu komanda <IMG> tegining SRC komandasi kabi bir xil vazifani bajaradi. <IMG> tegining SRC komandasi yordamida tasvir nomi va u joylashgan papkaga yo'l ko'rsatilsa, HREF yordamida HTML hujjat nomi va u joylashgan papkaga yo'l tasvirlasnadi. Href - URL-address, ya ni qaysi address bo yicha o tadi. Name - <A> tegning nomi. Target -qayerga ochishni belgilaydi. Havolalar tuzishning maxsus hollari Havolalar yordamida nafaqat boshqa HTML hujjatni ochish, balki mavjud bir hujjat ichida ham ichki havolalarni qo'llash mumkin. Agar siz yaratayotgan sahifadagi matn haddan tashqari ko'p bo'lsa va uni mavzu bo'yicha bo'lish imkoni mavjud bo'lmagan taqdirda siz sahifa ichiga ma'lum kalit so'zlardan foydalanib

13 havolalar menyusini yaratishingiz mumkin. Bunday ichgi havolalar menyusi sahifadagi matnni o'qish jarayonini tezlashtiradi va o quvchi o'zi uchun kerakli ma'lumotni butun matn ichidan topib olishi oson kechadi. Ichki havola <A> tegining NAME komandasi yordamida amalga oshiriladi. NAME <A> tegi tarkibida yoziladi va HTML hujjatdagi matn tarkibidagi ma'lum kalit so'zga bog'lanadi. HTML hujjatning biror bir joyiga havola qilish uchun havola qilinayotgan nuqtani <A> tegining NAME komandasi yordamida belgilab olish zarur. Masalan sahifa yakunidan uning boshiga qaytish uchun HTMl hujjat boshlanishida quyidagi kodni yozamiz: <A NAME="Top of Page"></A> Songra sahifa yakunida matn yakun topgan joydan so'ng manabu kodni teramis: <A HREF="#Top of Page">Yuqoriga qaytish </A> Agar siz sahifani brauserda ochib "Yuqoriga qaytish" havolasi ustida kursorni bossangiz, brauser yana matn boshiga "#Top of Page" nuqtasiga qaytadi. "#Top of Page" havola murojat qilayotgan nuqta nomi. Teg kodlarini terishda xatolikka yo'l qo'ysangiz, bu katta xatolik emas. Faqatgina havola ishlamaydi holos. Shuningdek ichki havolani boshqa HTML fayldagi matnning biror bir nuqtasiga ham bog'lash mumkin. Aytaylik sayohat.html Germaniya bo'limiga murojat qilish lozim.buning uchun quyidagi usuldagi kod yoziladi: <A href="/sayohat.html#germaniya" mce_href="/sayohat.html#germaniya">germaniyaga sayohat</a> Yuqoridagi misoldan ko'rinib turganidek, avval HTML hujjat nomi (agar u boshqa papkada joylashgan bo'lsa, u holda faylga bo'lgan yo'l, papka nomi) kiritiladi va # simvolidan so'ng havola murojat qilayotgan nuqta nomi. Navbatdagi misolda HTML teglar qanday yozilganiga e tibor bering: Havolalar - qo'shimcha imkoniyatlar Havolalarni nafaqat HTML fayl yoki hujjat ichidagi kalit so'zga, balki FTP

14 serverlarda saqlanayotgan fayllar va (elektron pochta) ga ham tuzish imkoniyati mavjud. FTP havolalar FTP serverlarda saqlanadigan fayilalrni yuklash uchun, FTP havolalar tuziladi. FTP serverlarda turli fayllar yoki dasturlar internet orqali yuklash uchun saqlanadi. Aytaylik siz o'z sahifangizda biror - bir qiziqarli dastur, tasvir yoki musiqa haqida ma'lumot yozdingiz va uni yuklab olish uchun fayl saqlanayotgan FTP server manzilini havolada ko'rsatmoqchisiz. U holda fayl joylashgan FTP serverga havola quyidagi tarzda ifodalanadi: <A href="ftp://ftpsitename.com/programs/program.exe" mce_href="ftp://ftpsitename.com/programs/program.exe"> Faylni yuklash</a> havola (Elektron pochta) manzillarni aktivlashtirish uchun havola tuzish mimkin. manzil ko'rsatilgan havolani bosish bilan kompyuterga o'rnatilgan elektron pochtalar bilan ishlovchi dastur aktivlashadi va unda havolada ko'rsatilgan elektron pochta manzili ko'rsatilgan yangi oyna hozil bo'ladi va siz k'orsatilgan manzlga hat jonatishingiz mumkin.

15 manzilni havola sifatida belgilash uchun HREF komandasi o'rnida mailto:elektron pochta manzili yoziladi. Misol uchun: Mennig <A href="mailto: " mce_href="mailto: ">elektron pochtamga</a> ushbu o'quv qo'llanma haqidagi fikr- mulohazangizni yozing! Havolalar yozishning asosiy qoidalari Quyida havola tuzishda bilishingiz lozim bo'lgan oddiy qoidalar yozilgan. Ularni diqqat bilan o'qib chiqing va eslab qolishga harakat qiling. Havola tuzishda bu qoidalarga amal qilsangiz, siz tuzgan havolalar xatoliklarsiz ishlaydi. Harflarning bir xilda yozish va fayl yoki papka nomini to'g'ri ko'rsatish. Havola tuzilganda eng katta e tiborni siz murojat qilmoqchi bo'lgan faylga olib boruvchi yo'l aniq va to'g'ri ko'rsatilishi lozim. Bunda papka va fayl nomiga katta e tibor qarating. Ularning nomida arzimagan xatolikka yo'l qo'ysangiz havola ishlamaydi. Aytalik biror bir harfni tushib qolishi yoki bosh harf o'rniga kichik harif bilan yozilsa xatolik yuz berishi muqarrar. Shu bois, havola tuzishda aniqlik katta ahamiyatga ega. Fayl va papka nomini kiritganda probel ishlatmang. Web sahifa yaratish jarayonida fayl va papkalarni nomi ikki va undan ortiq so'zdan iborat bo'lsa sozlar orasida va ohirida probel ishlatmang. probel ishlatilgan fayl yoki papkaga havola murojat qilganda xatolik sodir bo'ladi. Kalit so'zlarga havola tuzish. Biror hujjat ichidagi kalit so'zga havola tuzganda, eng avvalo kalit so'zni <A> tegining NAME komandasi yordamida belgilab olish lozim. 2.4 Matn tahrirlash Matn tahrirlash mavzusi ushbu qo'llanmadagi eng katta bo'limlardan biri. O'zlashtirib olishingizni osonlashtirish uchun uni ikkiga bo'lib tushuntirishni lozim topdik. Ularning har biri matn tahrirlashda ishlatiladigan HTMl teglarni batafsil

16 tahlili misollar yordamida aks ettirilgan. Matnning alohida bo'laklarini tahrirlovchi teglar Matnning yirik bo'laklarini tahrirlovchi teglar "Matnning alohida bo'laklarini tahrirlovchi teglar" Quyida tasnifi keltirilgan barcha matn tahrirlash uchun ishlatiluvchi teglar ocxilgandan so'ng ularni yopish shart. Ocxilgan tegning ta'sir doirasi u yopulgunga qadar davom etadi. Agar siz tegni yopishni unutsangiz, uning ta'sir doirasi hujjat ohirigacha davom etadi. Barcha teglash man bunday shemada yoziladi: <TEG1><TEG2> Kerakli matn </TEG2></TEG1>. Har doim eng ohiri ocxilgan tegni birinchi bo'lib yopishni unitmang (qarang. teglarni yozish shartlari). <B> Kerakli matn </B> Bu teg orasida yozilgan matn qalin harflar bilan belgilanadi. <CITE> Kerakli matn</cite> Ushbu teg orasida yozilgan matnni brauserga bu matn tsitatligi haqida axborot beradi. Masalan Netscape Navigator bu teg orasida yozilgan matnni o'ng tamonga qiyalab yozilgan shakilda namayish qiladi. <CODE>Kerakli matn</code> Yozilgan matnni brauser tomonidan belgilangan o'lchamda bo'lishini ta'minlaydi. <EM>Kerakli matn</em> Bu teg orasida kiritilgan matnga alohida ma'no berdi. Bu matnga muallif o'quvchi e tiborini alohida qaratmoqcxiligini anglatadi. Turli brauserlar uni turlicha namoyon etadi. <I>Kerakli matn</i> Matn o'ng tomonga qiyshaytirib yoziladi. <BIG>Kerakli matn</big> Matnni kattalashtirish. Yozilgan matn boshqalariga nisbatan kattalashtirilgan harflar bilan belgilanadi. <SMALL>Kerakli matn</small> Mantni kichraytirish. Yozilgan matn boshqalariga misbatan kichiklashtirilga holda belgilanadi.

17 <STRIKE>Kerakli matn</strike> Teg orasida yozilgan matn ustidan chiziq tortiladi. <STRONG>Kerakli matn</strong> Matin ichidagi ayrim so'zlarni kuchli ajratib ko'rsatish uchun ishlatiladi. Kerakli <SUB>matn</SUB> Korinib turganidek bu teg orasida kiritilgan matn, mant chizig'idan pastda kichik harflar bilan yoziladi Kerakli <SUP>matn</SUP> Yuqorida keltirilgan tegning teskari shakildagisi bo'lib, u matnni yuqorida kichik harflar bilan yozilishini ta'minlaydi. <U>Kerakli matn</u> Yozilgan matn ostida chiziq tortiladi. Bu teg yordamida ayrim so'zlarni belgilab ko'rsatish mumkin. <CENTER> Kerakli matn </CENTER> Bu teg kiritilgan matnni sahifa yo'rtasida bo'lishini ta'minlaydi. Agar bu teg jadval ichidagi qollansa, u holda u jadval yacheykasi ichidagi matnga ta'sir etadi. Bu tegni jadval ichida qo'llash usullari haqida Jadvallar bilan ishlash bo'limida tushintirib o'tamiz. <BR> Bu teg matn qatorlarini surish uchun hizmat qiladi. Ma'lum jumladan so'ng ikkinchi jumlani yangi qatordan boshlamoqchi bo'lsanjiz, jumla so'ngida ushbu tegni yozing. Bu teg chiziq chizadi. Bu yerdan sizga tanish bo lmagan xususiyatlarini ta rifini keltiramiz. Noshade - chiziq soyasiz bo ladi. Size-chiziqning eni. Width-chiziqning uzunligi. Avvalgi sahifada qo'shimcha o'lchamlari mavjud bo'lmagan matn tahrirlash uchun

18 ishlatiladigan qo'llqnilishi sodda teglar tasnifi keltirilgan edi. Bu sahifada esa, hech bo'lmaganda bitta qo'shimcha komandaga ega bo'lgan teglar haqida so'z boradi. <FONT>Kerakli matn</font> Bu teg harfning qo'shimcha o'lchamlarini belgilash uchun ishlatiladi. Quyida ushbi tegning eng ko'p qo'llaniladigan qo'shimcha komandalari bilan tanishib chiqamiz: SIZE Harf o'lchamini belgilashda qo'llaniladi. Matndagi harflar o'lchamini 1 dan boshlab hohlagan son bilan belgilash mumkin. Masalan: <FONT SIZE=5>Salom!</FONT> Bu mening web sahifam. <FONT SIZE=2>(Izoh)</FONT> Bundan tashqari siz SIZE o'lchamlarini plus + va minus - bilan ham belgilashingiz mumkin. Bu usul qo'llanganda harf o'lchami ishlatilayotgan harfga nisbatan katta yoki kichik belgilanadi. Misol uchun siz 3 ga teng kattalikdagi harfdan foydalanayotgan bo'lsangiz, SIZE=+2 harf o'lchami SIZE=5 ga, SIZE=-1 o'lchami esa SIZE=2 ga teng bo'ladi. COLOR Bu komandadan so'ng rang nomi yoki rangni belgilovchi olti xonali alfabitli raqamli kod kiritiladi va shu tariqa harf rangi belgilanadi. Turli brauserlar turli rang nomlarini belgilay oladi. Pastda keltirilgan jadvalda ranglar nomi yozilgan. Rang nomlari ingliz tilida kiritiladi. Rang nomi va ko'rinishin yodlab olishingiz uchun ularning har birini nomi o'sha rangda belgilangan. Bu ranglarni Netscape Navigator va Internet Explorer navigatorlari muammosiz taniydi va o'qiy oladi: black blue gray green maroon navy purple red yellow white Rangni belgilovchi alfabitli raqmli kod '#' simvol bilan boshlanadi. Raqamlardan 1 dan 9 gacha yoki Adan F gacha bo'lgan lotin harflarini ishlatish mumkin. Qang kodi qanday bo'lishidan qatiy nazar u RGB (RED - qizil, GREEN - yasxil, BLUE -

19 ko'k) ranglar sistemasida aks ettiriladi. Rangni belgilash uchun uchta rangni birbiriga qo'shish lozim. Har bir rang ulushini 0 dan 255 gacha bo'lgan miqdorda belgilanadi. Misol uchun tozza qizil rangni belgilash uchun qizil rang miqdorini 255 ga, yasxil va ko'k raglar miqdorini esa 0 ga tenglashtirish lozim va bu mana bunday yoziladi <FONT COLOR=#FF0000>. Olti xonali alfabitli raqamli kodini qo'llash judan ham qiyin. FACE Matnni qanday shriftda yozilishini belgilash uchun shrift nomi keltiriladi. Shrift nomi kompuyterda o'rnatilgan bo'lishi kerak, yoki omumiy ishlatiladigan shriftlardan foydalanish mumkin. Agar siz qo'llagan shrift foydalanuvchining kompyuterida topilmagan taqdirda brauser satndart shriftni tanlaydi. Masalan: <FONT FACE="Arial">Salom!</FONT> <FONT FACE="Times New Roman, Arial, Courier New">Bu mening web sahifam.</font> Siz har doim <FONT> tegining FACE komandasini tanlaganingizda, standart shrift turlaridan foydalaning. Misol uchun Windows muhitida ishlovchi barcha kompyuterda o'rnatiladigan standart shriftlar quyidagilardan iborat: Windows 3.x / 95 / 98 : Arial Arial Black Arial Narrow Courier Courier New Garamond Helvetica Times Times New Roman

20 Aytaylik siz Times va Times New Roman shriftining boshqacha turini tanlagan bo'lsangiz, u holda foydalanuvchi kompyuterida bi shrift o'rnatilmagam bo'lsa, brauser siz tanlagan shriftni standar Times New Romanga almashtiradi. <BASEFONT>Kerakli matn</basefont> Tegi shriftning rangi, o'lchamini belgilash uchun ishlatiladi. <BASEFONT> tegini sahifadagi ba'zi matn shrifti o'lchamlarini belgilash uchun qo'llash mumkin. <BASEFONT> tegining - SIZE, COLOR va FACE komandalari vazifasi <FONT> tegining aynan shu komandalaridan hech ham farq qilmaydi. Ta'zir doirasi: <FONT> va<basefont> teglarining ta'sir doirasi u yopilgandan so'ngina tugaydi. Agar siz sahaifada jadval qo'llagan bo'lsangiz, u holda jadval tashqarisida yozilgan matn uchun ishlatilgan <FONT> va<basefont> tegi o'lchamlari jadval ichida joylashtirilgan matnga ta'sir etmaydi. Shuningdek jadval ichida ishlatilganda esa, uning tashqarisidagi matn uchun bu teglar o'lchamlari ahamiyatsiz. Matnning yirik bo'laklarini tahrirlovchi teglar Endi siz bilan matndagi yirik bloklar va abzatslarni tahrirlovchi teglar av ularning qo'shimcha komandalarining ishlash tartibini o'rganib chiqamiz.

21 <PLAINTEXT> Usbu tegdan so'ng song kiritilgan barcha HTML teglarning ta'sirini butunlay kesadi va ular huddi ekranda ko'rsatilishi lozim bo'lgan matn kabi aks etadi. Bu teg boshqa teglardan tubdan farq qiladi va uni yopish shart emas. Ager matnda ayrim HTML teglarni ekranda barauser aks ettirishini hahlasangiz bu tegdan foydalanishingiz mumkin. Biroq yuqorida aytganimizdek bu tegdan song matnni HTML teglar yordamida tahrirlash mumkin emas. Chunki ularni brauser huddi oddiy matn kabi tushunadi. Agar siz </PLAINTEXT> tegini kiritgan taqdiringizda ham bu <PLAINTEXT> ta'sir doirasini cheklay olmaydi. Web sahifangizda HTML teglarni matn shaklida aks ettirmoqchi bo'lsangiz, u holad uch burchakli qo'shtiqnoq '<' ornida < simvolini qo'llang. <ADDRESS> Kerakli matn </ADDRESS> Teg o'z nomi bilan adres ya ni manzillarni belgilash uchun ishlatiladi. Bu teglar orasida yozilgan manzilni har qaysi brauser o'zi hohlagan tarzda namoish etadi.

22 <BLOCKQUOTE> Kerakli matn </BLOCKQUOTE> Bu teg matndagi paragraf va satrlarni belgilash uchun qo'llanadi. <H1>, <H2>, <H3>, <H4>, <H5> va <H6> yuqoridagi oltita teg sarlovhalarni belgilash uchun qo'llaniladi. Sarlovhalar qalin harflarda yoziladi. Bu teglarning bir-biridan farqi ularning o'lchamlarida. 1 dan 6 gacha bo'lgan sonlar sarlovha o'lchamlarini katta-kichikligini quyida keltirilgan tartibda belgilaydi: Sarlovha H1 Sarlovha H2 Sarlovha H3 Sarlovha H4 Sarlovha H5 <P> Kerakli matn </P> Bu teg paragraflarni belgilaydi. Paragraf boshi va ohirida bosh qator qoldiradi. ALIGN <P> tegining qo'shimcha komandasi bo'lib u пparagraf ichida yozilgan matnni tekislash uchun ishlatiladi. Bu komandaning qo'shimcha o'lchamlari ALIGN - LEFT (matnni chat burchakdan tekislaydi), RIGHT (o'ng tomonga tekislaydi.), CENTER (sahifa markaziga tekislaydi) va JUSTIFY (matnni sahifa eni bo'ylab tekislaydi). JUSTIFY ishlatilganda barause matnni chap av o'ng tomon bo'ylab bir xilda tekislab chiqishga harakat qiladi. Bu jarayonda so'zlar orasi cho'zilib ketishi ham mumkin. <PRE> Kerakli matn </PRE> Bu teg yordamida siz matnni qanday kiritgan bo'lsangiz shunday ko'rinishda

23 bo'lishi taminlanadi. Quyida keltirilgan ikki misolda buni yaqqol ko'rish mumkin. <PRE> tegidan tashqarida yozilgan matnda probel necha marta ishlatilishidan qatiy mnazar u bittaga hisoblanadi. <PRE> tegi tarkibida kiritilgan matn qanday bo'lsa shundayligicha ekranda ko'rinadi. Hujjat "tanasi"ni tahrirlash Bu bo'limda hujjat "tanasi"ni belgilab beruvchi <BODY> tegi va uning qo'shimcha komandalari haqida so'z boradi. <BODY> tegini oldingi bo'limlarda qisqacha tanashtirib o'tgan edik. Bu teg bevosita HTML hujjatni ekranda ko'rinishi lozim bo'lgan matn, tasvir va boshqa elementlarni o'z ichiga qamrab oladi. <BODY> ochuvchi hamda </BODY> yopuvchi teglari orasida barcha muhim elementlar joylashadi. Bu tegninig qanday qoshimcha komandalarini quyida birgalikda ko'rib chiqamiz. BGCOLOR Sahifaning orqa foni rangini belgilash uchun ishlatiladi. Bunda rang nomi yoki harf va sonlardan iborat kod qo'llaniladi. BACKGROUND Sahifaning orqa foni uchun qo'llaniluvchi tasvir nomi va u joylashgan papkaga yo'lni ko'rsatishda qo'llaniladi. Tasvir joylashgan papkaga yo'lni ko'rsatish haqidagi ma'lumotlarni "HTML sahifaga tasvir joylashtirish" bo'limida oqishingiz mumkin. TEXT Hujjatda yozilgan matn harflarini qanday rangda bo'lishini rang kodlarini kiritish orqali bekgilab beradi. Agar siz ushbu tegni ishlatmagan taqdiringizda matn rangi qora rangda bo'ladi. LINK Bu komanda qo'llanilgan sahifadagi havola rangi teg o'lchamlarida qaysi rang kodi yoki nomi berilgan bolsa, osha rangda ekranda namoyon bo'ladi. Bu komanda taysiri, agar siz alohida havola uchun <FONT> tegini COLOR olchmini kiritgan bo'lsangiz, shu havola uchungina ahamiyatsiz hisoblanadi. VLINK

24 Bu komanda yordamida ishlatilgan havolalarni belgilab ko'rsatish uchun qo'llaniladi. Siz oquvchi adashib ketmasligi va havolada ko'rsatilgan sahifaga qayta kirmasligi hamda hali qo'llanilmagan havolalarni qo'llanilgan havolalardan ajratib ko'rsatish uchun ishlatishingiz mumkin. ALINK Bu komanda kursor yordamida tanlangan va sichqoncha chap tugmasi bosilgan paytda havola rangini o'zgartirish uchun ishlatiladi. Siz hozir oqigan sahifada <BODY> tegining barcha qo'shimcha komandalari quyidagi tarqibda qo'llanilgan <BODY BGCOLOR=# TEXT=black LINK=blue ALINK=red VLINK=#006666> </BODY >

25 3.1. Web Sahifa <html><head><title>konstitutsiya </title><body Background=222.png > <div align="center"> <table width="600" border=10> <tr> <td valign="ramka"bgcolor="white"> <table> <tr> <table> <font color=black><a href=2-.html> <img src="1.png" width="730" Height="1000"></a> </body> </head> </html> <html><head><title>konstitutsiya </title><body Background=222.png bgcolor=white> <div align="center"> <table width="730" border="10" cellpadding="10" cellspacing="10" height="100%" > <tr> <td valign="ramka"bgcolor="#111666"><table> <tr> <table ><img src="k.png" alt="" width=750" height="127" border="0"><font size="+2"> <font сolor=white><center><h1>mundarija</h1></center></font><h2><center><a href=3-.html><font color=green>muqaddima</font></a></center> <center><a href=4-.html><font color=gold>birinchi bo'lim</font></a></center> <center><a href=4-.html><font color=white>birinchi bob</font></a></center> <center><a href=5-.html><font color=white>ikkinchi bob</font></a></center> <center><a href=6-.html><font color=white>uchinchi bob</font></a></center> <center><a href=6-.html><font color=white>to'rtinchi bob</font></a></center> <center><a href=7-.html><font color=gold>ikkinchi bo'lim</font></a></center> <center><a href=7-.html><font color=white>beshinchi bob</font></a></center> <center><a href=8-.html><font color=white>oltinchi bob</font></a></center> <center><a href=9-.html><font color=white>yettinchi bob</font></a></center>

26 <center><a href=10-.html><font color=white>sakkizinchi bob</font></a></center> <center><a href=11-.html><font color=white>to'qqizinchi bob</font></a></center> <center><a href=11-.html><font color=white>o'ninchi bob</font></a></center> <center><a href=23-.html><font color=white>yigirma beshinchi bob</font></a></center> <center><a href=23-.html><font color=white>yigirma oltinchi bob</font></a></center> <center><a href=24-.html><font color=gold>oltinchi bo'lim</font></a></center> <a href="24-.html" ><p align=center><font color=red>oldingisi</font></p></a> <a href="3-.html" ><p align=center><font color=red>keyingisi</font></p></a> <right><font color="green"><marquee > Muallif: <I>Qobulov Muhammadjon</I> </marquee> </body> </head></html>

27 <html> <head> <title>konstitutsiya</title> </head> <frameset rows="20%,*"> <frame src="111.html"> <frame src="1-.html"name="1oyna"> </frameset> </html> <html><head><title>konstitutsiya </title><body bgcolor=blue > <div align="center"> <table width="730" border="10" cellpadding="10" cellspacing="10" height="100%" > <tr> <td valign="ramka"bgcolor="blue"> <table> <tr> <table > <font color=white><center><h1>muqaddima</h1></center><p><h3>o`zbekiston xalqi: <br>inson huquqlariga va davlat suvereniteti g`oyalariga sodiqligini tantanali ravishda elon qilib, hozirgi va kelajak avlodlar oldidagi yuksak masuliyatini anglagan holda, o`zbek davlatchiligi rivojining tarixiy tajribasiga tayanib, demokratiya va ijtimoiy adolatga sadoqatini namoyon qilib, xalqaro huquqning umum etirof etilgan qoidalari ustunligini tan olgan holda, respublika fuqarolarining munosib hayot kechirishlarini taminlashga intilib, insonparvar demokratik huquqiy davlat barpo etishni ko`zlab, fuqarolar tinchligi va milliy totuvligini taminlash maqsadida, o`zining muxtor vakillari siymosida O`zbekiston Respublikasining mazkur Konstitutsiyasini qabul qiladi. </h3></font> <a href="2-.html" ><p align=center><font color=red>oldingisi</font></p></a> <a href="4-.html" ><p align=center><font color=red>keyingisi</font></p></a> <right><font color="green"><marquee > Muallif: <I>Qobulov Muhammadjon</I> </marquee> </body> </head> </html>

28

29

30 Xulosa Biz Html tilini o rgangan holda undagi tegalar yordamida web sahifalar yaratishimiz mumkin boldi. Html tili hozirgi kunda juda keng qulayliklarga ega bo lim bu yordamida biz istalgan web sahifani ochishimiz mumkin. Html yordamida men O zbekiston respublikasi Konstitutsiyasining web sahifasini yaratdim. Bu web sahifamizni biz Blocknot va Wordpad yordamida va boshqa programmalar yordamida tuzishimiz mumkin. Hozirda bu html tili yordamida turli xil web-sahifalar yaratishmoqda va biz bunga misol qilib O zbekistondagi web sahifalarni keltirishimiz mumkin yani va yana boshqa millionlab web sahifalarni misol qilishimiz mumkin. Foydalangan Adabiyotlar: web sayti wed sayti web sayti web sayti web sayti web portali web sayti Informatika va Axborot texnologiya fani maruza matni 2011-yil