Глава 2 Структура и элементы гипертекстовых документов


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

2.1. Общая характеристика и структура HTML-документа

На заре компьютеризации пользователям приходилось работать с простыми текстовыми редакторами, такими как WordStar, для которых информация, отображаемая на экране, отличалась от выводимой на бумагу с помощью принтера. В текст документа вставлялись специальные управляющие символы, которые не отображались на экране, но обеспечивали вывод на печать в нужном формате отдельных фрагментов документа. При форматировании одна группа символов определяла начало фрагмента, затем следовал текст, к которому применялось это форматирование, а после него следовали символы конца фрагмента. Так задавалась разрядка, курсив, полужирный шрифт и пр. Аналогичные способы применялись и при работе с первыми версиями СУБД (системы управления базами данных) dBase (например, dBase II), о чем автор может судить по своему личному опыту.

Тот же принцип положен в основу структуры HTML-документа, однако управляющие символы, которые здесь называются тэгами, определяют особенности отображения информации, выводимой уже не на принтер, а на экран монитора. Значительная часть таких тэгов используется парами: вначале открывающий тэг, затем объект управления, а в конце – закрывающий тэг. Такая конструкция называется контейнером, так как объект форматирования размещается внутри нее. Некоторые тэги принципиально не нуждаются в паре. Примером может служить тэг принудительного перевода строки. Тэг может включать в себя некоторые параметры (атрибуты), которые размещаются непосредственно после имени тэга. Если параметров несколько, то в качестве разделителей используются пробелы.

Для просмотра HTML-документов используют специальные программы, которые называются браузерами (Browser, т. е. средство просмотра – в дословном переводе). Такие программы нуждаются в графической оболочке. В частности, значительное число браузеров (Microsoft Internet Explorer, Netscape Communicator, Opera и др.) работают в среде Windows 95, 98 и 2000.

Популярность языка HTML росла вместе с развитием сети Интернет. Отсутствие в течение некоторого времени стандартов на язык HTML привело к тому, что некоторые браузеры отображали должным образом не все тэги, а в версиях различных фирм одни и те же тэги могли трактоваться неодинаково или даже не поддерживались. Широкое использование HTML-документов в сети Интернет привело к появлению международных стандартов на этот язык, называемых спецификациями языка HTML. Этой работой занялась широко известная организация World Wide Web Consortium (W3C). Первая из спецификаций, признанная большинством компаний-разработчиков, явилась HTML 2.0, представленная в конце 1995 г. Вскоре была выпущена предварительная (рабочая) версия спецификации 3.0, а в мае 1996 г. – проект спецификации HTML 3.2. После длительного обсуждения и исправления в январе 1997 г. эта спецификация стала официальной рекомендацией для разработчиков HTML-документов и браузеров. В декабре 1997 года официальной рекомендацией стала спецификация HTML 4.0, которая остается в действии до настоящего времени.

Основой спецификации HTML 4.0 стало отделение параметров описания документов от параметров представления отдельных его фрагментов на экране монитора. Такое разделение облегчает адаптацию языка к различным платформам и средам (Windows, UNIX, DOS и пр.) и упрощает процесс внесения изменений в документы. В соответствии с такой концепцией для описания документа следует использовать таблицу стилей, причем это понятие сходно с используемым в современных текстовых редакторах, таких как Word 97 или 2000. Использование же данных о форме представления документа вперемежку с содержанием самого документа не рекомендуется.

Спецификация HTML 4.0 отменяет ряд ранее использовавшихся тэгов. Отмена тэга означает, что этот тэг по-прежнему поддерживается браузерами, но его применение в современных документах не рекомендуется. В дальнейшем такие тэги могут быть переведены в разряд устаревших, которые уже могут не поддерживаться браузерами. Информация такого рода может быть получена на сайте http://www.w3.org/TR/.

Любой HTML-документ заключен в контейнер и .


Здесь и далее по тексту запись "контейнер и " означает, что это контейнер с открывающим и закрывающим тэгами. Аналогичен смысл записи и для других возможных тэгов.

Сам документ, как уже говорилось выше, представляет собой обычный текстовый файл. Его можно просматривать в DOS с помощью стандартных редакторов и средств просмотра текстовых документов, при этом вместе с самим текстом мы будем видеть и тэги. Структурно документ распадается на 2 части: заголовочную и основную, или тело документа. Первая часть находится внутри контейнера и , а основная часть – внутри контейнера и .

Единственный обязательный тэг, который используется в заголовочной части, —, причем он образует контейнер, внутри которого размещается текст заголовка. При загрузке документа в браузер текст заголовка загружается в первую очередь в окно заголовка браузера. Если текст заголовка достаточно информативен, пользователь в процессе поиска релевантных документов уже на этапе загрузки документа может определить, действительно ли ему нужен этот документ, а если не нужен, то сразу отказаться от его загрузки и перейти к загрузке следующего. Текст названия используется и при создании закладки для данного документа, с этой точки зрения также очень важна его информативность.</p> <br><img src='https://find-books.ru/laravel/public/litres/6647742/i_013.png' alt=''><div class='cite'><p><i>Релевантность</i> (relevancy) – это мера, определяющая, насколько полно тот или иной документ отвечает критериям, указанным в запросе пользователя. Однако не все документы, признанные поисковой системой наиболее релевантными, будут таковыми по мнению пользователя.</p> </div><p>Многие HTML-документы связаны друг с другом, и ссылки от одного документа на другие могут быть абсолютные и относительные, причем последние – формируются относительно того каталога, в котором расположен документ – источник ссылки. Абсолютные ссылки длинные, а относительные, хотя и короче, но перестают работать при перемещении основного документа. В HTML-документы можно включать сразу обе ссылки, чтобы связи между документами не нарушались в любых условиях.</p> <p>Для формирования ссылок в заголовочной части используется тэг <BASE>, в котором используется один единственный параметр HREF (Hyper Reference – гиперссылка), в качестве значения которого указывается URL (Universal Resours Locator) – адрес файла, на который производится ссылка. Параметр HREF используется в том же качестве и в некоторых других тэгах, например, тэге-указателе ссылки (см. разд. 2.5). Адрес может быть локальным, т. е. задавать размещение файла в каталогах и подкаталогах на том же самом компьютере, или сетевым, например:</p> <br><p><BASE HREF="http://www.uprint.spb.ru/main.htm"></p> <br><p>Для организации логической связи и соподчиненности электронных изданий может использоваться тэг <LINK> (Link – связь). В этом тэге могут использоваться 4 параметра: HREF, REL (от Relarion – отношение), REV (от Reverse – противоположный, обратный) и TYPE (тип). С помощью первого из них задается URL связанного с данным документом. Параметр REL определяет вид отношения между текущим и связанным с ним документом, а REV – обратное отношение (между другим и текущим документами). Последний параметр TYPE задает тип и параметры присоединяемой к документу таблицы стилей. Примеры тэга <LINK>:</p> <br><p><LINK REL="contents" HREF="(адрес)"></p> <p><LINK HREF="mailto: (адрес автора)" REV="made"></p> <br><p>Другими значениями параметра REL могут быть bookmark (закладка), copyright (авторское право), glossary (глоссарий, словарь специальных терминов в конце книги), help (помощь). Значение made параметра REV является признаком обратного отношения. Другие его значения: autor (автор), editor (редактор), publisher (издатель).</p> <p>Позднее в состав заголовочной части был добавлен специальный тэг <META>, с помощью которого задается метаинформация, связанная с данным электронным изданием, или атрибуты для ускоренного поиска. Частные случаи метаинформации – это имя автора, издателя, редактора, название издательства, время публикации и другие характерные признаки издания. Тэг <META> имеет 2 параметра: NAME, которым задается имя атрибута и CONTENT (содержание), определяющий значение этого атрибута. Например:</p> <br><p><META NAME="author" CONTENT="В. А. Вуль"></p> <p><META NAME="description" (описание) CONTENT="Электронные издания"></p> <br><p>Вероятно, приведенные примеры не нуждаются в каких-либо комментариях. Итак, внутри контейнера <HEAD> и </HEAD>, ограничивающего заголовочную часть HTML-документа, обычно используется один контейнер <TITLE> и</p> <p>, внутри которого размещается текст заголовка, и могут быть включены тэги , и . Отметим, что HTML-документ, содержащий только заголовочную часть, будет нормально отображаться браузерами как пустой документ. Пример такого документа представлен на рис. 2.1.


Рис. 2.1. Пример отображения в браузере MS Internet Explorer пустого HTML-документа


А ниже показан соответствующий этому документу HTML-код:

Пустой документ



Наличие пробелов между тэгами или внутри контейнеров никак не влияет на отображение HTML-документа.

2.2. Тело документа и оформление его основных фрагментов

2.2.1. Тело документа

Внутри контейнера (BODY – тело) и размещается содержательная часть электронного документа. Сам тэг содержит ряд параметров, ни один из которых не является обязательным. Параметры данного тэга обеспечивают оформление всего тела документа. Перечислим их:

✓ LINK – определяет исходный цвет ссылки;

✓ BACKGROUND (фон) – задает URL изображения, определяющего фон тела документа;

✓ BOTTOMMARGIN (нижнее поле) и TOPMARGIN (верхнее поле) – задает границу нижнего и верхнего полей документа в пикселах;

✓ LEFTMARGIN (левое поле) и RIGHTMARGIN (правое поле) – границы левого и правого полей документа в пикселах;

✓ BGCOLOR (Background Color – цвет фона) – задает цветовой оттенок фона документа (аналог тонирования бумаги, на которой печатается издание);

✓ BGPROPERTIES (Background Properties – свойства фона) – определяет свойства фона, задаваемого предыдущим параметром;

