Разное

Структура html документа: Структура HTML-документа — Тренажёр «Знакомство с HTML и CSS» — HTML Academy

21.08.2021

Содержание

Структура HTML документа

Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.

Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.

Измените свой документ следующим образом:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    Это моя первая веб-страница
</body>
</html>

Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить» (это перезагрузит вашу веб-страницу).

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

Первая строка, начинающаяся с «<!DOCTYPE…» говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.

Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html>, — открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html>, является HTML документом. Все что находится между <body> и </body> является основным содержимым веб-страницы и выводится в окне браузера.

Закрывающие теги

Теги </body> и </html> закрывают соответствующие открывающие теги. Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.

Не у всех тегов есть соответствующие закрывающие теги (вроде <html></html>). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: <br />. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML

должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег.

Атрибуты

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


<тег атрибут="значение">контент</тег>

Подробнее о тегах с атрибутами мы поговорим немного позже.

Элементы

Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами <body> и </body>

, включая сами эти теги, является элементом body.

Заголовок веб-документа Вверх Что нужно, чтобы создать веб-страницу

Структура HTML файла

Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера. Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл». Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта:

<!DOCTYPE html>
<html>
   <head>
      Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
   </head>
   <body>
      Содержание страницы
   </body>
</html>
Всё, что написано латиницей и заключено в скобки < > — это теги. Разберём пример по сторкам:

<!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.

<head> … </head>

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

<body> … </body> — этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
</head>
<body> Тише, мыши, кот на крыше,<br>
а котята ещё выше.<br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
а котята ха-ха-ха. </body>
</html>
Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang=»ru»>. У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега < >. Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.

Второе изменение касается содержания тега <head> … </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.

Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

В блоке <head> . .. </head> также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с

<body> … </body> или <head> … </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию:
<!— текст_комментария —>
. Пример комментариев:
<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</html>
Комментарий может находиться в любой части сайта.

Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.

Структура html-документа, веб-страницы | основные теги

Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. — «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).

doctype

Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления <!DOCTYPE> следующим образом:


<!DOCTYPE html>

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

Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.

Элемент html

После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента <html>:


<!DOCTYPE html>
<html>
</html>

Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: <head> и <body>.

Элемент head

Элемент <head> является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента <title>, рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента <head>.

Элемент <head> должен быть первым дочерним элементом <html>, никакое содержимое или элементы не должны располагаться перед ним:


<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Элемент title

Элемент <title> предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент <title>, который должен располагаться внутри элемента <head>:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
</html>

Браузеры отображают содержимое элемента <title> как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:

Элемент body

Элемент <body> является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель — отделить содержимое документа от метаданных:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
  </body>
</html>

Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

С этой темой смотрят:

Структура html-документа

Теги

Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.

Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.

Каркас html-документа

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название веб-страницы</title>
    </head>
    <body>
        
    </body>
</html>

Тип документа

В первой строке html-документа принято указывать тип документа. Делать это нужно обязательно, потому что существует несколько версий языка html, и у каждой есть свои правила и стандарты. Если браузеру не сообщить о версии HTML, то он не будет знать какому стандарту нужно следовать при отображении веб-страницы, что может привести к ее некорректному отображению.

При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.

Теги верхнего уровня

Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.

Теги <head>и <body>определяеют заголовок и тело html-документа.

Теги заголовка документа

В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.

Кодировка html-документа
<meta charset="utf-8">

Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.

Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.

В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.

Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.

Название html-документа

Название или заголовок html-документа записывается между тегами <title>. Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.

Содержимое тега <title>отображается:

  • на вкладках веб-страниц
  • в списке закладок
  • в названии файла при сохранении веб-страницы на жесткий диск;
  • в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.

Теги тела документа

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


Видео к уроку

Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой продолжим раздел HTML. Эта запись поможет разобраться вам со структурой HTML документа. На самом деле, структура HTML документа очень простая: границы документа, заголовок, тело и декларация. О каждом элементе структуры документа и его назначении вы можете узнать из этой публикации.

Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа

Кроме того, что мы рассмотрим структуру HTML документа, мы поговорим о том, как браузер интерпретирует HTML документ и проведем параллель между HTML и протоколом HTTP, ведь обе эти технологии были разработаны в ЦЕРНе одним и тем же человеком для того, чтобы сделать общение по сети более доступным и простым специально неподготовленным пользователям. Так же любой начинающий веб-разработчик или веб-мастер должен знать и понимать, как работают эти две технологии: HTML и HTTP.

Структура HTML документа. Особенности работы браузера с HTML

Содержание статьи:

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

Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.

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

Смотрим код сформированной HTML страницы в браузере

Снизу у нас появится консоль, в которой наибольший интерес для нас в данный момент представляет вкладка Elements.

Код HTML страницы в консоли браузера

А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».

У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:

Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим. Данный пример очень показательный по двум причинам:

  1. Вы увидели структуру HTML документа.
  2. Вы увидели, как браузер обрабатывает HTML код.

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

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

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

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

Структура HTML документа

Сверху мы видим HTML тэг <!DOCTYPE>, этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг <!DOCTYPE>. Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.

Далее зеленой линией обозначен тэг <html>, который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов <html> и </html>, иначе документ будет невалидным. Для простоты понимания структуры HTML документа можно представить, что тэги <html>и </html> это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.

Но также на рисунке мы видим, что наш контейнер <html>состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге <title>.

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

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

Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>

Пожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом <head>, конец заголовка HTML документа обозначается закрывающим тэгом </head>.

Внутри заголовка HTML документа прописывается вся необходимая служебная информация:

  1. В заголовке указывается кодировка HTML документа.
  2. Так же здесь подключатся таблицы стилей.
  3. Заголовок HTML документа используется для подключения файлов JavaScript.
  4. В заголовке расположено описание HTML документа.
  5. В заголовке указывается название HTML документа.
  6. В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.

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

Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги <h2>, <h3>, <h4>и так до <h6>, эти тэги делят документ на разделы.

Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>

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

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

Открывающий HTML тэг <body> обозначает начало тела HTML документа, закрывающий тэг </body>обозначает его окончание. Вне тела не должно быть HTML тэгов, которые бы отображались пользователю.

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

