Для начала давайте определимся, что такое разметка? Как следует из самого термина, разметка - это расстановка меток, в нашем случае в коде хтмл документа, т.е. веб-страницы. В качестве меток здесь выступают теги , что позволяют определить границы действия разметки или создать элемент хтмл документа. Всё ещё непонятно? Тогда читайте дальше, и всё станет на свои места.

Основы разметки хтмал или что такое тег

Тег представляет собой конструкцию, начинающуюся знаком меньше (<) и заканчивающуюся знаком больше (>) . Большинство тегов состоят из открывающегося и закрывающегося тегов. Отличие между ними состоит в том, что в открывающемся теге вы можете (если нужно) указать ряд дополнительных его свойств, используя так называемые атрибуты , а в начале названия закрывающегося тега указывается символ сэлш (/) , например:

Текст параграфа, выровненный по правому краю.

В данном случае блочный тег p создаёт параграф, а атрибут align выравнивание содержимого параграфа по правому (right) краю.

Следует отметить, что в хтмл, теги бывают двух видов: блочными и строковыми. Блочные теги создают блочный элемент, зачастую имеющий отступы и ниже следующие элементы идут уже «с новой строки ». Строчные теги предназначены для разметки фрагмента кода и не создают переноса строки.

Как говорится: в любом правиле есть исключения - это же верно и для тегов. Существуют теги, которые не имеют закрывающего тега и предназначены они для создания меток и элементов хтмл документа, например:

В данном случае строковый тег img вставляет на веб-страницу элемент в виде картинки, адрес которой прописывается в атрибуте src . Значением атрибута alt является альтернативный текст, который выводится в том случае, если картинка не доступна, а атрибут border задает толщину рамки вокруг картинки.

Чтобы Вам было легче запомнить всё выше изложенное, приведу небольшую и наглядную шпаргалку, которую Вы можете использовать для изучения HTML:

Краткий справочник по хтмл тегам

И так, мы уже познакомились с двумя тегами, так что их я опущу. Ниже я приведу ещё ряд тегом разметки хтмл документа и некоторые их атрибуты. Для начала этого будет более чем достаточно, но если вас интересует полный перечень хтмл тегов и их атрибутов, рекомендую заглянуть на сайт htmlbook.ru, а также добавить его в закладки как наиболее полный и удобный справочник по ХТМЛ и ЦСС. Продолжим?

Как сделать ссылку? Для этого вам нужно использовать строковый тег A , который размечает содержащийся в нём текст как ссылку - активный элемент веб-страницы при клике на который пользователь может перейти на другую веб-страницу, адрес которой указан в атрибуте href .

Как выделить текст жирным? Для этого вам нужно использовать строковый тег B , который устанавливает для содержащегося в нём текста жирное начертание шрифта.

Как сделать текст курсивом? Для этого вам нужно использовать строковый тег I , который устанавливает для содержащегося в нём текста курсивное начертание шрифта.

Как подчеркнуть текст? Для этого вам нужно использовать строковой тег U , который добавляет подчеркивание для содержащегося в нём текста.

Как зачеркнуть текст? Для этого вам нужно использовать строковой тег S , который отображает текст как перечеркнутый.

Как выделить код в тексте? Для этого вам нужно использовать строковой тег CODE , который обычно отображается браузером моноширинным шрифтом, например Courier New .

Как оформить код в тексте? Для этого вам нужно использовать блочный тег PRE , который определяет блок программного кода, обычно отображается браузером моноширинным шрифтом. В отличие от строкового тега CODE , тег PRE сохраняет пробелы и переносы строк.

Как сделать текст больше? Для этого вам нужно использовать строковой тег BIG , который увеличивает размер шрифта на единицу по сравнению с обычным текстом.

Как сделать текст меньше? Для этого вам нужно использовать строковой тег SMALL , который уменьшает размер шрифта на единицу по сравнению с обычным текстом.

Как задать шрифт, цвет и размер шрифта в тексте? Для этого вам нужно использовать строковой тег FONT . Атрибут face здесь задаёт гарнитуру (название) шрифта, color - цвет шрифта, а size - его размер в условных единицах (от -7 до 7) .

Как сделать заголовок? Для этого вам нужно использовать блочные H теги, которые задают заголовки разного уровня, от 1 (самого большого) до 6 (самого маленького) , что позволяет задать структуру опубликованной на веб-странице информации. Заголовки отличаются друг от друга размером шрифта и отступы, а также выделены жирным начертанием.

Как сделать подстрочный шрифт? Для этого вам нужно использовать строковой тег SUB , который отображает шрифт в виде нижнего индекса, т.е. текст будет располагаться ниже базовой линии остальных символов строки и уменьшенного размера.

Как сделать надстрочный шрифт? Для этого вам нужно использовать строковой тег SUP , который отображает шрифт в виде верхнего индекса, т.е. текст будет располагаться выше базовой линии остальных символов строки и уменьшенного размера.

