logo search
Алексеев информатика

9.6. Введение вHtml

Испанским языком – с Богом, французским – с друзьями,

немецким – с неприятелем, а итальянским –

с женским полом говорить прилично.

Карл V

В настоящее время разработано несколько тысяч языков программирования. Каждый язык имеет свою область использования, предназначен для решения определенных задач.

Название языка программирования HTML происходит от английских слов HyperText Markup Language – язык разметки гипертекста. Этот язык используется при создании красочно оформленных Web-страниц, которые пользователь наблюдает при работе в Интернете (протокол WWW). Язык HTML составлен на базе языка SGML (Standard Generalized Markup Language – стандартный обобщенный язык разметки документов).

Напомним, что гипертекст – это текст, представленный в виде связанных блоков текста. При этом блоки текста могут находиться на просматриваемой Web-странице, на другой странице данного сервера либо на другом сервере глобальной сети. Переход от блока к блоку осуществляется скачком с помощью гиперссылок.

Гиперссылка – специальным образом выделенный фрагмент гипертекста (или графический объект), который содержит невидимый для пользователя указатель (адрес, URL) на другой сервер, другую Web-страницу или фрагмент просматриваемого документа (блок).

Реализуются соединения между блоками текста с помощью протокола передачи гипертекста HTTP (HyperText Transfer Protocol).

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

Чтобы «добраться» до хранящегося на сервере файла, необходимо в адресной строке браузера указать путь к этому файлу, т. е. адрес или, как его еще называют, ресурс URL.

Язык HTML создан Тимом Бернерсом-Ли (1989 г.) и непрерывно совершенствуется. Разработано несколько его версий: HTML 2 (ноябрь 1995 г.), HTML 3.2 (январь 1997 г.), HTML 4.0 (февраль 1998 г.).

Составление программы на HTML чем-то напоминает набор текста в редакторе MS Word. Как известно, если при наборе текста в MS Word бывает необходимо сделать какое-то слово полужирным, нужно его выделить и нажать специальную кнопку на панели форматирования. Чтобы сделать фрагмент текста полужирным, на Web-странице нужно с помощью языка HTML поставить вокруг выделяемого слова специальные значки (синонимы: маркеры, метки, дескрипторы, команды управления или так называемые теги).

Например, слово «Проба» на Web-странице будет выделено полужирным шрифтом, если использовать такую конструкцию:

Выделяемое слово окаймлено с двух сторон тегами, которые отдают приказ браузеру написать указанное слово темнее и толще обычного текста.

Этот пример достаточно типичен. Большинство тегов является парными: первый тег является открывающим, а второй тег – закрывающим (завершающим, конечным). Распознать закрывающий тег можно по символу «/». Сами маркеры размещаются между двух скобок <>.

При записи тегов не имеет значения, какими буквами он записан: большими или маленькими, т. е. записи <b> и <В> равноправны.

В общем виде рассмотренную конструкцию можно представить так:

<имя тега>текст</имя тега>

Фрагмент программы, расположенный между открывающим и закрывающим тегами, называется контейнером.

Специальные теги используются для центрирования текста, управления выравниванием, размером шрифта и цветом текста, создания заголовков, абзацев, списков, таблиц, форм, вставки гиперссылок, графических объектов и др. Различаются теги своими именами и действиями, производимыми над элементами документа (Web-страницы).

Кроме парных тегов существуют непарные теги.

Тег <br> используется, если необходимо перейти на новую строку, не создавая нового абзаца. Тег <hr> создает разделительную горизонтальную линию. К непарным тегам также относится метка для комментариев <! – Комментарии -->.

При создании языка HTML авторами использовался английский язык. Смысл имен многих тегов становится понятным при переводе английских слов на русский язык, например:

b – bold (четкий, жирный), i – italic (курсив), u – underline (подчеркивание), head (голова), body (тело), img (image – изображение).

Программы, написанные на языке HTML, имеют определенную стандартизированную структуру (см. следующий рисунок).

Начинается и завершается любая программа парой тегов <html> и </html>. Эти теги сигнализируют всем браузерам сети о том, что данная программа написана на языке HTML. Все, что находится между этими тегами, называется документом (Web-страницей). Между тегами <head> и </head> помещаются сведения о названии данной страницы и служебная информация (используемая кодировка, ключевые слова, название редактора, с помощью которого сделана страничка). Для примера название этой Web-страницы выбрано «Пробная страница». Название страницы окаймлено тегами <title> и </title>. Следует иметь в виду, что текст, размещенный между этими тегами, не отображается в документе. Он появляется в строке заголовка браузера при просмотре данной страницы, а также в названиях закладок.

Содержимое страницы, воссоздаваемое на экране монитора (основная часть), располагается между тегами <body> и </body>. В данном случае (см. рис.) пользователи на экранах своих мониторов увидят всего два слова «Проба», причем второе слово будет изображено полужирным шрифтом.

Кроме того, на рисунке видны теги <р> и </р>, каждая пара которых выделяет новый абзац в документе.

Понятно, что показанные на рисунке фигурные скобки и поясняющие надписи (Программа, Заголовок, Тело) изображены лишь для улучшения наглядности структуры программы и в реальных программах они отсутствуют. Пространственное расположение тегов в данном примере также несколько изменено (для увеличения наглядности).

Увидеть, как выглядит текст реальной программы любой Web-страницы, довольно просто. Для этого достаточно в браузере Internet Explorer последовательно выполнить команды: Вид  В виде HTML.

Теги могут быть вложенными. Например,

В результате выполнения этой программы на экране клиента появится фраза, написанная жирным шрифтом (теги <b>), причем слово HTML будет выделено курсивом (теги<i>):