|
Архітектура ПК
[1]
Архітектура та експлуатація персонального комп'ютера
|
|
СПЗ
[12]
Системне програмне забезпечення та операційні системи
|
| Комп'ютерна графіка [25] |
|
КСМ
[28]
Комп'ютерні системи та мережі
|
|
ІСІТО
[1]
Інформаційні системи і технології обліку
|
| Бухгалтерський облік [0] |
|
АМтП
[10]
Алгоритмічні мови та програмування
|
| Копирайт рерайт [1] |
|
СУБД
[18]
Системи управління базами даних
|
|
ОКТ практикум
[2]
Основи комп'ютерних технологій практикум
|
|
Інформатика (практ)
[1]
інформатика практикум, практичні заняття
|
|
ТіОБВ
[61]
Технологія і організація будівельного виробництва
|
|
ОСАПр
[6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
|
| ТіОБВ (заочники) [1] |
15:10 Блокові теги Ч1 |
Блоковим називається елемент, який відображається на веб-сторінці у вигляді прямокутника. Такий елемент займає всю доступну ширину, висота елемента визначається його вмістом, і він завжди починається з нового рядка. До блокових елементів відносяться контейнери <DIV>, <H1> і <P>. Допускається вкладати один блоковий елемент всередину іншого, а також розміщувати усередині них вбудовані елементи (<SPAN> наприклад). Заборонено додавати всередину вбудованих елементів блокові (приклад 1). Приклад 1. Використання блокових елементів <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 Transitional//en"> У даному прикладі параграф (тег <P>) вставляється всередину контейнера <DIV>, а посилання (тег<A>) — в заголовок <H2>. До речі, помилкою буде поступити навпаки — додати <H2> у контейнер <A> (<а href=”link1.html”><h2>Ut wisi</h2></a>), оскільки тег <A> не відноситься до блокових елементів. Зауваження Вкладання блокових тегів всередину вбудованих елементів характерний, швидше, для новачків, які ще не розуміють різниці між ними. До того ж браузери навчилися відловлювати подібні помилки і відображають код більш-менш коректно. Проте, рекомендуємо дотримуватися в цьому питанні специфікації, щоб виводити веб-сторінку без помилок. Ширина блокових елементів За умовчанням ширина блоку обчислюється автоматично і займає весь доступний простір. Тут слід пояснити, що під цим мається на увазі. Наприклад, якщо тег <DIV> у коді документа присутній один, то він займає всю вільну ширину вікна браузера і ширина блоку дорівнюватиме 100%. Варто помістити один тег<DIV> всередину іншого, як ширина внутрішнього тега починає обчислюватися щодо його батька, тобто зовнішнього контейнера. Деякі браузери достатньо вільно трактують поняття ширини, хоча в специфікації CSS чітко вказано, що ширина складається з суми наступних параметрів: ширина самого блоку (width), відступів (margin), полів (padding) і меж (border). У прикладі 2 показано створення шару, в якому присутні всі ці компоненти. Приклад 2. Ширина шару <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 Transitional//en"> В результаті даного прикладу отримаємо шар шириною 342 пікселя. Браузер Internet Explorer (а також Opera) встановить ширину даного шару рівної 300 пікселів, незалежно від значень відступів, меж і полів. Виходить, що із-за різниці в підходах ширина шару в браузерах може істотно розрізнятися. Розберемо ще один приклад пов'язаний з шириною. За умовчанням ширина шару задається як auto - це дозволяє вписувати шар у вікно браузера, не враховуючи значення встановлених полів. Якщо змінити ширину на 100%, то при додаванні значення відступів, полів або меж неминуче з'явиться горизонтальна смуга прокрутки. Знову ж таки це правило не для браузера Internet Explorer (Opera). Для отримання універсального результату, що однаково працює в різних браузерах і без використання хаків, є декілька підходів. У прикладі 3 продемонстровано створення трьох шарів, ширина яких визначається у відсотках. Приклад 3. Ширина шарів у відсотках <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 Transitional//en"> Ширина першого шару в даному прикладі (layer1) встановлена як 100%, що приводить до відображення горизонтальної смуги прокрутки в браузере Firefox і коректній роботі в Internet Explorer. Для другого шару (layer2) ширина також задана 100%, але поля визначаються для внутрішнього параграфа (тег <P>). За рахунок цього ширина шару у всіх браузерах буде однаковою. До третього шару (layer3) взагалі не застосовується параметр width, тому він визначається за умовчанням — auto. У такому разі шар займатиме всю ширину вікна браузера без всяких горизонтальних смуг. Спосіб установки ширини залежить від вживаного макету і вибору розробника, але у будь-якому випадку потрібно враховувати особливості блокових елементів і створювати універсальний код. |
|
|
| Всього коментарів: 0 | |