Границы HTML документа. HTML тэг <html>

Если не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг. Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг <html>.

Так и в HTML: весь HTML документ представляет собой один тэг <html>, внутри которого должно быть обязательно два вложенных тэга: <head>и <body>. За пределами границы HTML документа, кроме декларации, ничего быть не должно, на то это и граница.

Важной особенностью структуры HTML документа является то, что за пределами <html>…</html>не должно быть других тэгов, а внутри <html> могут быть только тэги <head>и <body>. А вот внутри тэгов <head>и <body>может быть сколь угодно много тэгов, правда внутри <head>служебных, а внутри <body>тех тэгов, которые видны пользователю.

Повторюсь, что структура HTML документа строгая и порядок написания тэгов должен быть так, как на рисунке выше.

Вывод: тэг <html> определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги <head>и <body>в том порядке, как они написаны, а внутри тэгов <head> и <body> можно писать сколь угодно много тэгов.

Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE

Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).

Исходя из вышесказанного, браузеру нужно «понимать»: с какой версией HTML он имеет дело или может он работает не с HTML, а с xHTML? Как ему это понять, чтобы правильно отобразить документ.

Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг <!DOCTYPE>, мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.

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

Пример структуры HTML документа

Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Структура HTML документа</title> </head> <body> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

 

<html lang=»ru-RU»>

 

<head>

 

<meta charset=»UTF-8″>

 

<title>Структура HTML документа</title>

 

</head>

 

<body>

 

<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>

 

</body>

 

</html>

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

Так выглядит HTML документ в браузере с правильно заданной структурой

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

Так же обратите внимание на то, что на вкладке появился текст: «Структура HTML документа», это получилось благодаря тому, что внутри заголовка HTML документа мы использовали тэг <title>, который используется для того, чтобы давать имена HTML страницам. На картинке для примера я оставил вкладку, которая принадлежит странице из прошлой записи. Еще внутри заголовка есть мета-тэг с указанием кодировки документа.

Сравниваем структуру HTML документа со структурой HTTP протокола

Ни для кого не секрет, что в сети Интернет основным протоколом передачи данных является HTTP, который расшифровывается, как протокол передачи гипертекста и который был разработан одним и тем же человеком, что и HTML в ЦЕРНе.

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

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

Как браузер интерпретирует HTML документ

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

HTTP клиент в нашем случае – это браузер. По HTTP протоколу чаще всего передаются HTML документы. Из-за особенностей реализации HTTP протокола и структуры HTML документа браузеры реализованы так, что они читают и интерпретируют HTML код слева направо и сверху вниз: сначала браузер проверяет версию HTML, указанную в декларации, затем он видит тэг <html>, который говорит ему о том, что начался HTML документ.

Далее браузер видит тэг <head> и понимает, что сейчас он получит служебную информацию, которая ему нужна, чтобы правильно отобразить документ. Кстати, если браузер увидит, что вы подключаете какой-нибудь скрипт или таблицу стилей, то он будет делать запросы к серверу, чтобы получит недостающие файлы. Увидев закрывающий тэг </head> браузер понимает, что заголовок HTML закончился.

За тэгом <head> браузер видит тэг <body>, который говорит ему о том, что началось тело документа, которое нужно показать клиенту. Проанализировав тело, браузер увидит закрывающий тэг </body> и при этом поймет, что закончилось тело.

Об окончании документа браузер понимает по закрывающему тэгу </html>

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

Введение в HTML — Документация по Веб-программированию 0.0.0

Изначально язык HTML (HyperText Markup Language) был задуман и создан как средство структурирования и форматирования документов без привязки к средствам отображения. В идеале, гипертекстовый документ должен одинаково выглядеть на различных устройствах (монитор ПЭВМ, экран ПДА или мобильного телефона, принтер, медиа-проектор и т.п.).

Разработкой спецификаций языка HTML и утверждением их в качестве официальных стандартов занимается Консорциум всемирной паутины (W3C). Помимо W3C, в развитии языка участвуют IT-компании и сообщество разработчиков.

Элементы гипертекста

Структура HTML-документа

Рис. 1. Общая структура веб-страницы

HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа (рис. 1) довольно проста:

  1. Описание документа начинается с указания его типа (секция DOCTYPE).
  2. Текст документа заключается в тег <html>. Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами <head> и <body>.
    • В заголовке (<head>) указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
    • Тело документа (<body>) — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.

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

Заголовок предназначен для размещения метаинформации, описывающей веб-документ как таковой.

Блок <body> содержит то, что нужно показать пользователю: текст, изображения, внедренные объекты и пр.

Ниже приведен простой пример html-разметки.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <title>Почему откровенна веданта?</title>
</head>
<body>
<h2>Почему Откровенна Веданта?</h2>
<h3>Трактат о амбивалентности бытия, сомнениях и адживике</h3>
<p>Философия нетривиальна и это не умозаключение, а плод переработки бытийного. 
Моцзы, Сюнъцзы и др. считали, что сомнение естественно понимает под собой гений,
изменяя привычную реальность. Отношение к современности, как принято считать,
непредсказуемо, а созерцание, конечно, транспонирует гравитационный парадокс,
ломая рамки привычных представлений. Позитивизм преобразует дуализм, не учитывая
мнения авторитетов. Можно предположить, что вещь в себе представляет собой типичный
здравый смысл, учитывая опасность, которую представляли собой писания Дюринга.
При этом буквы А, В, I, О символизируют соответственно суждения:</p>
<ul>
<li>общеутвердительное;</li>
<li>общеотрицательное;</li>
<li>частноутвердительное;</li>
<li>частноотрицательное.</li>
</ul></p>
<p>Структурализм, как принято считать, подчеркивает закон исключённого третьего,
открывая новые горизонты. Адживика преобразует неоднозначный предмет деятельности,
tertium nоn datur. Согласно предыдущему, дуализм оспособляет примитивный бабувизм,
ломая рамки привычных представлений.  Наряду с этим вещь в себе дискредитирует
сенсибельный принцип восприятия.</p>
<p>В целом, представляется логичным, что адживика трансформирует субъективный
гедонизм, тогда как бабувизм контролирует предмет деятельности, tertium nоn datur.</p>
</body>
</html>

DOCTYPE

Секция DOCTYPE указывает браузеру тип документа и версию использованного языка разметки. Здесь также указывается название и область видимости описания этого языка и адрес файла dtd (document type definition).

Примеры DOCTYPE:

  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>
    Гипертекстовый документ в формате HTML 4.01, содержащий фреймы.
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
    Гипертекстовый документ в формате HTML 4.01 со строгим синтаксисом (т.е. не использованы устаревшие и не рекомендованные теги).
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
    Гипертекстовый документ в формате HTML 4.01 с нестрогим («переходным») синтаксисом (т.е. использованы устаревшие или не рекомендованные теги и атрибуты).
  • <!DOCTYPE HTML>
    Пока не стандартизованное объявление для документов HTML5.

Стандарт требует, чтобы секция DOCTYPE присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста. Это достигается за счет того, что браузер может не делать предположений о том, как интерпретировать теги, а свериться со стандартным определением (файлом .dtd). Подробное описание DOCTYPE — на сайте Консорциума W3C.

Мета-теги

Мета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге <meta>.

Мета-теги размещают в блоке <head>…</head> веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.

Пример описания метаданных:

<head>
<meta name="author" content="строка"> — автор веб-документа
<meta name="date" content="дата"> — дата последнего изменения веб-страницы
<meta name="copyright" content="строка"> — авторские права
<meta name="keywords" content="строка"> — список ключевых слов
<meta name="description" content="строка"> — краткое описание (реферат)
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка
<meta http-equiv="expires" content="число"> — управление кэшированием
<meta http-equiv="refresh" content="число; URL=адрес"> — перенаправление
</head>

Теги

Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации.

HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:

<имя_тега [атрибуты]>

Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (<html>…</html>). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег <img>. Регистр символов для тегов не имеет значения.

Примеры часто используемых тегов HTML:

<html>...</html> — контейнер гипертекста
<head>...</head> — контейнер заголовка документа
<title>...</title> — название документа (то, что отображается в заголовке окна браузера)
<body>...</body> — контейнер тела документа
<div>...</div> — контейнер общего назначения (структурный блок)
<hN>...</hN> —  заголовок N-ного уровня  (N = 1...6)
<p>...</p> — основной текст
<a>...</a> —  гиперссылка
<ol>...</ol> — нумерованный список
<ul>...</ul> — маркированный список
<li>...</li> — элемент списка
<table>...</table> — контейнер таблицы
<tr>...</tr> — строка таблицы
<td>...</td> — ячейка таблицы
<img>...</img> — изображение
<form>...</form> — форма
<i>...</i> —  отображение текста курсивом
<b>...</b> —  отображение текста полужирным шрифтом
<em>...</em> —  выделение (курсивом)
<strong>...</strong> —  усиление (полужирным шрифтом)
<br> — принудительный разрыв строки

Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому:

<!-- Список как пример использования вложенных тегов -->
<ol>
<li>Элемент списка</li>
<li>Второй элемент списка</li>
</ol>
<div>
    <h3>Заголовок второго уровня</h3>
    <p>и основной текст</p>
    внутри логического блока
</div>

Примечание

Примечание: Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее, рекомендуется следить за наличием закрывающих тегов и использовать их, чтобы избежать ошибок при воспроизведении документа.

Полный список тегов можно найти в документации на соответствующую версию языка HTML (см., например HTML 3.2, HTML 4.01, XHTML 1.1 и др.).

Атрибуты

Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега:

<тег атрибут=”значение”>…</тег>

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

Примечание

Примечание: Несмотря на необязательность кавычек, их все же стоит всегда использовать.

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

Краткий список некоторых часто используемых атрибутов и их возможных значений:

style="описание_стилей" — локальные стили
src="адрес" — адрес (URI) источника данных (например картинки или скрипта)
align="left|center|right|justify" —  выравнивание, по умолчанию left (по левому краю)
width="число" — ширина элемента (в пикселях, пиках, поинтах и др.)
height="число" — высота элемента (в пикселях, пиках, поинтах и др.)
href="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход
name="имя" — имя элемента
id="идентификатор"  — уникальный (в пределах веб-страницы) идентификатор элемента
size="число" — размер элемента
class="имя_класса" — имя класса во встроенной или связанной таблице стилей
title="строка" — название элемента
alt="строка" — альтернативный текст

Гиперссылки

Гиперссылка — это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег <a>. Гиперссылки позволяют перемещаться между связанными веб-страницами.

<a href="http://example.com/">Пример</a>
<a href="ftp://example.com/archive.tar.gz">Скачать файл</a>
<a href="mailto://[email protected]" title="Обратная связь">[email protected]</a>

Переход по ссылкам можно выполнять как на целые документы, так и на специальным образом помеченные (именованные) фрагменты текста:

<a name="якорь">Привязка к фрагменту текста</a>
<a href="#якорь">Ссылка на якорь</a>

Ссылки могут быть абсолютными и относительными.

Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:

<a href="http://example.com/page.html">Абсолютная ссылка</a>
<a href="http://example.com/images/figure1.gif">Ссылка на страницу в каталоге</a>

Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:

<a href="/index.html">Ссылка на страницу в корневом каталоге</a>
<a href="page.html#seg1">Ссылка на фрагмент страницы в текущем каталоге</a>
<a href="images/figure1.gif">Ссылка на страницу в подкаталоге текущего каталога</a>
<a href="/docs/manual.html">Ссылка на страницу в подкаталоге корневого каталога</a>
<a href="../files/index.html">Ссылка на страницу в вышележащем каталоге </a>

Специальные символы

Кроме тегов, в HTML-документах могут присутствовать и специальные символы.

