Короткі теоретичні відомості до Практичної роботи №5

Що таке блокова верстка?

Раніше сайти верстали за допомогою таблиць. Кожен елемент сторінки, будь то заголовок, текст або картинка, розташовувався у власній осередку. Ці осередки купчасто роїлися в інших, більших осередках, а ті в свою чергу лежали в головній осередку, тобто в самій сторінці сайту.

Таблична верстка зараз вже морально застаріла, хоча багато хто продовжують її використовувати. Великим мінусом її є великоваговий код. Адже кожну мізерний осередок потрібно позначити певними тегами.

Блокова верстка - зовсім інша. Тут все елементи сторінки розташовані в спеціальних блоках, які називаються div. За своєю суттю вони чимось схожі на ті ж таблиці. Коробка - вона і в Африці коробка. Але блоки набагато зручніші, простіші і функціональніші.

Блок в верстці сайту - це звичайна прямокутна область, яка володіє рядом властивостей, таких як: рамка, поля і відступи. Вміст блоку може бути чим завгодно - шматок тексту, картинка, список, форма для заповнення, меню навігації тощо.

Рамка (border) - це контур блоку, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова).

Поля (padding) - відділяють вміст блоку від його рамки, щоб текст, наприклад, не був «впритул» до стінок блоку.

Відступи (margin) - це порожній простір між різними блоками, що дозволяє на заданій відстані розташувати два блоку відносно один одного.

Блоки, як і таблиці, завжди розташовуються на сторінці вертикально. Тобто, якщо в коді сторінки записані підряд два блоки, то відобразяться вони в браузері один під іншим. Якщо нам потрібно розташувати кілька блоків горизонтально в одну лінію, то в їх властивості задається такий параметр як «обтікання» (float).

Блокова верстка сайту. Теги

Тег - це особлива конструкція мови HTML. Розрізняють відкриває і закриває теги. Не плутайте їх з хештегом з соцмереж, або мітками (тегами) на сайтах, це різні речі!

У найпростішому випадку тег - це як деталь дитячого конструктора, яка має своє суворе призначення: планка - значить планка, колесо - значить колесо і ніщо інше. Наприклад, тег абзацу: <p>Текст абзаца.</p> завжди позначається буквою p і ніяк інакше. Це його ім'я.

Теги завжди укладені в кутові дужки. Як видно з прикладу, є відкриває і закриває тег. У закриває тега перед ім'ям доданий «слеш» - коса риска, нахилена вправо / .

Не всі теги парні. Наприклад, тег зображення img його не має зовсім. Але щоб відповідати сучасним стандартам і вимогам специфікації XHTML, йому все-таки додають перед закритою кутовою дужкою пробіл зі слешем. 

Виглядає це приблизно так: <img src="images/risunok.jpg" alt="" />

Тег div

Тег div - це основа блокової верстки. Це ті самі кубики, з яких і будується весь сайт. Цей тег нейтральний. На відміну від стандартних HTML-тегів, які строго прив'язані до їх вмісту ( p - до абзаців, a - до посилань, img - до зображень), тег div може вміщати що завгодно і скільки завгодно всього цього добра. Вважайте його такою собі великий коробкою, куди звалені всі іграшки.

Тег div використовують для завдання функціональних областей на сторінці . Наприклад, таких як: «шапка» ( header ), блок навігації, блок основного вмісту, «футер» ( footer ) або підвал по-нашому.

У тега div , як і у будь-якого іншого, є свої власні атрибути.

Атрибут - описова характеристика тега. Тобто, що він може робити і яким чином. Наприклад, візьмемо тег зображення:
<img src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок" />
В даному випадку src , width , height , alt є атрибутами тега. В лапках (і це теж обов'язкова вимога сучасних стандартів) дані значення атрибутів.

Розшифрувати такий запис нескладно. Тег вказує, що в даному місці сторінки потрібно приліпити зображення risunok.jpg з папки images . Ширина малюнка 200 пікселів, висота 50 пікселів. І до купи додано альтернативний текст, який пояснює, що зображено на малюнку.

До речі, альтернативний текст - це не примха, а також необхідна вимога. Не всі користувачі мережі мають хороший зір. Хтось користується програмою розпізнавання і читання тексту. А хтось просто вимикає показ картинок в браузері. Ось для них і існують альтернативні підписи до малюнків.

Якщо ж їх немає сенсу підписувати (наприклад маркер списку або стрілка якась), то у атрибута alt залишають порожнє місце між лапками.

Атрибути тега div

Атрибутів у тега div всього два:

id - атрибут, що дозволяє надати тегу унікальне значення, тобто таке, яке на сторінці використовується тільки один раз . Наприклад, header або footer.

Таким чином можна поставити далі в листі стилів для тега div з атрибутом id і значенням header (шапка) одні налаштування, а для підвалу footer зовсім інші. І браузер вірно розпізнає, що ось цей шматок тексту відноситься до «шапки» і буде набрано, наприклад, великим і червоним шрифтом, а ось цей до «підвалу» і буде набрано дрібним і сірим шрифтом. І ніякої плутанини!

class - атрибут, що дозволяє одне і те ж значення надати кільком елементам. Наприклад, всіх зображень на сторінці додати рамку однакової товщини і кольору. Так як зображень кілька, то атрибут id вже не можна використовувати, тому ми застосовуємо class.

Для написання коду можна користуватися спеціальним редактором. Наприклад, PSPad -це зручна безкоштовна програма, якою користуються як програмісти, так і верстальники. 

Для початку визначимо тип нашого документа.

Що таке тип документа DOCTYPE

Будь-яка грамотно зверстані сторінка повинна в самому початку містити так званий DOCTYPE. Поки що існують браузери, які прекрасно обходяться і без вказівки доктайпів. Але вже наближаються ті часи, коли сторінка сайту, яка відразу починається з тега <html> просто не буде прочитана, тому що стандарти стають жорсткішими.

Визначимо нашу сторінку відповідно до найкрутішого і строгого на даний момент доктайпу під назвою Strict 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Зверніть увагу на одне строге правило: у доктайпі немає слешу перед закритим тегом! Це єдиний виняток!

Або в HTML5: <!DOCTYPE html>

Далі  

<html xmlns="http://www.w3.org/1999/xhtml" lang="ua" xml:lang="ua">
lang і ua - це вказівка на мову документа. 

Теги head, title і body

Тег head і метадані сайту

Наступний тег <head> . У ньому міститься будь-яка службова інформація: назва сторінки (те, що входить в титл), кодування, ключові слова для пошукових роботів, опис сторінки і т.п. Вся ця інфа записана в службових тегах meta , які не відображаються на сторінці в браузері.

Тег title

Наступним парним тегом буде title - це той текст, який з'являється на вкладці браузера при відкритті сторінки: <title>Головна сторінка</title>

А тепер впишемо тег </ head> . 

<head>

<title>...</title>

</head>

Тег body

Тег тіла сторінки - <body>...</body> .