Bloknotda html sahifa yaratish uchun teglar. "HTML yordamida veb-sahifalar yaratish" darsligi

Gipermatn belgilash tili kabi. HTML dasturlash tili emas, bu veb-saytni belgilash tili.

Barcha brauzerlar ushbu belgini foydalanuvchi uchun qulay formatga aylantirishi mumkin.

Bu tilda teglar deb ataladigan maxsus buyruqlar ishlatiladi. Har bir teg o'z funktsiyasiga ega. Ko'p sonli teglar mavjud. Ideal holda, siz hamma narsani o'rganishingiz kerak. Ammo boshlang'ich dasturchi uchun asosiy bilim etarli.

Asosiy HTML buyruqlar

HTML buyruqlar ro'yxati juda katta. Ammo asosiylari ko'p emas. Kod yozishni boshlash uchun sizga muharrir kerak. Siz Notepad dan foydalanishingiz mumkin. Notepad++ dan foydalanish tavsiya etiladi. U shunday ko'rinadi.

Afzalligi shundaki, maxsus muharrirlarda teglar toifaga qarab ma'lum rangda ajratib ko'rsatiladi. Notepad yoki boshqa dasturda HTML veb-saytini yaratish buyruqlari bir xil. Amaldagi til hamma joyda bir xil. Rivojlanish muhiti shunchaki vositadir.

HTMLda yopilish va yopilmaydigan teglar mavjud. Shuningdek, bu tilda uy qurish tushunchasi mavjud. Koddagi har bir ob'ekt element hisoblanadi. Elementning ochilish tegi, yopish tegi va mazmuni mavjud. Bundan tashqari, teg o'z qiymatlari bilan o'zining qo'shimcha atributlariga ega.

Rasmda siz ikkita tegni ko'rishingiz mumkin va . Esda tutingki, ochish va yopish bir xil yoziladi, lekin faqat "/" farq qiladi. Agar teg yopilmagan bo'lsa, ishlov beruvchi boshqa hamma narsani ushbu elementning davomi deb hisoblaydi. Bu juda muhim. Ayniqsa, havolalarda. Biz ularni biroz ko'proq ko'rib chiqamiz.

Teg talab qilinadi. Bu har doim yozilishi kerak. Ammo uni yopishning hojati yo'q. Standartlarga ko'ra, bu zarur, lekin agar siz uni yopmasangiz, u hali ham ishlaydi.

Ushbu HTML buyruqlar sahifa uchun ramka hisoblanadi. Ular talab qilinadi. Ular ham yopishadi.

Teglarning nomi ma'noga mos keladi. Bosh - bosh. Ushbu bo'lim xizmat va ko'rinmaydigan muhim ma'lumotlarni ko'rsatadi. Tana qismi hujjatning asosiy qismidir. Bu erda foydalanuvchiga ko'rsatiladigan tarkib. Keyinchalik chalkashmaslik uchun teglarni darhol yopishga harakat qiling.

Xizmat bo'limida quyidagilar ko'rsatilgan:

hujjat nomi;
uslublar fayllari;
skript fayllari;
meta teglar;
qidiruv tizimlari uchun ko'rsatmalar;
robotlar uchun ko'rsatmalar;
foydalanuvchilar tomonidan emas, balki dasturchilar tomonidan ishlatilishi mumkin bo'lgan har qanday boshqa ma'lumotlar.

Uslub fayli quyidagicha ulanadi:

Skript fayli quyidagicha:

Matnda sarlavha bo'lishi kerak. Biz buni quyidagicha ko'rsatamiz:

Sahifa sarlavhasi

Ushbu matn brauzer yorlig'i sarlavhasida paydo bo'ladi. Ushbu sarlavha qidiruv tizimi natijalari natijasida ham ko'rsatiladi.

Matnni formatlash uchun teglar

Matn paragraf tegiga joylashtirilishi kerak. Sifatida belgilanadi. Matn uchun String dan ham foydalanishingiz mumkin.

Matnni Word-dagi kabi formatlashingiz mumkin:

kursiv
eskiz
chizilgan matn
tagiga chizilgan matn

Matnni uslublash mumkin. Boshqa elementlarni ko'rib chiqqandan so'ng, biz ularni oxirida ko'rib chiqamiz.

Sarlavhalardan foydalanish

Boshqa muhim HTML buyruqlar mavjud. Veb-saytlarni yaratish uchun sarlavhalar kerak. Ular birinchi darajali sarlavha tegi yordamida ko'rsatilgan. 1 dan 6 gacha darajalar mavjud. Sarlavhalar ichki joylashishi kerakligini tushunish muhimdir.

Rasmdagi misol.

Shuni yodda tutingki, faqat bitta h1 sarlavhasidan foydalanish tavsiya etiladi. Bunday holda, u tegga mos kelishi kerak. Albatta, siz 200 h1 sarlavhalarini belgilashingiz mumkin, ammo keyin siz qidiruv tizimlari tomonidan jazolanasiz.

Tasvirlardan foydalanish

Rasmlar veb-sahifalarning ajralmas qismidir. Misolda fotosuratni qanday kiritishingiz mumkinligi ko'rsatilgan.

Ko'rib turganingizdek, misol nima deb ataladi va qanday qilib batafsil ko'rsatilgan.

Havolalardan foydalanish

Agar siz HTML buyruqlarini o'rganayotgan bo'lsangiz, shunchaki havola tegini bilishingiz kerak. Bu tashkil etuvchi eng muhim elementlardan biridir

Yuqoridagi misolda havola matni o'rniga rasm borligini ko'rishingiz mumkin. Ya'ni, siz ham matn, ham rasm qo'yishingiz mumkin.

Jadvallardan foydalanish

Jadvallar ham juda tez-tez ishlatiladi. Dastlab ular ma'lumotni qulay shaklda taqdim etishni maqsad qilgan. Ammo keyinchalik maket dizaynerlari ularni turli xil sahifa elementlarini joylashtirish uchun ishlatishdi.

Jadval quyidagicha tuziladi:

Hujayra matni	Hujayra matni
Hujayra matni	Hujayra matni

width atributi jadvalning kengligini belgilaydi. Bu foizda yoki pikselda bo'lishi mumkin. Border chegaraning qalinligini belgilaydi.

Tuzilishi quyidagicha belgilanadi. tr tegi qatordir. td katakchasini teg. Va barchasi birgalikda - bu stol.

Jadvalni tekislash mumkin. Buni amalga oshirish uchun align atributidan foydalaning, u uchta qiymatni qabul qilishi mumkin: Left, Center, Right. Foydalanish misoli quyida keltirilgan.

Ushbu HTML buyruqlari (kenglik va tekislash) boshqa elementlar uchun ham ishlaydi. Tasvirlar uchun ramka qalinligi ham ko'rsatilgan.

Ro'yxatlardan foydalanish

HTML buyruqlari yordamida har xil turdagi ro'yxatlar yaratishingiz mumkin. Word muharriri bilan deyarli bir xil.

HTML tilida tartibli va tartibsizlar mavjud.

Birinchidan

Ikkinchi

Uchinchi

Natija shunday bo'ladi:

Birinchidan
Ikkinchi
Uchinchi

Ro'yxat turi	HTML kodi
Doira shaklida
Doira shaklida
Kvadrat belgilar bilan

Tartibli ro'yxatlar aynan bir xil tarzda tuziladi, lekin o'rniga

Bu erda siz ro'yxatni ko'rsatish turini ham o'rnatishingiz mumkin:

"1" - arab raqamlari 1, 2, 3...
"A"- bosh harflar A, B, C...
"a"- kichik harflar a, b, c...
"men"- katta rim raqamlari I, II, III...
"men"- kichik Rim raqamlari i, ii, iii...

Arab raqamlari standart sifatida ko'rsatiladi.

Bular raqamlangan roʻyxatlar boʻlgani uchun ular roʻyxatning boshlangʻich qiymatini belgilaydigan start atributiga ega. Masalan, siz 10 yoki 20 kundan boshlab ro'yxatni ko'rsatishingiz mumkin.

Sayt uchun HTML buyruqlari juda xilma-xildir, lekin ularning barchasi uslublarga mos keladi. Uslublar bosh: bo'limida fayl sifatida ko'rsatilishi mumkin yoki siz darhol tayyor uslubni yozishingiz mumkin.

Ushbu uslub ta'riflari o'rtasida farq borligini unutmang. Uslub fayli saytning barcha sahifalarida ko'rsatilishi mumkin. Siz unga o'zgartirish kiritganingizdan so'ng, ushbu yangilanish butun saytga ta'sir qiladi. Agar siz ma'lum bir sahifada uslublarni belgilasangiz, u holda bu sinflardan o'zgarishlar va foydalanish faqat ushbu fayl ichida bo'ladi. Sizning sozlamalaringiz bundan tashqariga chiqmaydi.

Tasavvur qiling, sizda 20 ta HTML sahifa bor va siz sarlavhani 2 piksel kattaroq qilishga qaror qildingiz. Agar sizda uslublar faylida hamma narsa mavjud bo'lsa, u erda faqat o'zgartirishlar kiritishingiz kerak. Agar hamma narsa individual bo'lsa, unda barcha 20 sahifa yangilanishi kerak bo'ladi.

Siz faqat bitta sahifa uchun quyidagi tarzda belgilashingiz mumkin.

Endi biz ushbu sahifani yaratishda foydalangan teglar haqida bir necha so'z.

1. - bu teglar har bir veb-sahifada bo'lishi kerak. Ular brauzerlar va qidiruv tizimlariga bu HTML sahifa ekanligini aytadilar.

Har qanday html sahifasi quyidagi tuzilishga ega:

2. - bu teglar orasida sahifaning barcha ko'rinadigan mazmuni yotadi.

4. - bu teglar orasiga sahifa sarlavhasi yoziladi, u brauzerning eng yuqori qismida ko'rsatiladi. Aytgancha, qidiruv tizimlarida biror narsani qidirganingizda, birinchi navbatda sahifaning nomi ko'rsatiladi. Teg ko'pincha "sarlavha" deb qisqartiriladi. Men sizga maqolani o'qishni maslahat beraman: tegni qanday yaratish kerak

Endi html sahifaning tanasida joylashgan teglarga o'tamiz (ichki va ).

5. - bu teglar ularning ichidagi hamma narsani markazlashtiradi. Bunday holda, markaz ekranning markazi bo'ladi. Kelajakda ushbu teglardan foydalanishni to'xtatish tavsiya etiladi.

6. sarlavha teglari sinfidan biri boʻlib... odatda sahifa sarlavhasini oʻz ichiga oladi. Masalan, ushbu sahifada "HTML sahifa yaratish misoli" sarlavhasi mavjud.

Ushbu teglar veb-saytlar reytingida juda katta vaznga ega, shuning uchun ularni ehtiyotkorlik bilan va oqilona ishlatish kerak.

Html kodini yaratishda siz oddiy qoidaga amal qilishingiz kerak: birinchi navbatda sarlavha yorlig'i kelishi kerak, keyin ular kelishi mumkin va hokazo. Asosiysi, birinchi, keyin, keyin va hokazo bo'lmasligi kerak. Qattiq ierarxiya bo'lishi kerak. Sarlavhalar va boshqalar. ehtimol ko'p.

7.
yopilish tegini talab qilmaydigan yagona tegdir. U keyingi qatorga o'tadi. Mening misolimda keyingi qatorga ikki marta o'tish uchun ketma-ket ikkita bitta teg yozdim.

8. tasvirni aks ettiruvchi yagona teg.

src - bu rasm manzilini ko'rsatuvchi talab qilinadigan parametr (URL_IMAGE o'rniga rasmingiz saqlanadigan manzilni kiritishingiz kerak).
Eslatma:
- Agar rasm sizning html sahifangiz bilan bir papkada bo'lsa, unda rasm nomini yozish kifoya, aks holda siz mutlaq yoki nisbiy URLni kiritishingiz kerak;
- Rasm kengaytmasini belgilashni unutmang. Masalan, .jpg, .gif, .jpeg.
alt yoki sarlavha - bu parametrlarda siz rasmingizning tavsifini yozishingiz mumkin. Sichqonchani rasm ustiga olib borganingizda, ushbu tavsif paydo bo'ladi. Ushbu parametrlar veb-saytni ilgari surish uchun, ayniqsa tasvirlarni qidirishda muhim ahamiyatga ega. Agar rasm yuklanmasa, ushbu matn ko'rsatiladi, bu ham ortiqcha.

9. - bu teglar shrift, fon, o'lcham va hokazolarni o'zgartirish uchun yaratilgan. Muxtasar qilib aytganda, matnni formatlash bilan bog'liq barcha narsalarni bitta tegda sozlash mumkin. Ushbu teg juda ko'p xususiyatlarga ega, men ularni alohida darsda muhokama qilaman.

Eslatma: - shunga o'xshash teg.

Ushbu parametrlarning barchasini o'rnatishingiz mumkin bo'lgan CSS shrift xususiyati ham mavjud.

10. - qalin qilib ajratib ko'rsatish. va orasidagi hamma narsa qalin shrift bilan ta'kidlanadi. Misol uchun, agar siz uni tarkibning eng boshida yozsangiz va uni eng oxirida yopsangiz, sahifadagi barcha matn qalin qilib ajratib ko'rsatiladi. Bu juda keng tarqalgan teg bo'lib, uning analogi .

Qidiruv mexanizmlari kalit so'zlarning ta'sirini oshirish nuqtai nazaridan ushbu tegga e'tibor berishadi. Ammo ehtiyot bo'lishingiz kerak, chunki har safar qalin harflar bilan kalit so'zlarni ta'kidlash spam sifatida qabul qilinadi.

: HTML - gipermatnni belgilash tili (yoki gipermatnni belgilash tili).

Shunday ekan, keling, u bilan yaqinroq tanishamiz.

Birinchidan, kompyuteringizda istalgan nom va kengaytmali fayl yarating.html (sarlavha ingliz tilida bo'lishi kerak- masalan, index.html). Bunday faylni yaratish uchun oddiy matn hujjatini yarating ("Boshlash" - "Barcha dasturlar" - "Aksessuarlar" - "Bloknot") va saqlang ("Fayl" - "Boshqa saqlash") ism va kengaytmani kiritish orqali istalgan joyda (Kengaytmani kiritganingizda, bloknot uni matnli fayl sifatida saqlaydi, lekin bizga veb-fayl kerak. Buning uchun saqlashdan oldin fayl turini tanlang - "Barcha fayllar (*.*)").

Bu majburiy shart emas (chunki siz server sozlamalarida birinchi sahifa nomini o'zgartirishingiz mumkin), lekin yaxshi odob-axloq qoidalari. Birinchi sahifaning nomi eng yaxshi indeks (index.html), chunki server unga kirishda xuddi shu nomdagi faylni ishlab chiqaradi - indeks.

To'g'ri saqlangan bo'lsa, fayl belgisi brauzer belgisiga o'zgarishi kerak (sukut bo'yicha Internet Explorer).

Endi ushbu faylni Notepad yordamida oching va u yerga quyidagi kodni nusxalang.

Bu birinchi veb-sahifa!

Brauzerda saqlang va oching.

Tabriklaymiz, siz hozirgina birinchi veb-sahifangizni yaratdingiz.

Matn "Bu birinchi veb-sahifa!" Siz uni istalgan boshqasiga o'zgartirishingiz mumkin, masalan, "Bu mening birinchi veb-sahifam!!!" saqlang, brauzerni yangilang va natijaga qoyil qoling.

Lekin bizning sahifamizning sarlavhasi yo'q.

Buni tuzatishimiz kerak - biz kodni biroz to'g'rilaymiz, aniqrog'i teglar va teglar yordamida unga "Sayt rahbari" ni qo'shamiz.

Birinchi sahifa Bu mening birinchi veb-sahifam!!!

Saqlash, yangilash, qoyil qolish. Bizning sahifamiz endi sarlavhaga ega.

Birinchi teg (bu teg juftlashtirilgan, ya'ni yopish tegi talab qilinadi) - u ichida sahifaning butun mazmuni (matn, tasvirlar va boshqalar) joylashgan konteyner sifatida ishlatiladi. Garchi bu teg ( va ) ixtiyoriy bo'lsa-da, undan foydalanish yaxshi odobni ko'rsatadi. Shuning uchun men sizga undan foydalanishni maslahat beraman.

Keyingi teg. Bu ham juftlangan teg ( va ). Ushbu teg sahifada ko'rsatilmaydi (sarlavhadan tashqari), lekin qo'shimcha sahifa parametrlarini ko'rsatish kerak - sahifa tavsifi (qidiruv tizimlari tomonidan qo'llaniladi), kalit so'zlar (qidiruv tizimlari tomonidan qo'llaniladi), uslublar, skriptlar, sarlavha va boshqalar.

Teg - sahifaning sarlavhasini ko'rsatish uchun juftlangan teg ( va ) kerak. Bundan tashqari, bu teg faqat teg ichiga joylashtirilishi kerak!

Bizning kodimizdagi oxirgi teg esa . Shuningdek, juftlangan teg ( va ), uning ichida saytning butun ko'rinadigan qismi, ya'ni. matnlar, rasmlar, havolalar, umuman olganda, saytga joylashtirmoqchi bo'lgan ma'lumotlar.

Keyingi darsda teg turlari va ularni yozish qoidalari haqida gapiramiz.

Inson yolg'iz so'z bilan yashay olmaydi,
ularni qanchalik yutsa ham.
Adlay Stivenson.

Umuman olganda, HTML dasturlash tili emas. Bu gipermatn belgilash tili. Ya'ni, uni "HTML tili" deb atash to'g'ri emas.

Oddiy qilib aytganda, HTML - bu oddiy matnni formatlangan shaklda taqdim etish imkonini beruvchi teglar (nazorat so'zlari) ro'yxati. Masalan, uni qalin qilib ajratib ko'rsatish yoki kursiv va hokazo. Lekin matn bu tarzda faqat maxsus dasturlarda (Internetda bemaqsad bo'lgan dasturlarda) taqdim etilishi mumkin.

Ular faqat formatlangan matnni ko'rsatadi va formatlash uchun ishlatilgan HTML teglarini yashiradi. Men nima haqida gapirayotganimni sizga aniqroq qilish uchun ushbu sahifani o'ng tugmasini bosing va ochilgan menyuda "Manba kodi" yoki shunga o'xshash narsani tanlang. Ushbu sahifa sizning oldingizda hozirgi ko'rinishida ochiladi.

Siz HTML kodini oddiy va maxsus dasturlarda yaratishingiz mumkin. Vizual muharrirlar matn muharrirlaridan HTML, CSS, JavaScript, PHP va hokazo kodlarni terish, yaʼni veb-dasturlash uchun moʻljallanganligi bilan farqlanadi. Bundan tashqari, ular sizga o'rnatilgan brauzerda mehnatingizning samarasini darhol ko'rish va kiritilgan koddagi ba'zi xatolarni ta'kidlash imkonini beradi.

Men barcha kodlarni qo'lda yozishni tavsiya qilaman (bir xil qo'llarning to'g'ridan-to'g'ri ishlashini yaxshilash uchun), lekin vizual muharrirlar bu jarayonni sezilarli darajada osonlashtiradi. Shaxsan men foydalanaman. Bu so'nggi versiyadan yiroq, ammo uning imkoniyatlari men uchun etarli.

Men buni qilaman: kodni Dreamweaver-da yozaman, so'ng saqlang va "Brauzerda ko'rish" tugmasini bosing (siz ushbu menyudagi brauzerlar ro'yxatini o'zingiz tahrir qilasiz), keyin Dreamweaver-ga qaytib, tahrirlashni davom ettiraman. Bu yerga . Hammasi asboblar uchun, endi HTML teglariga o'tamiz.

Keling, HTML-sahifaning tuzilishidan, toʻgʻrirogʻi uning asosiy teglaridan boshlaylik.

Har bir HTML hujjatida ishlatiladigan zarur (asosiy) HTML teglari quyidagilardan iborat:

Eslatma. Brauzer HTML kodini matn sifatida chiqarishi uchun (uni kodga talqin qilmaslik), har bir ochiladigan burchak qavsdan keyin bo'sh joy qoldiraman "". Kodni kiritganingizda, bo'sh joy qoldirmang.

Ko'rib turganingizdek, barcha teglar juftlangan (HTMLda ochilish tegi va yopish tegi mavjud, deyarli barcha teglar shunday); Ochilish tegining yopilish tegidan farqi shundaki, yopilish tegidan oldin “/” qiyshiq chiziq qo‘yiladi. Bunday teglar konteyner teglari deb ham ataladi, chunki ular orasiga boshqa teglar kiritilishi mumkin, ya'ni. konteynerga joylashtiring. Teglar orasida boshqa teglar borligini o'zingiz ko'rishingiz mumkin.

Teg nomlarini katta yoki katta harflar bilan yozishingiz mumkin, farq yo'q. Ya'ni, turdagi va brauzer uchun yozuvlar farq qilmaydi va bir xil tarzda talqin qilinadi. Keling, ushbu teglar nimani anglatishini batafsilroq muhokama qilaylik.

Shunday qilib, asosiy teglar gipermatnli hujjat bilan ishlayotgan gipermatnli sahifalarni ko'rish uchun brauzerlar va boshqa dasturlarni ko'rsatadi. Har qanday html hujjati bilan boshlanib, bilan tugashi kerak. Ya'ni, bu teglar orasida html sahifasining HAMMA kodi mavjud.

Teglar orasida meta teglar (sahifa nomi, tavsif, kalit so'zlar va boshqalar) mavjud. Ular html sahifasi va texnik ma'lumotlar haqidagi ma'lumotlarni saqlaydi. Umuman olganda, bu teg ixtiyoriy, ya'ni usiz HTML hujjati brauzerlar tomonidan an'anaviy tarzda ko'rsatiladi. Ammo sarlavha maydonidan foydalanishni rejalashtirmasangiz ham, hech bo'lmaganda oddiygina yozing. Bu dasturlarning turli versiyalari o'rtasidagi muvofiqlik uchun zarur.

"HEAD" teglari orasida joylashgan barcha ma'lumotlar brauzer tomonidan hech qanday tarzda ko'rsatilmaydi (brauzerning yuqori panelida ko'rsatiladigan HTML hujjatining nomi joylashgan teglar orasidagi ma'lumotlar bundan mustasno). Ammo ular html-sahifaning ko'rinishiga, uning Internetdagi hayotiga va reytingiga katta ta'sir ko'rsatishi mumkin. Gipermatnli hujjatning sarlavhasida joylashgan teglar haqida keyinroq to'xtalamiz.

HTML hujjatining asosiy mazmuni va teglari orasida joylashgan. Html sahifasini ochganimizda biz ko'radigan hamma narsa: matn, grafikalar, menyular, tugmalar va boshqalar. Bu sahifaning asosiy “tanasi”.

HTML hujjatini yaratishda foydalaniladigan barcha boshqa teglar ushbu kerakli teglar orasida (ya'ni, ichkarida) joylashgan. HTML-dagi deyarli barcha teglar turli atributlar, xususiyatlar va parametrlarga ega bo'lib, ular ma'lumotni ishlab chiquvchi mo'ljallangan tarzda ko'rsatish imkonini beradi. Masalan, agar siz yozsangiz:

Keyin butun sahifaning foni qizil bo'ladi.

Bu yerda teg, aslida teg; bgcolor - uning atributi; "#FF0000" - atribut qiymati (teg bir nechta atributlarga ega bo'lishi mumkin).

Eslatma. Barcha teg atributlari va ularning qiymatlari ochilish tegida (qiyshiq chiziqsiz) ko'rsatilgan, lekin hech qanday holatda yopilish tegida.

Shunday qilib, biz HTML hujjatining asosiy teglarini aniqladik. Endi qolganlarini batafsil o'rganish vaqti keldi. Bu erda men kichik bir chetga chiqish qilmoqchiman.

Olingan bilimlarni amaliyotda qo'llash orqali men ushbu kitoblar va o'quv qo'llanmalar mualliflarining ko'pchiligi qanday xatoga yo'l qo'yganini angladim. Bu darsliklarning barchasi, birinchidan, yangi boshlanuvchilar uchun mo'ljallangan bo'lsa, ikkinchidan, ular HTML asoslarini tartibda o'rgatadi.

T . Ya'ni, avval html hujjatining sarlavha teglari (), keyin esa "tana" teglari () ko'rib chiqiladi.

O'z tajribamga asoslanib aytishga jur'at etamanki, HTML asoslarini o'rganishning ushbu tartibi yangi boshlanuvchilar uchun mutlaqo nomaqbuldir. Yangi boshlovchi ushbu ko'p sonli va unchalik tushunilmagan sarlavha teglarini, birinchi navbatda, o'rganish natijalarini ko'rmasdan o'rganishga harakat qiladi (sizga eslatib o'taman, sarlavha teglari brauzer tomonidan ko'rsatilmaydi). Va ikkinchidan, bu teglarning aksariyati u rejalashtirgan saytni yaratish uchun kerak bo'lmasligiga shubha qilmasdan (hech bo'lmaganda ish boshida).

Shunday qilib, u faqat vaqt va HTML o'rganishni davom ettirish istagini behuda sarflaydi. Shu bilan birga, buni faqat "guruslar" yaxshi pul evaziga qila oladi degan fikrni saqlab qolish. Hali tushunmagan narsamga parvo qilmasam va davom etmasam, men ham bu faoliyatdan voz kechardim.

Shuning uchun, men birinchi navbatda html hujjatining () "tanasi" bilan bog'liq teglarni ko'rib chiqishni taklif qilaman va shundan keyingina qolganlariga o'ting. Bundan tashqari, html sahifasining "tanasi" saytga tashrif buyuruvchilar uchun keladigan ma'lumotlarni o'z ichiga oladi. Va uni yaratish yoki topish kod yozishdan ko'ra ancha qiyin.

Xo'sh, endi, bir daqiqa ikkilanmasdan, "Keyingi" tugmasini bosing va bu soqolsiz va uyqusiz yigitlar qanday qilib veb-saytlar yaratishini bilishni davom eting.

HTML va CSS veb-saytlarini yaratish darslari orqali sayohatimizni boshlashdan oldin, ikki til o'rtasidagi farqlarni, har bir tilning sintaksisini va ba'zi bir asosiy terminologiyani tushunish muhimdir.

HTML (HyperText Markup Language) sarlavhalar, paragraflar yoki tasvirlar kabi tarkibni belgilaydigan tarkibning tuzilishini va uning ma'nosini belgilaydi. CSS (Cascading Style Sheets) - masalan, shriftlar yoki ranglardan foydalangan holda kontent ko'rinishini uslublash uchun yaratilgan taqdimot tili.

Ushbu ikki til - HTML va CSS - bir-biridan mustaqil va shunday bo'lib qolishi kerak. CSS HTML hujjatida yozilmasligi kerak va aksincha. Umumiy qoida sifatida HTML har doim tarkibni ifodalaydi va CSS har doim uslubni belgilaydi.

HTML va CSS o'rtasidagi farqni tushungan holda, keling, HTMLga batafsilroq to'xtalib o'tamiz.

HTML bilan ishlashni boshlashdan oldin siz yangi va ko'pincha g'alati atamalarga duch kelishingiz mumkin. Vaqt o'tishi bilan siz ularning barchasi bilan ko'proq tanish bo'lasiz, ammo hozircha uchta asosiy HTML atamasidan boshlashingiz kerak - elementlar, teglar va atributlar.

Elementlar sahifadagi ob'ektlarning tuzilishi va mazmunini qanday aniqlashni belgilaydi. Ko'p ishlatiladigan elementlardan ba'zilari sarlavhalarning bir nechta darajalarini (dan dan gacha elementlar sifatida belgilanadi) va paragraflarni (sifatida belgilangan) o'z ichiga oladi.

); Ro'yxatga elementlarni kiritishingiz mumkin va boshqalar.

Elementlar element nomini o'rab turgan burchakli qavslar bilan aniqlanadi. Shunday qilib, element quyidagicha ko'rinadi:

Teglar

Burchakli qavslarni qo'shish< и >element atrofida teg deb ataladigan narsani yaratadi. Teglar ko'pincha ochilish va yopish teglari juftligida uchraydi.

Ochilish yorlig'i elementning boshlanishini belgilaydi. U belgidan iborat; Masalan, .

Yopuvchi teg elementning oxirini belgilaydi. U belgidan iborat< с последующей косой чертой и именем элемента и завершается символом >; Masalan, .

Ochilish va yopish teglari o'rtasida paydo bo'ladigan tarkib ushbu elementning mazmunidir. Masalan, havolada ochilish tegi bo'ladi va yopish yorlig'i. Ushbu ikkita teg o'rtasida bo'lgan narsa havolaning mazmuni bo'ladi.

Shunday qilib, havola teglari quyidagicha ko'rinadi:

...

Atributlar - bu element haqida qo'shimcha ma'lumot berish uchun ishlatiladigan xususiyatlar. Eng keng tarqalgan atributlarga elementni identifikatsiya qiluvchi id atributi kiradi; elementni tasniflaydigan sinf atributi; o'rnatilgan tarkibning manbasini ko'rsatadigan src atributi; va bog'langan manbaga havolani belgilaydigan href atributi.

Atributlar element nomidan keyin ochilish tegida aniqlanadi. Umuman olganda, atributlar nom va qiymatni o'z ichiga oladi. Ushbu atributlar formati atribut nomidan keyin tenglik belgisidan va qo'shtirnoq ichidagi atribut qiymatidan iborat. Masalan, element href atributi bilan quyidagicha ko'rinadi:

Shay Xou

Asosiy HTML atamalarini ko'rsatish

Ushbu kod veb-sahifada "Shay Howe" matnini ko'rsatadi va ushbu matn bosilganda foydalanuvchi http://shayhowe.com saytiga olib boradi. Bog'lanish elementi ochilish tegi yordamida e'lon qilinadi va yopish yorlig'i matnni qamrab olgan, shuningdek, ochilish tegida href="http://shayhowe.com" orqali e'lon qilingan havola manzilining atributi va qiymati.

Guruch. 1.01. Kontur shaklida HTML sintaksisi element, atribut va tegni o'z ichiga oladi

HTML elementlari, teglar va atributlar nima ekanligini bilganingizdan so'ng, keling, birinchi veb-sahifamizni ko'rib chiqaylik. Agar biror narsa bu yerda yangi bo‘lib ko‘rinsa, xavotir olmang – biz uni yo‘l-yo‘lakay ajratamiz.

HTML hujjatlari .txt emas, balki .html kengaytmasi bilan saqlangan oddiy matnli hujjatlardir. HTML yozishni boshlash uchun avvalo sizga qulay bo'lgan matn muharriri kerak. Afsuski, bu Microsoft Word yoki Pagesni o'z ichiga olmaydi, chunki ular murakkab tahrirlovchilardir. HTML va CSS yozish uchun ikkita eng mashhur matn muharrirlari Dreamweaver va Sublime Textdir. Bepul alternativlar Windows uchun Notepad++ va Mac uchun TextWranglerni ham o'z ichiga oladi.

Barcha HTML hujjatlarida quyidagi deklaratsiyalar va elementlarni o'z ichiga olgan talab qilinadigan tuzilma mavjud: , , va .

Hujjat turi deklaratsiyasi yoki HTML hujjatining boshida joylashgan bo'lib, brauzerlarga HTMLning qaysi versiyasidan foydalanilayotganligini bildiradi. Biz HTMLning eng so'nggi versiyasidan foydalanayotganimiz sababli, hujjat turi oddiy bo'ladi. Shundan so'ng hujjatning boshlanishini ko'rsatadigan element keladi.

Ichkarida, element hujjatning yuqori qismini, shu jumladan turli metama'lumotlarni (sahifa haqidagi qo'shimcha ma'lumotlarni) belgilaydi. Element ichidagi tarkib veb-sahifaning o'zida ko'rsatilmaydi. Buning o'rniga, u hujjatning sarlavhasini (brauzer oynasining sarlavha satrida paydo bo'ladi), har qanday tashqi fayllarga havolalarni yoki boshqa foydali metama'lumotlarni o'z ichiga olishi mumkin.

Veb-sahifaning barcha ko'rinadigan tarkibi elementda bo'ladi. Oddiy HTML hujjatining tuzilishi quyidagicha ko'rinadi:

Salom Dunyo! Salom Dunyo!

Bu veb-sahifa.

Ushbu kod hujjat turi deklaratsiyasidan boshlab hujjatni ko'rsatadi, so'ngra darhol . Ichkarida elementlar va mavjud. Element teg orqali sahifa kodlashini va element orqali hujjat sarlavhasini o'z ichiga oladi. Element element orqali sarlavha va matn paragrafini o'z ichiga oladi. Sarlavha ham, paragraf ham element ichida joylashganligi sababli ular veb-sahifada ko'rinadi.

Element boshqa element ichida bo'lsa, shuningdek, ichki ichki deb ham ataladi, hujjat tuzilishini yaxshi tashkil etilgan va o'qilishi mumkin bo'lishi uchun uni cheklash yaxshidir. Oldingi kodda ikkala element ham ichkariga joylashtirilgan va . Elementlar uchun chekinish tuzilishi va ichiga qo'shilgan yangi elementlar bilan davom etadi.

Oldingi misolda element yopish tegini o'z ichiga olmagan yagona teg edi. Xavotir olmang, bu ataylab qilingan. Hamma elementlar ochilish va yopish teglaridan iborat emas. Ba'zi elementlar faqat bitta teg ichidagi atributlar orqali tarkib yoki xatti-harakatlarni qabul qiladi. ana shu elementlardan biridir. Misoldagi elementning mazmuni charset atributi va qiymat yordamida tayinlanadi. Boshqa tipik o'z-o'zidan yopiladigan elementlarga quyidagilar kiradi:

Hujjat turi deklaratsiyasi va , va elementlari yordamida tuzilgan quyidagi tuzilma juda keng tarqalgan. Biz ushbu hujjat strukturasini qulay saqlashni xohlaymiz, chunki biz yangi HTML hujjatlarini yaratishda undan tez-tez foydalanamiz.

Kodimizni qanchalik ehtiyotkorlik bilan yozmasak ham, xatolar muqarrar. Yaxshiyamki, HTML va CSS yozishda bizda ishimizni tekshirish uchun validatorlar mavjud. W3C kodni xatolar uchun skanerlaydigan HTML va CSS tekshiruvchilarini taklif qiladi. Kodimizni ko'rib chiqish nafaqat uni barcha brauzerlarda to'g'ri ko'rsatishga yordam beradi, balki kod yozishda eng yaxshi amaliyotlarni o'rgatishda ham yordam beradi.

Veb-dizaynerlar va ishlab chiquvchilar sifatida biz hunarmandchiligimizga bag'ishlangan bir qator ajoyib konferentsiyalarda qatnashish hashamatiga egamiz. Biz o'zimizning uslublar konferentsiyasini tashkil qilamiz va keyingi darslar davomida uning veb-saytini yaratamiz. Mana bunday!

Keling, HTML-dan biroz uzoqroqda viteslarni almashtiramiz va CSS-ni ko'rib chiqamiz. Esda tuting, HTML veb-sahifalarimiz tarkibi va tuzilishini belgilaydi, CSS esa ularning vizual uslubi va ko'rinishini belgilaydi.

HTML shartlariga qo'shimcha ravishda siz tanishishingiz kerak bo'lgan ba'zi asosiy CSS atamalari mavjud. Bu atamalar selektorlar, xususiyatlar va qiymatlarni o'z ichiga oladi. Xuddi HTML terminologiyasida bo'lgani kabi, siz CSS bilan qanchalik ko'p ishlasangiz, bu atamalar shunchalik ikkinchi tabiatga aylanadi.

Veb-sahifaga elementlar qo'shsangiz, ularni CSS yordamida uslublash mumkin. Selektor HTML-dagi qaysi element yoki elementlarga maqsad va uslublarni (masalan, rang, o'lcham va joylashuv) qo'llashni aniqlaydi. Selektorlar biz qanchalik aniq bo'lishni xohlayotganimizga qarab, noyob elementlarni tanlash uchun turli ko'rsatkichlar kombinatsiyasini o'z ichiga olishi mumkin. Misol uchun, biz sahifadagi har bir paragrafni tanlashni yoki faqat bitta aniq paragrafni tanlashni xohlaymiz.

Selektorlar odatda id yoki sinf qiymati yoki yoki kabi element nomi kabi atribut qiymati bilan bog'lanadi.

CSS-da selektorlar tanlangan elementga qo'llaniladigan uslublarni qamrab oluvchi jingalak qavslar () bilan birlashtirilgan. Ushbu selektor barcha elementlarga mo'ljallangan

P(...)

Element tanlanganidan so'ng, xususiyat unga qo'llaniladigan uslublarni belgilaydi. Xususiyat nomlari selektordan keyin, jingalak qavslar ichida () va ikki nuqtadan oldin keladi. Biz foydalanishimiz mumkin bo'lgan ko'plab xususiyatlar mavjud, masalan, fon, rang, shrift o'lchami, balandlik va kenglik va boshqa keng tarqalgan qo'shilgan xususiyatlar. Quyidagi kodda biz barcha elementlarga tegishli rang va shrift o'lchami xususiyatlarini aniqlaymiz

P (rang: ...; shrift o'lchami: ...; )

Hozircha biz faqat selektor orqali elementni tanladik va xossalar orqali unga qaysi uslubni qo'llashimizni aniqladik. Endi biz ushbu xususiyatning harakatini qiymat orqali o'rnatishimiz mumkin. Qiymatlar ikki nuqta va nuqtali vergul orasidagi matn sifatida belgilanishi mumkin. Quyida biz barcha elementlarni tanlaymiz

Va rang xususiyati qiymatini to'q sariq rangga va shrift o'lchami xususiyati qiymatini 16 pikselga o'rnating.

P (rang: to'q sariq; shrift o'lchami: 16px; )

Buni sinab ko'rish uchun, CSS-da bizning qoidalar to'plami selektordan boshlanadi va darhol jingalak qavslar bilan boshlanadi. Bu jingalak qavslar xossa va qiymatlar juftligidan iborat deklaratsiyalarni o'z ichiga oladi. Har bir deklaratsiya xususiyat bilan boshlanadi, undan keyin ikki nuqta, xususiyat qiymati va nihoyat nuqta-vergul qo'yiladi.

Keng tarqalgan amaliyot - bu jingalak qavslar ichidagi xususiyatlar va qiymatlarni o'zgartirish. HTML-da bo'lgani kabi, chekinish bizning kodimizni tartibli va aniq saqlashga yordam beradi.

Guruch. 1.03. CSS sintaksisi tarkibiga selektor, xususiyatlar va qiymatlar kiradi

Bir nechta asosiy atamalar va umumiy CSS sintaksisini bilish ajoyib boshlanishdir, ammo biz chuqurlikka sho'ng'ishdan oldin yana bir nechta fikrlarni ko'rib chiqishimiz kerak. Xususan, biz CSS-da selektorlar qanday ishlashini batafsil ko'rib chiqishimiz kerak.

Yuqorida aytib o'tilganidek, selektorlar qaysi HTML elementlari uslublanishini ko'rsatadi. Selektorlardan qanday foydalanishni va ular qanday ishlashini to'liq tushunish muhimdir. Birinchi qadam - har xil turdagi selektorlar bilan tanishish. Biz eng asosiy selektorlardan boshlaymiz: tur, sinf va identifikator selektorlari.

Tur selektorlari elementlarni turiga qarab belgilaydi. Misol uchun, agar biz barcha elementlarni maqsad qilib qo'ymoqchi bo'lsak, div selektoridan foydalanishimiz kerak. Quyidagi kod elementlar uchun tur selektorini, shuningdek, tegishli HTMLni ko'rsatadi.

Div(...)

... ...

Sinflar sinf atributining qiymatiga qarab elementni tanlash imkonini beradi. Sinf selektorlari tur tanlagichlariga qaraganda bir oz aniqroqdir, chunki ular bir xil turdagi barcha elementlarni emas, balki muayyan elementlar guruhini tanlaydi.

Sinflar bir nechta elementlar uchun bir xil sinf atribut qiymatidan foydalangan holda bir vaqtning o'zida turli xil elementlarga bir xil uslublarni qo'llash imkonini beradi.

CSS-da sinflar sinf atributining qiymatidan keyin bosh nuqta bilan ifodalanadi. Quyida sinf selektori ajoyib sinf atributining qiymatini o'z ichiga olgan barcha elementlarni, jumladan va elementlarni tanlaydi

Ajoyib (...)

...

Identifikatorlar sinflardan ham aniqroqdir, chunki ular bir vaqtning o'zida faqat bitta noyob elementni maqsad qiladi. Klass selektorlari sinf atributining qiymatidan foydalanganidek, identifikatorlar selektor sifatida id atributining qiymatidan foydalanadilar.

Ko'rsatilayotgan element turidan qat'i nazar, id atribut qiymati sahifada faqat bir marta ishlatilishi mumkin. Agar identifikatorlar mavjud bo'lsa, ular muhim elementlar uchun ajratilishi kerak.

CSS-da identifikatorlar oldida xesh belgisi, keyin esa id atributining qiymati bilan ifodalanadi. Bu yerda identifikator faqat shayhowe qiymatiga ega id atributiga ega elementni tanlaydi.

#shayhowe ( ... )

...

Selektorlar juda kuchli narsalar va yuqorida tavsiflanganlar biz duch keladigan eng keng tarqalgan selektorlar qatoriga kiradi. Bu tanlovchilar faqat boshlanishi. Ko'plab ilg'or selektorlar mavjud va ular osongina mavjud. Ular bilan qulay bo'lganingizdan so'ng, ba'zi ilg'orlarini tekshirishdan qo'rqmang.

OK, keling, hamma narsani birlashtirishni boshlaylik. Biz HTML ichidagi sahifaga elementlarni qo'shamiz, so'ngra ushbu elementlarni tanlashimiz va ularni CSS-dan foydalanib uslublashimiz mumkin. Keling, ikkita tilni birgalikda ishlashi uchun HTML va CSS o'rtasidagi nuqtalarni bog'laymiz.

Bizning CSS-ni HTML bilan gaplashish uchun biz HTML-dan CSS fayliga ishora qilishimiz kerak. Yaxshi amaliyot bizning barcha uslublarimizni HTML hujjatimiz elementi ichida ko'rsatilgan bitta tashqi faylga kiritishdir. Bitta tashqi CSS-dan foydalanish bizga sayt bo'ylab bir xil uslublarni qo'llash va unga tezda o'zgartirishlar kiritish imkonini beradi.

CSS-ni qo'shishning boshqa variantlari ichki va ichki uslublardan foydalanishni o'z ichiga oladi. Siz haqiqatda bu variantlarga duch kelishingiz mumkin, lekin ular odatda rad etiladi, chunki ular saytlarni yangilashni mashaqqatli va mashaqqatli qiladi.

Tashqi uslublar jadvalimizni yaratish uchun biz yana .css kengaytmali yangi matn faylini yaratish uchun tanlagan matn muharriridan foydalanmoqchimiz. Bizning CSS faylimiz HTML faylimiz bilan bir xil papkada yoki pastki papkada saqlanishi kerak.

Elementning ichida HTML va CSS fayllari o'rtasidagi munosabatni belgilaydigan element ishlatiladi. Biz CSS-ga ulanayotganimiz sababli, ularning munosabatlarini ko'rsatish uchun uslublar jadvali qiymati bilan rel atributidan foydalanamiz. Bundan tashqari, href atributi CSS faylining joylashuvi yoki yo'lini ko'rsatish uchun ishlatiladi.

Quyidagi misolda HTML hujjatida element tashqi uslublar jadvaliga ishora qiladi.

CSS to'g'ri ko'rsatilishi uchun href atributining yo'l qiymati CSS fayli saqlangan joyga to'g'ridan-to'g'ri mos kelishi kerak. Oldingi misolda main.css fayli ildiz papkasi sifatida ham tanilgan HTML fayli bilan bir joyda saqlanadi.

Agar CSS fayli pastki papkada joylashgan bo'lsa, href atributining qiymati mos ravishda shu yo'lga mos kelishi kerak. Misol uchun, agar bizning main.css faylimiz uslublar jadvallari nomli pastki jildda saqlangan bo'lsa, href atributining qiymati stylesheets/main.css bo'ladi. Bu pastki jildga o'tishni ko'rsatish uchun oldinga chiziq (yoki slash) dan foydalanadi.

Ayni damda sahifalarimiz asta-sekin, lekin ishonch bilan jonlana boshladi. Biz hali CSS-ni chuqur o'rganmadik, lekin siz ba'zi elementlarning biz CSS-da e'lon qilmagan uslublarga ega ekanligini payqadingiz. Aynan brauzer ushbu elementlarga o'ziga xos uslublarni qo'yadi. Yaxshiyamki, biz ushbu uslublarni juda oson qayta yozishimiz mumkin, bu esa CSS-ni qayta o'rnatish orqali amalga oshiriladi.

Har bir brauzer turli elementlar uchun o'zining standart uslublariga ega. Google Chrome sarlavhalar, paragraflar, ro'yxatlar va boshqalarni ko'rsatish usuli Internet Explorer-dan farq qilishi mumkin. Brauzerlar o'rtasidagi muvofiqlikni ta'minlash uchun CSS-ni qayta tiklash keng qo'llanila boshlandi.

CSS-ni tiklash barcha asosiy HTML elementlarini ma'lum uslubga ega bo'ladi va barcha brauzerlarda izchil uslubni ta'minlaydi. Ushbu qayta o'rnatish odatda o'lchamlarni, to'ldirishni, chekkalarni yoki ushbu qiymatlarni pasaytiradigan qo'shimcha uslublarni olib tashlashni o'z ichiga oladi. CSS kaskadi yuqoridan pastgacha ishlaganligi sababli (bu haqda tez orada bilib olasiz) - bizning qayta o'rnatishimiz uslubimizning eng yuqori qismida bo'lishi kerak. Bu ushbu uslublarning birinchi navbatda o'qilishini va barcha turli brauzerlarning umumiy mos yozuvlar nuqtasidan ishlashini ta'minlaydi.

Foydalanish uchun turli xil CSS sozlamalari mavjud, ularning barchasi o'zlarining kuchli tomonlariga ega. Erik Meyerning eng mashhurlaridan biri bo'lib, uning CSS-ni qayta o'rnatishi yangi HTML5 elementlarini kiritish uchun moslashtirilgan.

Agar o'zingizni biroz sarguzasht his qilsangiz, Nikolas Gallager tomonidan yaratilgan Normalize.css ham mavjud. Normalize.css barcha asosiy elementlar uchun qattiq resetdan foydalanishga emas, balki ushbu elementlar uchun umumiy uslublarni o'rnatishga qaratilgan. Bu CSS-ni chuqurroq tushunishni, shuningdek, uslublardan nimaga erishmoqchi ekanligingizni bilishni talab qiladi.

Yuqorida aytib o'tilganidek, turli brauzerlar elementlarni boshqacha ko'rsatadilar. Brauzerlar o'rtasidagi muvofiqlik va sinovning muhimligini tan olish muhimdir. Saytlar barcha brauzerlarda bir xil ko'rinmasligi kerak, lekin ular yaqin bo'lishi kerak. Qaysi brauzerlarni qo'llab-quvvatlamoqchisiz va qay darajada saytingiz uchun eng yaxshisi bo'lgan qarorga asoslanib qaror qabul qilishingiz kerak bo'ladi.

CSS yozishda bir nechta narsalarga e'tibor berish kerak. Yaxshi xabar shundaki, siz hamma narsani qila olasiz va uni o'zlashtirish uchun ozgina sabr kerak.

Keling, konferentsiya saytida oxirgi to'xtagan joyga qaytaylik va qanday qilib CSS qo'shishimiz mumkinligini ko'rib chiqaylik.

Uslublar-konferentsiya papkasida keling, aktivlar deb nomlangan yangi papka yarataylik. Uslublar, tasvirlar, videolar va boshqalar kabi veb-saytimiz uchun barcha resurslarni shu yerda saqlaymiz. Uslublarimiz uchun keling, aktivlar jildiga boshqa uslublar jadvallari papkasini qo'shamiz.
Matn muharriridan foydalanib, main.css nomli yangi fayl yaratamiz va uni biz yaratgan uslublar jadvallari papkasida saqlaymiz.

Brauzerda index.html faylini ko'rib, elementlar va

Birlamchi uslub allaqachon mavjud. Xususan, ular o'ziga xos shrift hajmi va atrofida bo'sh joyga ega. Erik Meyerning qayta o'rnatishidan foydalanib, biz ushbu uslublarni yumshata olamiz, bu ularning har biriga bir xil asosdan boshlash imkonini beradi. Buning uchun uning veb-saytini ko'rib chiqing, kodni nusxalang va uni main.css faylimizning yuqori qismiga qo'ying.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Litsenziya: hech biri (jamoat mulki) */ html, tana, div, span, applet, obyekt, iframe, h1, h2, h3, h4, h5, h6, p, blok tirnoq, pre, a, abbr, qisqartma, manzil, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, maydonlar majmuasi, shakl, yorliq, afsona, jadval, sarlavha, tbody, tfoot, thead, tr, th, td, maqola, chetga, tuval, tafsilotlar, joylashtirish, rasm, figcaption, altbilgi, sarlavha, hgroup, menyu, nav, chiqish, ruby, bo'lim, xulosa, vaqt, belgi, audio, video (chekka: 0; to'ldirish: 0; chegara: 0; shrift o'lchami: 100%; shrift: meros; vertikal tekislash: asosiy chiziq ) /* Eski brauzerlar uchun HTML5 displey rolini tiklash */ maqola, bir chetga, tafsilotlar, rasm, rasm, altbilgi, sarlavha, hgroup, menyu, nav, bo‘lim (displey: blok; ) tana (satr balandligi: 1; ) ol, ul ( roʻyxat uslubi: yoʻq; ) blok qoʻshtirnoq, q ( qoʻshtirnoq: yoʻq; ) blok qoʻshtirnoq: oldin, blok qoʻshtirnoq: keyin, q: oldin, q: keyin ( kontent: ""; tarkib: hech biri; ) jadval ( chegara- yiqilish: yiqilish; chegara oralig'i: 0; )

Bizning main.css faylimiz shakllana boshladi, shuning uchun uni index.html fayliga ulaymiz. Matn muharririda index.html ni oching va elementdan keyin ga element qo'shing.
Biz element orqali uslublarga ishora qilayotganimiz uchun qiymatlar jadvali bilan rel atributini qo'shing.

Shuningdek, biz href atributidan foydalangan holda main.css faylimizga havolani kiritamiz. Esda tutingki, bizning main.css faylimiz aktivlar papkasida joylashgan uslublar jadvallari papkasida saqlanadi. Shunday qilib, bizning main.css faylimizga yo'l bo'lgan href atributining qiymati assets/stylesheets/main.css bo'lishi kerak.

Uslublar konferentsiyasi

Bizning ishimizni tekshirish va HTML va CSS-ning birgalikda qanday ishlashini ko'rish vaqti keldi. Brauzerda index.html faylini ochish (yoki u allaqachon ochiq bo'lsa, sahifani yangilash) avvalgidan bir oz boshqacha natijani ko'rsatishi kerak.

Guruch. 1.04. CSS-ni qayta o'rnatgan uslublar konferentsiyasi saytimiz

Quyida siz Styles Conference veb-saytini hozirgi holatida ko'rishingiz, shuningdek, saytning joriy manba kodini yuklab olishingiz mumkin.

Demak, hammasi yaxshi! Ushbu qo'llanmada biz katta qadamlar qo'ydik.

O'ylab ko'ring, endi siz HTML va CSS asoslarini bilasiz. Biz davom etar ekanmiz va siz HTML va CSS yozishga ko'proq vaqt sarflasangiz, ushbu ikki til bilan ishlash ancha qulay bo'ladi.

Xulosa qilish uchun biz quyidagilarni ko'rib chiqdik:

HTML va CSS o'rtasidagi farq.
HTML elementlari, teglari va atributlari bilan tanishish.
Birinchi veb-sahifangizning tuzilishini sozlash.
CSS selektorlari, xususiyatlari va qiymatlari bilan tanishish.
CSS selektorlari bilan ishlash.
HTML-dan CSS-ga ko'rsatgich.
CSS-ni qayta tiklashning ahamiyati.

Keling, HTMLni batafsil ko'rib chiqamiz va semantika bilan biroz tanishamiz.

Scripting Master orqali umumiy HTML atamalari
Ta'sirchan veb-saytlar orqali CSS shartlari va ta'riflari
CSS asboblari: Erik Meyer orqali CSS-ni tiklash