Например, © — знак авторского права. Для отображения специальных символов используется мнемонический или числовой код вида &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления. Например: &amp; (числовой код &#169;) — амперсанд (&), &lt; — символ «меньше» (<) и &gt; — символ «больше» (>), &laquo; — левая типографская кавычка («) и т.д.

Кросс-браузерность

Гипертекстовые документы обрабатываются специальными приложениями, которые читают код разметки и выводят документ в отформатированном виде. Такие приложения, называемые «браузерами» (в терминах спецификации HTML — «пользовательскими агентами», USER-AGENT), обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera. Наряду с этими существует масса других браузеров, которые используют их системные библиотеки (т.н. «движок») или работают на собственном коде.

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

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.

Термин «кросс-браузерность» начали использовать во время браузерных войн, начавшихся с серидины 90-х годов XX в. В этом контексте термин относился к сайтам, которые одинаково работают как в Internet Explorer, так и в Netscape Navigator. В то время производители стали внедрять собственные функции для браузеров, что привело к существенным отличиям отображения веб-содержимого и концептуальным различиям в разработке веб-сайтов. В настоящее время ситуация смягчилась (отчасти из-за ухода с рынка Netscape), но не настолько, чтобы можно было говорить о близком окончании браузерных войн.

Структура html документа — разбор страницы с примерами

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

Структура HTML документа

Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

<!DOCTYPE html>
<html>
    <head>
        <title>Профессиональное создание сайта в интернете с примерами</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Как создать сайт в интернете</h2>
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
    </body>
</html>

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

Визуальный пример html страницы

Тег DOCTYPE

Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

<!DOCTYPE html>

Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.

Тег HTML

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

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

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

Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.

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

Тег title

У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
</head>

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

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
    <meta charset="utf-8">
</head>

Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры).

Тег body

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

Обратите внимание, что body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h2. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

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

Синтаксис html

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

<!DOCTYPE html>
<html><head>
<title>Профессиональное создание сайта в интернете с примерами</title><meta charset="utf-8">
</head><body><p>Здесь размещается содержание документа, которое видно всем пользователям.</p></body>
</html>

Браузеру будет все равно.

Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

<!DOCTYPE html>
<html>
    <head>
        <title>Название документа</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Название материала</h2>
        <p>Основной текст</p>
    </body>
</html>

То есть тег head должен идти отступом в одну табуляцию относительно тега html. Body идет на уровне с head поскольку он тоже вложен в контейнер html.

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Основной текст</p>
</body>
</html>

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

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

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

Важно четко соблюдать порядок!

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

Правильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
</body>

Неправильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.
</body>
    </p>

Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде. Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

Сам комментарий может быть, как однострочным, так и многострочным.

<!DOCTYPE html><!--Указываем тип документа-->
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8"><!--Кодировка-->
</head>
<body>
    <!--Главное содержание страницы для пользователей-->
    <p>Основной текст</p>
</body>
</html>

Прописывается он между конструкциями <!— —>.

Как создать файл html

Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

  • Brackets
  • Блокнот
  • Notepad++
  • Sublime Text
  • Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас), который мы выше разбирали. Он должен всегда присутствовать.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Профессиональное создание сайта в интернете с примерами</title> 
        <meta charset="utf-8"> 
    </head> 
    
    <body> 
        <h2>Как создать сайт в интернете</h2> 
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p> 
   </body> 
</html>

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head.

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

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8.

<meta charset="utf-8">

Для чего вообще нужна кодировка?

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

Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

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

К сожалению, это не всегда получалось.

Если бы мы заходили на китайские сайты, то у нас вместо их символов могли высвечиваться черные квадраты или знаки вопросов. То есть браузер просто не понимал, что это за символы.

Неправильно задана html кодировка

Как решение этой проблемы была создана универсальная кодировка utf-8.

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

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу

Сейчас расскажу, как сохранить html страницу правильно. После того, как задали кодировку и структуру html страницы, вам нужно нажать на «сохранение». Заходим во вкладку «Файл» —> «Сохранить как…».

Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html.

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

Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

И как вы уже должны заметить, расширение файла должно быть html. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл

Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы

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

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U. В новой вкладке вам откроется исходный код страницы сайта.

Исходный код сайта

Еще можно в адресной строке прямо перед адресом страницы прописать:

view-source:

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

Еще в браузерах есть встроенный инструмент веб-разработчика. Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.

Инструмент разработчика в браузере

Во вкладке «Elements» слева будет html код, а справа стили CSS. Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

На этом все!

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

Мне нравится1Не нравится

Глобальная структура документа HTML

Глобальная структура документа HTML

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. декларативный раздел заголовка (разделенный заголовком HEAD элемент),
  3. тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела. Разделы 2 и 3 должны быть разделены кодом HTML элемент.

Вот пример простого HTML-документа:


   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
      

Привет, мир!

Допустимый документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих декларации типов документов в своих документах. DTD различаются по элементам они поддерживают.

  • HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
     
  • HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
     
  • DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
     

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [OASISOPEN]).Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного справочнику SGML. информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходной форме.

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]
Устарело. г. значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, потому что он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остальная часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:


  ... Сюда идет голова, тело и т.д. ... 

 

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]
Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделены пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, хотя эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

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

7.4.2 Модель

TITLE элемент
 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

 

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

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

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE доступен пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, в качестве подписи, произносится).

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


<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ... 


 

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка «(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным образом. контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ... 
 

Атрибут title имеет дополнительную роль при использовании с LINK элемент для обозначения внешняя таблица стилей. Пожалуйста, обратитесь к разделу о ссылках и таблицах стилей для получения подробной информации.

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

7.4.4 Мета данные

Примечание. W3C Структура описания ресурсов (см. [RDF10]) стала W3C Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

HTML позволяет авторам указывать метаданные — скорее информацию о документе. чем содержимое документа — разными способами.

Например, чтобы указать автора документа, можно использовать META следующий элемент:


 

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

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

Указание метаданных

Обычно определение метаданных состоит из двух шагов:

  1. Объявление свойства и значения этого свойства.Это можно сделать за два способы:
    1. Изнутри документа через элемент META .
    2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
  2. Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент
META
 META  - O EMPTY - общая метаинформация ->
 http-Equiv  ИМЯ # ПРЕДПОЛАГАЕТСЯ - Имя заголовка ответа HTTP -
    name  NAME #IMPLIED - имя метаинформации -
    содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]
Этот атрибут определяет имя свойства.В этой спецификации нет списка допустимые значения для этого атрибута.
содержимое = cdata [CS]
Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]
Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

