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

Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра — кто знает; может быть, мы будем выходить на 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-страниц следует придерживаться современных интернет-стандартов. При этом нужно полностью отказаться от устаревших и закрытых интернет-технологий, как не укладывающихся в современную парадигму 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-серверах и их нелегкой "работе".

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

Во Всемирной паутине 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-страницы выглядят зачастую очень пестро: разнокалиберные куски текста, таблицы, картинки, врезки, сноски и даже фильмы. Но описывается все это в виде обычного текста. Да-да, Web-страницы — суть текстовые файлы, которые можно создать с помощью хорошо знакомого нам редактора Блокнот, поставляемого в составе Windows! (Разумеется, подойдет любой аналогичный текстовый редактор.)

Для форматирования содержимого Web-страниц применяется особый язык — HTML (HyperText Markup Language, язык гипертекстовой разметки). С помощью команд — тегов — этого языка создают и абзацы текста, и заголовки, и врезки, и даже таблицы.

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

Изучать 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>, — видно по отступам.

Снова вернемся в полному 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-страницу. А 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 и обратимся к принципам современного 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-обозревателей на свете довольно много. Но если отбросить старые и специализированные, останется всего пять: 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-сервера.

К счастью, долго искать нам не придется. В составе 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-сервер работает.

В предыдущей главе мы прошли "ударный" курс современного 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 предоставляет для этого много новых тегов, которые мы постараемся запомнить. А еще мы узнаем, как вставить в текст недопустимые символы, в частности, < и >.

В предыдущей главе мы научились структурировать текст 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.

Среди перечисленных в табл. 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.

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

Казалось бы, что может быть проще: описывай прямо в 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-дизайнеров могут быть проблемы…

По сети передаются самые разные данные: 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-обозревателе

Ниже кода примера мы увидим результат его выполнения — панель просмотра и элементы для управления воспроизведением. Нажмем кнопку воспроизведения и посмотрим "кино". Отметим, что после начала воспроизведения элементы управления пропадут; чтобы получить к ним доступ, следует навести на панель просмотра курсор мыши. Как только воспроизведение видеоролика закончится, эти элементы управления снова появятся на экране.

Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных 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.

В следующей главе нас ждут таблицы.

В предыдущих главах мы узнали, как структурировать и оформлять текст и как помещать на 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. Изначальная таблица, ячейки которой подвергнутся объединению

Рис. 5.3. Таблица, показанная на рис. 5.2, после объединения некоторых ячеек (объединенные ячейки обозначены сложением их номеров)

Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.

1. Найти в коде HTML тег <TD> (<TH>), соответствующий первой из объединяемых

ячеек (если считать ячейки слева направо).

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

3. Удалить теги <TD> (<TH>), создающие остальные объединяемые ячейки данной строки.

Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.

Листинг 5.11

<TR>

<TD>1</TD>

<TD COLSPAN="2">2 + 3</TD>

<TD>4</TD>

<TD>5</TD>

</TR>

Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.

Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.

1. Найти в коде HTML строку (тег <TR>), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).

2. Найти в коде этой строки тег <TD> (<TH>), соответствующий первой из объединяемых ячеек.

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

4. Просмотреть последующие строки и удалить из них теги <TD> (<TH>), создающие остальные объединяемые ячейки.

Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).

Листинг 5.12

<TR>

<TD ROWSPAN="2">1 + 6</TD>

<TD COLSPAN="2">2 + 3</TD>

<TD COLSPAN="2">4 + 5</TD>

</TR>

<TR>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD>

<TD>10</TD>

</TR>

Обратим внимание, что мы удалили из второй строки тег <TD>, создающий шестую ячейку, поскольку она объединилась с первой ячейкой.

Объединение ячеек сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна (о табличном Web-дизайне см. в главе 10), трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.

Что дальше?

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

В следующей главе мы познакомимся со средствами навигации по Web-сайту. Это всевозможные гиперссылки, как текстовые, так и графические (изображения- гиперссылки и карты-изображения). И наконец-то объединим разрозненные Web- странички в единый Web-сайт!

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

Осталось связать эти разрозненные Web-страницы воедино — в Web-сайт. Как это осуществить? С помощью средств навигации — гиперссылок.

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

Начнем с самых простых — текстовых гиперссылок, которые представляют собой фрагмент текста.

Создать текстовую гиперссылку очень просто. Достаточно найти в блочном элементе (например, абзаце) фрагмент текста, который нужно превратить в гиперссылку, и заключить его в парный тег <A>. Интернет-адрес целевой Web-страницы указывают в атрибуте HREF этого тега.

