Скачать fb2
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Аннотация

    Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.


Вл. Дронов HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Введение

    Мир Web-дизайна в очередной раз лихорадит. Шутка ли — новые интернет-технологии на подходе!

Что грядет нового в Web-дизайне

    Сейчас, наверно, даже школьники знают, что содержимое Web-страниц создается с помощью языка HTML, а внешний вид их элементов определяется стилями, которые описываются на языке CSS. Существует также возможность написать небольшие программы на языке JavaScript, которые встраиваются в саму Web-страницу и изменяют ее содержимое в ответ на действия посетителя, — Web-сценарии.
    Все эти языки и технологии были созданы более десяти лет тому назад, и за последнее время в них мало что изменилось (а в языке HTML не изменилось вообще ничего). Так что за последние лет десять в Web-дизайне не было никаких революций — только небольшие эволюционные изменения.
    Но уже готовятся новые стандарты, которые описывают очередные версии этих языков: HTML 5 и CSS 3. Они обещают принести в Web-дизайн много нового.
    — Упрощенную вставку на Web-страницу аудио- и видеоматериалов.
    — Возможности рисования на Web-страницах.
    — Многоколоночную верстку текста.
    — Поддержку работы в оффлайновом режиме (при отключении от Интернета).
    — Дополнительную поддержку мобильных устройств.
    — Поддержку специальных Web-обозревателей для лиц с ограниченными физическими возможностями.
    — И, как водится, многое-многое другое.
    Звучит заманчиво, но… Сейчас эти стандарты существуют только в виде "черновых" редакций, и когда выйдут "чистовые", окончательные, никто не знает.
    Так отчего же разгорелся весь сыр-бор?
    Разработчики Web-обозревателей, не дожидаясь, пока их коллеги, "сочиняющие" интернет-стандарты, завершат работу над HTML 5 и CSS 3, уже внедряют поддержку некоторых их возможностей в свои творения. Так, Mozilla Firefox, Opera, Google Chrome и Apple Safari уже поддерживают интернет-мультимедиа в стиле HTML 5, программное рисование на Web-страницах и работу в оффлайновом режиме. Пусть и не в полной мере, но все-таки поддерживают!
    "Не в теме" пока еще Microsoft Windows Internet Explorer. Однако Microsoft уже довольно давно объявила о разработке новой версии своего Web-обозревателя под номером 9. И в плане поддержки всех "горячих" интернет-новинок грозит заткнуть за пояс всех конкурентов. Что ж, у автора есть причины верить: даже предварительная версия Internet Explorer 9, совсем-совсем "сырая", на момент написания этой книги выглядит очень даже неплохо.
    Но даже возможности действующих на сегодняшний день версий HTML и CSS на деле используются не в полной мере:
    — подгружаемое содержимое — загрузка части содержимого вместо целой Web-страницы — практически не применяется;
    — генерируемое содержимое — программное создание части содержимого Web-страницы после ее загрузки — применяется мало;
    — разделение содержимого, представления и поведения Web-страниц также почти не реализуется.
    А ведь все это способно значительно упростить труд Web-дизайнера и заметно улучшить вид и удобство использования Web-сайтов. Вот такие они Web- дизайнеры, не ведают своей выгоды…

О чем эта книга

    В книге описываются:
    — Язык HTML и принципы создания содержимого Web-страниц.
    — Язык CSS и принципы создания представления Web-страниц.
    — Возможности HTML 5 и CSS 3, уже поддерживаемые современными Web-обозревателями.
    — Основы Web-программирования, язык JavaScript и принципы создания поведения Web-страниц.
    — Библиотека Ext Core — инструмент, призванный упростить труд Web-программиста.
    — Создание интерактивных Web-страниц с конкретными примерами.
    — Реализация подгружаемого и генерируемого содержимого и семантической разметки данных средствами JavaScript.
    — Использование специальных средств — Web-форм, элементов управления и свободных контейнеров — для обеспечения дополнительной функциональности Web-сайтов.
    — Реализация программного рисования на Web-страницах средствами HTML 5.
    В результате читатель создаст полнофункциональный Web-сайт — справочник по HTML и CSS. Конечно, это только пример — данные технологии можно применить и для разработки любого другого Web-сайта.

Какие программы используются в этой книге

    Вопрос далеко не праздный, учитывая то, что за программы сегодня приходится платить… Так что же за программы использовал автор?
    Только бесплатные!
    — Блокнот — простейший текстовый редактор, стандартно поставляемый в составе Windows.
    — Firefox версий 3.6.* — Web-обозреватель. Все примеры тестировались на нем.
    — Opera 10.52 и Apple Safari 4.* — Web-обозреватели. На них автор тестировал некоторые примеры.
    Другие программы автор в работе практически не применял.

Типографские соглашения

    В этой книге часто приводятся форматы написания различных тегов HTML, атрибутов стилей CSS и выражений JavaScript. Нам необходимо запомнить типографские соглашения, используемые для их написания.
    ВНИМАНИЕ!
    Все эти типографские соглашения автор применяет только в форматах написания тегов HTML, атрибутов стилей CSS и выражений JavaScript. В коде примеров они не имеют смысла.
    В угловые скобки (<>) заключены названия значений атрибутов, параметров или фрагментов кода, которые, в свою очередь, набраны курсивом. В код реального Web-сценария, разумеется, нужно подставить реальное значение, конкретный параметр или код.
    Пример:
    <MAP NAME="<имя карты>">
    </MAP>
    Здесь вместо подстроки <имя карты> нужно подставить конкретное имя карты. Пример:
    <FORM>
    <теги, формирующие элементы управления>
    </FORM>
    Здесь вместо подстроки <теги, формирующие элементы управления> следует подставить реальные HTML-теги, формирующие элементы управления.
    В квадратные скобки ([]) заключены необязательные фрагменты кода:
    <LEGEND [ACCESSKEY="<быстрая клавиша>"]><текст заголовка></LEGEND>
    Здесь атрибут тега ACCESSKEY может присутствовать, а может и отсутствовать. Символом вертикальной черты (|) разделены фрагменты кода, из которых в данном месте должен присутствовать только один:
    SHAPE="rect|circle|poly"
    Здесь в качестве значения атрибута тега SHAPE должна присутствовать только одна из доступных строк: rect, circle или poly.
    Слишком длинные, не помещающиеся на одной строке фрагменты кода автор разрывает на несколько строк и в местах разрывов ставит знаки переноса.
    Пример:
    var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" + aDataBase[i].name + "</A></CODE></LI>";
    Приведенный код разбит на две строки, но должен быть набран в одну. Знаки переноса при этом нужно удалить.

Благодарности

    Автор приносит благодарности своим родителям, знакомым и коллегам по работе.
    Губиной Наталье Анатольевне, начальнику отдела АСУ Волжского гуманитарного института (г. Волжский Волгоградской обл.), где работает автор, — за понимание и поддержку.
    Всем работникам отдела АСУ Волжского гуманитарного института — за понимание и поддержку.
    Родителям — за терпение, понимание и поддержку. Архангельскому Дмитрию Борисовичу — за дружеское участие.
    Шапошникову Игорю Владимировичу — за содействие.
    Рыбакову Евгению Евгеньевичу, заместителю главного редактора издательства "БХВ-Петербург", — за неоднократные побуждения к работе, без которых автор давно бы обленился.
    Издательству " БХВ-Петербург" — за издание моих книг.
    Разработчикам Web-обозревателей Firefox, Opera, Chrome и Safari и библиотеки Ext Core, если они меня слышат, — за замечательные программные продукты.
    Всем своим читателям и почитателям — за прекрасные отзывы о моих книгах. Всем, кого я забыл здесь перечислить, — за все хорошее.

ЧАСТЬ 1. Содержимое Web-страниц. Язык HTML 5

ГЛАВА 1
Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц 

    Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница — все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы начнется данная книга. Далее мы немного поговорим о принципах функционирования Интернета, Web-страницах и Web-сайтах, создадим нашу первую Web-страницу, начнем изучать язык HTML 5 и подберем программы, которые будем использовать в работе. Так сказать, с места в карьер…

Современный Web-дизайн. Концепция Web 2.0 

    Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра — кто знает; может быть, мы будем выходить на Web-сайты с утюга или пылесоса…
    "Я буду везде, — заявляет Интернет. — Я стану вездесущим. Все готовьтесь к моему приходу!"

Что требуется от современного Web-сайта

    Будем готовиться… Но что нам, как будущим Web-дизайнерам, для этого следует сделать? Соблюсти три несложных правила.
    1. Строго соблюдать все интернет-стандарты.
    2. Тщательно продумать наполнение Web-страниц.
    3. Позаботиться о доступности Web-страниц.
    Рассмотрим их подробнее.
    Интернет грозится прийти на самые разные устройства, которые могут быть основаны на разных аппаратных и программных платформах, зачастую сильно отличающихся друг от друга. Так, персональные компьютеры построены на аппаратной платформе Intel и программной платформе Microsoft Windows (по крайней мере, большинство). Мобильный телефон автора основан на аппаратно-программной платформе Samsung. А на чем будет работать интернет-пылесос, сейчас не может сказать никто.
    Одно объединяет все это аппаратно-программное многообразие — соответствие интернет-стандартам. Иначе устройства в лучшем случае будут отображать Web- страницы неправильно, в худшем — вообще не будут работать.
    Из этого следует первое правило из перечисленных ранее — Web-дизайнеры при создании Web-страниц обязаны строго придерживаться современных интернет-стандартов, чтобы их творения одинаково (ну, или почти одинаково) отображались на всех устройствах.
    Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье — не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.
    Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org. Все опубликованные там стандарты обязательны к применению.
    Интернет когда-то начинался как сеть ученых, которым было нужно обмениваться результатами исследований. А что представляли собой эти результаты? В основном, текст, возможно, с иллюстрациями. Ученые — публика в этом смысле невзыскательная, им вполне хватало скромных возможностей тогдашнего WWW.
    Теперь же абсолютное большинство пользователей Интернета — обычные обыватели. Им мало простого текста с парой картинок, им подавай хорошо оформленный текст, музыку и видео. Они требовательнее первых обитателей Сети.
    Отсюда вытекает второе правило — Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.
    — Структура Web-страниц должна быть хорошо продумана, чтобы посетитель сразу смог найти на них все, что ему нужно.
    — Web-страницы должны легко читаться и не "резать" глаза.
    — К важным материалам желательно привлечь внимание посетителя, а маловажные скрыть. В этом могут помочь динамические элементы: раскрывающиеся при щелчке мышью абзацы, гиперссылки, выделяющиеся при наведении курсора мыши, и пр.
    — Если Web-сайт посвящен музыке или видео, все это должно быть доступно для воспроизведения прямо на его Web-страницах, без загрузки.
    — Одним словом — все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка…)
    Интернет грозится прийти на самые разные устройства с различными характеристиками: быстродействием процессора, объемом памяти, разрешением экрана, скоростью доступа к Сети. Но все они должны обеспечивать единообразный вывод Web-страниц. Как этого достигнуть?
    Вот и третье правило — Web-дизайнеры должны заботиться о доступности страниц.
    — Web-страницы следует делать как можно более компактными. Чем компактнее файл, тем быстрее он загружается по сети — это аксиома.
    — Web-страницы не должны быть чересчур сложными. Чем сложнее Web- страница, тем больше времени и системных ресурсов требует ее обработка и вывод.
    — Web-страницы не должны требовать для отображения никакого дополнительного программного обеспечения. В идеале для их вывода достаточно только Web- обозревателя.
    Но как эти правила реализуются на практике? Давайте откроем какой-нибудь современный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org.
    Рис. 1.1. Главная Web-страница Web-сайта организации W3C
    Что же мы здесь видим?
    — Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.
    — Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.
    — Структура Web-страниц исключительно ясна — мы можем без проблем найти все, что нужно. Слева находится набор гиперссылок, ведущих на другие Web- страницы Web-сайта, посередине — список новостей и гиперссылки на избранные статьи, справа — гиперссылки на дополнительные материалы.
    — Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо- голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики — ничто не бросается в глаза.
    — Есть даже видеоролик!
    — Web-страница быстро загружается и мгновенно выводится на экран.
    — Web-страница ничего не требует для своего вывода, кроме Web-обозревателя. Налицо и соблюдение стандартов, и наполнение, и доступность. Три из трех!
    Именно такие Web-страницы мы и будем учиться создавать в данной книге.

Концепция Web 2.0

    Давайте еще раз обратимся к рассмотренным ранее правилам и немного расширим их.
    — При создании Web-страниц следует придерживаться современных интернет-стандартов. При этом нужно полностью отказаться от устаревших и закрытых интернет-технологий, как не укладывающихся в современную парадигму Web- дизайна и зачастую не поддерживаемых всеми Web-обозревателями.
    — Особое внимание нужно обратить на структуру и наполнение Web-страниц. Структура Web-страниц должна быть максимально простой, а наполнение — достаточно богатым, чтобы посетитель быстро нашел нужную ему информацию. Кроме того, необходимо создавать Web-страницы так, чтобы дизайн не мешал восприятию информации.
    — Web-страницы обязательно следует делать максимально доступными на любых устройствах. Web-страницы должны быстро загружаться и выводиться на экран. Также Web-страницы не должны требовать для отображения никакого дополнительного программного обеспечения.
    Фактически здесь мы привели постулаты так называемой концепции Web 2.0. Это список правил, которым должен удовлетворять любой Web-сайт, претендующий на звание современного. Образно выражаясь, это флаг, который совместно несут труженики Web-индустрии, шагая в ногу со временем.
    Также концепция Web 2.0 предусматривает четыре принципа, являющиеся "передним краем" Web-дизайна. Пока еще очень мало Web-сайтов им следует (и "домашний" Web-сайт W3C, увы, не исключение…). Рассмотрим их по порядку.
    Принцип первый — разделение содержимого, представления и поведения Web- страницы. Здесь содержимое — это информация, которая выводится на Web- странице, представление описывает формат вывода этой информации, а поведение — реакцию Web-страницы или отдельных ее элементов на действия посетителя. Благодаря их разделению мы сможем править, скажем, содержимое, не затрагивая представление и поведение, или поручать создание содержимого, представления и поведения разным людям.
    Принцип второй — подгружаемое содержимое. Вместо того чтобы обновлять всю Web-страницу в ответ на щелчок на гиперссылке, мы можем подгружать только ее часть, содержащую необходимую информацию. Это сильно уменьшит объем передаваемой по сети информации (сетевой трафик) и позволит выполнять какие-либо действия с данными после их подгрузки.
    Принцип третий — генерируемое содержимое. Какая-то часть Web-страницы может не загружаться по сети, а генерироваться прямо на месте, в Web-обозревателе. Так мы еще сильнее сократим сетевой трафик.
    Принцип четвертый — семантическая разметка данных. Она позволит нам связать выводимые на Web-страницу данные согласно каким-либо правилам. Например, мы можем семантически связать страницы справочника по HTML, и посетитель, загрузив какую-либо страницу, сможет сразу же перейти на связанные с ней страницы, содержащие дополнительные или родственные сведения.
    В качестве примера Web-сайта, реализующего эти четыре принципа, можно привести Web-сайт — справочник по библиотеке Ext Core, расположенный по интернет-адресу http://docs.sencha.com/core/manual/ и показанный на рис. 1.2.
    Рис. 1.2. Web-сайт — справочник по библиотеке Ext Core
    — Содержимое, представление и поведение составляющих его Web-страниц хранится отдельно, в разных файлах.
    — При переходах с одной статьи справочника на другую подгружается только сам текст статьи. Остальные части Web-страницы, в частности иерархический список статей, остаются неизменными.
    — После загрузки текста статьи на его основе генерируется окончательное ее представление. Фактически мы имеем генерируемое содержимое.
    — Статьи справочника связаны друг с другом семантически. Эти связи используются для генерирования гиперссылок на "родственные" статьи.
    Рассмотренные нами два Web-сайта — это концепция Web 2.0 в действии! Хотите создать что-то подобное? Хотите в плане поддержки интернет-стандартов "утереть нос" самому W3C? Тогда читайте эту книгу!

Интернет: как все это работает 

    Давайте еще раз посмотрим на Web-сайт — справочник по библиотеке Ext Core. И зададимся вопросом, вынесенным в заголовок данного раздела.
    Как все это работает? Откуда Web-обозреватель получает нужную Web-страницу? Кто отвечает за работу сложного механизма под названием Всемирная паутина?

Клиенты и серверы Интернета. Интернет-адреса

    Возьмем для примера главную Web-страницу Web-сайта, который мы открыли. Она должна где-то храниться. Но где? На диске другого компьютера, подключенного к сети (в данном случае — к сети Интернет), который может принадлежать как автору Web-сайта, так и сторонней организации, предоставляющей доступ в Интернет (интернет-провайдеру). И хранится она в виде файла или набора файлов, таких же, какие в изобилии "водятся" на нашем собственном компьютере.
    Но как мы смогли получить и просмотреть содержимое этого файла? Во-первых, посредством самой сети — она связала компьютер, хранящий файл, с нашим. Во- вторых, с помощью особых программ, которые, собственно, и выполнили передачу файла. Эти программы делятся на две группы.
    Программы первой группы взаимодействуют непосредственно с пользователем: принимают от него запросы на информацию, которая хранится где-то в сети, получают ее, выводят на экран и, возможно, позволяют ее править и отправлять обратно. Такие программы называют клиентами.
    Для просмотра Web-страниц мы пользуемся Web-обозревателем. Это программа- клиент; она принимает от нас интернет-адреса Web-страниц, получает файлы, хранящие их содержимое, и выводит это содержимое на экран. Программа почтового клиента позволяет как извлекать из почтового ящика полученные письма, так и создавать новые. Существуют также клиенты чата, систем мгновенных сообщений и пр.
    Но клиенты не имеют прямого доступа к хранящейся на других компьютерах информации. Они не могут просто "залезть" на жесткий диск удаленного компьютера и прочитать оттуда файл. Так сделано из соображений безопасности. Вместо этого они отправляют запросы программам второй группы — серверам.
    Серверы работают на компьютерах, хранящих информацию, которая должна быть доступна в сети. Они принимают запросы от клиентов, извлекают требуемую информацию из файлов и отправляют им. Также они могут получать введенную пользователями информацию от клиентов и сохранять их в файлах, при этом, возможно, как-то обработав. Можно сказать, что серверы выступают посредниками между клиентами и запрашиваемой ими информацией.
    Для управления Web-сайтами используются Web-серверы, которые принимают запросы от клиентов и отправляют им содержимое требуемых файлов. Для управления почтовыми службами применяются серверы электронной почты; они сохраняют пришедшие письма в файлах, выдают их почтовым клиентам по запросу, принимают от клиентов новые сообщения и отправляют их по указанному адресу — в общем, работают как почтовое отделение. Службы чатов и мгновенных сообщений также имеют свои серверы.
    Клиенты — лицо Интернета. Серверы — его сердце.
    Но как указать, какая информация и с какого сервера нам требуется? С помощью определенным образом составленного интернет-адреса.
    Каждая единица информации — файл, ящик электронной почты, канал чата, — доступная в сети, однозначно идентифицируется интернет-адресом, который представляет собой строку из букв, цифр и некоторых других символов.
    Интернет-адрес включает в себя две части:
    — интернет-адрес программы-сервера, работающей на компьютере;
    — указатель на нужную единицу информации, например, путь к файлу, имя ящика электронной почты, имя канала чата и др. (может отсутствовать).
    Рассмотрим несколько примеров интернет-адресов.
    В интернет-адресе http://www.somesite.ru/folder1/file1.htm присутствуют обе части. Здесь http://www.somesite.ru— интернет-адрес программы-сервера, в данном случае — Web-сервера, а /folder1/file1.htm — путь к запрашиваемому файлу.
    В интернет-адресе http://www.othersite.ru присутствует только интернет-адрес Web-сервера. Какая информация в этом случае будет отправлена клиенту (Web- обозревателю), мы узнаем потом.
    А в адресе user@mail.someserver.ruмы видим интернет-адрес сервера электронной почты (mail.someserver.ru) и имя почтового ящика (user).
    Разговор об интернет-адресах еще не закончен. Мы вернемся к нему в главе 6, когда будем рассматривать средства навигации по Web-сайту, в частности, гиперссылки. А пока что давайте подробнее поговорим о Web-серверах и их нелегкой "работе".

Web-сайты и Web-серверы

    Как мы только что выяснили, все интернет-программы делятся на клиенты и серверы. Клиенты работают на стороне пользователя, получают от них интернет-адреса и выводят им полученную с этих адресов информацию. Серверы принимают запросы от клиентов, находят запрашиваемую ими информацию на дисках серверных компьютеров и отправляют ее клиентам.
    Во Всемирной паутине WWW в качестве клиентов используются Web-обозреватели, а в качестве серверов — Web-серверы. Это мы тоже знаем.
    Любая информация на дисках компьютера хранится в файлах. Ну, это знает любой более-менее подкованный пользователь…
    Web-страницы также хранятся в файлах с расширением htm или html (или, с учетом описанных во введении типографских соглашений, htm[l]). Одна Web-страница занимает один или более файлов.
    Web-сайт — это совокупность множества Web-страниц, объединенных общей темой и связанных друг с другом посредством гиперссылок (о них мы поговорим в главе 6). Следовательно, Web-сайт — это также набор файлов, возможно, хранящихся в разных папках, — так ими удобнее управлять.
    А теперь — внимание! Мы рассмотрим некоторые "интимные" подробности работы Web-серверов, которые знает не каждый интернетчик.
    Прежде всего, для хранения всех файлов, составляющих Web-сайт, на диске серверного компьютера выделяется особая папка, называемая корневой папкой Web- сайта. Путь к этой папке указывается в настройках Web-сервера, чтобы он смог ее "найти".
    Все, повторим — все файлы, составляющие Web-сайт, должны храниться в корневой папке или в папках, вложенных в нее. Файлы, расположенные вне корневой папки, с точки зрения Web-сервера не существуют. Так сделано для безопасности, чтобы злоумышленник не смог получить доступ к дискам серверного компьютера.
    Когда в интернет-адресе указывается путь к запрашиваемому файлу, Web-сервер отсчитывает его относительно корневой папки. Это проще всего показать на примерах.
    — http://www.somesite.ru/page1.htm— в ответ будет отправлен файл page1.htm, хранящийся в корневой папке Web-сайта.
    — http://www.somesite.ru/chapter2/page6.htm— в ответ будет отправлен файл page6.htm, хранящийся в папке chapter2, которая вложена в корневую папку Web-сайта.
    — http://www.somesite.ru/downloads/others/archive.zip— в ответ будет отправлен файл archive.zip, хранящийся в папке others, вложенной в папку downloads, которая, в свою очередь, вложена в корневую папку Web-сайта.
    Но ведь мы нечасто набираем интернет-адрес, включающий путь к запрашиваемому файлу. Гораздо чаще интернет-адреса включают только адрес программы- сервера, например, http://www.somesite.ru. Что в таком случае делает Web-сервер? Какой файл он отправляет в ответ?
    Специально для этого предусмотрены так называемые Web-страницы по умолчанию. Такая Web-страница выдается клиенту, если он указал в интернет-адресе только путь к файлу, но не его имя. Обычно файл Web-страницы по умолчанию имеет имя default.htm[l] или index.htm[l], хотя его можно изменить в настройках Web-сервера.
    Так, если мы наберем интернет-адрес http://www.somesite.ru, Web-сервер вернет нам файл Web-страницы по умолчанию, хранящийся в корневой папке Web-сайта. Практически всегда это будет главная Web-страница — та, с которой начинается "путешествие" по Web-сайту.
    Мы можем набрать и интернет-адрес вида http://www.somesite.ru/chapter2/. Тогда Web-сервер отправит нам файл Web-страницы по умолчанию, хранящийся в папке chapter2, вложенной в корневую папку Web-сайта.
    С Web-сайтами и Web-серверами пока все. Настала пора заглянуть внутрь Web- страниц и, чего уж тянуть резину, создать нашу первую, совсем простую Web- страничку. И по ходу дела начать изучение языка HTML 5, без которого в Web- дизайне не обойтись.

Основные принципы создания Web-страниц. Язык HTML 5

    Web-страницы выглядят зачастую очень пестро: разнокалиберные куски текста, таблицы, картинки, врезки, сноски и даже фильмы. Но описывается все это в виде обычного текста. Да-да, Web-страницы — суть текстовые файлы, которые можно создать с помощью хорошо знакомого нам редактора Блокнот, поставляемого в составе Windows! (Разумеется, подойдет любой аналогичный текстовый редактор.)
    Для форматирования содержимого Web-страниц применяется особый язык — HTML (HyperText Markup Language, язык гипертекстовой разметки). С помощью команд — тегов — этого языка создают и абзацы текста, и заголовки, и врезки, и даже таблицы.
    Первая версия языка HTML появилась очень давно, еще в 1992 году. С тех пор по Сети утекло немало гигабайт… HTML также не стоял на месте. В данный момент готовится к выходу окончательная спецификация новой версии HTML под номером 5, и многие Web-обозреватели уже поддерживают некоторые ее возможности. Ее-то мы и будем изучать.

