Статические веб-документы

35. Статические веб-документы. HTML – основные свойства. Сравнение возможностей различных версий HTML. Формы в HTML.

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

HTML — язык разметки веб-страниц

Веб-страницы на сегодняшний день пишутся на языке HTML (HyperText Markup Language). С помощью HTML можно размещать на веб-страницах текст, графику, а также указатели на другие страницы. Он является языком разметки, то есть языком, описывающим способ форматирования документа. Термин «разметка» (markup) восходит к тем дням, когда технический редактор с помощью специальной разметки указывал специалисту-типографу, какой шрифт использовать для печати документа. Преимущество языка разметки перед языком, не имеющим явных команд форматирования, заключается в том, что браузеры для отображения страниц, написанных на этом языке, программируются довольно просто: браузер должен понимать и выполнять содержащиеся в тексте команды разметки. Среди других популярных примеров языков разметки — языки ТеХ и troff.

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

Веб-страница состоит из заголовка и тела. Вся страница размещается между командами форматирования, называемыми в языке HTML тегами, <html> и </html>. Впрочем, большинство браузеров правильно отобразят страницу и в отсутствие этих тегов. Заголовок веб-страницы заключен в скобки тегов <head> и </head>, а тело располагается между тегами <body> и </body> (рис. 5.8,а). Команды внутри тегов называют директивами. Большинство HTML-тегов имеют такой формат, то есть <something> помечает начало чего-либо, а </something> — его конец. Большинство браузеров предоставляют возможность просмотра исходного HTML-кода веб-страниц (пункт меню View Source или нечто подобное).

<HTML> <HEAD> <TITLE> Корпорация СООБЩЕСТВО ШТУЧЕК. </TITLE> <7HEAD>

<BODY> <H1> Добро пожаловать на страницу компании СООБЩЕСТВО ШТУЧЕК. </Н1>

Мы рады приветствовать вас на домашней странице корпорации <В> СООБЩЕСТВО шТУЧЕК</В>

Мы надеемся, что <1> вы </!> найдете здесь всю необходимую вам информацию.

<р>Ниже приведены ссьшки на информацию о нашей замечательной продукции.

Вы можете сделать заказ по Интернету, по телефону или по £аксу. <HR>

<Н2> Информация о продукции </К2>

<UL> <LI> <A HREF="http://widget.com/piuducts/big"> Большущие штуковины </h>

<.U> <A BBEP-"http://uldget.coa/ptodacts/little"> Малюсенькие етучки </1\>

<№>

<К2> Номера телефонов </Н2>

<UL> <LI> телефон: 1-8QD-WIDGETS

<LI> факс: 1-415-765-4321

</UL> </30DY> </HTML>

_________________ (а)______________________________________

Добро пожаловать на страницу компании СООБЩЕСТВО ШТУЧЕК

(Здесь должен был бытть рисунок)

Мы рады приветствовать вас на домашней странице корпорации СООБЩЕСТВО ШТУЧЕК. Мы над&вмсп, что вы найдете здесь всю необходимую вам информацию.

Ниже приведены ссылки на информацию о нашей питательной продукции. Вы можете сделать заказ ло Интернету, по телефону или по фэксу.

Информация о продукции

■ Огромные штуковины и Малюсенькие штучки

Номера телефонов

• 1-800-WIDGETS

• 1-4f$-765-43£i

^_ (б)

Рисунок 5.8 - Пример веб-страницы на HTML (а); форматированная страница (б)

Регистр символов в тегах не имеет значения. Например, <head> и <HEAD> означают одно и то же, однако новый стандарт требует использования исключительно строчных букв. Формат самого HTML-текста, то есть расположение строк и т.д., не имеет значения. Программы обработки HTML-текстов игнорируют лишние пробелы и переносы строк, так как они все равно форматируют текст так, чтобы он помещался в заданной области отображения. Соответственно, для того чтобы исходные HTML-документы легче читались, в них можно добавлять произвольное количество знаков табуляции, пробелов и символов переноса строк. И, наоборот, для разделения абзацев в тексте в исходный HTML-текст недостаточно вставить пустую строку, так как она просто игнорируется браузером. В этом случае необходимо явное использование специального тега.

Некоторые теги могут иметь (именованные) параметры, называемые атрибутами. Например: <img src=«abc» alt=«foobar»> представляет собой тег <img> с атрибутом src, которому присвоено значение «abc», и атрибутом alt, которому присвоено значение «foobar». Для каждого тега стандарт HTML устанавливает список допустимых атрибутов и их значение. Поскольку все атрибуты являются именованными, их порядок не имеет значения.

