Верстка HTML документов

Вёрсткой веб-страниц называют процесс формирования текста HTML -документа на основании графического изображения веб-страницы, либо описания ее внешнего вида. Существует несколько подходов к выполнению верстки веб-страниц, среди которых наиболее часто используются табличная верстка и блочная верстка.

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

Блочная верстка HTML страницы выполняется с помошью тегов <div>(см. ниже) с набором CSS стилей для них. Верстка блоками DIV[8] имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, содержимое которой не отобразится до тех пор, пока полностью не загрузится в браузер).

Элемент DIV

DIV играет роль универсального блока. Блочный элемент всегда отделен от прочих элементов страницы (контекста) пустой строкой. DIV не несет никакой смысловой нагрузки. Часто говорят, что DIV — это раздел страницы. Применение элемента DIV имеет больший в контексте CSS. DIV позволяет применить атрибуты стиля, связанные с границей блока и отступами блока от границ старшего элемента, а также "набивку", т.е. отступ от границы блока до границы вложенного элемента. Например:

<DIV STYLE="border-color:#003366;

border-width:1px;

margin:20px;padding:10px;">

Блочный элемент, заданный элементом разметки

DIV.

</DIV>

<P>Для него определена граница и отступы как

от границ старшего элемента разметки, так и

для вложенных в него элементов разметки.</P>

Рисунок 2.1 Пример отображения блокаDiv

Если текст будет просматриваться браузерами, не поддерживающими CSS, элемент DIV использовать не рекомендуется. В этом случае лучше применить параграф или другой подходящий по смыслу элемент разметки из стандартного набора HTML.

Элемент SPAN

Элемент разметки SPAN — это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он применяется для задания свойств отображения текста с иcпользованием CSS и должен заменять устаревшие элементы HTML, такие как: FONT, I, B, U, SUB, SUP и т.п.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: