Разметка интернет страницы. Основы CSS и HTML. Блочная верстка. Урок по блочной верстке. Суть блочной вёрстки
HTML (HyperText Markup Language) не является языком программирования, он является языком форматирования, т.е. придания внешнего вида web -странице, при ее присмотре в браузере. Для разметки документа используются теги . Теги заключаются в угловые скобки, и, за редким исключением, являются парными, т.е. существует открывающий и закрывающий тег. Например, чтобы отметить начало нового абзаца в документе ставится тег
(от paragraph ). Тогда в конце абзаца обязательно должен ставиться закрывающий тег
.При расстановке тегов соблюдается правило: закрываются теги в порядке обратном их появлению. Например, если слово в тексте должно быть выделено жирностью (тег от bold ) и одновременно курсивом (тег от italic ), то это может быть сделано одним из следующих способов: слово , или слово.
Ниже приводится текст некоторого html -документа и результат его отображения в браузере:
Доброе время
суток, уважаемый посетитель!
h1>
Надеюсь, вы попали как раз туда, куда хотели.
Здесь вы найдете стихи , песни и сценарии для организации любых праздников.
А теперь специальный подарок к 1 сентября b >
Он к "пятерочкам"
привык -
Русский пять и пение.
Мне всегда его дневник
Портит настроение.
Рис. 74. Отображение приведенной в примере html -страницы в окне браузера. |
В приведенном примере использованы следующие теги:
… - указывает на то, что заключенный между этими тегами текст должен восприниматься как html .
… - тело html -документа. Параметр bgcolor (background color ) задает цвет фона, text – цвет текста. Цвета задаются в шестнадцатеричной системе счисления по модели RGB . Например, #ffffff означает, R =#ff , G =#ff , B =#ff , т.е. по максимуму каждого из трех цветов. Мы знаем, что смешение трех основных цветов в системе RGB в равных долях с максимальной интенсивностью дает чистый белый цвет.
…
- абзац текста.- непарный тег img (от image ), управляющий вставкой в гипертекстовый документ графических иллюстраций. В данном случае, вставляется графический файл с именем pic 1.gif , находящийся в том же каталоге, что и данный html -документ. Если вы обратите внимание на URL -документа, отображенный на рисунке в строке “адрес”, то сможете определить, что данный документ был сохранен под именем “index .html ” в папке “Мои документы ” на диске C . Параметр align управляет выравниванием иллюстрации относительно текста html -страницы. В данном случае значение параметра = “left ” , задает выравнивание по левому краю и разрешает обтекание текстом.
… - тег вставки гиперссылки. При активации данной ссылки в окне браузера загрузится уже другой документ, который в данном случае также должен быть сохранен в той же папке и должен именоваться verse .html .
… - выделение цветом. В данном случае цвет будет красным (R =#ff , G =#00, B =#00).
… - выделение жирностью.
- непарный тег –
принудительный разрыв строки (break
)
внутри текущего абзаца.
Существуют свои теги и для форматирования таблиц, и для организации списков. Освоить язык гипертекстовой разметки достаточно просто, и достаточно просто, при желании, создать и опубликовать в сети Интернет собственный web -сайт.
Посвященной CSS я рассказывал о базовых принципах CSS и типовых случаях его использования. Были рассмотрены основы CSS, возможные виды селекторов, структура HTML с точки зрения CSS. Я перечислил наиболее распространенные свойства CSS и показал как они могут задаваться для элементов страницы. Я уделил достаточно внимания свойствам CSS отвечающие за отступы и границы, отрисовку текста, картинок, ссылок и списков. Наконец остановился на свойствах специфичных для стилизации таблиц.
Все это хорошо, но по прежнему открытым остается вопрос использования стилей CSS для формирования структуры и разметки страницы. Раньше, когда о CSS мало кто знал и он только формировался как действенная технология, для этих целей практически повсеместно использовались таблицы. Они как правило занимали все место на странице и с помощью ячеек таблицы задавались регионы для размещения отдельных секций. Наличие таких свойств как colspan и rowspan , которые соответственно позволяют склеивать несколько колонок на строке и несколько строк в колонке, придавало еще большую гибкость разметке заданную таким образом. Очень часто в качестве содержимого ячейки использовались вложенные таблицы, которые в свою очередь могли иметь свои вложенные таблицы. Такая структура страницы в случае ее больших объемов становилась тяжелой, трудноподдерживаемой и совсем не гибкой. Скажем для того что бы перенести секцию с одной стороны страницы на другую в отдельных слуаях приходилось часами сидеть и вручную переписывать разметку заново.
Теперь же с использованием CSS все стало намного проще. Достаточно отделить содержимое требуемой секции в отдельный слой с помощью тега div и просто задать для него правила позиционирования на странице с помощью свойств CSS. В случае если позже появится необходимость перенести данную секцию в противоположную сторону страницы – достаточно просто изменить свойства CSS не трогая при этом кода самой страницы. Все очень просто и удобно. Однако для того что бы это простота была очевидной нужно немного поглубже познакомиться с данными возможностями.
В данной статье я расскажу о том какие способы разметки страницы бывают, как ими пользоваться и как их создавать. Но начнем со всего попорядку.
Варианты разметки страницы.
Как правило все страницы можно разделить на три категории:
Страницы с фиксированной шириной . Такие страницы имеют ограницение на ширину для своих элементов и вне зависимости от того какой размер окна браузера – ширина используемого региона фиксирована и не изменяется в процесе работы со страницей. Подобные страницы используются в тех местах где устанвлены жесткие требования к отображению элементов страницы и неконтроллируемое расползание каких то элементов попросту недопустимо. В подобных случаях как правило устанавливают фиксированную ширину тега body и центрируют страницу по ширине окна браузера. Самая распространенное значение ширины для страниц с фиксированной шириной: 960px – такой размер позволяет хорошо выглядеть странице при разрешении экрана начиная с 1024х768.
Страницы с плавающей шириной . – У данного типа страниц ширина его элементов не задана, и они свободно изменяют свои размеры, растекаясь по всему экрану или родительской секции и занимая все свободное место. Такой подход наиболее целесообразно применять в случае если основной целью страницы является отображение текста. В других же случаях применение подобных подходов может сделать из вас дон-Кихота, бессмысленно сражающегося с ветрянной мельницей, коей в вашем случае будет браузер.
«Эластичные страницы» . Данные страницы совмещают в себе оба подхода. Элементы таких страниц имеют фиксированную ширину, но способны растягиваться или сжиматься в зависимости от ширины окна браузера в предустановленных диапазонах. Для таких целей можно использовать свойства min-height , min-width , max-height и max-width , о которых я упоминал в первой части.
Для того что бы добиться наилучших результатов, часто имеет смысл объеденить все три подхода к разметке страницы: скажем все вспомогательные и навигационные секции – в которых недопустимо неконтролируемое растекание элеметнов - сделать фиксированными по ширине, а центральную панель сделать «эластичной» или вовсе позволить ей занимать все пространство, остающееся после фиксированных секций в окне браузера.
Способы разметки страницы
CSS позволяет эффективно реализовать разметку, используя различные приемы и техники. К наиболее распространенным приемам относятся плавающие слои (в англоязычных источниках, данный прием может называться float layout) и абсолютное позиционирование (absolute positioning). Причем, субъективно, разметка абсолютного большинства сайтов использует именнно плавающие слои. Далее я постараюсь рассмотреть каждый из этих приемов более детально.
Плавающие слои
Плавающие слои реализуются посредством манипуляций со свойством float для эементов страницы. С помощью этого свойства слой, параграфы и прочие элементы можно позиционировать по левой или правой правой стороне страницы или внешнего контейнера. Для этого необходимо задать свойство float с соответсвующим значением: float: left, right, none; . Остальное содержимое страницы будет «окружать» данный элемент прижатый к одной из сторон. Очень важный момент, который необходимо учесть, что содержимое будет окружать элеметн с float только когда оно определено ниже этого тега в коде страницы и его ширина не больше оставшейся ширины страницы или внешнего контейнера. Поэтому в данном случае очень важно определить последовательность описания элеметнов страницы в HTML файле.
Иногда бывают ситуации, когда необходимо сделать так что бы какое то содержимое не окружало float -элемент а отрисовывалось ниже этого элемента. Примером такой ситуации может быть панель-footer, которая несмотря ни на что всегда должна быть в самом низу страницы. Здесь на помощь может прийти свойство clear которое принимает следующие значения: clear: left; right; both; none . Данное свойство принуждает содержимое отрисовываться ниже float -элемента. Причем с помощью значений этого свойства можно задать к каким float -элементам это относится: с левым выравниманием, с правым и с тем и с тем или ни к тому ни к другому. Так, если у вас есть элемент с float:left , для того что бы остальное содержимое отобразить ниже и не позволить ему окружить данный элемент следует также использовать clear:left .
Однако описанной функциональности разумеется недостаточно для эффективной реализации разметки страницы. Теперь самое время разобраться с приемами для более тонкой настройки разметки. В сулчае плавающих слоев положение элемента страницы по горизонтали как правило задают с помощью CSS свойства margin, которое, как мы уже знаем, используется для задания расстояния от границы одного элемента до другого элемента. На первый взгляд это может показаться несколько странным и не практичным. Однако, это только на первый взгляд. Уникальной особенностью данного свойства является то, что для него можно задавать отрицательные значения, смещая таким образом элемент влево относительно его исходного положения. Ну а соответственно положительно значение смещает элемент вправо (на самом деле разумеется элемент остается на своем месте, просто добавление свойства margin для элеметна визуально смещает его на заданное значение).
Таким образом, можно для элеметнов задать фиксированную ширину и высоту с помощью width и height соответственно, указать требуемые значения float и margin и радоваться результату. Дальнейшие действия ограничены только вашим воображением и смекалкой. В качестве примера, я хочу показать как можно было бы разметить страницу. Ниже представлен пример страницы разбытый на секции и код CSS-файла и HTML-страницы.
view image | |
Index.html | Main.css |
| /*clear browser predefined values*/ padding: 0; margin: 0; font-size: 100%; font-weight: normal; } html /*defining margin-left: auto; and margin-right: auto; we place tha body content to the center of the screen*/ #topmenu #login
#main #top-lsidebar #bottom-lsidebar #top-rsidebar #footer |
Абсолютное позиционирование
Абсолютное позиционирование , как я уже говорил, используется не так часто, как плавающие слои, однако тоже заслуживает внимания. Иногда бывает так, что прием плавающих слоев оказывается неприемлимым по каким то причинам, и поэтому все что нам остается в такой ситуации – это абсолютное позиционирование. Однако чаще всего абсолютное позиционирование используется для месного позиционирования – указания размещения одного элемента относительно положения другого. Так или иначе знать о данном приеме нужно обязательно.
В основе данного приема лежит использование свойства position , которое может принимать следующие значения: position: absolute, relative, fixed, static . Значение absolute – задает позицию элемента в координатах экрана, или родительского элемента, как будет показано ниже. relative – определяет позицию относительно места по умолчанию. При указании смещения с использованием данного значения, на странице остается «дырка», поэтому как правило, использовать его таким образом не стоит, как можно – чуть попозже. fixed – Указывает позицию на экране, вне зависимости от скрола, то есть сколько бы вы не прокручивали скрол бар – элемент все равно останется на своей позиции. Значение static - нормальное позиционирование, если для элеметна не указан тип позиционирования, данное значение применяется по умлочанию.
После того как задано свойство position для элемента, имеет смысл указать свойства определяющие координаты элемента: top, bottom, left и right . Так, указав для какого либо элемента position: absolute , можно задать его положение с помощью вышеперечисленных свойств относительно той или иной границы окна браузера. Однако, если мы говорим об каком либо элементе который, скажем, находится внутри слоя, то абсолютное позиционирование такого элемента осуществляется относительно границ этого самого слоя.
Что бы пояснить сказанное, рассмотрим простой пример. Допустим у нас имеется заголовок а внутри заголовка задана картинка. Тогда ее положение относительно этого самого заголовка можно задать так:
h1 { position: relative; }
h1 img {
position: absolute;
top: 0;
right: 0;
}
То есть используя для заголовка свойство position: relative;
, мы как бы говорим осуществлять позиционирование «относительно меня», ну а свойство position: absolute;
осуществляет позиционирование относительно границ родительского элемента. Как и для предыдущего приема, я предоставлю пример, что бы было понятно, что и как следует использовать.
view image | |
Index.html | Main.css |
banner
| html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } html body /*common panels of the sites*/ Mainpanel h1 #content #main width: 584px; #left width: 200px; #right width: 200px; #footer |
И что дальше?
Вот собственно наверное и все по разметке. Дальнейшие нюансы использования CSS для данной задачи уже будут специфичны для вашего проекта, браузера и требований. Разумеется о многом я не рассказал и сейчас. Не предостерег вас по поводу специфики разметки страницы для IE 6.0 (о, да, по этому впрору отделную книгу писать). Там много чего, даже из того, о чем я говорил, не будет работать или будет работать не так как хотелось бы вам. А для того что бы заработало, нужно пользоваться магическими заклинаниями вроде * html или zoom: 1; Ничего не рассказал о том, как боротся с возникающими проблемами при разметке, когда панели ползут непонятно куда и зачем (а это поверте, случится, и причем не раз, и не только с вамиJ ). Не рассказал про свойство z-index , это очень важно, особенно в случае с абсолютным позиционированим, когда содержимое одного элемента перекрывает содержимое другого. Не рассказал про такое чудесное свойство overflow , которое помогает бороться с содержимым панелей, которому не сидится внутри и так и хочется выпрыгнуть за пределы своего слоя. И еще много-много-много чего, о чем я промолчал. Не потому что я глупый, просто немного ленивыйJ
, - Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.
- Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.
В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.
Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками
Такая конструкция не была плохой для пользователя, так как на отображение это никак не влияло. Проблемы были у разработчиков и у технической поддержки сайта.
Основная проблема — большое количество блоков
Изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как "nav" для навигационной панели, или "footer" для подвала.
Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.
Семантические элементы. HTML 5
Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:
— необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией. — блок статьи. Используется для размещения статей для сайта или блога, каких-либо публикаций или комментариев. Хорошо подходит для дублирования веб-страницы, так как содержимое очень легко изменяется. - — разделяющий блок. Его основной функцией не является оборачивание информации в определенный блок. Чаще всего используется для разделения сайта на разделы и группирует их.
Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.
Разметка страницы
Когда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу ,
, и .Создание нашего макета будет проходить в 3 этапа:
Для начала необходимо создать шапку для нашей страницы.
Создаем тег
Создадим главный блок страницы. Это будет тег-контейнер , в котором будет располагаться список преимуществ товара и кнопка перелистывания.
Далее приступаем к созданию основных блоков. Для них будем использовать теги
Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока
Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей.
Создаем тег
Заключение
У нас получилась простая HTML страница из нескольких блоков, которая не имеет особой привлекательности, пока что. В следующих статьях мы сделаем стилизацию всех этих блоков.
Если хотите, можете самостоятельно . Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится.
А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении!
То самое время перейти к работе с текстом в HTML.
Стильно и качественно оформленный текст всегда положительно сказывается на посещаемости сайта. HTML теги для текста позволяют не только украшать статьи, но и разделять их на абзацы, создавать списки, выделять необходимые фрагменты, добавлять заголовки и управлять размерами, цветами и шрифтами текста, что способствует улучшению подачи информации.
Вообразите себе веб-страницу, которая выглядит как исписанная на 100% страница книги, задержитесь ли вы на такой страничке? Большое количество пользователей сразу закроют такую страницу, ведь она слишком серая, монотонная и вообще не вызывает интерес. Поэтому не стоит пренебрегать тегами форматирования текста в HTML.
Заголовки в HTML
Работа с текстом в HTML невозможна без заголовков, более того, заголовки имеют большой вес в глазах поисковых роботов, именно поэтому в заголовках лучше указывать ключевые поисковые фразы.
-
- это парные теги, в которые заключаются заголовки. Цифра в данном теге задаёт уровень значимости заголовка. Главное название статьи берётся в теги
…
, подзаголовки второго уровня берутся в теги…
и т.д.
На практике, наиболее популярные уровни подзаголовков с 1-ого по 3-ий, остальные практически не встречаются. Ниже расставлены теги заголовков, по степени их значимости:
...
- Основной заголовок;...
- подзаголовок;...
- подзаголовок третьего уровня;...
- подзаголовок четвертого уровня;...
- подзаголовок пятого уровня;...
- подзаголовок шестого уровня.
К данным тегам можно применить параметр align , который отвечает за горизонтальное выравнивание заголовков. У этого параметра могут быть следующие значения:
- left - значение выравнивания заголовка по левой стороне (значение по умолчанию);
- right - значение выравнивания заголовка по правой стороне;
- center - значение выравнивания заголовка по центру;
- justify - значение выравнивания заголовка по ширине.
Значения параметров задаются с помощью символа = , а сами значения обязательно берутся в кавычки "" . Для примера создадим страничку с заголовками различных уровней, также зададим заголовкам разные параметры горизонтального выравнивания.
Открыв данную страницу в браузере, Вы должны получить следующий результат:
Обратите внимание, все заголовки выделены жирным шрифтом без дополнительных html тегов для текста. С помощью CSS заголовкам можно задать любой размер и стиль, независимо от его уровня.
Абзацы и перенос на новую строку
Форматирование текста в HTML невозможно без использования абзацев и переноса текста на новую строку. Кроме того абзацы проще стилизовать, добавив стили в соответствующий тег.
Этим парным тегом необходимо окружать все абзацы на странице. По стандарту, тег оставляет одну пустую строку сверху и одну снизу от абзаца. Как и в случае с заголовками, тег отвечающий за абзацы имеет параметр align , со всеми своими значениями. Для примера создадим три абзаца с разными параметрами:
- это одиночный тег, который способен перенести любое содержимое страницы на новую строку. Чаще всего его используют для текста, если сравнивать тег с программой Word, то именно он имитирует нажатие Enter. (Кол-во тегов
= кол-во нажатий на «enter» ). Давайте рассмотрим данный тег на деле:
Как видите, после указания тега
, последующее содержимое(будь то текст, картинка, видео и т.д) автоматически переносится на новую строку. Если задать последовательно 2 тега, то перенос будет двойным.
Вид текста
Теперь перейдём к тегам, которые непосредственно влияют на внешний вид текста. Работа с текстом в HTML подразумевает: изменение шрифта, цвета, размера, подчеркивание, зачеркивание и других способов изменить внешний вид текста.
- или - в данные теги необходимо заключать текст, который должен быть выделен жирным шрифтом. Как правило, жирный текст используют для выделения ключевых фраз и важных фрагментов текста;
- или - эти теги придают тексту курсивный вид, работают по принципу предыдущих тегов. Курсивом выделяют менее важные фрагменты текста, также его используют для повышения стилистики текста.
- или - данные теги используют для подчеркивания определенных слов или словосочетаний в тексте. Мы не рекомендуем использовать подчеркивание в обычном тексте, т.к. по общепринятым понятиям, подчеркиваются только ссылки. Хотя этого делать никто и не запрещал.
Используем вышеперечисленные HTML теги для текста на примере:
- - сам по себе данный парный тег ничего не делает, однако, если ему задать параметры с значениями, то он может оказаться весьма полезным. Рассмотрим параметры этого тега подробнее:
- face - назначает шрифт текста. Наиболее популярные: times new roman, arial, calibri . Задать можно несколько шрифтов через запятую, на случай если первый не поддерживается браузером, будет использован следующий по списку;
- size - этот параметр задаёт размер текста. Существуют размеры от 1 до 7 , значение по умолчание - 3 ;
- color - благодаря данному параметру задаётся цвет текста. Значение по умолчание - black , то есть черный цвет. Цвет можно задать тремя способами: Таблица цветовых кодов .
Закрепим знания HTML тегов для текста и проработаем навыки на следующем примере:
Устаревшие HTML теги для текста
Есть несколько устаревших тегов, которые редко используются веб-программистами, но всё же они могут вам понадобиться. Лет 5 назад был слух, что браузеры перестанут их поддерживать, но они отлично работают по-прежднему.
- контейнер (парный тег), который выводит своё содержимое на центр страницы. Порой очень выручает. - тег используется для зачеркивания текста. Очень специфичный и не популярный тег, однако и сегодня ему можно найти применение.- тег отвечающий за "кавычки". Некоторые считают, что лучше использовать данный тег, чем клавиатурные кавычки. Используется для выделения названий и цитат.
- длинные цитаты, важные блоки и весомые предложения советуют окружать этим парным тегом. Содержимое тега имеет небольшие отступы с правой и левой сторонами.
- - хотите придать вашему тексту шрифт старинной печатной машинки, тогда этот тег вам поможет. Приблизительный вид: шрифт печатной машинки
Теперь вы умеете создавать HTML страницы со стильным текстовым контентом. Но помните, все хорошее в меру. Сухой скучный текст - это несомненно плохо, но если ваш текст будет переливаться всеми цветами радуги, вы рискуете показаться не серьёзной организацией. А вообще всё зависит от тематики сайта и от его целевой аудитории.
Дата первой публикации: 06.07.2016
Дата последнего обновления: 06.07.2016
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем я буду активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.
Первоначально слои ввела компания Netscape, включив в свой браузер поддержку
тега
Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.
В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку это снизило время на отладку сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.
- Если наблюдаются небольшие различия в отображении одного сайта в разных браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют. Посетители в любом случае не будут попиксельно сравнивать сайт в разных браузерах. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться корректно и без ошибок.
- Если у сайта имеются существенные различия при его показе в одном и другом браузере, то для их устранения применяют хаки.
Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.
Несмотря на то, что хаки работают, использовать их следует ограниченно или вообще обходиться без них. Дело в том, что хаки снижают универсальность кода и для модификации параметров одного элемента приходится вносить изменения одновременно в разных местах.
Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют именно в направлении полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.
Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам
В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега
Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании тегов
Разделение содержимого и оформления
Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и её содержимым. Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других. Дизайнер, верстальщик и программист работают над своими задачами автономно, снижая время на разработку сайта.
Активное применение тега
При блочной вёрстке существенное значение уделяется универсальному тегу
, который выполняет множество функций.
Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку,
то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно
ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег
является кирпичиком вёрстки, её базовым
фундаментом.
Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому
же поисковые системы его лучше индексируют.
Таблицы применяются только для представления табличных данных
При блочной вёрстке, конечно же, используются таблицы, но только в тех случаях,
когда они нужны, например, для наглядного отображения чисел и других табличных
данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным
и, более того, вредным.
Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются
стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль
уделяется тегу
, с которым у большинства
людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся
в дальнейшем употреблять термин «слой» к тегу
для которого указан стилевой идентификатор
или класс. Таким образом, выражение «слой с именем content» подразумевает, что
используется тег
или
.
В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру,
и
Top
При блочной вёрстке существенное значение уделяется универсальному тегу
Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.
Таблицы применяются только для представления табличных данных
При блочной вёрстке, конечно же, используются таблицы, но только в тех случаях, когда они нужны, например, для наглядного отображения чисел и других табличных данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным и, более того, вредным.
Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу
В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру,