Структура тега html: Структура html страницы.

Содержание

Структура html страницы.

Урок 4.

Теперь Вы знаете, что такое теги и сейчас самое время разобраться в структуре html страницы. На рисунке ниже изображен html код в котором нет текста, есть только три тега. Это тег &lthtml&gt, &lthead&gt и &ltbody&gt. Все эти три тега должны обязательно закрываться.

Именно эти три тега и составляют структуру html страницы. Они должны обязательно присутствовать в каждом html документе. Это железное правило.

Разберем значение каждого из этих тегов.

Тег &lthtml&gt является контейнером для всего содержимого страницы. Другими словами, весь код страницы находиться между открывающимся &lthtml&gt и закрывающимся &lt/html&gt.

В тег &lthead&gt заключается служебная информация для браузера и поисковых систем. Эта информация никак не отображается браузером на экране монитора. Исключение составляет тег &lttitle&gt &lt/title&gt. О нем мы поговорим в конце этого урока.

Тег &ltbody&gt — это основное тело нашего документа. Все, что находится между тегами &ltbody&gt и &lt/body&gt будет выводиться браузером на экран монитора.

Вся суть структуры html страницы в этом рисунке:

Тег &lttitle&gt

Тег &lttitle&gt закрывающийся, внутри него указывается название страницы. Данный тег является обязательным для каждой страницы. Он должен находиться строго между &lthead&gt и &lt/head&gt.

Давайте вернемся к странице которую мы создавали на 3-ем уроке. В коде между &lttitle&gt и &lt/title&gt написано «Мой первый сайт» это значит, что наша страница имеет название «Мой первый сайт».

Содержимое тега &lttitle&gt отображается на экране, а именно в окне браузера, обратите внимание на рисунок:

В первую очередь содержание данного тега имеет значение для поисковиков (Яндекс, Гугл и др.). Поисковые роботы считывают содержание тега &lttitle&gt для того чтобы понимать о чем ваша страница.

Вы что-то не поняли из этого урока? Спрашивайте!
[email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

Основные теги HTML, структура html страницы

HTML(HyperText Markup Language) – это язык разметки гипертекста. Язык разметки используется для придания структуры интернет-странице, сайту. Язык разметки не несет в себе оформление, а выполняет задачи структурирования. Структура задается с помощью специальных элементов — меток, понятных браузеру. Эти метки называются тегами – от англ. слова tag — именованная метка.

Гипертекст – это документ, разметка которого выполнена с помощью языка HTML. Термин «гипертекст» изначально был введён Тедом Нельсоном для обозначения текста, «который разветвляется сам по себе или выполняет действие по запросу».

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

Рассмотрим структуру простого HTML документа

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
</head>
<body>

</body>
</html>



<!DOCTYPE html>

<html lang=»ru»>

<head>

  <meta charset=»UTF-8″>

  <title>Document</title>

</head>

<body>

  

</body>

</html>

Строка <html> называется тегом. Вообще, все, что заключено в символы <> называется тегом. Данные символы — служебные в языке HTML. Теги бывают двух видов:

  • Парные — данные теги имеют открывающийся и закрывающийся тег. Закрывающийся тег содержит знак наклонной черты. Между данными тегами вписывается содержимое тега. Содержимым тега может быть как обычный текст, так и другие, вложенные теги. Примеры парных тегов: <html></html>
  • Непарные — теги, которые не закрываются. Пример: <br>

Теги можно писать большими и малыми буквами, поскольку HTML не различает написание. Закрывать парные теги нужно всегда!

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

Рассмотрим структуру HTML документа:

  • <!DOCTYPE html> — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5.
  • <HTML></HTML> — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
  • <head></head> -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
  • <body></body> — все что отображается на странице, пишется в теге body.

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

charset=»UTF-8″ — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.

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

Вопросы для самоконтроля

  1. Что такое гипертекст?
  2. В чем состоит необходимость использования HTML?
  3. Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
  4. Какие виды атрибутов вам известны?
  5. Что такое теги? Чем они отличаются от атрибутов?
  6. Какие теги обязательно должна содержать HTML страница?

Текст урока разработан совместно с Каменщик М.

Понятие тега HTML

Тег (мн. теги, иногда тэг) — это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки <>, например, тег <p></p> сокращение от английского слова paragraph, то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.

Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег <p></p> и тег <P></P> — это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса.

Классификация тегов

Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня <h2>…</h2>. В таких случаях используются парные теги: открывающий и закрывающий. Открывающий тег (например, <h2>) создает эффект, а закрывающий (</h2>) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/) — прямой слеш. Такие теги называют парные.

Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы <HR> или тег отображения картинки <img>. Такие теги не имеют закрывающих тегов. Такие теги называют не парные.

