Синтаксис языка HTML

Что такое теги и зачем они нужны?

Дескриптор или в разговорном языке тег – это логическая единица языка HTML описывающая элемент веб-страницы. Каждый тег прописан в спецификации и должен обрабатываться браузером, так как это указанно в спецификации. Например тег b (bold) предназначен для выделения текста полужирным начертанием, а тег I (italic) курсивным. Теги могут иметь свойства или, как и говорят в HTML, атрибуты, а атрибуты в свою очередь могут иметь значения. Атрибуты предназначены для указания свойств прописанных с помощью тега элемента. Атрибуты описывают цвет, размер, выравнивание и т.п. Например, атрибут align предназначен для управления выравниванием элемента и может иметь значения left, right, center. У каждого тега есть свои разрешенные к применению атрибуты, а они в свою очередь разрешенные значения.

Рассмотрим пример написания тега p (абзац) с атрибутом align выравнивания и значением center, то есть абзац, выравниваемый по центру.

<p align=’center’>Текст абзаца</p>

Описание элемента начинается с символа «<», что воспринимается браузером, как начало тега. Если мы не укажем символ «<», то браузер воспримет дальнейшее, как текст, а не как элемент разметки веб-страницы. Далее без пробела написан тег, в нашем случае p и через пробел указан его атрибут со значением, написанным в кавычках и через знак равно. Далее идет содержимое тега, которое будет выровнено по центру . И прекращает действие тега p закрывающий тег p, который определяется начальными символами «</». Более подробно о написании тегов и атрибутов вы узнаете в следующих разделах.

Правила написания тегов.

Теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые определяют свойства тега. У тега может быть несколько атрибутов разделенных между собой пробелами. Так же у тега может и не быть атрибутов. У большинства атрибутов есть обязательные значения, которые необходимо использовать вместе с самим атрибутом. Можно сказать, что если теги определяют объекты, то атрибуты определяют свойства этого объекта, а значения атрибутов значение свойств объектов. На рисунке 1.1 показаны правила написания парных и одинарных тегов, а так же атрибутов и их значений.

Парные теги

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

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

Написание тегов

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

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

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

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

Блочные элементы

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

Блочные теги имеют следующие характеристики: по ширине блочные элементы занимают всё допустимое пространство; запрещается вставлять блочный элемент внутрь строчного. Например,<i><p>Заголовок</p></i> не пройдёт валидацию, правильно вложить теги наоборот — <p><i>Заголовок</i></p>; блоки располагаются по вертикали друг под другом; высота блочного элемента вычисляется браузером, исходя из содержимого блока.Строчные элементыСтрочными называются такие элементы, которые являются частью строки. К строчным элементам относятся теги <i>, <a>, <q>, <code> и другие. В основном строчные элементы используются для изменения вида текста.Строчные теги имеют следующие характеристики:

 внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено;высота и ширина не применимы  несколько строчных элементов идущих подряд располагаются на одной строке.Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов.Правила написания атрибутов.Атрибуты предназначены для настройки свойств тегов. Не бывает атрибутов без тегов. Тем не менее, бывают теги без атрибутов. Для правильного использования атрибутов надо знать следующее:

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

  •  Порядок атрибутов в теге не имеет значения.

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

 Значение атрибута должно располагаться внутри кавычек парных или одинарных.

Универсальные атрибуты

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

accesskey — позволяет получить доступ к элементу с помощью заданного сочетания клавиш.

 class — определяет имя класса, которое позволяет связать тег со стилевым оформлением.

  •   dir — задает направление и отображение текста — слева направо или справа налево.

  •   id — указывает имя стилевого идентификатора.

  •   lang — браузер использует значение параметра для правильного отображения некоторых национальных символов.

  •   style — применяется для определения стиля элемента с помощью правил CSS.

  •  tabindex — устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.

 title — описывает содержимое элемента в виде всплывающей подсказки.

Разделы документа HTML

Документы HTML состоят из двух разделов:

  •   заголовка (HEAD) – содержащего установки глобальных параметров Веб- страницы;

  •   основного раздела (BODY) – содержащего текст и элементы страницы, отображаемые в окне обозревателя.

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

    <!DOCTYPE html> <html>
    <head>

    <meta charset=»utf-8″>

    <title>Заголовок сайта</title> </head>

    <body>
    <!—Комментарий в HTML—> Содержимое страницы

    </body> </html>

    Рассмотрим каждый тег в отдельности:

    !DOCTYPE

    Тег !DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).

    В HTML5 используется только один вид объявления документа или «доктайпа», а также по умолчанию определяется «строгий» режим отображения документа. Доктайп HTML5 прост в написании и выглядит следующим образом:

    <!DOCTYPE html>

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

    Первый режим «Строгий» определялся следующим доктайпом для языка HTML:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

и следующим для языка XHTM:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Этот доктайп не поддерживает теги имеющие статус нежелательный к применению (deprecated).

Второй режим «Общий» определялся следующим доктайпом для языка HTML:

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

и следующим для языка XHTM:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»>

Этот доктайп допускал применение тегов со статусом нежелательный к применению.

И третий режим «Переходный» определялся следующим доктайпом для языка HTML:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> и следующим для языка XHTM:

<!DOCTYPE html PUBLIC»-//W3C//DTDXHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

В этом режиме допускалось применение тегов со статусом нежелательный к применению.

Структура !DOCTYPE HTML4

 Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.

 Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML указывается значение PUBLIC.

 Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик

зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML публикует W3C.

  •   Тип — тип описываемого документа. Для HTML значение указывается DTD.

  •   Имя — уникальное имя документа для описания DTD.

  •  Язык — язык, на котором написан текст для описания объекта. Содержит

    две буквы, пишется в верхнем регистре. Для документа HTML указывается английский язык (EN).

URL — адрес документа с DTD.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML. Переходный HTML более «спокойно» относится к некоторым ошибкам кода.

html

Тег html определяет начало HTML-файла, внутри него хранятся все остальные теги. Тег html является тегом, то есть требует закрывающего тега. Атрибут lang определяет язык, который, главным образом, употребляется в документе (ru, fr, de, jp и т.д)

head

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

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

meta

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

Для HTML5:
<meta charset=»utf-8″>
и HTML 4:
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
title
Тег title определяет заголовок веб-страницы и отображается в левом верхнем углу

окна браузера как показано на рисунке 5. Так же тег title отображается в поисковых системах пользователю как показано на рисунке 6.

Рисунок 5 Вид заголовка в браузере Internet Explorer

 <title>Общие представления о языке HTML</title>

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

body

Раздел <body> содержит теги оформляющие страницу, а так же содержащие информацию предназначенную пользователю. Большинство тегов, которые мы изучим на этом курсе будут располагаться внутри раздела body. Атрибуты тега body определяют внешний вид всей веб-страницы.

Атрибуты тега body:

  •   alink — устанавливает цвет активной ссылки.

  •   background — задает фоновый рисунок на веб-странице.

  •   bgcolor — цвет фона веб-страницы.

  •  bgproperties — определяет, прокручивать фон совместно с текстом или нет.

  •   bottommargin — отступ от нижнего края окна браузера до контента.

  •   leftmargin — отступ по горизонтали от левого края окна браузера до контента.

  •   link — цвет ссылок на веб-странице.

  •  rightmargin — отступ от правого края окна браузера до контента.

  •   scroll — устанавливает, отображать полосы прокрутки или нет.

  •   text — цвет текста в документе.

  •   topmargin — отступ от верхнего края окна браузера до контента.

  •   vlink — цвет посещенных ссылок.

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