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

Файлы html имеют расширение.htm или.html.

Содержат один тип управляющих конструкций – теги (tags) – дескрипторы. Все теги заключены в угловые скобки < >.

Обычно теги парные: начальный и конечный теги. Начальный – <>, конечный </>, например <h1> и </h1>

Парный тег называют еще контейнерный.

Некоторые теги не имеют обязательного парного тега, такой тег называют одиночный. Закрывается такой тег написанием правого слеша перед закрывающей угловой скобкой, например <br />

Структура html-документа выглядит следующим образом (рисунок 2).

Рисунок 2

Пояснения к листингу на рисунке 2

HTML-документ заключен между парным тегом <html> и </html>. Это обязательный тег.

Между тегами <head> и </head> содержится заголовочная часть. В нее входит конструкция <title> и </title>. Это название при загрузке документа появляется в строке заголовка браузера (рисунок 3).

Рисунок 3

Запись <meta content="charset=windows-1251" /> означает кодировку кириллицы, чтобы буквы корректно отображались в браузере. Если кодировку не прописывать, шрифты иногда могут отображаться следующим образом (рисунок 4)

Рисунок 4

Та же страничка после вставки кодировки (рисунок 5)

Рисунок 5

Примечание: вместо кодировки charset="windows-1251" можно использовать кодировку charset="utf-8", которая позволяет создавать мультиязычные сайты, так как все существующие в мире символы в ней присутствуют. В этом случае в Notepad++ необходимо до верстки и сохранения html-файла выбрать из верхнего меню Кодировки – Кодировать в UTF-8 без BOM (UTF-8 without BOM)

Практическое задание 1

1. Создайте папку, назовите ее myhouse. Имена всех папок и файлов необходимо создавать латинскими строчными буквами, русские названия использовать нельзя. Задавайте имена короткими и смысловыми.

Код web-страницы будем писать в Блокноте. Лучше пользоваться не тем Блокнотом, который идет в поставке Windows, а более «продвинутым», например Notepad++. Дистрибутив Notepad++ есть в папке CD/distr.

2. Откройте Notepad++. Убедитесь, что установлена кодировка ANSI, для этого в меню в пункте Кодировки, установите позицию Кодировать в ANSI.

3. Наберите в Notepad++ код из листинга на рисунке 2.

Код в листинге на рисунке 2 в дальнейшем будет служить нам шаблоном, чтобы каждый раз не набирать структуру html-документа.

4. Внутри папки myhouse создайте папку public_html. Таким именем обычно называется папка, в которой хранится сайт при размещении на настоящем хостинге (также эта папка может называться www).

5. После сохранения откройте main.html двойным щелчком. В результате Ваш файл будет выглядеть следующим образом (рисунок 7).

Рисунок 7

6. Из папки CD/html_css_1 откройте файл text_main.txt в Notepad++, а также откройте файл, сохраненный под именем main.html

9. Скопируйте весь текст из файла text_main.txt и вставьте в файл main.html вместо фразы «Содержимое web-страницы». В теге <title> напишите слово «Главная». Вот так <title>Главная</title>.

10. Сохраните изменения и просмотрите файл main.html в браузере. Вы увидите неотформатированный текст. Даже переносы строк, которые есть в исходном тексте, браузер не делает (рисунок 8).