Типы тегов

Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:

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

Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков <ol> и <ul> относятся и к спискам, и к блочным элементам.

Структура тегов

При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.

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

Давайте посмотрим на правильную структуру тегов содержащих атрибуты:

  1.  <img src=»logo.jpg»>
  2. <a href=»samsebewebmaster.ru»>Сам Себе Вебмастер</a>

Для примера я привел два совершенно разных тега. Первый <img> одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg». Второй  <a>…</a> парный отвечает за создание ссылок, атрибут — href=»samsebewebmaster.ru».

Вывод 1: Атрибуты могут иметь парные и непарные теги.

Вывод 2: Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.

Картинка для разъяснения:

Рисунок 1. Cтрутура тега html

 

Задача на внимательность и знание синтаксиса HTML

Давайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке Введение в HTML:

1
2
 
Простейшая HTML страница


Простейшая HTML страница

Тескт веб-страницы.

Задание: Проанализируйте и найдите две ошибки в коде использованного примера.

На этом урок закончен. Теперь вы знаете такое понятие, как Тег языка HTML.

[Всего голосов: 1    Средний: 2/5]

Читайте также:

Структура HTML-документа | bookhtml.ru

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

Открываем блокнот и пишем первую строку документа:

<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>

В этой строке идет указание версии языка html на которой пишется html-документ. В данном случае версия 4.01.

Следующие — это два корневых тега <html> и </html> именно они указывают, что все, что лежит внутри этих тегов и является html-кодом. А что же такое тег? Это и есть ячейка (элемент) языка html из которых мы и делаем разметку всего документа. Тег всегда заключается в угловые скобки < и >. Теги бывают парные и непарные. В данном случае мы видим парный тег. <html> — открывающий, </html> — закрывающий тег. Непарный тег — это тег одинарный: только открывающий.

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

<title>заголовок документа (web-страницы)</title>

Следующий тег в голове документа — тег кодировки:

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

Это кодировка текста на русском языке. И еще мы видим пример непарного (одинарного) тега.

Не последнее место в структуре html-документа занимает служебный тег мета тег «Keywords»:

<meta name=»Keywords» content=»Ключевые слова»>

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

Далее в структуре html-документа идет служебный тег мета «Description»:

<meta name=»Description» content=»Описание страницы»>

Это так же тег для поисковиков. В него вписываем краткое описание вашей страницы (о чем ее содержание).

EndSeo.ru — влияние description на продвижение сайта в поисковых системах.

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

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

Body с английского — это тело, так-что все прописанное в этом теге есть тело html-документа в котором будет содержаться вся информация, которую увидит пользователь, зашедший на вашу web-страницу.

Давайте теперь просмотрим целиком структуру html-документа, которую мы записали в блокноте:

<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>

<html>

<head>

<title>заголовок документа (web-страницы)</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<meta name=»Keywords» content=»Ключевые слова»>

<meta name=»Description» content=»Описание страницы»>

</head>

<body>

 

</body>

</html>

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

После того, как вы прописали в блокноте этот html-код, давайте сохраним этот файл в ту папку, которую мы создали для этой цели. Не забудьте при этом дать имя файлу (например: index) и сменить расширение txt на html, что бы операционная система знала, что это html-файл, а не обычный текстовый. Тип файла — все файлы.

Откроем созданный нами файл браузером. Как видим — страница пуста. Это потому, что тег <body> ни чем не наполнен. Так давайте же займемся наполнением нашей web-странички.

Добавим в тело нашей страницы два абзаца, применив при этом парный тег <p>. Там где абзац начинается ставим открывающий тег <p>, где абзац заканчивается ставим закрывающий тег </p>.

Пример:

<p>Первый абзац</p>

<p>Второй абзац</p>

Добавьте эти два абзаца (можно вставить свой текст) в html-файл и просмотрите в браузере результат.

Как открыть html-файл в браузере можно узнать в следующем уроке.

Практика. HTML. Основы гипертекстовой разметки¶

Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов. Подробные описание возможностей различных версий HTML (на уровне стандартов) всегда доступны на сайте http://www.w3.org.

<тег [атрибут=”значение” [атрибут=”значение” […]]]>содержимое</тег>

Типовая структура непарного (одиночного) тега:

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

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

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

Мета-теги

Основное предназначение мета-тегов (<meta … />), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

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

В документе может находится любое количество тегов <meta>. Все они размещаются в блоке <head>…</head>.

Рассмотрим некоторые, часто используемые мета-теги:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

<meta http-equiv="Refresh" content="N; url=http://example.org/">

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .

<meta name="author" content="Имя автора страницы">

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

<meta name="keywords" content="список, ключевых, слов">

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

<meta name="description" content="Сюда вписывается краткое описание страницы">

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

<meta name="robots" content="index,all">

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано “noindex”).

Создание HTML страницы, структура HTML страницы | Введение в HTML

Для того, чтобы создать HTML документ, достаточно сделать следующие вещи:

Выбор текстового редактора

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

Прейти на сайт Brackets.io

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

Создание каркаса HTML страницы

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

Создаем новый документ в текстовом редакторе (пока не сохраняем).

Напишите, или скопируйте данный код.

<!DOCTYPE html>
<html>

<head>
  <!-- Здесь размещены служебные теги для HTML страницы. -->
  <meta charset=”utf-8”>
  <title>Название страницы</title>
</head>

<body>
   <!-- В этой части размещается видимый контент страницы. -->
</body>

</html>

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

Указание версии HTML с помощью инструкции Doctype

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

Дело в том, что существуют различные версии языка HTML. На данный момент используется версия HTML5. И по этому инструкция DOCTYPE выглядит таким образом

<!DOCTYPE html>

Что нам дает эта инструкция – она позволяет нам использовать все нововведения (теги и атрибуты) языка разметки HTML5. При этом устаревшие теги, нам в этой версии уже будут недоступны. Если же мы хотим использовать старые версии, к примеру, HTML4.01 Transitional, то тогда наша строка DOCTYPE выглядела бы следующим образом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

Тег <html>

Данный тег служит в роле контейнера, который связывает не видимую часть страницы <head> и контент самой страницы <body>

Тег <head>

Содержимое тега <head> не отображается на странице браузера (кроме title), он выполняет роль контейнера, в который можно поместить такие вещи как: таблицы стилей(CSS), клиентские скрипты, название страницы title, указать кодировку страницы, meta теги и другую важную для роботов информацию о HTML странице.

Тег <body>

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

Тег  <title>

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

 

Указание кодировки HTML страницы

Используемый в шаблоне meta тег charset отвечает за кодировку, которая была использована на данной HTML странице

Учебник по HTML

На
сайт Информатика в школе     •    К
оглавлению учебника


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

Терминология

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

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

Пример: элемент, содержащий некоторый текст, ограничен
начальным тегом (маркером) <P> и
конечным тегом (маркером) </p>. Т.е.
текст помещен между тегами как в контейнер. Здесь же можно увидеть,
как осуществляется возможность вложения элементов. Тег <Font>
вложен внутрь тега <P>, поэтому конечный тег </font> стоит
перед </p>. В данном примере тег <P> указывает на то, что
текст является отдельным абзацем, а тег <Font> задает формат шрифта,
в нашем случае зеленый цвет шрифта.

<P> <font color=»green»>Этот
текст будет расположен в отдельном абзаце и выполнен зеленым цветом
шрифта.</font> </p>

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

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

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

<P align=»center»>
Этот текст будет выровнен по центру экрана </p>

В данном примере атрибут align (выравнивание) расположен
внутри тега <P>, следовательно он задает выравнивание этого абзаца.
Значение атрибута равно «center», т.е. выравнивание абзаца
будет по центру экрана. На экране мы увидим:

Этот текст будет выровнен по центру экрана.

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

Ниже приведена структура типичного Web-документа.

<HTML> Этот тег указывает на начало HTML-документа
<HEAD> Этот тег указывает на начало области заголовка Web-страницы.
Служит для формирования обей структуры документа.
<TITLE>Структура Web-страницы</title> Элемент для размещения заголовка Web-страницы. Строка
отображается в заголовке окна броузера.
<META http-equiv=»Content-Type» content=»text/html;
charset=windows-1251″>
Этот тег несет служебную информацию и не отображается
в экране броузера. В данном случае идет речь о кодировке Web-странички.
Вам достаточно лишь каждый раз вставлять этот тег в таком виде на
свою страничку. Тогда ваша страничка будет использовать кодировку
windows-1251, наиболее распространенную на сегодняшний день.
<META name=»Author» content=»Ivanov
Ivan»>
Имя автора Web-страницы.
<META name=»Keywords» content=»WWW,
HTML, docoment, страничка, структура»>
Набор ключевых слов для поиска. Раньше этими словами
пользовались поисковые машины, для отбора сайтов по тематике запроса.
Сегодня эти слова поисковыми машинами практически не используются,
однако полезно вставить этот тег на свою страничку и указать в нем
ключевые слова, отражающие содержание вашего сайта.
</head> Конец области заголовка Web-страницы.
<BODY bgcolor=»blue»> Начало собственно содержимого Web-страницы. Тег <BODY
включает в себя атрибут bgcolor, который задает цвет вашей страницы.
В данном случае голубой. Если не использовать этот атрибут, то по
умолчанию, цвет страницы будет белым.
<h3> Здесь расположен заголовок вашей странички
</h3>
<h3> </h3> Элемент заголовка
<P> Здесь расположен текст первого абзаца вашей
странички</p>
<P> </p> Элемент абзаца.
<P> Здесь расположен текст второго абзаца вашей
странички</p>
</body> Конец содержимого Web-страницы.
</html> Конец HTML-документа.
 