Как вставить цитату в текст? Для этого вам нужно использовать строчный тег Q , который используется для выделения в тексте цитат, которые автоматически отображаются браузером в кавычках.

Как оформить цитату в тексте? Для этого вам нужно использовать блочный тег BLOCKQUOTE , который предназначен для выделения длинных цитат в хтмл документе. Обычно такой текст отображается с отступами в 40 пикселей слева и справа, а также отбивкой сверху и снизу.

Как сделать перенос строки в тексте? Для этого вам нужно использовать блочный тег BR , который устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца p , использование тега br не добавляет пустой отступ перед строкой.

Как сделать слой в хтмл? Для этого вам нужно использовать блочный тег DIV , который создаёт слой без отступов.

Как сделать разделитель в тексте? Для этого вам нужно использовать блочный тег HR , который рисует разделительную горизонтальную линию. Атрибут color задаёт цвет линии, size - размер, а noshade - отключает трехмерный эффект.

Как сделать список? В хтмл существует два основных вида списков: нумерованный (OL ) и маркированный (UL ) . В данном случае приведен хтмл код маркированного списка, заданного блочным тегом UL . По умолчанию, в качестве маркера окружность (закрашенный кружочек) , которая отображается в начале первой строки элемента списка, заданного тегом LI .

Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!

Создание разметки можно смело относить к искусству: здесь нет точных правил и единого ответа на какой-либо вопрос, зато практически всегда есть несколько вариантов решения определенной проблемы.

Безусловно, существуют общепризнанные методы разметки, а также т. н. best practices - оптимальные способы достижения цели, которые были определены практическим путем. Но в целом, чтобы добиться успехов в изучении этого ремесла, важна практика, практика и еще раз практика.

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

Mobile First

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

К примеру, раньше разработка сайта начиналась с настольной версии, которая затем адаптировалась под мобильные устройства. Стратегия Mobile First призывает поступать наоборот: не масштабировать десктопный вариант сайта, пытаясь уместить его в маленький экран, а проектировать дизайн с учетом ограниченного пространства, постепенно расширяя базовую версию (с набором только самых важных элементов) до полноценной.

Mobile First подразумевает совершенно другое мышление в плане размещения элементов на страницах и создания структуры. Главными пунктами здесь являются компактность и информативность, отсутствие отвлекающих факторов и второстепенных элементов.

Каркас

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

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

Верстка

На основе макетов можно приступать к написанию HTML и CSS-кода. Имея представление о том, какие элементы будут на веб-странице, можно подобрать для них соответствующие теги.

С помощью CSS добавляется стилевое оформление для элементов. Есть есть необходимость в дополнительных «зацепках» для стилей CSS, к тегам добавляются классы. Давайте описательные и лаконичные имена классам - это хороший тон.

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

Позиционирование и слои

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

Кстати, визуально перемещать элементы можно и с помощью уже хорошо знакомых вам свойств margin и padding . При добавлении к элементу полей и/или отступов с определенной стороны образуется пустое пространство, которое, по сути, смещает элемент. Например, добавив с верхней стороны блочного элемента свойство margin с положительным значением, мы сместим элемент вниз, а отрицательное значение приведет к смещению элемента вверх.

Подходы к созданию макета

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

С появлением свойства float стало возможным создавать макеты без таблиц. И хотя этот подход еще популярен, он уже не является самым современным способом создания разметки.

Спецификация CSS Flexible Box Layout Module подняла верстку на новый уровень и очень упрощает разработку макетов. Среди преимуществ Flexbox выделяется возможность сделать любой блок «резиновым», гибкое поведение элементов, инструмент для горизонтального и вертикального выравнивания, автоматическое преобразование элементов в столбцы и строки и многое другое. И если еще в 2014 году Flexbox еще не был столь популярным, то в 2017, учитывая вышедший Bootstrap 4, который основан именно на flex-модели, можно смело считать, что ближайшее будущее будет за Flexbox.

Посвященной CSS я рассказывал о базовых принципах CSS и типовых случаях его использования. Были рассмотрены основы CSS, возможные виды селекторов, структура HTML с точки зрения CSS. Я перечислил наиболее распространенные свойства CSS и показал как они могут задаваться для элементов страницы. Я уделил достаточно внимания свойствам CSS отвечающие за отступы и границы, отрисовку текста, картинок, ссылок и списков. Наконец остановился на свойствах специфичных для стилизации таблиц.

Все это хорошо, но по прежнему открытым остается вопрос использования стилей CSS для формирования структуры и разметки страницы. Раньше, когда о CSS мало кто знал и он только формировался как действенная технология, для этих целей практически повсеместно использовались таблицы. Они как правило занимали все место на странице и с помощью ячеек таблицы задавались регионы для размещения отдельных секций. Наличие таких свойств как colspan и rowspan , которые соответственно позволяют склеивать несколько колонок на строке и несколько строк в колонке, придавало еще большую гибкость разметке заданную таким образом. Очень часто в качестве содержимого ячейки использовались вложенные таблицы, которые в свою очередь могли иметь свои вложенные таблицы. Такая структура страницы в случае ее больших объемов становилась тяжелой, трудноподдерживаемой и совсем не гибкой. Скажем для того что бы перенести секцию с одной стороны страницы на другую в отдельных слуаях приходилось часами сидеть и вручную переписывать разметку заново.