Формально при написании HTML-документов должен использоваться набор символов Latin-1 международного стандарта ISO 8859-1, но для пользователей, чьи клавиатуры поддерживают только ASCII-символы, для ввода специальных символов, таких как, например, «ё», могут использоваться специальные управляющие последовательности символов. Эти последовательности должны начинаться со знака амперсанда и заканчиваться точкой с запятой. Например, è означает символ é, a é — символ è. Так как сами символы <, > и & оказываются зарезервированными, для их отображения в тексте также применяются управляющие последовательности: < (less than — знак «меньше»), > (greater than — знак «больше») и &amp: (ampersand — амперсанд).

Главным пунктом заголовка является название страницы, располагающееся между тегами <title> и </title>. В него можно поместить также некоторую метаинформацию. Она не отображается на странице, а используется некоторыми браузерами для того, чтобы помечать окно страницы.

Рассмотрим некоторые другие команды языка HTML, используемые в примере на рис. 5.8, и другие, приведенные в таблице 5.8 . Заголовки в примере задаются тегами вида <hn>, где n — цифра от 1 до 6. <hl> является самым важным заголовком, <h6> — наименее важным. Как это отобразить на экране, зависит от браузера. Обычно заголовки с меньшими номерами отображаются более крупными шрифтами. Браузер может также выделять различные заголовки различными цветами. Обычно заголовки <hl> выводятся на экран крупным полужирным шрифтом и выделяются, по меньшей мере, одной пустой строкой над и под заголовком.

Таблица 5.8 — Наиболее часто используемые HTML-теги. У некоторых из них могут быть дополнительные параметры

Тег	Описание
<html>...</html>	Объявляет веб-страницу на языке HTML
<head> ... </head>	Определяет границы заголовка страницы
<title>...</title>	Определяет границы неотображаемого названия страницы
<body> ... </body>	Определяет границы тела страницы
<hn> ... </hn>	Определяет границы заголовка уровня n
<b> ... </b>	Маркирует блок текста, печатаемого полужирным шрифтом
<i>... </i>	Маркирует блок текста, печатаемого курсивом
<center>... </center>	Помечает начало и конец центрированного по горизонтали текста
<ul>...</ul>	Помечает начало и конец неупорядоченного списка
<ol> ...</ol>	Помечает начало и конец упорядоченного списка
<menu> ... </menu>	Помечает границы меню
<li> ... </li>	Маркирует начало и конец пункта меню
<br>	Разрыв (перевод строки)
<P>	Начало абзаца
<hr>	Горизонтальная линейка
<img src="...">	Загрузка изображения
<a href="..."> ... </a>	Определяет гиперссылку

Теги <b> и <i> обозначают, соответственно, полужирный шрифт (boldface) и курсив (italics). Если браузер не может отобразить полужирный шрифт или курсив, он должен применить какой-нибудь другой способ выделения, например, использовать другой цвет или инверсное отображение символов.

Язык HTML предоставляет несколько механизмов создания списков, включая вложенные списки. Тег <ul> (unordered list) начинает неупорядоченный список. Отдельные пункты, помеченные в исходном тексте тегом <li>, изображаются с маркером абзаца (обычно крупной черной точкой, •) перед собой. Тег <ol> (ordered list) означает начало упорядоченного списка. При его использовании абзацы, помеченные тегом <li>, автоматически нумеруются браузером. У списков, организованных при помощи тегов <ul> и <о!>, одинаковый синтаксис (за исключением открывающих и закрывающих тегов списков) и похожее поведение.

Теги <br>, <р> и <hr> применяются для обозначения границ между различными участками текста. Точный формат может быть определен в таблице стилей (см. ниже), ассоциированной со страницей. Тег <br> просто вставляет разрыв строки. Обычно браузеры не вставляют пустую строку после тега <br>. Тег <р>, напротив, начинает новый абзац, перед которым может быть вставлена пустая строка и, возможно, добавлен отступ. (Тег </р>, отмечающий конец абзаца, существует, но на практике почти не используется. Большинство составителей HTML-страниц даже не знают о его существовании.) Наконец, тег <hr> прерывает строку и рисует на экране горизонтальную линию.