Язык HTML и его теги

    Изучать HTML лучше всего на примере. Так что давайте сразу же создадим нашу первую Web-страничку. Благо Windows уже содержит необходимый для этого инструмент — Блокнот.
    НА ЗАМЕТКУ
    Вообще, для создания Web-страниц существует множество специальных программ — Web-редакторов. Они позволяют работать с Web-страницами, даже не зная HTML, — как с документами Microsoft Word, просто набирая текст и форматируя его. Также они следят за правильностью расстановки тегов, помогут быстро создать сложный элемент Web-страницы и даже опубликовать готовый Web-сайт в Сети. К таким программам принадлежит, в частности, известный Web-редактор Adobe Dreamweaver. Однако мы пока что будем пользоваться простейшим текстовым редактором Блокнот. Это позволит нам лучше познакомиться с HTML.
    Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в листинге 1.1.
    Листинг 1.1
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Пример Web-страницы</TITLE>
    </HEAD>
    <BODY>
    <H1>Справочник по HTML</H1>
    <P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке
    <STRONG>HTML</STRONG>.</P>
    </BODY>
    </HTML>
    Проверим набранный код на ошибки и сохраним в файл с именем 1.1.htm. Только сделаем при этом две важные вещи.
    1. Сохраним HTML-код в кодировке UTF-8. Для этого в диалоговом окне сохранения файла Блокнота найдем раскрывающийся список Кодировка и выберем в нем пункт UTF-8.
    2. Заключим имя файла в кавычки. Иначе Блокнот добавит к нему расширение txt, и наш файл получит имя 1.1.htm.txt.
    Все, наша первая Web-страница готова! Теперь осталось открыть ее в Web-обозревателе и посмотреть на результат.
    Мы можем использовать стандартно поставляемый в составе Windows Web- обозреватель Microsoft Internet Explorer. Но Internet Explorer на данный момент не поддерживает HTML 5; его поддержку обещают только в версии 9, которая пока находится в разработке. HTML 5 поддерживают последние версии Mozilla Firefox, Opera, Apple Safari и Google Chrome, поэтому предпочтительнее какая-либо из этих программ.
    Откроем же Web-страницу в выбранном Web-обозревателе (автор выбрал Firefox) и посмотрим на нее (рис. 1.3).
    Рис. 1.3. Наша первая Web-страница
    Видите? Мы создали Web-страницу, содержащую большой "кричащий" заголовок,
    абзац текста, который автоматически разбивается на строки и содержит фрагмент текста, выделенный полужирным шрифтом (аббревиатура "HTML"). И все это — в "голом" тексте, набранном в Блокноте!
    Теперь посмотрим, что же мы такое написали в файле 1.1.htm. Пока что ограничимся небольшим фрагментом HTML-кода (листинг 1.2).
    Листинг 1.2
    <H1>Справочник по HTML</H1>
    <P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>
    Здесь мы видим текст заголовка и абзаца. И еще странные слова, взятые в угловые скобки — символы < и >. Что это такое?
    Это и есть теги HTML, о которых упоминалось ранее. Они превращают тот или иной фрагмент HTML-кода в определенный элемент Web-страницы: абзац, заголовок или текст, выделенный полужирным шрифтом.
    Начнем с тегов <H1> и </H1>, поскольку они идут первыми. Эти теги превращают фрагмент текста, находящийся между ними, в заголовок. Тег <H1> помечает начало фрагмента, на который распространяется действие тега, и называется открывающим. А тег </H1> устанавливает конец "охватываемого" фрагмента и называется закрывающим. Что касается самого фрагмента, заключенного между открывающим и закрывающим тегами, то он называется содержимым тега. Именно к содержимому применяется действие тега.
    Все теги HTML представляют собой символы < и >, внутри которых находится имя тега, определяющее назначение тега. Закрывающий тег должен иметь то же имя, что и открывающий; единственное отличие закрывающего тега — символ /, который ставится между символом < и именем тега.
    Рассмотренные нами теги <H1> и </H1> в HTML фактически считаются одним тегом <H1>. Такой тег называется парным.
    Поехали дальше. Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)
    Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P>. Это значит, что содержимое тега <STRONG> будет отображаться как часть абзаца (тега <P>).
    Давайте ради интереса выделим слова "Web-дизайном" курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM>:
    <P>Приветствуем на нашем Web-сайте всех, кто занимается
    <EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех
    .
    Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>. Получилось! Да мы уже стали Web-дизайнерами!
    Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.
    — Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.
    — Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.
    — В обычном тексте, не являющемся тегом, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web- обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.
    На этом пока закончим. Впоследствии, изучив другие языковые элементы HTML, мы пополним список этих правил.

Вложенность тегов

    Если мы снова посмотрим на приведенный в листинге 1.2 фрагмент HTML-кода, то заметим, что одни теги вложены в другие. Так, тег <STRONG> вложен в тег <P>, являясь частью его содержимого. Тег <P>, в свою очередь, вложен в тег <BODY>, а тот — в "глобальный" тег <HTML>. (Теги <BODY> и <HTML> мы рассмотрим чуть позже.) Такая вложенность тегов в HTML — обычное явление.
    Когда Web-обозреватель встречает тег, вложенный в другой тег, он как бы накладывает действие "внутреннего" тега на эффект "внешнего". Так, действие тега <STRONG> будет наложено на действие тега <P>, и фрагмент абзаца окажется выделенным полужирным шрифтом, при этом оставаясь частью этого абзаца.
    Давайте для примера текст "Web-дизайн", который мы недавно поместили в тег <EM>, заключим еще и в тег <STRONG>. Вот так:
    <P>Приветствуем на нашем Web-сайте всех, кто занимается
    <EM><STRONG>Web-дизайном</STRONG></EM>! Здесь вы сможете найти
    .
    В этом случае данный текст будет выделен полужирным курсивом. Иными словами, действие тега <STRONG> будет наложено на действие тега <EM>.
    Теперь — внимание! Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи.
    Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):
    <P>Приветствуем на нашем Web-сайте всех, кто занимается
    <EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти
    .
    Web-обозреватель может отобразить нашу Web-страницу неправильно.
    НА ЗАМЕТКУ
    Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера. Но именно мелкие!
    Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем. В свою очередь, тег, вложенный в данный тег, называется дочерним, или потомком. Так, для тега <EM> в приведенном далее примере тег <P> — родительский, а тег <STRONG> — дочерний. Любой тег может иметь сколько угодно дочерних тегов, но только один родительский (что, впрочем, понятно — не может же он быть непосредственно вложен одновременно в два тега).
    Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, — дочерним, или потомком. То же самое, что и в случае тегов.
    Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег <P>, то тег <EM> будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег <P>. Тег <STRONG> же будет иметь второй уровень вложенности, поскольку он вложен в тег <EM>, а тот, в свою очередь, — в тег <P>. В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.
    Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов (листинг 1.3). На отображение Web-страницы они никак не влияют.
    Листинг 1.3
    <BODY>
    <H1>Справочник по HTML</H1>
    <P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>
    </BODY>
    Здесь сразу видно, что теги <H1> и <P> вложены в тег <BODY>, — видно по отступам.

Секции Web-страницы

    Снова вернемся в полному HTML-коду нашей Web-странички. Мысленно удалим из него уже рассмотренный фрагмент и получим листинг 1.4.
    Листинг 1.4
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Пример Web-страницы</TITLE>
    </HEAD>
    <BODY>
    .
    </BODY>
    </HTML>
    Здесь применены несколько тегов, которые нам не знакомы. Это так называемые невидимые теги — теги, содержимое которых никак не отображается Web- обозревателем. Они занимаются тем, что хранят сведения о параметрах самой Web- страницы и делят ее на две секции, имеющие принципиально разное назначение.
    Секция тела Web-страницы находится внутри парного тега <BODY>. Она описывает само содержимое Web-страницы, то, что будет выведено на экран. Именно секцию тела мы рассматривали в предыдущих разделах.
    А в парном теге <HEAD> находится секция заголовка Web-страницы. (Не путать с заголовком, который создается с помощью тега <H1>!) В эту секцию помещают сведения о параметрах Web-страницы, не отображаемые на экране и предназначенные исключительно для Web-обозревателя.
    И заголовок, и тело Web-страницы находятся внутри парного тега <HTML>, который расположен на самом высшем (нулевом) уровне вложенности и не имеет родителя.
    Любая Web-страница должна быть правильно отформатирована: иметь секции заголовка и тела и все соответствующие им теги. Только в таком случае она будет считаться корректной с точки зрения стандартов HTML.

Метаданные и тип Web-страницы

    Вернемся к сведениям о параметрах Web-страницы, которые находятся в секции ее заголовка. Что это за параметры? И что они задают?
    Сначала введем еще пару терминов. Параметры Web-страницы, не отображаемые на экране и предназначенные для Web-обозревателя, назовем метаданными. Это своего рода данные, описывающие другие данные, в нашем случае — Web-страницу. А HTML-теги, которые задают метаданные, называются метатегами.
    Прежде всего, в метаданные входит название Web-страницы. Оно отображается в заголовке окна Web-обозревателя, где выводится содержимое данной Web- страницы, и хранится в "истории" (списке посещенных к настоящему времени Web- страниц). Название помещается в парный тег <TITLE> и располагается в секции заголовка Web-страницы:
    <HEAD>
    .
    <TITLE>Пример Web-страницы</TITLE>
    </HEAD>
    Далее, обычно в секции заголовка расположен особый метатег, задающий кодировку, в которой сохранена Web-страница. Этот метатег имеет "говорящее" имя
    <META>:

    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    .
    </HEAD>
    Приведенный тег задает кодировку UTF-8, в которой мы сохранили нашу Web- страничку. Существуют аналогичные теги, задающие кодировки 1251, КОИ-8, кодировка западноевропейских и восточноазиатских языков и др.
    НА ЗАМЕТКУ
    Кодировка UTF-8 — это разновидность кодировки Unicode, предназначенная для Web-дизайна. Кодировка Unicode (а значит, и UTF-8) может закодировать все символы всех языков, имеющихся на Земле. Именно она в настоящее время чаще всего применяется для создания Web-страниц.
    Кстати, вы не заметили ничего странного в теге <META>? У него нет ни содержимого, ни закрывающей пары! Это так называемый одинарный тег, который имеет только открывающую пару. Такой тег действует в той точке HTML-кода, где он сам находится, и либо задает метаданные, либо помещает в соответствующее место Web-страницы какой-либо элемент, не относящийся к тексту. Впоследствии нам будут часто встречаться одинарные теги.
    Теперь осталось рассмотреть последний тег, находящийся в самом начале HTML-кода нашей Web-страницы. Этот тег находится даже вне "всеобъемлющего" тега <HTML>. Важная, должно быть, персона… Вот он:
    <!DOCTYPE html>
    Метатег <!DOCTYPE> задает, во-первых, версию языка HTML, на которой написана Web-страница, а во-вторых, разновидность данной версии. Так, существуют мета- теги <!DOCTYPE>, указывающие на HTML 5, "строгую" и "переходную" разновидности HTML 4.01 (это предыдущая версия языка HTML, еще действующая на данный момент) и язык XHTML (ответвление HTML, имеющее несколько другой синтаксис).
    Так вот, метатег <!DOCTYPE html>, который мы поставили в начало нашей Web- странички, указывает на HTML 5. Будем работать только с самыми новыми технологиями! Долой всякое старье!

Атрибуты HTML-тегов

    Последний важный вопрос, который мы здесь рассмотрим, — атрибуты HTML- тегов. После этого мы пока что закончим с HTML и обратимся к принципам современного Web-дизайна.
    Посмотрим на тег <META>, задающий кодировку Web-страницы:
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    Здесь мы видим, что между символами < и >, помимо имени тега, присутствуют еще какие-то данные. Это атрибуты тега, задающие его параметры. В частности, два атрибута данного тега <META> указывают, что документ представляет собой Web-страницу, и задают ее кодировку.
    Каждый атрибут тега имеет имя, за которым ставится знак равенства, и значение данного атрибута, взятое в двойные кавычки. Так, атрибут с именем HTTP-EQUIV имеет значение "Content-Type", говорящее о том, что данный метатег задает тип документа. А атрибут с именем CONTENT имеет значение "text/html; charset=utf-8", обозначающее, что данный документ представляет собой Web-страницу, и указывающее, что она набрана в кодировке UTF-8.
    Атрибуты тегов бывают обязательными и необязательными. Обязательные атрибуты должны присутствовать в теге в обязательном порядке. Необязательные же атрибуты могут быть опущены; в таком случае тег ведет себя так, будто соответствующему атрибуту присвоено значение по умолчанию.
    Атрибуты HTTP-EQUIV и CONTENT тега <META> обязательные — кому нужен метатег без метаданных… А вот атрибут ID, поддерживаемый практически всеми тегами HTML, необязательный, он используется только в особых случаях:
    <H1 ID="header1">Справочник по HTML</H1>
    В частях II и III, работая со стилями CSS и Web-сценариями, мы будем активно пользоваться атрибутом тега ID. А пока что оставим его в покое.
    Ранее мы изучили три правила написания HTML-кода. Добавим к ним еще шесть.
    — Имена атрибутов тегов могут быть написаны как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена атрибутов тегов пишут прописными буквами, а их значения — строчными, если, конечно, значение не чувствительно к регистру букв.
    — Имена атрибутов тегов пишут между символами < и > после имени тега и отделяют от него пробелом или разрывом строки. Если в теге присутствуют не- сколько атрибутов, их отделяют друг от друга также пробелами или разрывами строки.
    — Внутри имен атрибутов не должны присутствовать пробелы, в противном случае Web-обозреватель посчитает, что это не один атрибут, а несколько.
    — Значение атрибута тега пишут после его имени и заключают в двойные кавычки. Между именем атрибута тега и его значением ставят знак равенства.
    — Между именем атрибута тега, знаком равенства и открывающими кавычками могут присутствовать пробелы или разрывы строк.
    — Символы двойных кавычек недопустимы и не должны присутствовать в обычном тексте, иначе Web-обозреватель посчитает следующий за ними текст значением атрибута тега.
    На этом пока закончим с HTML. В последующих главах части I мы продолжим его изучение.

Программы, которыми мы будем пользоваться 

    Поговорим о программах, с которыми будем работать. Не считая Блокнота (или аналогичного текстового редактора), таких программ две: Web-обозреватель и Web-сервер.
    Что дальше?
    В этой главе мы познакомились с современными веяниями в Web-дизайне, узнали о концепции Web 2.0, поняли, как работает Интернет в целом и WWW в частности, начали изучать язык HTML, создали свою первую Web-страницу, и выбрали себе для работы Web-обозреватель и Web-сервер. В общем, неплохо стартовали…
    Теперь на какое-то время мы оставим в покое принципы и концепции и сосредоточимся на практике, а именно на HTML. В следующей главе мы рассмотрим средства структурирования текста: абзацы, заголовки, списки и цитаты. Так сказать, научимся делить текст на "куски".