Правила синтаксиса

1. Взаимное расположение элементов HTML, HEAD, TITLE,
BODY должно быть стандартным на любой странице.

<HTML>

<HEAD>

<TITLE>…..</title>

</head>

<BODY>

………………

</body>

</html>

2. Всегда использовать конечные теги (не забывать </p>,
</h2>, </table> и др.).

3. Не нарушать правила вложения тегов.

Правильно: <h2>Заголовок крупный <h3> Заголовок
поменьше </h3> </h2>

Не правильно:<h2>Заголовок крупный <h3> Заголовок
поменьше </h2> </h3>

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

5. Все атрибуты располагаются в начальном теге.

6. Принято начальные теги писать ЗАГЛАВНЫМИ буквами (<h2>),
а конечные строчными буквами (</h2>).

Задания для выполнения:

1. Откройте текстовый редактор «Блокнот».

2. Наберите в нем структуру HTML-документа, которая представлена
вам в таблице этого урока (левый столбец таблицы).

3. Сохраните файл в своей папке, присвоив ему имя page1.htm

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

5. Закройте броузер.

6. Вернитесь к сохраненному файлу в «Блокноте».

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

8. В строке <TITLE> укажите: «Домашняя страничка
(ваше имя и фамилия).

9. Сохраните файл как page2.htm.

10. Просмотрите результат в броузере, при необходимости
отредактируйте файл при помощи «Блокнота».

Глобальная структура документа 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-Equ
для создания заголовка в стиле [RFC822] в
ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для
подробности о допустимых заголовках HTTP.

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


 

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

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

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

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


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

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

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

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

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

 

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

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


META
и PICS

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

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

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

 


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


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

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


 
Профили метаданных

Модель
Атрибут profile
заголовка HEAD определяет расположение профиля метаданных.Стоимость
Атрибут профиля
— это URI. Пользовательские агенты могут использовать этот URI в двух
способы:

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

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

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