Язык HTML позволяет включать в веб-страницу изображения. Тег <img> указывает, что в данной позиции страницы должно быть загружено изображение. У этого тега может быть несколько параметров. Параметр src задает URL изображения. Стандартом HTML не определяются графические форматы. На практике все браузеры поддерживают файлы форматов GIF и JPEG. Браузеры могут поддерживать любые другие форматы, но эта свобода оказывается палкой о двух концах. Если пользователь привыкнет к браузеру, поддерживающему, скажем, формат файлов BMP, он может включить их в свои веб-страницы, а затем обнаружить, что остальные браузеры просто игнорируют всю его замечательную работу.

У тега <img> может быть еще несколько параметров. Параметр align управляет выравниванием изображения относительно текста. Он может принимать значения top (верх), middle (центр), bottom (низ).

И наконец, мы подошли к гиперссылкам, использующим пару тегов <а> (anchor — якорь) и </а>. У этого тега также могут быть различные параметры, из которых следует отметить href (гиперссылка, URL) и name (имя гиперссылки). Текст, располагающийся между тегами <а> и </а>, отображается на экране. Если этот текст выбирается, браузер открывает страницу, на которую указывает гиперссылка. Между тегами <а> и </а> можно также размещать изображение (тег <img>). В этом случае, если пользователь щелкнет на изображении, будет произведен переход по ссылке.

Для примера рассмотрим следующий фрагмент HTML-текста:

<а href=http://www.nasa.gov> Домашняя страница NASA </a>

При отображении страницы с этим фрагментом на экране появляется следующая строка:

Домашняя страница NASA