Web-обозреватель

    Web-обозревателей на свете довольно много. Но если отбросить старые и специализированные, останется всего пять: Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome и Apple Safari.
    Разумеется, все эти программы поддерживают языки HTML, CSS (язык описания каскадных таблиц стилей) и JavaScript (язык, на котором пишутся Web-сценарии). Большинство этих программ поддерживает некоторый набор возможностей HTML 5 и CSS 3 (новая версия CSS):
    — Mozilla Firefox — начиная с версии 3.5;
    — Opera — начиная с версии 9.5;
    — Google Chrome — начиная с версии 2.0.158.0;
    — Apple Safari — начиная с версии 4.0.
    НА ЗАМЕТКУ
    Отдельные возможности HTML 5 и CSS 3 начали поддерживаться и в более ранних версиях этих программ. Однако, чтобы успешно просматривать Web-страницы, которые мы будем создавать в процессе изучения этой книги, следует использовать указанные версии или более новые.
    А что же Microsoft Internet Explorer? Поддерживает ли он HTML 5 и CSS 3 на данный момент? К сожалению, нет. Поддержку HTML 5 и CSS 3 обещают лишь в версии 9.0, которая сейчас только разрабатывается.
    Но какой же Web-обозреватель нам выбрать? Какой угодно из перечисленных представителей "передовой четверки" — Firefox, Opera, Chrome или Safari. А лучше — сразу все, чтобы удостовериться, что наши Web-страницы в любом из них отображаются правильно.

Web-сервер

    Когда мы тестировали нашу первую Web-страницу, то прекрасно обошлись без Web-сервера, открыв ее прямо в Web-обозревателе. Но в дальнейшем, особенно когда мы начнем реализовывать подгрузку содержимого, Web-сервер все-таки нам понадобится. Многие Web-сценарии нормально работают только в том случае, если Web-страница загружена с Web-сервера. Это сделано ради безопасности.
    Так что давайте займемся поиском подходящего Web-сервера.
    К счастью, долго искать нам не придется. В составе Windows XP/2003/Vista/Se7en поставляется вполне серьезный Web-сервер Microsoft Internet Information Services. Он исключительно прост в установке и настройке, а его возможностей нам вполне хватит.
    Как установить и запустить Internet Information Services, описано в документации, поставляемой в составе Windows. Настраивать его, как правило, не нужно — он сразу после установки "бросается в бой". Более того, Web-сервер Microsoft после установки создает небольшой тестовый Web-сайт, корневая папка которого находится по пути C: \Inetpub\wwwroot. Этой папкой мы и воспользуемся для тестирования наших Web-страничек.
    НА ЗАМЕТКУ
    Если вам не нравится Internet Information Services, вы можете использовать любой другой. Например, популярный Web-сервер Apache, хотя его придется настраивать сразу после установки.
    Вообще, какой именно Web-сервер установлен, не принципиально. Главное — чтобы он был.
    Теперь испытаем свежеустановленный Web-сервер в действии. Для этого нам понадобится любая программа управления файлами (например, поставляемый в составе Windows Проводник). Откроем в ней корневую папку созданного при установке Web-сайта (в случае Internet Information Services это папка C: \Inetpub\wwwroot).
    ВНИМАНИЕ!
    Если вы пользуетесь Internet Information Services, поставляемым с Windows Vista или Windows Se7en, то имейте в виду, что папка C: \Inetpub\wwwroot защищена UAC (User Access Control, управление доступом пользователя) — новой системой защиты ключевых папок и файлов, встроенной в эти операционные системы. Поэтому вам придется сначала запустить Проводник или иную программу управления файлами, которой вы пользуетесь, от имени администратора. Для этого достаточно щелкнуть на ярлыке этой программы правой кнопкой мыши, выбрать в появившемся на экране контекстном меню пункт Запуск от имени администратора (Run As Administrator) и положительно ответить на предупреждение UAC.
    Удалим из корневой папки все имеющиеся там файлы, чтобы они нам не мешали. И скопируем туда нашу первую Web-страницу 1.1.htm.
    Теперь откроем выбранный ранее Web-обозреватель и наберем в нем интернет-адрес http://localhost/1.1.htm. Интернет-адрес http://localhost идентифицирует наш собственный компьютер (локальный хост), а /1.1.htm — указание на файл 1.1.htm, хранящийся в корневой папке Web-сайта.
    Если мы все сделали правильно, Web-обозреватель отобразит нашу Web-страницу (см. рис. 1.3). Значит, Web-сервер работает.

ГЛАВА 2. Структурирование текста 

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

Абзацы

    Если оформить текст в виде большого монолитного "куска", его вряд ли кто-то будет читать. Такой "кусок" текста выглядит как высокий черный забор, за которым не видно ни единой мысли автора, забор без единой дверцы, без единой щелочки.
    Именно поэтому текст всегда разбивают на абзацы. Небольшие, включающие по несколько связанных по смыслу предложений, они доносят авторский текст постепенно, по частям, от простого к сложному. В общем, превращают непроницаемый "забор" в читабельный текст.
    Как мы уже знаем из главы 1, язык HTML для создания абзаца предоставляет парный тег <P>. Содержимое этого тега становится текстом абзаца:
    <P>Я — совсем короткий абзац.</P>
    <P>А я — уже более длинный абзац. Возможно, Web-обозреватель разобьет меня на две строки.</P>
    Абзац HTML отделяется небольшим отступом от предыдущего и последующего элементов страницы. Если абзац полностью помещается по ширине в родительский элемент Web-страницы, он будет выведен в одну строку; в противном случае Web- обозреватель разобьет его текст на несколько более коротких строк.
    Абзац — это независимый элемент Web-страницы, который отображается отдельно от других элементов. Такие элементы Web-страницы называются блочными, или блоками.
    Правила отображения текста абзаца Web-обозревателем:
    — два и более следующих друг за другом пробела считаются за один пробел;
    — перевод строки считается за пробел;
    — пробелы и переводы строки между тегами, создающие блочные элементы, никак не отображаются на Web-странице. (Благодаря этому мы можем форматировать HTML-код для более удобного чтения, в том числе ставить отступы для обозначения вложенности тегов.)
    Эти же правила справедливы для других блочных элементов, которые мы изучим в этой главе.
    Настало время попрактиковаться. Давайте создадим главную Web-страницу нашего первого Web-сайта — справочника по HTML и CSS. Откроем Блокнот и наберем в нем HTML-код, приведенный в листинге 2.1.
    Листинг 2.1
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Справочник по HTML и CSS</TITLE>
    </HEAD>
    <BODY>
    <P>Справочник по HTML и CSS</P>
    <P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках HTML и CSS.</P>
    <P>Русская Википедия определяет термин HTML так:</P>
    <P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>
    <P>Пожалуй, ни убавить ни прибавить…</P>
    <P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
    <P>абзацы;</P>
    <P>заголовки;</P>
    <P>цитаты;</P>
    <P>списки;</P>
    <P>таблицы;</P>
    <P>графические изображения;</P>
    <P>аудио- и видеоролики.</P>
    <P>Основные принципы HTML</P>
    <P>. </P>
    <P>Теги HTML</P>
    <P>!DOCTYPE, BODY, EM, HEAD, HTML, META, P, STRONG, TITLE</P>
    </BODY>
    </HTML>
    Пока это только заготовка для главной Web-страницы. Позднее мы будем дополнять и править ее.
    Создадим папку, куда будем "складывать" файлы, составляющие наш Web-сайт. И сохраним в этой папке набранный HTML-код, дав файлу имя index.htm. Как мы помним из главы 1, файл главной Web-страницы Web-сайта должен иметь имя index.htm[l] (или default.htm[l], но это встречается реже).
    ВНИМАНИЕ!
    Впоследствии мы будем сохранять все файлы, составляющие наш Web-сайт, в специально созданной папке. Если какой-либо файл нужно сохранить где-то еще, автор сообщит об этом особо.
    Сразу же откроем созданную Web-страницу в Web-обозревателе — так мы сразу сможем определить, нет ли ошибок. Если ошибки все-таки есть, исправим их.
    Пока что наша Web-страничка содержит одни абзацы. Первое, что мы должны в нее добавить, — это…

Заголовки

    Помимо абзацев, большой текст для удобства чтения и поиска в нем нужного фрагмента обычно делят на более крупные части: параграфы, главы, разделы. HTML не предоставляет средств для такого структурирования текста. Но он позволяет создать заголовки, которые делят текст на части, по крайней мере, визуально. Как в обычной "бумажной" книге.
    Прежде всего, уясним, что в HTML есть понятие уровня заголовка, указывающее, насколько крупную часть текста открывает данный заголовок. Всего таких уровней шесть, и обозначаются они числами от 1 до 6.
    — Заголовок первого уровня (1) открывает самую крупную часть текста. Как правило, это заголовок всей Web-страницы. Web-обозреватель выводит заголовок первого уровня самым большим шрифтом.
    — Заголовок второго уровня (2) открывает более мелкую часть текста. Обычно это большой раздел. Web-обозреватель выводит заголовок второго уровня меньшим шрифтом, чем заголовок первого уровня.
    — Заголовок третьего уровня (3) открывает еще более мелкую часть текста; обычно главу в разделе. Web-обозреватель выводит такой заголовок еще меньшим шрифтом.
    — Заголовки четвертого, пятого и шестого уровней (4–6) открывают отдельные параграфы, крупные, более мелкие и самые мелкие соответственно. Web- обозреватель выводит заголовки четвертого и пятого уровня еще меньшим шрифтом, а заголовок шестого уровня — тем же шрифтом, что и обычные абзацы, только полужирным.
    На Web-страницах небольшого и среднего размера обычно применяют заголовки первого, второго и третьего уровня. Меньшие уровни используются только на очень больших Web-страницах, содержащих сложно структурированный текст.
    Для создания заголовка HTML предоставляет парный тег <Hn>, где n — уровень заголовка. Содержимое этого тега станет текстом заголовка (листинг 2.2).
    Листинг 2.2
    <H1>Я — заголовок Web-страницы, самый главный</H1>
    <H2>Я — заголовок раздела</H2>
    <H3>Я — заголовок главы</H3>
    <H4>Я — заголовок крупного параграфа</H4>
    <H5>Я — заголовок параграфа поменьше</H5>
    <H6>А я — заголовок маленького параграфа. Ой, какие все вокруг большие!..</H6>
    Заголовок также относится к блочным элементам Web-страницы. При его выводе на экран Web-обозреватель следует тем же правилам, что и для абзаца.
    Заголовки — это то, чего не хватает нашей Web-страничке index.htm. Давайте их добавим (листинг 2.3).
    Листинг 2.3
    <H1>Справочник по HTML и CSS</H1>
    .
    <H2>Основные принципы HTML</H2>
    .
    <H2>Теги HTML</H2>
    Мы просто заменили теги <P> в соответствующих фрагментах HTML-кода на теги
    <H1> и <H2>. Теперь можем открыть Web-страницу в Web-обозревателе и посмотреть на результат.

Списки

    Списки используются для того, чтобы представить читателю перечень каких-либо позиций, пронумерованных или непронумерованных, — пунктов списка. Список с пронумерованными пунктами так и называется — нумерованным, а с непронумерованными — маркированным. В маркированных списках пункты помечаются особым значком — маркером, который ставится левее пункта списка.
    Маркированные списки обычно служат для простого перечисления каких-либо позиций, порядок следования которых не важен. Если же следует обратить внимание читателя на то, что позиции должны следовать друг за другом именно в том порядке, в котором они перечислены, следует применить нумерованный список.
    Web-обозреватель выводит список с отступом слева. Расстояние между пунктами списка он делает меньшими чем в случае абзацев или заголовков. Также он сам расставляет необходимые маркеры или нумерацию.
    Любой список в HTML создается в два этапа. Сначала пишут строки, которые станут пунктами списка, и каждую из этих строк помещают внутрь парного тега <LI>. Затем все эти пункты помещают внутрь парного тега <UL> (если создается маркированный список) или <OL> (при создании нумерованного списка) — эти теги определяют сам список (листинг 2.4).
    Листинг 2.4
    <UL>
    <LI>Я — первый пункт маркированного списка.</LI>
    <LI>Я — второй пункт маркированного списка.</LI>
    <LI>Я — третий пункт маркированного списка.</LI>
    </UL>
    .
    <OL>
    <LI>Я — первый пункт нумерованного списка.</LI>
    <LI>Я — второй пункт нумерованного списка.</LI>
    <LI>Я — третий пункт нумерованного списка.</LI>
    </OL>
    Списки можно помещать друг в друга, создавая вложенные списки. Делается это
    следующим образом. Сначала во "внешнем" списке (в который должен быть помещен вложенный) отыскивают пункт, после которого должен находиться вложенный список. Затем HTML-код, создающий вложенный список, помещают в разрыв между текстом этого пункта и его закрывающим тегом </LI>. Если же вложенный список должен помещаться в начале "внешнего" списка, его следует вставить между открывающим тегом <LI> первого пункта "внешнего" списка и его текстом. Что, впрочем, логично.
    В листинге 2.5 представлен HTML-код, создающий два списка, один из которых вложен внутрь другого. Обратите внимание, где размещается HTML-код, создающий вложенный список.
    Листинг 2.5
    <UL>
    <LI>Я — первый пункт внешнего списка.</LI>
    <LI>Я — второй пункт внешнего списка.
    <UL>
    <LI>Я— первый пункт вложенного списка.</LI>
    <LI>Я— второй пункт вложенного списка.</LI>
    <LI>Я— третий пункт вложенного списка.</LI>
    </UL>
    </LI>
    <LI>Я — третий пункт внешнего списка.</LI>
    </UL>
    HTML позволяет вкладывать нумерованный список внутрь маркированного и наоборот. Глубина вложения списков не ограничена.
    Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега <DL>. Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег <DT>, а разъяснения — в парный тег <DD> (листинг 2.6).
    Листинг 2.6
    <DL>
    <DT>Содержимое</DT>
    <DD>Информация, отображаемая на Web-странице</DD>
    <DT>Представление</DT>
    <DD>Набор правил, определяющих формат отображения содержимого</DD>
    <DT>Поведение</DT>
    <DD>Набор правил, определяющих реакцию Web-страницы или ее элементов на действия посетителя</DD>
    </DL>
    Осталось сказать, что списки и их пункты относятся к блочным элементам Web-страницы, и при их выводе на экран Web-обозреватель руководствуется теми же правилами, что и при выводе абзацев и заголовков.
    На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).
    Листинг 2.7
    <UL>
    <LI>абзацы;</LI>
    <LI>заголовки;</LI>
    <LI>цитаты;</LI>
    <LI>списки;</LI>
    <LI>таблицы;</LI>
    <LI>графические изображения;</LI>
    <LI>аудио- и видеоролики.</LI>
    </UL>
    Теперь наша Web-страничка стала выглядеть симпатичнее.

