Тело html: Структура html – Строение тела документа | Учебник HTML5

Строение тела документа | Учебник 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 &copy; 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 &copy; 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 &copy; 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 &copy; 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 - Урок 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 - Урок 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;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *