Інтэрнэт, Вэб-дызайн

Блочная вёрстка тэгаў div HTML

Яшчэ нейкіх дзесяць гадоў таму ў рунэце найбольш часта выкарыстоўвалася так званая Таблічная вёрстка. З прычыны таго што стандарты некаторых браўзэраў значна адрозніваліся адзін ад аднаго, прыходзілася шукаць рашэнне, якое б дазволіла правільна адлюстраваць інтэрнэт-дакумент ва ўсіх прыкладаннях. Але час ішоў, развіваліся стандарты, і на змену даволі жорсткай і нягнуткая таблічнай прыйшла добра змяняная і спагадлівая блочная вёрстка. На чале кута такой тэхналогіі ляжыць прынцып выкарыстання элементаў

. HTML-дакументы ў большасці сваёй пачалі будавацца на аснове асобных блокаў, якія, у адрозненне ад таблічнай вёрсткі, могуць быць незалежнымі адзін ад аднаго.

ўзнікненне

Ўскладненне вэб-старонак і развіццё камп'ютэрнай тэхнікі прывяло да таго, што вэб-дакумент быў падзелены на дзве часткі - каркас (HTML-код) і афармленне (табліцы стыляў). Дзякуючы гэтаму ўдалося дасягнуць небывалага развіцця вэба, вынікі якога мы зараз можам бачыць на большасці сучасных сайтаў. Акрамя паляпшэння працэсу распрацоўкі

HTML дазволіў вызначыць для кожнага асобнага элемента свае правілы афармлення. Гэта спрыяла паляпшэнню чытальнасці кода вэб-старонкі і памяншэння часу загрузкі дакумента. Цяпер пошукавыя машыны значна хутчэй і лепш апрацоўваюць інфармацыю, даступную на сайце.

Стандарты і праверка

Тэг

у HTML выкарыстоўваецца ў строгай адпаведнасці са стандартамі W3C (Кансорцыума сусветнага павуціння). Праверка кода старонкі праводзіцца адмысловай прыладай - валідатары, які парс (скануе і шукае) разнастайныя памылкі на старонцы. Валіднасць старонка азначае, што ўсе тэгі былі выкарыстаныя правільна і цалкам адказваюць патрабаванням стандартаў.

Тэгі

дазваляюць ствараць блокі ці, як іх яшчэ называюць, кантэйнеры. Пры гэтым асобныя элементы могуць укладваць адзін у аднаго, ствараючы пры гэтым структуры неабходнай канфігурацыі і складанасці. Выкарыстанне тэга
без суправаджэння класам або ідэнтыфікатарам практычна не сустракаецца. Гэта абумоўлена «безаблічнай» элемента. Калі яму не прысвоіць клас, то ў выніку ўсё кантэйнеры будуць мець ідэнтычную канфігурацыю.

Для таго каб стварыць сапраўды правільны дакумент, неабходна выкарыстоўваць наступную структуру тэга

class = «якое-то_имя». Звяртаючыся па імені класа, у табліцах стылю можна вызначыць становішча, памер, падвядзенне і іншыя параметры асобнага блока ў дакуменце.

Выкарыстанне класаў і ідэнтыфікатараў

Блок

HTML можа вызначацца як ідэнтыфікатарам id, так і класам class. Адрозненне першага ад другога ў тым, што id выкарыстоўваецца на старонцы дакумента толькі адзін раз. Гэта значыць яго выкарыстоўваюць для вызначэння унікальных элементаў, якія больш нідзе не паўтараюцца ў кодзе старонкі. Атрыбут класа дазваляе ўжываць тыя ж правілы стыляў да некалькіх элементам. Такі падыход значна спрашчае распрацоўку і падтрымку кода. Акрамя таго, адзін аб'ект можа мець адначасова некалькі класаў. Для правільнага распазнання іх проста падзяляюць прабеламі.

Натуральна, блочная структура дакумента зусім не мае на ўвазе выкарыстанне толькі толькі адных тэгаў

. У структуры любой інтэрнэт-старонкі заўсёды будуць і іншыя элементы. Акрамя таго, сам па сабе блокавы элемент
можа мець зусім іншы выгляд адлюстравання. Робіцца гэта пры дапамозе ўласцівасці display. Элемент можа мець маленькае ці нават таблічныя адлюстраванне, што дазваляе значна павялічыць гнуткасць выкарыстання блока і стварыць сайт любой канфігурацыі.

Тэг
. HTML-ўласцівасці

Як ужо было сказана вышэй, дадзены тэг не змяняе афармленне фрагмента старонкі, а выкарыстоўваецца для стварэння семантычнай структуры з наступным афармленнем з дапамогай табліц стыляў. Выкарыстанне які зачыняе тэга для гэтага элемента з'яўляецца абавязковым.

Нягледзячы на тое што многія сучасныя браўзэры змогуць распазнаць такую памылку, у некаторых выпадках незачынены тэг можа стаць прычынай «разваливания» структуры дакумента і яго няслушнага адлюстравання.

Бо дадзены элемент з'яўляецца блокавым, то вмещенный ў яго кантэнт будзе пачынацца з новага радка. Для змены падобных паводзін неабходна змяніць параметры адлюстравання блока уласцівасцю display. Акрамя групавання ўкладзеных элементаў, тэг

дазваляе фарматаваць размяшчэнне кантэнту ўнутры яго. Для гэтага выкарыстоўваецца атрыбут align, дзякуючы якому можна размясціць тэкст ці малюнак па левым краі, па правым краі або па цэнтры бацькоўскага элемента.

пазіцыянаванне блокаў

Выкарыстанне атрыбуту position дазваляе змяніць метад пазіцыянавання абранага элемента. Так, існуе тры тыпу пазіцыянавання:

  • Статычнае (static) - выкарыстоўваецца па змаўчанні. У гэтым выпадку элемент размяшчаецца ў адпаведнасці з пазіцыяй у HTML-кодзе.
  • Адноснае (relative). У дадзеным выпадку размяшчэнне аб'екта разлічваецца так жа, як і ў выпадку са статычным пазіцыянаваннем, але дадзенае ўласцівасць дазваляе змяняць пазіцыю для даччыных элементаў.
  • Абсалютная (absolute). Становішча яго разлічваецца адносна элемента Адноснае.

іншыя атрыбуты

Для змены пазіцыі адносна кропкі пачатку каардынатаў выкарыстоўваюцца атрыбуты top і left. Значэння могуць быць як станоўчымі, так і адмоўнымі. Шырыня і вышыня блокавага элемента задаецца атрыбутамі width і height адпаведна. Калі яны не былі пазначаны ў табліцах стыляў, то блок будзе займаць усю шырыню бацькоўскага элемента. Калі кантэнт блока не змяшчаецца па ўсёй шырыні "бацькі", то тады паводзіны элемента вызначаецца атрыбутам overflow.

Спадзяемся, дадзеная стаць дапамагла разабрацца з пытаннем пра тое, што такое

у HTML.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.atomiyme.com. Theme powered by WordPress.