Цитаты

    В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.
    HTML уже приготовил для нас выход из положения — парный тег <BLOCKQUOTE>, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web- обозреватель выводит цитату с отступом слева.
    Листинг 2.8
    <BLOCKQUOTE>
    <P>Я — начало большой цитаты.</P>
    <P>Я — продолжение большой цитаты.</P>
    </BLOCKQUOTE>
    Как видим, в тег <BLOCKQUOTE> можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам.
    Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).
    Листинг 2.9
    <BLOCKQUOTE>
    <P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>
    </BLOCKQUOTE>

Текст фиксированного формата

    Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
    Новая Web-страница (листинг 2.10) будет посвящена тегу <TITLE>.
    Листинг 2.10
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Тег TITLE</TITLE>
    </HEAD>
    <BODY>
    <H1>Тег TITLE</H1>
    <P>Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</P>
    <H6>Пример:</H6>
    <P>!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!
    !HEAD!</P>
    </BODY>
    </HTML>
    Здесь мы поместили краткое описание тега <TITLE> и код примера, имеющий такой вид:
    !HEAD!
    !TITLE!Я — заголовок Web-страницы!/TITLE!
    !/HEAD!
    Вместо символов < и >, которые, как мы помним из главы 1, недопустимы в обычном тексте, мы поставили восклицательные знаки. В главе 3 мы узнаем, как все- таки вставить в текст недопустимые символы, и заменим их.
    Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?
    Рис. 2.1. Web-страница t_title.htm в Web-обозревателе. Обратим внимание на код примера
    Как видно на рис. 2.1, Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?
    Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.
    Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.
    Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк, язык HTML предусматривает парный тег <PRE>. Выводимый текст помещают внутри этого тега (листинг 2.11).
    Листинг 2.11
    <PRE>Я — текст, который будет выведен на Web-страницу
    со всеми
    отступами и
    переносами строк.</PRE>
    Такой текст называется текстом фиксированного формата.
    Правила отображения текста фиксированного формата:
    — для вывода используется моноширинный шрифт (у моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у которых ширина символов различна);
    — все пробелы и переносы строк сохраняются при выводе (это мы уже знаем);
    — если строка текста фиксированного формата не помещается в окне Web- обозревателя по ширине, она ни в коем случае не будет переноситься. Из-за этого может возникнуть потребность в горизонтальной прокрутке Web-страницы. (что, вообще-то, плохой стиль Web-дизайна…);
    — возможно наличие HTML-тегов для выделения текста и гиперссылок (подробнее о них будет рассказано в главах 3 и 5).
    Текст фиксированного формата также является блочным элементом.
    Исправим HTML-код Web-страницы t_title.htm так, чтобы пример выводился в виде текста фиксированного формата (листинг 2.12).
    Листинг 2.12
    <!DOCTYPE html>
    <HTML>
    .
    <H6>Пример:</H6>
    <PRE>!HEAD!
    !TITLE!Я — заголовок Web-страницы!/TITLE!
    !HEAD!</PRE>
    </BODY>
    </HTML>
    Откроем исправленную Web-страницу в Web-обозревателе и убедимся, что он выводится правильно (рис. 2.2).
    Как правило, текст фиксированного формата используется для вывода исходных текстов программ и быстрой публикации в Сети документов, набранных обычным текстом. В качестве примера можно вспомнить библиотеку Мошкова (http://www.lib.ru), в которой все книги опубликованы как раз в виде текста фиксированного формата.

Горизонтальные линии

    Что бы нам еще такое сделать с Web-страницами… Давайте дополнительно выделим на главной Web-странице index.htm цитату из Википедии, описывающую HTML. Только как?
    Для любителей все выделять HTML припас подарок — горизонтальную линию, создаваемую с помощью одинарного тега <HR>:

    <P>Я буду отделен от следующего абзаца горизонтальной линией.</P>
    <HR>
    <P>Я отделен от предыдущего абзаца горизонтальной линией.</P>
    Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web- страницы, имеет один-два пиксела в толщину и выпуклый или вдавленный вид (конкретные параметры зависят от Web-обозревателя). Она применяется для отделения одной части содержимого Web-страницы от другой и просто "для красоты". Однако нужно помнить, что слишком большое число горизонтальных линий — дурной тон Web-дизайна.
    Больше о горизонтальных линиях рассказывать нечего. Так что внесем в HTML-код страницы index.htm необходимые исправления (листинг 2.13).
    Листинг 2.13
    <P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
    Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках HTML и CSS.</P>
    <HR>
    <P>Русская Википедия определяет термин HTML так:</P>
    .
    <P>Пожалуй, ни убавить ни прибавить…</P>
    <HR>
    <P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
    Результат показан на рис. 2.3. Симпатично вышло, не так ли?
    Рис. 2.3. Web-страница index.htm с горизонтальными линиями

Адреса

    Часто на Web-страницах указывают контактные данные их создателей (почтовые и электронные адреса, телефоны, факсы и пр.). Для этого HTML предусматривает особый тег <ADDRESS>. Он ведет себя так же, как тег абзаца <P>, но его содержимое выводится курсивом:
    <ADDRESS>Я — адрес создателя данной Web-страницы: почтовый, электронный, телефоны и факсы.</ADDRESS>

Комментарии

    Напоследок рассмотрим одну очень важную возможность HTML, которая, хоть и не касается напрямую Web-дизайна, но сильно поможет забывчивым Web- дизайнерам.
    Комментарий — это фрагмент HTML-кода, который не выводится на Web- страницу и вообще не обрабатывается Web-обозревателем. Он служит для того, чтобы Web-дизайнер смог оставить текстовые заметки для себя или своих коллег.
    Текст комментария помещают между открывающим тегом <! — и закрывающим тегом — > и обязательно отделяют от этих тегов пробелами. Как видим, теги комментария не укладываются в основное правило HTML: закрывающий тег должен иметь то же имя, что и открывающий. Открывающий и закрывающий теги комментария — разные!
    Пример:
    <! — Я — комментарий. Меня не видно на Web-странице. — >
    Мы можем создать в HTML-коде наших Web-страниц комментарии, указывающие, что нам следует доработать. Хотя бы просто для практики:
    <! — Выделить важные фрагменты текста и доделать код примеров. — >
    <! — Создать Web-страницы, посвященные остальным тегам HTML. ->
    Что дальше?
    В этой главе мы научились разделять текст Web-страницы на логические "куски" — абзацы, создавать заголовки, списки, цитаты, текст фиксированного формата и горизонтальные линии. В общем, структурировать текст для его удобного чтения.
    В следующей главе мы научимся выделять фрагменты абзацев и заголовков, чтобы привлечь к ним внимание посетителей. HTML предоставляет для этого много новых тегов, которые мы постараемся запомнить. А еще мы узнаем, как вставить в текст недопустимые символы, в частности, < и >.

ГЛАВА 3. Оформление текста 

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

Выделение фрагментов текста

    Собственно, средства HTML для оформления текста мы начали изучать еще в главе 1. Это парные теги <STRONG> и <EM>, которые выделяют свое содержимое полужирным и курсивным шрифтом соответственно.
    Однако на самом деле теги <STRONG> и <EM> — это нечто большее, чем просто выделение текста. Они дают фрагменту текста, являющемуся их содержимым, особое значение с точки зрения Web-обозревателя. Они говорят, что данный фрагмент текста является важным, и на него следует обратить внимание посетителя. Тег <STRONG> делает фрагмент текста очень важным, а тег <EM> — менее важным (листинг 3.1).
    Листинг 3.1
    <P><STRONG>Я — очень важный текст и поэтому набран полужирным шрифтом!</STRONG> Прочитайте меня в первую очередь!</P>
    <P><EM>А я — менее важный текст и набран курсивом. </EM> Не забудьте прочитать меня, но можете сделать это потом.</P>
    HTML предусматривает для выделения текста довольно много тегов (табл. 3.1), имеющих две особенности:
    — все они парные;
    — служат для выделения частей текста блочных элементов (абзацев, заголовков, пунктов списков, текста фиксированного форматирования; подробнее о блочных элементах см. в главе 2).
    Таблица 3.1. Теги HTML, предназначенные для выделения фрагментов текста

    Как уже говорилось ранее, все эти теги служат для выделения фрагментов текста, являющихся частью блочных элементов, скажем, абзацев (листинг 3.2). Элементы Web-страницы, которые они создают, не являются независимыми и не отображаются отдельно от их "соседей", а принадлежат другим элементам — блочным. Такие элементы Web-страницы называются встроенными.
    Листинг 3.2
    <P>Теги HTML служат для создания элементов Web-страниц.
    <STRONG>Соблюдайте порядок вложенности тегов!</STRONG><P>
    <P>Тег <CODE>P</CODE> служит для создания <DFN>абзаца</DFN> HTML.</P>
    <P>Язык <ABBR>HTML</ABBR> служит для создания <INS>содержимого</INS>
    Web-страниц.</P>
    <P>Наберите в Web-обозревателе интернет-адрес
    <KBD>http://www.w3.org</KBD>.<P>
    Из всех рассмотренных нами тегов чаще всего встречаются <STRONG> и <EM>. Остальные теги так и не снискали большой популярности среди Web-дизайнеров.
    Для практики давайте откроем Web-страницу index.htm и выделим некоторые фрагменты ее текста с помощью тегов, перечисленных в табл. 3.1 (листинг 3.3).
    Листинг 3.3
    <P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках <DFN>HTML</DFN> и <DFN>CSS</DFN>.</P>
    .
    <P><CODE>!DOCTYPE</CODE>, <CODE>BODY</CODE>, <CODE>EM</CODE>,
    <CODE>HEAD</CODE>, <CODE>HTML</CODE>, <CODE>META</CODE>, <CODE>P</CODE>,
    <CODE>STRONG</CODE>, <CODE>TITLE</CODE></P>
    Все эти фрагменты так и просятся: оформите нас надлежащим образом! Мы ведь особенные!

Разрыв строк

    Мы совсем забыли поместить на Web-страницы сведения об авторских правах их разработчика, т. е. о нас. Давайте сделаем это. Поместим их в самый низ Web- страниц посредством изученного в главе 2 тега <ADDRESS>:
    <ADDRESS>Все права защищены. Читатели, 2010 год.</ADDRESS>
    Все хорошо, за одним исключением. Обычно предупреждение о том, что авторские права защищены, и имя или название разработчика разносят на разные строки. Но как нам это сделать?
    Можно, конечно, использовать два тега <ADDRESS>: один — для предупреждения, а другой — для имени разработчика. Но тогда строки будут разделены довольно большим расстоянием. (Вспомним — тег <ADDRESS> ведет себя как абзац, т. е. отделяется от соседних абзацев отступом.) А это будет выглядеть некрасиво.
    Выход — добавить разрыв строк HTML. Он выполняет безусловный перевод строки, в которой он присутствует, в том месте, где проставлен. Разрыв строки определяется одиночным тегом <BR>:
    <P>Этот абзац будет разорван на две строки в этом<BR>месте.</P>
    Разрыв строки также относится к встроенным элементам Web-страницы.
    Давайте вставим разрыв строки в текст сведения об авторских правах, между точкой в первом предложении и началом второго предложения. Пробел между ними можно убрать — он там совершенно не нужен:
    <ADDRESS>Все права защищены.<BR>Читатели, 2010 год.</ADDRESS>
    Откроем исправленную Web-страницу в Web-обозревателе и посмотрим на результат (рис. 3.1). Видно, что текст сведений об авторских правах разделен на строки в том самом месте, куда мы вставили тег <BR>.

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

Вставка недопустимых символов. Литералы

    Давайте откроем Web-страницу t_title.htm и посмотрим на код приведенного там примера использования тега <TITLE>. Чего там не хватает? Правильно — символов < и >, с помощью которых и создается тег HTML. Эти символы являются недопустимыми и не должны встречаться в обычном тексте. Мы заменили их восклицательными знаками, но код стал от этого выглядеть просто ужасно.
    Так есть ли способ все-таки поместить в обычный текст недопустимые символы? Есть, и весьма изящный.
    Создатели HTML решили, что, если уж напрямую эти символы вставить в текст нельзя, значит, их нужно заменить на особую последовательность символов, называемую литералом. Встретив литерал, Web-обозреватель "поймет", что здесь должен присутствовать соответствующий недопустимый символ, и выведет его на Web-страницу.
    Литералы HTML начинаются с символа & и заканчиваются символом; (точка с запятой). Между ними помещается определенная последовательность букв. Так, символ < определяется литералом &lt;, а символ > — литералом &gt;.
    Сразу же исправим код примера (листинг 3.4).
    Листинг 3.4
    <!DOCTYPE html>
    <HTML>
    .
    <BODY>
    .
    <H6>Пример:</H6>
    <PRE>&lt;HEAD&gt;
    &lt;TITLE&gt;Я — заголовок Web-страницы&lt;/TITLE&gt;
    &lt;HEAD&gt;</PRE>
    .
    </BODY>
    </HTML>
    Откроем исправленную Web-страницу в Web-обозревателе. Вот теперь теги в примере отображаются со всеми положенными символами < и >!
    Литералов в HTML довольно много. Самые часто применяемые из них перечислены в табл. 3.2.
Недопустимый символ Литерал HTML — (длинное тире) &mdash; — (короткое тире) &ndash; " &quot; & &amp; < &lt; > &gt; © &copy; ® &reg; Левая двойная кавычка &ldquo; Левая угловая кавычка &laquo; Левый апостроф &lsquo; Многоточие &hellip; Неразрывный пробел &nbsp; Правая двойная кавычка &rdquo; Правая угловая кавычка &raquo; Правый апостроф &rsquo; Символ евро &euro;
    Среди перечисленных в табл. 3.2 литералов и обозначаемых ими недопустимых символов особенно выделяется один. Это неразрывный пробел, обозначаемый литералом &nbsp;. По этому пробелу Web-обозреватель никогда не будет выполнять перенос строк.
    Неразрывный пробел необходим, если в каком-то месте предложения перенос строк никогда не должен выполняться. Так, правила правописания русского языка не допускают перенос строк перед длинным тире. Поэтому крайне рекомендуется отделять длинное тире от предыдущего слова неразрывным пробелом:
    <P>Неразрывный пробел&nbsp;&mdash; очень важный литерал.<P>
    Здесь литерал &nbsp; создает неразрывный пробел, а литерал &mdash; — длинное тире.
    Кстати, если уж на то пошло, мы можем в сведениях об авторских правах вставить символ ©. Вот так:
    <ADDRESS>Все права защищены.<BR>&copy; читатели, 2010 год.</ADDRESS>
    HTML также позволяет вставить в текст любой символ, поддерживаемый кодировкой Unicode, просто указав его код. Для этого предусмотрен литерал вида
    &#<десятичный код символа>;.
    Но как узнать код нужного символа? Очень просто. В этом нам поможет утилита Таблица символов, поставляемая в составе Windows. Давайте запустим ее и посмотрим на ее окно (рис. 3.2).

    Рис. 3.2. Окно утилиты Таблица символов (выбран символ ©)
    В большом списке символов, занимающем почти все окно этой утилиты, выберем нужный нам символ. После этого посмотрим на строку статуса, расположенную вдоль нижнего края окна. В правой ее части находится надпись вида Клавиша: Alt+<десятичный код символа>. Этот-то код нам и нужен!
    ВНИМАНИЕ!
    Надпись Клавиша: Alt+<десятичный код символа> появляется в строке статуса окна Таблица символов только при выборе символов, которые нельзя ввести непосредственно с клавиатуры.
    Так, мы можем вставить в сведения об авторских правах символ ©, использовав литерал &#0169;, где 0169 — десятичный код данного символа (см. рис. 3.2):
    <ADDRESS>Все права защищены.<BR>&#0169; читатели, 2010 год.</ADDRESS>
    Вот и все о литералах HTML. Да и об оформлении текстов тоже.
    Что дальше?
    В этой главе мы продолжили работу с текстом. Мы научились выделять его фрагменты, придавая им особое значение и привлекая к ним внимание посетителя. Также мы научились разрывать строки абзацев и вставлять в текст недопустимые символы, используя литералы HTML. Все это нам пригодится в дальнейшем.
    Фактически мы рассмотрели все средства HTML для работы с текстом. В следующей главе мы займемся графикой и мультимедиа. Мы научимся помещать на Web- страницы изображения, аудио и видеоролики. И помогут нам в этом новые возможности HTML 5.

ГЛАВА 4. Графика и мультимедиа 

    В предыдущих главах мы работали с текстом. Но не текстом единым жива WWW. Web-страницы могут содержать также графику и мультимедийные данные (аудио- и видеоролики). Умело примененные, они способны значительно оживить Web- сайт. И это не говоря уже о случаях, когда без графики и мультимедиа просто не обойтись. В самом деле, Web-сайт, посвященный музыке, обязан содержать на Web-страницах музыкальные композиции, иначе грош ему цена! В этой главе мы будем работать с графическими изображениями и мультимедийными данными. И наконец-то начнем изучение новых возможностей HTML 5, которые значительно упростят нам работу. Но сначала нам нужно рассмотреть один очень важный вопрос и выучить новый термин.

Внедренные элементы Web-страниц

    Казалось бы, что может быть проще: описывай прямо в HTML-коде графическое изображение, аудио- или видеоклип — и все в ажуре! Но не тут-то было… Все дело в том, что графика и мультимедийные данные имеют принципиально другую природу, нежели текст. Из-за этого объединить их в одном файле невозможно.
    Разработчики HTML нашли оригинальный выход из положения. Прежде всего, графические изображения и мультимедийные данные хранятся в отдельных файлах. А в HTML-коде Web-страниц с помощью особых тегов прописывают ссылки на эти файлы, фактически — их интернет-адреса. Встретив такой тег-ссылку, Web- обозреватель запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом и выводит его на Web-страницу в то место, где встретился данный тег.
    Графические изображения, аудио- и видеоролики и вообще любые данные, хранящиеся в отдельных от Web-страницы файлах, называются внедренными элементами Web-страниц.
    НА ЗАМЕТКУ
    В главе 1 говорилось, что Web-страница может храниться в нескольких файлах. Web-страница с внедренными элементами — тому пример.

Графика 

    Графика на Web-страницах появилась достаточно давно. Предназначенный для этого тег появился еще в версии 3.2 языка HTML, которая вышла в 1997 году. С тех пор Всемирную паутину захлестнула волна интернет-графики (к настоящему времени, надо сказать, поутихшая).
    Как уже говорилось, графические изображения — суть внедренные элементы Web-страниц. Это значит, что они сохраняются в отдельных от самой Web-страницы файлах.

Форматы интернет-графики

    На данный момент существует несколько десятков форматов хранения графики в файлах. Но Web-обозреватели поддерживают далеко не все. В WWW сейчас используются всего три формата, которые мы далее рассмотрим.
    Нужно отметить, что все три формата поддерживают сжатие графической информации. Благодаря сжатию размер графического файла сильно уменьшается, и поэтому он передается по сети быстрее, чем несжатый файл.
    Формат GIF (Graphics Interchange Format, формат обмена графикой) — старожил среди "сетевых" форматов графики. Он был разработан еще в 1987 году и модернизирован в 1989 году. На данный момент он считается устаревшим, но все еще широко распространен.
    Достоинств у него довольно много. Во-первых, GIF позволяет задать для изображения "прозрачный" цвет; закрашенные этим цветом области изображения станут своего рода "дырками", сквозь которые будет "просвечивать" фон родительского элемента. Во-вторых, в одном GIF-файле можно хранить сразу несколько изображений, фактически — настоящий фильм (анимированный GIF). В-третьих, из-за особенностей применяемого в нем сжатия он отлично подходит для хранения штриховых изображений (карт, схем, рисунков карандашом и пр.).
    Недостаток у формата GIF всего один — он совершенно не годится для хранения полутоновых изображений (фотографий, картин и т. п.). Это обусловлено тем, что GIF-изображения могут включать всего 256 цветов, и потерями качества при сжатии.
    GIF используется для хранения элементов оформления Web-страниц (всяческих линеек, маркеров списков и т. п.) и штриховых изображений.
    Формат JPEG (Joint Photographic Experts Group, Объединенная группа экспертов по фотографии) был разработан в 1993 году специально для хранения полутоновых изображений. Для чего активно применяется до сих пор.
    JPEG, в отличие от GIF, не ограничивает количество цветов у изображения, а реализованное в нем сжатие лучше всего подходит для полутоновых изображений. Однако он плохо справляется с штриховой графикой, не поддерживает "прозрачный" цвет и анимацию.
    Формат PNG (Portable Network Graphics, перемещаемая сетевая графика) появился на свет в 1996 году. Он разрабатывался как замена устаревшему и не очень удобному GIF, а также, в некоторой степени, JPEG. В настоящее время он последовательно отвоевывает "жизненное пространство" у GIF.
    К достоинствам формата PNG можно отнести возможность хранения как штриховых, так и полутоновых изображений и поддержку полупрозрачности. Недостаток всего один и некритичный — невозможность хранения анимации.
    Осталось назвать расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF и PNG имеют "говорящие" расширения gif и png, а файлы JPEG — jpg, jpe или jpeg.

Вставка графических изображений

    Добавить на Web-страницу графическое изображение позволяет одинарный тег <IMG>. Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег <IMG>.
    В главе 1 мы говорили об атрибутах тегов HTML, после чего надолго о них забыли. Сейчас настала пора о них вспомнить, т. к. сила тега <IMG> — в его атрибутах.
    Обязательный атрибут тега SRC служит для указания интернет-адреса файла с изображением.
    Пример:
    <IMG SRC="image.gif">
    Этот тег помещает на Web-страницу изображение, хранящееся в файле image.gif, который находится в той же папке, что и файл самой этой Web-страницы.
    Пример:
    <IMG SRC="/images/picture.jpg">
    Данный тег помещает на Web-страницу изображение, хранящееся в файле picture.jpg, который находится в папке images, вложенной в корневую папку Web- сайта.
    Пример:
    <IMG SRC="http://www.othersite.ru/book12/author.jpg">
    А этот тег помещает на Web-страницу изображение, хранящееся в файле с интернет-адресом http://www.othersite.ru/book12/author.jpg, т. е. изображение с другого Web-сайта.
    НА ЗАМЕТКУ
    Принципы формирования интернет-адресов файлов, применяемые в WWW, мы подробно рассмотрим в главе 6.
    Мы уже знаем о том, что элементы Web-страницы могут быть блочными и встроенными. Так вот, изображение, помещенное на Web-страницу с помощью тега <IMG>, — встроенный элемент. Это значит, что он не может "гулять сам по себе", а должен быть частью блочного элемента, например, абзаца.
    Из этого следуют два важных вывода.
    Во-первых, мы можем вставить графическое изображение прямо в абзац:
    <P>Посмотрите картинку — <IMG SRC="image.gif"></P>
    Во-вторых, если нам понадобится отобразить на Web-странице отдельное, не связанное ни с каким абзацем графическое изображение, нам придется поместить его в специально созданный абзац:
    <P><IMG SRC="/images/picture.jpg"></P>
    Настала пора попрактиковаться. Найдем подходящий графический файл и поместим его в папку, где хранятся файлы нашего Web-сайта. Автор выбрал изображение значка @, хранящееся в файле image.gif. Разумеется, вы можете выбрать любой другой файл, но в этом случае не забудьте указать его имя в HTML-коде листинга 4.1.
    Впишем в раздел тегов Web-страницы index.htm тег <IMG> и создадим описывающую его Web-страницу. Это будет третья Web-страница нашего Web-сайта.
    HTML-код приведен в листинге 4.1.
    Листинг 4.1
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Тег IMG</TITLE>
    </HEAD>
    <BODY>
    <H1>Тег IMG</H1>
    <P>Тег IMG служит для вставки на Web-страницу графического изображения.</P>
    <H6>Пример:</H6>
    <PRE>&lt;P&gt;&lt;IMG SRC=&quot;image.gif&quot;&gt;&lt;/P&gt;</PRE>
    <H6>Результат:</H6>
    <P><IMG SRC="image.gif"></P>
    </BODY>
    </HTML>
    Здесь предполагается, что графический файл, содержимое которого мы будем выводить на Web-страницу, имеет имя image.gif. Если у вас другое имя файла, соответственно исправьте HTML-код.
    Сохраним новую Web-страницу в файле t_img.htm и сразу же откроем в Web-обозревателе (рис. 4.1). На этой Web-странице мы увидим код примера вида
    <P><IMG SRC="image.gif"></P> а чуть ниже — результат его выполнения.

    Рис. 4.1. Web-страница t_img.htm в Web-обозревателе
    Как видим, ничего сложного в размещении изображения на Web-странице нет. Нужно только приготовить графический файл и вставить в HTML-код один простой тег.
    А теперь рассмотрим еще один атрибут тега <IMG>, который может нам пригодиться в дальнейшем.
    Поскольку изображение хранится в отдельном от Web-страницы файле, Web- обозревателю придется послать Web-серверу еще один запрос на его получение. Web-серверу нужно найти этот файл и отправить его Web-обозревателю. Файл должен загрузиться по сети. На все это требуется время. Если изображений на Web-странице много, все они велики по размеру, а канал связи медленный, понадобится значительное время. Может случиться так, что сама Web-страница будет успешно загружена и отображена на экране, а изображения — еще нет. И Web-обозреватель вместо не загруженного еще изображения выведет на экран пустой прямоугольник.
    Возникают две проблемы. Во-первых, пустые прямоугольники вместо изображений выглядят некрасиво. Во-вторых, посетитель не сможет понять, что за изображение должно находиться вместо того или иного прямоугольника, и стоит ли ждать окончания его загрузки.
    И если с первой проблемой справиться практически невозможно, то вторую мы вполне способны решить. Для этого тег <IMG> поддерживает необязательный атрибут ALT, с помощью которого указывается так называемый текст замены. Он будет отображаться в пустом прямоугольнике, обозначающем незагруженное изображение, пока это изображение не загрузится:
    <P><IMG SRC="image.gif" ALT="Пример изображения"></P>
    Здесь мы задали для изображения с Web-страницы t_img.htm текст замены "Пример изображения".
    НА ЗАМЕТКУ
    Хорошим тоном Web-дизайна считается указание текста замены только у значащих изображений. У изображений, являющихся элементами оформления Web-страницы, текст замены обычно не указывают.
    На этом пока все об интернет-графике. Мы еще вернемся к ней в главе 6, когда будем рассматривать изображения-гиперссылки и карты-изображения. А сейчас пора начать разговор о…

Мультимедиа 

    Мультимедиа — это, в первую очередь, аудио и видео. Мультимедиа в приложении к Web-дизайну — это аудио- и видеоролики, размещенные на Web-страницах.
    До недавних пор разместить на Web-странице аудио- или видеоролик можно было только с помощью громадного HTML-кода, дополнительных программ и "шаманских плясок" вокруг всего этого. Но сейчас, с появлением HTML 5 и поддерживающих его (хотя бы частично) Web-обозревателей, потребуется всего один тег. Какой? Очень простой, не сложнее уже знакомого нам тега <IMG>!
    ВНИМАНИЕ!
    В этой книге будет рассматриваться работа с мультимедиа исключительно средствами HTML 5. Устаревшие способы (в частности, тег <OBJECT>) не описаны.

Форматы файлов и форматы кодирования

    Форматов мультимедийных файлов существует не меньше, чем форматов файлов графических. Как и в случае с интернет-графикой, Web-обозреватели поддерживают далеко не все мультимедийные форматы, а только немногие. (Хотелось бы автору посмотреть на Web-обозреватель, который поддерживает все форматы файлов — и на сам Web-обозреватель, и на его размеры…)
    Но Web-обозревателю мало поддерживать только сам формат мультимедийных файлов. Он должен быть "знаком" и с форматом кодирования записанной в нем аудио- и (или) видеоинформации. В мире мультимедиа так — разные файлы одного формата могут хранить информацию, закодированную разными форматами. Более того, аудио- и видеодорожки мультимедийного файла практически всегда кодируются разными форматами.
    Практически все форматы кодирования мультимедийных данных поддерживают их сжатие. Благодаря этому размер мультимедийных файлов значительно (иногда на несколько порядков) уменьшается, что благотворно сказывается на скорости их передачи по сети.
    Перечислим и кратко опишем все форматы мультимедийных файлов, используемые в Web-дизайне и поддерживаемые Web-обозревателями.
    — WAV (WAVe, волна) — "старожил" среди мультимедийных форматов. Был разработан Microsoft в самом начале 90-х годов прошлого века для хранения аудио- данных и применяется для этой цели до сих пор. Файлы такого формата имеют расширение wav.
    — OGG — более новый формат. Был разработан около десяти лет назад некоммерческой организацией Xiph.org для хранения аудио- и видеоинформации. Файлы этого формата имеют расширения ogg (универсальное расширение), oga (аудио- файлы) и ogv (видеофайлы); последние два расширения встречаются редко.
    — MP4 — также "новичок". Был разработан организацией Motion Picture Expert Group (Экспертная группа по вопросам движущегося изображения; также известна как MPEG) в 1998 году для хранения аудио- и видеоданных. Файлы этого формата имеют расширение mp4.
    — QuickTime — формат очень старый, он старше даже WAV. Был разработан Apple в 1989 году для хранения аудио- и видеоданных. Файлы такого формата имеют расширение mov.
    Теперь рассмотрим форматы кодирования аудио и видео, поддерживаемые современными Web-обозревателями.
    — PCM (Pulse-Coded Modulation, импульсно-кодовая модуляция) — самый простой и самый старый формат кодирования. Он даже не поддерживает сжатие информации. Служит для кодирования аудиоданных.
    — Vorbis — более современный формат кодирования. Был представлен организацией Xiph.org (разработчиком формата файла OGG) в 2002 году. Используется для кодирования аудиоданных.
    — AAC (Advanced Audio Coding, развитое кодирование аудио) — не очень новый формат кодирования. Был разработан организацией Motion Picture Expert Group в 1997 году. Применяется для кодирования аудиоданных.
    — Theora — пожалуй, самый "молодой" формат кодирования. Он также бы разработан организацией Xiph.org несколько лет назад. Используется для кодирования видеоданных.
    — H.264 — тоже очень "молод". Был представлен организациями Motion Picture Expert Group и Video Coding Experts Group (Группа экспертов по кодированию видео) в 2003 году. Предназначен для кодирования видеоданных.
    Почти все эти форматы являются открытыми. Исключения — формат файлов QuickTime, принадлежащий Apple, и формат кодирования H.264, защищенный более чем сотней патентов.
    Осталось выяснить, какие сочетания форматов файлов и форматов кодирования используются в Web-дизайне и какие Web-обозреватели их поддерживают. Порывшись в Интернете и немного поэкспериментировав, автор свел эти данные в табл. 4.1.
    Таблица 4.1. Сочетания формата мультимедийных файлов и форматов кодирования аудио и видео, используемые в Web-дизайне, и поддержка их современными Web-обозревателями

    Как видим, разные Web-обозреватели поддерживают различные форматы. Из-за этого у нас как у Web-дизайнеров могут быть проблемы…

Типы MIME

    По сети передаются самые разные данные: Web-страницы, графические изображения, аудио- и видеофайлы, архивы, исполняемые файлы и пр. Эти данные предназначены разным программам. К тому же, с разными данными программа, принявшая их, может поступить по-разному. Так, Web-обозреватель при получении Web- страницы или графического изображения отобразит их на экране, а при получении архива или исполняемого файла — откроет или сохранит его на диске.
    Всем передаваемым по сети данным присваивается особое обозначение, однозначно указывающее на их природу, — тип MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения почты Интернета). Тип MIME присваивает данным программа, их отправляющая, например, Web-сервер. А принимающая программа (тот же Web-обозреватель) по типу MIME принятых данных определяет, поддерживает ли она эти данные, и, если поддерживает, что с ними делать.
    Web-страница имеет тип MIME text/html. Графическое изображение формата GIF имеет тип MIME image/gif. Тип MIME исполняемого файла — application/ x-msdownload, а архива ZIP — application/x-zip-compressed. Свои типы MIME имеют и мультимедийные файлы.
    Вот о мультимедийных файлах и их типах MIME мы и поговорим.
    Ранее было сказано, что современные Web-обозреватели работают с очень ограниченным набором форматов мультимедийных файлов из нескольких десятков существующих. Более того, разные Web-обозреватели поддерживают различные форматы. Поэтому Web-обозреватель должен определить, поддерживает ли он формат полученного файла, т. е. стоит ли его вообще загружать. Как это сделать, мы уже знаем — по типу MIME этого файла.
    В табл. 4.2 перечислены типы MIME форматов мультимедийных файлов, поддерживаемых Web-обозревателями на данный момент.
    Таблица 4.2. Типы MIME форматов мультимедийных файлов, поддерживаемых современными Web-обозревателями

    Как видим, один формат файлов может иметь несколько типов MIME. Обычно выбирается самый первый из списка как самый предпочтительный.
    Вооружившись необходимой теорией, приступим к практике. Сейчас мы выясним, как HTML 5 позволит нам поместить аудио или видео на Web-страницу.