Элемент META может использоваться для идентификации свойств документа (например, автор, срок действия, список ключевых слов и т. д.) и присвоить им значения характеристики. Эта спецификация не определяет нормативный набор характеристики.

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:


 

Атрибут lang может использоваться с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора объявлено французским:


 

Примечание. Элемент META — это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Если свойство указано в META элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:


 

можно также записать:


 
Заголовки META и HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в http-Equiv для создания заголовка в стиле [RFC822] в ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :


 

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT
 

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

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

META и поисковые системы

Обычно META используется для указания ключевых слов, по которым выполняется поиск движок может использовать для улучшения качества результатов поиска.Когда несколько Элементы META предоставляют зависящую от языка информацию о документ, поисковые системы могут фильтровать по атрибуту lang для отображения результатов поиска результаты с использованием языковых предпочтений пользователя. Например,

<- Для носителей английского языка в США ->

<- Для носителей британского английского ->

<- Для носителей французского ->

 

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,г., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

Дополнительная помощь предоставляется в разделе, помогающем поисковым системам индексировать ваш Интернет. сайт.

META и PICS Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

В этом примере показано, как можно использовать объявление META для включения PICS 1.1 этикетка:

<ГОЛОВА>
 
   <em> ... название документа ... </em> 

 
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5


 
Профили метаданных
Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля — это URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставлять интерфейс для поиска по каталогам HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
  • По ссылке.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторские права», «ключевые слова» и «дата» — имеют свои значения, установленные последующие Декларации META .

 
   Как заполнять титульные листы меморандума 
  
  
  
  
 
 

В процессе написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы о INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута scheme «Месяц-День-Год» устраняет неоднозначность этой даты значение.

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

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


 

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель

КУЗОВ элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

фон = uri [CT]
Устарело. г. значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]
Устарело. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • bgcolor (цвет фона)
  • onload , onunload (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Тело документа содержит содержимое документа.Содержание может быть представлен пользовательским агентом различными способами. Например, для визуального браузеры, вы можете думать о теле как о холсте, на котором отображается контент: текст, изображения, цвета, графика и т. д. Для звуковых агентов пользователя одно и то же содержимое можно говорить. Поскольку таблицы стилей теперь предпочтительный способ указать представление документа, презентационный атрибуты BODY были устарело.

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста — белый, цвет текста переднего плана — черный, а цвет гиперссылок на красный изначально, фуксия при активации и бордовый один раз посетил.


<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ... 


 

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:


<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ type = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ... 


 

Использование внешних (связанных) таблиц стилей дает вам возможность изменять презентация без изменения исходного HTML-документа:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут назначает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.
Модель Атрибут id присваивает уникальный идентификатор элемента (который может быть проверен парсером SGML). Например, следующие абзацы отличаются своими значениями id :

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

  • Как селектор таблиц стилей.
  • В качестве целевого якоря для гипертекста ссылки.
  • Как средство ссылки на конкретный элемент из сценария.
  • Как имя объявленного элемента OBJECT .
  • Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

атрибут class , с другой стороны, назначает одно или несколько имен классов элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса могут совместно использоваться несколькими экземплярами элемента. класс атрибут имеет несколько ролей в HTML:

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

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

Переменная объявлена ​​дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках красным:

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}
 

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

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

Предположим, например, что мы пишем документ о программировании язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ... 

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. г. id Атрибут использует то же пространство имен, что и имя атрибут при использовании для имен привязок. Пожалуйста обратитесь к разделу по анкерам с id для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», а другие — «встроенный» (также известный как «уровень текста»). Это различие основано на несколько понятий:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «большие» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, блочные элементы начинаются с новых строк, встроенных элементов. не. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность
По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

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

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

7.5.4 Группирование элементов:

DIV и SPAN элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и Элементы SPAN в сочетании с id и атрибуты класса , предлагают общий механизм для добавления структуры к документы.Эти элементы определяют содержимое как встроенное ( SPAN, ) или блочного уровня ( DIV ), но не накладывать никаких других идиом представления на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы настроить HTML под свои нужды и вкусы.

Предположим, например, что мы хотим сгенерировать документ HTML на основе база данных информации о клиентах. Поскольку HTML не включает элементы, которые идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемого структурного и презентационного эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать информация:



Информация о клиенте: <ТАБЛИЦА> Фамилия: Бойера Имя: Стефан Тел: (212) 555-1212 Электронная почта: sb @ foo.org

Информация о клиенте: <ТАБЛИЦА> Фамилия: Лафон Имя: Ив Тел: (617) 555-1212 Электронная почта: [email protected]

Позже мы можем легко добавить объявления таблиц стилей для точной настройки представление этих записей в базе данных.

Другой пример использования см. В разделе, посвященном class и id атрибуты.

Визуальные пользовательские агенты обычно помещают разрыв строки до и после DIV элементы, например:

aaaaaaaa

bbbbbbbbb
ccccc

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc
 

7.5.5 Заголовки: элементы

h2 , h3 , h4 , h5 , H5 , H6

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент заголовка кратко описывает тему вводимого им раздела.Информация заголовка может использоваться пользовательскими агентами, например, для создания оглавление документа автоматически.

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

В следующем примере показано, как использовать элемент DIV для связывания заголовок с разделом документа, который следует за ним.Это позволит вам определите стиль для раздела (раскрасьте фон, установите шрифт и т. д.) с помощью таблицы стилей.

Лесные слоны

В этом разделе мы обсуждаем малоизвестных лесных слонов. ... этот раздел продолжается ...

Среда обитания

Лесные слоны живут не на деревьях, а среди них. ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ type = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}


 

Нумерованные разделы и ссылки
HTML сам по себе не вызывает номера разделов быть сгенерированным из заголовков. Эта возможность может быть предложена пользовательскими агентами, тем не мение. Скоро языки таблиц стилей, такие как CSS, позволят авторам управлять генерация номеров разделов (удобно для прямых ссылок в печатных документы, как в «См. раздел 7.2 «).

Некоторые люди считают, что пропуск уровней заголовков — это плохо упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4 h2, поскольку уровень заголовка h3 пропускается.

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для предоставления контактной информации. для документа или основной части документа, например формы.Этот элемент часто появляется в начале или в конце документа.

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  
$ Дата: 2018/03/20 02:36:52 $

Глобальная структура документа HTML

Глобальная структура документа HTML

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. декларативный раздел заголовка (разделенный заголовком HEAD элемент),
  3. тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела.Разделы 2 и 3 должны быть разделены кодом HTML элемент.

Вот пример простого HTML-документа:


   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
      

Привет, мир!

Допустимый документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих декларации типов документов в своих документах. DTD различаются по элементам они поддерживают.

  • HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
     
  • HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
     
  • DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
     

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [OASISOPEN]).Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного справочнику SGML. информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходной форме.

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]
Устарело. г. значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, потому что он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остальная часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:


  ... Сюда идет голова, тело и т.д. ... 

 

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]
Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделены пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, хотя эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

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

7.4.2 Модель

TITLE элемент
 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

 

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

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

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE доступен пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, в качестве подписи, произносится).

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


<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ... 


 

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка «(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным образом. контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ... 
 

Атрибут title имеет дополнительную роль при использовании с LINK элемент для обозначения внешняя таблица стилей. Пожалуйста, обратитесь к разделу о ссылках и таблицах стилей для получения подробной информации.

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

7.4.4 Мета данные

Примечание. W3C Структура описания ресурсов (см. [RDF10]) стала W3C Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

HTML позволяет авторам указывать метаданные — скорее информацию о документе. чем содержимое документа — разными способами.

Например, чтобы указать автора документа, можно использовать META следующий элемент:


 

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

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

Указание метаданных

Обычно определение метаданных состоит из двух шагов:

  1. Объявление свойства и значения этого свойства.Это можно сделать за два способы:
    1. Изнутри документа через элемент META .
    2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
  2. Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент
META
 META  - O EMPTY - общая метаинформация ->
 http-Equiv  ИМЯ # ПРЕДПОЛАГАЕТСЯ - Имя заголовка ответа HTTP -
    name  NAME #IMPLIED - имя метаинформации -
    содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]
Этот атрибут определяет имя свойства.В этой спецификации нет списка допустимые значения для этого атрибута.
содержимое = cdata [CS]
Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]
Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

Элемент META может использоваться для идентификации свойств документа (например, автор, срок действия, список ключевых слов и т. д.) и присвоить им значения характеристики. Эта спецификация не определяет нормативный набор характеристики.

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:


 

Атрибут lang может использоваться с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора объявлено французским:


 

Примечание. Элемент META — это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Если свойство указано в META элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:


 

можно также записать:


 
Заголовки META и HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в http-Equiv для создания заголовка в стиле [RFC822] в ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :


 

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT
 

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

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

META и поисковые системы

Обычно META используется для указания ключевых слов, по которым выполняется поиск движок может использовать для улучшения качества результатов поиска.Когда несколько Элементы META предоставляют зависящую от языка информацию о документ, поисковые системы могут фильтровать по атрибуту lang для отображения результатов поиска результаты с использованием языковых предпочтений пользователя. Например,

<- Для носителей английского языка в США ->

<- Для носителей британского английского ->

<- Для носителей французского ->

 

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,г., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

Дополнительная помощь предоставляется в разделе, помогающем поисковым системам индексировать ваш Интернет. сайт.

META и PICS Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

В этом примере показано, как можно использовать объявление META для включения PICS 1.1 этикетка:

<ГОЛОВА>
 
   <em> ... название документа ... </em> 

 
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5


 
Профили метаданных
Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля — это URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставлять интерфейс для поиска по каталогам HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
  • По ссылке.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторские права», «ключевые слова» и «дата» — имеют свои значения, установленные последующие Декларации META .

 
   Как заполнять титульные листы меморандума 
  
  
  
  
 
 

В процессе написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы о INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута scheme «Месяц-День-Год» устраняет неоднозначность этой даты значение.

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

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


 

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель

КУЗОВ элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

фон = uri [CT]
Устарело. г. значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]
Устарело. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • bgcolor (цвет фона)
  • onload , onunload (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Тело документа содержит содержимое документа.Содержание может быть представлен пользовательским агентом различными способами. Например, для визуального браузеры, вы можете думать о теле как о холсте, на котором отображается контент: текст, изображения, цвета, графика и т. д. Для звуковых агентов пользователя одно и то же содержимое можно говорить. Поскольку таблицы стилей теперь предпочтительный способ указать представление документа, презентационный атрибуты BODY были устарело.

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста — белый, цвет текста переднего плана — черный, а цвет гиперссылок на красный изначально, фуксия при активации и бордовый один раз посетил.


<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ... 


 

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:


<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ type = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ... 


 

Использование внешних (связанных) таблиц стилей дает вам возможность изменять презентация без изменения исходного HTML-документа:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут назначает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.
Модель Атрибут id присваивает уникальный идентификатор элемента (который может быть проверен парсером SGML). Например, следующие абзацы отличаются своими значениями id :

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

  • Как селектор таблиц стилей.
  • В качестве целевого якоря для гипертекста ссылки.
  • Как средство ссылки на конкретный элемент из сценария.
  • Как имя объявленного элемента OBJECT .
  • Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

атрибут class , с другой стороны, назначает одно или несколько имен классов элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса могут совместно использоваться несколькими экземплярами элемента. класс атрибут имеет несколько ролей в HTML:

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

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

Переменная объявлена ​​дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках красным:

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}
 

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

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

Предположим, например, что мы пишем документ о программировании язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ... 

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. г. id Атрибут использует то же пространство имен, что и имя атрибут при использовании для имен привязок. Пожалуйста обратитесь к разделу по анкерам с id для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», а другие — «встроенный» (также известный как «уровень текста»). Это различие основано на несколько понятий:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «большие» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, блочные элементы начинаются с новых строк, встроенных элементов. не. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность
По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

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

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

7.5.4 Группирование элементов:

DIV и SPAN элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и Элементы SPAN в сочетании с id и атрибуты класса , предлагают общий механизм для добавления структуры к документы.Эти элементы определяют содержимое как встроенное ( SPAN, ) или блочного уровня ( DIV ), но не накладывать никаких других идиом представления на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы настроить HTML под свои нужды и вкусы.

Предположим, например, что мы хотим сгенерировать документ HTML на основе база данных информации о клиентах. Поскольку HTML не включает элементы, которые идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемого структурного и презентационного эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать информация:



Информация о клиенте: <ТАБЛИЦА> Фамилия: Бойера Имя: Стефан Тел: (212) 555-1212 Электронная почта: sb @ foo.org

Информация о клиенте: <ТАБЛИЦА> Фамилия: Лафон Имя: Ив Тел: (617) 555-1212 Электронная почта: [email protected]

Позже мы можем легко добавить объявления таблиц стилей для точной настройки представление этих записей в базе данных.

Другой пример использования см. В разделе, посвященном class и id атрибуты.

Визуальные пользовательские агенты обычно помещают разрыв строки до и после DIV элементы, например:

aaaaaaaa

bbbbbbbbb
ccccc

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc
 

7.5.5 Заголовки: элементы

h2 , h3 , h4 , h5 , H5 , H6

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент заголовка кратко описывает тему вводимого им раздела.Информация заголовка может использоваться пользовательскими агентами, например, для создания оглавление документа автоматически.

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

В следующем примере показано, как использовать элемент DIV для связывания заголовок с разделом документа, который следует за ним.Это позволит вам определите стиль для раздела (раскрасьте фон, установите шрифт и т. д.) с помощью таблицы стилей.

Лесные слоны

В этом разделе мы обсуждаем малоизвестных лесных слонов. ... этот раздел продолжается ...

Среда обитания

Лесные слоны живут не на деревьях, а среди них. ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ type = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}


 

Нумерованные разделы и ссылки
HTML сам по себе не вызывает номера разделов быть сгенерированным из заголовков. Эта возможность может быть предложена пользовательскими агентами, тем не мение. Скоро языки таблиц стилей, такие как CSS, позволят авторам управлять генерация номеров разделов (удобно для прямых ссылок в печатных документы, как в «См. раздел 7.2 «).

Некоторые люди считают, что пропуск уровней заголовков — это плохо упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4 h2, поскольку уровень заголовка h3 пропускается.

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для предоставления контактной информации. для документа или основной части документа, например формы.Этот элемент часто появляется в начале или в конце документа.

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  
$ Дата: 2018/03/20 02:36:52 $

Глобальная структура документа HTML

Глобальная структура документа HTML

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. декларативный раздел заголовка (разделенный заголовком HEAD элемент),
  3. тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела.Разделы 2 и 3 должны быть разделены кодом HTML элемент.

Вот пример простого HTML-документа:


   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
      

Привет, мир!

Допустимый документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих декларации типов документов в своих документах. DTD различаются по элементам они поддерживают.

  • HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
     
  • HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
     
  • DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
     

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [OASISOPEN]).Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного справочнику SGML. информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходной форме.

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]
Устарело. г. значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, потому что он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остальная часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:


  ... Сюда идет голова, тело и т.д. ... 

 

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]
Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделены пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, хотя эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

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

7.4.2 Модель

TITLE элемент
 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

 

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

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

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE доступен пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, в качестве подписи, произносится).

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


<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ... 


 

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка «(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным образом. контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ... 
 

Атрибут title имеет дополнительную роль при использовании с LINK элемент для обозначения внешняя таблица стилей. Пожалуйста, обратитесь к разделу о ссылках и таблицах стилей для получения подробной информации.

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

7.4.4 Мета данные

Примечание. W3C Структура описания ресурсов (см. [RDF10]) стала W3C Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

HTML позволяет авторам указывать метаданные — скорее информацию о документе. чем содержимое документа — разными способами.

Например, чтобы указать автора документа, можно использовать META следующий элемент:


 

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

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

Указание метаданных

Обычно определение метаданных состоит из двух шагов:

  1. Объявление свойства и значения этого свойства.Это можно сделать за два способы:
    1. Изнутри документа через элемент META .
    2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
  2. Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент
META
 META  - O EMPTY - общая метаинформация ->
 http-Equiv  ИМЯ # ПРЕДПОЛАГАЕТСЯ - Имя заголовка ответа HTTP -
    name  NAME #IMPLIED - имя метаинформации -
    содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]
Этот атрибут определяет имя свойства.В этой спецификации нет списка допустимые значения для этого атрибута.
содержимое = cdata [CS]
Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]
Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

Элемент META может использоваться для идентификации свойств документа (например, автор, срок действия, список ключевых слов и т. д.) и присвоить им значения характеристики. Эта спецификация не определяет нормативный набор характеристики.

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:


 

Атрибут lang может использоваться с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора объявлено французским:


 

Примечание. Элемент META — это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Если свойство указано в META элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:


 

можно также записать:


 
Заголовки META и HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в http-Equiv для создания заголовка в стиле [RFC822] в ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :


 

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT
 

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

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

META и поисковые системы

Обычно META используется для указания ключевых слов, по которым выполняется поиск движок может использовать для улучшения качества результатов поиска.Когда несколько Элементы META предоставляют зависящую от языка информацию о документ, поисковые системы могут фильтровать по атрибуту lang для отображения результатов поиска результаты с использованием языковых предпочтений пользователя. Например,

<- Для носителей английского языка в США ->

<- Для носителей британского английского ->

<- Для носителей французского ->

 

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,г., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

Дополнительная помощь предоставляется в разделе, помогающем поисковым системам индексировать ваш Интернет. сайт.

META и PICS Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

В этом примере показано, как можно использовать объявление META для включения PICS 1.1 этикетка:

<ГОЛОВА>
 
   <em> ... название документа ... </em> 

 
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5


 
Профили метаданных
Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля — это URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставлять интерфейс для поиска по каталогам HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
  • По ссылке.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторские права», «ключевые слова» и «дата» — имеют свои значения, установленные последующие Декларации META .

 
   Как заполнять титульные листы меморандума 
  
  
  
  
 
 

В процессе написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы о INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута scheme «Месяц-День-Год» устраняет неоднозначность этой даты значение.

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

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


 

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель

КУЗОВ элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

фон = uri [CT]
Устарело. г. значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]
Устарело. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • bgcolor (цвет фона)
  • onload , onunload (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Тело документа содержит содержимое документа.Содержание может быть представлен пользовательским агентом различными способами. Например, для визуального браузеры, вы можете думать о теле как о холсте, на котором отображается контент: текст, изображения, цвета, графика и т. д. Для звуковых агентов пользователя одно и то же содержимое можно говорить. Поскольку таблицы стилей теперь предпочтительный способ указать представление документа, презентационный атрибуты BODY были устарело.

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста — белый, цвет текста переднего плана — черный, а цвет гиперссылок на красный изначально, фуксия при активации и бордовый один раз посетил.


<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ... 


 

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:


<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ type = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ... 


 

Использование внешних (связанных) таблиц стилей дает вам возможность изменять презентация без изменения исходного HTML-документа:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут назначает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.
Модель Атрибут id присваивает уникальный идентификатор элемента (который может быть проверен парсером SGML). Например, следующие абзацы отличаются своими значениями id :

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

  • Как селектор таблиц стилей.
  • В качестве целевого якоря для гипертекста ссылки.
  • Как средство ссылки на конкретный элемент из сценария.
  • Как имя объявленного элемента OBJECT .
  • Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

атрибут class , с другой стороны, назначает одно или несколько имен классов элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса могут совместно использоваться несколькими экземплярами элемента. класс атрибут имеет несколько ролей в HTML:

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

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

Переменная объявлена ​​дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках красным:

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}
 

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

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

Предположим, например, что мы пишем документ о программировании язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ... 

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. г. id Атрибут использует то же пространство имен, что и имя атрибут при использовании для имен привязок. Пожалуйста обратитесь к разделу по анкерам с id для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», а другие — «встроенный» (также известный как «уровень текста»). Это различие основано на несколько понятий:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «большие» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, блочные элементы начинаются с новых строк, встроенных элементов. не. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность
По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

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

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

7.5.4 Группирование элементов:

DIV и SPAN элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и Элементы SPAN в сочетании с id и атрибуты класса , предлагают общий механизм для добавления структуры к документы.Эти элементы определяют содержимое как встроенное ( SPAN, ) или блочного уровня ( DIV ), но не накладывать никаких других идиом представления на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы настроить HTML под свои нужды и вкусы.

Предположим, например, что мы хотим сгенерировать документ HTML на основе база данных информации о клиентах. Поскольку HTML не включает элементы, которые идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемого структурного и презентационного эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать информация:



Информация о клиенте: <ТАБЛИЦА> Фамилия: Бойера Имя: Стефан Тел: (212) 555-1212 Электронная почта: sb @ foo.org

Информация о клиенте: <ТАБЛИЦА> Фамилия: Лафон Имя: Ив Тел: (617) 555-1212 Электронная почта: [email protected]

Позже мы можем легко добавить объявления таблиц стилей для точной настройки представление этих записей в базе данных.

Другой пример использования см. В разделе, посвященном class и id атрибуты.

Визуальные пользовательские агенты обычно помещают разрыв строки до и после DIV элементы, например:

aaaaaaaa

bbbbbbbbb
ccccc

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc
 

7.5.5 Заголовки: элементы

h2 , h3 , h4 , h5 , H5 , H6

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент заголовка кратко описывает тему вводимого им раздела.Информация заголовка может использоваться пользовательскими агентами, например, для создания оглавление документа автоматически.

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

В следующем примере показано, как использовать элемент DIV для связывания заголовок с разделом документа, который следует за ним.Это позволит вам определите стиль для раздела (раскрасьте фон, установите шрифт и т. д.) с помощью таблицы стилей.

Лесные слоны

В этом разделе мы обсуждаем малоизвестных лесных слонов. ... этот раздел продолжается ...

Среда обитания

Лесные слоны живут не на деревьях, а среди них. ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ type = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}


 

Нумерованные разделы и ссылки
HTML сам по себе не вызывает номера разделов быть сгенерированным из заголовков. Эта возможность может быть предложена пользовательскими агентами, тем не мение. Скоро языки таблиц стилей, такие как CSS, позволят авторам управлять генерация номеров разделов (удобно для прямых ссылок в печатных документы, как в «См. раздел 7.2 «).

Некоторые люди считают, что пропуск уровней заголовков — это плохо упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4 h2, поскольку уровень заголовка h3 пропускается.

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для предоставления контактной информации. для документа или основной части документа, например формы.Этот элемент часто появляется в начале или в конце документа.

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  
$ Дата: 2018/03/20 02:36:52 $

курс HTML | Структура документа HTML

Курс HTML | Структура HTML-документа

Навигация по курсу

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

), а для вставки изображения необходимо использовать теги img ().
Обычно в HTML есть два типа тегов:

  1. Парные теги : Эти теги бывают парами.То есть у них есть как открывающие (<>), так и закрывающие () теги.
  2. Пустые теги : Эти теги не нужно закрывать.

Ниже приведен пример тега () в HTML, который указывает браузеру выделить текст внутри него жирным шрифтом.


Структура HTML-документа

HTML-документ в основном разделен на две части:

  • HEAD : содержит информацию о HTML-документе.Например, заголовок страницы, версия HTML, метаданные и т. Д.
  • BODY : Содержит все, что вы хотите отобразить на веб-странице.

Структура HTML-документа

Давайте теперь посмотрим на базовую структуру HTML. Это код, который должен иметь каждая веб-страница:

HTML

< html 5 8 5 8 8 головка >

< титул >

>

< корпус >

938 535/ 938 938

0 5 9353 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935 935

Каждая веб-страница должна содержать этот код.Ниже приводится полное объяснение каждого тега, использованного в приведенном выше фрагменте HTML-кода:
: Этот тег используется для указания версии HTML. В настоящее время это говорит о том, что это версия HTML 5.
: Это называется корневым элементом HTML и используется для обертывания всего кода.
: Тег заголовка содержит метаданные, заголовок, CSS страницы и т. Д. Все элементы HTML, которые можно использовать внутри элемента :