Гиперссылка (т. е. тег <A>) представляет собой встроенный элемент Web-страницы, т. е. это часть блочного элемента, например, абзаца:

Вот гиперссылка, которая указывает на Web-страницу page125.html, хранящуюся в папке pages, вложенной в корневую папку сайта, на сайте http://www.somesite.ru:

<A HREF="http://www.somesite.ru/pages/page125.html">Страница № 125</A>

А эта гиперссылка указывает на архивный файл archive.zip, хранящийся в той же папке, что и Web-страница, которая в данный момент открыта в Web-обозревателе (текущая Web-страница):

<A HREF="archive.zip">Архив</A>

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

<P><A HREF="22.html">Предыдущая страница</A>,

<A HREF="24.html">следующая страница</A>.</P>

Этот фрагмент HTML-кода создает абзац, содержащий сразу две гиперссылки, которые указывают на разные целевые Web-страницы.

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

Пример:

<A HREF="http://www.somesite.ru/pages/page125.html">Страница

<EM>№ 125</EM></A>

Тег <A> поддерживает необязательный атрибут TARGET. Он задает цель гиперссылки, указывающую, где будет открыта целевая Web-страница. Так, если атрибуту TARGET присвоить значение "_blank", целевая страница будет открыта в новом окне Web- обозревателя.

Например, если мы изменим код первого примера гиперссылки таким образом (исправления выделены полужирным шрифтом):

<A HREF="http://www.somesite.ru/pages/page125.html" TARGET="_blank">Страница № 125</A>

"Страница № 125" будет открыта в новом окне Web-обозревателя.

Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается в том же окне Web-обозревателя), нужно присвоить атрибуту TARGET значение "_self" (это его значение по умолчанию) или вообще убрать данный атрибут из тега <A>.

Имеется также возможность создать гиперссылку, которая никуда не указывает ("пустая" гиперссылка). Для этого достаточно задать в качестве значения атрибута HREF значок # ("решетка")

<A HREF="#">А я никуда не веду!</A>

При щелчке на такой гиперссылке ничего не произойдет.

НА ЗАМЕТКУ

"Пустыми" гиперссылками мы будем активно пользоваться в частях III и IV, когда начнем писать Web-сценарии.

Правила отображения гиперссылок Web-обозревателем:

— обычные гиперссылки выделяются синим цветом;

— гиперссылки, по которым посетитель уже "ходил" (посещенные гиперссылки), выводятся темно-красным цветом;

— гиперссылка, по которой посетитель в данный момент щелкает (активная гиперссылка), выводится ярко-красным цветом;

— текст любых гиперссылок подчеркивается;

— при помещении курсора мыши на гиперссылку Web-обозреватель меняет его форму на "указующий перст".

Таково поведение по умолчанию, которое мы можем изменить, создав соответствующее представление. О том, как это сделать, будет рассказано в части II.

Об интернет-адресах файлов мы говорили еще в главе 1. Однако WWW привносит в них кое-что новое, что нам обязательно нужно знать.

Рассмотрим первый пример гиперссылки из предыдущего раздела. Ее интернет-адрес таков: http://www.somesite.ru/pages/page125.html. Он содержит и интернет- адрес Web-сервера, и путь файла, который нужно получить. Поэтому он называется полным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта.

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

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

НА ЗАМЕТКУ

О корневой папке сайта также было рассказано в главе 1. Вкратце: это особая папка, находящаяся на диске компьютера, на котором хранится Web-сайт и работает Web- сервер; в этой папке должны помещаться все файлы Web-сайта.

Например, интернет-адрес

/page3.html

указывает на файл page3.html, хранящийся в корневой папке Web-сайта. А интернет-адрес

/articles/article1.html

указывает на файл article1.html, хранящийся в папке articles, вложенной в корневую папку Web-сайта.

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

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

Рассмотрим несколько примеров подобных интернет-адресов. Интернет-адрес

archive.zip

указывает на файл archive.zip, хранящийся в той же папке, что и файл текущей Web-страницы.

Интернет-адрес

chapter3/page1.html

указывает на Web-страницу page1.html, хранящуюся в папке chapter3, вложенной в папку, в которой хранится текущая Web-страница.

Следующий интернет-адрес

../contents.html

указывает на Web-страницу contents.html, хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница. (Обратим внимание на две точки в начале пути — так обозначается папка предыдущего уровня вложенности.)

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

НА ЗАМЕТКУ

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

ВНИМАНИЕ!

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

