Введение в сетевое программирование

10.1. Краткая справка по языку HTML

World Wide Web, или как ее обычно называют, WWW - это распределенная компьютерная система, основанная на гипертексте. Информация в ней хранится на компьютерах с соответствующим программным обеспечением (серверах), объединеных в глобальную сеть. Она включает в себя не только текст, но и возможность выполнения определенных действий при выборе специально отмеченных участков текста (так называемый гипертекст), а также графику, видео, звук (т. н. средства мультимедиа). Эта информация содержится в виде HTML-документов, которые могут содержать ссылки на другие документы, хранящиеся как на том же самом, так и на другом сервере. На экране компьютера гиперссылки выглядят как выделенные другим цветом и/или подчеркиванием участки текста или рисунки (графические изображения).

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

Просмотр HTML-документов осуществляется с помощью браузеров - программ просмотра WWW-документов (WWW-browsers). В настоящее время получили распространение десятки таких программ, но наиболее известными и развитыми являются Microsoft Internet Explorer, Mozilla (в том числе один из его клонов, Fire Fox), Opera, а также уже сошедший со сцены Netscape Navigator.

WWW-документ, как уже отмечалось, содержит форматированный текст, графику и гиперсвязи с использованием различных ресурсов Internet. Чтобы реализовать все эти возможности, был разработан специальный компьютерный язык - HyperText Markup Language (HTML) - язык разметки гипертекста. Гипертекст ("сверхтекст") – это текст, содержащий дополнительные возможности, в частности – гиперссылки. Существует несколько версий языка HTML. Самая современная на данный момент версия - HTML 4.01, принятая в виде рекомендации консорциума W3C (World Wide Web Consortium), отвечающего за развитие языка HTML и других WWW-технологий. XML-версия языка HTML, называемая XHTML, пока не нашла широкого распространения. Наиболее употребляемая при создании простых WWW-документов версия - HTML 3.2.

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

Документ, написанный на языке HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию пользователю, и теги разметки (markup tags). Теги представляют собой определенные последовательности символов, заключенные между знаками '<' и '>'.

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

Файл на языке HTML имеет расширения .html или .htm. Он приобретает облик WWW-документа только тогда, когда просматривается в специальной программе просмотра - браузере.

Текст в HTML может включать любую последовательность символов, за исключением следующих:

<
>
&
"

Вместо них должны присутствовать комбинации

<
>
&
"

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

 

Теги предназначены для форматирования и разметки документа. Теги бывают парные ("контейнеры") и непарные. Действие парного тега начинается с открывающего тега и заканчивается при встрече соответствующего ему закрывающего, признаком которого является символ " / ". Например:

<html>Это html документ </html>

Непарный тег вызывает единичное действие в том месте, где он встречается. Например,тег <br> вызывает перевод текста на новую строку.

Исключением из правила, гласящего об эквивалентности любого числа пробелов, табуляций и переходов на новую строку одному пробелу, является текст внутри контейнера <pre> </pre>. Этот текст показывается так же, как он был предварительно отформатирован в обычном текстовом редакторе с использованием моноширинного шрифта, и все пробелы и переносы на новую строку являются значимыми. Однако внутри данного контейнера могут действовать другие теги разметки.

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

Например, тег <img src="MyFile.gif" width=100 height=40> обеспечивает показ в данном месте текста изображения из файла с именем MyFile.gif, а ширина и высота изображения задается 100 на 40 точек (пикселей), соответственно. При этом атрибут src, задающий имя файла, является обязательным, а width и height - необязательные (могут отсутствовать).

Типичный HTML-документ имеет заголовок и тело. Начало документа отмечается тегом <html> и заканчивается тегом </html>

Заголовок документа: <head>Текст, включающий служебную информацию о документе</head> Он никак не отображается на экране компьютера при просмотре HTML- файла, за исключением названия документа, заключенного в контейнере <title>Текст заголовка</title>, помещаемого между тегами заголовка. Это название обычно выводится как заголовок оконной формы, в которой происходит показ файла.

Важнейшей служебной информацией является кодировка документа, задаваемая следующим образом:

<meta http-equiv="content-type" content="text/html; charset=Windows-1251">

- русскоязычная кодировка ISO 1251.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

- кодировка UTF-8, и т.д.

Тело документа определяет видимую часть документа:

<body>
 Это html-документ, содержащий какой-то текст.
</body>

На дисплее: Это html-документ, содержащий какой-то текст.

Часть текста или участок изображения в HTML-документах может ссылаться на другой текст внутри того же самого документа, или на другой документ в Internet. Такая связь называется гипертекстовой связью (hypertext link),гиперсвязью, гипертекстовой ссылкой или гиперссылкой. Она выделяется подчеркиванием и цветом.

При ссылке на документ, находящийся на другом сервере, необходимо указать адрес (URL - 'Uniform Recourses Location') этого документа: сетевой адрес сервера и путь к этому документу на сервере. Если документ находится на том же сервере, но в другой папке, достаточно указать только путь к этой папке.

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

