Контрольные вопросы

1. Для чего используется HTML?

2. Для чего нужны дескрипторы?

3. Каким образом записываются атрибуты элемента в HTML?

4. Что такое специальные символы?

5. Какие программы способны интерпретировать HTML-документы? Приведите примеры таких программ.

§ 2. Основные принципы создания html-страницы

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

Рассмотрим структуру пустого документа, которую впоследствии нужно будет дополнять.

Листинг 1.1. Пустая HTML-страница

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Заголовок</title>

</head>

<body>

</body>

</html>

Определение типа документа.

Первая строка определяет версию языка HTML, на которой написан данный документ. Браузеры и валидаторы HTML-кода используют эту информацию при обработке страницы. Строка <!DOCTYPE html> обозначает, что страница будет представлена в HTML 5. При неправильном значении тега DOCTYPE (или его отсутствии) возможно нарушение отображения страницы в некоторых браузерах. Например, Internet Explorer переключается в “режим совместимости” и вся страница отображается совершенно не так, как было задумано разработчиком.

Как видно выше, все последующие элементы находятся внутри тега html. Непосредственно внутри данного дескриптора находятся элементы head и body, обозначающие заголовок страницы и её тело, соответственно.

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

Мета-теги (элемент meta) используются для описания характеристик веб-страницы, таких как кодировка символов. Кодировка символов (charset) – это международное представление букв и цифр, символов в веб-странице или любом ином файле, который хранится на компьютере и может быть передан через Интернет. Существует множество наборов кодировок символов. Однако установившейся практикой является использование кодировок, которые весьма широко поддерживаются, например, UTF-8, которая является разновидностью кодировки Unicode. В данном примере описан одиночный (автономный) специальный мета-тег, появившийся в HTML 5, обозначающий, что кодировка данной страницы UTF-8.

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

Как видно из примера, расположение элементов HTML-документа похоже на матрёшку: один документ содержится в другом, в нём ещё другой и т.д. Только лишь могут содержаться теги, которые не могут содержать других элементов (title или meta), а также в одном элементе может содержаться сразу множество элементов (элемент head из примера). Этот принцип расположения элементов называется вложенностью, а данный порядок элементов образует дерево, называемое DOM-деревом. То есть, элементы HTML-страницы из примера выше можно представить в виде дерева, как показано на рисунке 1.1.

Рисунок 1.1. Представление дерева элементов DOM-дерева из листинга 1.1