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

дает Web-браузеру указание выгрузить архивный файл с изображением

corvette. zip, когда посетитель щелкнет на каком-либо из слов «Щелкните здесь»:

Глава 1. Основы языка HTML 6 1





Атрибут href дает Web-браузеру указание извлечь фотографию корвета

(corvette. zip ) из папки cars на Web-сайте www. home. com.

Гипертекстовые ссылки, позволяющие посетителям выгружать файлы и «осу —

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

Кроме того, поскольку у большинства путешественников по Web подчеркну —

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

начального и конечного дескрипторов подчеркивания () для выделения

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



Выделение отдельных букв и слов с помощью дескрипторов форматирования символов

Если требуется, чтобы Web-браузер отобразил на Web-странице текст, вы про — сто набираете текст, который хотите видеть на экране, между начальным и ко — нечным дескрипторами тела документа () в HTML-коде Web-стра- ницы. Считывая HTML-документ, Web-браузер выводит на экран весь найденный

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

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

ния, внедряемые в документы текстовыми процессорами вроде Microsoft Word.







Предположим, например, вы хотите, чтобы отдельные слова в вашем Web-доку- менте были выведены полужирным. Чтобы выделить полужирным букву, слово или

группу слов, заключите требуемый текст между начальным и конечным дескрипто —

рами выделения полужирным (), как показано в приведенном ниже коде

(вокруг слова «полужирным»):



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

62 Глава 1. Основы языка HTML





жирным (), в которые заключено слово «полужирным», дают Web-браузе —

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

ва «ГГ. в слове «Полужирным» будет выведена полужирным.



Первая буква последнего слова выделена Полужирным



Кроме начального и конечного дескрипторов выделения полужирным

(), для усиления значимости текста на Web-странице применяются сле — дующие дескрипторы:

• . Дескрипторы цитаты выделяют текст, обычно курсивом.

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

HTML-кода в учебных документах.

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

• . Дескрипторы цитаты в кавычках ставят кавычки вокруг заключен — ного в них текста.

• . Дескрипторы нижнего индекса создают нижний индекс, или отображают текст немного ниже основного текста.

• . Дескрипторы верхнего индекса создают верхний индекс, или отображают текст немного выше основного текста.

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

• . Дескрипторы усиления выделяют текст, отображая заключенные в них слова полужирным курсивом.

• . Дескрипторы курсива выделяют заключенные в них слова курсивом.

• . Дескрипторы подчеркивания выделяют заключенные в них слова подчеркиванием. Этот дескриптор является нерекомендованным.

Использовать дескрипторы форматирования можно по отдельности либо в со — четании друг с другом. В следующем примере начальный и конечный дескрипто —

ры выделения полужирным () комбинируются с начальным и конечным

дескрипторами верхнего индекса (), чтобы выделить на страни — це слово «превосходный»:







Хотя дескрипторы форматирования символов визуально изменяют текст в окне браузера, более эффективный (и в большей степени отвечающий рекомен — дациям W3C) способ задания стилей текста — это применение CSS-правил.

Глава 1. Основы языка HTML 63



Использование специальных символов

в HTML-документах

Поместить обычный текст на Web-страницу несложно: нужно всего лишь со —

здать HTML-документ и ввести текст между дескрипторами документа.

Web-браузер без труда читает и отображает буквы (A-Z, a-z) и цифры (0-9), кото — рые он находит в HTML-документе. Однако существуют некоторые специальные

символы, которые можно ввести в документ в текстовом редакторе, но которые

Web-браузер не выведет на Web-страницу. К счастью, язык HTML предусматрива —

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







Скажем, вы создаете Web-страницу и хотите отобразить символ зарезервированных прав (©), чтобы указать, что некоторые элементы страницы, а, возможно, и ди —

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

символ хранятся в виде уникального числового значения, называемого ASCII-ко- дом символа. Чтобы отобразить на Web-странице такой символ, как ©, следует ввести уникальное значение этого символа (то есть его ASCII-код) в HTML-код Web-страницы.

Например, числовое значение символа © — 169. Чтобы дать Web-браузеру указание отобразить символ, которому соответствует ASCII-код 169, поставьте пе —

