Ehtimol siz HTML kod kabi tushunchaga duch kelgansiz. Do'stlarimizdan eshitdik, brauzer menyusida ko'rdik va hokazo. Lekin bu nima? Keling, u qanday kod ekanligini va qaysi elementlardan iboratligini aniqlashga harakat qilaylik.
Asosiy ma'lumotlar
Keling, ta'rifidan boshlaymiz. HTML-kod - bu HTML tili yordamida bajariladigan har qanday veb-sahifaning belgilanishi.
Ushbu kod teglardan iborat bo'lib, uning yordamida brauzer u yoki bu sahifaning ko'rinishini aniqlaydi. Uning tuzilishi ikki qismga bo'linadi: bosh - hujjatning sarlavhasi, unda sahifaning nomi yoziladi, shuningdek hujjatning o'zi haqida ma'lumotlar, va tanasi - sahifaning parametrlari o'rnatilgan hujjat tanasi.
Noldan yozilgan ozmi-ko'pmi munosib veb-sahifa yaratish uchun ushbu tilda ishlatiladigan teglarni, ularning parametrlarini o'rganishingiz, shuningdek kodlarni bilishingiz kerak. hTML ranglari.
Teglar
Tag HTML tilining elementidir. Uning yordami bilan siz shriftni, rangini, matn hajmini o'rnatishingiz, unga jadvallar va rasmlarni kiritishingiz, formatlashingiz, sarlavhalar, havolalar yaratishingiz, shuningdek sahifani ranglashingiz mumkin.
Teglar har doim burchakli qavs ichiga olinadi -<>, va bu ularni asosiy matndan ajratib turadi, bu ko'rib chiqilganda sahifada ko'rsatiladi. Ular ikki xil - juft va bitta.
Juftliklar ochilish yorlig'i va yopilish yorlig'idan iborat bo'lib, chap burchakli qavsdan keyin oxirgisi oldinga siljish bilan birga keladi. Masalan: matn.
Ikkala teglar orasida veb-sahifada ko'rsatiladigan matn, jadval, rasm yoki boshqa element mavjud.
Singles bitta yorliqdan iborat va oldinga chiziq chizig'ini o'z ichiga olmaydi. Masalan:
.
Teglar maxsus HTML kodlari yordamida o'rnatiladigan parametrlarga ega bo'lishi mumkin.
Shuni ham unutmangki, aksariyat belgilar uchun: itlar, qavslar, kattaroq yoki teng, kichik yoki teng va boshqalar - bu belgilar kodlari yozilgan maxsus jadval mavjud. Ushbu kod ampersand bilan boshlanadi, so'ngra uning tom ma'noda mnemonik belgilanishi yoki uch xonali belgi kodi bo'lgan funt belgisi. Oxirida nuqta-vergul qo'shilishi kerak.
Asosiy teglar
Biz buni tushunib etdik, endi foydali bo'lishi mumkin bo'lgan asosiy teglarni sanab o'tishga harakat qilamiz, agar u o'z veb-sahifalarini yaratishda bo'lmasa, hech bo'lmaganda matnlarni loyihalashda.
- < body> - havolalar, maydonlar va boshqalar kabi hujjatning asosiy parametrlarini o'z ichiga oladi;
- < p> - xatboshini ko'rsatadi;
- < b> - matnni qalin qilib yozadi;
- < i> - kursiv;
- < u> - matnning tagiga chizib tashlaydi;
- < s> - matnni kesib tashlaydi;
- < sup> - matnni yuqori belgi sifatida o'rnatadi;
- < sub> - pastki yozuv;
- < font> - shrift parametrlarini o'rnatadi: o'lcham, shrift, rang;
- < div> - shu bilan siz matningizni tekislashingiz mumkin;
- < h>- sarlavha yorlig'i;
- < a> - uning yordami bilan havolalar o'rnatiladi;
- < table> - jadvalga hujjatlarni kiritishga yordam beradi, teglar u bilan bog'lanadi< tr> (string) va< td> (hujayra).
Yagona:
- bitta, unga ergashgan matnni uzatadi yangi sahifa;
- bu gorizontal chiziqni matnga kiritish uchun ishlatilishi mumkin.
Shuni ta'kidlash kerakki, teglar odatda bilan yoziladi yangi qator... Bu nafaqat maket dizaynerining o'zi, balki HTML-dagi kodlarni ko'radiganlar uchun ham qulay bo'lishi uchun qilingan.
Tag parametrlari
Siz bilan bilmoqchi bo'lgan asosiy teglarni allaqachon siz bilan to'ldirdik. Albatta, biz hamma narsani sanab o'tmadik, ammo bu minimal miqdor ham birinchi veb-sahifalaringizni yaratish uchun etarli bo'lishi mumkin.
Ammo ba'zi teglarni bilish etarli emas, siz hali ham sozlanishi parametrlarni o'rganishingiz kerak. Ushbu maqolada biz ularni faqatgina qilamiz. qisqa sharh, biz eng tez-tez ishlatib turadiganlarini ta'riflaymiz. Siz ularni istalgan HTML kodlarini ochish orqali ko'rishingiz mumkin.
Shuningdek, ushbu parametr qaysi teg uchun mos ekanligini tasvirlab bermaymiz, chunki ularning aksariyati veb-belgilash buyruqlarining ko'pchiligida ishlatiladi:
- yuz - shrift turini belgilaydi;
- hajmi - o'lchamini belgilaydi;
- rang - rangni belgilaydi;
- tekislash - tekislash;
- ism - ism;
- href - bu parametr havola manzilini o'rnatadi;
- alt - muqobil matn;
- kenglik - kenglik;
- balandlik - balandlik;
- fon - fon tasviri;
- bgcolor - fon.
Ular barcha parametrlardan uzoqdir, biz faqat eng ko'p ishlatiladigan va taniqli bo'lganlarni sanab o'tdik.
Parametrdan keyin teng belgi qo'yiladi, so'ngra uning qiymati tirnoq bilan yoziladi. Saytlar va sahifalarni ishlab chiqishda siz nafaqat asosiy parametrlarni bilish, balki ularni to'g'ri sozlash uchun maxsus darsliklar yoki qo'llanmalardan foydalanishni maslahat beramiz.
Ranglar jadvali
Shunday qilib, asosiy teglar va ularning parametrlari bilan biz aniqladik, endi HTML rang kodlarini ko'rib chiqamiz. Aynan ularning yordami bilan siz matn, sahifa yoki uning alohida elementlari rangini belgilashingiz mumkin.
Ajam veb-ustalar har bir soya uchun kodlar beradigan maxsus rangli jadvallar mavjudligini bilishlari kerak. Hammasi bo'lib 16 ta asosiy ranglar, bu faqat jadval yordamida emas, balki ularning ismini ko'rsatish orqali ham o'rnatilishi mumkin ingliz tili... Bundan tashqari, kerakli soyani o'rnatib, ularga ochiq va qorong'i so'zlarni qo'shishingiz mumkin.
Shuningdek, unda 216 ta turli xil edemalar mavjud.
E'tibor bering, jadvallardan foydalanish ancha qulayroq. Ularga o'n oltinchi rang kodi berilgan. Bunday holda siz darhol ushbu soyani ko'rishingiz mumkin. Har bir kod xash belgisi bilan boshlanadi, so'ngra qizil, yashil va ko'k ranglarning intensivligini tavsiflovchi uchta juft belgi.
Ushbu kodni nusxalash va kerakli teg parametrlariga almashtirish kifoya.
Sahifa kodini qanday ko'rish mumkin
Agar siz veb-sahifalar yaratishni xohlasangiz, ehtimol siz o'zingiz yoqtirgan yoki tez-tez tashrif buyuradigan saytning HTML kodini ko'rib chiqishingiz mumkin.
Ammo buni qanday qilish kerak? Juda sodda va sodda bo'lgan ikkita usul mavjud. Birinchisi, kerakli sahifani ochish va Ctrl + U tugmalar birikmasini bosish. Yangi oyna paydo bo'ladi manba kodi ko'rishingiz va o'rganishingiz mumkin bo'lgan sahifa.
Ikkinchi usul - bosish chap tugma sichqonchani tanlang va "Manba kodi" bandini tanlang. Ammo biz hali ham birinchi usuldan foydalanishni maslahat beramiz, chunki tezkor tugmachalardan foydalanish ancha oson va qulayroq.
E'tibor bering, kodni o'qiyotganda, unga o'xshash "Izoh" yorlig'ida yozilgan sharhlarni ko'rishingiz mumkin bo'ladi:... Bunday holda, sharhning o'zi keyin yoziladi undov belgisi... Bu brauzerda ko'rsatilmaydi. Va asosan, boshqa dasturchilar va veb-dizaynerlar quyida qanday ma'lumot bloki borligini, nima uchun u yoki bu kod qismi ko'rsatilganligini tushunishlari uchun yozilgan.
xulosalar
HTML kodlarini yozish bir qarashda ko'rinadigan darajada qiyin emas. Ayniqsa, siz oddiy va oddiy veb-saytlar yaratmoqchi bo'lsangiz, elektron darsliklar HTML va boshqalarga asoslanib, asosiy teglar va belgilash tamoyilini o'rganish ko'p vaqt talab qilmaydi. O'zingizning loyihalaringizni yaratishga kirishishingiz uchun bir-ikki kun kifoya qiladi.
E'tibor bering, agar siz o'qishga qaror qilsangiz berilgan til belgilang, keyin ehtiyot bo'ling. Muammolarning aksariyati aynan e'tiborsizlik tufayli yuzaga keladi: yopilmagan bog'langan teglar, noto'g'ri yozilgan parametrlar, matn terish xatolari - bularning barchasi siz uzoq vaqt qidirishingiz mumkin bo'lgan xatoga aylanishiga tahdid soladi. Umuman olganda, HTML sahifalarini belgilashni o'rganish juda qiziq.
Kenglik bo'ylab sayohat qilish Butunjahon tarmog'i, siz qanchalik boshqacha ekanligini sezishingiz mumkin veb-sahifalarning dizayni va imkoniyatlari... Ammo barchangiz bu xilma-xillikning barchasi tilga asoslangan holda amalga oshirilishini bilmayapsiz. HTML.
Sahifada ko'rgan narsalaringizning barchasi - matn, rasmlar, jadvallar va veb-sahifaning mazmunli tarkibini tashkil etuvchi boshqa elementlar, tarkib belgilash tili yordamida yaratilgan HTML... Bosing o'ng tugmasini bosing har qanday veb-sahifada sichqonchani tanlang va ochiladigan menyuda tanlang "HTML kodini ko'rish" yoki "Manba kodi" - paydo bo'ladi matn muharriri tushunarsiz belgilar va piktogrammalar bilan - bu shunday HTML- sahifa kodi.
Har qanday WWW hujjatida stilize qilingan va formatlangan matnlar, grafikalar va turli xil Internet-resurslarga ko'priklar bo'lishi mumkin. Ushbu imkoniyatlarning barchasini amalga oshirish uchun WWW hujjatlarini tavsiflash uchun maxsus til ishlab chiqildi HyperText Markup Language (HTML), ya'ni, Gipermatnni belgilash tili.
Veb-sahifaning tavsifi hTML tili bu brauzer dasturi tomonidan talqin qilingan ko'rsatmalar to'plamidir.
HTML-da yozilgan hujjat bu matnli faylo'quvchiga ma'lumot etkazib beradigan haqiqiy matn va belgilash teglarini o'z ichiga oladi. Teglar - bu HTML tomonidan belgilangan, brauzer uchun ko'rsatma bo'lgan belgilar ketma-ketligi.
Ushbu ko'rsatmalarga muvofiq, dastur matnni ekranda tartibga soladi, alohida-alohida saqlangan rasmlarni o'z ichiga oladi grafik fayllar, va boshqa hujjatlar yoki Internet-manbalar bilan ko'priklarni shakllantiradi. Shunday qilib, HTML fayli brauzer tomonidan talqin qilinganda faqat Veb-hujjatga aylanadi.
Biroq, ichida standart til HTML-ning bitta muhim kamchiliklari bor. Masalan, paragraflarning belgilanishi va ularning tuzilishini tavsiflash uchun, bitta sahifada 10 yoki 20 ta xatboshi bo'lsa ham, har bir xat uchun ushbu xususiyatlarni tavsiflash zarur. Va tasavvur qiling, sayt 100 sahifadan iborat bo'lishi mumkin. Natijada, siz xuddi shu HTML kod qismini sahifaga yigirma yoki ikki yuz marta kiritishingiz, fayl hajmini oshirishingiz kerak.
Va dasturchilar uchun qanday bosh og'rig'i! Kambag'al veb-ustalarning hayotini osonlashtirish uchun ixtiro qilingan Kaskadli jadvallar (CSS) - kaskadli uslublar jadvallari.
CSS boshqacha, qulayroq va tejamli tarzda ishlaydi. Sayt tarkibidagi xatboshilarni loyihalash uchun kod yoki dizayn uslubi bir marta belgilanadi. Ushbu kod yoki uslub tavsifi saqlanadi alohida fayl... Keyinchalik bu faqat kerak hTML yordami matnni xatboshilarga belgilang va CSS ularning dizayni bilan shug'ullanadi. Kod o'nlab va yuzlab marta kamayadi.
Uslub tavsiflarini alohida faylga joylashtirish juda qulay, ayniqsa sayt bir nechta sahifaga ega bo'lsa. Masalan, o'zgartirish uchun ro'yxatdan o'tish saytdagi barcha xatboshilar, faqat jadvaldagi kodni o'zgartiring.
CSS HTML bilan birgalikda mo''jizalar yaratishi mumkin va buning uchun veb-sahifalarni yaratganingiz uchun mehnat taqsimoti tufayli. Sahifa elementlarining joylashuvi HTML asosida tuzilgan va CSS jadvallari yordamida elementlarning vizual dizayni berilgan
Jadvallar cSS uslublari - sahifa dizayni tafsilotlarini uning tuzilishi va tarkibidan ajratishga urinish.
Hozircha bu siz uchun xitoycha xat. Va men o'zini guru sifatida ko'rsatmayman va boshqa "HTML va CSS nima" o'z-o'zini o'rganish qo'llanmasini yozaman. Internetda siz bunday ma'lumotlarning butun vagonini, shuningdek ko'plab nashr etilgan darsliklarni topasiz. Agar siz mavzuni chuqur o'rganmoqchi bo'lsangiz - bayroq sizning qo'lingizda. Qo `rqmang, HTML va CSS juda oddiy va har qanday choynak ularni o'zlashtirishi mumkin. Ammo bunga hali shoshilish kerak emas.
O'z tajribamdan bilamanki, choynak miyasini keraksiz ma'lumotlar bilan ortiqcha yuklamaslik yaxshiroq, aks holda u, ya'ni. miya muddatidan oldin qaynab ketadi. HTML va CSS-ni o'rgangan holda veb-sayt qurishni boshlamoqchi bo'lgan turli xil saytlardagi aqlli yigitlarga aldanmang. Siz uchun yaxshi yangilikim bor - HTML kodni o'zingiz yozishingiz shart emas, chunki aqlli odamlar o'ylab topdilar CMS .
| < Как работает браузер |
|---|
Monospace shriftlari teglar yordamida yaratiladi
,
va
... Ushbu teglarni qo'llash natijalari odatda bir xil bo'ladi: belgilangan belgi va interval bilan bitta oraliq shrift.
Teg
Teg Teg matnni formatlashsiz kiritish uchun xizmat qiladi, ya'ni barcha bo'shliqlarni, yorliqlarni va satrlarni saqlaydi. Ko'pgina matn formatlash elementlari ushbu element ichida qo'llanilishi mumkin. Diqqat: Tilda HTML tire chiziqlar, ketma-ket bo'shliqlar va yorliqlar e'tiborga olinmaydi. Ketma-ket bir nechta bo'shliqlar bitta bo'shliq sifatida ko'rib chiqiladi. Ichki element
- tarkibiga dastur kodining kichik qismlarini kiritish uchun ishlatiladigan inline konteyner elementi, masalan, veb-hujjatda qo'llanma dasturlash bo'yicha. Brauzerlar ushbu kodni bitta shriftda aks ettiradi (masalan, Courier New). Agar siz element bilan ero ishlatsangiz
Misol: elementlardan foydalanish va
Brauzer har qanday bo'sh joyni yoki satrni takrorlaydi va sizning asl formatingizni saqlab qoladi.
Agar (document.getElementsByClassName) (x \u003d document.getElementsByClassName ("pagination") if (x.length\u003e y) (x.style.visibility \u003d "hidden";)
"Oldingi" elementi ichida brauzer har qanday bo'sh joyni yoki satrni takrorlaydi, bu sizning asl formatingizni saqlab qoladi.
if (document.getElementsByClassName) (x \u003d document.getElementsByClassName ("pagination") if (x.length\u003e y) (x.style.visibility \u003d "hidden";)
Teglar va
Teg
kodning bir qismini foydalanuvchi tomonidan klaviatura kiritilishi sifatida belgilaydi. Ba'zi brauzerlar bunday matnni qo'shimcha fon bilan belgilaydilar.
Teg
kompyuter buyrug'ini yaratish uchun ishlatiladi, masalan, boshqaruv skriptini kiritgandan so'ng konsol oynasida ko'rsatilgan matn. Ushbu kamdan kam ishlatiladigan element shunchaki tarkibini bir qatorli shriftda aks ettiradi
, ,
.
Misol: elementlar va
- O'zingiz sinab ko'ring "
Klaviaturadan foydalanuvchi kiritishi kerak bo'lgan matnni joylashtiring
"kbd" konteyner elementi.
Matnni kiriting: Bu klaviaturadan kiritilgan matn
Bu "samp" konteyneriga joylashtirilgan matn
Teg
Teg dastur kodidagi o'zgaruvchilarni qo'shimcha ajratib ko'rsatish maqsadida ishlatiladi. U matematik ifodada yoki dastur parametrida o'zgaruvchini belgilaydi va odatda kursiv bilan ko'rsatiladi.
Misol: elementlar
- O'zingiz sinab ko'ring "
Tananing kinetik energiyasi:
Tananing kinetik energiyasi:
Vga = mv2/2
Vazifalar
Yakuniy vazifa
Ushbu darsda siz o'z tarkibini bir qatorli shriftda aks ettiradigan, koddagi o'zgaruvchilarni ta'kidlaydigan va oldindan formatlash yorlig'i haqida bilib oldingiz. Ularning barchasi matematik ifodalar va dastur kodlari bilan ishlashda muhim ahamiyatga ega.
O'rgangan narsalaringizni takrorlash va uchta oddiy vazifani bajarish vaqti keldi:
O'zgaruvchan
- O'zing qaror qil "
HTML elementlaridan foydalanib, yuqoridagi tenglamada y ni o'zgaruvchi sifatida belgilang.
Parabola tenglamasi y \u003d Nx 2
Parabola tenglamasi y \u003d Nx 2
Oldindan formatlangan matn
- O'zing qaror qil "
Foydalanish hTML elementi kod elementiga joylashtirilgan matn bo'shliq va satr tanaffuslarini o'z holicha saqlagan holda brauzerda paydo bo'lishi.
Agar siz biron bir veb-sahifani ochsangiz, u saytning turidan va markazidan o'zgarmaydigan odatiy elementlarni o'z ichiga oladi. 4.1-misolda kod ko'rsatilgan oddiy hujjatasosiy teglarni o'z ichiga olgan.
4.1-misol. Veb-sahifaning manba kodi
Sarlavha
Birinchi xat.
Ikkinchi xatboshi.
Tarkibni nusxalash ushbu misol va uni c: \\ www \\ ga o'rnating, masalan41.html. Shundan so'ng, brauzerni ishga tushiring va menyu elementi orqali faylni oching Fayl\u003e Faylni ochish (Ctrl + O)... Hujjatni tanlash dialog oynasida example41.html faylini ko'rsating. Shaklda ko'rsatilgan veb-sahifa. 4.1.
Shakl: 4.1. Namunani bajarish natijasi
Element joriy hujjatning turini - DTD ni (hujjat turini aniqlash, hujjat turini tavsiflash) ko'rsatish uchun mo'ljallangan. Bu brauzer uchun joriy veb-sahifani qanday talqin qilishni tushunishi uchun kerak, chunki HTML bir nechta versiyalarda mavjud, shuningdek HTMLga o'xshash, ammo sintaksis jihatidan farq qiladigan XHTML (kengaytirilgan HyperText Markup Language) mavjud. Shunday qilib brauzer "chalkashib ketmasligi" va veb-sahifani qaysi standartga muvofiq ko'rsatishini tushunishi va kodning birinchi satrida o'rnatilishi kerak .
Bir nechta turlari mavjud , ular maqsad qilingan HTML versiyasiga qarab farqlanadi. Jadval 4.1. hujjatlarning asosiy turlarini ularning tavsifi bilan ro'yxatlaydi.
| DOCTYPE | Tavsif |
|---|---|
| HTML 4.01 | |
| Qat'iy HTML sintaksis. | |
| O'tish HTML sintaksis. | |
| HTML hujjatida freymlardan foydalaniladi. | |
| HTML 5 | |
| HTML-ning ushbu versiyasida faqat bitta doktip mavjud. | |
| XHTML 1.0 | |
| Qattiq XHTML sintaksisi. | |
| Vaqtinchalik XHTML sintaksisi. | |
| Hujjat XHTML-da yozilgan va freymlardan iborat. | |
| XHTML 1.1 | |
| XHTML 1.1 ishlab chiquvchilari HTML-ni asta-sekin almashtiradi deb kutmoqdalar. Ko'rib turganingizdek, ushbu ta'rif turlarga bo'linmaydi, chunki sintaksis bir xil va aniq qoidalarga bo'ysunadi. | |
Qattiq va vaqtinchalik hujjat tavsiflari o'rtasidagi farq hujjat kodini yozishda har xil yondashuvdir. Qattiq HTML HTML spetsifikatsiyasiga qat'iy rioya qilishni talab qiladi va kechirimsizdir. Vaqtinchalik HTML ba'zi bir kod kamchiliklari haqida ko'proq "bo'shashgan", shuning uchun ba'zi hollarda bu tip afzalroqdir.
Masalan, qat'iy HTML va XHTML-da teg
Teg
Sarlavha
Birinchi xat.
Ikkinchi xatboshi.