Вставка аудиоролика

    Для вставки на Web-страницу аудиоролика язык HTML 5 предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута SRC этого тега:
    <AUDIO SRC="sound.wav"></AUDIO>
    Встретив тег <AUDIO>, Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. (В последнем случае мы можем запустить воспроизведение из Web-сценария; о Web-сценариях разговор пойдет в части III.) Также он может вывести на Web- страницу элементы управления, с помощью которых посетитель запускает воспроизведение аудиофайла, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега <AUDIO>, которые мы скоро рассмотрим.
    Тег <AUDIO> создает блочный элемент Web-страницы. Так что мы не сможем вставить аудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).
    По умолчанию Web-обозреватель не будет воспроизводить аудиоролик. Чтобы он это сделал, в теге <AUDIO> нужно указать особый атрибут AUTOPLAY. Это действительно особый атрибут: он не имеет значения — достаточно одного его присутствия в теге, чтобы он начал действовать (атрибут тега без значения):
    <P>Сейчас вы услышите звук!</P>
    <AUDIO SRC="sound.ogg" AUTOPLAY></AUDIO>
    По умолчанию аудиоролик никак не отображается на Web-странице (что, впрочем, понятно — аудио нужно не смотреть, а слушать). Но если в теге <AUDIO> поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web- страницы, где проставлен тег <AUDIO>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
    <P>Нажмите кнопку воспроизведения, чтобы услышать звук.</P>
    <AUDIO SRC="sound.ogg" CONTROLS></AUDIO>
    Атрибут без значения AUTOBUFFER имеет смысл указывать в теге <AUDIO> только в том случае, если там отсутствует атрибут AUTOPLAY. Если он указан, Web- обозреватель сразу после загрузки Web-страницы начнет загружать файл аудиоролика — это позволит исключить задержку файла перед началом его воспроизведения.
    Чтобы проверить полученные знания в действии, нам понадобится аудиоролик поддерживаемого Web-обозревателем формата. Автор нашел у себя небольшой аудиоролик формата WAV-PCM и дал ему имя sound.wav. Вы можете использовать любой другой аудиоролик, но, разумеется, в HTML-коде листинга 4.2 придется указать имя файла, в котором он хранится.
    Откроем Web-страницу index.htm и впишем в раздел тегов тег <AUDIO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.2.
    Листинг 4.2
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Тег AUDIO</TITLE>
    </HEAD>
    <BODY>
    <H1>Тег AUDIO</H1>
    <P>Тег AUDIO служит для вставки на Web-страницу аудиоролика.</P>
    <H6>Пример:</H6>
    <PRE>&lt;AUDIO SRC=&quot;sound.wav&quot; CONTROLS&gt;&lt;/AUDIO&gt;</PRE>
    <H6>Результат:</H6>
    <AUDIO SRC="sound.wav" CONTROLS></AUDIO>
    </BODY>
    </HTML>
    Сохраним Web-страницу в файле с именем t_audio.htm. Поместим выбранный аудиофайл (у автора — sound.wav) в папку, где находятся все файлы нашего Web- сайта (и t_audio.htm в том числе). И сразу же откроем только что созданную Web- страницу в Web-обозревателе (рис. 4.2).

    Рис. 4.2. Web-страница t_audio.htm в Web-обозревателе
    Мы увидим код примера и, ниже, результат его выполнения — симпатичные элементы для управления воспроизведением аудиоролика. Мы можем нажать кнопку воспроизведения и прослушать его.

Вставка видеоролика

    Для вставки на Web-страницу видеоролика предназначен парный тег <VIDEO>. Интернет-адрес видеофайла указывается с помощью знакомого нам атрибута SRC этого тега:
    <VIDEO SRC="film.ogg"></VIDEO>
    Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого видеоролика. В зависимости от указанных нами в теге <VIDEO> атрибутов, он может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления воспроизведением видеоролика.
    Как и тег <AUDIO>, тег <VIDEO> создает блочный элемент Web-страницы и поддерживает атрибуты AUTOPLAY, CONTROLS и AUTOBUFFER:
    <VIDEO SRC="film.ogg" AUTOPLAY CONTROLS></VIDEO>
    Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит атрибут POSTER тега <VIDEO>; его значение указывает интернет-адрес нужного графического файла:
    <VIDEO SRC="film.ogg" CONTROLS POSTER="filmposter.jpg"></VIDEO>
    Здесь мы указали для видеоролика изображение-заставку, которое будет выведено в панели просмотра перед началом его воспроизведения и которое хранится в файле filmposter.jpg.
    Ну что, попрактикуемся? Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя film.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML- коде придется указать имя его файла.
    НА ЗАМЕТКУ
    Если вы не найдете видеоролика подходящего формата, то можете сами создать его, перекодировав видеоролик, сохраненный в другом формате. Для этого подойдет утилита SUPER ©, которую можно найти по интернет-адресу http://www.erightsoft.com/SUPER.html. Она поддерживает очень много мультимедийных форматов, в том числе и OGG.
    Откроем Web-страницу index.htm и впишем в раздел тегов тег <VIDEO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.3.
    Листинг 4.3
    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <TITLE>Тег VIDEO</TITLE>
    </HEAD>
    <BODY>
    <H1>Тег VIDEO</H1>
    <P>Тег VIDEO служит для вставки на Web-страницу видеоролика.</P>
    <H6>Пример:</H6>
    <PRE>&lt;VIDEO SRC=&quot;film.ogg&quot; CONTROLS&gt;&lt;/VIDEO&gt;</PRE>
    <H6>Результат:</H6>
    <VIDEO SRC="film.ogg" CONTROLS></VIDEO>
    </BODY>
    </HTML>
    Сохраним Web-страницу в файле с именем t_video.htm. Поместим выбранный видеофайл (у автора — film.ogg) в папку, где находятся все файлы нашего Web-сайта (и t_video.htm в том числе). И откроем готовую Web-страницу t_video.htm в Web- обозревателе (рис. 4.3).
    Рис. 4.3. Web-страница t_video.htm в Web-обозревателе
    Ниже кода примера мы увидим результат его выполнения — панель просмотра и элементы для управления воспроизведением. Нажмем кнопку воспроизведения и посмотрим "кино". Отметим, что после начала воспроизведения элементы управления пропадут; чтобы получить к ним доступ, следует навести на панель просмотра курсор мыши. Как только воспроизведение видеоролика закончится, эти элементы управления снова появятся на экране.

