wuhxx.info

Как сделать разметку на странице

Как сделать разметку на странице 94

Лаборатория EXLAB Главная Услуги Журнал Контакты

11. Разметка веб-страницы

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

HTML 4 и более ранние версии языка применялись в первую очередь для визуального оформления документа. Для создания каркаса страницы было достаточно всего двух тегов: блочного <div> и строчного <span>, которые сами по себе не влияют на отображение текста (кроме стандартных «блочных» свойств <div>), но позволяют использовать глобальные атрибуты class и id. А уже с их помощью задать стили отображения в CSS — не проблема. Тем более, что многие теги стандарта HTML 4 поддерживали целый набор атрибутов для визуального оформления.

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

Но сначала следует упомянуть, что теги <div> и <span> по-прежнему поддерживаются и могут быть применены в целях стилевого оформления или для удобства скриптования, когда лексическая разметка не имеет значения. Кроме того, поддерживается и знакомый многим тег <style>, позволяющий определять стили CSS непосредственно в документе. Как и прежде, элемент <style> располагается внутри <head> и содержит в себе прямые инструкции на языке CSS. Он поддерживает атрибуты type и media, описанные ранее в главе «Ссылки», с той лишь разницей, что здесь type может принимать только значение text/css. В HTML 5 добавлен еще и атрибут scoped="scoped". Элемент <style> с таким атрибутом может располагаться в любом месте документа, а находящиеся в нем инструкции CSS будут распространяться только на элемент-родитель, в котором находится этот <style>, и вложенные в него дочерние элементы.

<style type="text/css" media="screen" scoped="scoped"> .status{color:red} #download{font-weight:bold;} </style> <div id="download">Cкачивание файла: <span class="status">завершено</span></div>

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

Верхний и нижний колонтитулы обозначаются тегами <header> и <footer> соответственно. Верхний (шапка) может содержать заголовок, вводную информацию о документе, навигационные ссылки (см. элемент <nav> ниже), форму поиска, логотип и т п. Аналогичным образом нижний колонтитул включает информацию, размещаемую в конце документа. Например, данные об авторе, дату составления и прочее. Если вы хотите добавить контактную информацию, то не забудьте поместить ее в элемент <address>.

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

Часто, если информация была заимствована из внешних источников или предполагается ее распространение вовне, то имеет смысл помещать ее в элемент <article>. Это может быть запись на форуме, статья газеты или блога, комментарий пользователя, виджет или любая другая независимая единица содержимого, которая каким-либо образом может быть использована отдельно от всего документа. Как и <section>, этот элемент поддерживает атрибут cite для указания источника. Кроме того, можно обозначить дату публикации содержимого в атрибуте pubdate. Некоторые элементы <article> могут располагаться внутри других <article>, что обычно означает непосредственную связь между ними. Например, так можно обозначать комментарии пользователей (дочерние элементы) к статье (<article>-родитель).

Кстати, <header> и <footer> могут быть использованы не только в качестве колонтитулов документа, но и выполнять аналогичную роль для отдельных его разделов, если это необходимо.

Части документа, содержащие навигационные ссылки помещаются в элемент <nav>. Это могут быть блоки со ссылками «назад»–«вперед», выбором страницы и тому подобное.

<article pubdate="2010-03-04"> <header> <h1>Разметка веб-страницы</h1> <p>Вместе с появлением HTML 5 изменилась идеология…</p> </header> <section cite="http://www.exlab.net/html/markup.html"> <p>…</p> <p>…</p> </section> <nav> <a href="previous.html">Назад</a> <a href="index.html">Содержание</a> <a href="next.html">Вперед</a> </nav> <footer>2010 © www.exlab.net</footer> </article>

Обратите внимание на заголовок документа, который вы сейчас читаете. Он состоит из названия курса (более крупным шрифтом) и главы (более мелким). Для подобного группирования тегов <h1>…<h6>, являющихся частями одного заголовка, предназначен тег <hgroup>.

<hgroup> <h1>Краткий курс HTML 5</h1> <h2>Разметка веб-страницы</h2> </hgroup>

Еще одним группирующим элементом является <figure>. Обычно в него помещается самодостаточная информация, отсутствие или перенос которой в другое место не исказит смысл документа. Чаще всего это иллюстрации, диаграммы, фотографии с кратким комментарием или без него. Такой информационный блок можно озаглавить с помощью тега <figcaption>, который должен располагаться внутри <figure> в качестве первого или последнего дочернего элемента.

<figure> <img src="collider.gif" alt="Синхрофазотрон" /> <figcaption> <h4>Синхрофазотрон</h4> <p>На схеме 1 изображен принцип действия…</p> </figcaption> </figure>

Элемент <aside> представляет собой часть документа с информацией, также связанной с близлежащим содержимым, однако способной восприниматься отдельно от него. В печатной типографии такая информация обычно помещается в отдельной колонке или выделяется рамкой. На сайте тегом <aside> можно обозначить, например, боковые колонки веб-страницы (т. н. sidebar).

<p>Вчера мы были в Лувре.</p> <aside> <h4>Лувр</h4> <p>Лувр — один из крупнейших художественных музеев мира.</p> </aside>

Еще одним элементом, предназначенным для пояснительной информации является <details>. В отличие от предыдущих, он интерактивен и способен скрывать и отображать содержимое (т. н. spoiler). По умолчанию он «закрыт», но указав элементу атрибут open="open", можно заставить его «раскрыться». Заголовок блока задается в элементе <summary>, который размещается сразу за открывающим тегом <details>. При отсутствии <summary>, заголовок устанавливается по усмотрению браузера.

<details open="open"> <summary>HTML 5</summary> В этом курсе есть все, что нужно знать об HTML. </details>

Большинство приведенных выше тегов на момент создания курса не поддерживаются браузерами в полной мере. Прежде чем использовать их, рекомендуем ознакомиться с главой «Обратная совместимость».

Таблицы

Содержание

Формы

8 комментариев

Нужно переходить на новые технологии. Спешу сделать свой сайт лучшим из лучших.

Очень правильное стремление.

Сайт очень приятен внешне, юзабелен. Я, кажется, влюбился.

Спасибо :)

Необходимая, для меня, "крупица" информации для целостного представления HTML5.

Молодцы! Прогресс нужно двигать самим. Я вот специально создаю сайты на HTML5 и CSS3 побуждая пользователей использовать новейшие браузеры.

Не следует злоупотреблять элементом <header>. Если у вас один единственный заголовок, то <header> не нужен.

Если в элементе <figure> находится описание картинки, то сама картинка должна находится внутри элемента. А все описание должно находится внутри <figcaption>.

<figure> <img> <figcaption> <h4>Синхрофазотрон</h4> <p>На схеме 1 изображен...</p> </figcaption> </figure>

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

Оставить комментарий

Ваше имя:
:вотоб ялД
Электропочта:
Веб-сайт:
Веб-сайт:
Комментарий:
  1. Введение
  2. Теги и элементы
  3. HTML-документ
  4. Основные элементы и их типы
  5. Глобальные атрибуты
  6. Форматирование
  7. Ссылки
  8. Изображения
  9. Списки
  10. Таблицы
  11. Разметка веб-страницы
  12. Формы
  13. Элементы ввода данных
  14. Создание меню
  15. Мультимедиа и скрипты
  16. Фреймы
  17. Новые атрибуты в HTML 5
  18. Обратная совместимость

Заметки лаборатории

Знаете ли вы...

Пишите:
Звоните: +38 (063) 043-4774

© Лаборатория EXLAB, 2009–2018

Политика конфиденциальности


Как сделать разметку на странице 236
Как сделать разметку на странице 134
Как сделать разметку на странице 71
Как сделать разметку на странице 138
Как сделать разметку на странице 311
Как сделать разметку на странице 115
Как сделать разметку на странице 366
Как сделать разметку на странице 325
Как сделать разметку на странице 945
Как сделать разметку на странице 938
Как сделать разметку на странице 851
Как сделать разметку на странице 854
Как сделать разметку на странице 261
Как сделать разметку на странице 168
Как сделать разметку на странице 608
Печи из буржуйки для дачи своими рукамиКак сделать создать аккаунтКак сделать страховку для автомобиляКак сделать большие спичкиКак сделать энергетические шарыСоус с курицей как сделатьГрецкий орех выращивание в средних полосахИз чего и как сделать деревья в макетеВязание крючком ковриков на стулаСхема елок для вышивкиКак самой себе сделать красивый макияж с фотоКак сделать самому завивкуПоздравления от зятя тестю на юбилей 60 лет отДизайн на подушки своими рукамиКак сделать несколько документов на одной странице

Читать далее:

  • Сшить куклу в народном
  • Как сделать короб для подсветки натяжного потолка
  • Как сделать закладку дома
  • Вязание с большим воротником
  • Лавочка фундучка вышивка сайт