Для тех, кто не очень хорошо знаком с веб-дизайном, возможно, будут полезны некоторые подсказки по верстке на HTML. Если раньше вы уже создавали веб-страницы, то сможете избавиться от стиля верстка HTML-кода, который лучше быстрее забыть. Сейчас речь пойдет о верстке HTML-кода для его совместного использования с кодом CSS.
Верстка требует структуры
Верстка HTML придает особый вид тексту путем деления его на логические блоки и их определения на веб-странице: например, главное значение элемента h1 — создать заголовок, предшествующий основному содержимому страницы. Заголовки второго, третьего уровней и т. д. — подзаголовки — позволяют делить содержимое страниц на менее важные, но связанные разделы. У веб-страницы, как и у книги, которую вы держите в руках, должна быть логическая структура. У каждой главы этой книги есть заголовок (отформатированный, например, элементом h1), а также несколько разделов и, соответственно, подзаголовков (например, с элементом h2), которые, в свою очередь, содержат подразделы с заголовками более низкого уровня. Представьте, насколько сложнее было бы читать эту книгу, если бы весь текст состоял из одного длинного абзаца, без деления на разделы, подразделы, пункты, без выделения примечаний, гиперссылок и т. д.
Руководство по верстке на HTML можно найти на сайте Tinyurl.com. Краткий список всех HTML-элементов есть в справочнике Mozilla Developer.
Помимо заголовков, при верстке на языке HTML есть множество других элементов для разметки содержимого веб-страницы, а также для определения назначения ее каждого логического фрагмента. Наиболее часто применяют следующие элементы: p — для создания абзацев текста, ul — для создания маркированных (ненумерованных) списков. Далее по степени применения идут элементы, отображающие специфичное содержимое, например abbr — сокращения, аббревиатуры, code — программный код.
Вся информация взята с сайта https://indeling.ru
При верстке HTML-кода для CSS используйте элементы, размещая их рядом друг с другом, насколько это возможно. Ориентируйтесь на роль, которую играет фрагмент текста на веб-странице, а не на внешний вид, который текст приобретает благодаря этому элементу. Например, перечень ссылок на панели навигации — это и не заголовок, и не абзац текста. Больше всего это похоже на маркированный список. Таким образом, выбираем элемент ul. Вы можете сказать, что элементы маркированного списка расположены вертикально один за другим, а нам требуется горизонтальная панель навигации, в которой все ссылки располагаются горизонтально. Об этом можно не беспокоиться. Средствами CSS очень просто преобразовать вертикальный список ссылок в элегантную горизонтальную панель навигации.
Разнообразие HTML-элементов
Пестрого ассортимента HTML-элементов не всегда достаточно для оформления широкого диапазона контента, который вы хотели бы опубликовать на своей веб-странице. Конечно, элемент code прекрасно подходит для разметки программно-го кода, но большинство людей считают элемент recipe удобнее. К счастью, верстка HTML обеспечивает несколько «структурных» элементов, которые позволяют лучше идентифицировать и группировать контент и в процессе работы обеспечивают «маркеры», помогающие назначить те или иные стили CSS определенным эле-ментам на странице. К их числу относятся элементы div и span, существующие практически с момента появления языка HTML. Язык HTML5 предоставил широкий спектр элементов, которые позволяют группировать контент. Например, элемент footer можно использовать для отображения колонтитулов — такой информации, как сведения об авторских правах, контактных данных, или списка источников.
До появления CSS для достижения определенных визуальных эффектов дизайнеры пользовались элементом font и другими средствами HTML.
Увы, нам не удалось прописать код в Дзене. Чтобы посмотреть код перейдите по ссылке на статью с сайта Indeling: https://indeling.ru/html-css/verstka-html-koda-vmeste-s-css/
Используя CSS, можно добиться тех же результатов (и даже лучше) с гораздо меньшим объемом HTML-кода
Кроме того, применяя CSS для дизайна веб-страницы, вы используете HTML по его прямому назначению, то есть именно для разметки кода веб-страницы на логические фрагменты, не заботясь о форматировании и внешнем виде страницы.
Вся информация взята с сайта https://indeling.ru
Использование элементов div и span
Элементы div и span применяются на протяжении всего существования Всемирной паутины. Обычно они используются для организации и группирования контента, с чем не всегда справляются другие HTML-элементы. Они похожи на пустые со-суды, которые вы сами и заполняете. Элемент div (предназначен для деления на фрагменты) определяет любой отдельный блок содержимого, как, например, абзац или заголовок, поэтому называется блочным. Поскольку у элементов div и span нет никаких свойств для визуализации, вы можете применять к ним CSS-стили, чтобы фрагменты внутри этих тегов выглядели так, как вам хочется. Однако вы также можете логически объединить любой набор таких элементов, как заголовок, не-сколько абзацев, маркированный список и т. д., в единственном блоке div.
Элемент div — замечательное средство разбивки веб-страницы на такие логические фрагменты, как баннер, колонтитул, боковая панель и т.д. Впоследствии, используя CSS, вы сможете позиционировать любой из этих фрагментов в выбранное место веб-страницы, создавая сложную схему разметки.
Элемент span применим к строчным элементам страницы, то есть к словам, фра-зам, которые находятся в пределах абзаца текста или заголовка. Его можно использовать точно так же, как и другие строчные HTML-теги, к примеру, как a (элемент привязки, позволяющий добавить ссылку к фрагменту текста) или strong (позволяющий отформатировать фрагмент текста в абзаце полужирным начертанием). Можно применить элемент span, например, к названию компании и затем использовать CSS, чтобы выделить это название другим шрифтом, цветом и т.д
Рассмотрим пример использования этих элементов в работе. К ним добавлены атрибуты id и class, предназначенные в том числе для применения стилей к фрагментам страницы.
Разговор об этих элементах не ограничится кратким введением. Они часто встречаются на тех веб-страницах, где широко применяется CSS.
Элементы в HTML5
Элемент div имеет общий характер — это блочный элемент, используемый для разбиения страницы на разделы. Одна из целей HTML5 — предоставление в распоряжение разработчиков широкого выбора из других, семантически более осмысленных элементов. Придание HTML-коду большей семантики просто означает использование элементов, в точности описывающих свое содержимое. Как уже упоминалось в текущем разделе, вы можете воспользоваться элементом h1 (заголовок первого уровня), помещая в него текст, описывающий основное содержимое страницы. По аналогии с этим элемент code четко дает понять, информация какого сорта в него помещена (программный код).
HTML5 включает в себя множество различных элементов, имена которых отражают тип их содержимого. Они могут использоваться вместо элемента div. Элемент article (статья), к примеру, применяется для обозначения раздела страницы, содержащего завершенную, независимую публикацию, статью: запись блога, описание товара в интернет-магазине или просто основной текст страницы. Точно так же элемент header (верхний колонтитул) является признаком верхнего колонтитула, или баннера в верхней части страницы, который обычно содержит логотип, навигацию, относящуюся ко всему сайту, название страницы с рекламным слоганом и т.д.
Дополнительные сведения об HTML-элементах можно найти на сайтах tinyurl.com/d4gsdrr и tinyurl.com/pc3ddbc, а также в книге Дженнифер Роббинс «HTML5. Карманный справочник», Вильямс, 2015.
Многие HTML5-элементы предназначены для расширения возможностей обычного элемента div. Для структурирования содержимого страницы часто используются и другие HTML5-элементы.
- section (раздел) — группирует взаимосвязанное содержимое, например главу книги. К примеру, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые свежие новости.
- aside (отступление) — предназначен для обозначения содержимого, связанного с неким контентом. Например, пометки на полях в печатном журнале.
- footer (нижний колонтитул) — содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другая правовая информация, ссылки для навигации по сайту и т. д. Но на количество элементов footer на одной странице ограничений не накладывается, вы можете, скажем, поместить нижний колонтитул внутри элемента article, чтобы хранить в нем информацию, относящуюся к публикации, например сноски, ссылки или выписки.
- nav (навигация) — используется для обозначения содержимого в виде основных навигационных ссылок.
- figure (рисунок) — применяется для иллюстраций. Вы можете поместить в не-го элемент img, а также figcaption, предназначенный для отображения подрисуночной подписи — пояснения к фотографии или иллюстрации, находящейся внутри элемента figure.
Разобраться в том, какой из HTML5-элементов лучше использовать, то есть должен ли ваш текст быть статьей — article или разделом — section, бывает порой непросто. Удобная блок-схема, которая поможет разобраться в предназначении новых элементов разбиения информации, имеющихся в HTML5, представлена по адресу tinyurl.com/o298cs6.
Существуют и другие HTML5-элементы, и многие из них просто предоставляют более описательную альтернативу элементу div. В этой книге используются как элементы div, так и новые HTML5-элементы, придающие веб-странице более выраженную организацию содержимого. Недостаток HTML5 заключается в том, что браузер Internet Explorer 8 и его более ранние версии не распознают новые элементы без посторонней помощи.
Вся информация взята с сайта https://indeling.ru
Следует также заметить, что, кроме чувства сопричастности к самым послед-ним течениям в веб-дизайне, от использования некоторых из этих HTML5-эле-ментов на самом деле нет никакой ощутимой пользы. Например, использование элемента article просто для того, чтобы содержать в нем сводку новостей веб-страницы, не улучшит ее внешний вид. Если хотите, можете и впредь применять элемент div, избегая элементов разбиения страницы на разделы, предлагаемых HTML5.
Кроме того, даже используя HTML5-элементы, вы все же иногда будете вынуждены прибегать к помощи div для простой группировки других HTML-элементов. Вы будете делать это в тех случаях, когда необходимо переместить группу элементов в другое место на странице, чтобы назначить им последовательный фоновый цвет или нарисовать контур и добавить тень.
Представление о макете страницы
Когда для обозначения основной темы страницы используется элемент h1, а для добавления текстового абзаца — элемент p, вы в конечном счете хотите увидеть привлекательную страницу.
Макет страницы можно представить себе в виде искусно расположенных прямоугольных элементов. В конечном счете дизайн страницы, состоящей из двух вертикальных колонок текста, фактически представляет собой лишь два смежных прямоугольника. Верхний колонтитул — логотип, лозунг, поля поиска и элементов навигации по сайту — представляет собой не что иное, как широкий блок (прямоугольник), занимающий всю верхнюю часть окна браузера. Иными словами, если вы представите себе группировку и макет содержимого страницы, то должны увидеть блоки, установленные друг на друга, следующие друг за другом и находящиеся друг под другом.
В HTML-коде эти блоки, или структурные единицы, создаются с помощью эле-мента div или одного из структурных HTML5-элементов, например footer, header, article и aside. Заключите HTML-элементы, к примеру образующие область баннера, в один div-контейнер, HTML-код, формирующий колонки текста, — в другой div-контейнер и т. д. Если вы уже разбираетесь в HTML5, то можете создать дизайн, показанный на рис. с помощью элемента header для верхнего баннера, элемента article — для основного текста, элемента aside или section — для боковой панели и элемента footer — для нижнего колонтитула страницы. Иными словами, если вы собираетесь сгруппировать HTML-элементы в какой-либо позиции страницы, их нужно заключить в такие элементы разбиения на разделы, как div, article, section или aside.
Вся информация взята с сайта https://indeling.ru