Разобравшись с гиперссылками и интернет-адресами, свяжем, наконец, наши Web- странички в единый Web-сайт. Чтобы нам было удобнее, создадим в папке, где хранятся все файлы нашего Web-сайта, папку tags. В эту папку перенесем все Web- страницы, описывающие теги HTML (их у нас пока что четыре), и сопутствующие им файлы (их три: изображение, аудио- и видеоролик). Файл index.htm никуда из корневой папки перемещать не будем — ведь он хранит Web-страницу по умолчанию.

Откроем Web-страницу index.htm и найдем в ней HTML-код, формирующий список тегов. Создадим там гиперссылки, указывающие на соответствующие Web-страницы.

Вот HTML-код, создающий гиперссылку, указывающую на Web-страницу с описанием тега <AUDIO>:

<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>

Остальные гиперссылки создаются аналогично.

Перейдя на Web-страницу, описывающую какой-либо тег, посетитель должен иметь возможность вернуться назад — на главную Web-страницу. Конечно, это можно сделать, нажав кнопку возврата назад на панели инструментов Web- обозревателя или клавишу <Backspace> на клавиатуре. Но правила хорошего тона Web-дизайна требуют, чтобы на Web-странице присутствовала соответствующая гиперссылка.

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

<P><A HREF="../index.htm">На главную Web-страницу</A></P>

Осталось создать на главной Web-странице гиперссылку на Web-страницу Русской Википедии, которая содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг 6.1).

Листинг 6.1

<BLOCKQUOTE>

<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине. (<A HREF="http://ru.wikipedia.org/wiki/HTML" TARGET="_blank">вся статья</A>)</P>

</BLOCKQUOTE>

Здесь мы указали для тега <A> атрибут TARGET со значением "_blank". И Web-страница с текстом статьи о HTML будет открываться в новом окне Web-обозревателя. Так что посетитель сможет "залезть" в Википедию, не покидая нашего Web-сайта.

HTML позволяет нам создать гиперссылку, указывающую на адрес электронной почты (почтовую гиперссылку). Щелчок на ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет-адрес такой гиперссылки записывается особым образом.

Пусть мы хотим создать гиперссылку, указывающую на почтовый адрес: user@mailserver.ru

Согласно стандарту HTML, этот почтовый адрес должен быть записан так:

mailto: user@mailserver.ru

причем между двоеточием после mailto и собственно адресом не должно быть пробелов.

Тогда наша почтовая гиперссылка будет выглядеть так:

<A HREF="mailto: user@mailserver.ru">Отправить письмо</A>

В конце главной Web-страницы у нас приведены сведения о правах разработчиков. Давайте превратим слово "читатели" в почтовую гиперссылку. Создающий ее HTML-код будет выглядеть так:

<A HREF="mailto: user@mailserver.ru">читатели</A>

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

Язык HTML предлагает нам некоторые дополнительные возможности для создания гиперссылок. Их применяют нечасто, но иногда они полезны.

Прежде всего, мы можем указать для гиперссылки "горячую" клавишу. Если посетитель нажмет эту клавишу, удерживая нажатой клавишу <Alt>, Web-обозреватель выполнит переход по данной гиперссылке.

Для указания "горячей" клавиши предусмотрен необязательный атрибут ACCESSKEY тега <A>. Значение этого атрибута — латинская буква, соответствующая нужной клавише:

<A HREF="http://www.somesite.ru/pages/page125.html" ACCESSKEY="d">Страница № 125</A>

Здесь мы указали для гиперссылки "горячую" клавишу <D>. И, чтобы перейти по ней, посетителю будет достаточно нажать комбинацию клавиш <Alt>+<D>.

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

— Если нажать клавишу <Enter>, Web-обозреватель выполнит переход по гиперссылке, имеющей в данный момент фокус ввода.

— Если нажать клавишу <Tab>, Web-обозреватель перенесет фокус ввода на следующую гиперссылку.

— Если нажать комбинацию клавиш <Shift>+<Tab>, Web-обозреватель перенесет фокус ввода на предыдущую гиперссылку.

Порядок, в котором выполняется перенос фокуса ввода с одной гиперссылки на другую при нажатии клавиш <Tab> или <Shift>+<Tab>, так и называется — порядок обхода. По умолчанию он совпадает с порядком, в котором гиперссылки определены в HTML-коде Web-страницы. Но мы можем указать свой порядок обхода с помощью атрибута TABINDEX тега <A>. Его значение — целое число от –32 767 до

32 767 — номер в порядке обхода.

