Содержание
  1. Введение
  2. Введение в технологию создания веб-сайтов
  3. Язык гипертекстовой разметки
  4. Каскадные таблицы стилей
  5. Основы JavaScript
  6. Задание для самокотроля
  7. Заключение
  8. Список используемых источников

2. Язык гипертекстовой разметки

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

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

  1. Объявление типа документа.
  2. Teг <html>.
  3. Тег <head>, вложенный в тег <html>.
  4. Вложенный в <head> тeг <titlе> и при необходимости теги <link>, <script>, <base>, <meta> и др.
  5. Тег <body>, который должен быть вложен в <html> и располагаться после <head>. В данном теге должно находиться все то, что будут видеть посетители вашей страницы.

Первым тегом, который согласно спецификации языка HTML, должен присутствовать в коде любой веб-страницы, является так называемый дефинитивный определитель (DTD, Document Type Definition – определение типа документа). Эта строка не оказывает никакого влияния на визуальное отображение, а лишь указывает браузеру, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер понимал, согласно какому стандарту отображать веб-страницу, необходимо в первой строке кода задавать <!DOCTYPE>.

Синтаксис дефинитивного определителя следующий:

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

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

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

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

Организация – уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

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

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

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

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

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

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

Для HTML 5 дефинитивный определитель имеет вид:

<!DOCTYPE html>

В общем случае код веб-страницы должен иметь вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title> Заголовок </title>
  </head>
  <body>
    Содержимое веб-страницы
  </body>
</html>

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

Содержимое внутри элемента html состоит из головы (head, раздел заголовка) и тела (body).

Раздел заголовка.

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

Внутри контейнера <head> допускается размещать следующие элементы:

  • base – задает базовый адрес документа;
  • basefont – задает шрифт, размер и цвет текста по умолчанию;
  • link – устанавливает связь с внешним документом, например с файлом со стилями;
  • meta – определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем;
  • script – определяет операторы интерпретируемых языков программирования, таких как JavaScript и VBScript;
  • style – определяет стили элементов веб-страницы;
  • title – определяет название документа.

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

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

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

  • charset – задает кодировку документа;
  • content – устанавливает значение атрибута, заданного с помощью name или http-equiv;
  • http-equiv – предназначен для конвертирования метатега в заголовок HTTP;
  • name – имя метатега, также косвенно устанавливает его предназначение.

В раздел head возможно включать несколько тегов <meta>.

Раздел тело.

Элемент body означает тело (основную часть) HTML-документа и содержит в себе всю отображаемую на странице информацию. Он может иметь следующие атрибуты:

  • alink – устанавливает цвет активной ссылки;
  • background – задает фоновый рисунок на веб-странице;
  • bgcolor – задает цвет фона веб-страницы;
  • bgproperties – определяет, прокручивать фон совместно с текстом или нет;
  • bottommargin – определяет отступ от нижнего края окна браузера до контента;
  • leftmargin – определяет отступ по горизонтали от левого края окна браузера до контента;
  • link – задает цвет ссылок на веб-странице;
  • rightmargin – определяет отступ от правого края окна браузера до контента;
  • scroll – устанавливает, отображать полосы прокрутки или нет;
  • text – задает цвет текста в документе;
  • topmargin – определяет отступ от верхнего края окна браузера до контента;
  • vlink – задает цвет посещенных ссылок.

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

Использование атрибутов элемента body осуждается спецификацией HTML, вместо них следует применять CSS.