Теперь же с использованием CSS все стало намного проще. Достаточно отделить содержимое требуемой секции в отдельный слой с помощью тега div и просто задать для него правила позиционирования на странице с помощью свойств CSS. В случае если позже появится необходимость перенести данную секцию в противоположную сторону страницы – достаточно просто изменить свойства CSS не трогая при этом кода самой страницы. Все очень просто и удобно. Однако для того что бы это простота была очевидной нужно немного поглубже познакомиться с данными возможностями.

В данной статье я расскажу о том какие способы разметки страницы бывают, как ими пользоваться и как их создавать. Но начнем со всего попорядку.

1. Варианты разметки страницы.
   

Как правило все страницы можно разделить на три категории:

Страницы с фиксированной шириной . Такие страницы имеют ограницение на ширину для своих элементов и вне зависимости от того какой размер окна браузера – ширина используемого региона фиксирована и не изменяется в процесе работы со страницей. Подобные страницы используются в тех местах где устанвлены жесткие требования к отображению элементов страницы и неконтроллируемое расползание каких то элементов попросту недопустимо. В подобных случаях как правило устанавливают фиксированную ширину тега body и центрируют страницу по ширине окна браузера. Самая распространенное значение ширины для страниц с фиксированной шириной: 960px – такой размер позволяет хорошо выглядеть странице при разрешении экрана начиная с 1024х768.

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

«Эластичные страницы» . Данные страницы совмещают в себе оба подхода. Элементы таких страниц имеют фиксированную ширину, но способны растягиваться или сжиматься в зависимости от ширины окна браузера в предустановленных диапазонах. Для таких целей можно использовать свойства min-height , min-width , max-height и max-width , о которых я упоминал в первой части.

Для того что бы добиться наилучших результатов, часто имеет смысл объеденить все три подхода к разметке страницы: скажем все вспомогательные и навигационные секции – в которых недопустимо неконтролируемое растекание элеметнов - сделать фиксированными по ширине, а центральную панель сделать «эластичной» или вовсе позволить ей занимать все пространство, остающееся после фиксированных секций в окне браузера.

1. Способы разметки страницы
   

CSS позволяет эффективно реализовать разметку, используя различные приемы и техники. К наиболее распространенным приемам относятся плавающие слои (в англоязычных источниках, данный прием может называться float layout) и абсолютное позиционирование (absolute positioning). Причем, субъективно, разметка абсолютного большинства сайтов использует именнно плавающие слои. Далее я постараюсь рассмотреть каждый из этих приемов более детально.

1. Плавающие слои
   

Плавающие слои реализуются посредством манипуляций со свойством 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-страницы.

1. Абсолютное позиционирование
   

Абсолютное позиционирование , как я уже говорил, используется не так часто, как плавающие слои, однако тоже заслуживает внимания. Иногда бывает так, что прием плавающих слоев оказывается неприемлимым по каким то причинам, и поэтому все что нам остается в такой ситуации – это абсолютное позиционирование. Однако чаще всего абсолютное позиционирование используется для месного позиционирования – указания размещения одного элемента относительно положения другого. Так или иначе знать о данном приеме нужно обязательно.

В основе данного приема лежит использование свойства 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;

осуществляет позиционирование относительно границ родительского элемента. Как и для предыдущего приема, я предоставлю пример, что бы было понятно, что и как следует использовать.

1. И что дальше?
   

Вот собственно наверное и все по разметке. Дальнейшие нюансы использования CSS для данной задачи уже будут специфичны для вашего проекта, браузера и требований. Разумеется о многом я не рассказал и сейчас. Не предостерег вас по поводу специфики разметки страницы для IE 6.0 (о, да, по этому впрору отделную книгу писать). Там много чего, даже из того, о чем я говорил, не будет работать или будет работать не так как хотелось бы вам. А для того что бы заработало, нужно пользоваться магическими заклинаниями вроде * html или zoom: 1; Ничего не рассказал о том, как боротся с возникающими проблемами при разметке, когда панели ползут непонятно куда и зачем (а это поверте, случится, и причем не раз, и не только с вамиJ ). Не рассказал про свойство z-index , это очень важно, особенно в случае с абсолютным позиционированим, когда содержимое одного элемента перекрывает содержимое другого. Не рассказал про такое чудесное свойство overflow , которое помогает бороться с содержимым панелей, которому не сидится внутри и так и хочется выпрыгнуть за пределы своего слоя. И еще много-много-много чего, о чем я промолчал. Не потому что я глупый, просто немного ленивыйJ

Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем я буду активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега . Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег не был включён в спецификацию HTML и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.

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

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

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют именно в направлении полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам