Htmlda div nimani anglatadi. HTML5 belgilashda keng tarqalgan xatolardan qochish. Misol. Div bilan chiroyli ramka

Bu yerda har qanday kontent. Kabi

, . Siz ayting!

Natija quyidagicha ko'rinadi:

Uslubli misol

Ushbu misol CSS-dan foydalanib uslubni qo'llash orqali soyali quti yaratadi. Elementga "shadowbox" nomli uslubni qo'llash uchun sinf atributidan foydalanishga e'tibor bering.

HTML

Mana juda qiziqarli eslatma soyali chiroyli qutida ko'rsatilgan.

CSS .shadowbox (kengligi: 15em; hoshiya: 1px qattiq #333; quti soyasi: 8px 8px 5px #444; toʻldirish: 8px 12px; fon tasviri: chiziqli-gradient (180deg, #fff, #ddd 40%, #ccc) ) Natija spetsifikatsiyalari Spetsifikatsiya holati sharhi

HTML yashash standarti Ushbu spetsifikatsiyadagi "" ta'rifi.	Yashash standarti	Oxirgi suratdan beri hech qanday o'zgarish yo'q
HTML5 Ushbu spetsifikatsiyadagi "" ta'rifi.	Tavsiya	Eskirgan tekislash
HTML 4.01 spetsifikatsiyasi Ushbu spetsifikatsiyadagi "" ta'rifi.	Tavsiya

Brauzer mosligi

Ushbu sahifadagi muvofiqlik jadvali tuzilgan ma'lumotlardan yaratilgan. Agar siz maʼlumotlarga oʻz hissangizni qoʻshmoqchi boʻlsangiz, iltimos, https://github.com/mdn/browser-compat-data manziliga tashrif buyuring va bizga tortishish soʻrovini yuboring.

GitHub-da muvofiqlik ma'lumotlarini yangilang

Eskirgan Nostandart

Xayrli kun do'stlar! Qanday bo'lmasin, html bo'yicha bir nechta darslarimda men gapirdim va div layout kabi tushunchadan foydalandim.

Ehtimol sizda savollar bo'lishi mumkin, ayniqsa siz yangi boshlanuvchilar bo'lsangiz, bu nima?

Bugungi maqolada men sizning barcha shubhalaringizni yo'q qilaman va div bloklari nimada ekanligi haqidagi savollarga javob beraman

Keling, o'qishni boshlaylik.

Miyangizni chalkashtirib yubormaslik uchun qisqacha aytamanki, ilgari barcha veb-dizaynerlar va ishlab chiquvchilar sahifalar va saytlarni yaratishda jadval tartibidan foydalanganlar, bu erda har bir hujayra ma'lum bir elementni ifodalaydi. Bu shunday ko'rinardi:

Veb-sayt yaratish shunday edi. Bu juda ibtidoiy misol, lekin o'sha uzoq vaqtlarda veb-saytlar qanday yaratilganligini aniq tasavvur qilishingiz mumkin. Internet texnologiyalari bir joyda turmaydi va bir nuqtada bizga html div layout tushunchasi keldi. Va keyin, ular aytganidek, hammasi boshlandi.

Uning veb-saytlarni ishlab chiqishdagi ahamiyati haqiqatan ham katta. Endi veb-saytlar yaratish va HTML bloklarini boshqarish har qachongidan ham osonlashdi. Saytlar chiroyli va qiziqarli bo'la boshladi. Endi butun dunyo o'z yo'lini boshladi.

Endi biz div html bloklaridan foydalanish modelini soddalashtirilgan tarzda tasvirlashimiz mumkin.

Qulaylik bloklarning bir-biridan mustaqilligidadir, ularni alohida boshqarish oson, ularni xohlagancha ko'chiring, uslublar qo'shing, bir nechta Div guruhlari uchun CSS qoidalari orqali umumiy uslublarni o'rnatishingiz mumkin. Qabul qiling, bu qulay.

Keling, html sahifasida div teglarini qo'llashning bir necha amaliy misollarini ko'rib chiqaylik. Oddiy misolda biz sahifada 4 ta blok yaratamiz. Men har doim bu va keyingi misollarda Notepad++ dan foydalanaman.

Shunday ekan, tushuntirib bering. Bizda dizayn bor< ! DOCTYPE html >u zamonaviy brauzerlar uchun mos keladi va HTML 5 belgilashni qo'llab-quvvatlaydi, biz bu haqda keyingi sonlarda gaplashamiz.

Keyinchalik, katta "ota" konteyneri ochiladi< html >. U juftlangan va oxirida yopilishi kerak! Keyin xizmat yorlig'ining ochilishi keladi< head >, u ham juftlangan va kodlash haqida xizmat ma'lumotlarini o'z ichiga oladi< meta charset >, eng muhim SEO sahifa sarlavhasi, tavsifi (bu yerga kiritmadim, chunki kerak emas, biz faqat texnik jihatni tahlil qilamiz), CSS uslublari, shriftlar (Google Fonts kutubxonasi), JavaScript ham shu yerda.

Keyinchalik teg keladi< body >. U allaqachon barcha blok belgilarini va teglar bilan barcha konteynerlarni saqlaydi. Uni faqat ulkan "barrel" sifatida eslang.

Va nihoyat, bizning div konteynerlarimiz keldi.

Muhim! Ular, shuningdek, boshqa teglar bilan birga yopilishi kerak.

Ko'rib turganingizdek, har bir div bloki tenglik belgisidan keyin sinf atributiga ega, siz ularni mustaqil ravishda va o'zboshimchalik bilan o'rnatishingiz mumkin; Bu sinflar CSS uchun maxsus yaratilgan. Ya'ni, brauzer sahifaga keladi, div blokini ko'radi va unda qanday ma'lumotlar borligini ko'rib chiqadi va CSS fayliga o'tadi va u erda kerakli sinfni qidiradi.

Siz nafaqat sinf atributini o'rnatishingiz mumkin, balki id (identifikator) dan ham foydalanishingiz mumkin. Siz savol berishingiz mumkin: "Qaysi birini ishlatishim men uchun qanday farq qiladi?" Men javob beraman, siz tartib uchun har qanday usuldan foydalanishingiz mumkin. Faqat bitta farq bilan - ustuvorlik nuqtai nazaridan, id sinfga qaraganda ko'proq imtiyozlarga ega.

Buni quyida video cheat varaqda tushuntiraman.

Har kimning veb-saytlarni yaratishda o'ziga xos uslubi bor, men sinfdan foydalanishni afzal ko'raman, chunki CSS-dagi bu yozuv nuqta bilan ko'rsatiladi. selektor

Ha, darvoqe, shuni aytmoqchimanki, sarlavha, yon panel, kontent, altbilgi hammasi CSS selektorlari va ular allaqachon atributlarga ega bo'ladi.

Shunday qilib, biz foydalanuvchilarning boshidagi tartibsizliklarni tozalashda davom etamiz. Biz sinf bilan div bloklarini yaratdik, endi CSS-ga o'tamiz.

Keling, bosh teg ichida sahifamiz uchun CSS qoidalarini ochamiz, ya'ni uni formatlaymiz. Keling, buni shunday qilaylik:

Kirish quyidagicha bo'ladi (shunchaki o'zingizning namunangizdan nusxa ko'chiring va joylashtiring va brauzerga qarang)

div teglaridan foydalanish misoli .header ( eni:600px; balandlik:120px; chegara:1px qora; ) .yon panel (kenglik:200px; balandlik:300px; chegara: 1px qora; float:chap; ) .content ( eni: 370px balandlik: 1px chegara; chap tomonda: 230px;

Ushbu maqolada biz teg nima ekanligini, qaerda ishlatilishini, rasmlar, matnlarni va boshqa ko'p narsalarni joylashtirish uchun tegdan qanday foydalanishni tushunamiz. Bundan tashqari, teg juda tez-tez CSS uslublar jadvallari bilan birgalikda ishlatilishi muhim emas. Biz ularning ba'zilari bilan ham shug'ullanamiz.

Demak, teg html sahifasining blok elementi boʻlib, matnlar, rasmlar, havolalar va boshqa obyektlarning joylashuvini boshqarish va turli xil xossalarni berish uchun moʻljallangan.

O'z-o'zidan (atributlar va CSS uslublarisiz) teg hech qanday tarzda html sahifalari elementlariga ta'sir qilmaydi. Uslublardan foydalanmasdan, teg html sahifasida elementlarni joylashtirish uchun mo'ljallangan. Buning uchun teg align atributiga ega bo'lishi kerak.

Ammo keling, butani aylanib o'tirmaylik va to'g'ridan-to'g'ri mashq qilishga kirishaylik.

Teg yordamida siz istalgan elementni sahifaning istalgan qismiga joylashtirishingiz mumkin.

Masalan, bizda "TEXT" so'zi bor. Uni joylashtirish uchun quyidagi tegdan foydalaning:

Brauzerda u quyidagicha ko'rinadi:

Teg yordamida biz html sahifasining kerakli joyiga nafaqat matnni, balki rasmlarni ham tez va oson joylashtirishimiz mumkin.

Bu shunday amalga oshiriladi:

Aytaylik, bizda flow.jpg nomli rasm bor va u joylashtirilishi kerak bo'lgan fayl bilan bir xil katalogga (bir xil papkada) joylashtirilgan. Shuningdek, uning kengligi 100 piksel va balandligi 72 piksel. Bu holda teglar quyidagicha yoziladi:

Brauzerda u quyidagicha ko'rinadi:

Teglar yordamida siz html sahifasiga nafaqat oddiy matn yoki tasvirlarni, balki havolalarni ham joylashtirishingiz mumkin.

Bu shunday amalga oshiriladi:

Aytaylik, http://site saytiga olib boradigan html sahifasining biror joyiga havola o'rnatishimiz kerak.

O'tmishdan bilganingizdek, saytga havolaning o'zi shunday yozilgan: darslar

Xo'sh, biz teglar yordamida html veb-sayt sahifalarida matnlar, rasmlar va havolalar qanday joylashtirilishini aniqladik. Bu erda hech qanday murakkab narsa yo'q.

Ushbu mavzuni tushunish biroz qiyinroq, chunki biz CSS uslublarini qo'shishimiz kerak.

Shunday qilib, odatda uslublar uchun CSS kengaytmali alohida matn fayli yaratiladi, bu uning sarlavhasidagi sahifaga, ya'ni . Biz buni qilmaymiz, lekin barcha kerakli uslublarni to'g'ridan-to'g'ri tegga yozamiz.

Tegda CSS uslublarini o'rnatish uchun style="stillar nuqta-vergul bilan ajratilgan holda yozilishi kerak" dan foydalaning.

7. padding-top: 30px;

- yuqori chegara 20 piksel

8. padding-chap: 15px;
- chap chekka 130 piksel
9. fon rangi: yashil;

- blokni yashil rang bilan to'ldiring (ranglarni o'n oltilik tizimda ham o'rnatishingiz mumkin)

Bu erda uslub kodini biroz qisqartirishimiz mumkin.

Masalan, siz tashqi chekinish kodini quyidagicha qisqartirishingiz mumkin:

- ko'k rangni belgilash (uslublardagi rang ranglarni ko'rsatish uchun o'n oltilik tizimda ham, qizil, ko'k, sariq kabi oddiy inglizcha so'zlarda ham ko'rsatilishi mumkin)

3.shrift hajmi: 12px;

Albatta, agar sizda juda ko'p tarkib bo'lsa, unda to'g'ridan-to'g'ri tegda uslublardan foydalanish qulay emas, chunki ularni tahrirlash va qo'shish ko'p vaqtni oladi. Va men ushbu maqolada yozganimdek, ishlov berishni soddalashtirish uchun barcha uslublar sahifaning html tegiga kiritilgan CSS kengaytmasi bilan alohida faylga joylashtirilgan.

Ammo biz buni ko'rib chiqmaymiz, chunki bu mavzu veb-sayt dizayni bilan bog'liq butunlay boshqa dasturlash tilidir.

Agar siz CSS, html va umuman video darslar yordamida veb-saytlar yaratishni o'rganmoqchi bo'lsangiz, mening veb-saytimga tashrif buyuring.

Va agar siz Magento dvigatelidan foydalangan holda professional onlayn-do'konlarni qanday yaratishni o'rganishni rejalashtirmoqchi bo'lsangiz, bu mening mualliflik video kursim yordamida amalga oshirishning eng oson usuli.

Element blokli element bo'lib, kontentning ko'rinishini o'zgartirish uchun hujjatning bir qismini ajratib ko'rsatish uchun mo'ljallangan.

Odatda, blokning ko'rinishi uslublar yordamida boshqariladi. Har safar teg ichidagi uslubni tasvirlamaslik uchun uslubni tashqi uslublar jadvaliga ajratishingiz va tegga selektor nomi bilan sinf yoki id parametrini qo'shishingiz mumkin.

...

Parameters align Teg tarkibining hizalanishini belgilaydi.

sarlavha Kontentga maslahat qo'shadi. Yopish belgisi

Majburiy.

1-misol: tegdan foydalanish
DIV yorlig'i
}
.block1 (
kengligi: 200px; fon: #ccc; to'ldirish: 5px; to'ldirish - o'ng: 20px; chegara: qattiq 1px qora; float: chap;
}

.block2 (
kengligi: 200px; fon: #fc0; to'ldirish: 5px; chegara: qattiq 1px qora; float: chap; pozitsiyasi: nisbiy; yuqori: 40px; chap: -70px;

XHTML 1.1 da ruxsat berilmagan

...

Boshqa barcha holatlarda, markazga moslashtirish kamdan-kam qo'llaniladi, chunki bunday matnni katta hajmda o'qish noqulay.

chap Matnni chapga tekislaydi. Bunday holda, matn satrlari chapga tekislanadi va o'ng qirrasi narvon sifatida joylashtiriladi. Ushbu tekislash usuli veb-saytlarda eng mashhur hisoblanadi, chunki u foydalanuvchiga yangi qatorni osongina izlash va katta matnni qulay o'qish imkonini beradi.

o'ng Matnni o'ngga tekislaydi. Ushbu hizalama usuli oldingi turga antagonist sifatida ishlaydi. Ya'ni, matn satrlari o'ng chetiga to'g'ri keladi, lekin chap "yirtilgan" bo'lib qoladi. Chap qirrasi tekislanmaganligi sababli, bu erda yangi satrlar o'qiladi, bu matnni o'qish chapga tekislanganidan ko'ra qiyinroq. Shuning uchun, o'ngga tekislash odatda uchta qatordan ko'p bo'lmagan qisqa sarlavhalar uchun ishlatiladi.
Biz matnni o'ngdan chapga o'qish kerak bo'lgan maxsus saytlarni hisobga olmaymiz, bu erda, ehtimol, shunga o'xshash tekislash usuli foydali bo'ladi. Ammo bunday saytlarni mamlakatimizda qayerda ko'rgansiz?
}
oqlash Justified, ya'ni bir vaqtning o'zida chapga va o'ngga tekislangan. Ushbu amalni bajarish uchun brauzer bu holda so'zlar orasiga bo'sh joy qo'yadi. Standart qiymat CSS ga o'xshash
2-misol: Matnni tekislash
}

.block2 (

#qatlam1 (

...

to'ldirish: 5px;

fon: #fff;

kengligi: 60%;

to'ldirish: 10px;