✓ LINK – задает цвет еще не просмотренной ссылки;

✓ SCROLL (прокрутка) – определяет наличие полос прокрутки в документе, отображаемом в окне браузера;

✓ TEXT – определяет цвет текста;

✓ VLINK – цвет уже просмотренной ссылки.

Ряд параметров связаны с использованием цветовых оттенков в HTML-документах. Отметим, что по умолчанию в них используется RGB-цветовое пространство, причем значение каждого из основных цветов имеет 256 уровней и задается в виде 2 цифр в 16-ричной системе счисления от 00 до FF. Таким образом, цветовой тон задается последовательностью из шести 16-ричных цифр, которым предшествует символ #, например, последовательность #FFFFFF соответствует белому цвету максимальной интенсивности, а #800080 – фиолетовому тону, интенсивность которого равна половине от максимальной.

Приведем примеры использования параметров в тэге


:


В первом примере задан синий цвет еще не просмотренной ссылки и в качестве фонового изображения используется файл background.gif, причем этот файл указан относительной ссылкой и находится в подкаталоге IMAGE. А во втором примере задан светло-серый фон для документа.

2.2.2. Тэги логического форматирования текста

Тэги логического форматирования текста позволяют выделить определенные типы текстовых фрагментов, т. е. осуществить структурную разметку текста. Их называют также тэгами уровня блока, так как они не применимы к отдельным словам, а воздействуют лишь на фрагменты текста из нескольких слов. Так, два тэга (Abbreviation) и ("акроним", сокращение – заимствование из греческого языка) позволяют выделить аббревиатурные сокращения в пределах текста, причем второй используется для произносимой аббревиатуры. В тэге может использоваться параметр TITLE, значением которого является полный текст сокращения. Например, контейнер:


МГУП


позволяет при указании курсором манипулятора мышь на аббревиатуру выводить во всплывающем окне соответствующий ей полный текст названия этого Университета.

Тэг-контейнер (цитата) используется для выделения цитат, названий книг, газет и журналов. Браузеры обычно выводят текст, находящийся внутри контейнера, курсивом. Тэг-контейнер (код) выводит текст как фрагмент программного кода (строки листинга программы) моноширинным шрифтом, а (Definition – определение) отмечает текстовый фрагмент как определяемый термин. Аналогичным образом тэг-контейнер (сильный, веский) выделяет содержимое как важный фрагмент текста.

Тэг (Insert – вставка) отмечает фрагмент текста, как вставку, т. е. с его помощью можно отслеживать изменения, вносимые в основной текст. Тэг может иметь 2 параметра: CITE (здесь в смысле – ссылаться, не путать с одноименным тэгом) и DATETIME (дата и время). С помощью первого параметра задается URL документа, поясняющего причины вставки, а второй параметр указывает дату и время вставки фрагмента с учетом часового пояса. Тэг-контейнер (Delete – удалять, уничтожать) отмечает текст, как намеченный к удалению. У него имеются параметры CITE и DATETIME, назначение которых точно такое, как и в тэге . Ниже приводятся несколько примеров записи тэгов, которые не требуют каких-либо комментариев.


"Известия" – популярная Российская газета

Netscape Communicator 4.5– версия 4.5 популярного пакета фирмы Netscape, в который, в частности, входит браузер для просмотра HTMLфайлов.

(большой) и (малый), которые увеличивают или уменьшают размер шрифта на одну единицу, (приставка, указывающая на положение ниже чеголибо) и (от Super – приставки, переводимой как над– или сверх), размещающие символы выше или ниже уровня строки. Более универсальным в этой группе является тэг (шрифт), который имеет 3 параметра: FACE (рисунок шрифта, гарнитура), SIZE (размер) и COLOR. Первый параметр позволяет указать используемую в текстовом фрагменте гарнитуру, причем, если такая гарнитура не установлена на компьютере, то параметр игнорируется. Можно задавать несколько наименований гарнитур, разделяя их запятыми, тогда будет использоваться первая по списку из имеющихся в наличии. Второй параметр задает размер (но не кегль) шрифта. Всего в языке HTML предусмотрено 7 размеров, из которых номер 3 используется по умолчанию. Последний параметр указывает цвет символов текста и может задаваться в виде группы из 7 символов, как указывалось выше, или в наименованиях цветовых тонов. Приведем несколько примеров:


текст

текст

5 2


В первом примере символы текста, содержащиеся внутри контейнера будут отображаться гарнитурой Arial, если она установлена на компьютере, а в противном случае – гарнитурой Courier. Размер символов будет достаточно велик и они будут красного цвета. Во втором примере будет использована гарнитура Times, размер символов будет на 1 меньше нормального и символы будут того же самого красного цвета. В последнем случае в окне браузера будет отображаться 52, причем размер показателя степени будет на единицу меньше, чем ее основания.

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

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

Наш Телеграм канал