Правила записи тегов
1. Если имеет место вложение одних кавычек в другие, в качестве внутренних кавычек рекомендуют использовать одинарные.
<тег имя_атрибута ="значение1;'значение2'…">
Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:
– записываемых только строчными или заглавными символами латинского алфавита и не включающих иных символов, например цифр;
– состоящих только из цифр от 0 до 9;
– обозначающих промежутки времени.
ALIGN="center"
Данный атрибут (ALIGN) задает выравнивание по центру (center).
2. Теги могут записываться строчными и заглавными буквами. Однако для лучшего чтения кода рекомендуется их записывать заглавными буквами.
Единственным исключением из этого правила будут два элемента HTML, небезразличных к регистру. Это адрес URL и escape-последова-тельности.
3. Когда в тексте документа возникает необходимость в символах, которые являются частью команд разметки гипертекста, то используют так называемые escape-последовательности. Ниже приведены символы и соответствующие им escape-последовательности:
> – &et;
< – >
“ – "
& – &
c – ©.
4. Применение форматирования текста с клавиатуры, включающее в себя пробелы, отступы, перевод строки, игнорируется браузером при
интеграции HTML-документа. Исключением из этого правила может служить текст, помеченный специальным тегом <PRE>текст</PRE>.
Все, что расположено внутри этого тега, отобразится внутри браузера с сохранением всех введенных пробелов, переводов строки и отступов табуляциями. Внутри данного тега запрещено использование других тегов форматирования текста.
5. Код HTML-документа может содержать комментарии. Комментарии не обрабатываются интерпретаторами браузеров и не отображаются на экране. Запись комментариев осуществляется следующим образом:
<!--текст комментария-->
Итак, мы рассмотрели общую структуру документа, правила записи HTML-кода и способы его просмотра в браузере. Остановимся подробнее на назначении каждого раздела, который участвует в формировании HTML-страницы.
Весь документ HTML можно разбить на три части:
1) строка, представленная тегом <!DOCTYPE>, которая содержит информацию для браузера о версии HTML;
2) заголовочная часть, открываемая тегом <HЕAD>. Это декларативная часть, в которой содержится название документа, а также могут располагаться служебная информация для серверов, описание сценариев и пр.;
3) тело документа, представленное тегом <BODY> или <FRAMESET>.
Информация о версии HTML . Информация о версии HTML содержится в теге <!DOCTYPE>, открывающем HTML-документ. Содержимое этого тега на экране не отображается. Этот тег вынесен за пределы контейнера HTML, поскольку стандарт HTML не предусматривает отдельных элементов для описания используемой версии HTML. Тег <!DOCTYPE> заимствован из набора средств обобщенного языка SGML и определяет тип документа. Язык SGML использует стандарт DTD (Document Type Definition – определение типа документа), который задает синтаксис элементов и атрибутов. Существует несколько версий стандарта DTD, которые отличаются друг от друга набором элементов и синтаксисом. Мы рассмотрим самую популярную версию, в которой использована модификация Transitional стандарта HTML 4.01 DTD, поэтому строка написания данного тега будет выглядеть следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C// HTML 4.01 Transitional // EN">
Данный тег объявляет, что ваш документ соответствует спецификации Transitional стандарта HTML 4.01 DTD, которая рекомендована консорциумом W3C. Последние две буквы EN обозначают использование английского языка для документов HTML.
Для обозначения границ HTML-документа используется парный тег. Начальный тег <HTML>, не имеющий атрибутов, располагается в самом начале HTML-файла, а конечный тег </HTML> является последним и обозначает окончание всего документа. Таким образом, элемент HTML является самым внешним и не входит в состав других элементов.
Заголовочная часть документа. В состав контейнера HTML входят два структурных элемента: HEAD (элемент заголовка) и BODY (основная часть, или тело, документа).
Раздел HEAD выполняет функцию рабочего заголовка, размещается сразу после тега <HTML> и предшествует основной части web-страницы. Тег <HEAD> не отображается при просмотре web-страницы, он предоставляет браузеру общую информацию о HTML-файле. Теги, указанные внутри раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя. Данный раздел обозначают парными тегами <HEAD></HEAD>.
Внутри раздела HEAD можно указывать следующие теги HTML: TITLE (парный тег) – предназначен для указания имени созданного электронного документа (визуальный заголовок HTML-страницы), LINK (одиночный тег) – используется для связи между документами, META (одиночный тег) – используется для описания внутренних свойств HTML-файла, SCRIPT (парный тег) – содержит код исполняемых сценариев (скриптов), STYLE (парный тег) – описывает стилевые шаблоны документа.
Рассмотрим TITLE и META из приведенных выше тегов, используемых в заголовочной части, остальные будут рассматриваться по мере усовершенствования HTML-страниц.
Название документа. В заголовочную часть HTML-документа входит обязательный элемент, представленный контейнером <TITLE>. Все, что находится между парой тегов <TITLE> и </TITLE>, интерпретируется браузером как название web-страницы. Содержимое контейнера <TITLE> отображается в заголовке окна браузера.
Название web-страницы – это важный элемент, который имеет значение при предоставлении информации для поисковых систем и может привлечь внимание потенциальных посетителей. Нужно выбирать краткие содержательные названия. Оптимальный размер названия – от 2 до 6 слов.
Метаопределения электронного документа описываются целым рядом параметров, входящих в состав непарного тега <META>, и предназначены для описания внутренних свойств HTML-файла.
Все метаопределения имеют два основных типа данных HTTP-EQUIV и NAME. Первый можно отождествить с заголовком протокола передачи гипертекстовых данных, а второй задает набор ключевых слов документа, предназначенных для индексирования поисковыми системами (добавление информации о документе в базы данных).
Структура этого метатега с использованием первого типа данных выглядит так:
<META HTTP-EQUIV="имя" CONTENT="содержание">
Главная функция этой конструкции – определение типа и кодировки документа. Наиболее используемыми значениями кодировки русскоязычных HTML-документов являются Windows-1251. В данном случае метатег будет выглядеть следующим образом:
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=Windows-1251">
Теперь рассмотрим основные конструкции метаопределений второго типа – NAME (табл. 1.1).
Таблица 1.1
Параметры типа метаопределений NAME
| Параметр | Назначение | Подпараметр |
| keywords | Указание ключевых слов документа | – |
| description | Указание краткого описания документа | – |
| author | Информация об авторе (авторах) документа | – |
| robots | Составление правил для индексирования документа поисковыми системами (роботами) | all none index noindex follow nofollow |
| rating | Установление возрастной категории содержания документа | – |
| document-state | Определение частоты индексирования документа | – |
| revisit | Определение промежуточного времени, через которое должно производиться повторное индексирование документа | – |
| distribution | Категория распространения документа (массовое или ограниченное) | – |
| URL | Указание основного адреса документа (в случае существования «зеркальных» копий) | – |
Окончание табл. 1.1
| Параметр | Назначение | Подпараметр |
| copyright | Установление авторского права и перечисление условий распространения документа | – |
| generator | Информация о программном обеспечении, с помощью которого создавался документ | – |
META NAME =" k eywords " – конструкция задает набор ключевых слов документа, предназначенных для индексирования поисковыми системами (добавление информации о документе в базы данных). Слова указываются через запятую.
<META NAME="keywords" CONTENT="HTML, web, WWW, web-стра-ница, Интернет" >
META NAME =" description " – предоставление небольшого описания текущего HTML-документа, также необходимо для поисковых систем (при поиске информации описание выводится рядом со ссылкой на найденный интернет-ресурс).
<META NAME="description" CONTENT="HTML. Быстрый старт: Быстрое освоение популярного языка гипертекстовой разметки HTML" >
META NAME =" author ". Конструкция предназначена для указания автора (авторов) текущего документа.
<META NAME="author" CONTENT="Иван Петров" >
META NAME =" robots " – одна из наиболее важных конструкций, используемая для описания правил индексирования документа поисковыми системами (роботами).
Отдельно следует перечислить возможные значения параметра CONTENT:
– all – разрешение индексирования документа со всеми присутствующими в нем гиперсвязями (ссылками);
– none – запрет индексирования документа со всеми присутствующими в нем гиперсвязями;
– index – разрешение индексирования документа;
– noindex – запрет индексирования документа;
– follow – разрешение индексирования присутствующих в документе гиперсвязей;
– nofollow – запрет индексирования присутствующих в документе гиперсвязей.
Если конструкция META NAME="robots" не указывается, то по правилу умолчания индексируется документ со всеми присутствующими в нем гиперссылками (равнозначно значению all или index, follow).
<META NAME="robots" CONTENT="all" >
В целом следует помнить, что использование всех метаопределений не обязательно. В зависимости от типа документа, его содержания и прочих факторов следует выбрать только самые необходимые теги метаданных. Наиболее важными являются данные для поисковых систем и указания кодирования документа.
Тело документа. Раздел BODY является одним из самых важных компонентов любого HTML-документа, так как в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя. Парные теги <BODY> и </BODY> указывают на начало и конец тела документа.
Начальный и конечный теги элемента BODY являются необязательными в структуре HTML-документа. Однако контейнер <BODY> необходим, когда требуется задать свойства всей странице.
Таким образом, структура HTML-документа будет выглядеть следующим образом:
<!DOCTYPE HTML PUBLIC «-//W3C// HTML 4.01 Transitional//EN»>
<HTML>
<HEAD>
<TITLE> Моя первая WEB страница </TITLE>
<META HTTP-EQUIV=«Content-Type»
CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
Здесь будет размещено содержимое страницы
</BODY>
</HTML>
Тег <BODY> имеет ряд параметров, которые условно можно разделить на четыре основные группы: параметры заднего фона, параметры границ документа, параметры текста и параметры гиперссылок (табл. 1.2).
Таблица 1.2
Атрибуты тега < BODY >
| Атрибут | Назначение |
| BACKGROUND | Указывает на URL-адрес изображения, которое используется в качестве фонового |
| BGCOLOR | Определяет цвет фона документа |
Окончание табл. 1.2
| Атрибут | Назначение |
| BGPROPERTIES | Если установлено значение FIXED, то фоновое изображение не прокручивается |
| LEFTMARGIN | Устанавливает границу левого поля в пикселях |
| RIGHTMARGIN | Устанавливает границу правого поля в пикселях |
| TOPMARGIN | Устанавливает границу верхнего поля в пикселях |
| BOTTOMMARGIN | Устанавливает границу нижнего поля в пикселях |
| TEXT | Определяет цвет текста |
| ALINK | Определяет цвет активной ссылки |
| LINK | Определяет цвет еще не просмотренной ссылки |
| VLINK | Определяет цвет уже просмотренной ссылки |
Параметры заднего фона: BGCOLOR, BACKGROUND и BGPROPERTIES.
BGCOLOR устанавливает цвет заднего фона, значение которого может быть выведено в символьном эквиваленте, в шестнадцатеричном коде или формате цветовой модели RGB (см. табл. 1.3). Система указания цвета основана на трех основных цветах: красном, зеленом и синем.
Приведем пример указания цвета заднего фона (белый) в трех вариантах:
<BODY BGCOLOR="white">
<BODY BGCOLOR="#ffffff">
<BODY BGCOLOR="255, 255, 255">
Параметр BACKGROUND позволяет накладывать на задний фон документа графическое изображение.
<BODY BACKGROUND="images/bg.gif΄" >