Верстка сайта — это процесс формирования веб-страницы по готовому макету.

Процесс верстки включает в себя создание кода страницы при помощи понятного основным применяемым пользователями браузерам языка разметки гипертекста html, и оформление ее с помощью каскадных таблиц стилей (CSS).

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

Верстка сайта может быть осуществлена двумя различными способами — блочным и табличным.

Табличная верстка сайта

При таком типе верстки в качестве структурной основы для расположения графических и текстовых элементов документа используют таблицы. Изначально таблицы не были предназначены для построения каркаса страниц, а использовались веб-разработчиками для стандартного ввода данных. Для того, чтобы сверстать сайт с помощью табличной верстки, зачастую возникает необходимость использования множества вложенных таблиц. Каждый элемент страницы — заголовок, текст, картинка — лежит в собственной ячейке, расположенной в другой, более крупной. Те, в свою очередь лежат в главной ячейке — самой странице сайта.

Таблица содержит в себе следующие конструктивные элементы:

<THEAD> - группа рядов верха

<TFOOT> - группа рядов низа

<TBODY> - группы рядов центра

<CAPTION> - заголовок таблицы

<COL> - столбец таблицы

<COLGROUP> - группа столбцов

<TR> - ряд ячеек таблицы

<TH> - ячейка заголовка столбца

<TD> - ячейка таблицы

Пример кода самой простой таблицы:

<table>

<tr>

<td>Ваш текст</td>

</tr>

</table>

Каркас из таблицы строится следующим образом:

Код этого примера следующий:

А в результате выполнения кода возникает вот что:

Блочная (div-) верстка сайта

Этот тип верстки набирает в последнее время популярность. Большинство современных сайтов создаются именно по этой технологии, либо с совмещением табличной и div-верстки. Суть этого типа верстки в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег <div>. Позиционирование различными способами этих блоков на странице достигается с помощью применения стилей. Сформированный каркас из блоков наполняется материалами.

В самом упрощенном понимании, блок представляет собой прямоугольную область с рядом свойств: рамка, поля и отступы. Включать в себя блок может что угодно — это и кусок текста, и картинка, и список, и форма для заполнения, и меню навигации…

Свойства:

Рамка (border) — контур, имеющий следующие характеристики: толщина, цвет и тип линии (сплошная, пунктирная, точечная).

Поля (padding) — пространство, отделяющее содержимое блока от рамки, чтобы текст не был впритык к границам блока. Имеют определенный размер.

Отступы (margin) — это незаполненное пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Стандартные HTML-тэги имеют строгую привязку к своему содержимому (к примеру, <p> — к абзацам, <а> — к ссылкам, <img> — к изображениям). В отличие от них, тэг div — по сути, нейтральный, то есть он может содержать что угодно. Его используют для задания на странице функциональных областей, а именно: «шапка» (header), блок навигации, блок основного содержимого, «футер» (footer) (также его называют подвалом).

У тэга div есть два атрибута :

id — позволяет придать тегу уникальное значение, которое на странице используется только один раз. Например "header" или "footer". Программист сможет задать затем в листе стилей для тэга div с атрибутом id и значением "header" (шапка) одни настройки, а для подвала "footer" совсем другие. И браузер верно распознает в получившемся коде, что вот этот абзац, обозначенный тэгом <р>, относится к "шапке" и будет набран, к примеру, крупным и красным шрифтом, а вот этот — к "подвалу" и будет мелким и серым.

class — позволяет нескольким элементам придавать одно и то же значение. Предположим, всем изображениям на странице добавить рамку, имеющую одинаковые толщину и цвет.  Атрибут id уже нельзя использовать, поскольку изображений несколько.

Пример блочного каркаса:

Код этого примера:

...<STYLE type="text/css">

Оформление внешнего вида веб-страниц, написанных на HTML, производится с помощью CSS.

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

В  начале верстки кода задается ссылка на CSS-файл,где задан стиль каждого необходимого элемента

Очень важно, чтобы готовый сайт корректно отображался во всех распространенных браузерах. В противном случае, один пользователь может увидеть то, что задумали создатели интернет-проекта, а другой — налезшие друг на друга картинки, сдвинутый текст (а то и вовсе не увидеть его), перекошенную структуру… Для этого и нужна кроссбраузерная верстка сайта.

Кроссбраузерная верстка веб-сайта — верстка веб-сайта, выглядящая и одинаково в популярных на данный момент среди пользователей интернета браузерах (есть сайты, при создании которых прописывается список поддерживаемых браузеров).

В настоящее время существует целый ряд популярных браузеров, применяемых пользователями для доступа в интернет. Это Internet Explorer, Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari и другие . Каждый из них имеет несколько версий, и каждый может отображать одну и ту же страницу, представленную в формате html, по-разному. Разработчики браузеров стремятся прийти к единому стандарту использования языка гипертекстовой разметки, но пока существуют разногласия, поэтому верстка сайтов должна учитывать кроссбраузерность.