Мы вкратце рассказали о тегах, которые существуют с ранних этапов развития Всемирной паутины. HTML продолжает развиваться. В табл. 7.11 отображены некоторые возможности, которые были добавлены в следующих версиях HTML. HTML 1.0 относится к версии HTML, которая использовалась при возникновении Всемирной паутины. Версии 2.0, 3.0 и 4.0 сменяли друг друга достаточно быстро в течение нескольких лет после того, как Всемирная паутина обрела популярность. После HTML 4.0 прошло почти десять лет, прежде чем путь для новой версии, HTML 5.0, был открыт. Так как данный стандарт является основным обновлением, объединяющим способы, которыми браузеры обрабатывают разнообразный контент, HTML 5.0 до сих пор находится в стадии разработки, которая вряд ли закончится раньше 2012 года. Тем не менее основные браузеры уже поддерживают возможности HTML 5.
Изменения, вносимые в версии HTML, связаны с добавлением новых возможностей, которые люди хотели бы видеть, но пока они не вошли в стандарт, использовать данные возможности приходится нестандартным образом (например, при помощи плагинов). Так, например, в первых двух версиях не существовало таблиц, они были добавлены только в HTML 3.0. HTML-таблица состоит из нескольких строк, каждая из которых состоит из нескольких ячеек, которые могут содержать широкий спектр данных (например, текст, изображения и даже другие таблицы). До введения HTML 3.0 авторам, которым нужна была таблица, приходилось прибегать к особым методам, таким как включение картинки, на которой изображалась таблица.
HTML 4.0 отличается от предыдущих версий некоторыми новыми свойствами. Они включают в себя специальные методы доступа для людей с ограниченными возможностями, внедрение объектов (обобщение тега <img>, позволившее включать в состав страниц не только изображения, но и другие объекты), поддержка языков написания сценариев (скриптов), что дало толчок к развитию динамических страниц и т. д.
Таблица 7.11. Некоторые отличия между версиями HTML
Объект
HTML 1.0
HTML 2.0
HTML 3.0
HTML 4.0
HTML 5.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
X
X
Таблицы
X
X
X
Возможности по обеспечению доступности
X
X
Встраивание объектов
X
X
Таблицы стилей
X
X
Скрипты
X
X
Видео и аудио
X
Векторная графика
X
Отображение XML
X
Фоновые потоки
X
Хранение информации в браузере
X
Область для рисования
X
HTML 5.0 включает множество опций, предназначенных для обработки мультимедиа, которое на сегодняшний день широко используется во Всемирной паутине. Видео и аудио может размещаться на страницах и проигрываться браузером, и это не потребует от пользователя установки плагинов. Вместо использования растровых форматов графических объектов (таких как JPEG и GIF), можно строить рисунки в браузере в виде векторной графики. Также расширились возможности поддержки выполнения скриптов в браузерах, таких как фоновые потоки вычислений и доступ к хранилищу. Все эти возможности помогают поддерживать веб-страницы, которые больше похожи на традиционные приложения с пользовательским интерфейсом, чем на документы. Именно в этом направлении развивается Всемирная паутина.
Ввод информации и формы
Есть одна важная возможность, которую мы еще не обсудили, — ввод информации. Первая версия языка HTML фактически обеспечивала лишь одностороннюю связь. Пользователи могли получать страницы от поставщиков информации, но отправлять информацию обратно было довольно трудно. Достаточно быстро стало очевидным то, что для того, чтобы обеспечить возможности размещения заказов на продукты при помощи веб-страниц, заполнения учетных карточек, поиска по ключевым словам и многого другого, необходим двусторонний трафик.
Отсылка вводимой информации от пользователя серверу (через браузер) требует двух типов поддержки. Во-первых, необходимо, чтобы HTML передавал данные в этом направлении. То, как это происходит, мы опишем в следующем разделе; в этом процессе задействован метод POST. Во-вторых, нужно предоставить элементы пользовательского интерфейса, которые собирают и пакуют вводимую информацию. Формы (forms) с этой функциональностью были введены в HTML 2.0.
Формы могут содержать кнопки и поля для ввода текста, позволяющие пользователям делать выбор или вводить необходимую информацию, которую затем можно отсылать владельцу страницы. Формы написаны так же, как и другие части HTML, как видно из примера в листинге 7.4. Внешний вид формы, соответствующей данному HTML-тексту, приведен на рис. 7.11. Обратите внимание на то, что формы являются статическим контентом. Они не меняют поведения в зависимости от того, кто их использует. Динамический контент, о котором мы поговорим позднее, предоставляет более сложные способы сбора вводимой информации при помощи пересылки программы, поведение которой может зависеть от среды браузера.
Как и все формы, она заключена между тегами <form> и </form>. В атрибутах этого тега прописано, что делать с вводимыми данными, в данном случае используется метод POST для пересылки данных на заданный URL. Текст, не заключенный в теги, просто отображается. Внутри формы разрешено использование всех обычных тегов (например, <b>), чтобы позволить автору страницы контролировать вид формы на экране.
В данной форме для ввода данных используются три типа окон, каждый из которых использует тег <input>. У данного тега есть множество параметров для определения размера, особенностей и использования отображаемой области. Самые распространенные формы — это пустые поля, в которые пользователь может ввести текст, флажки и кнопки «отправить», которые инициируют передачу данных на сервер.
Окно первого типа — это текстовая область, которая следует за текстом «Имя». Ширина этого окна 46 символов. Предполагается, что пользователь введет здесь свое имя, которое будет храниться в виде текстовой строки в переменной customer для последующей обработки. В следующих окнах формы спрашивается адрес заказчика, то есть улица, город, штат и страна. Так как между этими полями не вставляются теги <p>, браузер по возможности пытается отобразить их все в одной строке (а не в качестве отдельных параграфов). С точки зрения браузера, этот абзац представляет собой просто шесть отдельных элементов — три строки, перемежающиеся тремя окнами. В следующей строке у пользователя запрашивается номер кредитной карты и срок ее действия. Передавать номера кредитных карт по Интернету следует только в том случае, если приняты все соответствующие меры предосторожности. Более подробно этот аспект будет обсуждаться в главе 8.
Следом за датой истечения срока действия кредитной карты мы обнаруживаем новые для нас элементы управления — переключатели. Они используются, когда требуется выбрать только один вариант из нескольких. Они напоминают кнопки на автомагнитолах, служащие для быстрого доступа к заданным радиостанциям. Переключатели этого типа всегда объединяются в группы. При этом включение одного переключателя автоматически выключает все остальные переключатели этой группы. Внешний вид переключателя зависит от используемого графического интерфейса. В пункте бланка «Размер штуковины» также используется два переключателя. Группы переключателей определяются по значению параметра name (имя) тега <input>. Специальных скобок из тегов, вроде <radiobutton> ... </radiobutton>, для определения групп переключателей не предусмотрено.