ред значением символа комбинацию амперсант (&) и знака «решетки» (#), а пос —

ле кода — точку с запятой (;). Таким образом, чтобы заставить Web-браузер ото —

бразить на Web-странице символ ©•, нужно поместить
б9; в HTML-код Web-страницы. Для часто употребляемых символов процедура упрощена: вместо числа можно вводить соответствующую символу текстовую последовательность. Например, в символьной записи символ © выглядит как &сору;.

В приведенном ниже коде показано использование символа зарезервирован — ных прав в HTML-документе. При отображении специального символа запись

&#ххх (где ххх — ASCII-значение, соответствующее данному символу) сообщает

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



64 Глава 1. Основы языка HTML



Перечень кодов специальных символов и соответствующих им значений можно найти по адресу http://www. htmlhelp. com/reference/charset/ .







Использование горизонтальных линий для структурирования Web-содержимого

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

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

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

приведенном ниже HTML-коде дескрипторы дают Web-браузеру указание поместить в окне горизонтальные линии, как показано на рис. 1.19:



Глава 1. Основы языка HTML 65







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

Определить внешний вид горизонтальной линии можно с помощью следую- щих атрибутов:

• align. Атрибут alig n дает Web-браузеру указание выровнять горизонтальную линию по правому краю, по левому краю или по центру в окне браузера.

• noshade. Атрибут noshade дает Web-браузеру указание отобразить горизон — тальную линию без затенения.

66 Глава 1. Основы языка HTML





• size. Атрибут siz e (измеряемый в пикселях) определяет толщину гори —

зонтальной линии.

• width. Атрибут width определяет длину линии. Ширину горизонтальной линии можно указать либо в пикселях, либо в виде процентного отноше — ния к ширине окна браузера. Например, если вы установите ширину рав —

ной 50% (width=M50%»), браузер проведет горизонтальную линию, длина

которой будет равна половине ширины окна.



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

с различными вариантами ширины, размера и выравнивания.







Использование дескрипторов блоков цитирования для управления левым и правым отступами текста

В языке HTML не так-то просто управлять расстоянием между текстом и ле — вым и правым полями Web-документа. По умолчанию Web-браузер устанавливает

левое и правое поля страницы (то есть ширину Web-страницы) такими, чтобы страница умещалась по ширине в окно браузера. (Альтернативный вариант —

разрешить части Web-страницы «выходить» за правый край окна браузера и снаб —

дить окно горизонтальной полосой прокрутки, с помощью которой посетитель сможет отобразить содержимое, не попавшее в видимую область окна браузера.)

Конечно же, авторы Web-страниц понимают, что Web-браузер при необходи —

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

HTML-таблиц. Не получив определенных инструкций по форматированию, Web —

браузер поместит первый символ текста сразу же у левого поля и «завернет» (пе —

Глава 1. Основы языка HTML 67





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

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



Например, следующий HTML-код описывает Web-страницу с заголовком и двумя абзацами текста, к которым применен стиль блоков цитирования (см. рис. 1.20):









68 Глава 1. Основы языка HTML



Создание упорядоченных и неупорядоченных списков

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

ся алфавитная или числовая система, а в неупорядоченных (unordered) каждый элемент списка идентифицируется символом, или маркером.





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

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

HTML-код описывает упорядоченный список, показанный на рис. 1.21.





Как показано в этом примере, чтобы обозначить упорядоченный список в

HTML-коде Web-страницы, поместите элементы списка между начальным и ко —

нечным дескрипторами упорядоченного списка () . Затем, чтобы доба —

Глава 1. Основы языка HTML 69





вить в список элементы, поместите текст каждого элемента между начальным и

конечным дескрипторами элемента списка () .

По умолчанию Web-браузер отображает перед каждым элементом списка араб — скую цифру (1, 2, 3, 4, …), причем первый элемент получает номер 1. Если вы хоти —

те использовать вместо арабских цифр буквы или римские цифры, поместите в на —

чальный дескриптор упорядоченного списка атрибут type, как указано ниже:

• type=»i»>. Перечисляет элементы с использованием арабских цифр

(по умолчанию).

• type=»a»>. Перечисляет элементы с использованием букв нижнего регистра.

• type=»A»>. Перечисляет элементы с использованием букв верхнего регистра.

• . Перечисляет элементы с использованием римских цифр нижнего регистра.

• type=»i»>. Перечисляет элементы с использованием римских цифр верхнего регистра.

Чтобы начать упорядоченный список не с «Г1, а с другой цифры (или же не с

«а», а другой буквы) поместите в дескриптор атрибут start со значением, от — личным от «1″ . Например, упорядоченный список, в начале которого стоит сле —

дующий дескриптор , будет начинаться с буквы «е», поскольку «е» — пятая буква (английского) алфавита:



Аналогично, если вы присвоите атрибуту type значение «Г, чтобы указать,

что браузер должен ставить перед каждым элементом списка арабскую цифру,

браузер начнет список с элемента под номером 5.

Неупорядоченные списки позволяют создавать группы текста, в которых порядок

элементов в списке не имеет значения, — например, список покупок/Следующий

HTML-код создает неупорядоченный список, также показанный на рис. 1.21:





Чтобы обозначить неупорядоченный список в HTML-коде Web-страницы, по — местите элементы списка между начальным и конечными дескрипторами неупо —

рядоченного списка () . Как и в случае упорядоченного списка, для до — бавления элементов в неупорядоченный список следует поместить текст каждого

элемента между начальным и конечными дескрипторами списка () .

7 0 Глава 1. Основы языка HTML





По умолчанию Web-браузер отобразит в качестве маркера перед каждым эле —

ментом неупорядоченного списка жирную черную точку (•). Если вы хотите, что — бы браузер использовал в качестве маркера другой символ, выберите символ для представления маркера с помощью атрибута type, как указано ниже:

• type=»disc»>. Маркирует элементы жирными черными точками (по умолчанию).

• type=»square»>.MapKnpyeT элементы черными контурными квадратика — ми.

• type=»circle»>. Маркирует элементы черными контурными точками

(незаполненными окружностями).



Создание вложенных списков

Из предыдущего практикума вы узнали, как создавать упорядоченные и не — упорядоченные списки. Можно также создавать упорядоченные и неупорядочен — ных списки внутри других списков; иными словами, можно создать вложенный список (nested list). Вложенный список можно использовать для отображения на — бора действий, которые требуется выполнить на том или ином шаге внешнего списка, как показано на рис. 1.22.



Шаг 3 приведенного списка требует более подробного объяснения, нежели просто

«загрузите программу». Здесь можно воспользоваться вставкой вложенного списка для описания действий, которые необходимо выполнить для загрузки программы. Следующий HTML-код описывает вставку показанного выше вложенного списка:



Глава 1. Основы языка HTML 7 1







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

списка () . Упорядоченный список является вложенным, поскольку на —

чальный и конечный дескрипторы упорядоченного списка () находят —

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

списка () . (Фразы между начальным и конечными дескрипторами эле —

мента списка ( ) выводятся на экран в виде элементов каждого списка

(и внешнего, и вложенного).)

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

го дескрипторов упорядоченного списка ( ) или между парой

начального и конечного дескрипторов неупорядоченного списка () . За —

тем добавьте элементы во вложенный список, вставляя текст между парами на —

чальных и конечных дескрипторов элементов списка () , вставленных после определения элемента списка во внешнем списке. Помните, что и упоря — доченные, и неупорядоченные списки можно вкладывать во внешний список (который может быть упорядоченным или неупорядоченным списком).

Создание списков определений

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

ные списки, равно как и вкладывать один список в другой. Помимо элементов, организованных в маркированные и нумерованные списки, язык HTML также позволяет создавать списки определений. Как следует из названия, список опре — делений {definition list) — это список терминов, после каждого из которых приво- дится его определение. Web-браузер выводит определение на следующей строке под определяемым термином с отступом вправо, как показано на рис. 1.23.

Список определений — это единственный тип списка, в котором индивиду- альные элементы списка не идентифицируются начальными и конечными деск —

рипторами элемента списка () . Вместо этого для создания списков оп- ределений используются два новых дескриптора:

• . Начальный и конечный дескрипторы термина обозначают тер — мин, описание или определение которого будет дано. (Начальный и ко —

7 2 Глава 1. Основы языка HTML







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

• . Начальный и конечный дескрипторы описания обозначают один или более абзацев смещенного вправо текста описания.





Чтобы создать на Web-странице список определений, поместите термины и опре — деления между начальным и конечными дескрипторами списка определений

() . Например, следующий HTML-код создает список определений, со —

стоящий из двух терминов:





Использование дескрипторов предварительно форматированного текста для управления отображением Web-содержимого

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

Глава 1. Основы языка HTML 73





конечными дескрипторами выделения полужирным () в HTML-коде

Web-страницы. Аналогично, чтобы сдвинуть текст на одну или несколько строк вниз, вы вставляете один или несколько дескрипторов

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

в HTML-документ для задания интервалов или выравнивания содержимого стра — ницы (см. рис. 1.24).

Однако вы можете воспользоваться начальным и конечными дескрипторами

предварительно форматированного текста (), чтобы объединить функции форматирования и управления расположением в одном наборе HTML — дескрипторов. Начальный и конечный дескрипторы предварительно форматиро —

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



ПРАКТИКУМ

Предварительно форматированный текст можно использовать для отображения такого текста, как листинги программ и рецепты. Например, на рис. 1.25 пока — зана Web-страница с предварительно форматированным текстом.

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

вать дескрипторы для вставки рисунков или дескрипторы для вставки элементов управления ActiveX или Java-аплетов. Хотя начальный и ко —

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

Отображение навигационного меню

в фрейме Web-страницы

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

по всем закоулкам сайта, подобно дорожной карте.

7 4 Глава 1. Основы языка HTML







Глава 1. Основы языка HTML 7 5





При разработке навигационного меню важно решить, где оно будет распола — гаться на Web-странице. На большинстве Web-сайтов меню находится горизон — тально вверху страницы или же вертикально с левой стороны окна приложения. Где бы вы ни решили поместить меню, будьте последовательны в своем выборе. Если вы поместили меню вертикально слева на главной странице сайта (то есть

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