— Если указан положительный номер, именно он будет определять порядок обхода. Иными словами, сначала фокус ввода получит гиперссылка с номером 1, потом — с номером 2, далее — с номером 3 и т. д.

— Если указан номер, равный нулю, обход будет осуществляться в порядке, в котором гиперссылка определена в HTML-коде Web-страницы. Фактически ноль — значение атрибута тега TABINDEX по умолчанию.

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

Рассмотрим небольшой пример:

<P><A HREF="page1.htm" TABINDEX="3">Страница 1</A></P>

<P><A HREF="page2.htm" TABINDEX="2">Страница 2</A></P>

<P><A HREF="page3.htm" TABINDEX="1">Страница 3</A></P>

Этот HTML-код создает три гиперссылки с "обратным" порядком обхода. Сначала фокус ввода получит гиперссылка "Страница 3", потом — "Страница 2" и напоследок — "Страница 1".

В начале этой главы говорилось, что гиперссылка может быть в виде не только фрагмента текста, но и картинки или даже представлять собой фрагмент графического изображения. Вот графическими гиперссылками мы сейчас и займемся.

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

Для создания изображения гиперссылки достаточно поместить внутрь тега <A> тег <IMG>:

<A HREF="http://www.w3.org"><IMG SRC="w3logo.gif"></A>

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

<A HREF="mailto: user@mailserver.ru"><IMG SRC="email.gif"></A>

А этот HTML-код создает почтовую изображение-гиперссылку.

Правила вывода изображений-гиперссылок Web-обозревателем:

— изображение-гиперссылка окружается рамкой, имеющей соответствующий гиперссылке цвет: синий — для непосещенной, темно-красный — для посещенной и т. д.;

— при помещении курсора мыши на изображение-гиперссылку Web-обозреватель меняет его форму на "указующий перст", как и в случае текстовой гиперссылки.

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

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

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

Изображение-карту создают в три этапа. Первый этап — создание самого изображения с помощью хорошо нам знакомого тега <IMG>:

<IMG SRC="map.gif">

Второй этап — создание карты, особого элемента Web-страницы, который описывает набор "горячих" областей изображения-карты. Сама карта на Web-странице никак не отображается.

Карту создают с помощью парного тега <MAP>:

<MAP NAME="<имя карты>"></MAP>

ВНИМАНИЕ!

Здесь для описания формата тега <MAP> впервые применяются типографские соглашения, перечисленные во введении этой книги. Автор настоятельно рекомендует прежде ознакомиться с ними.

С помощью обязательного атрибута NAME тега <MAP> задается уникальное в пределах Web-страницы имя карты. Оно однозначно идентифицирует данную карту, может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы:

<MAP NAME="samplemap"></MAP>

После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут USEMAP тега <IMG>. Его значение — имя привязываемой к изображению карты, причем в начале этого имени обязательно следует поставить символ # ("решетка"). (В имени, заданном атрибутом NAME тега <MAP>, символ # присутствовать не должен.)

<IMG SRC="map.gif" USEMAP="#samplemap">

На третьем этапе создают описания самих "горячих" областей в карте. Их помещают внутрь соответствующего тега <MAP> и формируют с помощью одинарных тегов

<AREA>:

<AREA [SHAPE="rect|circle|poly"] COORDS="<набор параметров>" HREF="<интернет-адрес гиперссылки>"|NOHREF TARGET="<цель гиперссылки>">

Необязательный атрибут SHAPE задает форму "горячей" области. Обязательный атрибут COORDS перечисляет координаты, необходимые для построения этой области. Значения атрибута SHAPE:

— "rect" — прямоугольная "горячая" область. Атрибут COORDS в этом случае записывается в виде COORDS="<X1>,<Y1>,<X2>,<Y2>", где X1 и Y1 — координаты верхнего левого, а X2 и Y2 — правого нижнего угла прямоугольника. Кстати, если атрибут SHAPE отсутствует, создается именно прямоугольная область;

— "circle" — круглая "горячая" область. В этом случае атрибут COORDS имеет вид COORDS="<X центра>,<Y центра>,<радиус>";

— "poly" — "горячая" область в виде многоугольника. Атрибут COORDS должен иметь вид COORDS="<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>…", где Xn и Yn — координаты соответствующей вершины многоугольника.

Атрибут HREF задает интернет-адрес гиперссылки — он, собственно, нам уже знаком. Он может быть заменен атрибутом без значения NOHREF, задающим область, не связанную ни с каким интернет-адресом. Это позволяет создавать оригинальные изображения-карты, например, карту в виде бублика, "дырка" которого никуда не указывает.