Дополнительные возможности тегов <AUDIO> и <VIDEO>

    Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому- то Web-обозревателю не "по зубам". Как быть?
    Специально для таких случаев HTML 5 предусматривает возможность указать в одном теге <AUDIO> или <VIDEO> сразу несколько мультимедийных файлов. Web- обозреватель сам выберет из них тот, формат которого он поддерживает.
    Если мы собираемся указать сразу несколько мультимедийных файлов в одном теге <AUDIO> или <VIDEO>, то должны сделать две вещи.
    1. Убрать из тега <AUDIO> или <VIDEO> указание на мультимедийный файл, т. е. атрибут SRC и его значение.
    2. Поместить внутри тега <AUDIO> или <VIDEO> набор тегов <SOURCE>, каждый из которых будет определять интернет-адрес одного мультимедийного файла.
    Одинарный тег <SOURCE> указывает как интернет-адрес мультимедийного файла, так и его тип MIME. Для этого предназначены атрибуты SRC и TYPE данного тега соответственно:
    <VIDEO>
    <SOURCE SRC="film.ogg" TYPE="video/ogg">
    <SOURCE SRC="film.mov" TYPE="video/quicktime">
    </VIDEO>
    Данный тег <VIDEO> определяет сразу два видеофайла, хранящих один и тот же фильм: один — формата OGG, другой — формата QuickTime. Web-обозреватель, поддерживающий формат OGG, загрузит и воспроизведет первый файл, а Web- обозреватель, поддерживающий QuickTime, — второй файл.
    Отметим, что тип MIME видеофайла (и, соответственно, атрибут TYPE тега <SOURCE>) можно опустить. Но тогда Web-обозревателю придется загрузить начало файла, чтобы выяснить, поддерживает ли он формат этого файла. А это лишняя и совершенно ненужная нагрузка на сеть. Так что тип MIME лучше указывать всегда.
    А если Web-обозреватель вообще не поддерживает теги <AUDIO> и <VIDEO>? В таком случае он их проигнорирует и ничего на Web-страницу не выведет. Однако мы можем указать текст замены, в котором описать возникшую проблему и предложить какой-либо путь ее решения (например, сменить Web-обозреватель). Такой текст замены ставят внутри тега <AUDIO> или <VIDEO> после всех тегов <SOURCE> (если они есть), например, как в листинге 4.4.
    Листинг 4.4
    <VIDEO>
    <SOURCE SRC="film.ogg" TYPE="video/ogg">
    <SOURCE SRC="film.mov" TYPE="video/quicktime">
    Ваш Web-обозреватель не поддерживает вывод мультимедийных данных средствами HTML 5. Попробуйте другой.
    </VIDEO>
    Отметим, что мы не указали в тексте замены теги, создающие абзац. Теги <AUDIO> и <VIDEO> сами по себе — блочные элементы, так что в этом нет нужды.
    Вот и все об интернет-мультимедиа и средствах HTML 5 для его поддержки.
    Что дальше?
    В этой главе мы научились помещать на Web-страницы графические изображения, аудио- и видеоролики. И начали изучать HTML 5.
    В следующей главе нас ждут таблицы.

ГЛАВА 5. Таблицы 

    В предыдущих главах мы узнали, как структурировать и оформлять текст и как помещать на Web-страницу графические изображения, аудио- и видеофайлы. Этих знаний хватит для создания большинства Web-страниц. Но не всех.
    Что часто встречается в печатных изданиях, помимо текста и картинок? Таблицы! Таблицами пестрят учебники и справочники, таблицы часто попадаются в газетах и журналах, даже художественные произведения иногда огорошивают нас таблицами. И это понятно. Таблицы — лучший способ уместить множество сведений на ограниченной площади страницы.
    Предоставляет ли HTML средства для создания таблиц? Да, и уже довольно давно. Сейчас мы с ними познакомимся.

Создание таблиц

    Таблицы HTML создаются в четыре этапа.
    На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:
    <TABLE>
    </TABLE>
    Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно…)
    На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <TR>; каждый такой тег создает отдельную строку. Теги <TR> помещают внутрь тега <TABLE> (листинг 5.1).
    Листинг 5.1
    <TABLE>
    <TR>
    </TR>
    <TR>
    </TR>
    <TR>
    </TR>
    </TABLE>
    На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег создает обычную ячейку, а тег — ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).
    Листинг 5.2
    <TABLE>
    <TR>
    <TH></TH>
    <TH></TH>
    <TH></TH>
    </TR>
    <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
    </TR>
    <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
    </TR>
    </TABLE>
    На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH> (листинг 5.3).
    Листинг 5.3
    <TABLE>
    <TR>
    <TH>Столбец 1</TH>
    <TH>Столбец 2</TH>
    <TH>Столбец 3</TH>
    </TR>
    <TR>
    <TD>Ячейка 1.1</TD>
    <TD>Ячейка 1.2</TD>
    <TD>Ячейка 1.3</TD>
    </TR>
    <TR>
    <TD>Ячейка 2.1</TD>
    <TD>Ячейка 2.2</TD>
    <TD>Ячейка 2.3</TD>
    </TR>
    </TABLE>
    Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <TD> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.
    Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3 теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <EM>; в результате они будут выведены курсивом (Листинг 5.4).
    Листинг 5.4
    <TABLE>
    .
    <TR>
    <TD>Ячейка <EM>1.1</EM></TD>
    <TD>Ячейка <EM>1.2</EM></TD>
    <TD>Ячейка <EM>1.3</EM></TD>
    </TR>
    .
    </TABLE>
    Еще мы можем поместить в ячейку графическое изображение:

    <TD><IMG SRC="picture.jpg" ALT="Картинка в ячейке таблицы"></TD>
    Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги <TD> и <TH> это позволяют (листинг 5.5).
    Листинг 5.5
    <TD>
    <H4>Это большой текст</H4>
    <P>Это начало большого текста, представляющего собой содержимое ячейки таблицы.</P>
    <P>Это продолжение большого текста, представляющего собой содержимое ячейки таблицы.</P>
    <P><IMG SRC="picture.jpg" ALT="Иллюстрация к большому тексту"></P>
    <P>А это <STRONG>долгожданное окончание</STRONG> большого текста.</P>
    </TD>
    Данный HTML-код помещает в ячейку таблицы заголовок и четыре абзаца. Причем один из этих абзацев содержит графическое изображение, а часть другого помечена как очень важная (и будет набрана полужирным шрифтом).
    HTML-код, создающий таблицы, может показаться несколько громоздким. Но это плата за исключительную гибкость таблиц HTML. Мы можем поместить в таблицу любое содержимое: абзацы, заголовки, изображения, аудио- и видеоролики и даже другие таблицы.
    Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.
    — Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).
    — Размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.
    — Между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.
    — Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.
    — Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.
    Таблица — всего лишь содержимое Web-страницы, а за ее вывод "отвечает" представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1.) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II.
    И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.
    — Тег <TR> может находиться только внутри тега <TABLE>. Любое другое содержимое тега <TABLE> (кроме заголовка и секций таблицы, речь о которых пойдет далее) будет проигнорировано.
    — Теги <TD> и <TH> могут находиться только внутри тега <TR>. Любое другое содержимое тега <TR> будет проигнорировано.
    — Содержимое таблицы может находиться только в тегах <TD> и <TH>.
    — Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал &nbsp;).
    Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
    Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
    Листинг 5.6
    .
    <P>Пожалуй, ни убавить ни прибавить…</P>
    <HR>
    <P>Список версий HTML:</P>
    <TABLE>
    <TR>
    <TH>Версия HTML</TH>
    <TH>Год выхода</TH>
    <TH>Особенности</TH>
    </TR>
    <TR>
    <TD>1.0</TD>
    <TD>1992</TD>
    <TD>Официально не была стандартизована</TD>
    </TR>
    <TR>
    <TD>2.0</TD>
    <TD>1995</TD>
    <TD>Первая стандартизованная версия</TD>
    </TR>
    <TR>
    <TD>3.2</TD>
    <TD>1997</TD>
    <TD>Поддержка таблиц и графики</TD>
    </TR>
    <TR>
    <TD>4.0</TD>
    <TD>1997</TD>
    <TD>&quot;Очищен&quot; от устаревших тегов</TD>
    </TR>
    <TR>
    <TD>4.01</TD>
    <TD>1999</TD>
    <TD>В основном, исправление ошибок</TD>
    </TR>
    <TR>
    <TD>5.0</TD>
    <TD>?</TD>
    <TD>В разработке</TD>
    </TR>
    </TABLE>
    <P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
    .
    Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).
    Рис. 5.1. Таблица — список версий HTML на Web-странице index.htm
    Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — прочитав часть II, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.

Заголовок и секции таблицы

    Теперь рассмотрим дополнительные возможности HTML по созданию таблиц. На практике они применяются нечасто, но иногда могут пригодиться.
    Прежде всего, с помощью парного тега <CAPTION> мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега <TABLE> (листинг 5.7).
    Листинг 5.7
    <TABLE>
    <CAPTION>Это таблица</CAPTION>
    <TR>
    <TH>Столбец 1</TH>
    <TH>Столбец 2</TH>
    <TH>Столбец 3</TH>
    </TR>
    .
    </TABLE>
    Заголовок таблицы выводится над ней, а текст его выравнивается по центру таблицы. При желании мы можем его как-то оформить, воспользовавшись знакомыми нам по главе 3 тегами:
    <CAPTION><STRONG>Это таблица<STRONG></CAPTION>
    Обычно тег <CAPTION> помещается сразу после открывающего тега <TABLE> — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.
    Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:
    — секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее "шапку";
    — секцию тела, где находятся строки таблицы, составляющие основные данные;
    — секцию завершения со строками, формирующими "поддон" таблицы (обычно в "поддоне" располагают итоговые данные и различные примечания).
    Секцию заголовка таблицы формирует тег <THEAD>, секцию тела — <TBODY>, а секцию завершения — <TFOOT>. Все эти теги парные, помещаются непосредственно в тег <TABLE> и содержат теги <TR>, формирующие строки таблицы, которые входят в соответствующую секцию (листинг 5.8).
    Листинг 5.8
    <TABLE>
    <THEAD>
    <TR>
    <TH>Столбец 1</TH>
    <TH>Столбец 2</TH>
    <TH>Столбец 3</TH>
    </TR>
    </THEAD>
    <TBODY>
    <TR>
    <TD>Ячейка 1.1</TD>
    <TD>Ячейка 1.2</TD>
    <TD>Ячейка 1.3</TD>
    </TR>
    <TR>
    <TD>Ячейка 2.1</TD>
    <TD>Ячейка 2.2</TD>
    <TD>Ячейка 2.3</TD>
    </TR>
    </TBODY>
    <TFOOT>
    <TR>
    <TD>Итог по ячейке 2.1</TD>
    <TD>Итог по ячейке 2.2</TD>
    <TD>Итог по ячейке 2.3</TD>
    </TR>
    </TFOOT>
    </TABLE>
    Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web- странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением. Подробнее об этом мы узнаем в части II.
    НА ЗАМЕТКУ
    Тег <TABLE> поддерживает необязательный атрибут SUMMARY, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране, однако может использоваться другими средствами вывода Web-страниц, например, Web-обозревателями для слабовидящих, зачитывающими содержимое Web- страниц. Так или иначе, примечание к таблицам практически никогда не задается.
    Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом "Список версий HTML: ", который так и просится в заголовки. Заодно разделим таблицу на секции заголовка и тела. ("Поддона" наша таблица не имеет, так что обойдемся без секции завершения.)
    В листинге 5.9 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.
    Листинг 5.9
    .
    <P>Пожалуй, ни убавить ни прибавить…</P>
    <HR>
    <TABLE>
    <CAPTION>Список версий HTML:</CAPTION>
    <THEAD>
    <TR>
    <TH>Версия HTML</TH>
    <TH>Год выхода</TH>
    <TH>Особенности</TH>
    </TR>
    </THEAD>
    <TBODY>
    <TR>
    <TD>1.0</TD>
    <TD>1992</TD>
    <TD>Официально не была стандартизована</TD>
    </TR>
    .
    <TR>
    <TD>5.0</TD>
    <TD>?</TD>
    <TD>В разработке</TD>
    </TR>
    </TBODY>
    </TABLE>
    <P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
    .
    Сохраним исправленную Web-страницу и откроем ее в Web-обозревателе. И сразу увидим, что текст "Список версий HTML" теперь выровнен по центру таблицы. Это и неудивительно — ведь мы превратили его в заголовок таблицы. Сама же таблица ничуть не изменилась (что тоже понятно — ведь ее секции Web-обозреватель никак не выделяет).

Объединение ячеек таблиц

    Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 5.10.
    Листинг 5.10
    <TABLE>
    <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    </TR>
    <TR>
    <TD>6</TD>
    <TD>7</TD>
    <TD>8</TD>
    <TD>9</TD>
    <TD>10</TD>
    </TR>
    <TR>
    <TD>11</TD>
    <TD>12</TD>
    <TD>13</TD>
    <TD>14</TD>
    <TD>15</TD>
    </TR>
    <TR>
    <TD>16</TD>
    <TD>17</TD>
    <TD>18</TD>
    <TD>19</TD>
    <TD>20</TD>
    </TR>
    </TABLE>
    Это обычная таблица, ячейки которой пронумерованы — так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
    А теперь рассмотрим таблицу на рис. 5.3.
    Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
    Специально для этого теги <TD> и <TH> поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.

    Рис. 5.2. Изначальная таблица, ячейки которой подвергнутся объединению