В процессе написания данной спецификации обычной практикой является использование
форматы даты, описанные в [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
элементы, например:

aaaaaaaaa

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-Equ
для создания заголовка в стиле [RFC822] в
ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для
подробности о допустимых заголовках HTTP.

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


 

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

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

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

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


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

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

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

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

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

 

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

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


META
и PICS

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

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

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

 


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


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

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


 
Профили метаданных

Модель
Атрибут profile
заголовка HEAD определяет расположение профиля метаданных.Стоимость
Атрибут профиля
— это URI. Пользовательские агенты могут использовать этот URI в двух
способы:

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

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

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

В процессе написания данной спецификации обычной практикой является использование
форматы даты, описанные в [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
элементы, например:

aaaaaaaaa

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-Equ
для создания заголовка в стиле [RFC822] в
ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для
подробности о допустимых заголовках HTTP.

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


 

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

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

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

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


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

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

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

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

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

 

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

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


META
и PICS

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

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

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

 


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


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

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


 
Профили метаданных

Модель
Атрибут profile
заголовка HEAD определяет расположение профиля метаданных.Стоимость
Атрибут профиля
— это URI. Пользовательские агенты могут использовать этот URI в двух
способы:

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

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

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

В процессе написания данной спецификации обычной практикой является использование
форматы даты, описанные в [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
элементы, например:

aaaaaaaaa

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 $

Essential HTML Tags — Простое руководство по HTML

Существует четыре набора тегов HTML, которые необходимы для формирования базовой структуры каждого файла HTML:

Определение —
Это в основном определяет документ как веб-страницу.Он также определяет начало и конец HTML-документа. Все остальные теги должны находиться между тегами html .
Заголовок —
Заголовок содержит информацию о документе, которая не будет отображаться на реальной странице, такую ​​как заголовок документа, автор, какую таблицу стилей использовать, а также метатеги.
Заголовок —
Тег title определяет заголовок, который будет отображаться в строке заголовка вашего веб-браузера.Заголовок должен находиться между тегами head .
Кузов —
Тег body содержит всю информацию и другое видимое содержимое на странице. Все ваши изображения, ссылки и простой текст должны находиться между тегами и .

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

Пример:

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

  
 
   Заголовок моей страницы 
 
 

  Вот куда идет весь контент моей веб-страницы!

 

  

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

HTML для детей Глава 3 Базовая структура HTML: четыре основных тега

HTML-структура.

Все документы HTML разделены на две основные части: заголовок и тело. Когда вы начинаете любую новую страницу, она должна иметь объявление: . Он сообщает или объявляет браузеру, что следующий файл является файлом HTML.

Для создания любой веб-страницы вам понадобятся четыре основных тега: , , и <body>.Все это теги-контейнеры, и они должны отображаться в виде пар с началом и концом. </p> <p> Вот схема, показывающая две основные части и основные теги. </p> </p> <p> <html>… </html> </p> <p> Каждый документ HTML начинается и заканчивается тегом <html>. Это сообщает браузеру, что следующий документ является файлом HTML. Помните, что теги сообщают браузерам, как отображать информацию. </p> <h3> </h3> <p><head>… </head> </h3> <p> Тег <head> содержит заголовок документа вместе с общей информацией о файле, такой как автор, авторские права, ключевые слова и / или описание того, что появляется на странице.</p> <h3> </h3> <p><title>…

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

Основное содержимое вашей страницы помещается в теги body: текст, изображения, ссылки, таблицы и так далее.

Вложенность

Часть структуры веб-страницы называется вложенностью.Обратите внимание на то, что тег вложен внутри тега <head>, а <head> и <body> вложены внутри <html>. </p> <p> Каждый новый набор тегов вкладывается в другие теги, как в матрешках матрешках. Подумайте об этом по-другому, как о небольших коробках внутри больших коробок. </p> <p> Хорошая работа. Вы готовы создать свою первую страницу? Тогда вперед! </p> <p> Глава 4. Ваша первая веб-страница </p> <p> Заявление о конфиденциальности <br /> Learning HTML for Kids <br /> © 1999- <wbr> 2015 by Jill Jeffers Goodell </wbr> </p> <p> Содержание </p> <h2><span class="ez-toc-section" id="%D0%AD%D1%82%D0%BE_%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE_%D0%B4%D0%BB%D1%8F_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86_%D0%B8_%D0%BF%D0%B5%D1%80%D0%B2%D0%B8%D1%87%D0%BD%D1%8B%D1%85_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2"></span> Это хорошо для заголовков страниц и первичных заголовков <span class="ez-toc-section-end"></span></h2> <p> HTML-тегов</p> <p> </p> <h4><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%B3%D0%B8_%D0%B4%D0%BB%D1%8F_%D1%84%D1%83%D0%BD%D0%B4%D0%B0%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%A2%D0%B5%D0%B3%D0%B8_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%A1%D0%BF%D0%B8%D1%81%D0%BA%D0%B8_%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Теги для фундамента | Теги документов | Списки | Ссылки <span class="ez-toc-section-end"></span></h4> <p> Как я уже упоминал, HTML — это не что иное, как серия кодов.<br /> содержащиеся в символах.Любой пользователь UVa, создавший домашнюю страницу<br /> через систему UMenu заметите, что файл <b> home.html </b> разбросан с<br /> закодированный текст. Эти термины называются тегами <b>, </b> и каждый из них содержит информацию<br /> который браузер читает, чтобы определить структуру и макет HTML-документа. В<br /> символы и термины в них читаются как код и не появляются на<br /> графическое отображение страницы. Любой, кто использует Netscape, может узнать, как была создана страница, с помощью панели инструментов.<br /> который растягивается в верхней части экрана.Щелкнув на опции «Просмотр», а затем на «По документу»<br /> Источник », Netscape отобразит исходный HTML-код просматриваемого документа. Попробуйте это на этой странице. Вы даже можете<br /> сохраните эту информацию, выделив ее, скопировав в буфер обмена, а затем вставив в пустой документ, который вы<br /> можете редактировать и адаптировать для собственного использования. Если вы занимаетесь серфингом и не можете понять<br /> как кто-то сделал свою страницу, просто используйте функцию просмотра исходного кода. </p> <p> HTML — не сложный компьютерный язык; это легко понять и даже<br /> проще в использовании.Уловка, лежащая в основе освоения HTML, заключается в понимании того, что его теги должны<br /> располагаться в определенном порядке и с точным синтаксисом для правильной работы. Это прощающий<br /> средний, но как официальные представители HTML в ЦЕРНе, институте, создавшем<br /> World Wide Web, продолжаем совершенствовать и расширять свойства этого языка, эффективное программирование<br /> требует более внимательного отношения к деталям. Лучший способ не отставать от HTML<br /> Разработка заключается в том, чтобы понять структуру языка и придерживаться ее при написании документов.Таким образом вы сможете создать документ, сохраняющий единообразный вид.<br /> о разнообразии программного обеспечения для просмотра веб-страниц, доступного в настоящее время. </p> <p> В этом разделе вы узнаете об основных тегах HTML и о том, как они работают в<br /> документ. По возможности, мы будем включать несколько тегов, поддерживаемых Netscape.<br /> браузер, чтобы вы могли максимально повлиять на ваш документ<br /> доступен популярный веб-браузер — также тот, который в настоящее время используется в UVa.</p> <h3><span class="ez-toc-section" id="%D0%A7%D0%B5%D1%82%D1%8B%D1%80%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D1%85_%D1%82%D0%B5%D0%B3%D0%B0"></span> Четыре основных тега <span class="ez-toc-section-end"></span></h3> <p> Все документы HTML содержат четыре основных структурных тега, которые определяют макет.<br /> страницы. Это теги <b> <html>, <head>, <title> и <body>. </b> </p> <dl> <dt> Тег <b> <html> </b>: </dt> <dd> Определяет документ как документ на языке гипертекстовой разметки и всегда отображается<br /> в начале любой HTML-страницы. </dd> <dt> Тег <b> <head> </b>: </dt> <dd> Определяет строку заголовка страницы, отображаемую в браузере.Заголовок<br /> верхняя панель окна отображения, где отображается имя документа. </dd> <dt> Тег <b> <title> </b>: </dt> <dd> Определяет заголовок страницы, как он будет отображаться в строке заголовка. Тег заголовка<br /> должен содержаться в теге. </dd> <dt> Тег <b> <body> </b>: </dt> <dd> Определяет тело документа. Весь текст, гиперссылки, изображения и любые материалы<br /> которые являются частью информации, которую вы помещаете в свой веб-документ, являются частью тела.У тела есть много других атрибутов, которые мы вскоре обсудим, но его основная функция<br /> означает сообщить браузеру, что вся информация, следующая за тегом, предназначена для<br /> быть представленным в сети. </dd> </dl> <h4><span class="ez-toc-section" id="%D0%9F%D0%A0%D0%98%D0%9C%D0%95%D0%A0_1"></span> ПРИМЕР 1 <span class="ez-toc-section-end"></span></h4> <p> Если мы создадим веб-страницу, используя только четыре структурных тега, мы вообще ничего не увидим.<br /> Во-первых, после тега body у нас нет информации для представления, а во-вторых, эти четыре структурных тега, например<br /> многие другие в HTML работают парами.Когда мы объявляем в начале нашего документа<br /> что это страница <b> <html> </b>, мы также должны указать браузеру, когда прекратить ее чтение<br /> как HTML. Для этого мы используем тег <b> </html> </b>, где косая черта означает «закрыть».<br /> Точно так же мы должны сообщить браузеру, когда мы закончили с заголовком и информацией о заголовке, используя<br /> теги <b> и . И когда весь документ будет готов, мы
должен сообщить браузеру, что основная информация завершена, путем вставки в конце страницы.Эти теги работают не только парами, но и вложены друг в друга в том порядке, в котором они должны быть.
выполнен. и идут первым и последним соответственно, и в этих тегах по порядку будут
теги , , , , , и с информацией, которую вы хотите отобразить
попадает в соответствующую пару тегов:


Пример 1

Это Пример 1

Щелкните здесь, чтобы просмотреть этот пример.
Вернуться к началу страницы

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

Довольно скучная страница, не правда ли? Тем не менее, вы только что познакомились с основами HTML.
в действии. Однако ни одна веб-страница никогда не бывает завершенной или высеченной на камне, и это одна из
лучшие черты этой среды. Если вы передумаете или изучите новые навыки, вы
как включить их в свою страницу, это так же просто, как подключить их к существующему документу. Давайте продвинемся вперед в развитии нашего примера страницы, посмотрев
в нескольких тегах тела, которые могут начать его преобразовывать.Для этого начните создавать свою собственную страницу с помощью следующих примеров.
в этой мастерской. Я приведу примеры, используя каждого друга Джона Доу, чтобы
мягкая, но функциональная страница, за которой вы должны следить, но вставьте в эти примеры свою собственную информацию (и, надеюсь, свое собственное чувство стиля и размах). К тому времени
вы завершили следующие три раздела, вы должны не только хорошо разбираться в Интернете, но и
прекрасная домашняя страница, которую можно показать.

Первые три тега, которые вам нужно знать, — это теги разрыва строки

,
,
и


.
Эти теги являются частью функций HTML, известных как autowrapping и autoflowing .
Autowrapping описывает способность HTML «обернуть» текст так, чтобы он
соответствовать экрану компьютера, отображающему его. Веб-браузер оборачивает все, что не соответствует текущему
строку и помещает ее на следующую строку. Например, абзац, состоящий из шести строк
long на окне монитора шириной восемь дюймов перематывается примерно до двенадцати строк на четырехдюймовом окне. Autoflowing относится к тому, как браузер «передает»
содержимое абзаца вместе слева направо и сверху вниз с учетом
текущее окно или размер отображения. Любые разрывы строк, которые вы используете при написании текста, не имеют отношения к браузеру — если только
вы используете HTML-код, чтобы их сломать.

Тег

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

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

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

Тег


или горизонтальная линейка (иногда называемая жестким возвратом) используется для
отображать возврат в виде одной строки в браузере. Этот тег удобен, когда вы
очерчивают разделы вашей страницы или пытаются разделить два элемента информации
визуально.Это очень простой способ добавить немного интереса к обычному документу. Netscape поддерживает небольшое улучшение горизонтальной линейки, позволяя
вы можете указать, насколько широкая полоса и как далеко она растягивается на странице.
Эти спецификации называются атрибутами , и они есть во многих тегах HTML. Атрибут размера
определяет вертикальную ширину полосы, а атрибут ширины описывает
длина по горизонтали, или процента от общей ширины экрана, занимаемое
возле бара.Размер представлен значениями от 1 до 7, а ширина в процентах от 1 до 99. Если, например, вам нужна линия
который был размером 4 и шириной 50%, вы могли бы сформулировать команду так:


Тег


не требует закрывающего тега — он стоит
сам по себе и не может содержать никакой информации, кроме атрибутов размера и ширины. Я использовал именно этот


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


Теги заголовка

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

Это

, что дает отличный размер подзаголовка

Это

Это

Это

Это

Как правило, используйте эти заголовки последовательно, чтобы добавить структуру и интерес.
к вашему документу.Уровни заголовков следует использовать с приращением или уменьшением одного размера при совместном использовании.
в документе. Другими словами, используя h2 в качестве заголовка вашей страницы, за которым следует h3 с
ваше имя и адрес электронной почты, а затем h4 в качестве заголовка содержимого вашей страницы — это удачное использование заголовков. С использованием
все шесть на одной странице без очевидной логики их использования и расположения, вероятно,
считаться плохим стилем. Заголовки хороши для конспектов, эссе и оглавлений.


Текстовые теги

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

Полужирный текст: текст
Курсив: текст
Текст пишущей машинки: текст
Разметка цитирования: текст

Текст цитаты удобен для цитат
и абзацы, которые вы размещаете рядом с
изображения в документе.Код для этого —

текст

.

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

.
Центрирование пока не является официальной командой HTML, но Netscape поддерживает ее.
Код представляет собой

текст
.

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

ПРИМЕР 2


Пример 2

Джон Ф. Доу


Добро пожаловать на мою домашнюю страницу.Эта страница — только начало того, что скоро будет
сайт knock ’em dead. Этот сайт будет постоянно В РАЗРАБОТКЕ , поэтому, пожалуйста
зайдите и ознакомьтесь с последними разработками.

Содержание


 
Резюме 

Портфолио

Личное

Веб-ссылки


Поддерживается Джоном Ф.Doe

Последнее обновление: 20 февраля 1996 г.,



Посмотреть этот пример
Вернуться к началу страницы

Списки

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

Об упорядоченном списке сообщает команда

    элементов списка, каждому из которых предшествует

  1. , и все
    список закрывается командой

. Каждый отдельный элемент списка будет обозначен номером, как показано ниже:

  1. Это
  2. заказанный
  3. список

, который затем отображается как

  1. Это
  2. заказанный
  3. список

Неупорядоченный список работает точно так же, за исключением замены чисел
пулями.Команда неупорядоченного списка — это

    , элементов списка, каждый из которых снова помечен

  • , затем закрывается командой

.
Выглядит это так:

  • Это
  • неупорядоченный
  • список

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

; введение термина, который вы хотите
для определения или объяснения, или определение термина ,

термина

; и, наконец, команда для определения с отступом или описания данных,

определение

. Завершенный список затем закрывается командой

.

Срок X

Определение термина X

Срок Y

Определение срока Y

Срок Z

Определение термина Z

Что выглядит как:

Срок X
Определение термина X
Срок Y
Определение термина Y
Срок Z
Определение термина Z

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

Связывание

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

Внешнее соединение

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

Этот тег известен как тег привязки и является ключевой командой для создания ссылок. HREF или
гипертекстовая ссылка может быть другим веб-сайтом, документом или изображением в вашем собственном файле public_html или даже другим
разместить на той же странице. Например, когда вы нажимали на вариант вверху этой страницы, команда HREF показывала вам
в один из этих разделов тегов. Обычно тег привязки включает слово, фразу или изображение.
который будет служить ссылкой, но может содержать столько текста, сколько вы считаете нужным.Структура тега проста.
Начальная буква A в теге означает, что ниже приведены инструкции для ссылки на другое место, закрепленное тегами A и / A.
HREF объявляет веб-адрес, который должен находиться между кавычками. Адрес, если это другой сайт, например,
страница поиска Yahoo будет выглядеть так:

поисковая система Yahoo

Если веб-адрес находится за пределами ваших собственных файлов, адрес должен начинаться с правильного протокола, которым в данном случае является http .Если бы вы делали ссылку на одну из других частей Интернета, такую ​​как группы новостей или архивы документов Gopher, вы бы
начинайте адрес со своих протоколов «news:» и «ftp: //» соответственно. Если адрес просто
другая страница в ваших собственных файлах, например «resume.html», браузер предполагает, что этот файл находится на вашем сервере и в вашем
учетная запись. Ссылку можно было бы написать так:

Продолжить

Тег «Mailto» Netscape

Еще одна функция HREF на самом деле является расширением Netscape, называемым тегом mailto , используемым для выделения
ваше имя или конкретная строка текста в качестве почтового тега.Пользователь может щелкнуть этот текст и, если Netscape Mail
Настройки были настроены (в разделе «Параметры» на панели инструментов), откроется почтовый ящик, уже адресованный вам. Эта функция позволяет людям
чтобы отвечать на вашу страницу или делать комментарии и предложения, пока они находятся на вашем сайте. Это настолько полезно, что почти
требование для хорошей веб-страницы. Команда работает так же, как и любая команда HREF, но вам нужен тег mailto: , за которым следует ваш адрес электронной почты:
Ваше имя, название компании или другой текст здесь

Внутреннее связывание

Для связывания на одной странице требуется несколько дополнительных команд. Как и в случае с внешними ссылками,
вам нужно установить тег привязки вокруг вашей ссылки. Однако ваша целевая страница — это та же страница, на которой появляется ссылка. Поэтому, если у вас есть страница с именем «links.html», которая является страницей
ваших любимых интернет-сайтов и ресурсов, разделенных по категориям. Вверху страницы вы хотите перечислить категории и разрешить
пользователи могут ссылаться непосредственно на категорию без прокрутки страницы.Чтобы установить эти ссылки, вам необходимо знать другую команду, называемую командой NAME. Команда NAME позволяет вам, ну, назвать место на странице.
вы хотите, чтобы люди переходили по ссылке. Если на нашей странице links.html мы разделим категории
в Page Building, Cultural Sites и Fun Sites, то мы должны назвать каждое из этих мест на странице.

Лучше всего дать каждому месту свое собственное имя в заголовке каждой категории на странице.Когда мы набираем заголовок «Создание страницы», мы также должны вставить вокруг него команду NAME. Назовем эту категорию «страница». Введем имя так:

Создание страницы

Мы можем сделать то же самое с сайтами культуры, которые мы назовем «культурой», и сайтами развлечений, которые мы назовем «развлечением». Теперь у нас есть
все наши категории названы, нам нужно правильно назвать ссылку, чтобы она приводила людей в нужное место на странице.В вашей команде HREF вам нужно указать браузеру страницу, которую он должен найти — он не предполагает автоматически, что
ссылку можно найти на текущей странице. Следовательно, мы должны указать ему искать на странице «links.html» элемент с именем «page». Как мы это формулируем
в HTML выглядит так:

Создание страницы

Эта команда сообщит браузеру, на какой странице искать местоположение , которое называется (#) «страницей.»
Возможно, вы заметили, что я разместил на этой странице ссылки «Вернуться к началу страницы». Это работает точно так же. Я назвал
список содержимого страницы (под красным изображением вверху) «вверху» и просто использовал его в команде NAME. Когда я
ссылку на верхнюю часть страницы, я только что сделал свой HREF = «html3.html # top», что позволяет вам перемещаться туда, куда вам нужно, на странице, имея
доступ к этому списку навигации.

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

МИССИЯ 1

Вы готовы проверить все эти знания!

Предложение по заданию на курс
Вернуться к началу страницы



При поддержке Группы американских исследований в UVA © 1996
Поддерживает Джошуа Джонс

структурных элементов HTML5

структурных элементов HTML5

Вернуться на страницу 3 недели »

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

Кузов

Элемент body содержит все содержимое нашего документа.

Обычно охватывает все, кроме мета-элемента и его подэлементов.

Основная

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

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

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

  


   
    Рецепт чили 


   

Книга рецептов

<основной>

Рецепт чили

Инструкции ...