Верстка сайтов

Оглавление
Основные понятия
Тэги и элементы разметки
Управление визуальным представлением документа
Правила написания кода

Основные понятия
Сайт
Веб-страница
Браузер
Гиперссылка
Язык разметки
Тэг
Код страницы

Сайт, страница, браузер
Сайт — это набор связанных между собой веб-страниц. Каждая страница представляет из себя текстовый документ, созданный с использованием определенных правил.
Веб-страницы просматриваются с помощью программ-браузеров. Наиболее известные и популярные браузеры это Internet Explorer, FireFox, Opera, Chrome.
Страницы связанны между собой с помощью ссылок (или гиперссылок, линков) — особым образом выделенных элементов, нажатие на которые приводит к переходу к другому документу.

Язык разметки
Правила, с помощью которых создается веб-страница, называются языком разметки.
Язык разметки, полное название которого HyperText Markup Language (HTML) предназначен для описания структуры страниц, того как они должны отображаться на экране браузера.
Примеры 1, 2

Тэги, код страницы
То есть, веб-страница содержит не только текст, но и специальные метки — тэги (tag), указывающие браузеру, как отображать тот или иной фрагмент документа. Все тэги заключены в скобки из знаков "<" и ">".
Поскольку то, что мы пишем в документе, и то, что мы видим на экране браузера различается, то текст документа называют еще кодом страницы, исходным кодом, или просто кодом.

Текст страницы, не содержащей разметки отображается сплошным потоком

Разметка задает структуру и визуальное представление документа

Тэги и элементы разметки
Описание элемента
Структура документа
Типы элементов

Описание элемента
Тэги описывают элементы документа
Учебный центр
В коде страницы каждое описание типа элемента обычно состоит из
начального, или открывающего тэга —
содержимого элемента — «Учебный центр»
закрывающего тэга —
Такие тэги обычно называют парными.
Есть тэги, не имеющие содержимого, например
или
.
Такие тэги называют непарными, или одиночными.

Тэги и элементы
Элементы - это не тэги. Некоторые называют элементы тэгами (например, «тэг P»). Помните, что элемент — это одно, а тэг (начала или конца, неважно) — другое.

Структура документа

Каждая веб-страница состоит из трех частей
Определения типа документа (объявление DOCTYPE, DTD). Указывает браузеру, какая именно версия языка разметки используется.
Заголовка документа (head). Содержит служебную информацию.
Тела документа (body). Содержит информацию, непосредственно отображаемую на экране.

Типы элементов
В языке HTML предусмотрено большое число различных элементов, но к основным и наиболее часто используемым можно отнести:
абзац — p
заголовки — h1, h2, h3, h4, h5, h6
гиперссылки — a
списки — ol (нумерованный), ul (маркированный)
элементы списка — li
изображения — img
элементы для описания таблиц — table, tr, td
символ перехода на новую строку — br
горизонтальная линия — hr («морально» устаревший элемент, приводится в качестве примера)

Вложенность элементов
Элементы могут быть вложены один в другой

Свойства элементов
С элементами могут быть связаны свойства, называемые атрибутами.
Свойства могут иметь значение, а могут обходится и без него
Пары атрибут/значение помещаются перед закрывающей скобкой ">" начального тэга элемента.

Замещаемые и незамещаемые элементы
Все элементы разметки разделяются на замещаемые и незамещаемые
Замещаемые элементы —это те, содержимое которых замещается чем-то, что не содержится непосредственно в документе. Наиболее очевидный пример элемент img, замещаемый файлом изображения.
Этот элемент разметки не имеет реального содержимого — только имя элемента и атрибут. И он ничего не будет представлять на экране, пока мы не укажем для него внешнее содержимое — файл logo.gif.
Большинство элементов — незамещаемые. Это означает что браузер отображает их содержимое, находящееся между открывающим и закрывающим тэгами.

Отображение элементов
Элементы также можно разделить на отображаемые и не имеющие визуального представления.
Например, элемент meta, используемый в заголовке страницы, элемент br, осуществляющий перевод строки, или элемент nobr, указывающий, что нельзя осуществлять разрыв страницы в выделенной области.

Управление визуальным представлением документа
Презентационные возможности языка HTML
Использование CSS

Презентационные возможности языка HTML
HTML — это, в первую очередь, язык для описания структуры документа.
Но в нем есть и возможности для управления визуальным представлением — элементы (font, hr) и атрибуты элементов (bgcolor, color, size, width).
Пример 3

Презентационные возможности языка HTML
Использование этих возможностей допустимо, но крайне не желательно в серьезных проектах, поскольку в этом случае:
усложняется код;
ухудшается читабельность кода;
появляются проблемы при использовании для просмотра страницы мобильных устройств или других нестандартных браузеров;
усложняется модификация и сопровождение кода.

Использование CSS
Правильный подход — использование возможностей CSS (Cascading Style Sheets).
CSS — это язык для описания стилей, визуального отображения страницы.
Пример 4

Правила написания кода
В своей работе мы будем следовать правилам, определяемым стандартом XHTML (eXtended HTML)
1. Все теги должны быть записаны в нижнем регистре, то есть нельзя писать , а надо писать
2. Все теги должны быть закрыты
2a. В случае, если элемент не имеет закрывающего тега (например,
или
), надо добавлять слэш в конце тега
и
3. Вложенность тегов должна быть корректной. Например, нельзя писать
текст
, а надо писать
текст
.
4. Все атрибуты должны быть заключены в кавычки. Например, нельзя писать
, а надо писать
.