Также знакомый нам атрибут TARGET задает цель гиперссылки. (Конечно, указывать его имеет смысл только в том случае, если мы создаем именно "горячую" область, а не "дырку" с атрибутом NOHREF.)

Листинг 6.2 содержит полный HTML-код, создающий изображение-карту.

<IMG SRC="map.gif" USEMAP="#samplemap">

Листинг 6.2

.

<MAP NAME="samplemap">

<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">

<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">

<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>

<AREA SHAPE="rect" COORDS="0,100,30,100" HREF="appendix.html" TARGET="_blank">

</MAP>

Здесь мы создали две круглые "горячие" области, указывающие на Web-страницы page1.html и page2.html, многоугольную область, не ссылающуюся никуда, и прямоугольную область, ссылающуюся на Web-страницу appendix.html. Причем последняя "горячая" область при щелчке на ней откроет Web-страницу в новом окне Web-обозревателя.

Вот и все об изображениях-картах и о графических гиперссылках вообще.

Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.

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

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

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

Давайте создадим на главной Web-странице нашего Web-сайта полосу навигации с гиперссылками, указывающими на другие его Web-страницы: посвященную CSS, содержащую список примеров и сведения о разработчиках. Для простоты реализуем ее в виде абзаца, содержащего нужные гиперссылки. Поместим ее в самом верху Web-страницы, перед заголовком (листинг 6.3).

Листинг 6.3

.

<BODY>

<P><A HREF="css_index.htm">CSS</A> |

<A HREF="samples_index.htm">Примеры</A> |

<A HREF="about.htm">О разработчиках</A></P>

<H1>Справочник по HTML и CSS</H1>

.

Как видим, наша первая полоса навигации очень проста — обычный абзац с набором гиперссылок, разделенных символом | (вертикальная черта). Ну так ведь и наш первый Web-сайт не слишком сложен…

При желании мы можем создать остальные Web-страницы нашего первого Web- сайта. Но не будем сильно в этом усердствовать — все равно мы его потом переделаем.

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

Это так называемые якоря (anchors). Они не указывают на другую Web-страницу (файл, адрес электронной почты), а помечают некоторый фрагмент текущей Web- страницы, чтобы другая гиперссылка могла на него сослаться. Так можно пометить отдельные главы длинного текстового документа и посетитель сможет "перескочить" к нужной ему главе, щелкнув гиперссылку в оглавлении. Очень удобно!

Якоря создают с помощью тега <A>, как и гиперссылки. Только в данном случае атрибут HREF в нем присутствовать не должен. Вместо него в тег <A> помещают обязательный здесь атрибут ID, задающий уникальное в пределах текущей Web- страницы имя создаваемого якоря. К нему предъявляются те же требования, что и к имени карты (см. раздел, посвященный картам).

И еще. Мы уже знаем, что тег <A> парный и в случае гиперссылки в него помещают текст (или изображение), который этой самой гиперссылкой и станет. Когда создают якорь, в этот тег не помещают ничего (так называемый пустой тег). По крайней мере, так поступают чаще всего.

Листинг 6.4 иллюстрирует пример HTML-кода, создающего якорь.

Листинг 6.4

.

<P>Окончание второй главы…</P>

<A ID="chapter3"></A>

<P>Начало третьей главы…<P>

.

Здесь мы поместили якорь с именем chapter3 перед началом третьей главы нашего воображаемого документа.

Хорошо! Якорь готов. Как теперь на него сослаться с другой Web-страницы? Очень просто. Для этого достаточно создать обычную гиперссылку, добавив в ее интернет-адрес имя нужного нам якоря. Имя якоря ставят в самый конец интернет-адреса и отделяют от него символом # ("решетка").

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

<A HREF="novel.htm#chapter3">Глава 3</A>

При щелчке на такой гиперссылке Web-обозреватель откроет Web-страницу novel.htm и прокрутит ее в окне так, чтобы достичь места, где находится якорь chapter3.

Если же нам нужно сослаться на якорь с той же Web-страницы, где он находится, то можно использовать в качестве интернет-адреса только имя данного якоря, предварив его символом "решетки":

<A HREF="#chapter3">Глава 3</A>

На этом закончим главу о средствах навигации.

Что дальше?

В этой главе мы рассмотрели средства навигации, предлагаемые языком HTML, а именно — всевозможные гиперссылки. И связали все созданные нами к данному моменту Web-страницы в единый Web-сайт.

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