Структура HTML-документа. 
Основы языка Hypertext Markup Language (HTML)

Просмотр кода готовой web-страницы.

Для того чтобы посмотреть HTML-код страницы, на которой Вы сейчас находитесь, нужно в меню браузера выбрать команду Вид/Просмотр HTML_кода или щелкнуть правой кнопкой мыши по рабочему полю страницы и в контекстном меню выбрать пункт Просмотр HTML_кода (рис. 1.1).

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

Упражнение 1.1

Загрузите любую страницу из Интернета и посмотрите код этой странички.

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

HTML-документ (или web-страничка) создается в любом текстовом редакторе и представляет собой простой текстовый документ, в который вставлены флаги разметки — «тэги» (markup tags). Все тэги записываются в угловых скобках _. Существуют тэги парные (имеют открывающийся элемент, заключенный в угловых скобках, и закрывающийся, заключенный между) и непарные.

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

Примечание. Хотя большинство современных браузеров могут распознать документ и не содержащий тэгов и, все же их употребление крайне желательно, так как некоторые программы с большой долей вероятности примут HTML-документ без открывающего и закрывающего тегов за обычный текстовый документ. В этом случае в окне программы просмотра откроется код HTML-документа, который мы обычно видим, выполнив команду Вид/Просмотра HTML кода.

HTML-документ состоит из двух частей: голова (HEAD) и тело (BODY).

Голова HTML-документа заключается между парными тэгами и. В нем указывается заголовок (название) создаваемой web-странички (при просмотре в окне браузера оно отображается в заголовке окна браузера) и определяется кодировка страницы.

Заголовок странички располагается между парными тэгами и. Например, Моя страничка.

Кодировка HTML-документа используется для отображения на странице символов кириллицы. Самые распространенные кодировки — это «Windows_1251» (стандарт Windows) и «KOI8_r» (стандарт UNIX и некоторых других систем). Соответственно символы кириллицы могут быть закодированы в одном из этих стандартов.

Если кодировку не определить в коде странички, то браузер будет отображать ее в кодировке, установленной по умолчанию.

Для определения кодировки странички браузером между тэгами и нужно вставить одну из следующих строчек:

— для Windows-1251 кодировки. В этой кодировке вы можете писать код странички в редакторе «Блокнот», используя, как русский, так и английский язык; эта кодировка наиболее предпочтительна.

— для KOI8-r кодировки. Как правило, эта кодировка используется визуальными HTML-редакторами, открыв документ этой кодировки в редакторе «Блокнот», вы увидите лишь непонятные символы, однако некоторые серверы работают лишь с этой кодировкой. В этом случае вам придется использовать специальные перекодировщики).

Тело HTML-документа находится между парными тэгами и. Здесь располагается информация, которую мы видим в окне браузера при просмотре странички: текст, кнопки, рисунки, списки и т. д.

Таким образом, структуру HTML-документа можно представить в виде схемы:

Упражнение 1.2

Создайте HTML-документ main.html с заголовком «Страничка Ивана Иванова» со следующим содержанием: «Здравствуйте, это моя первая страничка!».

Для этого:

• · В любом текстовом редакторе (например, «Блокнот») создайте новый документ.
• · Внесите в документ следующий текст:

Страничка Ивана Иванова.

Здравствуйте, это моя первая страничка!

• · Сохраните этот файл в свою папку под именем main.html. Для этого в окне сохранения документа в поле Тип файла выберите Все файлы.
• · Просмотрите страничку в браузере: просто щелкните по вашему файлу двойным щелчком левой кнопкой мыши. Если расширение файла задано правильно, то автоматически файл откроется в окне браузера (см рис 1.2).

Упражнение 1.3

Измените HTML-документ main.html: в заголовок внесите свою фамилию и имя.

Для этого:

• · Откройте HTML-код странички:
  • 1 способ. Через меню браузера — Вид/Просмотра HTML-кода.
  • 2 способ. Через меню текстового редактора — Файл/Открыть, поле Тип файла выбрать Все файлы и выбрать нужный html-файл.
  • 3 способ. Через контекстное меню html-файла — щелкнув правой кнопкой мыши по значку файла, вызвать контекстное меню и в пункте Открыть с помощью… выбрать Блокнот.
• · В разделе внесите свою фамилию и имя.
• · Сохраните изменения.
• · Просмотрите страничку в окне браузера.

Вопросы для повторения

• 1. С помощью какой команды главного меню браузера Internet Explorer можно просмотреть HTML-код web-страницы?
• 2. Чем HTML-документ отличается от простого текстового документа?
• 3. На какие 2 части можно логически разделить обычный HTML-документ?
• 4. Какие тэги задают заголовок HTML-документа? Какая информация может содержаться в заголовке HTML-документа?
• 5. Какие тэги задают тело HTML-документа? Какая информация содержится в теле HTML-документа?
• 6. Что такое кодировка?
• 7. Какое расширение может иметь HTML-документ?

Контрольное задание

Создайте HTML-документ в кодировке KOI8-r с названием странички «Вторая страничка …(здесь впишите свою фамилию и имя)» и с текстом «Всем привет! Мы изучили структуру HTML-документа! Эта страничка создана в кодировке KOI8-r».