Если затем пользователь щелкнет мышью на этом тексте, браузер обратится по сети к указанному URL (http://www.nasa.gov) и попытается получить там веб-страницу и отобразить ее на экране.

В качестве второго примера рассмотрим следующую строку: <а href=http://www.nasa.gov> <img src=«shuttle.gif» alt=«NASA»> </A>

При отображении этой страницы должно быть видно изображение (челночный воздушно-космический аппарат). Щелчок мышью на этом изображении будет иметь тот же результат, что и щелчок на подчеркнутом тексте в предыдущем примере. Если пользователь запретит автоматическое отображение изображений, вместо него будет показан текст «NASA».

Тег <а> может содержать параметр name, что позволяет создать гиперссылку посреди текста, на которую можно ссылаться из другого места этой же страницы. Например, некоторые веб-страницы начинаются с оглавления, состоящего из «локальных» гиперссылок. Щелчок мышью на пункте оглавления позволяет быстро переместиться в нужное место страницы.

HTML продолжает развиваться. В первых двух версиях не существовало таблиц, они были добавлены только в HTML 3.0.

HTML-таблица состоит из нескольких строк, каждая из которых состоит из нескольких ячеек. Ячейка может содержать широкий спектр данных, включая текст, изображения и даже другие таблицы. Ячейки могут объединяться вместе, например, заголовок таблицы может охватывать несколько столбцов. Контроль составителей страниц над внешним видом таблиц ограничен. Последнее слово в таких вопросах, как выравнивание, стили рамок и границы ячеек, остается за браузерами.

Реализация таблицы на языке HTML показана в листинге 5.4, а ее возможное отображение браузером — таблица 5.2. Этот пример демонстрирует несколько основных возможностей HTML-таблиц. Таблицы начинаются с тега <table>. Для описания основных свойств таблицы может быть предоставлена дополнительная информация.

Листинг 5.4 HTML-таблица <html>

<head> <title> Пример страницы с таблицей </title> </head> <body>

<caption> Некоторые различия html версий </caption> <col align=left> <col align=center> <col align=center> <col align=center>

<tr> <th> Аспект <th> HTML 1.0 <th>HTML 2.0 <th> HTML 3.0 <th>HTML 4.0</tr> <tr> <th> Гиперссылки <td> x <td> x<td> x </tr> <tr> <th> Изображения <td> x <td> x<td> x </tr> <tr> <th> Списки <td> x <td> x<td> x </tr>

<tr> <th> Активные карты и изображения <td>&nbsp:<td>x<td> x<td> x</tr> <tr> <th> Формы <td>&nbsp:<td> x <td> x</tr>

<tr> <th> Математические выражения <td>&nbsp:<td>&nbsp:<td> x <td> x </tr> <tr> <th> Панели инструментов <td>&nbsp:<td>&nbsp:<td> x <td> x </tr>

<tr> <th> Таблицы <td>&nbsp:<td>&nbsp:<td> x <td> x </tr>

<tr> <th> Доступность <td>&nbsp:<td>&nbsp:<td>&nbsp:<td> x </tr>

<tr> <th> Внедренные объекты <td>&nbsp:<td>&nbsp:<td>&nbsp:<td> x </tr>

<tr> <th> Скрипты <td>&nbsp:<td>&nbsp:<td>&nbsp:<td> x </tr>

</table>

</body>

</html>

С помощью тега <caption> можно задать надпись над таблицей. Каждая строка таблицы начинается с тега <tr> (table row — строка таблицы). Отдельные ячейки помечаются тегом <th>(table header — заголовок таблицы) или <td> (table data — данные таблицы). Эти два тега позволяют создавать, соответственно, строки заголовков таблицы и обычные строки, что и показано в примере.

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

HTML 4,0 отличается от предыдущих версий некоторыми новыми свойствами. Они включают в себя специальные методы доступа для людей с ограниченными возможностями, внедрение объектов (обобщение тега <img>, позволившее включать в состав страниц не только изображения, но и другие объекты), поддержку языков написания сценариев (скриптов), что дало толчок к развитию динамических страниц, и т.д.

Таблица 5.2 — Некоторые различия версий HTML

Аспект	HTML 1.0	HTML 2.0	HTML 3.0	HTML 4.0
Гиперссылки	X	X	X	X
Изображения	X	X	X	X
Списки	X	X	X	X
Активные карты и изображения		X	X	X
Формы		X	X	X
Математические выражения			X	X
Панели инструментов			X	X
Таблицы			X	X
Доступность				X
Внедренные объекты				X
Скрипты				X

Если веб-сайт достаточно велик по размерам и сложен настолько, что над ним работает целая группа программистов, желательно обеспечить более или менее схожий дизайн всех страниц. Эта проблема решается при помощи таблиц стилей. При их использовании отдельные страницы оформляются не реальными (физическими) стилями (например, курсивом или полужирным шрифтом), а логическими. Среди них могут быть, например, <dn> (Определение), <ет> (Слабое выделение), <strong> (Сильное выделение), <var> (Программная переменная). Логические стили определяются в таблицах стилей, ссылка на которые ставится в начале кода каждой страницы.

Формы

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

В результате в HTML 2.0 были включены формы. Формы могут содержать кнопки и поля для ввода текста, позволяющие пользователям делать выбор или вводить необходимую информацию, которую затем можно отсылать владельцу страницы. Для этой цели используется тег <input>. У него могут быть различные параметры, определяющие размер, назначение и другие свойства отображаемого окна. Наиболее часто используемыми формами являются пустые поля для ввода текста, флажки, переключатели, активные карты и кнопки подтверждения. В примере, приведенном в листинге 5.5, показаны некоторые из перечисленных форм. Отображение этой HTML-страницы браузером показано на рис. 5.9.

Листинг 5.5 HTML-текст для бланка заказа <html>

<head> <title> Бланк заказа клиента awi </title> </head> <body>

<hl> Бланк заказа штуковины </hl>

<form action=”http://www.widget.com/cgi-bin/widgetorder” method=post> Имя <input name=”customer” size=60> <p> Адрес <input name=”address” size=58> <p> Город <input name=”city” size=21> Штат <input name=”state” size=4> Страна <input name=”country” size=10> <p> № кредитной карты <input name=”cardno” size=10> Срок действия <input name=”expires” size-4> m/c <input name “cc” type=radio value=”mastercard”> visa <input name =”cc” type=radio value=”visacard”> <p>

Размер штуковины: большой <input name=”product” type=radio value=”дорогая”> маленький <input name=”product” type=radio value=”дешевая”> Доставка <input name=”express” type=checkbox> <p> <input name=submit value=”отправить заказ”> <p>

Благодарим вас за то, что вы заказали у нас штуковины фирмы AWI. Это правильный выбор! </form> </body> </html>

Рисунок 5.9 — Форматированная страница

Начнем изучение форм с этого примера. Как и все формы, она заключена между тегами <form> и </form>. Текст, не заключенный в теги, просто отображается. Внутри формы разрешено использование всех обычных тегов (например, <b>). В данной форме используются три типа окон для ввода данных.

Окно первого типа следует за текстом «Имя». Ширина это-го окна 46 символов. Предполагается, что пользователь введет здесь свое имя, которое будет храниться в виде текстовой строки в переменной customer для последующей обработки. Тег <р> указывает браузеру, что последующий текст следует отображать с новой строки, даже если в текущей строке еще достаточно места. С помощью этого и других тегов автор страницы может управлять внешним видом бланка на экране.

В следующих окнах формы спрашивается адрес заказчика, то есть улица, город, штат и страна. Между этими полями не вставляются теги <р>, поэтому браузер по возможности пытается отобразить их все в одной строке. С точки зрения браузера, этот абзац представляет собой просто шесть отдельных элементов — три строки, перемежающиеся тремя окнами. Он отображает их друг за другом, слева направо, переходя на новую строку по мере необходимости. Таким образом, вполне возможно, что на экране с разрешением 1600x1200 точек все три строки и соответствующие им окна поместятся в одну строку, тогда как на экране с разрешением 1024x768 точек они будут разбиты на две строки. В худшем случае слово «Страна» может оказаться в конце одной строки, а соответствующее окно ввода — в начале следующей строки.

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

Следом за датой истечения срока действия кредитной карты мы обнаруживаем новые для нас элементы управления — переключатели. Они используются, когда требуется выбрать только один вариант из нескольких. Они напоминают кнопки на авто-магнитолах, служащие для быстрого доступа к заданным радио-станциям. Браузер отображает эти элементы управления таким образом, что пользователь может включать их щелчком мыши на них (или с помощью клавиатуры). Переключатели этого типа всегда объединяются в группы. При этом включение одного переключателя автоматически выключает все остальные переключатели этой группы. Внешний вид переключателя зависит от используемого графического интерфейса. В пункте бланка «Размер штуковины» также используются два переключателя, Группы переключателей определяются по значению параметра name (имя) тега <input>. Специальных скобок из тегов вроде <radiobutton> .. </radiobutton > для определения групп переключателей не предусмотрено.

Параметр value указывает, какая кнопка была нажата пользователем. В зависимости от того, какую кредитную карту выберет пользователь для своих расчетов, переменной ее будет присвоено значение текстовой строки «mastercard» или «visacard».

Следом за двумя наборами переключателей в бланке используется элемент управления типа checkbox (флажок). Он похож на переключатель предыдущего типа, так как тоже может находиться в одном из двух состояний (установлен/ сброшен), но не объединяется в группы и включается и выключается щелчком мыши на нем независимо от других элементов управления того же типа.

Если список, из которого предстоит сделать выбор пользователю, очень длинный, то использование переключателей несколько неудобно. В этом случае можно использовать теги <select> и </se1ect> для определения списка альтернатив. При этом семантика переключателей сохраняется, если только не используется параметр multiple, превращающий список альтернатив в набор независимо устанавливаемых и сбрасываемых флажков. Некоторые браузеры отображают пункты списка между тегами <select> и </select> как всплывающее меню.

Итак, мы рассмотрели два встроенных типа тега <1nput>: radio и checkbox. На самом деле, мы уже познакомились и с третьим типом этого тега, то есть с типом text. Мы не заметили этого, потому что этот тип является типом по умолчанию, поэтому пара-метр type = text можно не указывать. Еще два возможных значения параметра type: password и textarea. Окно password аналогично окну text, с той разницей, что при вводе текста в окне password символы не отображаются на экране. Окно textarea отличается от окна text тем, что может содержать несколько строк текста.

Возвращаясь к примеру на рис. 5.9, мы, наконец, добираемся до последнего использованного в этом примере элемента управления — кнопки submit (подтверждение). Когда пользователь щелкает мышью на этой кнопке, заполненный им бланк отсылается обратно на компьютер, на котором размещена эта веб-страница. Как и все остальные рассмотренные типы, submit является зарезервированным словом, интерпретируемым браузером. Строка параметра value (значение) в данном случае содержит надпись на кнопке. В принципе, все элементы управления, образуемые с помощью тега <input>, могут иметь пара-метр value. В окнах ввода текста содержимое параметра value отображается в окне редактирования, и пользователь может редактировать или удалить его. Элементы управления checkbox и radio также могут быть инициализированы с помощью специального служебного слова checked («выбрано»). Дело в том, что value просто отображает текст, но не отображает предпочитаемый выбор.

Когда пользователь нажимает кнопку submit, браузер упаковывает всю собранную информацию в одну большую строку и отправляет ее на сервер для обработки. Поля с данными разделяются амперсандами (&), а вместо пробелов ставятся знаки +. В нашем примере такая строка, отсылаемая на сервер, может выглядеть так, как показано ниже (вы видите три строки, а не одну только из-за недостаточной ширины бумажного листа):

customer-John+Doe&address-100+Ma1n+St.&dty-White+Pla1ns&state-NY&country-USA&cardno-1 234567890&expires-6/98&cc-mastercard&product-cheap&express-on

Это сообщение отправляется на сервер в виде одной текстовой строки. Если флажок элемента управления checkbox сброшен, соответствующая ему переменная опускается. Сервер сам решает, что ему делать с полученной строкой.