<a href="имя_файла">текст_ссылки</a>

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

Язык HTML позволяет ссылаться не только на документы целиком, но и на отдельные части конкретного документа. В этом случае та часть документа, на который делается ссылка, называется меткой. То место, куда осуществляется переход называется меткой. Якорь задается в виде

<a href="имя_файла#имя_метки">текст</a> ,

а метка -

<a name="имя_метки">участок документа</a>

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

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

Параграф - осуществляет показ одной пустой строки и "переводом каретки" перед началом заключенного в контейнере текста. Внутри параграфа возможно выравнивание:

<p>без выравния текста</p>
<p align=left>выравнивание текста по левому краю</p>
<p align=right>выравнивание текста по правому краю</p>
<p align=center>выравнивание текста по центру</p>

Закрывающий тег </p> необязателен.

Горизонтальная раздельная черта <hr>

Заголовки - используются для выводов заголовков и подзаголовков (всего 6 уровней). Значение уровня заголовка может от 1 до 6.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Нумерованный список - задается в виде:

<ol>
<li>...
<li>...
<li>...
...
</ol>

В HTML-файле:

Курсовые в срок сдали следующие студенты:
<ol>
<li>Иванов
<li>Петров
<li>Сидоров
</ol>

На дисплее:

Курсовые в срок сдали следующие студенты:

1. Иванов
2. Петров
3. Сидоров

Ненумерованный список

В HTML-файле задается в схожем с нумерованным списком виде :

Курсовые в срок сдали следующие студенты:
<ul>
<li>Иванов
<li>Петров
<li>Сидоров
</ul>

На дисплее:

Курсовые в срок сдали следующие студенты:

• Иванов
• Петров
• Сидоров

В HTML существуют следующие основные стили текста:

Таблица 10.1.

<b>Жирный текст (bold)</b>	Жирный текст (bold)
<i>Наклонный текст (italics)</i>	Наклонный текст (italics)
<big>Большой размер шрифта</big>	Большой размер шрифта
<small>Маленький размер шрифта</small>	Маленький размер шрифта
Нижние индексы <sub>(subscript)</sub>
Верхние индексы <sup>(superscript)</sup>

Кроме того, существует показ предварительно отформатированного текста. Текст внутри контейнера <pre>...</pre> показывается моноширинным фонтом, все символы имеют одинаковую ширину, все пробелы и переходы на новую строку показываются без игнорирования.

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

<img src="имя_файла" width=ширина height=высота border=ширина_рамки
hspase=отступ_вертикальный vspase=отступ_горизонтальный>

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

Атрибут border не обязателен, но желателен, если с картинкой асоциирована гиперсвязь.

Атрибуты hspase и vspase задают отступы от картинки по вертикали и горизонтали для текста или других картинок.

Рекомендуется всегда указывать ширину и высоту изображения, в противном случае программа просмотра будет вынуждена перед выводом изображения документа на экран загрузить как весь текстовой файл, так и все файлы с изображениями, что занимает много времени. Если же атрибуты width и height указаны, то текст покажется сразу, а изображения будут показываться по мере "подкачивания" по сети. Кроме того, объем текстовых файлов, как правило, намного меньше, чем у графических, и поэтому они получаются гораздо быстрее.

Для того, чтобы изображение служило гиперссылкой, достаточно поместить тег <img> внутрь тега <a href="адрес" >

В HTML-документах можно задавать таблицы. Каждая таблица должна начинаться тегом <table>, a eсли у таблицы требуется внешняя рамка, то с параметром border ( возможны варианты border или border=ширина_рамки ): <table border> и заканчиваться тегом </table> Таблицы задаются построчно, каждая строка начинается тегом <tr> и заканчиваться тегом </tr> Каждая графа (т. е. "ячейка", "клетка") в строке с данными должна начинаться тегом <td> и заканчиваться тегом </td> При этом ширина столбцов подбирается автоматически по максимальной ширине одной из клеток столбца. В таблицы так же можно вставлять гипертекстовые ссылки, произвольным образом отформатированный текст, рисунки и т. п. Общий вид таблицы:

<table border>
    <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr>
    <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr>
    ...
</table>

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

<table border>
<tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 <td>...</td>
</tr>
<tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 <td>...</td>
</tr>
</table>

Вид документа при просмотре файла HTML-браузером (browser), естественно, не изменится.

Если в таблице нужны заголовки, они задаются тегами <th>...</th>

Окна подключаемых модулей (plug-in) задаются контейнером <object>:

<object
 атрибуты
>
 <param name=имя1 value=значение1>
 <param name=имя2 value=значение2>
 ...
 <param name=имяN value=значениеN>
 Альтернативный текст, который будет виден в браузерах, не поддерживающих
 работу с объектами данного типа
</object>

В качестве таких объектов могут служить апплеты Java, мультимедийные клипы и т.п.