Строение тела документа | Учебник HTML5
Строение тела документа.
Описание тела нашего документа готово. Базовая структура определена, но необходимо еще поработать над содержанием. Пока мы изучили только элементы HTML5, помогающие определять разделы макета и указывать их назначение, однако все самое важное находится внутри этих разделов.
Большинство уже рассмотренных элементов нужны для определения структуры HTML-документа, которую смогут распознать любые браузеры и новые устройства. Мы узнали, что с помощью тега <body> объявляется тело видимой части документа, тег <header> включает в себя важную информацию о теле, тег <nav> определяет средства навигации, тег <section> описывает содержимое самого документа, а в теги <aside> и <footer> заключается вспомогательная информация. Но ни один из указанных элементов не объявляет непосредственно содержимое документа. Все они относятся исключительно к описанию структуры документа.
Чем дальше мы углубляемся в разбор документа, тем ближе подходим к определению его содержимого. Информация в документе может включать в себя разные визуальные элементы, такие как заголовки,
тексты, изображения, видео и интерактивные приложения. Нам необходимо различать эти элементы и устанавливать взаимоотношения между ними.
<article>
Приведенный на рис. 1.1 макет представляет собой простую и обобщенную структуру современных веб-сайтов, а также показывает, каким образом основное содержимое документа располагается на экране. Так же, как блог делится на записи, содержимое веб-сайтов чаще всего делится на фрагменты, обладающие схожими характеристиками. Определить каждый из этих фрагментов помогает элемент <article> (статья).
Листинг 1.15. Использование элемента <article>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»description» content^^™ пример HTML5″>
<meta name=»keywords» content=»HTML5, CSS3, JavaScript’^ <title>Этот текст — заголовок документа</title>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2>
</header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<Н>контакты</Н>
</ul>
</nav>
<section>
<article>
Это текст моей первой статьи </article>
<article>
Этот текст моей второй статьи </article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
Как вы видите в коде листинга 1.15, теги <article> располагаются между тегами <section> — статьи принадлежат разделу, частью которого они являются. Можно сказать, что тег <article> — дочерний элемент тега <section>, так же как все элементы внутри тега <body> являются дочерними элементами тела документа. Как и все дочерние элементы тела документа, теги <article> следуют один за другим, так как они независимы друг от друга, что и показано на рис. 1.4.
повторяем основы-
Как уже говорилось, документ HTML имеет древовидную структуру, корнем которой является элемент <html>. Элемент структуры может быть предком, потомком или братом другого элемента, в зависимости от того, какое место относительно друг друга они занимают в дереве. Например, в обычном HTML-документе элемент <body> является потомком элемента <html> и братом элемента <head>. Для обоих элементов, <body> и <head>, элемент <html> является родителем или предком.
Название элемента <article> никак не ограничивает его применение, то есть не обязательно описывать с помощью него только новостные статьи. Элементы <article> могут описывать любые независимые части содержимого документа: публикации на форуме, статьи в журнале, записи блога, комментарии пользователей и т. п. Данный элемент всего лишь
Группирует связанные друг с другом фрагменты информации, независимо от характера этой информации.
<header> «/header>
<nav> </nav>
Как любая независимая часть документа, содержимое каждого элемента <article> обладает собственной структурой. При определении этой структуры мы можем пользоваться преимуществами, которые дает нам универсальность тегов <header> и <footer>, рассмотренных ранее. Это переносимые теги, и их можно использовать не только в теле документа, но и внутри любого его раздела.
Листинг 1.16. Построение структуры элемента <article>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2>
</header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<li>контакты</li>
</ul>
</nav>
<section>
<article>
<header>
h2>Заголовок статьи 1</h2>
</header>
Это текст моей первой статьи <footer>
<р>комментарии (0)</p>
</footer>
</article>
<article>
<header>
h2>Заголовок статьи 2</h2>
</header>
Это текст моей второй статьи <footer>
<р>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
Обе статьи в листинге 1.16 описаны с помощью элемента <article>, и у каждой статьи задана своя структура. Вначале определен тег <header> с заголовком <h2>. Далее идет основное содержимое, то есть текст статьи. Завершает каждую статью тег <footer> с указанием количества комментариев.
<hgroup>
Внутри каждого элемента <header> — в начале тела документа и в начале каждой статьи — мы использовали тег <h2> для описания заголовка. В принципе, тега <h2> достаточно для создания заголовка части документа. Но иногда нам нужно добавить подзаголовок или другую вспомогательную информацию, чтобы пояснить назначение веб-страницы или какого-то ее раздела. Очень удобно, что элемент <header> может содержать другие элементы, например: оглавление, формы поиска, короткие текстовые фрагменты и логотипы.
Для создания заголовков мы можем использовать теги <h>: <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. Однако для ускорения обработки документа и для того, чтобы во время его интерпретации не создавались множественные разделы и подразделы, эти теги необходимо группировать. Для этого в HTML5 используется элемент <hgroup>.
Листинг 1.17. Использование элемента <hgroup>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»description» content=»Это пример HTML5″>
<link rel=»stylesheet» href=»mystyles. css»> </head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2> </header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<li>контакты</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 1</h2> <h3>подзаголовок статьи 1</h3> </hgroup>
<p>опубликовано 10.12.2011</p> </header>
Это текст моей первой статьи <footer>
<p>комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<1п1>Заголовок статьи 2</h2> <h3>подзаголовок статьи 2</h3> </hgroup>
<p>опубликовано 15.12.2011</p> </header>
Это текст моей второй статьи <footer>
<p>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
Необходимо соблюдать иерархию тегов <h>, то есть сначала должен быть объявлен тег <h2>, затем для подзаголовка тег <h3> и т. д. Но в отличие от предыдущих версий HTML, в HTML5 теги <h> можно использовать в каждом разделе и заново строить такую иерархию. В листинге 1.17 мы добавили подзаголовок и метаданные в каждую статью и сгруппировали заголовок и подзаголовок с помощью <hgroup>. Иерархия тегов <h2> и <h3> используется в каждом элементе <article>.
Элемент <hgroup> следует добавлять только в том случае, если в одном теге <header> есть заголовки разных уровней.
Данный элемент может содержать только теги <h> — вот почему в нашем примере метаданные находятся за его пределами. Если в вашем коде используется только тег <h2> или тег <h2> с метаданными, то эти элементы группировать не нужно. Например, в заголовке тела документа элемент <hgroup> отсутствует, потому что элемент <h> только один. Элемент <hgroup> предназначен исключительно для группировки тегов <h>, на что и указывает его название.
Браузеры и программы, которые исполняют и отображают веб-сайты, считывают HTML-код и создают собственную внутреннюю структуру для интерпретации и обработки каждого элемента. Эта внутренняя структура состоит из разделов, не имеющих ничего общего с разделами документа, которые мы определили в HTML-коде, например, с помощью элементов <section>. Речь идет о концептуальных разделах, генерируемых во время интерпретации кода. Элемент <header> сам по себе не создает отдельного концептуального раздела. Это означает, что элементы внутри <header>, представляющие разные уровни заголовков, могут
привести к формированию нескольких концептуальных разделов. Элемент <hgroup> был создан специально для группировки тегов <h>, чтобы избежать ошибок интерпретации HTML-кода браузерами.
повторяем основы-
Метаданные — это набор данных, который описывает другой набор данных и предоставляет дополнительную информацию о нем. В нашем примере метаданные содержат дату публикации статей.
<figure> и <figcaption>
Элемент <figure> предназначен для более точного определения содержимого документа. До его появления невозможно было объявить содержимое, которое представляет собой изолированную частью документа: иллюстрации, рисунки, видео и т. п. Как правило, такие элементы являются частью основного раздела, но их можно спокойно удалять из документа, не нарушая его структуру. Если такая информация присутствует в документе, то она определяется тегом <figure>.
Листинг 1.18. Использование элементов <figure> и <figcaption>
<! DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»description» content=»Это пример HTML5″>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<header>
<h2>Это главный заголовок веб-сайта</h2>
</header>
<nav>
<ul>
<li>домой</li>
<Н>фотографии</Н>
<li>видео</li>
<Н>контакты</Н>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 1</h2>
<h3>подзаголовок статьи 1</h3>
</hgroup>
<р>опубликовано 10.12.2011</p>
</header>
Это текст моей первой статьи <figure>
<img src=»http://minkbooks.com/content/myimage.jpg»> <figcaption>
Это изображение для первой статьи </figcaption>
</figure>
<footer>
<р>комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 2</h2>
<h3>подзаголовок статьи 2</h3>
</hgroup>
<р>опубликовано 15.12.2011</p>
</header>
Это текст моей второй статьи <footer>
<р>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote> <blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</body>
</html>
В листинге 1.18 в первой статье сразу после текста мы добавили изображение (<img src=»http://minkbooks.com/content/myimage.jpg»>). Это
Распространенный прием, текст часто сопровождается изображениями или видео. Теги <figure> определяют эти визуальные дополнения и помогают отличать их от остальной информации документа.
Кроме того, в листинге 1.18 внутри тега <figure> используется еще один дополнительный элемент. Такие блоки информации, как изображения и видео, принято подписывать. В HTML5 предусмотрен специальный элемент для создания таких подписей. Тег <figcaption> определяет текст, относящийся к содержимому <figure>, и устанавливает отношение между этими элементами и их содержимым.
Вам также могут быть интересны следующие статьи:
Урок 4: «Тело» сайта, тег «body»
Давно я не писал уроков HTML, но сегодня решил это исправить — нужно продолжать изучать HTML язык. Итак, сегодня я расскажу про то, что такое «тело» сайта и немного про атрибуты данного тега.
«Тело» сайта — разговорный термин среди программистов и HTML верстальщиков. Под выражением «тело» сайта подразумевают теги
<body></body>Тегу «body» можно задать атрибуты, например фон страницы или цвет текста. Фон HTML страницы задает атрибут bgcolor:
<BODY bgcolor="#00ff00"></BODY> Цвет страницы можно задать как шестнадцатизначным номером цвета, так и его названием из стандартной палитры цветов:
<BODY bgcolor="Green"></BODY>Чтобы задать цвет текста, используется атрибут text. Оформляется он почти так же, как и атрибут bgcolor:
<BODY text="Red"></BODY><BODY text="#FF0000"></BODY>Атрибуты «bgcolor» и «text» можно использовать и одновременно:
<BODY bgcolor="Green" text="Red"></BODY>Вместо bgcolor можно использовать другой атрибут — background. Этот атрибут позволяет назначить в качестве фона HTML страницы — картинку.
Оформляется этот атрибут следующим способом:
<BODY background="http://site.site/kartinka.jpg">где site.site — адрес вашего сайта, а kartinka.jpg — изображение, которое будет фоном вашей HTML страницы.
Пример элементарного шаблона сайта с использованием атрибутов тега «body»:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ключевые, слова" />
<meta name="description" content="описание сайта" />
<title>Наш сайт!</title>
</HEAD>
<BODY bgcolor="Green" text="Red">
Атрибуты тега "Body"!!!
</BODY></HTML>Скачать пример HTML шаблона: stranichkahtml.zip
Пример получился, конечно, не ахти, поэтому впереди Вас ждет ещё много уроков HTML!
Бюро Погодаева — продвижение сайта цены
Почта: [email protected]
Телефон: +7(495)966-28-77
При верстке шаблонов и дизайнов верстальщики редко используют атрибуты тега «body», обычно эти параметры задаются в CSS. Как подключить css-стили к шаблону можно прочитать в Уроке №3: Как подключить CSS стили оформления в шаблоне?. О том, как правильно оформить «тело» сайта, я расскажу в следующем уроке №5. И помните, что создание HTML сайта не так сложно, как это кажется в начале!
Структура HTML. Основы HTML. Основной скелет страницы
Мы уже знаем что каждый HTML документ состоит из набора правил (тегов). но как их располагать на странице и с чего начать создание веб сайта?
На данном этапе мы рассмотрим структуру самого документа HTML, рассмотрим какие теги являются основными и самыми главными во всем документе.
HTML документ имеет следующую структуру:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мой первый сайт</title> </head> <body> <p align=center> Привет МИР!!!</p> </body> </html>
Рассмотрим данную структуру веб странице немного подробнее
<!DOCTYPE html> — доктайп. В прошлом когда использовались старые версии языка HTML доктайп выступал в качестве ссылки и указывал набор правил, по которым должа была следовать страница. Но в настоящее время данный тег стал больше данью прошлому чем действительно чем то важным и столь необходимым, но все равно его продолжают использовать для того чтобы все работало правильно.
<html></html>— Данный тег заключает внутри себя весь контент страницы, наиболее известен как корневой элемент.
<head></head>— Данный тег выступает в роли головы вашей страницы, все что вы хотите включить на страницу не являющееся контентом описывается в данном теге. К таким вещам относятся подключаемые или встроенные стили CSS, мета теги описывающие ключевые слова, описание страницы, указание автора, кодировка и многое другое что будет влиять на отображаемый контент но будет недоступен пользователю вашего сайта.
<body></body>— В данном теге содержится весь контент который вы хотите донести до пользователей которые посетили вашу страницу. Данный элемент может содержать текст, изображения, видео, гиперссылки и многое другое. С помощью атрибутов данного тега можно задать цвет страницы в браузере, цвет всего текста, цвета ссылок как посещенных так и не посещенных. Это основной тег для того контента который будет отображаться на вашей странице и для того что будет видеть посетитель вашего сайта.
<title></title>— Данный элемент устанавливает заголовок для вашей страницы который отображается как название вкладки в вашем браузере. Так же он используется для описания страницы когда вы добавляете его в закладки браузера. Поисковые системы будут выдавать ссылку на вашу страницу с надписью из данного тега.
Представленная структура является универсальной м должна присутствовать на всех страницах интернет ресурса. Главное запомнить что всю информацию которая должна быть доступна для посетителей ресурса необходимо размещать в теле документа внутри тега <body>.
Атрибуты тега <BODY>
ALINK — атрибут позволяющий задать цвет активной ссылки на веб странице. В качестве значения принимает название цвета либо его код RGB.
VLINK — атрибут задает цвет посещенной ссылки. В качестве значения принимает название цвета либо его код RGB.
LINK — задает цвет всех ссылок на веб странице. В качестве значения принимает название цвета либо его код RGB.
TEXT — позволяет задать цвет текста на веб странице. В качестве значения принимает название цвета либо его код RGB.
BGCOLOR — позволяет установить цвет фона веб страницы. В качестве значения принимает название цвета либо его код RGB.
BACKGROUND — атрибут позволяет установить в качестве фона изображение. В качестве значения используется абсолютный или относительный путь до файла изображения.
SCROLL — атрибут, позволяющий установить отображение или скрытие полосы прокрутки. Может принимать значения: YES (отображать полосы прокрутки) или NO (не отображать полосы прокрутки).
BGPROPERTIES — атрибут определяющий прокручивать фон совместно с текстом или нет. Если необходимо чтобы фон не прокручивался совместно с контентом нужно установить значение данного атрибута FIXED. Если фон должен прокручиваться вместе с контентом то данный атрибут нужно просто убрать.
BOTTOMMARGIN — задает отступ от нижнего края окна браузера до содержимого веб страницы. В качестве значений используются пиксели. По умолчанию отступ равен 10 пикселям.
LEFTMARGIN — задает отступ от левого края окна браузера до контента. В качестве значений используются пиксели. По умолчанию отступ равен 10 пикселям.
RIGHTMARGIN — задает отступ от правого края окна браузера до контента. В качестве значений используются пиксели. По умолчанию отступ равен 10 пикселям.
TOPMARGIN — задает отступ от верхнего края окна браузера до контента. В качестве значений используются пиксели. По умолчанию отступ равен 10 пикселям.
Лабораторная работа 1. Структура HTML документа (pdf)
Урок 5: «Тело» сайта, тег «body» + CSS
Довольно редко я пишу html уроки, а писать их надо… Ну что же? Продолжим дальше?
Итак, сегодня я расскажу о том, как оформить «тело сайта» через CSS.
Что нужно сделать перед тем, как начать оформлять «тело сайта»?
1) Прочитать уроки HTML верстки 1 — 4
2) Создать файл CSS в той же папке, где храниться ваш HTML шаблон с названием style.css (бывает, что создают его и под названием main.css)
3) Подключить только что созданный файл css следующей строчкой:
<link rel="stylesheet" href="style.css" type="text/css" >Более подробно об этом написано в уроке №3
4) Читать статью дальше.
Итак, Вы создали файл style.css и подключили стили в своем HYML-шаблоне. Сейчас Вам нужно в css-файле написать слово body и открыть стили знаком «{» без кавычек. Дальше Вы можете указать общий цвет текста на страницы, шрифт и размер текста, фон, отступы, выравнивание и другие параметры. Дальше нужно закрыть класс знаком «}» без кавычек. Должно получиться примерно так:
body {
color: #000; /*Цвет текста: черный*/
background: #FFFFFF; /*Цвет фона: белый*/
word-wrap: break-word; /*Переносить слово, если не влезает: да*/
font-size: 65%; /*Размер текста: 65%*/
font-family: Verdana, Arial, Sans-Serif; /*Шрифты:Verdana, Arial, Sans-Serif*/
}Обращаю внимание на то что, каждый новый стиль пишется с новой строки или через пробел, а также после стилей ставится точка с запятой. Комментарии в css обозначаются следующим образом: /*комментарий*/ .
Фон страницы можно задавать, как цветом, так и картинкой, аналогично описанному в уроке 4.
После окончания работы с файлами, не забудьте их сохранить и загрузить на сервер.
На сегодня Всё, создавайте сайт самостоятельно, последнее время цены так кусаются…
HTML тег body
Основное тело HTML документа, где размещается весь контент. Этот элемент обязателен к использованию и используется на странице один раз. Он должен начинаться сразу же после закрывающего тега <head> и заканчиваться непосредственно перед закрывающем тегом <html>.
Разница между HTML 4.01 и HTML5
В HTML5 были удалены все атрибуты, относящиеся к разметке.Атрибуты тега <body>
| Атрибут | Описание |
|---|---|
| alink | Определяет цвет активных ссылок |
| background | Определяет фоновое изображение для документа |
| bgcolor | Определяет цвет фона элемента |
| link | Определяет цвет для не посещенных ссылок |
| text | Определяет цвет текста документа |
| vlink | Определяет цвет посещенных ссылок |
Общие атрибуты
Тег <body> поддерживает общие атрибуты и атрибуты-события.
HTML пример
Простой HTML документ с минимальным набором тегов:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Содержимое документа......
</body>
</html>
CSS стили по умолчанию
Большинство браузеров будут отображать тег <body> со следующими стилями
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}