«HTML: Популярный самоучитель»

Александр Анатольевич Чиртик HTML: Популярный самоучитель

Введение

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

Язык разметки гипертекста HTML – стандартное средство представления информации в среде World Wide Web (WWW) в виде веб‑страниц. Поскольку HTML является стандартизированным языком разметки, документы, написанные с его использованием, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением.

Cуществует большое количество графических сред, предназначенных для быстрой и качественной разработки веб‑сайтов. Тем не менее одной из замечательных особенностей HTML является то, что полноценные веб‑страницы можно создавать, имея под рукой лишь простейший текстовый редактор. Создание веб‑страниц с использованием HTML и CSS или JavaScript – уже не простое форматирование текста, а интересное занятие, очень похоже на программирование.

Большая часть представленной вашему вниманию книги посвящается именно HTML. В девяти первых главах последовательно изложен материал, в котором рассмотрены практически все возможности «чистого» языка HTML. После изучения этого материала вы научитесь создавать не только простые страницы, но и достаточно сложные сайты, а также познакомитесь со средствами HTML, позволяющими без привлечения дополнительных средств и технологий (например, CSS, DHTML) создавать привлекательный и функциональный интерфейс своих веб‑страниц. Последние главы книги посвящены двум более новым технологиям, дополняющим HTML и позволяющим разнообразить и «оживить» статичные по своей природе HTML‑документы, – CSS (каскадные таблицы стилей) и DHTML (динамический HTML) с основами DOM (объектной модели документа). В книге также приведен небольшой пример создания сайта целиком и освещены основные вопросы публикации созданного сайта в Интернете.

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

Тексты программ на сайте издательства

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

От издательства

Ваши замечания, предложения, вопросы отправляйте по следуюшему адресу электронной почты: gurski@minsk.piter.com (издательство «Питер», компьютерная редакция).

На сайте издательства  вы найдете подробную информацию о наших книгах.

Глава 1 Введение в HTML

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

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

1.1. Краткая история HTML

Началось все для HTML (а вместе с ним и для WWW) в конце 1980‑х годов, когда у ученых из Европейской лаборатории элементарных частиц (CERN) возникла необходимость обмениваться множеством различных документов при помощи быстро развивающейся сети Интернет. Тогда необходимо было придумать способ публикации документов в сети таким образом, чтобы к любому нужному документу можно было легко получить доступ. К тому же нужно было, чтобы документы отображались на всех компьютерах одинаковым образом.

Решение поставленной задачи было найдено сотрудником CERN Бернерс‑Ли. В 1989 году Тим Бернерс‑Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык – SGML, который предусматривал установку связей между документами с помощью гиперссылок. Новый язык разметки был назван HTML (HyperText Markup Language). Этот же человек реализовал и первую программу для просмотра HTML‑документов – браузер.

Затея с гипертекстом очень быстро прижилась. Вскоре в Интернете выросла большая сеть гипертекстовых документов, которую постепенно стали называть World Wide Web. К тому же в 1993 году команда программистов, руководителем которой являлся основатель компании Netscape Марк Андриессен, разработала первый браузер, имеющий полноценный графический интерфейс и позволяющий работать с мышью, – Mosaic. Это не могло не добавить популярности быстро развивающейся Сети.

Со временем Интернет стал востребован не только учеными: к нему пришли и рядовые пользователи, причем их число неуклонно возрастало. Для многих было очевидно, что HTML, не предполагающий никакой динамики в создаваемых с его помощью документах, достаточно скучен и невзрачен. Это дало толчок развитию технологий CSS, введению поддержки апплетов Java, а после и сценариев (первым языком был JavaScript).

Нельзя не отметить, что с образованием и ростом Сети создателей HTML не на шутку взволновала «чистота» своего детища. Существовали небезосновательные опасения, что производители браузеров, которые скоро должны были прийти на рынок, будут «баловать» своих пользователей фирменными нововведениями, которые, естественно, будут поддерживаться только фирменными браузерами. В 1994 году была создана организация, взявшая на себя разработку единых стандартов развития WWW – World Wide Web Consortium (W3C). Эта организация и занялась подготовкой стандартов HTML (начиная с HTML 2.0). Правда, несмотря на наличие W3C, нововведения в HTML начинали поддерживаться производителями браузеров гораздо раньше, чем эта организация их стандартизировала (так, например, обстояло дело с фреймами, с внедрением сценариев в HTML‑документы, с объектной моделью документов и т. д.).

Организация W3C существует и сейчас. Она занимается теми же вопросами стандартизации, однако уже давно не HTML (последняя спецификация HTML 4.01 была принята 24 декабря 1999 года). Развитие языка HTML сегодня практически завершено, а основные усилия W3C сконцентрированы на работе над более новыми технологиями, например расширяемым языком разметки XML, языком преобразований XSLT и др. (если интересно, можно заглянуть на  – официальный сайт этой организации).

Язык HTML в том виде, в котором он существует сейчас, обладает большим потенциалом представления информации. Причем он рассчитан не только на пользователей персональных компьютеров. Документы HTML можно просматривать на очень большом количестве различных по своим возможностям устройств: от черно‑белого экрана мобильного телефона до телетайпа или терминала. Кроме того, в последние версии HTML включен ряд возможностей, облегчающих представление документов неграфическими средствами (например, речевыми синтезаторами), позволяющими пользоваться услугами WWW людям с физическими недостатками.

1.2. Базовые понятия HTML

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

Для начала следует разобраться с тем, что такое HTML‑документ. HTML‑документ – это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте, и оформленный в соответствии с правилами языка HTML. Для файлов, содержащих HTML‑документы, используется расширение HTML или HTM (например, MyWedPage.html или MyWedPage.htm). Расширение HTM использовалось ранее для корректного отображения имен файлов в формате MS‑DOS. На самом деле неважно, какое из приведенных расширений использовать.

Далее в книге HTML‑документы могут называться просто документами, а также страницами и веб‑страницами. Под сайтами в тексте книги подразумевается несколько документов, объединенных единой системой навигации.

Элементы

Элемент – это конструкция языка HTML, содержащая данные. HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д. Конструкция <P>Привет !</P> представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть – <P> – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слова Привет !. И наконец, </P> является закрывающим тегом. Как видно, название элемента (P) присутствует и в открывающем, и в закрывающем теге. Регистр символов в названии элемента не имеет значения. Однако в соответствии с соглашениями, принятыми большинством разработчиков, в примерах данной книги названия элементов записаны в верхнем регистре.

Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ /. Для некоторых типов элементов допускается отсутствие закрывающего тега (например, элемент P, указывающий начало абзаца). Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке.

Атрибуты

Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:

<BODY bgcolor = «#FF0000»>

Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor (имеющего тип %Color) в элементе BODY приведет к тому, что цвет фона страницы станет красным. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны.

В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:

<BODY bgcolor = «#FF0000» text = «#0000FF»>

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

Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения. Ниже приведен пример, в котором устанавливаются истинные значения двух атрибутов HTML‑элемента INPUT:

<INPUT readonly disabled>

Вложенные элементы

Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта:

<I>Курсив<B>-Полужирный курсив-</B>Курсив</I>

При обработке приведенного HTML‑кода получится страница, показанная на рис. 1.1 (как и чем обрабатываются HTML‑документы, будет рассказано далее).

Рис. 1.1. Применение вложенных элементов

На приведенном рисунке видно, как действие внешнего (или родительского) элемента I (задание курсива) дополняет действие внутреннего элемента B (задание полужирного начертания шрифта).

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

<I>Неправильное закрытие<B> внутреннего элемента</I>

до закрытия внешнего</B>

Блочные и встроенные элементы

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

Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д. В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы.

1.3. Просмотр HTML-документа

Сам по себе HTML‑документ практически нечитабелен для обычного пользователя. Для чего же тогда применяется форматирование документа с использованием HTML? Для просмотра HTML‑документов используются специальные программы – браузеры. При открытии HTML‑документа браузер распознает теги и учитывает их при отображении текста. Если по каким‑то причинам (например, при ошибке в записи тега) тег не распознается браузером, то он игнорируется.

Существует большое количество программ, позволяющих просматривать HTML‑документы. Это такие распространенные приложения, как Internet Explorer, Opera, Firefox, Netscape Navigator.

Ниже приведен пример простого HTML‑документа (назначение используемых элементов будет рассмотрено далее в книге) (пример 1.1).

Пример 1.1. HTML-документ

<HTML>

<TITLE>Простой HTML-документ</TITLE>

<BODY>

<H1>Заголовок</H1>

Текст страницы

</BODY>

</HTML>

Этот HTML‑документ отображается браузером Internet Explorer так, как показано на рис. 1.2.

Рис. 1.2. Отображение HTML-документа

1.4. Универсальный идентификатор ресурса URI

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

Многие виды ресурсов, размещенных в Интернете, независимо от того, являются ли они HTML‑документами, рисунками или файлами архива, чаще всего представляют собой файлы на жестком диске компьютера (сервера), подключенного к сети. С каждым ресурсом сопоставляется значение, по которому можно однозначно определить его расположение, – универсальный идентификатор ресурса или URI (Universal Resource Identifier). URI широко используются как при самостоятельном доступе пользователя к ресурсу (когда, например, пользователь сам вводит URI в адресной строке браузера), так и при переходе между веб‑страницами. URI также используются в HTML‑документе для указания браузеру, где искать ресурсы (например, рисунки), используемые в самом документе.

Примечание

В литературе также часто применяется обозначение URL. Следует отметить, что URI является более общим понятием, включающим в себя URL: любой URL является универсальным идентификатором ресурса и подчиняется тем же правилам, что и URI.

Идентификатор ресурса URI состоит из трех частей: из наименования механизма доступа к ресурсу, доменного имени компьютера и пути файла ресурса. Для пояснения сказанного можно рассмотреть пример:

Здесь можно увидеть, что для доступа к ресурсу, которым в данном случае является HTML‑документ, используется протокол HTTP (Hyper Text Transfer Protocol). Ресурс хранится на компьютере, имеющем доменное имя somesite.com в файле ex_1.html, расположенном в папке /info/examples.

При помощи URI можно также ссылаться на части HTML‑документов, например:

#description

При использовании этого URI можно получить доступ к части HTML‑документа, имеющей имя description (то, как создавать имена для фрагментов HTML‑документов, будет рассмотрено в гл. 5).

URI также позволяют ссылаться на ресурсы в пределах одного компьютера. При этом указывается относительный путь ресурса. Например, чтобы из HTML‑документа, расположенного в папке /info/examples, сослаться на файл /info/files/file1.jpg, достаточно задать URI /files/file1.jpg. В HTML‑документах при помощи подобных ссылок указываются пути рисунков и других объектов, используемых в документах, но непосредственно не хранимых в них.

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

Глава 2 Структура HTML-документа

В идеальном случае HTML‑документ состоит из трех частей, в которых описывается следующая информация:

• данные о версии используемого HTML;

• заголовок документа;

• тело документа.

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

Итак, полноценный (полный, стандартный) HTML‑документ должен содержать все три указанные элемента структуры или хотя бы два последних элемента. Далее приводится пример простейшего HTML‑документа, содержащего все указанные структурные элементы (пример 2.1).

Пример 2.1. Задание структуры HTML-документа

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>

<HTML>

<HEAD>

<TITLE>HTML-документ</TITLE>

</HEAD>

<BODY>

<H1>Заголовок</H1>

<P>Первый абзац

<P>Второй абзац

</BODY>

</HTML>

2.1. Информация о версии HTML

Первая строка HTML‑документа содержит информацию об используемой версии языка HTML: 2.0, 3.0, 3.2, 4.0 и 4.01 (используется в данной книге). Здесь же задается, какое определение типа документа (DTD) должен использовать браузер при интерпретации содержимого документа. Для указания версии при использовании HTML 4.01 можно использовать одно из следующих определений типа документа:

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> – использовать строгое определение HTML версии 4.01, в которое не включаются нежелательные для версии 4.01 элементы и атрибуты, а также фреймы;

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"> – применять переходное определение HTML версии 4.01, в которое включаются нежелательные для версии 4.01 элементы и атрибуты;

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> – использовать определение HTML версии 4.01, в которое включаются нежелательные для версии 4.01 элементы и атрибуты, а также фреймы.

В информации о версии языка также можно указать URI, откуда браузер может загрузить последнюю версию файла с DTD‑определением используемой версии HTML. Для трех указанных выше вариантов определений URI следующие (в том же порядке):

• ;

• ;

• .

Пример использования одного из приведенных URI:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»

"">

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

Однако при создании документов, предназначенных для публикации в Интернете, следует обязательно позаботиться о включении определения версии HTML в документ, особенно если в нем используются сценарии (будут рассмотрены в гл. 12 и 13).

2.2. Элемент HTML

Корневым элементом структуры HTML‑документа является одноименный элемент HTML. Его использование позволяет явно указать браузеру, что им обрабатывается HTML‑код. Элемент HTML содержит в себе все остальные структурные части HTML‑документа, например HEAD и BODY, и задается при помощи парных тегов <HTML> и </HTML>. Все, что находится между этими тегами, – есть HTML‑документ.

Теги <HTML> и </HTML> являются необязательными. В открывающем теге можно задать используемую версию HTML при помощи атрибута version. Например, при использовании HTML 4.01 можно написать так:

<HTML version = «4.01»>

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

В элементе HTML можно также задать основной язык документа (атрибут lang) и направления текста (атрибут dir). Атрибут dir может принимать одно из двух значений: RTL или LTR (задают направление текста справа налево или слева направо соответственно). Для указания языка в атрибуте lang используется сокращенное стандартное обозначение языка, например: "ru", "en", "de" и т. д. Ниже приведены примеры задания языка и направления текста:

<HTML lang = «ru» dir = LTR>

<HTML lang = "en">

Задавать атрибуты lang и dir совершенно не обязательно. Они доступны для большинства HTML‑элементов (не поддерживаются только для элементов APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT).

Теперь, наконец, можно рассмотреть, как задаются наиболее важные элементы HTML‑документа – заголовок и тело документа.

2.3. Заголовок

В заголовке (его еще называют «шапкой») HTML‑документа содержатся сведения о документе: название (тема документа), ключевые слова (используются поисковыми системами), а также ряд других данных, которые не являются содержимым документа.

Элемент HEAD

Заголовок HTML‑документа содержится в элементе HEAD. Для задания этого элемента используются парные теги <HEAD> и </HEAD>. Все, что находится между двумя указанными тегами, относится к заголовку HTML‑документа. Теги <HEAD> и </HEAD> не являются обязательными, но все же лучше их указывать, чтобы можно было легко определить, что именно относится к заголовку HTML‑документа (браузер определит это автоматически, независимо от наличия тегов <HEAD> и </HEAD>). В простых примерах книги элемент HEAD опускается, если заголовок документа содержит только элемент TITLE (информация об этом элементе приведена далее).

Рассматриваемые далее элементы TITLE и META являются информативными элементами заголовка HTML‑документа. Они определяются внутри элемента HEAD (между его тегами).

<HEAD>

<TITLE>...</TITLE>

<META ...>

...

<META ...>

</HEAD>

Элемент TITLE

В самом простом случае в заголовке документа содержится только один элемент – TITLE. Он используется для задания названия HTML‑документа. Этот элемент задается при помощи парных тегов <TITLE> и </TITLE>, причем только один раз. Текст, находящийся между приведенными тегами, воспринимается и отображается браузерами (и поисковыми системами) как название документа. К тексту названия нельзя (бессмысленно) применять форматирование.

Название документа должно быть кратким, но информативным и должно адекватно отражать содержание документа, например:

<TITLE>Программирование на Java. Введение</TITLE>

<TITLE>Операторы языка C++</TITLE>

Использование тегов <TITLE> и </TITLE> является обязательным. Правда, браузер (например, Internet Explorer) обработает документ и без этих тегов. Но ведь при публикации документов в Интернете документы надо как‑то обозначить, чтобы пользователь знал, имеет ли документ отношение к нужной ему теме.

Элемент BASE

Элемент BASE, появляющийся в заголовке HTML‑документа, позволяет задать базовый URI, относительно которого разрешаются все относительные URI в документе.

Элемент BASE задается одиночным тегом <BASE>. Его атрибуту href присваивается URI, который будет считаться базовым для HTML‑документа, например:

<BASE href = «D:\test\test.html»>

...

<IMG src = "image.gif">

При таком использовании элемента BASE, где бы ни был расположен открытый HTML‑документ, рисунок, задаваемый элементом IMG, будет загружаться из файла D:\test\image.gif.

Метаданные

В заголовке документа помещаются также некоторые важные данные, используемые браузерами и поисковыми системами, но в большинстве случаев не отображаемые, – метаданные. Задание метаданных представлено как задание значений переменным (иногда говорят про задание значений свойствам), имеющим определенные имена, осуществляемое с помощью HTML‑элемента META (элемент задается одиночным тегом <META>). При использовании элемента META обычно задают значения следующих атрибутов:

• name – имя переменной (значения чувствительны к регистру символов, по крайней мере, официально);

• content – значение переменной;

• lang – код языка, для которого действительно значение переменной; может быть задано несколько значений одной переменной для разных языков;

• http-equiv – применяется для указания браузеру дополнительных параметров по обработке HTML‑документа, значением атрибута является название параметра (в отличие от name, значения не чувствительны к регистру символов).

Перечисленные атрибуты обычно используются парами: name и content или http-equiv и content. Атрибут lang применяется, если дополнительно нужно указать значения атрибутов для различных языков.

Сначала будет рассмотрено использование пары name и content. Эта пара атрибутов позволяет задавать значения переменным, которые часто, но не всегда используются поисковыми системами и другими сервисами Интернета: описание и авторство документа, ключевые слова и еще много информации. В табл. 2.1 приведены основные значения атрибута name, а также дана расшифровка возможных значений атрибута content в каждом случае.

Таблица 2.1. Значения атрибута name и соответствующие значения атрибута content

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

При создании списка ключевых слов крайне удобно использование атрибута lang для указания различных наборов ключевых слов на различных языках (и для различных языков поиска). Например, как в следующем случае:

<META name = «Keywords» lang = «ru» content = «HTML, веб-дизайн, гипертекст, сайт, сайты ...»>

<META name = "Keywords" lang = "en" content = "HTML, web-design, hypertext, site, sites ...>

Можно, конечно, задать список одним единственным тегом <META> сразу на всех нужных языках. Как удобнее – решать вам.

Теперь пришло время рассмотреть использование второй пары атрибутов: http-equiv и content. Эта пара значений, если говорить упрощенно, позволяет влиять на работу браузера. Кроме того, она может использоваться поисковыми системами. В табл. 2.2 приведены некоторые распространенные значения атрибута http-equiv и описание соответствующих им значений атрибута content.

Таблица 2.2. Значения атрибута http-equiv и соответствующие значения атрибута content

Напоследок остается только заметить, что использовать все приведенные значения атрибутов name и http-equiv необязательно. В большинстве случаев достаточно бывает ограничиться заданием ключевых слов и кодировки HTML‑документа.

2.4. Тело HTML-документа

Вся содержательная часть HTML‑документа находится в его теле (элемент BODY). Для определения этого элемента используются парные теги <BODY> и </BODY>. Теги <BODY> и </BODY> не являются обязательными, но их наличие, как и в случае тегов <HEAD> и </HEAD>, значительно улучшает наглядность структурной организации HTML‑документа и позволяет четко отделить содержимое документа от заголовка.

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

• background – URI, указывающий расположение изображения для фона (обычно берется небольшое изображение, которое размножается для заполнения фона всего документа);

• bgcolor – цвет фона HTML‑документа;

• text – цвет шрифта документа;

• link – цвет непосещенных гиперссылок;

• vlink – цвет посещенных гиперссылок;

• alink – цвет гиперссылок при выборе их пользователем (при нажатии Enter произойдет переход по такой гиперссылке).

Все атрибуты, позволяющие задавать цвет (не только элемента BODY, но прочих элементов, которые будут рассмотрены далее), имеют тип %Color. Значения таких атрибутов могут задаваться шестнадцатеричными числами с символом # в начале каждого числа, например:

bgcolor = «#FF0005»

При задании цвета данным способом следует помнить, что числом задается цвет в RGB‑формате. Это значит, что первые два символа задают интенсивность красного цвета от 0 до FF (255 в десятичной системе счисления), третий и четвертый символы – интенсивность зеленого цвета, а два последних – интенсивность синего цвета. В данном примере интенсивности красного, зеленого и синего цветов равны FF, 0 и 5 соответственно.

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

Таблица 2.3. Идентификаторы и значения часто используемых цветов

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

Данный пример базируется на уже полученных знаниях (на теги задания гиперссылок и теги <P> можете пока не обращать внимания, так как важен только цвет гиперссылок и текста) (пример 2.2).

Пример 2.2. Пример задания названия документа и параметров цвета

<HTML>

<TITLE>Пример задания цветов в элементе BODY</TITLE>

<BODY

background = "2.2.html-files/back.jpg"

text = "black"

link = "#0080FF"

vlink = "blue"

alink = "navy">

Обычный неформатированный текст должен отображаться черным цветом

<P><A HREF = "ref1">Непосещенная гиперссылка (голубой цвет)</A>

<P><A HREF = "ref2">Посещенная гиперссылка (синий цвет)</A>

<P><A HREF = "ref3">Выделенная гиперссылка (темно-синий цвет)</A>

</BODY>

</HTML>

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

Рис. 2.1. Результат обработки HTML-текста примера

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

Глава 3 Текст

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

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

3.1. Особенности ввода текста

При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ &, то в текст на его место подставляется специальная последовательность – ссылка на данный символ.

Ссылки на символы могут быть представлены любым из указанных ниже способов:

• &#D; – позволяет задать символ, код которого имеет значение D (в десятичной системе счисления);

• &#xH; – позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления);

• &имя_символа; – позволяет использовать именованную ссылку на символ.

Как можно увидеть, ссылка на символ в тексте HTML‑документа начинается символом & и заканчивается точкой с запятой (;). Особо стоит рассмотреть использование именованных ссылок на символы. Дело в том, что использование первых двух вариантов предполагает, что автору известны численные коды символов, которые он собирается добавить в документ. Однако согласитесь, что постоянно искать в таблицах численные коды нужных символов по меньшей мере неудобно. По этой причине в HTML предусмотрены имена для наиболее часто используемых символов. Эти имена и записываются вместо кода в тексте ссылок на символы. Имена некоторых часто используемых символов приведены в табл. 3.1. Полный список именованных ссылок на символы приведен в приложении 1.

Таблица 3.1. Имена символов

В качестве примера использования ссылок на символы в HTML‑документе можно рассмотреть следующий HTML‑код (пример 3.1).

Пример 3.1. Использование ссылок на символы

<TITLE>Именованные ссылки на символы</TITLE>

<BODY text = "yellow" bgcolor = "blue">

<TITLE> Именованные ссылки на символы </

TITLE><BR>

<BODY color = " yellow "

bgcolor = " yellow " > <BR>

Текст HTML-документа <BR>

</BODY>

</BODY>

При обработке данного кода браузером Internet Explorer получится документ, который показан на рис. 3.1.

Рис. 3.1. Использование ссылок на символы

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

3.2. Форматирование текста

Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML‑тегов. Форматирование текста HTML‑документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.

Задание начертания текста

Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML‑код добавляются элементы, приведенные в табл. 3.2.

Таблица 3.2. Элементы задания начертания текста

Для наглядности можно рассмотреть пример HTML‑документа, в котором используются различные элементы задания начертания текста (пример 3.2).

Пример 3.2. Задание начертания текста

<TITLE>Задание начертания текста</TITLE>

<BODY>

<B>Полужирный текст</B><BR>

<I>Курсив</I><BR>

<U>Подчеркнутый текст</U><BR>

<S>Зачеркнутый текст</S><BR>

<BIG>Текст увеличенного размера</BIG><BR>

<SMALL>Текст уменьшенного размера</SMALL><BR>

<SUP>Верхний индекс</SUP>Текст<SUB>Нижний индекс</SUB><BR>

<TT>Текст, записанный моноширинным шрифтом</TT><BR>

</BODY>

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

При обработке HTML‑кода браузером получится документ, показанный на рис. 3.2.

Рис. 3.2. Задание начертания текста

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

<I><B><U><S>Текст непонятного начертания</S></U></B></I>

Задание шрифта текста

Если нужно отобразить некоторый текст с использованием определенного шрифта, отличного от того, который применяется браузером по умолчанию, то можно воспользоваться элементом FONT. Он вводится при помощи парных тегов <FONT> и </FONT>.

Параметры шрифта для элемента FONT устанавливаются заданием значений следующих его атрибутов:

• face – задает название шрифта, например Arial или System;

• size – задает размер шрифта (значение от 1 до 7, по умолчанию используется значение 3);

• color – задает цвет шрифта.

Третий из указанных атрибутов уже был рассмотрен при изучении элемента BODY. Возможные значения для атрибута face можно посмотреть в списке шрифтов в любом текстовом редакторе. Однако следует помнить, что если на компьютере, где будет просматриваться ваш HTML‑документ, не установлен нужный шрифт, то браузер будет использовать шрифт по умолчанию. Таким образом, если очень важно сохранить оригинальное оформление документа при просмотре его на других компьютерах, не следует злоупотреблять экзотическими и редкими шрифтами.

Для атрибута size могут использоваться только семь значений. Именно столько различных размеров шрифта (или менее) поддерживаются браузерами. При этом значение, которое присваивается параметру size, – это не высота шрифта в каких‑либо единицах, а просто порядковый номер, который воспринимается браузером и преобразуется в предусмотренный разработчиками размер шрифта.

Размер шрифта для атрибута size можно также задавать в виде +число или –число. Здесь число задает, на сколько единиц больше или меньше будет размер шрифта относительно текущего размера шрифта. Например, если используется размер шрифта по умолчанию (3), то +3 означает размер 6, а –2 означает размер 1.

Далее рассмотрен пример задания различных шрифтов и различных размеров этих шрифтов (обратите внимание на вложенные элементы FONT) (пример 3.3).

Пример 3.3. Задание шрифта текста

<TITLE>Задание шрифта текста</TITLE>

<BODY>

<FONT face = "arial">

<FONT size = 1>

Самый маленький текст шрифта Arial<BR>

</FONT>

<FONT size = 3>

Обычный текст шрифта Arial<BR>

</FONT>

<FONT size = 7>

Самый большой текст шрифта Arial<BR>

</FONT>

</FONT>

<FONT face = "times new roman">

<FONT size = 1>

Самый маленький текст шрифта Times New Roman<BR>

</FONT>

<FONT size = 3>

Обычный текст шрифта Times New Roman<BR>

</FONT>

<FONT size = 7>

Самый большой текст шрифта Times New Roman<BR>

</FONT>

</FONT>

</BODY>

В примере используются стандартные шрифты Times New Roman и Arial. На рис. 3.3 показан результат обработки браузером HTML‑кода из примера 3.3.

Рис. 3.3. Задание шрифта текста

Задание выравнивания текста

Сразу подчеркну, что пока рассматривается работа с неструктурированным текстом. Для задания горизонтального выравнивания текста, отличного от выравнивания, используемого браузером по умолчанию, предусмотрен элемент CENTER. Этот элемент задается парными тегами <CENTER> и </CENTER>. Текст, записанный между этими тегами, отображается в середине окна браузера.

Сохранение авторского форматирования

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

Что же делать, если нужно вставить в HTML‑документ текст, в котором важно сохранить хотя бы разрывы строк в определенных автором местах, например текст какой‑то программы? Рассмотрим пример 3.4.

Пример 3.4. Страница с текстом программы (оригинал)

<TITLE>Текст программы (оригинал)</TITLE>

<BODY>

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

</BODY>

При обработке приведенного кода браузер покажет весь текст, расположенный в элементе BODY, в одну строку так, как показано на рис. 3.4.

Рис. 3.4. Страница с текстом программы (оригинал)

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

Для принудительного перехода на следующую строку в нужных местах текста можно использовать элемент BR, который задается одиночным тегом <BR>. Именно этот тег и использовался для повышения наглядности предыдущих примеров. Тег <BR> можно вставлять в любом месте текста, в данном случае (пример 3.5) этот тег логично вставить в конце каждой строки программы.

Пример 3.5. Использование разрывов строк

<TITLE>Текст программы (с разрывами строк)</TITLE>

<BODY>

function fact(int num):int<BR>

if (num>0)<BR>

return fact(num–1)*num;<BR>

else <BR>

return 1;<BR>

end if <BR>

end function<BR>

</BODY>

Результат обработки этого варианта HTML‑кода приведен на рис. 3.5.

Рис. 3.5. Использование разрывов строк

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

Для обычного текста использования <BR> вполне хватает. Однако в данном примере рассматривается программа, а не обычный текст. Чтобы полностью сохранить исходное форматирование текста (с учетом всех отступов), можно применить элемент PRE. Этот элемент задается парными тегами <PRE> и </PRE>. Браузер учитывает все символы, которые встречаются в тексте HTML‑документа, и выводит их на экран. Пример 3.6 иллюстрирует использование элемента PRE для сохранения оригинального форматирования текста.

Пример 3.6. Страница с текстом программы (использование PRE)

<TITLE>Текст программы (PRE)</TITLE>

<BODY>

<PRE>

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

</PRE>

</BODY>

Результат обработки кода примера 3.6 приведен на рис. 3.6.

Рис. 3.6. Текст с полным сохранением форматирования

Если внимательно посмотреть на рисунок, то можно заметить, что текст отображается моноширинным шрифтом. Таков побочный эффект использования PRE.

Запрет разрыва строки

Иногда бывает нужно не разорвать строки в тексте документа, а, наоборот, не допустить разделения некоторых слов в строках. Для этого HTML позволяет использовать неразрывные пробелы и элементы NOBR.

Неразрывный пробел можно ввести в текст HTML‑документа с использованием соответствующей ссылки на символ:  . Например:

Текст, отображаемый без переноса.

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

Когда необходимо выделить большой участок текста, для которого недопустим автоматический перенос слов, то целесообразнее использовать элемент NOBR. Ему соответствуют парные теги <NOBR> и </NOBR>. Весь текст, находящийся между этими тегами, будет отображаться браузером в одной строке, например:

<NOBR>

Этот текст отображается в одной строке независимо от ширины окна браузера

</NOBR>

Остерегайтесь создания слишком длинных неразрывных строк, поскольку необходимость горизонтальной прокрутки для прочтения таких строк только ухудшает чтение HTML‑документа. Для вставки разрывов строк в тексте, заключенном между <NOBR> и </NOBR>, можно использовать рассмотренный ранее элемент BR.

Переносы

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

HTML предоставляет два типа переноса: простой и мягкий. Простой перенос в тексте HTML‑документа обозначается символом –. Этот символ указывает, в каком именно месте должно разрываться слово, если оно не помещается в окне. Если же слово помещается в окне, то символ переноса все равно отображается (то есть простой перенос логично использовать только для указания дефисов в тексте, как это обычно и делается). При помощи мягкого переноса можно указать браузеру место, в котором слово можно разрывать при необходимости переноса его части на следующую строку. Мягкий перенос задается ссылкой на символ ­. При использовании мягкого переноса сам символ переноса (–) отображается браузером только в случае разрыва слова в указанном месте.

Ниже приведен небольшой пример использования простого и мягкого переноса в тексте HTML‑документа (пример 3.7).

Пример 3.7. Использование переносов

<TITLE>Использование переносов</TITLE>

<BODY>

Это длинное-длинное слово отображается браузером с дефисом и переносится в месте дефиса.<BR>

Слова этого текста могут раз­рывать­ся в указан­ных местах.<BR>

<NOBR>

А этот текст не разрывает­ся несмотря на нали­чие в нем символов пере­носа.

</NOBR>

</BODY>

Обратите внимание: внутри элементов NOBR (как в примере 3.7) и PRE переносы браузером игнорируются. Однако внутри элемента NOBR можно указать место возможного переноса текста. Делается это при помощи одиночного тега <WBR> (элемента WBR соответственно).

Например:

<NOBR>

Этот текст будет разорван браузером в указанном месте при <WBR>

необходимости (когда текст не поместится в окне).

</NOBR>

Обтекание текстом нетекстовых элементов

Далее рассмотрена еще одна возможность элемента BR, которая используется при вставке в текст документа различных изображений, таблиц и прочих нетекстовых элементов (сами эти элементы будут рассмотрены позже). Таким объектам можно задать выравнивание по правому или левому краю окна браузера (объекты с таким выравниванием называются плавающими).

Текст может обтекать плавающие объекты справа или слева. При необходимости принудительного разрыва строки с использованием элемента BR можно указать, где должна появиться следующая строка, задавая значения left, right, all или none атрибуту clear этого HTML‑элемента. Расшифровка этих значений следующая:

• none – используется по умолчанию, означает, что новая строка начнется нормально, то есть с минимальным промежутком по вертикали и выравниванием по нужному краю;

• left – следующая строка начнется под плавающим объектом, выровненным по левому краю (если объект выровнен по правому краю, то действует аналогично none);

• right – аналогично значению left, только наоборот;

• all – следующая строка начнется под плавающим объектом независимо от края, по которому выровнен объект.

3.3. Структурирование текста

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

Разбиение на абзацы

В предыдущих примерах весь текст HTML‑документов даже при наличии в нем элементов BR воспринимался браузером как один абзац. Чтобы действительно отделить абзацы текста друг от друга, используется специальный элемент P.

Элемент P задается при помощи парных тегов <P> и </P>. При этом следует отметить, что использование закрывающего тега </P> считается не просто необязательным, но даже нежелательным. При отсутствии закрывающего тега концом элемента P считается начало следующего абзаца (следующий тег <P>) или тег конца документа, если абзац последний.

Для элемента P можно задать несколько атрибутов. Список наиболее используемых атрибутов:

• align – задает горизонтальное выравнивание содержимого абзаца, может принимать значения: left (используется по умолчанию), right, center, justify;

• title – задает текст подсказки.

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

Пример 3.8. Использование абзацев

<TITLE>Разбиение текста на абзацы</TITLE>

<BODY>

<P title = "Первый абзац">

Неформатированный текст

<P align = "right" title = "второй абзац">

Текст с <B>изменением <I>начертания</I></B>

<P align = "center" title = "третий абзац">

<FONT size = "+2" face = "arial">Текст с измененным шрифтом</FONT>

<P align = "justify" title = "четвертый абзац">

Текст этого абзаца автоматически выравнивается по ширине справа и слева при переносе слов

</BODY>

При обработке приведенного HTML‑кода получится документ, показанный на рис. 3.7.

Рис. 3.7. Использование различного оформления абзацев

При наведении указателя мыши на текст абзаца появляется подсказка, заданная атрибутом title.

Заголовки

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

В HTML поддерживаются шесть видов заголовков. Им соответствуют элементы H1, H2, H3, H4, H5 и H6. Номера определяют уровни заголовков от наиболее важного (1) до наименее важного (6). Элементы H1–H6 задаются при помощи соответствующих парных тегов. Например, для задания заголовка третьего уровня можно применить следующий код:

<H3>Текст заголовка третьего уровня</H3>

Для заголовков можно задать свойства:

• align – выравнивание текста заголовка (по умолчанию используется выравнивание по левому краю);

• title – текст подсказки.

Заголовки различных уровней обычно отображаются браузерами различными шрифтами и различного размера. При этом размер шрифта более важных заголовков обычно больше, чем размер шрифта менее важных.

На рис. 3.8 приведен пример того, как отображаются заголовки различного уровня (HTML‑код не приводится ввиду его чрезвычайной простоты).

Рис. 3.8. Вид заголовков в Internet Explorer

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

Задание типов фраз

Даже в разбитом на отдельные абзацы тексте смешаны различные по важности и смыслу участки текста. Чтобы их можно было отделить друг от друга, при написании HTML‑документа можно пользоваться специальными элементами, задающими типы фраз в тексте (или, как еще говорят, элементами логического форматирования текста). Описания этих HTML‑элементов приведены в табл. 3.3.

Таблица 3.3. Элементы задания типов фраз

Первые два элемента используются для подчеркивания важности какого‑либо отрезка текста. Остальные элементы используются в основном в технических текстах. Все приведенные элементы задаются при помощи соответствующих парных тегов. Текст подсказки к каждому из этих элементов задается при помощи атрибута title. Наиболее часто этот атрибут используют с элементами ABBR и ACRONYM для отображения в подсказке полной расшифровки сокращения или аббревиатуры.

Естественно, что логическое разделение текста при помощи элементов из табл. 3.3 отражается на его представлении браузером (правда, разные браузеры могут отображать одинаковый по значению текст различным образом). В примере 3.9 приведен текст HTML‑документа, использующий все доступные типы фраз.

Пример 3.9. Использование различных типов фраз

<TITLE>Использование различных типов фраз</TITLE>

<BODY>

Обычный текст <BR>

Выделение: <EM>Важный текст</EM><BR>

Сильное выделение: <STRONG>Это очень важный текст</STRONG><BR>

Цитата, ссылка: <CITE>см. стандарт ISO 3273</CITE><BR>

Определение: <DFN>WWW – это...</DFN><BR>

Пользователь должен ввести:<KBD>Пример ввода пользователя</KBD><BR>

Переменная: <VAR>strText</VAR><BR>

Аббревиатуры: <ABBR>HTTP, WWW, FTP</ABBR><BR>

Сокращения: <ACRONYM>Внешпосылторг, UNIBEL</ACRONYM><BR>

Фрагмент программы в тексте:<CODE>CALL main</CODE><BR>

Пример программы:<SAMP>void main(){return;}</SAMP><BR>

</BODY>

На рис. 3.9 приведен внешний вид страницы, сгенерированной при обработке текста примера 3.9.

Рис. 3.9. Внешний вид фраз различного типа

Как можно видеть из рисунка, большинство фраз различного типа отображаются браузером Internet Explorer совершенно одинаково. Не стоит полагать, что это отображение нельзя изменить. Можно использовать, например, рассмотренные ранее способы форматирования. Однако при этом польза от элементов, задающих типы фраз, становится весьма сомнительной. Для изменения внешнего текста HTML‑элементов настоятельно рекомендуется использовать таблицы стилей, которые будут рассмотрены позже.

Стоит также отметить, что сохранить оригинальное форматирование примера программы или прочего текста внутри элемента SAMP весьма проблематично, в отличие от того же элемента PRE. Именно поэтому в примере 3.9 текст программы выбран таким образом, чтобы он мог быть помещен в одну строку без потери его читабельности.

Цитаты

Кроме элемента CITE, для оформления цитат могут также использоваться элементы BLOCKQUOTE и Q. Для их задания используются соответствующие парные теги.

Элемент BLOCKQUTE используется для задания длинных цитат и представляет собой элемент уровня блока. При этом текст цитаты обычно оформляется браузерами как текст с дополнительным отступом.

Элемент Q является элементом уровня текста и используется для создания небольших цитат. Текст, помещенный между тегами <Q> и </Q>, оформляется различными браузерами по‑разному (например, может быть помещен в кавычки).

Атрибуту cite элементов BLOCKQUOTE и Q можно присвоить URI источника информации для цитаты.

Указание изменений в документе

В ряде случаев возникает необходимость изменять важное содержимое HTML‑документа уже после того, как он опубликован (например, если речь идет о разрабатываемом законопроекте). В таких случаях практически незаменимыми являются HTML‑элементы INS и DEL, применяемые для выделения участков текста, которые были добавлены или удалены в новой версии документа.

Элемент INS задается при помощи парных тегов <INS> и </INS>, между которыми помещается добавленный текст. Элемент DEL задается парными тегами <DEL> и </DEL>. В эти теги заключается текст, удаленный из новой версии документа.

Естественно, что содержимое элементов INS и DEL отображается браузерами совершенно поразному. Содержимое элемента DEL может быть, например, зачеркнутым или вообще не показываться браузером.

Элементы INS и DEL могут содержать как небольшие участки текста, так и целые разделы документа. Однако недопустимым является вложенность этих элементов друг в друга.

<INS><DEL>Никогда так не делайте</DEL></INS>

Наиболее часто используемыми атрибутами элементов INS и DEL являются следующие:

• cite – задает URI HTML‑документа с пояснениями сделанных изменений;

• datetime – время, когда в документ были внесены изменения.

Здесь вы впервые встретились с заданием атрибуту значения даты и времени. Это значение в HTML задается в следующей форме:

ГГГГ–ММ–ДДTчч:мм:cc

Здесь ГГГГ обозначает год, ММ – месяц, ДД – день, чч – значение от 0 до 23 (час), мм и сс – значения от 0 до 59 (минуты и секунды). Кроме того, в конец значения даты и времени добавляется одна из следующих записей:

• Z – обозначает, что используется UTC‑время (общее скоординированное время, или время по Гринвичу);

• +чч:мм или –чч:мм – обозначает, что местное время опережает или отстает от UTC на заданное количество часов и минут.

Ниже приведен пример различных вариантов задания московского времени 14 часов 5 минут 31 декабря 1997 года (с использованием местного времени и времени UTC):

1997–12–31T14:05+03:00

1997–12–31T11:05Z

Контактная информация

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

Текст внутри элемента ADDRESS может иметь произвольную структуру, однако чаще всего в него помещаются имена сотрудников организаций, ссылки на другие HTML‑документы, телефон или адрес электронной почты контактного лица.

3.4. Комментарии в HTML-коде

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

Текст комментария помещается между символами <!– и –>. При обработке HTML‑документа текст комментария игнорируется браузером. Комментарии могут быть как однострочными, так и многострочными:

<!– Это пример однострочного комментария –>

<!– А это

многострочный комментарий–>

Важным моментом является то, что между <! и – нельзя вставлять пробелы. Кроме того, следует избегать использования в тексте комментария двух и более символов переноса (–).

В завершение еще одно замечание. Перед опубликованием HTML‑документа лучше удалить из исходного текста все комментарии (особенно, если автор этого документа любит оставлять себе большие подробные послания на будущее). Если объем комментариев достаточно большой, то, удалив их, можно уменьшить время загрузки HTML‑документа с сервера.

Глава 4 Списки

В этой главе будут рассмотрены особенности введения в HTML‑документы простых и в то же время таких удобных элементов текста, как списки. В HTML 4.01 поддерживаются три вида списков: маркированные, нумерованные, а также списки определений. Возможно создание вложенных списков.

4.1. Маркированные списки

Маркированные списки применяются для перечисления неупорядоченной информации. В таком списке каждый новый элемент выделяется маркером (отсюда и название списка). В HTML для обозначения маркированного списка используется элемент UL, который задается парными тегами <UL> и </UL>. Между тегами помещаются элементы списка. Текст элементов списка начинается после тега <LI> и может заканчиваться тегом </LI>.

С закрывающим тегом </LI> ситуация такая же, как и с закрывающим тегом </P>: использование его необязательно. Если тег </LI> опустить, то текстом элемента списка считается весь текст, расположенный до следующего тега <LI> или до закрывающего тега </UL>. Ниже приведен пример простого маркированного списка, состоящего из трех элементов.

<UL>

<LI>Первый элемент

<LI>Второй элемент

LI>Третий элемент

</UL>

К тексту элементов любых списков можно применять рассмотренные ранее средства HTML по форматированию текста.

Рассматриваемые элементы UL и LI имеют ряд атрибутов. Специфичными атрибутами элемента UL являются следующие:

• compact – заставляет браузер показывать список более компактно (действие этого атрибута зависит от конкретного браузера);

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

Атрибут type можно указывать и для нужных элементов списка LI, если понадобится изменить тип маркера только некоторых элементов списка. На рис. 4.1 приведен пример того, как отражается задание различных значений атрибута type на отображении списка браузером.

Рис. 4.1. Маркированные списки

Ниже приведен текст HTML‑документа, который был обработан браузером (пример 4.1).

Пример 4.1. Маркированные списки

<TITLE>Маркированные списки</TITLE>

<BODY>

Список с закрашенными круглыми маркерами

<UL>

<LI> Первый элемент

<LI> Второй элемент

</UL>

Список с круглыми незакрашенными маркерами

<UL type = "circle">

<LI> Первый элемент

<LI> Второй элемент

</UL>

Список с квадратными маркерами

<UL type = "square">

<LI> Первый элемент

<LI> Второй элемент

</UL>

Список с разными маркерами элементов

<UL>

<LI> Закрашенный круг

<LI type = "circle"> Окружность (type = circle)

<LI type = "square"> Квадрат (type = square)

</UL>

</BODY>

4.2. Нумерованные списки

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

Нумерованный список в тексте HTML‑документа обозначается элементом OL при помощи парных тегов <OL> и </OL>. Элементы нумерованного списка задаются в точности так же, как и элементы маркированного списка. Нумерованный список несколько отличается от маркированного не только внешним видом, но и набором атрибутов и их возможными значениями:

• compact – заставляет браузер отображать список компактно;

• type – задает тип нумерации элементов списка, доступные значения: 1 (используются арабские цифры, по умолчанию), I или i (большие или малые римские цифры), A или a (большие или малые буквы латинского алфавита);

• start – номер первого элемента списка (при задании start нужно учитывать тип нумерации элементов списка, например номеру 5 соответствует латинская буква E).

Атрибут start часто используется, когда нужно продолжить нумерацию предшествующего списка после отрывка текста, не являющегося элементом ни одного списка (например, после пояснения элемента предшествующего списка). В примере 4.2 показано использование различных типов нумерации списков.

Пример 4.2. Нумерованные списки

<TITLE>Нумерованные списки</TITLE>

<BODY>

Нумерация арабскими цифрами

<OL>

<LI> Первый элемент

<LI> Второй элемент

</OL>

Продолжение нумерации, но большими римскими цифрами

<OL type = "I" start = 3>

<LI> Третий элемент

<LI> Четвертый элемент

</OL>

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

<OL type = "A">

<LI> Первый элемент

<LI> Второй элемент

</OL>

</BODY>

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

Рис. 4.2. Нумерованные списки

Значение атрибута type можно отдельно указать для любого элемента списка. Кроме того, для элементов нумерованного списка можно задать значение атрибута value. Его действие аналогично атрибуту start элемента OL с тем лишь отличием, что он изменяет нумерацию, начиная с того элемента, для которого указано значение атрибута value. Например, задание атрибута value так, как сделано ниже в примере 4.3, приведет к результату, который показан на рис. 4.3.

Рис. 4.3. Изменение нумерации внутри элементов списка

Пример 4.3. Изменение нумерации списка

<TITLE>Изменение нумерации</TITLE>

<BODY>

<OL>

<LI> Первый элемент

<LI value = 10> Второй элемент

<LI> Третий элемент

<LI value = 20 type = "A"> Четвертый элемент

<LI type = "A"> Пятый элемент

</OL>

</BODY>

Может возникнуть вопрос: что произойдет, если задать нумерацию буквами такого длинного списка, на элементы которого не хватит и всех букв латинского алфавита? Ответ таков: для нумерации элементов списка с 27‑го элемента используются две латинские буквы (например, AA, AB, AC и т. д.), с 703‑го элемента используются 3 латинские буквы и т. д.

4.3. Списки определений

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

Список определений задается внутри HTML‑элемента DL (для его задания используются парные теги <DL> и </DL>). Каждый элемент списка определений состоит из двух частей: из термина (HTML‑элемент DT) и определения термина (HTML‑элемент DD). Пример текста HTML‑документа, содержащего список определений, приведен ниже (пример 4.4).

Пример 4.4. Список определений

<TITLE>Список определений</TITLE>

<BODY>

<DL>

<DT>HTML

<DD>Широко используемый язык гипертекстовой разметки

<DT>WWW

<DD>От англ. World Wide Web, глобальная сеть из соединенных между собой гипертекстовых документов

</DL>

</BODY>

Как можно видеть на рис. 4.4, браузер по‑разному отображает сами термины и определения этих терминов, причем делает это так, что сразу понятно, где определение, а где термин.

Рис. 4.4. Список определений

Все особенности использования закрывающих тегов </DT> и </DD> аналогичны особенностям использования тега </LI>, то есть, несмотря на то что эти теги определены, использовать их совершенно не обязательно.

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

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

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

Рис. 4.5. Вложенные списки

Из примера видно, что при вложении можно использовать списки различных типов. В данном случае в качестве внешнего списка используется нумерованный список, а в качестве вложенных списков – маркированные. Ниже приведен текст HTML‑документа, при обработке которого браузер Internet Explorer сгенерировал страницу, показанную на рис. 4.5 (пример 4.5).

Пример 4.5. Вложенные списки

<TITLE>Использование вложенных списков</TITLE>

<BODY>

<OL>

<LI>Первый элемент списка. Имеет две составляющих:

<UL>

<LI>Первая составляющая

<LI>Вторая составляющая

</UL>

<LI>Второй элемент списка. Имеет три составляющих:

<UL>

<LI>Первая составляющая. Также разделяется на две части:

<UL>

<LI> Первая часть

<LI> Вторая часть

</UL>

<LI>Вторая составляющая

</UL>

<LI>Третий элемент списка

</OL>

</BODY>

При рассмотрении того как браузер обрабатывает вложенные списки, можно увидеть одну интересную особенность: браузер (по крайней мере, Internet Explorer) сам заботится о том, чтобы списки различных уровней вложенности имели разные маркеры. Однако при использовании вложенных маркированных списков следует помнить, что если специально не настраивать вложенные списки при помощи атрибута type, то для списка первого уровня (не вложенного в другой список) используется маркер, соответствующий значению dict атрибута type. Для списка второго уровня используется значение circle, а для всех списков третьего, четвертого и т. д. уровней используется значение square.

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

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

Показанное на рис. 4.6 оформление текста реализовано с использованием вложения в список определений нумерованного и маркированного списков. HTML‑текст показанного на рисунке примера приведен ниже (для экономии места полный текст рекомендаций в текст примера не включен) (пример 4.6).

Рис. 4.6. Вложение списков в список определений

Пример 4.6. Вложение списков в список определений

<TITLE>Вложение списка в список определений</TITLE>

<BODY>

<DL>

<DT><STRONG>Неисправность</STRONG>

<DD>Отсутствие соединения компьтеров сети (PING-тест не проходит)

<DT><STRONG>Возможные причины</STRONG>

<DD>

<UL>

<LI>Отсутствие физического соединения между компьютерами

<UL>

<LI>Не подключены сетевые провода

<LI>Не работает активное сетевое оборудование

<LI>Обрыв сетевых проводов

<LI>Неисправные сетевые адаптеры

</UL>

<LI>Неправильная настройка IP-адресов

</UL>

<DT><STRONG>Диагностика</STRONG>

<DD>

<OL>

<LI>Проверить, включены ли сетевые провода...

<LI>Проверить состояние индикации...

<LI>Проверить, включено ли активное сетевое оборудование...

<LI>...

</OL>

</DL>

</BODY>

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

Глава 5 Гиперссылки

Все, что рассматривалось ранее, было созданием HTML‑документов, которые не предусматривали никаких возможностей навигации. Теперь пришло время заняться изучением главного средства, которое сделало использование HTML практически незаменимым для представления связанных между собой документов. Речь идет о гиперссылках. Гиперссылки – ключевой, практически самый главный элемент гипертекста (текста, обладающего возможностями навигации).

Простота, наглядность и в то же время мощь гиперссылки заключаются в том, что ею может быть практически все что угодно: слово в тексте, заголовок, рисунок, элемент таблицы и другие элементы HTML‑документа. Для использования гиперссылки от пользователя требуется щелчок кнопкой мыши на тексте, изображении или прочем представлении гиперссылки, остальную работу по поиску и переходу к нужному ресурсу выполнят автоматические системы, начиная с браузера на компьютере пользователя и заканчивая службой DNS, поисковыми машинами Интернета. Вся работа, необходимая для поиска и загрузки нужных ресурсов, скрыта от пользователя. Он только видит результат и наслаждается легкостью навигации в огромном объеме информации.

5.1. Простой переход к ресурсам

Для создания гиперссылки в тексте HTML‑документа используется элемент A, который задается при помощи парных тегов <A> и </A>. Текст, изображение или другой элемент HTML‑документа, заключенный между этими тегами, становится представлением гиперссылки в тексте. Обычно браузеры отображают гиперссылки таким образом, что их можно однозначно отделить от прочего содержимого документа, например выделяют цветом, подчеркиванием, меняют форму указателя мыши при наведении его на гиперссылку. Обычным действием браузера при переходе по гиперссылке является открытие указанного HTML‑документа в том же или новом окне.

Навигация между HTML-документами

Для создания простейшей гиперссылки, обеспечивающей переход к нужному HTML‑документу, достаточно задать в качестве значения атрибута href элемента A URI нужного ресурса (файла HTML‑документа). Допустим, что сайт, по которому нужно реализовать навигацию, состоит из пяти страниц. Файлы страниц именуются 1.html, 2.html и т. д. У сайта также есть главная страница (index.html), на которой находится оглавление. Элементы оглавления позволяют перейти к соответствующим страницам, то есть являются гиперссылками. Тогда возможный вариант HTML‑документа с оглавлением сайта будет иметь следующий вид (пример 5.1).

Пример 5.1. Простая навигация между документами

<TITLE>Главная страница сайта</TITLE>

<BODY>

<DL>

<DT><STRONG>Оглавление</STRONG>

<DD>

<A href = "1.html">Первая страница сайта</A><BR>

<A href = "2.html">Вторая страница сайта</A><BR>

<A href = "3.html">Третья страница сайта</A><BR>

<A href = "4.html">Четвертая страница сайта</A><BR>

<A href = "5.html">Пятая страница сайта</A><BR>

</DL>

</BODY>

Для оформления оглавления использовался рассмотренный ранее список определений. При желании это оформление можно легко изменить. Как можно видеть на рис. 5.1, текст, заключенный между тегами элемента A, стал визуальным представлением гиперссылки в документе. На то, что помещается между тегами <A> и </A>, накладывается ограничение, которое нужно помнить: содержимым гиперссылки не может быть другая гиперссылка.

Рис. 5.1. Оглавление сайта

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

...

<A href = "index.html">Оглавление</A><BR>

<A href = "2.html">Предыдущая</A><BR>

<A href = "4.html">Следующая</A><BR>

...

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

...

<A href = "1/1.html">Первая страница сайта</A><BR>

<A href = "2/2.html">Вторая страница сайта</A><BR>

...

Для перехода к ресурсам, находящимся за пределами сайта, используются полные URI, например:

<A href = «mydomain.com/homepage.html»>Домашняя страница</A>

Приведенная здесь гиперссылка позволяет перейти к HTML‑документу homepage.html, расположенному на сайте mydomain.com.

Загрузка файлов

Гиперссылки можно использовать не только для перехода между различными HTML‑документами. С их помощью можно выполнять загрузку с серверов различных файлов: архивов, иллюстраций, музыки, видео и т. д. Например, при организации содержания своего электронного фотоальбома можно использовать пример 5.2.

Пример 5.2. Использование ссылок на файлы рисунков

<TITLE>Фотографии из отпуска</TITLE>

<BODY>

<DL>

<DT><STRONG>Мои фотографии на рыбалке</STRONG>

<DD>

<A href = "1/1.jpg">Вот это рыбина!</A><BR>

<A href = "1/2.jpg">Чуть не искупался</A><BR>

...

</DL>

</BODY>

Если вы выберете какую‑либо ссылку, то браузер загрузит соответствующее изображение. Кстати, подобия гиперссылок используются и при вставке изображений непосредственно в HTML‑документ, но как это делается, будет рассмотрено в следующем разделе.

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

Пример 5.3. Использование ссылок на файлы архивов

<TITLE>Концертные записи группы РАСПАД ЭЙНШТЕЙНИЯ</TITLE>

<BODY>

<DL>

<DT><STRONG>Концерт 22.11.2002 в городе N</STRONG>

<DD>

Скачать 18 самых впечатляющих фотографий можно

<A href = "photo/22-11-2002N.rar">здесь</A><BR>

<DT><STRONG>Концерт 24.12.2002 в том же городе N</STRONG>

<DD>

Если вы хотите увидеть самые запоминающиеся эпизоды концерта, жмите

<A href = "photo/24-12-2002N.rar">сюда</A><BR>

</DL>

</BODY>

При выборе любой из ссылок браузер (если рассматривать Internet Explorer) отобразит окно, в котором спросит у пользователя, что делать с файлом архива: открыть или сохранить на диске компьютера пользователя. Пользователь может выбирать, что ему угодно. Важно лишь то, что он получил доступ к файлам архивов на сервере.

Ссылки на другие службы

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

Теперь будет рассмотрено создание гиперссылок на ресурсы, протокол работы с которыми отличен от HTTP: ссылки на службы новостей, ссылки на ресурсы FTP‑серверов и ссылки на почтовые службы. Начнем со ссылок на ресурсы FTP‑серверов. FTP – протокол передачи файлов (File Transfer Protocol), который является одним из самых старых протоколов Интернета. Этот протокол и теперь используется на некоторых серверах‑хранилищах файлов (файловых серверах). Ниже приведен пример типичного адреса ресурса FTP‑сервера:

ftp://file_storage.com

Как видно, URI FTP‑ресурса отличается только наименованием протокола. Однако отличий FTP от HTTP при использовании несколько больше. Дело в том, в большинстве случаев FTP‑серверы могут при установке подключения проводить авторизацию пользователя, то есть создавать именное подключение. В приведенном же ранее примере устанавливалось анонимное подключение. Чтобы подключиться к FTP‑серверу под именем зарегистрированного на FTP‑сервере пользователя, нужно указать в адресе имя пользователя следующим образом:

ftp://user234@file_storage.com

В большинстве случаев при установке именного FTP‑подключения требуется ввод пароля. Если пароль нужно вводить, браузер отобразит окно ввода пароля.

Пароль можно указать прямо в адресе следующим образом (mypass – это и есть пароль):

ftp://user234:mypass@file_storage.com

Для создания гиперссылки на адрес электронной почты достаточно для атрибута href HTML‑элемента A использовать похожее значение:

mailto:address@somemail.com

При переходе по такой гиперссылке откроется почтовая программа по умолчанию. При этом поле адреса будет заполнено значением address@somemail.com. При создании гиперссылки на адрес электронной почты можно позаботиться об автоматическом формировании текста, темы или других сведений, например:

mailto:address@somemail.com?subject=Тема письма

&cc=copyaddress@somemail.com&bcc=bcopyaddress@somemail.com

&body=Текст письма

В данном случае значения полей, которые будут заполнены в окне почтовой программы, указываются после адреса электронной почты. Так, например, если почтовая программа по умолчанию – Microsoft Outlook, то при выборе в окне браузера гиперссылки с приведенным выше значением атрибута href окно Microsoft Outlook будет выглядеть так, как показано на рис. 5.2.

Рис. 5.2. Автоматическое заполнение полей почтовой программы

Из рисунка можно увидеть, какое поле как обозначается в строке почтового адреса гиперссылки (subject, cc, bcc и body). Остается только лишь подчеркнуть, что символ & служит для разделения информации, заносимой в различные поля. Значения всех полей задавать не обязательно, но порядок их задания важен и является таким, как было показано в приведенном выше примере.

5.2. Навигация в пределах документа

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

Перед тем как создавать средства навигации по HTML‑документу, нужно рассмотреть ключевое понятие, которое используется применительно к гиперссылкам, – якорь ссылки. Когда речь идет о гиперссылках, то обычно упоминаются два якоря: начальный и якорь назначения. Соответственно, и переход по гиперссылке осуществляется от начального якоря к якорю назначения.

Как можно было увидеть из приведенных ранее примеров, при задании якоря назначения гиперссылки указывается URI какого‑либо ресурса. В гл. 1 уже говорилось, что URI могут также указывать на части HTML‑документов. Части документов, на которые могут быть установлены гиперссылки, выделяются специальным образом: с этими частями связываются якоря, которые и используются впоследствии в гиперссылках.

Создание якоря в документе можно выполнять двумя способами. Первый способ – это использование HTML‑элемента A с указанием в качестве значения его атрибута name идентификатора якоря. Идентификатор должен быть уникальным в пределах HTML‑документа, например в следующей строке создается якорь с именем par1, который связан с заголовком – началом первого раздела документа:

<A name = «par1»><H1>Раздел 1</H1></A>

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

<A href = «#par1»>Раздел 1</A>

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

<A href = «chapter2.html#par1»>Раздел 1</A>

При создании любой гиперссылки можно одновременно задавать ее атрибуты href и name. При этом создаются собственно гиперссылка и якорь, к которому может осуществляться обратный переход (то есть гиперссылка становится якорем для других гиперссылок):

<A href = «chapter2.html#par1» name = «content»>Раздел 1</A>

Теперь можно рассмотреть и второй способ создания якорей для гиперссылок. Якорь гиперссылки, связанный с определенным элементом HTML‑документа, можно создать, указав значение атрибута id соответствующего элемента. Атрибут id поддерживается практически для всех HTML‑элементов (не поддерживается только для BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE). Например, создание приведенного чуть ранее якоря для заголовка первого раздела документа можно выполнить и так:

<H1 id = «par1»>Раздел 1</H1>

Работа с якорем, созданным таким образом, ничем не отличается от работы с якорем, созданным при помощи HTML‑элемента A.

Важным моментом является то, что и атрибут id, и атрибут name используют одно и то же пространство имен. Это означает, что при помощи этих атрибутов не может быть определен якорь с одинаковым именем в различных местах документа. Для элементов, поддерживающих атрибут name, можно задавать значения id и name одновременно, но при этом эти значения должны быть равны между собой. Например, создание якоря следующим образом является полностью корректным:

<A name = «par1» id = «par1»><H1>Раздел 1</H1></A>

5.3. Прочие атрибуты гиперссылок

Помимо упомянутых выше, у HTML‑элемента A есть еще целый ряд необязательных атрибутов, основные из которых перечислены ниже:

• accesskey – задает клавишу быстрого доступа, например "C", "N", при нажатии которой пользователь перейдет по гиперссылке (в Windows нажимается клавиша Alt + быстрая клавиша);

• charset – кодировка ресурса, на который указывает гиперссылка;

• hreflang – задает язык ресурса, на который указывает гиперссылка;

• type – задает так называемый MIME‑тип содержимого ресурса, на который указывает гиперссылка (описание MIME‑типов см. в разд. 6.5);

• tabindex – порядок табуляции, в котором активируется гиперссылка (значение от 0 до 32 767);

• rel – роль документа, на который указывает гиперссылка; основные значения вместе с описаниями приведены в табл. 5.1;

• rev – роль текущего документа по отношению к документу, на который указывает гиперссылка; значения см. в табл. 5.1.

Таблица 5.1. Типы ссылок, задаваемые атрибутами rel и rev (значения этих атрибутов)

Теперь пара слов об атрибуте tabindex. Использовать этот атрибут очень удобно, когда нужно обеспечить перемещение по документу при помощи табуляции. Табуляция обеспечивается нажатием клавиши Tab. Гиперссылки и некоторые другие части документа можно нумеровать, задавая порядок, в котором они будут активироваться при табуляции. Элементы документа, для которых не задано значение атрибута tabindex, перебираются в порядке их следования в документе.

Глава 6 Линейки, изображения, внедренные объекты

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

6.1. Линейки

Линейка – горизонтальная линия в окне браузера. Для вставки линейки в HTML‑документ используется элемент HR. Этот HTML‑элемент задается при помощи одиночного тега <HR> и имеет следующие атрибуты:

• align – задает выравнивание линейки в окне браузера, может принимать значения left, right или center;

• noshade – булев атрибут, указывает браузеру, что линейку следует отображать плоской (без традиционной тени);

• size – численное значение, определяющее толщину линии;

• width – численное значение, определяющее ширину линейки; может задаваться как абсолютное (в пикселах) значение, так и относительное (в процентах от ширины окна браузера).

По умолчанию используются выравнивание линейки по центру и ширина линейки, равная 100 % от ширины области окна браузера, отведенной HTML‑документу.

Далее приведен небольшой пример, в котором иллюстрируется использование различных значений атрибутов для линеек (пример 6.1).

Пример 6.1. Использование горизонтальных линеек

<TITLE>Линейки</TITLE>

<BODY>

Линейка с настройками по умолчанию

<HR>

Линейки различной толщины

<HR size = 4>

<HR size = 10>

Плоская линейка

<HR noshade size = 10>

Линейки с различным выравниванием

<HR width = "50%" align = left>

<HR width = "50%">

<HR width = "50%" align = right>

</BODY>

Созданные в примере 6.1 линейки выглядят так, как показано на рис. 6.1.

Рис. 6.1. Использование горизонтальных линеек

6.2. Изображения

Если линейки применяются в основном для визуального отделения обособленных частей текста, то изображения могут внести в HTML‑документ элемент иллюстративности. Своеобразная вставка изображения в документ уже рассматривалась при описании HTML‑элемента BODY. Тогда указывалось изображение‑фон страницы. Теперь пришло время научиться добавлять изображения непосредственно в текст HTML‑документа.

Для вставки изображения в текст HTML‑документа используется элемент IMG. Для задания этого HTML‑элемента используется одиночный тег <IMG>. Список наиболее используемых атрибутов:

• scr – задает URI изображения;

• alt – альтернативный текст, который отображается на месте изображения, если по каким‑либо причинам само изображение не может быть показано;

• border – задает толщину границы вокруг рисунка в пикселах;

• align – определяет выравнивание изображения (описание возможных значений приведено в табл. 6.1);

• height – задает высоту изображения в пикселах;

• width – определяет ширину изображения в пикселах;

• vspace – задает величину свободного пространства между изображением и текстом сверху и снизу;

• hspace – определяет величину свободного пространства между изображением и текстом справа и слева;

• name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии (поддерживается для совместимости с более ранними версиями HTML, для идентификации изображений лучше использовать атрибут id).

Среди перечисленных атрибутов элемента IMG обязательным является только атрибут scr. Значение атрибута alt задается тогда, когда нужно, чтобы пользователь, браузер которого не показывает изображения на странице (например, если отображение рисунков отключено в настройках браузера), хоть что‑то увидел на том месте, где должно быть изображение. Атрибуты height и width используются для того, чтобы браузер еще до загрузки изображения мог правильно расположить его в тексте. Кроме того, эти атрибуты можно применять для принудительного изменения (сжатия или увеличения) размера изображения.

Приведенный ниже пример 6.2 иллюстрирует использование атрибутов alt, width, height, а также атрибута border.

Пример 6.2. Вставка изображений в HTML-документ

<TITLE>Вставка изображений</TITLE>

<BODY>

<IMG src = "study.gif" border = 1> – небольшое изображение с рамкой.<BR>

<IMG scr = "image.gif" height = 200 width = 150 alt = "здесь должно быть изображение 150x200"> – это изображение не может быть загружено браузером.

</BODY>

При обработке приведенного примера браузером получится документ, показанный на рис. 6.2 (предполагается, что браузер не может найти изображение image.gif).

Рис. 6.2. Вставка изображений

Атрибут align задает положение изображения в тексте. Он может принимать достаточно большое количество значений. Значения атрибута align и описание их воздействия на положения изображения приведены в табл. 6.1.

Таблица 6.1. Положения изображения в тексте

Действие различных значений атрибута align на положение изображения приведено на рис. 6.3.

Рис. 6.3. Различное выравнивание изображений

Для большей наглядности и экономии места изображения показаны несколько уменьшенными (height=20 и width=23) и с использованием границы одинарной толщины (border=1).

Изображения-гиперссылки

Изображения, особенно небольшие пиктограммы и значки, часто используются в качестве графического представления гиперссылок. Создание изображения‑гиперссылки выполняется очень просто: достаточно заключить HTML‑элемент IMG внутрь элемента A, как показано ниже:

<A href = «info.html»><IMG scr = «info.gif»></A>

Изображение‑гиперссылка обычно обводится браузером рамкой такого же цвета, что и цвет текста обычной гиперссылки в соответствующем состоянии (посещенная, непосещенная или активная).

Изображения-карты

Рассмотрим еще один интересный способ использования изображений для навигации – создание изображений‑карт. Карта – это заданный набор областей различной формы. Заданные области карты считаются активными, и браузер работает с ними практически аналогично тому, как он работает с изображениями‑гиперссылками. Так вот, изображение‑карта – это обычное изображение с наложенной на него картой активных областей. Карту можно использовать не только с изображениями, но здесь будет рассмотрено использование карт именно с ними – так нагляднее.

Карта, используемая для изображения, может быть создана в любом документе, URI которого известен. Для создания карты используется элемент MAP (задается парными тегами <MAP> и </MAP>). Обычно для элемента MAP задается значение атрибута name – имя, которое используется для ссылок на созданную карту.

Внутри элемента MAP при помощи одиночных тегов <AREA> (HTML‑элемент AREA) задаются активные области карты. Для каждого элемента AREA могут задаваться следующие атрибуты:

• coords – координаты активной области (количество и значение зависят от типа области, заданного атрибутом shape);

• href – URI, на который указывает гиперссылка, ассоциированная с областью;

• nohref – булев атрибут, создает неактивную область (с областью ассоциируется пустая гиперссылка);

• shape – задает тип области, может принимать значения: rect (прямоугольник), circle (круглая область), poly (многоугольник) и default (по умолчанию используется вся область карты);

• alt – альтернативный текст;

• title – текст подсказки (отображается в виде всплывающей подсказки при наведении указателя мыши на область);

• tabindex – позиция элемента карты в порядке табуляции в HTML‑документе (целое число от 0 до 32 767).

Задание набора значений атрибуту coords существенно отличается для областей различных видов. Значения задавать не нужно, если используется значение атрибута shape по умолчанию. Иначе при задании значений атрибуту coords нужно следовать следующим правилам.

• Если для атрибута shape установлено значение rect, то атрибуту coords задаются координаты верхнего левого и нижнего правого углов прямоугольника (например, coords="10,10,34,45").

• Если для атрибута shape установлено значение poly, то атрибуту coords задаются координаты всех вершин многоугольника. При этом лучше координаты первой вершины указать и в конце, а то вдруг разработчики браузера забыли создать автоматическое закрытие многоугольника (например, coords="10,10,34,45,50,20,10,10" – задание треугольной области).

• Если для атрибута shape установлено значение circle, то атрибуту coords задаются координаты центра и радиус окружности (например, coords="100,100,45"). Радиус можно задавать в процентах, тогда значение радиуса в пикселах будет вычислено браузером на основе размеров объекта, на который накладывается карта, при отображении HTML‑документа.

В примере 6.3 приводится один из способов использования изображения‑карты для осуществления навигации по документам.

Пример 6.3. Использование изображения-карты

<TITLE>Изображения-карты</TITLE>

<BODY>

<IMG src = "pointer.gif" usemap = "#map1">

<MAP name = map1>

<!–Левый треугольник–>

<AREA

coords = "1,13,15,2,15,23,1,13"

shape = poly href = "6.1.html"

alt = "Переход к примеру 6.1"

title = "Переход к примеру 6.1">

<!–Правый треугольник–>

<AREA

coords = "48,13,34,2,34,23,48,13"

shape = poly href = "6.2.html"

alt = "Переход к примеру 6.2"

title = "Переход к примеру 6.2">

<!–Центральный прямоугольник–>

<AREA

coords = "15,2,34,24"

shape = rect href = "6.3.html"

alt = "Обновить"

title = "Обновить">

</MAP>

</BODY>

Здесь на изображение накладывается карта, состоящая из двух треугольников и одного прямоугольника. Обратите внимание на то, что для указания браузеру использовать карту в теге элемента IMG атрибуту usemap присвоено значение – URI карты. В данном случае используется карта, определенная в том же HTML‑документе. Карта может быть определена и в другом файле того же сайта или вообще в файле, находящемся на другом сервере. Тогда нужно соответствующим образом изменить относительный URI (для файла того же сайта) или указать абсолютный URI HTML‑документа, в котором определена нужная карта, например:

<IMG src = «pointer.gif» usemap = «someserver.com/mysite.html#map1»>

Изображение‑карта из примера 6.3 выглядит так, как показано на рис. 6.4.

Рис. 6.4. Изображение-карта

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

6.3. Добавление фоновой музыки

Сейчас будет кратко рассмотрен HTML‑элемент, позволяющий добавить музыку, которая будет проигрываться при открытии HTML‑документа, – элемент BGSOUND. Он задается при помощи одиночного тега <BGSOUND> и имеет следующие атрибуты:

• src – URI аудиофайла (поддерживаются только форматы WAV и MID);

• loop – задает количество повторений (значения 0 или –1 используются при необходимости бесконечного воспроизведения, значения меньше –1 интерпретируются как 1), по умолчанию используется значение 1;

• volume – задает громкость воспроизведения; значения от –10 000 (минимальная громкость) до 0 (максимальная громкость, используется по умолчанию);

• balance – задает значение стереобаланса, принимает значения от –10 000 (левый баланс) до 10 000 (правый баланс); по умолчанию используется значение 0 (центральный баланс).

Ниже приведен пример 6.4, представляющий собой простейший HTML‑документ, при открытии которого начинает проигрываться музыка из файла bgsound.wma.

Пример 6.4. Проигрывание музыки при просмотре HTML-документа

<TITLE>Проигрывание музыки</TITLE>

<BODY>

<BGSOUND src = "bgsound.wma" volume = -1000>

Текст HTML-документа ...

</BODY>

Как можно было убедиться, элемент BGSOUND позволяет очень легко добавить звуковое оформление HTML‑документа. Жаль только, что этот элемент не является стандартным HTML‑элементом. К тому же он поддерживается только браузером Internet Explorer.

6.4. Простое проигрывание видео

Браузер Internet Explorer поддерживает также ряд нестандартных дополнительных атрибутов элемента IMG, при помощи которых можно очень просто организовать проигрывание видео в окне браузера. Рассмотрим эти атрибуты:

• dynsrc – URI видеофайла (поддерживается только стандарт AVI);

• loop – задает количество повторений видеоролика (полностью аналогичен атрибуту loop рассмотренного выше элемента BGSOUND).

Если задано значение атрибута src (адрес статичного изображения), то указанное изображение показывается во время загрузки видеофайла. Ниже приведен простой пример 6.5, содержащий HTML‑документ, при загрузке которого начинается воспроизведение видеоролика из файла clip.avi, причем область воспроизведения занимает все окно браузера.

Пример 6.5. Проигрывание видео в окне браузера

<TITLE>Проигрывание видео</TITLE>

<BODY>

<IMG dynsrc = "clip.avi" loop = 1 height = "100%" width = "100%">

</BODY>

6.5. Внедрение объектов

В текст HTML‑документа могут быть добавлены не только линейки, рисунки, видео и звук. Можно внедрить документы множества других приложений, построенных с использованием технологии OLE, а также элементы управления ActiveX.

Для внедрения объектов в документ используется элемент OBJECT (задается парными тегами <OBJECT> и </OBJECT>). При внедрении объектов с помощью OBJECT используются следующие атрибуты:

• classid – при внедрении ActiveX‑компонентов задает уникальный идентификатор класса (CLSID), строка вида clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx; при внедрении других объектов может содержать URI внедряемого объекта или другие сведения для идентификации объекта (см. приведенный далее пример с апплетом);

• codetype – если задан, то означает тип объекта, на который указывает classid; позволяет браузеру избежать загрузки объекта неподдерживаемого типа (значения см. у атрибута type);

• data – позволяет указать URI данных, необходимых для объекта; зависит от конкретного внедряемого объекта;

• type – тип данных, указанных в атрибуте data (так называемый MIME‑тип);

• codebase – задает базовый URI, относительно которого разрешаются все относительные URI, задаваемые для этого элемента OBJECT; например, если codebase равен "", то значение "img1.gif", заданное для атрибута data, означает " / img1.gif ";

• standby – задает текст, который отображается браузером до окончания загрузки объекта;

• height – задает высоту внедренного объекта;

• width – задает ширину внедренного объекта.

Для элемента OBJECT поддерживаются также другие атрибуты, задающие положение и оформление объекта, аналогичные атрибутам элемента IMG. Если не указать размер в атрибутах height и width, то внедренный объект будет невидимым. Текст, заключенный между тегами <OBJECT> и </OBJECT>, выводится браузером в случае невозможности загрузить заданный объект.

При необходимости внедрения какого‑либо конкретного ActiveX‑компонента его CLSID можно посмотреть в документации для этого компонента реестра Windows или в разделе HKEY_CLASSES_ROOT\CLSID (например, CLSID компонента RichText (компонент для редактирования текста в RTF‑формате, содержащего форматирование, рисунки и прочие объекты) равен 3B7C8860-D78F-101B-B9B5-04021C009402). Рассмотрим пример внедрения такого текстового поля в HTML‑документ (пример 6.6).

Пример 6.6. Внедрение компонента текстового поля в HTML-документ

<TITLE>Внедрение текстового поля RichEdit</TITLE>

<BODY>

<OBJECT classid = "clsid:3B7C8860-D78F-101B-B9B5-04021C009402"

width = "400" height = "300" >

Не удалось внедрить RichEdit

</OBJECT>

</BODY>

Результат внедрения текстового поля RichText в HTML‑документ (со вставленным фрагментом из редактора Microsoft Word) приведен на рис. 6.5.

Рис. 6.5. Внедренный компонент RichEdit

При помощи элемента OBJECT документы некоторых распространенных приложений могут быть также легко внедрены в HTML‑документ. Для этого достаточно указать значения атрибутов data и type, не используя атрибут classid. Например, для внедрения на страницу документа Microsoft Word достаточно следующего фрагмента (пример 6.7).

Пример 6.7. Внедрение документа Microsoft Word

<TITLE>Внедренный документ Microsoft Word</TITLE>

<BODY>

<OBJECT data = "word.doc" type = "application/msword" width = "70%"

height = "50%" border = "1">

Не удалось внедрить документ

</OBJECT>

</BODY>

Результат внедрения документа Microsoft Word показан на рис. 6.6.

Рис. 6.6. Внедренный документ Microsoft Word

Таким же образом можно внедрить видео, изображения и пр. Только нужно указать расположение внедряемого файла и его MIME‑тип (список некоторых наиболее распространенных MIME‑типов приведен в табл. 6.2).

Таблица 6.2. Некоторые MIME-типы

До этого момента мы просто внедряли в документы объекты, не выполняя никаких настроек самих объектов. В случаях, когда объектам могут понадобиться значения специальных параметров (свойств объекта), может применяться HTML‑элемент PARAM.

Элемент PARAM задается одиночным тегом <PARAM>, который может использоваться только внутри элемента OBJECT. Элемент PARAM имеет следующие атрибуты:

• name – имя свойства; список доступных имен зависит от конкретного объекта;

• value – значение свойства;

• valuetype – тип значения свойства; для этого атрибута доступны следующие варианты значений:

· data – указывает, что value содержит значение, которое может быть представлено в виде строки и в таком виде передано внедренному объекту (значение по умолчанию);

· ref – показывает, что value содержит URI какого‑то ресурса;

· object – указывает, что value содержит идентификатор (значение атрибута id) другого объекта, внедренного в страницу при помощи элемента OBJECT;

• type – если атрибуту valuetype присвоено значение ref, то задает тип (MIME‑тип) ресурса, на который указывает заданный в атрибуте value URI.

Описать все возможные свойства объектов, доступных для внедрения в HTML‑документы, просто невозможно. Таких объектов множество, да и каждый из них имеет свой собственный набор свойств. В любом случае, если вам понадобится использовать какой‑то объект, придется разыскать или примеры его использования, или документацию. Здесь же мы ограничимся небольшим примером, а именно внедрением в документ Проигрывателя Window Media с заданием значений трех его свойств (пример 6.8).

Пример 6.8. Внедрение Проигрывателя Windows Media

<TITLE>Внедрение объекта и присвоение значений его свойствам</TITLE>

<BODY>

<!–Внедрение проигрывателя Windows Media Player–>

<OBJECT CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"

width = "300" height = "225">

<PARAM name = "URL" value = "Clip.avi">

<PARAM name = "autoStart" value = "True">

<PARAM name = "uiMode" value = "none" >

Не удалось внедрить Проигрыватель Media Player

</OBJECT>

</BODY>

Как можно увидеть из текста примера, CLSID компонента проигрывателся равен 6BF52A52-394A-11d3-B153-00C04F79FAA6. В примере при помощи HTML‑элемента PARAM задаются значения трех свойств:

• URL – файл для открытия в проигрывателе (в нашем случае это файл Clip.avi, расположенный в той же папке, что и HTML‑документ);

• autoStart – установив значение в True, заставляем проигрыватель автоматически начинать воспроизведение;

• uiMode – установив значение этого свойства в none, убираем элементы управления проигрывателя, так что в документе будет показано только проигрываемое видео.

Кстати, этот пример хорошо показывает универсальность HTML‑элемента OBJECT, позволяющую в реальной практике отказаться от использования нестандартных возможностей элементов IMG и BGSOUND, рассмотренных выше в этой главе.

Глава 7 Таблицы

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

7.1. Структура простейшей таблицы

Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML‑элемент TABLE, который задается парными тегами <TABLE> и </TABLE>.

Строки таблицы задаются HTML‑элементом TR (парные теги <TR> и </TR>, закрывающий тег может отсутствовать). Ячейки в простейшем случае задаются HTML‑элементом TD (парные теги <TD> и </TD>, закрывающий тег может отсутствовать).

Итак, учитывая приведенные выше сведения, можно добавить в документ простейшую таблицу, например, как показано ниже (пример 7.1).

Пример 7.1. Создание простейшей таблицы

<TITLE>Простейшая таблица</TITLE>

<TABLE>

<TR><TD>1<TD>11<TD>111<TD>1111

<TR><TD>2<TD>22<TD>222<TD>2222

<TR><TD>3<TD>22<TD>333<TD>3333

<TR><TD>4<TD>44<TD>444<TD>4444

</TABLE>

Таблица из приведенного примера выглядит так, как показано на рис. 7.1.

Рис. 7.1. Простейшая таблица

Приведенная на рисунке таблица выглядит не очень привлекательно. Но это всего лишь потому, что при ее создании не использовались никакие атрибуты элементов TABLE, TR и TD. Браузер применил к приведенной таблице настройки внешнего вида по умолчанию (даже не нарисовал ее границы).

7.2. Элементы таблицы

Теперь рассмотрим, какие же возможности настройки внешнего вида таблиц предоставляет HTML, а также некоторые дополнительные HTML‑элементы, используемые при создании таблиц.

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

Для каждой таблицы имеется возможность создать заголовок, используя HTML‑элемент CAPTION (задается парными тегами <CAPTION> и </CAPTION>), помещенный после тега <TABLE>.

Если используется заголовок таблицы, то элемент CAPTION должен быть задан непосредственно после тега <TABLE> нужной таблицы. Кроме того, для любой таблицы может быть создан только один заголовок. Пример создания таблицы с заголовком приведен ниже (пример 7.2).

Пример 7.2. Таблица с заголовком

<TITLE>Заголовок таблицы</TITLE>

<TABLE>

<CAPTION><B>Простая таблица, но уже с заголовком</B>

</CAPTION>

<TR><TD>1<TD>11<TD>111<TD>1111

<TR><TD>2<TD>22<TD>222<TD>2222

<TR><TD>3<TD>22<TD>333<TD>3333

<TR><TD>4<TD>44<TD>444<TD>4444

</TABLE>

К тексту элемента CAPTION может применяться любой из рассмотренных в гл. 3 способов форматирования, чтобы хоть как-то можно было отличить заголовок таблицы от обычного текста. Таблица, приведенная в примере 7.2, выглядит так, как показано на рис. 7.2.

Рис. 7.2. Заголовок таблицы

Для элемента CAPTION можно задать атрибут, определяющий положение заголовка относительно таблицы, – align. Этот атрибут может принимать следующие значения:

• top – заголовок показывается сверху таблицы (используется по умолчанию);

• bottom – под таблицей;

• left – слева от таблицы;

• right – справа от таблицы.

Здесь приведен официальный список (согласно спецификации HTML 4.01) функций, которые ассоциированы с каждым значением атрибута align. Однако в действительности поведение браузеров при отображении заголовка с заданным выравниванием может отличаться. Например, Internet Explorer при использовании значений left или right показывает заголовок таблицы все равно сверху, лишь изменяя горизонтальное выравнивание текста.

Параметры отображения таблицы

Многие параметры отображения таблицы задаются установкой соответствующих значений атрибутов элемента TABLE. Рассмотрим наиболее используемые атрибуты:

• align – задает положение таблицы в окне браузера (left, right или center);

• bgcolor – задает цвет фона таблицы;

• border – задает толщину внешней границы таблицы;

• bordercolor – цвет границ таблицы (цвет внешней границы и цвет границ ячеек);

• cellpadding – размер пустого пространства между границами и содержимым ячеек таблицы;

• cellspacing – размер пустого пространства между ячейками таблицы;

• frame – задает отображаемые части внешней рамки таблицы, может принимать одно из перечисленных ниже значений;

· void – рамка не отображается (используется по умолчанию);

· above – отображается только верхняя граница;

· below – показывается только нижняя граница;

· hsides – отображаются верхняя и нижняя границы;

· vsides – показываются правая и левая границы;

· lhs – отображается только левая граница;

· rhs – показывается только правая граница;

· box – рамка отображается полностью;

· border – то же самое, что и box;

• rules – задает, какие именно границы между ячейками должны отображаться, может принимать одно из следующих значений:

· none – границы между ячейками не отображаются (используется по умолчанию);

· group – показывать границы только между группами строк и столбцов (группировка строк и столбцов будет рассмотрена ниже);

· rows – отображать только границы между строками таблицы;

· cols – показывать границы только между столбцами таблицы;

· all – отображать все границы между ячейками;

• height – задает рекомендуемую высоту таблицы;

• width – определяет рекомендуемую ширину таблицы.

Используя атрибуты border, frame и rules, следует помнить, что при установке значения атрибута border вручную значения атрибутов frame и rules считаются равными border и all соответственно (если другие значения этих атрибутов задаются вручную в том же элементе, то учитываются заданные вручную значения, а не border и all). Это значит, что для того чтобы просто показать рамку вокруг таблицы, достаточно задать только значение атрибута border.

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

На рис. 7.3 показана все та же простейшая таблица. Однако теперь ее отображение настроено при помощи атрибутов HTML‑элемента TABLE.

Рис. 7.3. Настроенная таблица

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

<TABLE align = center border = 5 bgcolor = green bordercolor = yellow cellpadding = "5" width = «50%»>

Параметры отображения строк таблицы

Для настройки особого отображения отдельных строк таблицы используются атрибуты HTML‑элемента TR (он объединяет отдельные ячейки в строки таблицы). Список основных атрибутов элемента TR:

• align – задает горизонтальное выравнивание текста ячеек строки, может принимать значения left, right, center или justify;

• valign – определяет вертикальное выравнивание текста ячеек строки, может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячеек строки;

• bordercolor – определяет цвет рамки ячеек строки (если рамка отображается);

• height – позволяет указать рекомендуемую высоту ячеек строки;

• width – дает возможность указать рекомендуемую ширину ячеек строки.

Далее приведен небольшой пример оформления строк таблицы с использованием некоторых атрибутов HTML‑элемента TR совместно с использованием ранее рассмотренных атрибутов элемента TABLE (пример 7.3).

Пример 7.3. Оформление строк таблицы

<TITLE>Настройка отображения строк таблицы</TITLE>

<TABLE align = center border = 5 bgcolor = green bordercolor = yellow cellpadding = "5" width = "50%">

<CAPTION align = top><B>Простая таблица, но уже с заголовком и оформлением</B></CAPTION>

<TR align = right bgcolor = white><TD>1<TD>11<TD>111<TD>1111

<TR align = center bordercolor = black><TD>2<TD>22<TD>222<TD>2222

<TR bgcolor = white><TD>3<TD>22<TD>333<TD>3333

<TR bordercolor = black><TD>4<TD>44<TD>444<TD>4444

</TABLE>

Таблица, формируемая браузером при обработке данного кода, показана на рис. 7.4.

Рис. 7.4. Настройка отображения строк таблицы

Параметры отображения ячеек. Слияние ячеек

Теперь рассмотрим самое мощное средство настройки отображения данных таблицы – настройку параметров отображения отдельных ячеек таблицы. Итак, для задания внешнего вида содержимого ячейки используются следующие атрибуты HTML‑элемента TD:

• align – задает горизонтальное выравнивание текста ячейки, может принимать значения left, right, center или justify;

• valign – определяет вертикальное выравнивание текста ячейки, может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячейки;

• bordercolor – определяет цвет рамки ячейки (если рамка отображается);

• height – позволяет указать рекомендуемую высоту ячейки;

• width – дает возможность указать рекомендуемую ширину ячейки;

• colspan – задает количество столбцов для слияния;

• rowspan – определяет количество строк для слияния.

Все указанные атрибуты, кроме двух последних, должны быть вам знакомы. Последние два атрибута элемента TD используются для объединения нескольких ячеек при создании более сложных таблиц. Рассмотрим реализацию именно объединения нескольких ячеек на примере таблицы отчетности некоторого предприятия (пример 7.4 демонстрирует также возможность применения форматирования к тексту ячеек таблицы).

Пример 7.4. Таблица с объединенными ячейками

<TITLE>Таблица с объединенными ячейками</TITLE>

<TABLE align = center border = 3 bordercolor = black>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX года</B></CAPTION>

<!–формирование первой строки шапки таблицы–>

<TR align = center>

<TD rowspan = 2><B>Филиал\Период</B>

<TD colspan = 3><B>3 квартал</B>

<TD colspan = 3><B>4 квартал</B>

<!–формирование второй строки шапки (названия месяцев)–>

<TR align = center>

<TD><B>Июль</B><TD><B>Август</B><TD><B>Сентябрь</B>

<TD><B>Октябрь</B><TD><B>Ноябрь</B><TD><B>Декабрь</B>

<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

<TR align = right><TD align = left>Филиал 1<TD>123123<TD>323233

<TD>323453<TD>231423<TD>323212<TD>243673

<TR align = right><TD align = left>Филиал 2<TD>223523<TD>225243

<TD>314423<TD>212445<TD>373812<TD>274673

<TR align = right><TD align = left>Филиал 3<TD>183123<TD>186834

<TD>323453<TD>231423<TD>323212<TD>243673

<TR align = right><TD align = left>Филиал 4<TD>125163<TD>334343

<TD>123553<TD>167423<TD>254412<TD>132367

</TABLE>

Внешний вид таблицы представлен на рис. 7.5.

Рис. 7.5. Таблица с объединенными ячейками

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

В примере 7.4 использовалось форматирование текста внутри ячеек для выделения тех из них, которые относят к шапке таблицы. Такое выделение ячеек шапки приведено только в качестве примера и является нежелательным в реальной практике. Для выделения заголовочных ячеек (например, относящихся к шапке таблицы) используется HTML‑элемент TH, рассматриваемый далее. Кроме того, слияние ячеек в некоторой степени можно реализовать, применяя другие средства HTML, – группировку строк и столбцов.

В этой главе говорится только о тексте внутри ячеек. Но это совсем не значит, что в ячейках таблиц могут содержаться только текстовые данные. Каждая ячейка таблицы может включать графику, внедренные объекты, списки, вложенные таблицы – практически все, что можно поместить в тело HTML‑документа. Именно возможность помещения в ячейки таблицы любых данных используется в примере описываемой в конце главы страницы, целиком построенной на использовании таблицы.

Ячейки заголовков

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

Чтобы избавиться от необходимости задания текста заголовочных ячеек вручную (да и для того, чтобы лучше структурировать содержимое HTML‑документа), можно использовать элемент TH. Этот HTML‑элемент задается парными тегами <TH> и </TH> (закрывающий тег необязателен). Использование TH аналогично использованию элемента TD. При этом не нужно заботиться о внешнем виде текста заголовочных ячеек: браузер автоматически выделит их содержимое.

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

Пример 7.5. Таблица с заголовочными ячейками

<TITLE>Применение ячеек заголовков</TITLE>

<TABLE align = center border = 3 bordercolor = black>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<!–формирование первой строки шапки таблицы–>

<TR>

<TH rowspan = 2>Филиал\Период

<TH colspan = 3>3 квартал

<TH colspan = 3>4 квартал

<!–формирование второй строки шапки (названия месяцев)–>

<TR>

<TH>Июль<TH>Август<TH>Сентябрь

<TH>Октябрь<TH>Ноябрь<TH>Декабрь

<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

...

</TABLE>

При обработке браузером приведенного HTML‑документа получится результат, аналогичный показанному на рис. 7.5.

7.3. Структурирование таблицы

Кроме рассмотренных ранее возможностей по манипулированию таблицами, HTML поддерживает разбиение таблицы на логически цельные части: группы строк и столбцов. Для отдельных частей таблицы можно устанавливать общие параметры отображения данных, которые автоматически применяются браузером при отображении таблицы. Кроме того, в некоторых случаях структурирование таблицы позволяет сделать возможным отображение таблицы по частям по мере ее загрузки (если, конечно, это поддерживается браузером). Последняя возможность очень пригодится при использовании таблиц для формирования дизайна HTML‑документа.

Группировка строк

В любой добавляемой в HTML‑документ таблице можно выделить три логически цельных части: шапка, тело таблицы и «футер» (нижняя часть таблицы, footer). Эти части состоят из строк, то есть строки таблицы можно сгруппировать в шапку, тело и футер.

Рассматриваемые части таблицы задаются следующим образом: шапка обозначается HTML‑элементом THEAD (<THEAD> и </THEAD>), тело задается элементом TBODY (<TBODY> и </TBODY>), а футер – элементом TFOOT (<TFOOT> и </TFOOT>). Все закрывающие теги являются необязательными. Внутри этих HTML‑элементов (между задающими их тегами) помещаются строки, относящиеся к соответствующим частям таблицы (пример 7.6).

Пример 7.6. Задание частей таблицы

<TABLE>

<THEAD>

<TR>Первая строка шапки...

<TR>Вторая строка шапки...

</THEAD>

<TBODY>

<TR>Строка данных...

...

</TBODY>

<TFOOT>

<TR>Строка футера...

</TFOOT>

</TABLE>

Данные таблицы задаются с использованием элементов TH и TD. В приведенном примере закрывающие теги элементов THEAD, TBODY и TFOOT можно опустить. Задавая различные значения атрибутам align, valign, bgcolor в открывающих тегах рассматриваемых HTML‑элементов, можно управлять отображением сразу всех ячеек той или иной части таблицы.

Любая таблица может содержать несколько частей, обозначенных элементом TBODY. Нужно также отметить, что принадлежность строк к телу таблицы подразумевается по умолчанию, то есть если в таблице есть строки, перед определением которых в тексте HTML‑документа не было ни <THEAD>, ни <TFOOT>, то такие строки считаются заданными внутри элемента TBODY.

Чтобы продемонстрировать использование группировки строк таблицы на практике, можно модифицировать таблицу из примера 7.4 (пример 7.7).

Пример 7.7. Группировка строк таблицы

<TITLE>Группировка строк таблицы</TITLE>

<TABLE align = center border = 3 bordercolor = black rules = groups>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<THEAD>

<!–формирование первой строки шапки таблицы–>

<TR>

<TH rowspan = 2>Филиал\Период

<TH colspan = 3>3 квартал

<TH colspan = 3>4 квартал

<!–формирование второй строки шапки (названия месяцев)–>

<TR>

<TH>Июль<TH>Август<TH>Сентябрь

<TH>Октябрь<TH>Ноябрь<TH>Декабрь

<TBODY align = right>

<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

<TR><TD align = left>Филиал 1<TD>123123<TD>323233

<TD>323453<TD>231423<TD>323212<TD>243673

<TR><TD align = left>Филиал 2<TD>223523<TD>225243

<TD>314423<TD>212445<TD>373812<TD>274673

<TR><TD align = left>Филиал 3<TD>183123<TD>186834

<TD>323453<TD>231423<TD>323212<TD>243673

<TR><TD align = left>Филиал 4<TD>125163<TD>334343

<TD>123553<TD>167423<TD>254412<TD>132367

<TBODY align = right>

<!–Строка с итоговыми данными–>

<TR><TD align = left>Всего:<TD>654932<TD>1069653

<TD>1084882<TD>842714<TD>1274648<TD>894386

</TABLE>

Таблица, задаваемая в примере 7.7, выглядит так, как показано на рис. 7.6.

Рис. 7.6. Таблица со сгруппированными строками

Чтобы подчеркнуть отделение частей таблицы друг от друга, задано отображение границ только между группами строк и столбцов (см. атрибут rules элемента TABLE). В приведенной таблице сгруппированы лишь строки, поэтому и отображаются только горизонтальные границы.

Описание и группировка столбцов

Помимо группировки строк таблицы, в HTML присутствуют элементы, позволяющие определять столбцы и формировать группы столбцов: HTML‑элементы COL и COLGROUP. Если элементы COL или COLGROUP используются, то они должны следовать до элементов, группирующих строки таблицы (или до первой строки данных при отсутствии явной группировки строк). Сначала будет рассмотрено использование элемента COL.

Итак, HTML‑элемент COL задается одиночным тегом <COL>. Этот элемент позволяет установить общие параметры отображения всех ячеек, входящих в столбец или столбцы, заданием следующих атрибутов:

• align – задает горизонтальное выравнивание текста ячеек столбца (столбцов), может принимать значения left, right, center или justify;

• valign – задает вертикальное выравнивание текста ячеек столбца (столбцов), может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячеек столбца (столбцов);

• width – позволяет указать ширину столбца (столбцов);

• span – задает количество столбцов, к которым применяются параметры, заданные в описанных выше атрибутах (по умолчанию имеет значение 1).

Использование элемента COL не позволяет создавать группы столбцов – для этого используется HTML‑элемент COLGROUP. Однако использование элемента COL значительно облегчает настройку внешнего вида таблицы, позволяя задавать одинаковые настройки для нескольких столбцов одновременно. Например, чтобы создать таблицу, показанную на рис. 7.7, пришлось бы задавать значения атрибутов bgcolor почти для всех ячеек таблицы.

Рис. 7.7. Раскрашенная таблица

При использовании элемента COL все гораздо проще (пример 7.8).

Пример 7.8. Задание параметров отображения столбцов

<TITLE>Использование элемента COL</TITLE>

<TABLE align = center border = 3 bordercolor = black rules = groups>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<!–Определение столбцов таблицы–>

<COL align = left bgcolor = green>

<COL span = 3 bgcolor = blue>

<COL span = 3 bgcolor = yellow>

<THEAD>

<!–формирование первой строки шапки таблицы–>

<TR bgcolor = magenta>

<TH rowspan = 2>Филиал\Период

<TH colspan = 3>3 квартал

<TH colspan = 3>4 квартал

<!–формирование второй строки шапки (названия месяцев)–>

<TR bgcolor = magenta>

<TH>Июль<TH>Август<TH>Сентябрь

<TH>Октябрь<TH>Ноябрь<TH>Декабрь

<TBODY align = right>

<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

<TR><TD>Филиал 1<TD>123123<TD>323233<TD>323453

<TD>231423<TD>323212<TD>243673

<TR><TD>Филиал 2<TD>223523<TD>225243<TD>314423

<TD>212445<TD>373812<TD>274673

<TR><TD>Филиал 3<TD>183123<TD>186834<TD>323453

<TD>231423<TD>323212<TD>243673

<TR><TD>Филиал 4<TD>125163<TD>334343<TD>123553

<TD>167423<TD>254412<TD>132367

<TBODY align = right>

<!–Строка с итоговыми данными–>

<TR bgcolor = red><TD>Всего:<TD>654932<TD>1069653

<TD>1084882<TD>842714<TD>1274648<TD>894386

</TABLE>

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

Обратите внимание, что в примере 7.8 также использовалось задание цвета двух первых и последней строки при помощи атрибута bgcolor элемента TR. В этом и подобных случаях при отображении каждой ячейки браузеры выбирают параметры в следующем порядке.

1. Атрибуты элементов TD и TH.

2. Атрибуты элемента TR.

3. Атрибуты элемента COL.

4. Атрибуты элемента COLGROUP.

5. Атрибуты элементов THEAD, TFOOT, TBODY.

6. Атрибуты элемента TABLE.

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

Пример 7.9. Приоритеты элементов при отображении ячеек

<TABLE width = 300>

<THEAD align = center bgcolor = yellow>

<TR align = right>

<TD>Ячейка 1

<TD bgcolor = green>Ячейка 2

</THEAD>

</TABLE>

В данном случае ячейка с текстом Ячейка 1 будет иметь желтый фон, выравнивание по правому краю, ширину 300 пикселов. Ячейка с текстом Ячейка 2 будет отображаться аналогично первой, но с зеленым фоном.

Следует сказать несколько слов о возможностях задания значения атрибута width. Итак, значением атрибута может быть либо абсолютная ширина ячеек в пикселах, либо доля от ширины таблицы (в процентах), либо относительный или пропорциональный размер ячеек. Для задания пропорционального размера используется запись вида width = "i*", где i является целым положительным числом ("*" интерпретируется как "1*"). Рассмотрим, каким образом по пропорциональному размеру определяется абсолютный размер. Пусть есть столбцы, заданные в следующем виде:

...

<COL width = "2*">

<COL width = "3*">

<COL width = "30%">

...

Кроме того, пусть таблица имеет ширину 100 пикселов. Сначала вычисляются процентные размеры, а потом пропорциональные, поэтому третий столбец таблицы будет иметь ширину 30. Оставшиеся 70 пикселов распределяются между первым и вторым столбцами в соотношении 2:3, то есть ширина этих столбцов получится равной 70 : 5 × 2 = 28 и 70 : 5 × 3 = 42 соответственно.

Теперь, после достаточно долгого изучения HTML‑элемента COL, рассмотрим, как можно создавать группы столбцов таблицы с использованием элемента COLGROUP. Элемент COLGROUP задается парными тегами <COLGROUP> и </COLGROUP> (закрывающий тег необязателен). Он поддерживает тот же набор атрибутов, что и элемент COL.

Элемент COLGROUP может одновременно с группировкой задавать одинаковые параметры отображения всех столбцов группы аналогично тому, как это делается с использованием элемента COL. Однако если требуется задать различные значения атрибутов для разных столбцов группы, то нужно включить внутрь элемента COLGROUP описания всех столбцов таблицы с помощью элементов COL.

Например, если нужно создать группу из десяти столбцов, имеющих одинаковую ширину 30, а также одинаковые остальные параметры, то это можно сделать так:

<COLGROUP span = 10 width = 30>

или

<COLGROUP>

<COL span = 10 width = 30>

</COLGROUP>

или

<COLGROUP>

<COL width = 30>

<COL width = 30>

...

</COLGROUP>

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

Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:

<COLGOUP>

<COL align = left>

<COL span = 7 align = right>

<COL span = 2 align = center>

</COLGROUP>

Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 7.7 группировкой столбцов следующим образом (оставлены только части текста HTML‑документа, отличные от приведенного в примере 7.7) (пример 7.10).

Пример 7.10. Группировка столбцов

<TITLE>Группировка строк и столбцов таблицы</TITLE>

<TABLE align = center border = 3 bordercolor = black rules = groups>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<COLGROUP align = left>

<COLGROUP span = 3>

<COLGROUP span = 3>

<THEAD>

...

<TBODY align = right>

...

<TR><TD>Филиал 1...

<TR><TD>Филиал 2...

<TR><TD>Филиал 3...

<TR><TD>Филиал 4...

<TBODY align = right>

<TR><TD>Всего:...

</TABLE>

Теперь таблица примет окончательный вид, показанный на рис. 7.8.

Рис. 7.8. Таблица со сгруппированными столбцами и строками

Особенности задания ширины столбцов

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

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

Чтобы браузер мог начать отображение таблицы по частям, он должен до получения первой строки с данными ячеек обладать сведениями о количестве и абсолютной (в пикселах) ширине каждого столбца, о созданных группах столбцов. Для этого нужно определить все столбцы с использованием COL или COLGROUP, а также указать ширину таблицы и ее столбцов так, чтобы абсолютные значения могли быть однозначно определены, например:

<TABLE width = 300>

<COLGROUP>

<COL width = 30>

<COL width = "*">

</COLGROUP>

<COLGROUP width = 50 span = 4>

...

</TABLE>

В этом случае точно известно, что таблица, содержащая два столбца, будет шириной 300 пикселов. На первый столбец приходится 30 пикселов и, соответственно, на второй – оставшиеся 270.

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

7.4. Использование таблиц для формирования дизайна HTML-документа

Ранее были рассмотрены возможности использования таблиц только по своему прямому назначению – для группировки данных. Теперь пришло самое время рассказать о применении таблиц для формирования дизайна HTML‑документов. Здесь перед автором документа открываются поистине огромные возможности: точное позиционирование и упорядочивание элементов страницы, создание областей переменной или постоянной ширины и многие другие возможности, позволяющие сделать документ не только информативным, но и приятным глазу пользователя, удобным в использовании.

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

Рис. 7.9. Расположение элементов страницы

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

С учетом всего вышеизложенного можно написать следующий HTML‑документ (пример 7.11).

Пример 7.11. Страница на таблицах

<HTML>

<HEAD>

<TITLE>Страница, построенная на таблицах</TITLE>

</HEAD>

<BODY>

<TABLE width = "100%">

<COL width = 100 align = left valign = top bgcolor = yellow>

<COL width = "*" align = justify valign = top>

<TR>

<TD bgcolor = white>

<TD>

<TABLE width = "100%">

<COL width = "*" align = center>

<COL width = 57> <!–Столбец растягивается по ширине изображения–>

<TR>

<TD bgcolor = yellow><H1>7. Таблицы</H1>

<TD><IMG src = "7.11.html.files/logo.jpg">

</TABLE>

<TR>

<TD> <!–В первом столбце помещаются гиперссылки на примеры–>

<P><A href = "7.1.html">Пример 7.1</A>

<P><A href = "7.2.html">Пример 7.2</A>

<P><A href = "7.3.html">Пример 7.3</A>

<P><A href = "7.4.html">Пример 7.4</A>

<P><A href = "7.5.html">Пример 7.5</A>

<P><A href = "7.6.html">Пример 7.6</A>

<P><A href = "7.7.html">Пример 7.7</A>

<P><A href = "7.8.html">Пример 7.8</A>

<P><A href = "7.9.html">Пример 7.9</A>

<P><A href = "7.10.html">Пример 7.10</A>

<TD> <!–Весь текст помещается в одной ячейке таблицы–>

<P>Таблицы в том виде, в котором они реализованы в HTML,

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

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

В данном разделе рассмотрены оба способа использования таблиц.

Но для начала разберемся с тем, как добавлять таблицы в HTML-документ, а также рассмотрим возможности,

предоставляемые HTML для работы с таблицами.

<H2>Структура простейшей таблицы</H2>

<P>Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML-

элемент TABLE, который задается парными обязательными тегами <TABLE> и </TABLE>.

<P>Строки таблицы задаются HTML-элементом TR (парные теги

<TR> и </TR>, закрывающий тег необязателен).

Ячейки в простейшем случае задаются HTML-элементом TD (парные теги <TD> и </TD>, закрывающий тег необязателен).

</TABLE>

</BODY>

</HTML>

Страница из приведенного примера выглядит так, как показано на рис. 7.10.

Рис. 7.10. Страница, построенная на таблицах

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

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

Глава 8 Фреймы

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

8.1. Понятие фрейма

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

Во всех примерах ранее в книге рассматривалось выравнивание текста, графики, таблицы и прочего наполнения HTML‑документов в окне браузера. При этом в нем могло отображаться содержимое только одного документа. Использование фреймов позволяет разбить окно браузера на несколько частей, в которых могут отображаться разные HTML‑документы. Например, так, как показано на рис. 8.1.

Рис. 8.1. Три документа в одном окне

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

• Прокручивать содержимое одних фреймов независимо от содержимого других.

• Осуществлять переход между страницами сайта, загружая содержимое только в правый фрейм. Это экономит время пользователя, так как статичное содержимое сайта загружается с сервера только один раз.

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

8.2. Создание набора фреймов

Даже самый простой сайт, показанный на рис. 8.1, состоит из четырех HTML‑документов. Содержимое трех из них показывается в окне браузера. Четвертый документ, который и нужно открывать браузером, содержит описания фреймов, на которые разбивается окно, а также включает в себя указания браузеру, откуда загружать страницы в созданные фреймы. Содержимое HTML‑документа приведено в примере 8.1.

Пример 8.1. Файл с описанием фреймов

<HTML>

<HEAD>

<TITLE>Сайт с фреймами</TITLE>

</HEAD>

<FRAMESET cols = "200, *">

<FRAMESET rows = "70%, *">

<FRAME src = "page1.html">

<FRAME src = "page2.html">

</FRAMESET>

<FRAME src = "page3.html">

</FRAMESET>

</HTML>

Здесь можно увидеть два новых HTML‑элемента: FRAMESET и FRAME. Первый из них используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. Элемент FRAMESET задается парными тегами <FRAMESET> и </FRAMESET>. При разбиении окна на фреймы используются следующие атрибуты элемента FRAMESET:

• cols – список значений ширины создаваемых фреймов (могут использоваться как абсолютные значения в пикселах, так и процентные, а также пропорциональные, см. пример 8.1);

• rows – список значений высоты создаваемых фреймов (значения аналогичны значениям атрибута cols).

Можно задавать значения только одного из атрибутов. При этом если задано значение только атрибута col, то созданные фреймы будут занимать всю высоту окна браузера. Если задано значение только атрибута rows, то созданные фреймы будут занимать всю ширину окна браузера. Если заданы значения обоих атрибутов, то фреймы создаются слева направо и сверху вниз.

Между тегами <FRAMESET> и </FRAMESET> должны содержаться либо описания каждого фрейма с использованием HTML‑элемента FRAME, либо определения вложенных фреймов. Рассмотрим сначала описание фреймов при помощи элемента FRAME. Этот HTML‑элемент задается при помощи одиночного тега <FRAME>. Ниже приведены его атрибуты, используемые чаще всего:

• name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;

• src – URI документа, содержимое которого отображается в окне фрейма;

• noresize – булев атрибут, блокирует возможность изменения размера окна фрейма;

• scrolling – позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);

• frameborder – указывает, должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (рамка показывается, как на рис. 8.1, используется по умолчанию) или 0 (рамка не показывается);

• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);

• marginheight – задает расстояние между границами и содержимым фрейма по вертикали.

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

<FRAMESET cols = «200, *»>

<FRAMESET rows = "70%, *">

<FRAME src = "page1.html">

<FRAME src = "page2.html">

</FRAMESET>

<FRAME src = "page3.html">

</FRAMESET>

Здесь создается внешний набор из двух фреймов, занимающих всю высоту окна браузера. При этом в левом фрейме внешнего набора создается еще один набор фреймов. Нужно заметить, что блок <FRAMESET>…</FRAMESET> аналогичен одному элементу FRAME (описывает содержимое одного фрейма из внешнего набора). Анализируя приведенный выше фрагмент, можно однозначно сказать, что левый фрейм внешнего набора разбивается, а в правый фрейм загружается содержимое документа page3.html.

Существует еще одно примечательное отличие документа, описывающего набор фреймов, – в нем нет тела (элемента BODY). В таком документе не допускается наличие содержимого, кроме определения набора фреймов.

8.3. Новые возможности гиперссылок

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

Целевой фрейм отдельных гиперссылок

Для указания целевого фрейма каждой гиперссылки, то есть фрейма, в котором будет показано содержимое открываемого по ссылке HTML‑документа, используется атрибут target. Значением этого атрибута может быть либо имя нужного фрейма (значений атрибута name этого фрейма), либо одно из следующих предопределенных строковых значений:

• _blank – открыть документ в новом окне;

• _self – открыть документ в том же окне, где находится гиперссылка;

• _parent – открыть документ в окне родительского фрейма (аналогично _self, если фрейм, в котором находится гиперссылка, не имеет родителя);

• _top – заменить содержимое окна браузера содержимым открываемого документа, отменяя все созданные ранее фреймы.

Атрибут target поддерживается для всех HTML‑элементов, позволяющих создавать гиперссылки: A, LINK, AREA.

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

Документ с описанием набора фреймов будет иметь имя index.html. Его содержимое приведено в примере 8.2.

Пример 8.2. Файл с описанием набора фреймов

<HTML>

<HEAD>

<TITLE>Новый сайт с фреймами</TITLE>

</HEAD>

<FRAMESET cols = "130, *">

<FRAME src = "links.html" frameborder = 0>

<FRAMESET rows = "65, *">

<FRAME src = "title.html" scrolling = no marginwidth = 0

marginheight = 0 frameborder = 0>

<FRAME src = "start.html" name = textframe frameborder = 0>

</FRAMESET>

</FRAMESET>

</HTML>

В приведенном выше примере имя назначено только одному фрейму (правому нижнему). Именно в этом фрейме и будет отображаться содержимое документов.

В файле links.html находится документ с гиперссылками на файлы примеров (в него также добавлена ссылка на стартовую страницу). Предполагается, что файлы примеров расположены в папке Examples. Ниже приводится содержимое файла links.html (обратите внимание на задание значения атрибута target гиперссылок) (пример 8.3).

Пример 8.3. Файл с гиперссылками

<HTML>

<TITLE>Ссылки на примеры</TITLE>

<BODY bgcolor = yellow>

<P><A href = "start.html" target = textframe>Текст главы</A>

<HR>

<P><A href = "examples/7.1.html" target = textframe>Пример 7.1</A>

<P><A href = "examples/7.2.html" target = textframe>Пример 7.2</A>

<P><A href = "examples/7.3.html" target = textframe>Пример 7.3</A>

<P><A href = "examples/7.4.html" target = textframe>Пример 7.4</A>

<P><A href = "examples/7.5.html" target = textframe>Пример 7.5</A>

<P><A href = "examples/7.6.html" target = textframe>Пример 7.6</A>

<P><A href = "examples/7.7.html" target = textframe>Пример 7.7</A>

<P><A href = "examples/7.8.html" target = textframe>Пример 7.8</A>

<P><A href = "examples/7.9.html" target = textframe>Пример 7.9</A>

<P><A href = "examples/7.10.html" target = textframe>Пример 7.10</A>

</BODY>

</HTML>

В файле title.html помещен заголовок сайта (вместе с гипотетическим логотипом), который показывается в соответствующем фрейме (пример 8.4).

Пример 8.4. Файл для фрейма с заголовком сайта

<HTML>

<TITLE>Заголовок сайта</TITLE>

<BODY bgcolor = yellow>

<TABLE width = "100%">

<COL width = "*">

<COL width = 57>

<TR height = 57>

<TD align = center><H1>7. Таблицы</H1>

<TD><IMG src = "logo.jpg">

</TABLE>

</BODY>

<HTML>

Как можно увидеть из приведенного текста HTML‑документа (см. пример 8.4), для достижения приемлемого расположения рисунка‑логотипа пришлось прибегнуть к использованию таблицы.

В рассматриваемом примере сайта используется еще один файл – start.html. В этом файле помещена стартовая страница сайта. Содержимое этого файла может быть любым. При написании примера в файл start.html была помещена часть текста гл. 7. Из‑за экономии места книги содержимое этого файла не приводится.

После того как все файлы сайта созданы, можно полюбоваться результатом (рис. 8.2).

Рис. 8.2. Сайт, созданный с использованием фреймов

Целевой фрейм по умолчанию

Напоследок рассмотрим, как можно уменьшить объем текста HTML‑документа при использовании для многих гиперссылок одного и того же фрейма в качестве целевого. Еще раз взгляните на текст примера 8.3. Для каждой гиперссылки из этого примера задано одно и то же значение атрибута target. Чтобы избавиться от необходимости много раз задавать его, можно назначить целевой фрейм по умолчанию.

Для задания целевого фрейма по умолчанию используется HTML‑элемент BASE (одиночный тег <BASE>). Атрибуту target этого элемента присваивается имя фрейма, используемого по умолчанию. Если элемент BASE используется, то он должен быть помещен в заголовке (HEAD) HTML‑документа.

С учетом сказанного пример 8.3 можно переписать следующим образом (пример 8.5).

Пример 8.5. Использование целевого фрейма по умолчанию

<HTML>

<HEAD>

<TITLE>Ссылки на примеры</TITLE>

<BASE target = textframe>

</HEAD>

<BODY bgcolor = yellow>

<P><A href = "start.html">Текст главы</A>

<HR>

<P><A href = "examples/7.1.html">Пример 7.1</A>

<P><A href = "examples/7.2.html">Пример 7.2</A>

<P><A href = "examples/7.3.html">Пример 7.3</A>

<P><A href = "examples/7.4.html">Пример 7.4</A>

<P><A href = "examples/7.5.html">Пример 7.5</A>

<P><A href = "examples/7.6.html">Пример 7.6</A>

<P><A href = "examples/7.7.html">Пример 7.7</A>

<P><A href = "examples/7.8.html">Пример 7.8</A>

<P><A href = "examples/7.9.html">Пример 7.9</A>

<P><A href = "examples/7.10.html">Пример 7.10</A>

</BODY>

</HTML>

8.4. Элемент NOFRAMES

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

Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что‑то увидел, то следует использовать HTML‑элемент NOFRAMES. Этот элемент задается парными тегами <NOFRAMES> и </NOFRAMES>. Он помещается в один файл с описанием набора фреймов.

Между тегами элемента NOFRAMES помещается HTML‑текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь отключил в браузере поддержку фреймов). Если браузер в состоянии показать фреймы, то текст между тегами элемента NOFRAMES игнорируется. Текст между тегами <NOFRAMES> и </NOFRAMES> можно форматировать точно так же, как если бы он находился между тегами <BODY> и </BODY>.

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

Пример 8.6. Использование элемента NOFRAMES

<HTML>

<HEAD>

<TITLE>Новый сайт с фреймами</TITLE>

</HEAD>

<FRAMESET cols = "130, *">

<FRAME src = "links.html" frameborder = 0>

<FRAMESET rows = "65, *">

<FRAME src = "title.html" scrolling = no marginwidth = 0

marginheight = 0 frameborder = 0>

<FRAME src = "start.html" name = textframe frameborder = 0>

</FRAMESET>

</FRAMESET>

<NOFRAMES>

<STRONG>Внимание!</STRONG> Ваш браузер не поддерживает фреймы. Для открытия версии сайта, не использующей фреймы, жмите

<A href = "...">сюда</A>.

</NOFRAMES>

</HTML>

8.5. Плавающие фреймы

Кроме обычных фреймов, рассмотренных ранее, HTML допускает использование так называемых плавающих фреймов. Плавающие фреймы выглядят точно так же, как и внедренные HTML‑документы: показываются браузером в окне, расположенном прямо в тексте (рис. 8.3).

Рис. 8.3. Внешний вид плавающего фрейма

Для создания плавающих фреймов используется HTML‑элемент IFRAME (задается при помощи парных тегов <IFRAME> и </IFRAME>). Настройка плавающего фрейма осуществляется при помощи следующих атрибутов:

• src – URI HTML‑документа, отображаемого в окне фрейма;

• frameborder – режим отображения границы фрейма, может принимать значения 0 (не показывать границу) или 1 (показывать границу);

• scrolling – режим отображения полос прокрутки содержимого фрейма, может принимать значения no (не показывать полосы прокрутки), yes (показывать полосы прокрутки) или auto (используется по умолчанию, показывать полосы прокрутки, только если содержимое не помещается);

• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);

• marginheight – задает расстояние между границами и содержимым фрейма по вертикали;

• align – задает положение плавающего фрейма в тексте, может принимать значения left, right и center;

• width – задает ширину окна плавающего фрейма, значение может быть как абсолютным (в пикселах), так и процентным;

• height – задает высоту окна плавающего фрейма.

Текст между тегами <IFRAME> и </IFRAME> отображается браузером только в случае невозможности отобразить сам плавающий фрейм.

В качестве примера использования элемента IFRAME ниже приведен текст HTML‑документа, внешний вид которого показан на рис. 8.3 (пример 8.7).

Пример 8.7. Документ с плавающим фреймом

<TITLE>Пример страницы с плавающим фреймом</TITLE>

<BODY>

Плавающий фрейм выглядит следующим образом:

<IFRAME src = "start.html" align = center frameborder = 1 width = "100%" >

Ваш браузер не поддерживает "плавающие" фреймы. Для просмотра содержимого документа start.html нажмите

<A href = "start.html">сюда</A>

</IFRAME>

</BODY>

8.6. Замена фреймов внедренными HTML-документами

Если по каким‑то причинам у вас нет возможности использовать фреймы, но все же хочется сохранить интерфейс сайта в том же виде, каким он был бы при использовании фреймов, можно прибегнуть к использованию HTML‑элемента OBJECT. Взгляните на текст примера 8.8. Здесь для создания аналога плавающего фрейма, показанного на рис. 8.3, используется элемент OBJECT.

Пример 8.8. Замена плавающего фрейма элементом

<TITLE>Замена плавающего фрейма внедренным HTML-документом</TITLE>

<BODY>

Внедренный HTML-документ выглядит так:

<OBJECT type = "text/html" data = "start.html" align = center width = "100%" height = "200">

Ваш браузер не поддерживает внедрение объектов. Для просмотра содержимого документа start.html нажмите

<A href = "start.html">сюда</A>

</OBJECT>

</BODY>

Результат внедрения в HTML‑документ еще одного HTML‑документа приведен на рис. 8.4. Как видите, внедрение объекта по виду практически не отличается от добавления плавающего фрейма.

Рис. 8.4. Внедренный документ в роли плавающего фрейма

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

Глава 9 Формы

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

Возможно, вам не раз приходилось заполнять анкеты на сайтах, например при регистрации ящика электронной почты. Если приходилось, то вспомните, что данные вы вводили прямо в окне браузера. После ввода данных нажимали кнопку типа Отправить. Далее браузер упаковывал и отсылал введенные вами данные на сервер, где их обрабатывало специализированное приложение (CGI‑приложение). Так вот, формы нужны как раз для того, чтобы можно было организовать ввод данных от пользователя. HTML‑документы с формами отличаются от обычных документов только наличием различных элементов управления: полей ввода текста, флажков, кнопок и др. (см. любое окно Windows или рис. 9.1).

Рис. 9.1. Пример HTML-документа с формой

Выше было сказано, что данные, введенные пользователем в форму, обрабатываются CGI‑приложениями, работающими на сервере. Подробное рассмотрение этих приложений выходит за рамки книги. Здесь же стоит сказать, что CGI‑приложение – это обычное приложение (программа), запущенное на сервере и способное получать данные, отправленные с использованием CGI (Common Gateway Interface). Отсюда, собственно, и название этого класса приложений. Вообще, такое приложение может быть реализовано как угодно: на Java, сценарием PHP, JSP или ASP и т. д. Общее, что такие приложения выполняют, – прием запроса (набора значений полей формы) с некоторой служебной информацией и передача в ответ HTML‑документа, являющегося результатом обработки принятого запроса.

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

9.1. Создание формы

Для вставки формы в HTML‑документ используется элемент FORM. Он задается парными тегами <FORM> и </FORM>. Между этими тегами помещаются описания элементов управления формы. Здесь также может быть помещен и другой текст с использованием разметки средствами HTML. Этот текст обычно используется для пояснения, какие данные и в какой элемент управления нужно вводить. При создании формы используются следующие атрибуты элемента FORM:

• action – обязательный для каждой формы параметр, URI программы‑обработчика данных формы;

• method – задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;

• enctype – задает тип данных формы, если используется метод отправки post; по умолчанию имеет значение application/x-www-form-urlencoded; при необходимости передачи файлов используется значение multipart/form-data;

• accept-charset – используется при передаче файлов, позволяет указать, какие кодировки используются для каждого из файлов (список строковых значений – названий кодировок), по умолчанию используется значение UNKNOWN (приложение на сервере должно само определять кодировки);

• accept – описывает типы файлов (MIME‑типы), передаваемые серверу; если этот параметр не использовать, то серверное приложение должно уметь само определять типы передаваемых ему файлов.

Пример описания формы:

<FORM action = «somesite.com/cgi-bin/proc.exe» method = «post»>

<!– Описания элементов управления и текста формы –>

...

</FORM>

Перед тем как приступить к рассмотрению элементов управления, которые можно поместить на форму, приведу несколько слов о методах отправки данных форм: для чего они нужны и чем отличаются. Итак, метод get часто используется для отправки небольших объемов данных, для которых достаточно набора символов кодировки ASCII. При этом данные формы присоединяются к строке URI, заданной в action формы. Для отделения данных от URI используется символ ?. Точно таким же образом вы передавали данные почтовой программе при рассмотрении гиперссылок в гл. 5.

В отличие от get, метод post позволяет передавать CGI‑приложению практически любые данные. При использовании метода post браузер отправляет приложению не строку URI с присоединенными данными, а по специальным правилам упаковывает данные формы и только после этого отправляет их CGI‑приложению. Однако для того, чтобы с использованием метода post можно было пересылать бинарные или текстовые данные, для которых недостаточно символов кодировки ASCII, нужно указывать значения атрибута enctype элемента FORM равным multipart/form-data.

9.2. Элементы управления формы

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

Стандартные элементы управления

Стандартными являются все элементы управления, которые можно поместить на HTML‑форму. Просто нужно как‑то объединить и назвать элементы управления, которые используются чаще всего: однострочное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки (как пользовательские, так и выполняющие стандартные действия), поля имен файлов. Все упомянутые элементы управления отображаются браузером Internet Explorer так, как показано на рис. 9.2.

Рис. 9.2. Стандартные элементы управления

Для обозначения всех этих элементов управления используется один HTML‑элемент – INPUT. Элемент задается одиночным тегом <INPUT> и имеет следующие атрибуты:

• type – принимает строку, задающую тип элемента управления (по умолчанию используется строка text, и создается, соответственно, поле для ввода текста), возможные значения и специфика работы соответствующих элементов управления рассмотрены далее;

• name – используется для задания имени элементу управления (строка, которая, помимо идентификации элемента управления, добавляется в данные, отсылаемые серверу);

• value – начальное значение для полей ввода текста и полей для указания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;

• checked – булев атрибут, если он установлен, то флажок или переключатель считается (и отображается браузером) установленным (см. рис. 9.1);

• disabled – булев атрибут, установка которого не позволяет пользователю работать с элементом управления;

• readonly – булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);

• size – задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);

• maxlenth – задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);

• src – для элемента управления image задает расположение используемого изображения;

• title – описание элемента управления (может отображаться браузерами как всплывающая подсказка);

• align – задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML‑элемента, поддерживающего этот атрибут;

• tabindex – номер элемента управления при навигации при помощи табуляции;

• accesskey – горячая клавиша для элемента управления (для перехода к элементу управления нужно нажать Alt и заданную клавишу).

После того как дано начальное описание элемента INPUT, можно проанализировать текст HTML‑документа с формой, показанной на рис. 9.2 (пример 9.1).

Пример 9.1. Пример использования HTML-элемента INPUT

<TITLE>Типы элементов управления INPUT</TITLE>

<FORM action="..." method="post" enctype = "multipart/form-data">

Текстовое поле <INPUT type="text" name="type_text"><BR>

Поле для ввода пароля: <INPUT type="password" name="type_password"

alt = "asfdsvdf"><BR>

Флажок: <INPUT type="checkbox" name="type_check" value = "chk1"

checked><BR>

Два переключателя: <INPUT type="radio" name="type_radio" value="1"

checked>

и <INPUT type="radio" name="type_radio" value="2"><BR>

Поле с именами файлов: <INPUT type = "file" name = "type_file"><BR>

<INPUT type = "submit" value = "Отправка данных"><BR>

Щелчок на этом изображении также приведет к отправке данных:

<INPUT type = "image" src = "submit.gif""><BR>

<INPUT type = "reset" value = "Сброс значений полей"><BR>

<INPUT type = "button" value = "Пользовательская кнопка">

</FORM>

В приведенном примере использованы все возможные значения атрибута type, кроме значения hidden. Поскольку использование каждого из значений атрибута type налагает различные ограничения на использование других атрибутов HTML‑элемента INPUT, то целесообразно рассмотреть влияние каждого значения подробно. Для краткости особенности использования каждого значения сведены в таблицу (табл. 9.1).

Таблица 9.1. Значения атрибута type

Атрибут size упоминался только для элементов управления, имеющих в своем составе текстовые поля. Это потому, что хотя для остальных элементов управления этот атрибут и должен принимать значения в пикселах и задавать соответствующую ширину этих элементов управления, но трудно найти браузер, который бы это поддерживал.

Многострочное текстовое поле

Теперь рассмотрим, как вставить в форму более продвинутый элемент управления для редактирования текста – многострочное текстовое поле. Этот элемент управления обозначается HTML‑элементом TEXTAREA и задается парными тегами <TEXTAREA> и </TEXTAREA>.

Главным отличием этого элемента управления от обычного текстового поля, кроме возможности ввода текста, состоящего из большого количества строк, является то, что начальное значение не задается атрибутом value, а записывается между тегами <TEXTAREA> и </TEXTAREA>.

При отображении в текстовом поле форматирование текста сохраняется точно так же, как при использовании HTML‑элемента PRE.

В целом для настройки элемента TEXTAREA используются те же атрибуты, что и для настройки элемента INPUT со значением атрибута type, равным text или password. Однако размер элемента управления задается не атрибутом size, а с помощью следующих атрибутов:

• rows – задает количество строк, которые отображаются без необходимости вертикальной прокрутки;

• cols – задает максимальное количество символов в строке текстового поля, отображаемое без переноса.

Многострочное текстовое поле выглядит так, как показано на рис. 9.3 (в браузере Internet Explorer).

Рис. 9.3. Многострочное текстовое поле

Для создания приведенного на рисунке текстового поля использовался следующий фрагмент кода (пример 9.2).

Пример 9.2. Создание многострочного текстового поля

<TEXTAREA name = «txtText» rows = 10 cols = 40>

Первый перевод строки не учитывается

Все последующие переводы строки учитываются

Учитываются также отступы от начала строки

Можно использовать зарезервированные символы HTML, типа <>& и прочие

</TEXTAREA>

Снова кнопки

В HTML предусмотрен отдельный элемент BUTTON на случай, если разработчику формы не хватит возможностей обычных командных кнопок. При помощи этого HTML‑элемента создаются кнопки, на которые можно поместить практически все, за исключением разве что других форм, фреймов и некоторых других особых HTML‑элементов. Такая кнопка выглядит в браузере Internet Explorer так, как показано на рис. 9.4.

Рис. 9.4. Кнопка с расширенными возможностями

Новый вид кнопок используется аналогично кнопкам, создаваемым HTML‑элементом INPUT со значением атрибута type, равным button. Новые кнопки отличаются от своего аналога, прежде всего, созданием: для задания HTML‑элемента BUTTON используются парные теги <BUTTON> и </BUTTON>, между которыми помещается форматированный текст. Так, за создание кнопки, показанной на рис. 9.4, отвечает следующий HTML‑код (пример 9.3).

Пример 9.3. Создание кнопки BUTTON

<BUTTON name = «cmbSomeButtton» type = «button»>

<BR>

На этом виде кнопок может быть помещен любой<BR>

HTML-текст c использованием <STRONG>разметки</STRONG><BR>

Даже таблицы, не говоря уже об изображениях:

<TABLE border = 1>

<CAPTION>Таблица</CAPTION>

<TR><TD>1<TD>2

<TR><TD>3<TD>4

</TABLE>

<BR>

</BUTTON>

Внимание!

В тексте между тегами <BUTTON> и </BUTTON> правильного HTML-документа не должны задаваться другие HTML-элементы, обладающие возможностями гиперссылок. В лучшем случае, если браузер это предусматривает, то такие HTML-элементы будут просто игнорироваться. В худшем же случае, если браузер не переносит HTML-документ с ошибками, то его поведение вообще сложно предугадать.

Специфичным в настройке кнопки, создаваемой HTML‑элементом BUTTON, является использование атрибута type для задания типа кнопки: submit (отправка формы при нажатии), reset (сброс значений элементов управления формы при нажатии) или button (пользовательская кнопка, связываемая со сценарием). Кроме того, доступны атрибуты name, title, disabled, tabindex и accesskey, использование которых полностью аналогично использованию атрибутов элемента INPUT.

Следует особо рассмотреть атрибут value. Его использование только для подписи кнопки становится бессмысленным. Однако в спецификации HTML 4.01 говорится, что предполагается отправка значения этого атрибута вместе с прочими данными формы (видимо при нажатии соответствующей кнопки, имеющей значение атрибута type, равное submit, тогда задание значения атрибута value является весьма полезным для определения на сервере того, какую именно кнопку нажал пользователь).

Меню

При создании форм можно использовать еще один достаточно удобный элемент управления, позволяющий выбрать одну или несколько альтернатив из списка – меню (или список параметров). Этот элемент управления добавляется на форму использованием трех HTML‑элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них.

Начнем с HTML‑элемента SELECT – он является контейнером пунктов меню, задается при помощи парных тегов <SELECT> и </SELECT> и поддерживает следующие атрибуты:

• name – имя меню, которое также используется как название параметра при отправке формы;

• size – задает количество строк, одновременно видимых пользователем;

• multiple – булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно;

• disabled – булев атрибут, деактивирует меню;

• title – текст подсказки для меню;

• tabindex – номер при перемещении между элементами управления при помощи табуляции.

Элемент управления меню может представляться различными браузерами по‑разному: в виде списка, в виде раскрывающегося списка, в виде раскрывающегося меню, наконец. Рассмотрим представление меню браузером Internet Explorer. В зависимости от значения атрибута size меню может выглядеть так, как показано на рис. 9.5.

Рис. 9.5. Внешний вид меню

Если использовать атрибут multiple, то Internet Explorer покажет меню простым списком даже при значении size равном 1: в раскрывающемся списке несколько пунктов сразу выбрать нельзя.

Ниже приведен фрагмент текста HTML‑документа, создающий два меню, показанных на рис. 9.5 (согласитесь, что задание меню сходно с заданием списков) (пример 9.4).

Пример 9.4. Два простых меню

size = 1

<SELECT name = "menu1">

<OPTION value = "1.2">Пункт 1

<OPTION value = "1.2">Пункт 2

<OPTION value = "1.3">Пункт 3

<OPTION value = "1.4">Пункт 4

<OPTION value = "1.5">Пункт 5

<OPTION value = "1.6">Пункт 6

</SELECT>

size = 4

<SELECT name = "menu2" size = "4">

<OPTION value = "2.1">Пункт 1

<OPTION value = "2.2">Пункт 2

<OPTION value = "2.3">Пункт 3

<OPTION value = "2.4">Пункт 4

<OPTION value = "2.5">Пункт 5

<OPTION value = "2.6">Пункт 6

</SELECT>

В тексте примера вы видите также упомянутый ранее HTML‑элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами <OPTION> и </OPTION> (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты:

• value – текст, который будет отправлен с формой при выборе пункта меню;

• selected – булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одно меню, если не установлен атрибут multiple);

• disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут).

Теперь осталось рассмотреть, для чего нужен третий HTML‑элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML‑элементов OPTION, определяющих пункты меню одной группы, в парные теги <OPTGROUP> и </OPTGROUP>. Параметры группы можно настроить с использованием следующих атрибутов HTML‑элемента OPTGROUP:

• label – строка с подписью для группы;

• disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION).

Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5).

Пример 9.5. Группировка пунктов меню

size = 1

<SELECT name = "menu1">

<OPTGROUP label = "Группа1">

<OPTION value = "1.1.1">Пункт 1.1

<OPTION value = "1.1.2">Пункт 1.2

<OPTION value = "1.1.3">Пункт 1.3

</OPTGROUP>

<OPTGROUP label = "Группа2">

<OPTION value = "1.2.1">Пункт 2.1

<OPTION value = "1.2.2">Пункт 2.2

<OPTION value = "1.2.3">Пункт 2.3

</OPTGROUP>

</SELECT>

size = 4

<SELECT name = "menu2" size = "4">

<OPTGROUP label = "Группа1">

<OPTION value = "2.1.1">Пункт 1.1

<OPTION value = "2.1.2">Пункт 1.2

<OPTION value = "2.1.3">Пункт 1.3

</OPTGROUP>

<OPTGROUP label = "Группа2">

<OPTION value = "2.2.1">Пункт 2.1

<OPTION value = "2.2.2">Пункт 2.2

<OPTION value = "2.2.3">Пункт 2.3

</OPTGROUP>

</SELECT>

Меню, описанные в примере 9.5, выглядят так, как показано на рис. 9.6.

Рис. 9.6. Внешний вид меню с группированными пунктами

Подписи элементов управления

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

Существует еще один способ задания подписей к элементам управления – использование HTML‑элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML‑документа.

Итак, рассмотрим, каким образом создаются подписи с использованием элемента LABEL: между парными тегами <LABEL> и </LABEL> помещается текст подписи, а атрибуту for элемента LABEL присваивается значение, идентифицирующее нужный элемент управления.

При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом:

<LABEL for = «pass»>Введите пароль:</LABEL>

<INPUT type = "password" name = "user_pass" id = "pass">

В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так:

<LABEL>

Введите пароль: <INPUT type = "password" name = "user_pass">

</LABEL>

Текст может находиться до или после определения элемента управления. В теле HTML‑элемента LABEL в этом случае должно быть только одно определение элемента управления.

9.3. Группировка элементов управления

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

Рамка создается при помощи HTML‑элемента FIELDSET. Между парными тегами <FIELDSET> и </FIELDSET> помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.

Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML‑элемент задается при помощи парных тегов <LEGEND> и </LEGEND>, между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по‑разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают.

В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6).

Пример 9.6. Группировка элементов управления

<HTML>

<HEAD>

<TITLE>Пример страницы с формой</TITLE>

</HEAD>

<BODY>

<FORM action="somesite.com/cgi-bin/proc.exe">

<H1>Регистрация почтового ящика</H1>

<P>

<FIELDSET>

<LEGEND>Персональная информация</LEGEND>

Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1"><BR>

Имя: <INPUT name="personal_firstname" type="text" tabindex="2"><BR>

</FIELDSET>

<FIELDSET>

<LEGEND>Информация о почтовом ящике</LEGEND>

Адрес: <INPUT name="mail_address" tabindex="3"> <BR>

Пароль: <INPUT name="mail_password" type = "password" tabindex="4">

<BR>

Подтверждение пароля: <INPUT name="mail_password" type = "password"

tabindex="5">

</FIELDSET>

<FIELDSET>

<LEGEND>Дополнительные сведения</LEGEND>

Желаете получать рекламные рассылки?

<INPUT name="add_goods" type="radio" value="Yes" tabindex="6">Да

<INPUT name="add_goods" type="radio" checked value="No"

tabindex="7">Нет

<BR>

Желаете получать прогноз погоды на каждый день?

<INPUT name="add_weather" type="radio" value="Yes" tabindex="8">Да

<INPUT name="add_weather" type="radio" checked value="No"

tabindex="9">Нет

</FIELDSET>

<P>

<INPUT type = "submit" value = "Регистрация" tabindex = "10">

<INPUT type = "reset" value = "Сброс" tabindex = "11">

</FORM>

</BODY>

</HTML>

Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI‑приложения, способного обрабатывать форму.

Глава 10 Введение в CSS

Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб‑сайтов, – каскадным таблицам стилей (CSS, Cascade Style Sheets).

10.1. Возможности CSS

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

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

По‑настоящему убедиться в полезности CSS можно тогда, когда приходит время менять дизайн всего сайта. Представьте себе, что есть сайт, представляющий собой достаточно большое учебное пособие, например по программированию на С++, содержащее 50 страниц с 200 примерами (листингами). По какой‑то причине нужно поменять цвет шрифта этих самых листингов: ничего не поделаешь, придется вносить изменения в каждый тег <PRE> (200 штук). При использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей. И это лишь один из множества возможных примеров.

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

Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.

10.2. Внешние и встроенные таблицы стилей

Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML‑элемента LINK. При этом используются следующие атрибуты этого элемента:

• href – задает URI файла с подключаемой таблицей стилей;

• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;

• type – при подключении CSS задается значение text/css;

• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).

HTML‑элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:

<HEAD>

<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">

<LINK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css">

<HEAD>

Встроенные таблицы стилей задаются внутри HTML‑элемента STYLE (между парными тегами <STYLE> и </STYLE>), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML‑элемента LINK.

Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:

@import url(«URI внешней таблицы стилей»);

Пример подключения внешней CSS может выглядеть так:

...

P {font-size: 16pt}

@import url("external_stylesheer.css"); /*подключение таблицы стилей*/

...

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

10.3. Записи таблицы стилей

Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:

селектор {свойство: значение; свойство: значение; ...}

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

То, что обозначено в приведенном примере как селектор, может быть названием HTML‑элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.

Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML‑элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.

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

селектор, селектор, ... {свойство: значение; свойство: значение; ...}

Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2.

Правила отображения HTML-элементов

Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML‑элементов. Для этого нужно указать в качестве селектора название HTML‑элемента (или нескольких HTML‑элементов), например:

H1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML‑элемента P будет отображаться курсивом.

Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS‑файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML‑документа так, как это показано в примере 10.1.

Пример 10.1. Стили для HTML-элементов

<HTML>

<HEAD>

<TITLE>Использование стилей HTML-элементов</TITLE>

<STYLE type = "text/css">

H1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

</STYLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<P>Текст абзаца

<H2>Заголовок второго уровня</H2>

<P>Текст абзаца

<H3>Заголовок третьего уровня</H3>

<P>Текст абзаца

</BODY>

</HTML>

На рис. 10.1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст документа с рассмотренной таблицей стилей.

Рис. 10.1. Задание стилей для HTML-элементов

Использование стилевых классов

Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:

H1.arial {color: red; font-family: arial}

H2.newroman {color: blue; font-family: newroman}

P.italic {font-style: italic}

.bold {font-weight: bold}

Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML‑элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.

Назначение стилевого класса HTML‑элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.

Рассмотрим пример использования стилевых классов (пример 10.2).

Пример 10.2. Использование стилевых классов

<HTML>

<HEAD>

<TITLE>Использование стилевых классов</TITLE>

<!– Определение таблицы стилей–>

<STYLE type = "text/css">

H1.arial {color: red; font-family: arial}

H2.newroman {color: blue; font-family: newroman}

P.italic {font-style: italic}

.bold {font-weight: bold}

</STYLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<P>Текст абзаца

<H1 class = "arial">Измененный заголовок первого уровня</H1>

<H2>Заголовок второго уровня</H2>

<P class = "italic">Курсивный текст абзаца

<H2 class = "newroman">Измененный заголовок второго уровня</H2>

<P class = "bold">Полужирный текст абзаца

</BODY>

</HTML>

Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.

Рис. 10.2. Использование стилевых классов

Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML‑документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS‑свойства одинаковых HTML‑элементов, как это сделано в примере 10.1.

Задание отображения единичных элементов документа

Стили можно определять не только в таблице стилей. При помощи атрибута style можно создавать так называемые «инлайн‑стили». Атрибут style поддерживается для тех же HTML‑элементов, что и атрибут class. Для создания «инлайн‑стиля» атрибуту style присваивается значение, которое обычно записывается в скобках {} в строке таблицы стилей (то есть объявление правила). Ниже приведен переделанный пример 10.2, в котором как раз и реализовано определение стилей в атрибуте style (обратите внимание, что при этом отпала необходимость определения самой таблицы стилей) (пример 10.3).

Пример 10.3. Использование атрибута style

<HTML>

<BODY>

<H1>Заголовок первого уровня</H1>

<P>Текст абзаца

<H1 style = "color: red; font-family: arial">Измененный заголовок первого уровня</H1>

<H2>Заголовок второго уровня</H2>

<P style = "font-style: italic">Курсивный текст абзаца

<H2 style = "color: blue; font-family: newroman">Измененный заголовок второго уровня</H2>

<P style = "font-weight: bold">Полужирный текст абзаца

</BODY>

</HTML>

Рассмотрим еще один способ применения правил отображения, задаваемых с помощью стилевых таблиц. В стилевой таблице можно задать CSS‑свойства HTML‑элемента, имеющего определенное значение атрибута id (атрибут рассматривался в гл. 6). Как это делается, лучше сразу рассмотреть на примере 10.4.

Пример 10.4. Использование атрибута id в CSS

<HTML>

<HEAD>

<TITLE>Использование id в CSS</TITLE>

<!– Определение таблицы стилей–>

<STYLE type = "text/css">

#left_pointer {width: 60; height: 120}

#right_pointer {width: 120; height: 60}

</STYLE>

</HEAD>

<BODY>

<P>Рисунки без применения стилей

<IMG src = "left.gif">

<IMG src = "right.gif">

<P>А к этим рисунками применен стиль (изменение размера)

<IMG src = "left.gif" id = "left_pointer">

<IMG src = "right.gif" id = "right_pointer">

</BODY>

</HTML>

В данном случае при помощи CSS задаются параметры отображения двух рисунков. Как это реализуется браузером, можно увидеть на рис. 10.3.

Рис. 10.3. Задание стилей отдельных элементов

Задать параметры отображения только одного элемента рассмотренным способом можно потому, что значение атрибута id, если оно используется, обычно делается уникальным.

Контекстные селекторы

Помимо селекторов, связанных с определенными HTML‑элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого‑то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).

Пример 10.5. Применение сложных селекторов

<HTML>

<HEAD>

<TITLE>Сложные селекторы</TITLE>

<STYLE type = "text/css">

OL.ordinary_list LI {}

OL.italic_list LI {font-style: italic}

OL.colored_list LI {color: green; background-color: yellow}

</STYLE>

</HEAD>

<BODY>

<P>Список, оформленный обычным шрифтом

<OL class = "ordinary_list">

<LI>Элемент списка

<LI>Элемент списка

</OL>

<P>Список, оформленным курсивным шрифтом

<OL class = "italic_list">

<LI>Элемент списка

<LI>Элемент списка

</OL>

<P>Раскрашенный список

<OL class = "colored_list">

<LI>Элемент списка

<LI>Элемент списка

</OL>

</BODY>

</HTML>

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

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

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

P STRONG {color: red} /*применяется к элементам STRONG внутри P*/

.par .colored {color: red} /*применяется к элементам со стилевым классом

"colored", находящимся внутри элементов со стилевым классом "par"*/

Комментарии в таблице стилей

Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:

/* Это однострочный комментарий */

/* А здесь записан

многострочный

комментарий */

10.4. Порядок применения стилей

В самом начале главы говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим, в чем же проявляется каскадирование и как его можно использовать. Каскадирование проявляется при наличии в одной или нескольких используемых документом таблицах стилей задания разных значений одного и того же свойства определенного HTML‑элемента, стилевого класса или элемента с заданным значением id. Например, пусть в таблице есть следующие записи:

...

H3 {text-align: right; color: black}

...

H3 {text-align: center}

Какое из значений свойства text-align нужно использовать? Каскадирование предполагает, что нужно использовать последнее значение, которое присвоено этому свойству. Это и должен делать браузер.

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

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

...

H3 {text-align: right ! important; color: black}

...

H3 {text-align: center}

Теперь для всех HTML‑элементов H3 будет использоваться выравнивание по правому краю, несмотря на то что последним было определение выравнивания по центру.

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

Рассмотрим пример:

...

H3 {text-align: right ! important; color: black}

...

H3 {text-align: center ! important}

...

H3 {text-align: left}=

В этом случае для свойства text-align принимается последнее значение с модификатором important (значения без important вообще не рассматриваются). В этом случае также осуществляется каскадирование, но не для всех значений свойства, а только для значений с модификатором important.

Следует также отметить, что стили, заданные для HTML‑элементов, стилевые классы и встроенные стили (заданные в атрибуте style) каскадируются следующим образом (последующие элементы списка переопределяют предыдущие):

• стили, заданные для HTML‑элементов;

• стилевые классы;

• встроенные стили.

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

...

<STYLE type = "text/css">

P {font-weight: bold}

.p {color: blue}

</STYLE>

</HEAD>

<BODY>

<P class = "p" style = "text-decoration: underline">Текст абзаца

...

Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).

Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML‑элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):

• стиль элемента BODY имеет настройки стиля по умолчанию, кроме свойства font-size, значение которого явно задается в таблице стилей;

• стиль элемента P наследует настройки элемента BODY и переопределяет цвет шрифта;

• стиль элемента P класса italic добавляет к шрифту курсивное начертание;

• «инлайн‑стиль» элемента P класса italic наследует настройки последнего и добавляет полужирное начертание шрифта.

Пример 10.6. Наследование стилей

<HTML>

<HEAD>

<TITLE>Наследование свойств стиля</TITLE>

<STYLE type = "text/css">

BODY {font-size: 18}

P {color: blue}

P.italic {font-style: italic}

</STYLE>

</HEAD>

<BODY>

Текст 18-м шрифтом

<P> синего цвета

<P class = "italic"> курсивного начертания

<P class = "italic" style = "{font-weight: bold}"> полужирный

</BODY>

</HTML>

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

Рис. 10.4. Наследование стилей

Автоматичесое наследование стилей применяется не для всех свойств CSS. Для свойств, не поддерживающих наследование (например, для свойств видимости элемента, рассмотренных в следующей главе), часто предусматривается специальное значение inherit, позволяющее явно указать, что значения свойства нужно унаследовать у родительского элемента.

В общем, каскадирование и наследование стилей являются мощным средством для формирования единого дизайна HTML‑документов, которое к тому же уменьшает объем таблиц стилей.

10.5. Единицы измерения CSS

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

Линейный размер и положение

Обозначения, названия и расшифровки единиц измерения приведены в табл. 10.1. Единица измерения указывается после числа с количеством единиц (например, 10cm, 10%).

Таблица 10.1. Единицы указания размера и положения

Цвета

Задавать цвет в CSS можно двумя способами. Во‑первых, можно использовать предопределенные названия цветов: black, white, red и т. д. (см. табл. 2.3). Второй способ состоит в указании RGB‑кода цвета. В этом случае задается значение, определяющее цвет, которое состоит из трех компонентов: уровней интенсивности красного, зеленого и синего цветов. Существуют четыре модификации этого способа: задание цвета с использованием десятичных значений, использование процентных значений насыщенности цветов, задание цвета с использованием полного или сокращенного набора шестнадцатеричных значений. Ниже приведены примеры, иллюстрирующие использование указанных модификаций второго способа для задания одного и того же цвета.

color: rgb(255, 255, 0)

color: rgb(100%, 100%, 0%)

color: #FFFF00

color: #FF0

В данном случае все четыре строки задают желтый цвет. Для красного и зеленого каналов здесь заданы максимальные значения интенсивности (255, 100%, FF и F).

10.6. Скрытие таблиц стилей

В заключение рассмотрим небольшой прием, который позволяет документам, содержащим встроенные таблицы стилей, корректно отображаться старыми браузерами, вообще не поддерживающими таблицы стилей. Чтобы такой браузер точно не показал таблицу стилей как текст документа, содержимое CSS заключается в комментарий HTML. Например:

<STYLE type = «text/css»>

<!–

H1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

–>

</STYLE>

Для браузеров, поддерживающих CSS, добавление комментария ничего не изменит. Такой же способ применяется для скрытия сценариев, причем для сценариев это более актуально, так как они помещаются в теле документа. Об этом будет рассказано в гл. 13, как раз и посвященной созданию динамических страниц с использованием сценариев на JavaScript.

Глава 11 Использование таблиц стилей

В предыдущей главе мы рассмотрели основы каскадных таблиц стилей. Теперь же обратимся к тому, как использовать наиболее востребованные возможности CSS, коими является управление шрифтом и видом текста элементов страницы. Есть много аргументов в пользу таблиц стилей. Так, задание настроек шрифта в таблице стилей позволяет избавиться от элементов FONT, B, I и прочих украшений в теле документа, то есть хотя бы частично отделить оформление от содержимого (контента) страницы. К тому же при написании таблиц стилей доступны гораздо большие возможности, чем при использовании чистого HTML. И это относится не только к шрифтам, в чем вы скоро сможете убедиться.

Часть из рассмотренных далее свойств CSS мы уже использовали в примерах гл. 10, не объясняя особенностей. Теперь же использованные в примерах гл. 10 и другие свойства будут рассмотрены подробно.

11.1. Шрифт

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

Вообще, свойство font-family применяется двояко. Во‑первых, можно задать семейство шрифтов, то есть одно из предопределенных значений: serif, sans-serif, cursive, fantasy, monospace. Различные семейства шрифтов имеют особые характерные для них начертания. И если конкретный шрифт для дизайна не слишком важен, то можно заданием семейства и ограничиться. В таком случае браузер сам подберет наиболее подходящий шрифт. Пример задания семейства шрифта может выглядеть так:

P.text {font-family: serif}

Во‑вторых, можно задать название конкретного шрифта, например: Arial, «Courier New» или «Times New Roman». Заметьте, что если название шрифта состоит из нескольких слов, то оно берется в кавычки. Например:

P.text {font-family: «Times New Roman»}

Кроме того, при использовании font-family можно подстраховаться на случай, если на компьютере клиента не будет нужного шрифта. Для этого свойству font-family задается несколько значений, разделенных запятой, например:

P.text {font-family: «Times New Roman», cursive, fantasy}

Варианты, расположенные левее в списке значений, считаются более предпочтительными. Это значит, что если на компьютере пользователя не окажется шрифта Times New Roman, то будет использоваться подходящий шрифт семейства cursive. Если же и шрифты семейства cursive будут недоступны, то браузер попытается найти подходящий шрифт из семейства fantasy. Ну и, наконец, в самом худшем случае, когда и шрифт семейства fantasy подобрать не удастся, будет использован шрифт по умолчанию.

Кроме указания собственно шрифта, средствами CSS можно задать размер шрифта. Для этого пригодится свойство font-size. Причем размер шрифта можно задавать в абсолютных и относительных единицах измерения (см. разд. 10.5). Кроме того, для задания размера шрифта можно использовать значения, аналогичные значениям атрибута size HTML‑элемента FONT: xx-small, x-small, small, medium, large, x-large, xx-large. Можно также использовать значения larger и smaller для увеличения и уменьшения, соответственно, размера шрифта (в терминах HTML) на одну единицу по сравнению с первоначальным шрифтом.

Ниже приведено несколько примеров использования свойства font-size:

P.size1 {font-size: 16pt} /* 16 пунктов */

P.size2 {font-size: 8mm} /* 8 миллиметров */

P.size3 {font-size: 150%} /* увеличение в 1,5 раза */

P.size4 {font-size: xx-large} /* самый большой шрифт для "чистого" HTML */

P.size5 {font-size: smaller} /* уменьшение на 1 единицу */

Для изменения начертания шрифта в CSS используется свойство font-style, принимающее одно из следующих значений: normal (используется по умолчанию, задает нормальное, некурсивное начертание), italic (курсивное начертание) и oblique (наклонное начертание).

Кроме того, еще одно свойство используется для указания жирности шрифта. Это свойство font-wieght. Ему можно присваивать одно из значений, непосредственно задающих жирность шрифта: 100, 200, 300, 400, 500, 600, 700, 800 и 900. Наряду с числовыми значениями жирности существуют два предопределенных литерала normal и bold, соответствующие жирности 400 и 700. Кроме того, в качестве значения свойства font-weight можно использовать литералы bolder или lighter, увеличивающие и уменьшающие жирность шрифта на 100 единиц по сравнению с первоначальной.

И наконец, последнее свойство шрифта, которое имеет имя fontvariant, используется для указания, как должны выглядеть строчные буквы текста: как обычные строчные или как уменьшенные прописные (см. рис. 11.1). В первом случае используется значение normal (это значение по умолчанию), а во втором – small-caps.

Рис. 11.1. Свойство font-variant

11.2. Стиль текста

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

Как раз с украшений текста мы и начнем. Чтобы зачеркнуть, подчеркнуть или «надчеркнуть» текст, используется свойство text-decoration. Оно может принимать следующие значения:

• underline – подчеркивает текст (значение по умолчанию для HTML‑элементов A, INS, U);

• overline – выводит линию поверх текста;

• line-through – перечеркивает текст (значение по умолчанию для HTML‑элементов DEL, S, STRIKE);

• none – убирает все украшения текста (значение для большинства HTML‑элементов).

С помощью свойства text-decoration, кстати, можно с легкостью изменить внешний вид гиперссылок, убрав в них подчеркивание текста (если это, конечно, нужно). Кроме того, с помощью рассмотренных далее в этой главе псевдоклассов гиперссылок можно, например, подчеркивать текст гиперссылки только при наведении на нее указателя мыши. Но оставим гиперссылки в покое и обратимся к маленькому примеру использования свойства text-decoration:

P.under {text-decoration: underline}

P.strike {text-decoration: line-through}

P.crazy {text-decoration: underline overline}

Обратите внимание на последнее приведенное здесь правило CSS. Если браузер это поддерживает, то применение нескольких значений одновременно дает очень любопытный, правда вряд ли особо полезный результат. В данном случае получится подчеркнутый и «надчеркнутый» одновременно фрагмент текста.

Следующим рассмотрим свойство text-align, при помощи которого задается горизонтальное выравнивание текста. В качестве значения этого свойства может использоваться одно из следующих значений:

• left – выравнивание по левому краю;

• right – выравнивание по правому краю;

• center – выравнивание по центру;

• justify – выравнивание одновременно по правому и левому краям.

Использовать text-align крайне просто, а потому сразу переключим свое внимание на следующее свойство, позволяющее задать отступ первой строки текста или так называемый отступ красной строки. Это свойство именуется test-indent. Оно может принимать или абсолютное, или относительное значение (в единицах измерения CSS), или же процент от ширины родительского HTML‑элемента, например:

...

<TD style = "text-indent: 10%">

Текст с отступом красной строки 10% от ширины ячейки таблицы

</TD>

...

Изменить расстояние между строками текста подобно тому, как это делается в текстовом редакторе (при смене одинарного интервала полуторным, например), можно при помощи свойства line-height. Хотя если говорить более точно, то свойство line-height задает не расстояние между строками, а высоту самих строк. По умолчанию это свойство имеет значение normal. Кроме того, значениями свойства line-height могут быть абсолютные или относительные значения в единицах измерения размеров CSS и процентные значения, определяющие процент от высоты строк, унаследованной от родительского элемента страницы. Ниже приведено несколько примеров использования свойства line-height:

P.compact {line-height: 80%} /*компактный абзац*/

P.lagre {line-height: 150%} /*абзац с полуторным межстрочным интервалом*/

Как изменяется внешний вид текста при использовании свойства line-height, можно увидеть на рис. 11.2.

Рис. 11.2. Различная высота строк

Следующее свойство используется для изменения регистра символов. Оно называется texttransform и принимает одно из следующих значений:

• capitalize – делает первые буквы слов прописными;

• uppercase – переводит текст в верхний регистр;

• lowercase – переводит текст в нижний регистр;

• none – отключает преобразования регистра (значение по умолчанию).

Теперь рассмотрим два свойства CSS, при помощи которых можно влиять на вывод текста на уровне слов: word-spacing и white-space. Первое из них используется для увеличения или уменьшения промежутка между словами. Значением по умолчанию этого свойства считается normal, означающее нормальное расстояние между словами. Кроме того, свойству wordspacing можно задать значение в одной из единиц измерения длины CSS, например:

P.compact {word-spacing: 1mm}

P.usial {word-spacing: 10px}

Второе упомянутое свойство white-space позволяет разрешить или запретить перенос текста по словам. Значения этого свойства:

• normal – разрешает обычное поведение при переносе текста на следующую строку (значение по умолчанию);

• pre – сохраняет оригинальное форматирование текста (как внутри HTML‑элемента PRE);

• nowrap – запрещает перенос текста по словам (аналогично HTML‑элементам NOBR).

Наконец, последним рассмотрим свойство CSS letter-spacing, позволяющее управлять расстоянием между буквами текста. Значением этого свойства может быть normal (значение по умолчанию, означает обычное расстояние между буквами) или значение в одной из единиц измерения длины.

11.3. Cписки

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

Итак, в первую очередь обратимся к свойству list-style-type. Для маркированных списков этому свойству задаются следующие значения:

• disc – задает круглый маркер списка (маркер закрашен внутри);

• circle – задает маркер в виде окружности;

• square – задает маркер в виде квадрата.

Для нумерованных списков свойству list-style-type присваиваются такие значения, задающие тип нумерации:

• decimal – нумерация арабскими цифрами;

• lower-roman – нумерация малыми римскими цифрами;

• upper-roman – нумерация большими римскими цифрами;

• lower-alpha – нумерация малыми латинскими буквами;

• upper-alpha – нумерация большими латинскими буквами.

Воздействие каждого значения свойства list-style-type аналогично соответствующим значениям атрибута type HTML‑элементов OL и UL, рассмотренных в гл. 4.

Следующее свойство, предназначенное для задания рисунка в качестве маркера списка, имеет имя list-style-image. Оно перекрывает значение свойства list-style-type и может иметь следующие значения:

• url("URI изображения для маркера") – указывает путь рисунка, который будет использоваться в качестве маркера списка;

• none – отменяет использование рисунка в качестве маркера (значение по умолчанию).

Наконец, свойство list-style-position позволяет задать более компактное отображение списка за счет изменения положения маркера. Свойство принимает следующие значения:

• inside – помещает маркер в текст элемента списка;

• outside – помещает маркер вне текста элемента списка (значение по умолчанию).

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

Рис. 11.3. Обычный и компактный списки

Показанный на рис. 11.3 эффект достигнут применением совсем простой таблицы стилей:

<STYLE>

UL.list {list-style-image: url("marker.gif")}

UL.compact_list {list-style-image: url("marker.gif");

list-style-position: inside}

</STYLE>

11.4. Границы

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

Свойства CSS, предназначенные для настройки границ, можно разбить на три группы: свойства для задания цвета границ, свойства для задания стиля границ и свойства для задания толщины границ. Рассмотрим эти три группы по очереди.

Итак, для задания цвета сразу всех границ элемента используется свойство border-color. Типы значений, задающих цвет, рассмотрены в разд. 10.5. Кроме того, можно задать цвет границ элемента по отдельности, то есть цвет верхней, нижней, левой и правой границ. Для этого используются следующие свойства:

• border-top-color – цвет верхней границы;

• border-bottom-color – цвет нижней границы;

• border-left-color – цвет левой границы;

• border-right-color – цвет правой границы.

Таким образом, приведенные ниже правила CSS дадут один и тот же эффект (конечно, если браузер поддерживает оба варианта задания цвета границ):

red_border1 {border-color: red}

red_border2 {border-left-color: red; border-right-color: red;

border-top-color: red; border-bottom-color: red}

Следующая группа свойств, которую мы рассмотрим, задает стиль сразу всех или же только отдельных границ элемента. Для задания стиля всех границ предназначено свойство borderstyle, а для задания стиля верхней, нижней, левой и правой границ – свойства border-topstyle, border-bottom-style, border-left-style и border-right-style соответственно. Значения свойств могут быть следующими:

• none – скрывает границу элемента;

• dotted – граница прерывистая, состоит из точек;

• dashed – граница прерывистая, состоит из отрезков;

• solid – сплошная линия границы;

• double – двойная сплошная линия границы;

• groove – вдавленная линия границы;

• ridge – выпуклая линия границы;

• inset – граница типа «ступенька вверх» (подобный вид границ используется для оформления кнопок);

• outset – граница типа «ступенька вниз» (так выглядит нажатие кнопки).

Небольшой пример использования свойств задания стиля рамки приведен ниже (пример 11.1).

Пример 11.1. Стили границ элементов

<HTML>

<HEAD>

<TITLE>Стили границ элементов</TITLE>

</HEAD>

<BODY>

<TABLE style = "border-color: black">

<TR>

<TD style = "border-style: none">none

<TD style = "border-style: dotted">dotted

<TD style = "border-style: dashed">dashed

<TD style = "border-style: solid">solid

<TD style = "border-style: double">double

<TD style = "border-style: groove">groove

<TD style = "border-style: ridge">ridge

<TD style = "border-style: inset">inset

<TD style = "border-style: outset">outset

<TR>

<TD colspan = "9"

style = "border-top-style: dotted; border-left-style: solid;

border-bottom-style: dashed; border-right-style: double">

Ячейка с разными границами

</TABLE>

</BODY>

</HTML>

В этом небольшом примере задействованы все перечисленные выше виды границы. Внешний вид самих границ хорошо виден на рис. 11.4.

Рис. 11.4. Стили границ элементов

Наконец, рассмотрим свойства CSS, позволяющие изменять толщину границ элементов. Для задания толщины сразу всех границ элементов предназначено свойство border-width. Для задания толщины верхней, нижней, левой и правой границ используются свойства border-top-width, border-bottom-width, border-left-width и border-right-width. Этим свойствам задаются как предопределенные значения thick (толстая граница), medium (граница средней толщины) и thin (тонкая граница), так и значения в одной из единиц измерения длины (пример 11.2).

Пример 11.2. Использование границ различной толщины

<HTML>

<HEAD>

<TITLE>Толщина границ элементов</TITLE>

<STYLE>

TD {border-style: solid}

</STYLE>

</HEAD>

<BODY>

<TABLE style = "border-color: black">

<TR>

<TD style = "border-width: thin">thin

<TD style = "border-width: medium">medium

<TD style = "border-width: thick">thick

<TR>

<TD style = "border-width: 1px">1px

<TD style = "border-width: 2px">2px

<TD style = "border-width: 4px">4px

<TR>

<TD style = "border-width: 1pt">1pt

<TD style = "border-width: 2pt">2pt

<TD style = "border-width: 4pt">4pt

<TR>

<TD style = "border-width: 1mm">1mm

<TD style = "border-width: 2mm">2mm

<TD style = "border-width: 4mm">4mm

</TABLE>

</BODY>

</HTML>

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

Страница, созданная по примеру 11.2, выглядит так, как показано на рис. 11.5.

Рис. 11.5. Границы разной толщины

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

11.5. Поля и отступы

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

• margin-top, margin-bottom – задает высоту верхнего и нижнего полей соответственно; может принимать значения в абсолютных и относительных единицах измерения CSS; значение в процентах означает процент от высоты родительского элемента;

• margin-left, margin-right – задает ширину левого и правого полей соответственно; может принимать значения в абсолютных и относительных единицах измерения CSS; значение в процентах означает процент от ширины родительского элемента;

• margin – задает ширину и высоту всех полей сразу.

Все перечисленные свойства также могут принимать значение auto (собственно, это и есть значение по умолчанию), позволяющее браузеру самому выбрать нужные размеры полей. Как влияют перечисленные свойства на расположение элементов страницы, показано на рис. 11.6.

Рис. 11.6. Поля между элементами до (слева) и после (справа) применения свойства margin

Для задания полей так, как показано на рис. 11.6, использовалось следующиее правило таблицы стилей:

IMG {margin-top:2px; margin-bottom:2px; margin-left:30px; margin-right:30px}

Теперь настал черед отступов от края элемента до его содержимого. Итак, для задания отступов используются следующие свойства:

• padding-top, padding-bottom – задает отступы от верхней и нижней границ элемента до его содержимого;

• padding-left, padding-right – задает отступы от левой и правой границ элемента до его содержимого;

• padding – задает значение всех отступов содержимого от границ элемента (для всех элементов по умолчанию имеет значение).

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

11.6. Цвет и фон

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

P {color: blue}

TH {color: rgb(0,0,255)}

TD {color: #0000FF}

Что касается фона, то если средствами «чистого» HTML нам позволено задавать лишь цвет фона для элементов BODY, TABLE, TR, TH и TD, то, используя CSS, можно задать не только цвет фона любых элементов страницы, но и рисунок, положение фона и еще кое‑что.

Однако начнем все же с цвета фона. Для указания цвета фона элемента используется свойство background-color. Как и свойство color, оно принимает значение цвета в любом поддерживаемом CSS формате. Кроме того, свойству background-color по умолчанию присвоено значение transparent, которое сделает фон элемента прозрачным.

Кроме задания цвета фона, в CSS предусмотрено свойство для задания фонового изображения элемента – background-image. Оно может принимать значения none (значение по умолчанию, означает отсутствие фонового изображения) и URI файла рисунка.

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

• repeat – фоновое изображение повторяется по горизонтали и по вертикали;

• repeat-x – изображение повторяется по горизонтали;

• repeat-y – изображение повторяется по вертикали;

• no-repeat – изображение не повторяется.

Использование рассмотренных свойств CSS, отвечающих за настройку фона, показано в примере 11.3.

Пример 11.3. Фон страницы и фон элементов

<HTML>

<HEAD>

<TITLE>Фон</TITLE>

<STYLE type = "text/css">

BODY {padding-left: 40px}

BODY {background-image:url(background.jpg); background-repeat:repeat-y}

P.p1 {background-color: blue}

P.p2 {background-image: url(P_background.GIF)}

STRONG {background-color: yellow}

</STYLE>

</HEAD>

<BODY>

<P class = "p1">Абзац с фоном <STRONG>одного</STRONG> цвета

<P class = "p2">Абзац с <STRONG>рисунком</STRONG> в качестве фона

</BODY>

</HTML>

В этом примере при помощи свойств background-image и background-repeat для элемента BODY создается окантовка страницы слева (подобие «переплета»). Свойство paddingleft, заданное для элемента BODY, позволяет выводить остальные элементы страницы так, чтобы они не закрывали рисунок «переплета». Кроме того, в примере показано использование одноцветного фона и фона‑рисунка для HTML‑элементов.

Внешний вид страницы, создаваемой браузером по примеру, показан на рис. 11.7.

Рис. 11.7. Фон страницы и фон элементов

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

• scroll – фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);

• fixed – фоновое изображение зафиксировано, то есть при прокрутке содержимого страницы фон остается неподвижен.

И наконец, свойства background-position, background-position-x и backgroundposition-y. Первое из них позволяет указанием двух значений, разделенных пробелами, задать горизонтальную и вертикальную координаты фонового рисунка. Следующие два свойства дают возможность сделать то же самое, но по отдельности: свойством background-positionx задается горизонтальная координата, а свойством background-position-y – вертикальная.

Значения горизонтальной координаты рисунка (свойство background-position-x) могут быть следующими:

• предопределенные значения left, center, right, задающие выравнивание фона по левому краю, по центру или по правому краю элемента соответственно;

• численные значения в одной из единиц измерения длины, поддерживаемой CSS;

• процент от ширины элемента.

Значениями вертикальной координаты рисунка (свойство background-position-y) могут быть:

• предопределенные значения top, center, bottom, задающие выравнивание фона по верхнему краю, по центру или по нижнему краю элемента соответственно;

• численные значения в одной из единиц измерения длины, поддерживаемой CSS;

• процент от высоты элемента.

Пример использования свойств background-position:

BODY {background-position: 10% 100px}

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

BODY {background-position-x: 10%; background-position-y: 100px}

11.7. Свободное позиционирование

При использовании таблиц стилей появляется еще одна возможность, о которой веб‑дизайнеры до CSS не могли даже мечтать. Установка определенных свойств в таблицах стилей позволяет задавать произвольное положение и размер практически любого элемента страницы. На рис. 11.8 наглядно показано, что представляет собой свободное позиционирование таких элементов, как изображения и текст абзаца.

Рис. 11.8. Свободное позиционирование элементов страницы

В примере 11.4 приведен текст HTML‑документа, в котором реализуется показанное на рисунке свободное позиционирование элементов.

Пример 11.4. Использование свободного позиционирования

<TITLE>Свободное позиционирование</TITLE>

<BODY>

<IMG src = "right.gif" border = "1">

<IMG src = "right.gif" style = "position: absolute;

left: 30; top: 30" border = "1">

<IMG src = "right.gif" style = "position: absolute;

left: 60; top: 60" border = "1">

<IMG src = "right.gif" style = "position: absolute;

left: 90; top: 90" border = "1">

<IMG src = "right.gif" style = "position: absolute;

left: 120; top: 120" border = "1">

<P style = "position: absolute; left: 45; top: 45;

font-size: x-large">А это свободно позиционированный текст абзаца

</BODY>

Возможность свободного позиционирования предоставляет не только много свободы при оформлении статичных HTML‑документов, но и позволяет создавать разнообразные довольно интересные визуальные эффекты с использованием сценариев. Примеры таких эффектов приведены в гл. 13. Сейчас же мы более подробно рассмотрим свойства CSS, дающие возможность свободно позиционировать элементы страницы. Начнем с использованного в примере 11.4 свойства position, которое позволяет указать браузеру, как выполнить позиционирование элемента страницы.

Свойство position принимает три значения:

• static – обычное позиционирование в соответствии с порядком следования элементов в документе (значение по умолчанию);

• absolute – задает свободное позиционирование, координаты элемента задаются относительно родительского элемента;

• relative – задает свободное позиционирование, координаты элемента задают смещение от того места, где был бы выведен элемент, будь значение свойства position равным static.

Без задания координат элемента использование свойств позиционирования становится бессмысленным, потому кратко остановимся на свойствах, позволяющих задать положение и размер свободно позиционированных элементов. Итак, для задания положения элемента доступны следующие свойства:

• left и top – горизонтальная и вертикальная координаты левого верхнего угла элемента;

• right и bottom – горизонтальная и вертикальная координаты правого нижнего угла элемента.

Значения координат могут задаваться в любых единицах измерения длины CSS, а также в процентах от ширины или высоты родительского элемента. Когда размер элемента фиксирован, то можно ограничиться только заданием координат левого верхнего угла элемента. Если же нужно точно указать, какую область должен занимать элемент, то вместо задания координат правого нижнего угла можно использовать также свойства CSS width (ширина элемента) и height (высота элемента).

Еще одно свойство, которое используется для свободно позиционированных элементов, – z-index. С его помощью указывается порядок перекрытия элементов. Когда один элемент перекрывает другой, это выглядит как расположение одного элемента поверх другого. Значения свойства z-index:

• auto – порядок перекрытия элементов определяется порядком их следования в документе (значение по умолчанию);

• положительное или отрицательное целое число – элементы с большими значениями z-index перекрывают элементы с меньшим значением этого свойства.

На рис. 11.8 хорошо видно, как выглядит перекрытие элементов страницы. Поскольку для элементов в примере 11.4 явно не задается свойство z-index, то элементы перекрываются в порядке следования в документе. И на самом верху среди всех свободно позиционированных элементов показано содержимое элемента P, так как он следует в тексте документа последним.

Кроме того, при использовании свободно позиционированных элементов в сочетании со сценариями часто используется свойство CSS, позволяющее скрывать и показывать элементы, – visibility, принимающее значения:

• visible – делает элемент страницы видимым;

• hidden – скрывает элемент страницы;

• inherit – наследует значение свойства от родительского элемента (значение по умолчанию).

11.8. Использование элементов DIV и SPAN

Использование HTML‑элементов SPAN и DIV позволяет в некоторых случаях значительно облегчить применение стилей к нужным фрагментам документа. С помощью HTML‑элемента SPAN можно, например, изменить цвет шрифта в отрывке текста только с помощью таблиц стилей (без использования HTML‑элемента FONT с атрибутом color):

...

<P>Слово <SPAN style = "color: green">зеленый</SPAN> отображается соответствующим цветом

...

Элемент SPAN применяется для создания встроенных элементов, как в предыдущем примере. Чаще всего этот элемент применяется потому, что надо где‑то указать значение style, class или id для участка текста.

В отличие от SPAN, HTML‑элемент DIV позволяет создавать блочные элементы. При этом можно объединять несколько элементов (в том числе и блочных) в один блочный элемент. Это удобно во многих случаях, например, когда нужно обвести рамкой или свободно позиционировать группу элементов, задать общий фон для группы элементов.

Использование HTML‑элементов DIV и SPAN отражено в примере 11.5.

Пример 11.5. Использование элементов DIV и SPAN

<HTML>

<HEAD>

<TITLE>Использование элементов DIV и SPAN</TITLE>

<STYLE>

.person {border-style: solid; border-width: 1;

background-color: fuchsia; width: 80%; padding: 3}

.person2 {border-style: solid; border-width: 1;

background-color: fuchsia; width: 80%; padding: 3;

left: 20%; position: relative}

.ptitle {font-weight: bold}

</STYLE>

</HEAD>

<BODY>

<H1>Список сотрудников</H1>

<P>

<DIV class = "person">

<P><SPAN class = "ptitle">Имя: </SPAN>Василий

<BR><SPAN class = "ptitle">Фамилия: </SPAN>Пупкин

<P><SPAN class = "ptitle">Должность: </SPAN>Директор

<BR><SPAN class = "ptitle">Телефон: </SPAN>123-45-01 (секретарь)

</DIV>

<P>

<DIV class = "person2">

<P><SPAN class = "ptitle">Имя: </SPAN>Владимир

<BR><SPAN class = "ptitle">Фамилия: </SPAN>Замахов

<P><SPAN class = "ptitle">Должность: </SPAN>Зам. директора

<BR><SPAN class = "ptitle">Телефон: </SPAN>123-45-02

</DIV>

<P>

<DIV class = "person">

<P><SPAN class = "ptitle">Имя: </SPAN>Мария

<BR><SPAN class = "ptitle">Фамилия: </SPAN>Иванова

<P><SPAN class = "ptitle">Должность: </SPAN>Секретарь

<BR><SPAN class = "ptitle">Телефон: </SPAN>123-45-01

</DIV>

<P>...

</BODY>

</HTML>

Приведенный HTML‑документ выглядит так, как показано на рис. 11.9.

Рис. 11.9. Использование элементов DIV и SPAN

Обратите внимание, что каждый элемент DIV имеет ширину 80 % от ширины окна браузера, а каждый четный элемент смещен на 20 % от ширины окна вправо. Главным в этом примере является то, что содержимое элемента DIV позиционируется как единое целое, а с помощью элемента SPAN удалось отделить текст с названием поля, описывающего данные сотрудника, от данных, соответствующих этому полю. Вообще, такого же эффекта можно добиться применением обычных таблиц, однако пришлось бы приложить гораздо больше усилий.

11.9. Псевдоклассы гиперссылок

Помните, как в самом начале книги мы задавали параметры отображения гиперссылок документа при помощи атрибутов HTML‑элемента BODY? С использованием CSS можно сделать то же самое. Но при этом нужно использовать предопределенные названия стилевых классов элемента A: A:link (непосещенная гиперссылка), A:visited (посещенная ссылка), A:active (активная гиперссылка, проявляется, например, при перемещении по гиперссылкам при помощи табуляции) и A:hover (состояние при наведении указателя мыши на гиперссылку).

Псевдоклассы так называются потому, что они явно не задаются в теле HTML‑документа (не могут быть заданы вообще). Но в частности в примере с гиперссылками сам браузер при показе документа обладает информацией, по каким гиперссылкам переходит пользователь, а по каким нет, где находится указатель мыши и какая часть документа получила фокус ввода. По этим признакам элементы документа можно объединить в виртуальные группы – псевдоклассы, на которые можно ссылаться из таблицы стилей.

Задание параметров каждого вида гиперссылок в остальном полностью аналогично заданию этих параметров для обычного текста. Например:

<STYLE>

A:link {text-decoration: none}

A:hover {font-style: italic}

A:active {color: red}

A:visited {color: green; font-weight: bold}

</STYLE>

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

11.10. Псевдоклассы текста

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

Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML‑элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.

Итак, для создания буквицы, показанной на рис. 11.10, используется приведенный в примере 11.6 HTML‑код.

Рис. 11.10. Заглавная буква страницы

Пример 11.6. Создание буквицы

<HTML>

<HEAD>

<TITLE>Первая буква</TITLE>

<STYLE type = "text/css">

P.first_par:first-letter {font-size:300%; font-weight:bold; color:blue}

</STYLE>

</HEAD>

<BODY>

<P class = "first_par">Первая буква этого текста будет большой и красивой буквой синего цвета.

<P>Все последующие абзацы будут начинаться по-обычному

</BODY>

</HTML>

Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML‑элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML‑элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.

Рис. 11.11. Особое оформление первых строк абзацев

Текст HTML‑документа, показанного на рис. 11.11, приведен ниже (пример 11.7).

Пример 11.7. Особое оформление первых строк абзацев

<HTML>

<HEAD>

<TITLE>Первая строка</TITLE>

<STYLE type = "text/css">

P:first-line {font-weight:bold; color:blue}

P.big {font-size:150%}

P.small {font-size:75%}

</STYLE>

</HEAD>

<BODY>

<P>Абзац, оформленный шрифтом по умолчанию. ...

<P class = "big">Абзац, оформленный шрифтом большого размера. ...

<P class = "small">Абзац, оформленный шрифтом малого размера. ...

</BODY>

</HTML>

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

11.11. Создание CSS для различных устройств

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

Сами таблицы стилей создаются как обычно, то есть в CSS‑файле или внутри HTML‑элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).

Атрибут media может принимать в качестве значения список из одного или более следующих строковых идентификаторов:

• all – таблица подходит для любого устройства;

• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);

• braille – таблица применяется для устройств, генерирующих последовательность символов алфавита Брайля (предназначенного для людей с ослабленным зрением);

• handled – таблица используется для устройств с небольшим экраном, имеющим также ограничения по цветопередаче и прочим параметрам (карманные ПК и прочие портативные устройства);

• print – таблица применяется при выводе страницы на печать, а также при выводе в окне предварительного просмотра;

• projection – таблица используется при просмотре документа с помощью проектора или другого сходного устройства;

• screen – таблица применяется при отображении на экране стандартного монитора (используется по умолчанию);

• tty – таблица используется при выводе на устройства с ограниченными возможностями отображения (телетайпы, терминалы и др.);

• tv – таблица применяется при отображении на экране телевизора или сходного по возможностям устройства.

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

Пример 11.8. Документ для различных устройств

<HTML>

<HEAD>

<TITLE>Использование встроенной таблицы стилей</TITLE>

<!– Определение таблицы стилей для вывода на печать–>

<STYLE type = "text/css" media = "print">

H1 {color: black; font-family: newroman; text-align: center}

H2, H3 {color: black; font-family: newroman; text-align: center}

P {font-style: normal; font-weight: normal; color: black}

</STYLE>

<!– Определение таблицы стилей для монитора–>

<STYLE type = "text/css" media = "screen">

BODY {background-color: black}

H1 {color: red; font-family: arial; text-align: center}

H2, H3 {color: yellow; font-family: courier; text-align: left}

P {font-style: italic; font-weight: bold; color: white}

</STYLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<P>Текст абзаца

<H2>Заголовок второго уровня</H2>

<P>Текст абзаца

<H3>Заголовок третьего уровня</H3>

<P>Текст абзаца

</BODY>

</HTML>

На экране монитора документ выглядит так, как показано на рис. 11.12 (используется таблица со значением атрибута media равным screen).

Рис. 11.12. Страница в окне браузера

При выводе на печать (в окне предварительного просмотра) используется таблица стилей со значением media=print, что видно из рис. 11.13.

Рис. 11.13. Страница в окне предварительного просмотра

Конечно, даже при выводе на печать может потребоваться гораздо больше работы при создании таблицы стилей, чем показано в приведенном здесь примере. Однако думается, что даже в этом простом случае хорошо заметна потенциальная мощь CSS в подготовке документов для различных устройств.

Глава 12 Краткий курс JavaScript

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

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

Сценарии являются программами, поэтому естественно, что написаны они с использованием какого‑то языка программирования.

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

Язык программирования сценариев JavaScript претендует на то, чтобы быть упрощенной версией популярного языка Java, хотя во многих вопросах это сходство ограничивается только сходством в названии. JavaScript является интерпретируемым языком программирования (как и другие языки программирования сценариев). Это значит, что, когда наступает нужный момент, браузер находит в документе программу JavaScript, проверяет ее на наличие ошибок, после чего выполняет команду за командой.

Далее в этой главе рассматриваются основные возможности языка JavaScript и правила написания программ с его использованием.

Объем книги не позволяет привести развернутое описание языка программирования, поэтому материал изложен кратко.

12.1. Замечание о строках кода JavaScript

Логически цельные и обособленные действия программы на JavaScript, будь то присвоение значения переменной, вызов функции и пр., записываются в отдельных строках (эти действия называются операторами, или инструкциями). В конце строк обязательный для многих других языков программирования (для того же Java) символ ; ставить необязательно, за исключением тех случаев, когда нужно явно задать пустой оператор (в тех местах, где оператор требуется синтаксисом языка, но он не нужен программисту) или если все же нужно записать несколько действий в одной строке. Например:

var a, b = 123

a = a + 12 + b*2

a = a + b; c = a – b / 2

Однако во всех примерах книги строки заканчиваются символом ;, чтобы избежать путаницы (особенно для людей, которые уже имеют опыт программирования на C/C++ или Java). Выражения и операторы программы можно переносить на следующую строку, но только там, где допускается пробел. Например:

var a, b = «text»

a = b + "=" + "Очень длинная строка текста, которая настолько длинна, что "+" даже не помещается на странице"

12.2. Комментарии

В тексте программы на JavaScript можно помещать два вида комментариев: однострочные и многострочные. Однострочный комментарий обозначается //, а многострочный заключается между /* и */. Примеры обоих видов комментариев:

//Однострочный комментарий

/* Многострочный комментарий */

12.3. Типы данных, переменные, выражения

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

Таблица 12.1. Типы данных JavaScript

Перечисленные выше типы данных применяются в выражениях, например следующее выражение: 524 + 45.23 + «sometext» в результате даст значение «569.23sometext». Из полученного результата можно увидеть, что при расчете значений выражений производится автоматическое преобразование типов значений от менее универсальных типов к более универсальным (сверху вниз по табл. 12.1).

Относительно строковых значений осталось рассказать о том, что такое escape‑символы. Так вот, escape‑символы применяются для вставки в строки символов, которые не могут быть введены в текстовом редакторе либо являются недопустимыми (например, двойные кавычки в строке, заключенной в двойные кавычки). Доступные в JavaScript escape‑символы, а также их описания приведены в табл. 12.2.

Таблица 12.2. Escape-символы

Чтобы хранить значения выражений, используются переменные. Каждая переменная имеет имя (идентификатор). Имя переменной может содержать символы латинского алфавита, цифры и символ подчеркивания, причем первым символом не должна быть цифра, например: myVar, _any123var. Имена переменных не должны совпадать с зарезервированными словами языка JavaScript (они далее называются ключевыми, так менее точно, но короче). Ключевыми словами являются также все названия операторов, которые будут рассмотрены далее.

Переменные могут использоваться в выражениях наряду с численными и строковыми значениями (численными и строковыми константами). Например, если в переменной val содержится значение "text = ", то результатом выражения val + "sometext" будет строка "text = sometext".

Внимание!

Регистр символов в именах переменных, а также функций, классов (на будущее) в JavaScript имеет значение. Это значит, что, например, val и Val – это различные переменные.

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

var v1, somevar = «asd»;

Как видно, в одной строке можно объявить сразу несколько переменных. При объявлении переменных их можно инициализировать (оператор = используется для присвоения значений переменным). Неинициализированные переменные содержат значение undefined (в данном случае это переменная v1). Переменные могут также содержать специальное значение null, означающее, что в переменной нет данных. Кроме того, можно использовать специальное значение NaN (Not a Number), сигнализирующее о том, что в переменной содержится не число.

Если необходимо определить тип выражения или тип значения, которое хранится в переменной, то можно использовать оператор typeof(выражение). Этот оператор возвращает строковые значения: number (для численных выражений или значения NaN), string (для строк), object (для значения null и ссылок на объекты).

12.4. Простые и составные операторы

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

В отличие от простых операторов, составной оператор может содержать в себе любое количество простых или вложенных операторов. Составной оператор задается (часто называемый блоком) при помощи скобок {}. Внутри этих скобок помещаются простые или вложенные составные операторы. Составные операторы используются, если нужно поместить несколько операторов, но ожидается присутствие только одного. В качестве примера рассмотрим оператор if (то, как работает этот оператор, описано далее). В теле оператора if ожидается наличие только одного оператора, выполняющего какое‑либо действие, например:

if (a == 1) a++;

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

if (a == 1) {

a++;

//Другие действия...

}

12.5. Операторы языка JavaScript

Арифметические операторы. Инкремент и декремент

В языке JavaScript присутствуют стандартные для языков программирования арифметические операторы, позволяющие производить вычисления с численными и строковыми значениями (для строк только оператор +).

К арифметическим операторам JavaScript относятся: + (сложение), – (вычитание), * (умножение), / (деление). В дополнение к ним присутствует оператор взятия остатка от деления %. Все указанные операторы являются бинарными (в том смысле, что принимают два значения и возвращают одно). Кроме указанных операторов, существует еще и унарный оператор –, инвертирующий значение аргумента (например –123, –val).

В JavaScript предусмотрена также удобная возможность записи выражений вида i = i + 1, i = i – 1, i = i * j и пр., где i – произвольная переменная, а j – произвольное выражение. Первые два выражения сокращенно записываются как инкремент и декремент: i++ и i–. Третье выражение и подобные ему можно сократить, применив следующие операторы:

• оператор –=, то есть i = i – j эквивалентно i –= j;

• оператор +=, то есть i = i + j эквивалентно i += j;

• оператор *=, то есть i = i * j эквивалентно i *= j;

• оператор /=, то есть i = i / j эквивалентно i /= j;

• оператор %=, то есть i = i % j эквивалентно i %= j.

Кроме того, предусмотрены соответствующие операторы &=, ^=, |= для двоичных операторов и <<=, >>=, >>>= для операторов сдвига.

Логические операторы и операторы сравнения

И логические операторы, и операторы сравнения возвращают результат – логическое значение true или false. Однако логические операторы принимают аргументы логического типа, в то время как операторы сравнения сравнивают значения произвольного типа. И логические операторы, и операторы сравнения языка JavaScript приведены в табл. 12.3.

Таблица 12.3. Логические операторы и операторы сравнения

Двоичные операторы

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

Итак, двоичных операторов в JavaScript семь. Эти операторы перечислены в табл. 12.4.

Таблица 12.4. Двоичные операторы JavaScript

Приоритет операторов

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

1. ++, –, – (унарный), ~, !, typeof.

2. *, /, %.

3. +, -.

4. <<, >>, >>>.

5. >, >=, <, <=.

6. ==, !=, ===.

7. &.

8. ^.

9. |.

10. &&.

11. ||.

12. =, +=, –=, *=, /=, %=, &=, |=, ^=.

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

Условные операторы

При программировании на JavaScript можно использовать три условных оператора: if, select и оператор ? (именно вопросительный знак). Последний из операторов является самым простым, поэтому рассмотрим его в первую очередь.

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

условие ? выражение1 : выражение2

Здесь условие – логическое выражение (результат true или false). Выражение1 вычисляется в случае истинности выражения условие, иначе вычисляется значение выражения выражение2. Оператор ? возвращает значение (подобно любому другому оператору, например = или *), равное значению вычисленного выражения. Ниже приведено несколько примеров использования оператора ? (для большей наглядности выражения часто заключают в скобки):

a = (b > 3) ? b : 3; //Значение переменной a будет не меньше 3

a = (text == "continue") ? (a+=2) : a;

Следующим рассмотрим оператор if, который позволяет выбрать выполнение одной из двух последовательностей операторов в зависимости от истинности или ложности выражения‑условия. Оператор if имеет следующий формат:

if (условие) оператор1

else оператор2

Если значение выражения условие равно true, то выполняется оператор1 (это может быть как простой, так и составной оператор), в противном случае выполняется оператор2 (также или простой, или составной оператор). Часть else оператор2 является необязательной. Ниже приведено несколько примеров использования оператора if:

if (b != 0) a /= b; //Проверяется отсутствие деления на ноль

else {

//Какие-то действия по информированию (в данном случае ничего)

}

if (a > 12)

if (a<25); //Действия при 12 < a < 25

else; //Действия при a > 25

В приведенном примере проиллюстрирована одна проблема, с которой часто сталкиваются начинающие программисты на C‑подобных языках. Здесь специально проставлены отступы так, чтобы проиллюстрировать тот факт, что ключевое слово else относится к последнему по порядку оператору if. Если бы использовался блок, то принадлежность else была бы очевидной:

if (a > 12){

if (a<25) ; //Действия при 12 < a < 25

else ; //Действия при a > 25

}

Напоследок осталось рассмотреть последний из условных операторов – оператор множественного выбора switch. Он позволяет выбрать одну из многих альтернатив в зависимости от значения заданного выражения. Формат оператора приведен ниже:

switch (выражение){

case выражение1:

операторы1

case выражение2:

операторы2

...

default:

операторы_по_умолчанию

}

Оператор switch работает следующим образом. Сначала вычисляется значение выражения выражение. Далее это значение сравнивается с выражениями при каждом ключевом слове case сверху вниз. Если, например, значение выражение совпало со значением выражение2, то выполняется последовательность операторов операторы2. Выполнение продолжается до тех пор, пока не будет встречен оператор break либо выполнение не дойдет до конца тела оператора switch (закрывающая скобка }). Если перед следующим ключевым словом case отсутствует оператор break, то выполнится последовательность операторов операторы3 и т. д. Ключевое слово default используется для того, чтобы задать последовательность операторов, которые должны выполниться при несовпадении значения выражение со всеми выражениями при всех ключевых словах case. Для иллюстрации сказанного приводится пример использования оператора switch:

switch (var){

case 1:

//Операторы выполнятся при var == 1

break;

case 2:

//Операторы выполнятся при var == 2

case 3:

//Операторы выполнятся при var == 2 или var == 3

break;

case 4:

//Операторы выполнятся при var == 4

default:

//Операторы выполнятся при var != 1 && var != 2 && var != 3

}

Циклы

Язык JavaScript поддерживает три вида циклов: for, while и do-while. Начнем с более простых циклов while и do-while. Цикл while позволяет выполнять нужные действия, пока истинно выражение‑условие. Формат оператора while следующий:

while (условие) оператор

Здесь условие – логическое выражение (аналогично операторам if и ?), а оператор – простой или составной оператор, выполняемый при каждой итерации цикла. Пример использования цикла while:

var i = 0;

while (i<10){

//Какие-то действия...

i++; //Не забываем увеличить итератор, чтобы случайно

//не организовать бесконечный цикл

}

Следующий оператор цикла do-while имеет следующий формат:

do оператор while (условие)

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

var i = 0;

do{

//Какие-то действия...

i++; //Не забываем увеличить итератор, чтобы случайно

//не организовать бесконечный цикл

}while (i<10);

Теперь рассмотрим оставленный напоследок цикл for. Оператор for имеет следующий формат:

for (выражение1; условие; выражение2) оператор

Значение выражения выражение1 рассчитывается перед первой итерацией цикла. Обычно это инициализация счетчика или другой переменной, нужной в цикле. Операторы в теле цикла (оператор) выполняются до тех пор, пока истинно значение выражения условие. Перед второй и последующей итерациями вычисляется значение выражения выражение2 (обычно это выражение по изменению переменной цикла). Для демонстрации использования цикла for ниже приводится пример (аналог примеров для циклов while и do-while):

var i;

for(i=0; i<10; i++){

//Какие-то действия...

}

Операторы break и continue

Оператор break, помимо прерывания выполнения последовательности операторов внутри оператора switch, используется для прерывания итерации циклов. В следующем примере выполнение цикла for прерывается как раз с помощью оператора break:

var i;

for (i=0; i<10; i++){

//Действия...

if (i == 5) break;

}

Если в теле цикла встречается оператор continue, то остальные операторы игнорируются, а выполнение переходит на проверку условия цикла. Например, в следующем цикле суммируются значения от 1 до 10 (с помощью оператора continue игнорируются значения 5 и 7):

var i, sum = 0;

for (i=0; i<10; i++){

if (i == 5 || i == 7) continue;

sum += i;

}

Оператор запятая

Оператор полезен в тех случаях, когда нужно одновременно вычислить значение нескольких выражений в том месте, где допускается запись только одного. Рассмотрим этот случай на примере оператора for. Пусть нужно, чтобы в цикле было два итератора, но очень не хочется писать увеличение (уменьшение) одного из них в теле цикла. С использованием оператора , (запятая) можно разрешить проблему следующим образом:

var i, j;

for (i=0, j=100; i<j; i++, j–){

//Действия ...

}

Выражения, разделенные оператором , (запятая), вычисляются слева направо. При этом возвращаемым значением будет значение самого левого выражения. В следующем примере значение переменной res будет равным 3, а не 6:

var res, val = 2;

res = val+=1, val=5;

Из этого примера можно подчеркнуть одну особенность всех операторов присваивания языка JavaScript: они тоже возвращают значение. Корректными являются конструкции вида:

a = 1 + (b = c = d = 25);

Здесь значением переменной a будет 26, а остальных переменных – 25. Все сказанное об операторе , (запятая) не касается использования этого оператора при вызове функций.

12.6. Функции

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

Пользовательские функции

Пользовательская функция – любая функция, созданная программистом (а не встроенная в интерпретатор). Для создания пользовательских функций применяется следующая конструкция:

function имя_функции(параметр1, параметр2, ...){

//Операторы тела функции

return выражение

}

Здесь имя_функции – имя, идентификатор функции. На него распространяются те же ограничения, что и на имя любой переменной. В скобках задается список формальных параметров функции (она может и не иметь параметров). Каждый элемент этого списка – идентификатор переменной. Переменные с указанными в списке идентификаторами могут использоваться в функции так, как будто они были объявлены с использованием var (дополнительно эти переменные инициализируются значениями, переданными в функцию). Для возврата результата выполнения функции используется оператор return.

Рассмотрим пример функции, принимающей два значения и возвращающей сумму переданных ей значений:

function sum (v1, v2){

//Вычисляем сумму двух значений

return v1 + v2;

}

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

sum(выражение1, выражение2)

Значения двух указанных выражений и будут переданы в функцию в качестве значений переменных v1 и v2. Если результат, возвращаемый функцией, используется, то в этом случае вызов функции записывают в правой части операторов присваивания либо как аргумент оператора в выражении, например:

summa = sum(3, 4); //В переменную summa заносится 7

summa = sum(3, sum(4, 5)); //Суммируются три значения

Встроенные функции JavaScript

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

Таблица 12.5. Встроенные функции JavaScript

Глобальные и локальные переменные

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

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

var j;

i = 1;

j = i;

var i = 2;

Рассмотрим также, что происходит, если имеет место такой случай:

var i = 1; //Глобальная переменная

function f(){

var i = 2; //Локальная переменная

return i;

}

В данном случае функция возвратит значение 2, то есть в операторе return используется значение локальной переменной.

Ссылки на функции

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

var pfun = sum; //Присваиваем ссылку на функцию

var res = pfun(1,3); //Вызываем функцию sum

function sum(arg1, arg2){

return arg1+arg2;

}

Это может оказаться полезным во многих случаях. Например, в функциях сортировки массивов в число параметров функции сортировки часто включают параметр, предназначенный для передачи ссылки на функцию, сравнивающую элементы массива и возвращающую строго определенные значения (см. описание метода sort класса Array далее в тексте главы).

Кстати, оператор typeof возвращает значение function, если его параметром является имя функции или переменная, которой ранее присвоено имя функции.

12.7. Массивы

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

Массивы создаются в два этапа: объявляется переменная для хранения массива, после чего производится инициализация массива. Например:

var arr;

arr = [1,2,3,4,5];

или

var arr = [1,2,3,4,5];

Результатом выполнения приведенного фрагмента кода является создание массива, состоящего из пяти элементов. Доступ к элементам массива осуществляется с помощью оператора []. Операция получения значения третьего элемента массива выглядит следующим образом:

val = arr[2];

Конструкцию вида имя_массива[номер] можно использовать и в выражениях аналогично обычным переменным. Значения элементов массива можно сразу не указывать, то есть можно объявить пустой массив:

var arr;

arr = [];

Созданный массив при этом не содержит элементов. Для заполнения массива можно также использовать оператор []. Во время присвоения значений элементам массива проявляется следующая особенность: массив автоматически расширяется, если номер элемента, которому присваивается значение, превосходит номер последнего элемента в массиве. В следующем примере в результате выполнения присваивания массив будет содержать пять элементов, причем четыре первых из них будут иметь значение undefined:

var arr;

arr = [];

arr[4] = 5;

Для создания многомерного массива нужно элементам уже объявленного массива также присвоить массивы. Создание пустого двумерного массива (четыре строки с неопределенным количеством элементов) может выглядеть следующим образом:

var arr;

arr = [[], [], [], []];

Для обращения к элементам многомерного массива используется тот же оператор [], например:

arr[0][1] = 124;

arr[2][1] = arr[0][1];

Массивы в JavaScript являются объектами (оператор typeof для переменных‑массивов возвращает значение object). К тому же отсутствуют ограничения относительно формы, например, двумерных массивов: можно создавать как прямоугольные, так и треугольные или другие массивы произвольной формы. В ряде случаев это весьма полезно, но иногда может и запутать.

Размер массива можно получить с помощью свойства length этого объекта. Что такое свойство объекта и как его использовать, рассказано в следующем разделе.

12.8. Работа с объектами

Главная цель этого раздела – познакомить вас с приемами программирования на JavaScript, которые будут необходимы для организации взаимодействия с браузером и без которых сценарий в HTML‑документе совершенно бесполезен.

Понятие объекта. Свойства и методы

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

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

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

Объекты перед использованием необходимо создавать. Создание объектов осуществляется при помощи оператора new. Например, пусть есть класс point, содержащий свойства x и y, хранящие координату точки на плоскости, и метод distance(x, y), который позволяет рассчитать расстояние от точки с нужными координатами до точки, описываемой объектом. Тогда создание и использование объекта класса point можно проиллюстрировать следующим примером:

var p = new point; //Создание объекта класса point

p.x = p.y = 10; //Присвоение значений свойствам

var dist = distance(20, 0); //Вызов метода distance

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

var p = new point(10, 10);

Примечание

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

Осталось сказать несколько слов об удалении объектов. Итак, JavaScript позаимствовал у Java такую особенность, как ненужность удаления объектов. Неиспользуемые объекты удаляются автоматически.

Встроенные классы JavaScript

После того как изложены основные принципы работы с объектами, можно кратко рассмотреть классы Array, Date, Number и String, которые могут очень пригодиться не только на начальном этапе освоения JavaScript. Кроме этих двух классов, нужно рассмотреть также объект Math, который может оказаться весьма полезным при создании различных визуальных эффектов.

Класс Array

Класс Array является достаточно удобным расширением обычных массивов. Главным образом за счет наличия дополнительных методов, позволяющих производить довольно сложные манипуляции с данными массива. Класс Array имеет следующие конструкторы:

Array()

Array(размер)

Array(элемент1, элемент2, ...)

При использовании первого конструктора создается пустой массив. При использовании второго конструктора создается массив с заданным количеством элементов. При этом все элементы созданного массива имеют значение undefined. При использовании последнего конструктора создается массив, количество элементов которого совпадает с количеством переданных в конструктор параметров. Значения параметров копируются в соответствующие элементы массива. Ниже приведены примеры объявлений массивов:

var arr1 = new Array(); //Пустой массив

var arr2 = new Array(5); //Массив из пяти неопределенных элементов

var arr3 = new Array(1,2,3,4,5); //Массив [1,2,3,4,5]

Размер массива можно узнать с помощью свойства length объекта Array. Доступ к элементам массива осуществляется с помощью [] по индексам элементов. Нумерация элементов, как и в случае обычного массива, начинается с нуля.

Как было сказано ранее, объект Array отличает ряд методов, ориентированных на работу с данными в массиве. Описания этих методов приводятся в табл. 12.6.

Таблица 12.6. Методы класса Array

Как можно заметить, большинство методов класса Array ориентированы на обработку одномерных массивов, но ничто не мешает создавать при помощи класса Array многомерные массивы. Для этого достаточно только присвоить элементам массива Array вложенные массивы, но только тоже созданные как объекты класса Array.

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

var arr = new Array(5,2,25,16);

arr.sort();

В результате получится массив [16,2,25,5], а не [2,5,15,25]. Ошибки здесь нет, были отсортированы посимвольно строки из переданных чисел. Но в данном примере нужно сортировать числа. Для этого и пишется своя функция сравнения:

function comp(val1, val2){

if (val1>val2) return 1;

else

if (val1<val2) return –1;

else return 0;

}

Теперь вызов метода в виде sort(comp) приведет к правильной сортировке чисел по возрастанию. Задание своей функции сравнения дает большие возможности при обработке массива. Похожим образом можно очень просто сделать сортировку, например, двумерного массива по количеству элементов во вложенных массивах, по среднему значению, по сумме значений и т. д.

Класс Date

Объекты класса Date используются для хранения и обработки значений даты и времени. Конструкторы класса Date имеют следующий формат:

Date()

Date(миллисекунды)

Date(год, месяц, число, часы, минуты, секунды, миллисекунды)

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

Кроме того, при использовании класса Date помните, что он оперирует датой и временем текущего часового пояса (локальным временем). Для перевода даты и времени в абсолютные значения (по Гринвичу, по универсальному времени) используются специальные методы этого класса.

В табл. 12.7 приводятся описание и формат основных методов класса Date.

Таблица 12.7. Методы класса Date

Класс String

Класс String является очень удобным средством манипулирования строками. Конструкторы класса String имеют следующий формат:

String()

String(строка)

Если используется конструктор без параметров, то созданный объект изначально хранит пустую строку. Если используется второй конструктор, то заданная в скобках строка станет начальным значением, хранимым в объекте:

var s = new String(«some text»)

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

Таблица 12.8. Методы класса String

Объект Math

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

Таблица 12.9. Свойства класса Math

Методы объекта Math представляют собой различные математические функции. Список методов приведен в табл. 12.10.

Таблица 12.10. Методы класса Math

Обращение к свойствам и методам объекта Math осуществляется аналогично обращению к свойствам и методам любого другого объекта, например:

var pi = Math.PI;

var rnd = Math.random();

Стоит сказать несколько слов об использовании функции генерации случайных значений Math.random(). Часто бывает необходимо получить не значение от 0 до 1, а случайное значение в каком‑либо определенном интервале. В этом случае можно использовать следующую функцию:

function rand(min, max){

return Math.random()*(max–min)+min;

}

12.9. Взаимодействие с пользователем

Одной из возможностей JavaScript по взаимодействию с пользователем является использование стандартных окон сообщений и окна ввода текста.

Программа на JavaScript может выводить два типа окон сообщений: окно с одной кнопкой OK и окно с кнопками OK и Отмена. Для вывода окон сообщений первого типа используется функция alert(), имеющая следующий формат:

alert(текст_сообщения)

Кроме текста сообщения, в функцию alert() можно передавать численные и логические значения, а также массивы, прочие объекты и даже функции (по крайней мере, при использовании Internet Explorer). Эти возможности делают функцию alert() удобным средством не только взаимодействия с пользователем, а также средством отладки сценариев.

Для вывода окна сообщения с возможностью выбора (кнопки OK и Отмена) используется функция confirm():

confirm(текст_сообщения)

Функция confirm() возвращает значение true, если пользователь нажал кнопку OK, и false, если нажата кнопка Отмена.

При необходимости организации ввода текста пользователем можно применять функцию prompt(). Функция имеет следующий формат:

prompt(текст_сообщения, текст_по_умолчанию)

Как видно, функция принимает два параметра. В первый параметр помещается комментарий, который будет показан в окне. Во втором параметре задается текст, который уже будет введен в текстовое поле, как только окно станет видным пользователю. Окно ввода, приведенное на рис. 12.1, появляется при выполнении следующего отрывка программы:

var a = prompt(«Введите свое имя», «Не хочу регистрироваться»));

Рис. 12.1. Окно запроса пользователю

Если пользователь нажимает в окне ввода кнопку OK, то функция prompt() возвращает введенное в текстовое поле значение. В противном случае функция prompt() возвращает значение null.

Примечание

Описанные в этом разделе функции вывода сообщений не являются специфичными только для JavaScript. Это методы глобального объекта window. Они рассмотрены раньше, чем объектная модель документа, ввиду чрезвычайной их полезности для отладки сценариев.

12.10. Поиск ошибок в программе

В заключение краткого рассмотрения языка JavaScript немного поговорим о видах ошибок в программе, а также о сообщениях об ошибках и поиске самих ошибок. Здесь идет речь об отладке программ (сценариев) средствами браузера.

Итак, синтаксические ошибки выявляются при проверке текста программы. Обычно они проявляются как несбалансированные скобки, не там поставленные запятые или точки с запятой, ошибки в выражениях и т. д. В сообщениях о синтаксических ошибках обычно фигурируют слова типа «ожидалось» (expected), «не ожидалось» (unexpected). Пример сообщения об ошибке браузера Internet Explorer приведен на рис. 12.2.

Рис. 12.2. Сообщение о синтаксической ошибке

Эту конкретную ошибку вызвала следующая строка программы (ошибочно использован символ ; вместо , для разделения параметров функции):

prompt(«текст сообщения»;"значение по умолчанию")

Семантическими ошибками являются использование необъявленных переменных, функций, неправильное количество параметров при вызове функций, использование операторов к операндам несовместимых типов и т. д. При отладке программ только с помощью браузера семантические ошибки равносильны ошибкам времени выполнения, так как выявляются только во время исполнения программы. При этом за браузером Internet Explorer (версии 6.0) замечено довольно странное отношение к ошибкам такого рода (хотя и оправданное с точки зрения пользователя). Так, сообщения об использовании необъявленных переменных часто не выдаются. Вместо этого интерпретатор JavaScript просто завершает выполнение функции или последовательности операторов вне функции. В следующем примере сообщения с номером 12 пользователь не увидит, если переменная a не объявлена:

a += 12;

alert(12);

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

Глава 13 Динамический HTML

Данная глава предназначена для того, чтобы познакомить вас с применением сценариев для создания динамических HTML‑документов на примере языка программирования JavaScript.

13.1. Основы использования сценариев в HTML-документе

Помещение сценария в документ

Для помещения сценария в документ достаточно использовать HTML‑элемент SCRIPT. Этот элемент задается парными тегами <SCRIPT> и </SCRIPT> и имеет следующие атрибуты:

• src – URI файла, в котором записан код внешнего сценария;

• type – задает тип содержимого элемента SCRIPT или файла, определенного атрибутом src, принимает значения вида text/язык_сценария (например, text/javascript, text/vbscript);

• language – задает язык сценария (например, javascript или vbscript); при использовании атрибута type этот атрибут излишен.

Элемент SCRIPT может появляться как в заголовке, так и в теле документа произвольное количество раз. Рассмотрим пример внедрения в документ простейшего сценария на JavaScript (язык рассмотрим чуть позже) (пример 13.1).

Пример 13.1. Сценарий в HTML-документе

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»

"">

<HTML>

<HEAD>

<TITLE>Простейшая страница со сценарием</TITLE>

</HEAD>

<BODY>

<SCRIPT type = "text/javascript">

var date = new Date;

if (date.getHours() < 8 || date.getHours() > 22)

document.write("<P align = right><FONT color = black><I>Не спится?</I></FONT></P>");

else if (date.getHours() < 11)

document.write ("<P align = right><FONT color = blue><I>Доброе утро </I></FONT></P>");

else if (date.getHours() < 17)

document.write ("<P align = right><FONT color = red><I>Добрый день</I></FONT></P>");

else document.write ("<P align = right><FONT color = green><I>Добрый вечер</I></FONT></P>");

</SCRIPT>

<H1>Страница, содержащая сценарий</H1>

<P>Прочий текст страницы...

</HTML>

Участки кода между <SCRIPT> и </SCRIPT>, начинающиеся с document.write(), должны быть записаны в одну строку, иначе пример работать не будет. Что же делает сценарий в приведенном примере? Да ничего особенного, просто при загрузке страницы печатает в правом верхнем углу приветствие, цвет и текст которого зависят от времени суток.

Стоит сказать несколько слов о еще одном HTML‑элементе, имеющем отношение к сценариям, – это NOSCRIPT. Этот HTML‑элемент задается парными тегами <NOSCRIPT> и </NOSCRIPT> и полезен, когда автор документа хочет подстраховаться на случай, если его документ будет открыт в браузере, не поддерживающем сценарии вообще или не поддерживающем сценарии на используемом языке программирования. Итак, если сценарий не может быть выполнен, то браузер отобразит содержимое элемента NOSCRIPT (в нем может быть, например, гиперссылка на версию документа, не использующую сценарии).

Скрытие сценария

Рассмотрим прием, который часто применяется для того, чтобы браузер, вообще «не знающий» HTML‑элемента SCRIPT, не показал пользователю текст сценария. Это может случиться, если сценарий помещен в тело документа.

Для предотвращения возникновения такой ситуации текст сценария помещают в HTML‑комментарий следующим образом:

<SCRIPT type = «text/javascript»>

<!–

//Текст программы, помещенной здесь, пользователь не увидит случайно

–>

</SCRIPT>

Браузеры, поддерживающие элемент SCRIPT, должны проигнорировать HTML‑комментарий внутри этого элемента (хотя некоторые версии браузера Netscape Navigator не воспринимали сценарий, заключенный в комментарий HTML).

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

13.2. Исполнение сценария

Теперь рассмотрим, как организовать выполнение написанных и внедренных в документ сценариев. Итак, сценарий может исполняться в двух случаях: при загрузке документа и при возникновении события (а также при вызове его интерпретатором, например, по таймеру, но это рассмотрим особо).

Исполнение при загрузке документа

Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой‑либо функции, только один раз по мере загрузке документа. Причем положение HTML‑элемента SCRIPT с текстом сценария определяет момент времени, в который сценарий будет выполняться. Так, сценарий в примере 13.1 выполнялся именно до того, как было загружено остальное содержимое документа, поэтому выведенный им текст и появился раньше основного содержимого документа.

Чтобы при загрузке HTML‑документа выполнялась какая‑либо функция, в нужном месте сценария должен быть записан вызов функции. Так, пример 13.1 можно переписать следующим образом (пример 13.2 сокращен).

Пример 13.2. Вызов функции при загрузке документа

...

<BODY>

<SCRIPT type = "text/javascript">

function greeting(){

//Те же действия, что и в примере 13.1...

}

//Вызов функции greeting();

</SCRIPT>

<H1>Страница, содержащая сценарий</H1>

<P>Прочий текст страницы...

</HTML>

Если бы в коде сценария не было явного вызова функции greeting(), то на странице не появилось бы приветствие.

Реакция на события

Сценарий может быть также запущен браузером при возникновении на странице какого‑либо события, с которым сопоставлен сценарий, – обработчика события. Генерацию событий могут вызывать различные действия пользователя: щелчок кнопкой мыши на элементе страницы, наведение указателя мыши на элемент и др.

Для назначения обработчиков события используются атрибуты HTML‑элементов, приведенные в табл. 13.1.

Таблица 13.1. Атрибуты для назначения обработчиков событий

Значениями приведенных в таблице атрибутов могут быть фрагменты кода сценариев, например:

<P onClick = «alert('Не давите на меня!!!')»>Текст абзаца

<P onClick = "

{

//Аккуратно оформленный блок кода, ведь строки HTML-разметки можно

//безнаказанно разрывать

alert('Лучше нажимайте на соседний абзац.');

}">Текст абзаца

Обратите внимание, что поскольку текст обработчика помещается в двойные кавычки, то сами кавычки в тексте сценария использовать не следует. Обычной практикой является создание функций‑обработчиков события (обычной функции JavaScript) вместо записи действий по обработке события прямо в теге элемента. В таком случае в атрибут onСобытие записывается код вызова функции‑обработчика.

События, возникающие в дочерних элементах, передаются вверх по иерархии родительским элементам. Так, например, если над текстом элемента B в приведенном ниже примере произойдет щелчок кнопкой мыши, то событие получит сначала элемент B, потом элемент P, а затем и элемент BODY:

<BODY onClick = «body_click()»>

<P onClick = "p_click()">Обычный текст

<B onClick = "b_click()">полужирный текст</B>

13.3. Объектная модель документа

Чтобы можно было успешно применить полученные значения по программированию на JavaScript, нужно рассмотреть еще один специфический момент – это то, как сценарии могут воздействовать на HTML‑документ. Для этого необходимо изучить технологию представления HTML‑документа в виде совокупности объектов – объектную модель документа (DOM, Document Object Model). DOM включает не только объекты, из которых состоит документ, но и объекты, позволяющие получать различную информацию о браузере, системе (в частности, о видеосистеме компьютера), работать с окнами и многое другое.

Объект document

Для программиста на JavaScript HTML‑документ представляется в виде объекта document. Этот глобальный объект существует в единичном экземпляре. О создании объекта document заботится интерпретатор.

Свойства и методы объекта document

Итак, объект document предоставляет ряд свойств и методов, позволяющих осуществлять практически любые манипуляции с HTML‑документом. Основные свойства объекта document приведены в табл. 13.2.

Таблица 13.2. Свойства объекта document

Свойства, отвечающие за цветовое оформление, хранят целочисленные значения. Другие свойства, кроме возвращающих коллекции, хранят строки. Особо следует рассмотреть свойства, которые возвращают коллекции: all, anchors, forms, frames, images и links. В этих коллекциях находятся объекты, описывающие соответствующие элементы HTML‑документа.

Коллекции – это тоже объекты, во многом похожие на массивы. Однако коллекции предоставляют доступ к своим элементам c помощью метода item(). Причем доступ может осуществляться как по номеру элемента в коллекции, так и по его имени (задается атрибутом id или name элемента). Нумерация элементов в коллекциях начинается с нуля. Кроме того, для коллекций предусмотрено свойство length, хранящее количество элементов в коллекции.

В качестве примера рассмотрим, как получить доступ к элементам следующего HTML‑документа (пример 13.3).

Пример 13.3. HTML-документ, к элементам которого нужно получить доступ

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

<H1 id = "main_part">Главный заголовок документа</H1>

<P id = "par1">Текст документа...

</BODY>

</HTML>

Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:

var elements = []; //Массив, в который скопируем ссылки на объекты страницы

var i;

for (i=0; i<document.all.length; i++)

elements[i] = document.all(i);

В примере 13.3 в коллекции all содержится шесть элементов, поэтому массив elements после выполнения приведенного фрагмента программы должен содержать шесть элементов. Обратите внимание, как осуществляется доступ к элементам коллекции all: имя метода item() можно опускать.

Если бы доступ к элементам коллекции осуществлялся по имени HTML‑элементов, то можно было бы получить объекты, описывающие заголовок и абзац, следующим образом:

var h = document.all(«main_part»);

var p = document.all("par1");

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

var h = main_part;

var p = par1;

Кроме достаточно богатого набора свойств, можно пользоваться методом write() объекта document для добавления к HTML‑документу любого текста прямо из сценария. Метод write() принимает строку, в которой может содержаться любое HTML‑форматирование, например:

document.write('<H1 id = «part2»>Текст, напечатанный сценарием</H1>')

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

Использование методов open(URI_документа) и close() объекта document позволяет открывать новые HTML‑документы и закрывать окно браузера с текущим документом, например:

open(«13.1.html») //Открываем пример 13.1 в новом окне

close(); //Пытаемся закрыть текущий документ

Управление элементами документа

Итак, выше рассмотрено, как можно получить доступ к объектам, описывающим HTML‑элементы документа. Теперь же рассмотрим, какие общие действия можно производить с полученными объектами.

Свойства, которые доступны для большинства элементов документа, приведены в табл. 13.3.

Таблица 13.3. Основные свойства элементов документа

В табл. 13.4 приводятся основные методы, которые можно использовать для манипулирования большинством элементов документа.

Таблица 13.4. Основные методы элементов документа

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

Объекты, описывающие таблицы, поддерживают внутреннюю коллекцию rows, с помощью которой организовывается доступ к отдельным строкам таблицы. Эти объекты поддерживают также методы insertRow(номер) и deleteRow(номер), которые принимают в качестве параметра номер строки и позволяют вставить или удалить строку таблицы. Если метод insertRow() вызвать без параметра, то строка будет добавлена в конец таблицы. При успешном добавлении строки метод insertRow возвращает ссылку на объект, описывающий созданную строку.

Каждым элементом коллекции rows является объект, одним из свойств которого является коллекция cells, содержащая объекты, управляющие ячейками таблицы. Каждый элемент коллекции cells позволяет оперировать конкретными ячейками таблицы. Добавление ячеек в строку таблицы можно осуществлять при помощи метода insertCell(номер) объектов коллекции rows. Удалять же ячейки можно, используя метод deleteCell(номер) объектов той же коллекции.

Наконец, как завершающий этап знакомства с объектом document создадим несколько страниц, использующих его возможности.

Страница следующего примера будет представлять собой своеобразный каталог изображений. Изображения вместе с текстом, описывающим их, будут помещены в таблице. При этом помещение и удаление данных должно выполняться интерактивно (то есть этим управляет пользователь). Внешний вид страницы примера приведен на рис. 13.1.

Рис. 13.1. Изменяемая страница (каталог изображений)

При реализации примера код сценария и HTML‑код страницы расположены в отдельных файлах. Файл документа может иметь произвольное имя. Он выглядит следующим образом (пример 13.4).

Пример 13.4. Файл HTML-документа

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<HTML>

<HEAD>

<TITLE>Пример модифицирования таблицы сценарием</TITLE>

<SCRIPT type = "text/javascript" src = "script_13_4.js"></SCRIPT>

</HEAD>

<BODY>

<FIELDSET>

<LEGEND>Новое изображение</LEGEND>

Код: <INPUT name = "txtCode" maxlength = "4" size = "5">

Описание: <INPUT name = "txtName" maxlength = "500">

<BR>Путь к изображению: <INPUT type = "file" name = "txtFile">

<BR><INPUT type = "button" value = "Добавить рисунок"

onClick = "add_image(txtCode.value, txtName.value, txtFile.value)">

<INPUT type = "button" value = "Удалить рисунок..."

onClick = "delete_image()">

</FIELDSET>

<P>

<TABLE width = "100%" border>

<!–Определения столбцов таблицы–>

<COL width = "60">

<COL>

<COL width = "130">

<THEAD>

<TR><TH>Код<TH>Описание<TH>Просмотр

</THEAD>

<TBODY id = "mytable">

<!–Сюда сценарий вставляет записи–>

</TBODY>

</TABLE>

</BODY>

</HTML>

В приведенном примере обратите внимание на элемент TBODY таблицы. Присвоив ему имя, вы можете работать с телом таблицы как с самостоятельной таблицей. Это же справедливо для THEAD и TFOOT. Обратите также внимание на получение значений, введенных в текстовые поля: в большинстве случаев можно пользоваться не методами getAttribute() и setAttribute(), а свойствами, которые имеют такие же названия, как и соответствующие атрибуты.

Теперь очередь файла с кодом сценария. В примере он имеет имя script_13_4.js (JS – стандартное расширение для файлов со сценариями на JavaScript) (пример 13.5).

Пример 13.5. Файл script_13_4.js

//Функция принимает код, название, путь изображения и добавляет

//запись в таблицу function add_image(code, imagename, path){

if (valid_data(code, imagename, path)){

//Формирование строки таблицы (в части TBODY)

var row = mytable.insertRow();

//Ячейка с кодом рисунка row.insertCell().innerHTML = "<B>" + code + "</B>";

//Ячейка с названием row.insertCell().innerHTML = imagename;

//Ячейка с изображением row.insertCell().innerHTML = '<IMG width = "130" src = "'+ path +'">';

}

}

//Функция проверяет правильность введеных данных function valid_data(code, imagename, path){

//Проверка, введены ли все значения if (code == "" || imagename == "" || path == ""){

alert("Введите значения во все поля");

return false;

}

else{

//Проверим, чтобы код изображения не дублировался var i;

for (i=0; i<mytable.rows.length; i++){

if (mytable.rows(i).cells(0).innerText == code){

alert("Изображение с кодом "+ code +" уже присутствует в таблице");

return false;

}

}

}

return true;

}

//Функция удаления записи из таблицы (код изображения

//вводит пользователь)

function delete_image(){

var code = prompt("Введите код удаляемого изображения", "");

if (code != null){

//Находим и удаляем запись var i;

for (i=0; i<mytable.rows.length; i++){

if (mytable.rows(i).cells(0).innerText == code){

mytable.deleteRow(i);

return true;

}

}

alert("Изображение с кодом " + code + " не найдено.");

}

}

Как видно, в файле script_13_4.js реализованы три функции. Первая функция add_image() используется для добавления записей в таблицу. Перед добавлением каждой новой записи она проверяет (с помощью функции valid_data()), чтобы были введены все данные (код, описание и путь изображения), а также, чтобы код нового изображения не дублировался кодом одного из изображений, ранее добавленных в таблицу. Третья функция delete_image() используется для удаления записи из таблицы.

Из примера 13.5 можно увидеть применение коллекций rows и cells таблицы на практике.

Помещаем свое меню на страницу

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

Рис. 13.2. Внешний вид меню

Ниже приводится текст HTML‑документа с созданным меню (пример 13.6).

Пример 13.6. Документ с меню

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»>

<HTML>

<HEAD>

<TITLE>Страница с меню</TITLE>

<STYLE type = "text/css">

.item {background-color: rgb(170, 170, 170)}

.selected {background-color: magenta}

.menu {border-style: ridge}

</STYLE>

<SCRIPT src = "menu.js" type = "text/javascript"></SCRIPT>

</HEAD>

<BODY>

<TABLE id = "menu1" class = "menu">

<!–Первый пункт меню–>

<TR id = "item1" class = "item" onClick = "item1_click()"

onMouseOver = "item1.className = 'selected'"

onMouseOut = "item1.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "item2" class = "item" onClick = "item2_click()"

onMouseOver = "item2.className = 'selected'"

onMouseOut = "item2.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "item3" class = "item" onClick = "item3_click()"

onMouseOver = "item3.className = 'selected'"

onMouseOut = "item3.className = 'item'">

<TD><IMG src = "icons/3.jpg"><TD>Третий пункт меню

<!–Четвертый пункт меню–>

<TR id = "item4" class = "item" onClick = "item4_click()"

onMouseOver = "item4.className = 'selected'"

onMouseOut = "item4.className = 'item'">

<TD><IMG src = "icons/4.jpg"><TD>Четвертый пункт меню

<!–Пятый пункт меню–>

<TR id = "item5" class = "item" onClick = "item5_click()"

onMouseOver = "item5.className = 'selected'"

onMouseOut = "item5.className = 'item'">

<TD><IMG src = "icons/5.jpg"><TD>Пятый пункт меню

</TABLE>

</BODY>

</HTML>

Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий onMouseOver, onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться нужного вида меню.

При выборе каждого из пунктов меню вызывается соответствующая функция‑обработчик (см. значения атрибутов onClick для элементов TR). Все функции‑обработчики собраны в файле menu.js, текст которого приводится ниже (пример 13.7).

Пример 13.7. Содержимое файла menu.js

/*

В этом файле содержатся функции-обработчики для каждого пункта меню

*/

function item1_click(){

alert("Вы выбрали первый пункт меню");

//Другие действия...

}

function item2_click(){

alert("Вы выбрали второй пункт меню");

//Другие действия...

}

function item3_click(){

alert("Вы выбрали третий пункт меню");

//Другие действия...

}

function item4_click(){

alert("Вы выбрали четвертый пункт меню");

//Другие действия...

}

function item5_click(){

alert("Вы выбрали пятый пункт меню");

//Другие действия...

}

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

Объект navigator

Глобальный объект navigator позволяет получить некоторую информацию о браузере, в котором происходит просмотр страницы со сценарием. Свойства объекта navigator, поддерживаемые большинством браузеров (по крайней мере, не только браузером Internet Explorer), приведены в табл. 13.5.

Таблица 13.5. Свойства объекта navigator

Часто использовать объект navigator нет необходимости, однако он может очень пригодиться при создании достаточно продвинутых и «живучих» веб‑страниц, способных выбирать сценарии для выполнения в зависимости от браузера, в котором они открываются. Простейший код, позволяющий отличить браузер Internet Explorer, приведен ниже (пример 13.8).

Пример 13.8. Определение браузера

function do_script(){

if (navigator.appName == "Microsoft Internet Explorer"){

//Код для Internet Explorer...

}

else{

//Код для другого браузера...

}

}

Объект window

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

Свойства и методы объекта window

Основные свойства объекта window приводятся в табл. 13.6.

Таблица 13.6. Свойства объекта window

В табл. 13.7 приведены основные методы объекта window.

Таблица 13.7. Методы объекта window

Как было сказано при описании метода open() в табл. 13.7, для этого метода предусмотрено несколько дополнительных параметров. Основные параметры перечислены в табл. 13.8.

Таблица 13.8. Параметры метода open()

Каждый из приведенных в таблице параметров может добавляться в строку параметры в виде: имя_параметра = значение. Так, для открытия документа в новом окне размером 300 × 400 можно использовать следующий вызов метода open():

window.open(«13.6.html», "", «width = 300, height = 400»);

Вообще, по крайней мере в браузере Internet Explorer, разделителем параметров в строке необязательно может быть запятая. Этот браузер нормально воспринимает в качестве разделителя и пробел, и точку с запятой. Еще при испытаниях метода open() в Internet Explorer замечена следующая особенность: если в строке задан хотя бы один параметр, то значения всех остальных параметров, принимающих значения 0 или 1, сбрасываются в 0. Так, созданное приведенным выше вызовом метода open() окно будет отображаться без строки состояния, панели инструментов, строки меню, полос прокрутки, строки адреса и будет неизменяемого размера.

Как можно было заметить, в табл. 13.8 приведены параметры, позволяющие задать ширину нового окна, но не приведены параметры, задающие положение окна. Эти параметры в действительности есть, но они отличаются для различных браузеров. Для Internet Explorer это left и top, а для Navigator – screenX и screenY.

Примеры использования объекта window

Теперь рассмотрим, как можно использовать объект window для воспроизведения анимации в окне браузера.

Методы, позволяющие создавать таймеры, просто незаменимы при работе с анимацией средствами браузера. Суть данного примера состоит в последовательной загрузке изображений в элемент IMG. Интервал между сменами кадров выдерживается с помощью таймера. Всего кадров шесть (рис. 13.3).

Рис. 13.3. Изображения-кадры

Кадры меняются от первого до шестого, а затем от шестого до первого. Текст HTML‑документа со сценарием, реализующим смену кадров, приведен ниже (пример 13.9).

Пример 13.9. Анимация на странице

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»

"">

<HTML>

<HEAD>

<TITLE>Страница с анимацией</TITLE>

</HEAD>

<BODY>

<SCRIPT type = "text/javascript">

//Назначаем функцию, вызываемую по таймеру и меняющую

//изображения window.setInterval(new_frame, 300);

var inc = 1;

var curFrame = 1;

var maxFrame = 6;

//Функия смены кадров function new_frame(){

//Покажем текущий кадр animate.src = "frames/" + curFrame + ".gif";

//Переход на следующий кадр curFrame += inc;

if (curFrame > maxFrame){

//Начинаем воспроизведение в обратном порядке curFrame = maxFrame;

inc = –1;

}

else if (curFrame == 0){

//Начинаем воспроизведение в прямом порядке curFrame = 1;

inc = 1;

}

}

</SCRIPT>

<IMG id = "animate" src = "frames/1.gif">

</BODY>

</HTML>

В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames и имеют имена вида номер.gif.

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

Иногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком‑то веб‑архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open() объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.

Пример 13.10. Создание и закрытие всплывающего окна

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»

"">

<HTML>

<HEAD>

<TITLE>Всплывающие окна</TITLE>

</HEAD>

<BODY>

<SCRIPT type = "text/javascript">

//Функция открывает окно\

function open_window(){

wnd = window.open("13.9.html", "asd", "height = 200, width = 350");

//Функция закрытия окна вызывается через 5 секунд window.setTimeout(wnd.close, 5000);

}

</SCRIPT>

<P>Щелкните

<INPUT type = "button" value = "кнопку" onClick = "open_window()">

чтобы открыть новое окно на 5 секунд.

</BODY>

</HTML>

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

Объект style

Объект style, который для большинства элементов страницы поддерживается как свойство, предоставляет большие возможности по манипулированию стилем элементов. Эти возможности такие же, как и доступные при использовании таблиц стилей: можно получать и указывать значения тех же свойств, что и с использованием CSS. Сначала рассмотрим, как формируются имена свойств объекта style.

Свойства объекта style

Итак, имена свойств CSS, состоящие из одного слова, в таком же виде и используются как имена свойств объекта style, например:

el.style.width = 100;

el.style.color = "red";

Здесь el предоставляет доступ к элементу страницы со значением атрибута id, равным «el».

В приложении 2, где приведен список основных свойств CSS, можно увидеть, что названия многих свойств состоят из нескольких слов, разделенных символом –. Так вот, имена таких свойств CSS преобразуются в имена свойств объекта style следующим образом: первое слово имени записывается cо строчной буквы, остальные слова начинаются с прописной буквы, все символы – из имени свойства удаляются. Ниже приведен пример для того же элемента el:

el.style.borderStyle = «solid»; //свойство border-style

el.style.borderColor = "blue"; //свойство border-color

el.style.borderBottomWidth = "10mm"; //свойство border-bottom-width

Как видно, значения свойств могут быть в тех же единицах измерения, которые применяются для CSS. Однако это хорошо до тех пор, пока не нужно производить вычисления с использованием текущих параметров элемента. Так, в приведенном выше примере el.style.borderBottomWidth вернет строковое значение «10mm». Удобно ли производить вычисления с такими значениями? В табл. 13.9 приведен перечень дополнительных свойств, поддерживаемых только интерпретатором браузера Internet Explorer, но значительно облегчающих программирование таких вещей, как перемещение элементов страницы.

Таблица 13.9. Дополнительные свойства объекта style

Примечание

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

Примеры использования объекта style

Теперь рассмотрим три примера, иллюстрирующих возможности элемента style. Первые два из них связаны с анимацией, а в последнем примере приводится реализация усовершенствованного меню на основе таблицы.

В первом примере реализуется перемещение изображений«шариков» внутри рамки (элемент DIV). Шарики имеют случайные первоначальные скорости и направления движения. Кроме того, при достижении стенок (рамки элемента DIV) они упруго он них отталкиваются. Страница примера выглядит так, как показано на рис. 13.4.

Рис. 13.4. Перемещение «шариков» внутри элемента DIV

Ниже приведен текст HTML‑документа, который показан на рис. 13.4 (пример 13.11).

Пример 13.11. Перемещающиеся элементы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»

"">

<HTML>

<HEAD>

<TITLE>Страница с анимацией</TITLE>

<STYLE type = "text/css">

.ball {position: absolute}

.ballarea {border-style: solid; border-width:1px;

position: absolute; background-color: white}

</STYLE>

</HEAD>

<BODY>

<DIV class = "ballarea" id = "area">

<!–Изображения-шарики–>

<IMG src = "balls/ball1.bmp" class = "ball" id = "ball1">

<IMG src = "balls/ball2.bmp" class = "ball" id = "ball2">

<IMG src = "balls/ball3.bmp" class = "ball" id = "ball3">

<IMG src = "balls/ball4.bmp" class = "ball" id = "ball4">

<IMG src = "balls/ball5.bmp" class = "ball" id = "ball5">

<SCRIPT type = "text/javascript">

//Позиционируем элемент DIV

area.style.left = area.style.top = "10mm";

area.style.width = area.style.height = 200;

//Установим размер изображений-шариков ball1.style.pixelWidth = ball1.style.pixelHeight = 16;

ball2.style.pixelWidth = ball2.style.pixelHeight = 16;

ball3.style.pixelWidth = ball3.style.pixelHeight = 16;

ball4.style.pixelWidth = ball4.style.pixelHeight = 16;

ball5.style.pixelWidth = ball5.style.pixelHeight = 16;

</SCRIPT>

</DIV>

<SCRIPT type = "text/javascript" src = "balls.js"></SCRIPT>

</BODY>

</HTML>

Здесь предполагается использование пяти изображений из папки balls. Как видно из примера, чтобы сценарий нормально работал с координатами и размером изображений, соответствующие свойства пришлось установить не в CSS, а опять же с помощью сценария.

Во внешний файл вынесен сценарий, отвечающий за перемещение изображений (файл balls.js). Cодержимое файла balls.js выглядит следующим образом (пример 13.12).

Пример 13.12. Содержимое файла balls.js

//Массив со ссылками на объекты-изображения шариков var balls = [ball1, ball2, ball3, ball4, ball5];

//Массивы скоростей по горизонтали и вертикали (от –10 до 10)

var xSpeed = [rand(–10,10), rand(–10,10), rand(–10,10),

rand(–10,10), rand(–10,10)];

var ySpeed = [rand(–10,10), rand(–10,10), rand(–10,10),

rand(–10,10), rand(–10,10)];

//Минимальные значения координат изображений var minX = ball1.style.pixelLeft;

var minY = ball1.style.pixelTop;

//Максимальные значения координат изображений var maxX = area.style.pixelWidth + minX – balls[0].style.pixelWidth;

var maxY = area.style.pixelHeight + minY – balls[0].style.pixelHeight;

//Назначаем функцию обновления изображения, вызываемую по таймеру window.setInterval(redraw, 100);

//Функция генерации случайных значений function rand(min, max){

return Math.random()*(max–min)+min;

}

//Функция обновления координат и перерисовки изображений function redraw(){

var i, newX, newY;

for (i=0; i<balls.length; i++){

//Вычисляем новое положение шарика newX = balls[i].style.pixelLeft + xSpeed[i];

newY = balls[i].style.pixelTop + ySpeed[i];

//Проверка столкновения с границами if (newX > maxX){

newX = maxX;

xSpeed[i] = –xSpeed[i];

}

else if (newX < minX){

newX = minX;

xSpeed[i] = –xSpeed[i];

}

if (newY > maxY){

newY = maxY;

ySpeed[i] = –ySpeed[i];

}

else if (newY < minY){

newY = minY;

ySpeed[i] = –ySpeed[i];

}

//Наконец, перемещаем изображение balls[i].style.pixelLeft = newX;

balls[i].style.pixelTop = newY;

}

}

В следующем примере рассматривается сценарий, позволяющий случайным образом изменять цвет текста, для которого задан определенный стилевой класс. Стилевой класс в примере имеет название colored. Пример разбит на две части: собственно сценарий (файл coloredtext.js) и HTML‑документ, использующий возможности этого сценария.

Для начала рассмотрим сам сценарий, код которого приведен ниже (пример 13.13).

Пример 13.13. Содержимое файла coloredtext.js

//Поиск всех элементов, имеющих класс «colored»

var i, j = 0;

var elements = [];

for (i=0; i<document.all.length; i++){

if (document.all(i).className == "colored"){

elements[j] = document.all(i);

j++;

}

}

//RGB-составляющие цвета текста var R = 0, G = 0, B = 0; //По умолчанию цвет черный

//Назначаем функцию перерисовки window.setInterval(redraw, 50);

//Функция генерации случайных значений function rand(min, max){

return Math.random()*(max–min)+min;

}

function redraw(){

//Вычисляем новые значения составляющих цвета

R += rand(–8, 8);

R = (R>=0) ? R : 0;

R = (R<=255) ? R : 255;

G += rand(–8, 8);

G = (G>=0) ? G : 0;

G = (G<=255) ? G : 255;

B += rand(–8, 8);

B = (B>=0) ? B : 0;

B = (B<=255) ? B : 255;

//Установка нового цвета для всех элементов for (i=0; i<elements.length; i++){

elements[i].style.color =

"rgb(" + R + "," + G + "," + B + ")";

}

}

Этот сценарий работает следующим образом. После загрузки содержимого документа (для этого файл должен подключаться к документу перед закрывающим тегом </BODY>) производится просмотр всей коллекции all документа, и в массив elements помещаются ссылки на все элементы, имеющие стилевой класс colored. Кроме обозначения элементов, цвет которых нужно изменять, этот стилевой класс больше ни для чего не используется.

Изменение цвета в примере осуществляется по таймеру. Значения RGB‑составляющих цвета случайным образом изменяются на небольшие значения, что обеспечивает эффект этакого плавного перехода цвета. Еще следует отметить, что цвет всех отобранных элементов всегда одинаков. Это сделано для упрощения программы.

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

Пример 13.14. Страница с разноцветным текстом

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»

"">

<HTML>

<HEAD>

<TITLE>Разноцветный текст</TITLE>

<STYLE type = "text/css">

.colored {}

</STYLE>

</HEAD>

<BODY>

<H1>Обычный заголовок</H1>

<H1 class = "colored">Разноцветный заголовок</H1>

<P class>Обычный текст

<P class = "colored">Разноцветный текст

<SCRIPT type = "text/javascript" src = "coloredtext.js"></SCRIPT>

</BODY>

</HTML>

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

Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13.5.

Рис. 13.5. Открыто первое меню

Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13.6.

Рис. 13.6. Открыто второе меню

Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML‑документ и сценарий (файл popup_menu.js). Сначала разберем текст HTML‑документа (пример 13.15).

Пример 13.15. Документ со строкой меню

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»>

<HTML>

<HEAD>

<TITLE>Страница с меню</TITLE>

<STYLE type = "text/css">

.item {background-color: rgb(170, 170, 170)}

.selected {background-color: magenta}

.menu {border-style: ridge; visibility: visible; position: absolute}

.hidden {display: none}

.menu_line {border-style: solid; border-width: 1px;

background-color: rgb(170,170,170); width:100%}

</STYLE>

<SCRIPT src = "popup_menu.js" type = "text/javascript"></SCRIPT>

</HEAD>

<BODY>

<!–Создаем первое меню (изначально оно скрывается)–>

<TABLE id = "menu1" class = "hidden">

<!–Первый пункт меню–>

<TR id = "menu1_item1" class = "item" onClick = "menu1_item1_click()"

onMouseOver = "menu1_item1.className = 'selected'"

onMouseOut = "menu1_item1.className = 'item'">

<TD><IMG src = "icons/1.jpg"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "menu1_item2" class = "item" onClick = "menu1_item2_click()"

onMouseOver = "menu1_item2.className = 'selected'"

onMouseOut = "menu1_item2.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "menu1_item3" class = "item" onClick = "menu1_item3_click()"

onMouseOver = "menu1_item3.className = 'selected'"

onMouseOut = "menu1_item3.className = 'item'">

<TD><IMG src = "icons/3.jpg"><TD>Третий пункт меню

<!–Четвертый пункт меню–>

<TR id = "menu1_item4" class = "item" onClick = "menu1_item4_click()"

onMouseOver = "menu1_item4.className = 'selected'"

onMouseOut = "menu1_item4.className = 'item'">

<TD><IMG src = "icons/4.jpg"><TD>Четвертый пункт меню

<!–Пятый пункт меню–>

<TR id = "menu1_item5" class = "item" onClick = "menu1_item5_click()"

onMouseOver = "menu1_item5.className = 'selected'"

onMouseOut = "menu1_item5.className = 'item'">

<TD><IMG src = "icons/5.jpg"><TD>Пятый пункт меню

</TABLE>

<!–Создаем второе меню (изначально оно также скрывается)–>

<TABLE id = "menu2" class = "hidden">

<!–Первый пункт меню–>

<TR id = "menu2_item1" class = "item" onClick = "menu2_item1_click()"

onMouseOver = "menu2_item1.className = 'selected'"

onMouseOut = "menu2_item1.className = 'item'">

<TD><IMG src = "balls/ball1.bmp"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "menu2_item2" class = "item" onClick = "menu2_item2_click()"

onMouseOver = "menu2_item2.className = 'selected'"

onMouseOut = "menu2_item2.className = 'item'">

<TD><IMG src = "balls/ball2.bmp"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "menu2_item3" class = "item" onClick = "menu2_item3_click()"

onMouseOver = "menu2_item3.className = 'selected'"

onMouseOut = "menu2_item3.className = 'item'">

<TD><IMG src = "balls/ball3.bmp"><TD>Третий пункт меню

</TABLE>

<!–Вверху страницы организуется строка меню–>

<TABLE id = "main_menu1" class = "menu_line">

<COL span = "2" width = "150">

<COL width = "*">

<TR>

<TD class = "item" id = "main_item1"

onClick = "show_menu(menu1, main_menu1, main_item1)"

onMouseOver = "main_item1.className = 'selected'"

onMouseOut = "main_item1.className = 'item'">Показать меню1

<TD class = "item" id = "main_item2"

onClick = "show_menu(menu2, main_menu1, main_item2)"

onMouseOver = "main_item2.className = 'selected'"

onMouseOut = "main_item2.className = 'item'">Показать меню2

<TD><!-Пустая ячейка, просто занимает место–>

</TABLE> <!–Далее идет остальное содержимое страницы–>

<P>Текст страницы...

</BODY>

</HTML>

Хотя документ практически не содержит текста, являющегося обычным содержимым страницы (ведь мы рассматриваем не наполнение страницы текстов, а меню), он все равно получился довольно объемным. Больше всего места в документе примера 13.5 занимают описания двух меню. Описание первого меню практически не отличается от рассмотренного ранее в примере 13.6. Второе же меню, обозначенное как menu2, создано по такому же шаблону.

В таблицу стилей пришлось добавить новый стиль menu_line. После этого очень просто создавать любое количество строк меню на странице. При создании строки меню основной работой является настройка пунктов, которые будут открывать нужные меню (см. определение пунктов в таблице с id, равным main_menu1 в примере 13.5).

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

Ниже приводится текст сценария из файла popup_menu.js (пример 13.16).

Пример 13.16. Содержимое файла popup_menu.js

/*

Функция показывает заданное всплывающее меню под заданным главным пунктом заданного меню

*/

var lastMenu = null; //Предыдущее показанное меню function show_menu(menu, main_menu, item){

if (menu.className == "menu"){

//Закрываем открытое меню hide_menu();

return;

}

if (lastMenu != null)

//Скрываем прошлое меню hide_menu();

//Определяем положение меню menu.className = "menu";

menu.style.top = main_menu.offsetTop + main_menu.clientHeight;

menu.style.left = main_menu.offsetLeft + item.offsetLeft;

lastMenu = menu;

}

//Функция скрывает меню, открытое ранее function hide_menu(){

lastMenu.className = "hidden";

lastMenu = null;

}

/*

Далее содержатся функции-обработчики для каждого пункта меню "menu1"

*/

function menu1_item1_click(){

hide_menu();

alert("Вы выбрали первый пункт в меню1");

//Другие действия...

}

function menu1_item2_click(){

hide_menu();

alert("Вы выбрали второй пункт в меню1");

//Другие действия...

}

function menu1_item3_click(){

hide_menu();

alert("Вы выбрали третий пункт в меню1");

//Другие действия...

}

function menu1_item4_click(){

hide_menu();

alert("Вы выбрали четвертый пункт в меню1");

//Другие действия...

}

function menu1_item5_click(){

hide_menu();

alert("Вы выбрали пятый пункт в меню1");

//Другие действия...

}

/*

Далее содержатся функции-обработчики для каждого пункта меню "menu2"

*/

function menu2_item1_click(){

hide_menu();

alert("Вы выбрали первый пункт в меню2");

//Другие действия...

}

function menu2_item2_click(){

hide_menu();

alert("Вы выбрали второй пункт в меню2");

//Другие действия...

}

function menu2_item3_click(){

hide_menu();

alert("Вы выбрали третий пункт в меню2");

//Другие действия...

}

Первая функция приведенного в примере 13.16 сценария отвечает за правильное отображение меню. Первый параметр является ссылкой на показываемое меню (таблица в HTML‑документе).

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

Если пользователь открыл меню, но потом передумал выбирать какой‑либо пункт, он должен иметь возможность закрыть меню. В рассматриваемом примере для закрытия меню пользователь должен повторно выбрать тот же самый пункт строки меню.

Основной объем сценария составляют обработчики выбора пунктов меню. Думаю, принцип именования функций‑обработчиков в зависимости от принадлежности в меню очевиден. Новой же деталью является наличие в каждом обработчике вызова функции hide_menu(). Этим достигается закрытие меню после выбора одного из его пунктов.

Объект screen

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

Свойства объекта screen приводятся в табл. 13.10.

Таблица 13.10. Свойства объекта screen

Объект screen может представлять большой интерес для тех, кто заботится о том, чтобы пользователь получал максимум комфорта при просмотре веб‑страниц независимо, например, от разрешения своего монитора.

Объект event

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

Свойства объекта event

Итак, используя браузер Internet Explorer, получить доступ к объекту event можно, как к свойству объекта window. Можно также указывать event как глобальный объект. Свойства объекта event приведены в табл. 13.11.

Таблица 13.11. Свойства объекта event

Примеры использования объекта event

Для демонстрации работы с объектом event рассмотрены два небольших примера, использующие информацию о положении указателя и состоянии кнопок мыши.

В первом примере используется возможность получения координат указателя мыши относительно различных объектов документа. Текст HTML‑документа примера приведен ниже. Обратите внимание, что благодаря «всплытию» событий отслеживать перемещение мыши можно, только написав обработчик события onMouseMove для элемента BODY (это самый верхний элемент, до которого доходит событие) (пример 13.17).

Пример 13.17. Отслеживание положения мыши

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<HTML>

<HEAD>

<TITLE>Слежение за мышью</TITLE>

<STYLE type = "text/css">

.category {font-weight: bold}

.value {font-family: "courier new"}

</STYLE>

<SCRIPT type = "text/javascript">

function move(){

//Записываем в элементы страницы текущее значение

//координат указателя мыши scr.innerText = event.screenX + "x" + event.screenY;

wnd.innerText = event.clientX + "x" + event.clientY;

element.innerText = event.offsetX + "x" + event.offsetY;

prnt.innerText = event.x + "x" + event.y;

//Индикация состояния мыши switch (event.button){

case 0: mouse.innerText = "0|0|0"; break;

case 1: mouse.innerText = "1|0|0"; break;

case 2: mouse.innerText = "0|0|1"; break;

case 3: mouse.innerText = "1|0|1"; break;

case 4: mouse.innerText = "0|1|0"; break;

case 5: mouse.innerText = "1|1|0"; break;

case 6: mouse.innerText = "0|1|1"; break;

case 7: mouse.innerText = "1|1|1"; break;

}

}

</SCRIPT>

</HEAD>

<BODY onMouseMove = "move()">

<DIV style = "border-style: solid; border-width:1px; width: 50%;

position: absolute; left: 50%; background-color: yellow; padding: 2mm">

<SPAN class = "category">Экранные координаты: </SPAN>

<SPAN class = "value" id = "scr"></SPAN><BR>

<SPAN class = "category">Оконные координаты: </SPAN>

<SPAN class = "value" id = "wnd"></SPAN><BR>

<SPAN class = "category">Относительно элемента: </SPAN>

<SPAN class = "value" id = "element"></SPAN><BR>

<SPAN class = "category">Относительно родителя: </SPAN>

<SPAN class = "value" id = "prnt"></SPAN>

<P><SPAN class = "category">Кнопки мыши (л|c|п): </SPAN>

<SPAN class = "value" id = "mouse"></SPAN>

</DIV>

<H1>Заголовок</H1>

<P>Содержимое страницы...

</BODY>

</HTML>

Приведенный HTML‑документ выглядит так, как показано на рис. 13.7.

Рис. 13.7. Отслеживание указателя и состояния кнопок мыши

В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13.18).

Пример 13.18. Перетаскивание элементов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>

<HTML>

<HEAD>

<TITLE>Перемещение элементов страницы</TITLE>

<SCRIPT type = "text/javascript">

var dX, dY; //Координаты точки, за которую "держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент

//Функция начинает перемещение элемента function start(){

if (event)

fMoving = true;

element = event.srcElement;

//Сохраняем координаты "хватания" элемента dX = event.offsetX;

dY = event.offsetY;

//Для перемещения элемент должен свободно позиционироваться element.style.position = "absolute";

}

//Функция перемещения элемента function move(){

if (fMoving){

//Установим новые координаты для элемента element.style.pixelLeft = event.x – dX;

element.style.pixelTop = event.y – dY;

}

}

</SCRIPT>

</HEAD>

<BODY onMouseMove="move()" onMouseDown = "start()"

onMouseUp = "fMoving = false">

<IMG alt = "Перемещаемый рисунок" width = "100" height = "100">

<P>Перемещаемый текст

<H1>Перемещаемый заголовок</H1>

</BODY>

</HTML>

Документ, текст которого приведен в примере 13.18, после перетаскивания элементов показан на рис. 13.8.

Рис. 13.8. Перетаскивание элементов страницы

Свободно позиционировать можно практически любой элемент страницы, однако наиболее эффектно выглядит перетаскивание изображений. Несмотря на кажущуюся ненужность, перетаскивание элементов может все же оказаться полезным при повышении «дружественности» интерфейса веб‑страниц. Представьте себе, что вы, например, совершаете покупки в интернет‑магазине. Понравился товар – перетаскиваете его изображение в свою корзину (определенная область окна). Хотите отказаться от покупки выбранного ранее товара – перетаскиваете его изображение за пределы корзины. Удобно, не так ли?

Глава 14 Создаем настоящий веб-сайт

После достаточно долгого изучения создания HTML‑документов самих по себе, после изучения каскадных таблиц стилей и того, как добавляются и действуют сценарии в документах, наконец‑то рассмотрим применение описанных ранее технологий на примере создания веб‑сайта.

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

14.1. Содержание сайта

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

Итак, наш информационный ресурс о яблоках будет содержать следующую информацию (кроме стартовой страницы и страницы информации о сайте):

• краткая история развития яблочной культуры;

• информация о пищевых свойствах яблок;

• информация о сборе и хранении яблок;

• информация о сортах яблок;

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

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

14.2. Навигация по сайту

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

• Главная (переход на главную страницу, файл index.html).

• Информация, содержит следующие пункты:

· История (файл history.html);

· Пищевая ценность яблок (файл values.html);

· Сбор и хранение яблок (файл collectsave.html).

• Сорта яблок, содержит следующие пункты:

· Летние (файл summer.html);

· Осенние (файл autumn.html);

· Зимние (файл winter.html);

· Позднезимние (файл deepwinter.html).

• Рецепты, содержит следующие пункты:

· Салаты с яблоками (файл salat.html);

· Супы с яблоками (файл soup.html);

· Мясные блюда с яблоками (файл meat.html);

· Рыбные блюда с яблоками (файл fish.html).

• О проекте (переход на страницу с информацией о сайте, файл about.html).

Внешний вид меню навигации показан на рис. 14.1. Реализация меню будет рассмотрена позже.

Рис. 14.1. Внешний вид меню навигации

14.3. Расположение файлов

Теперь определимся с тем, какие папки будут созданы и как в них будут располагаться файлы, используемые для сайта. Сразу отметим, что стартовый файл – index.html.

Пусть рассматривается папка, в которой находится сайт. Тогда ее содержимое можно представить следующим списком:

• все HTML‑файлы сайта (index.html, history.html и т. д.);

• папка с именем css, в которой находятся используемые таблицы стилей;

• папка с именем script, в которой находятся все используемые сценарии;

• папка с именем apples, в которой находятся иллюстрации – картинки яблок (для чего они, см. далее).

В следующем разделе будет пояснено, почему все HTML‑файлы сайта помещаются в одну папку, а не группируются в папки по своей тематике.

14.4. Реализация сайта

Шаблон и внешний вид страниц

Итак, внешний вид страниц строится на основе таблиц. Чтобы сделать наполнение страниц сайта как можно менее трудоемким, разработан HTML‑файл шаблонной страницы (шаблон.html), его содержимое приведено в примере 14.1.

Пример 14.1. Содержимое файла шаблон.html

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<HTML>

<HEAD>

<TITLE>Шаблон</TITLE>

<META name = "Keywords" content = "яблоки, яблоневая культура,

история, сорта яблок, сорт яблок, рецепты, сбор, хранение">

<META http-equiv = "Content-Type" content = "text/html;

charset=windows-1251">

<LINK type = "text/css" href = "css/menu.css" rel = "stylesheet">

<LINK type = "text/css" href = "css/page.css" rel = "stylesheet">

<SCRIPT type = "text/javascript" src = "script/popup_menu.js"></SCRIPT>

</HEAD>

<BODY onClick = "hide_menu();">

<A id = "_start"></A>

<!–Вставка строки меню–>

<SCRIPT type = "text/javascript" src = "script/create_menu.js"></SCRIPT>

<TABLE class = "main_table">

<COL width = "70" class = "info">

<COL width = "*" class = "content">

<TR>

<TD class = "info">

<!–Здесь содержится дополнительная информация, реклама и др.

Загружается сценарием–>

<SCRIPT type = "text/javascript" src = "script/load_info.js"></SCRIPT>

</TD>

<TD class = "content">

<!–Далее идет содержимое страницы–>

</TD>

</TR>

<TR class = "copyright">

<TD colspan = "2">

<!–Информация об авторском праве и др. Загружается сценарием–>

<SCRIPT type = "text/javascript" src = "script/copyright.js"></SCRIPT>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Чтобы сделать из приведенного в примере 14.1 файла страницу на конкретную тему, достаточно изменить название страницы, а также добавить на нее содержимое (место вставки содержимого указано HTML‑комментарием). Страница шаблона выглядит так, как показано на рис. 14.2.

Рис. 14.2. Внешний вид страницы шаблона

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

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

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

Чтобы такого не случилось, можно добавить, например, в начало и конец текста каждой страницы гиперссылку на дополнительную страницу сайта, в которой содержится оглавление в виде гиперссылок. Тогда пользователь «ущербного» браузера сможет перемещаться по страницам сайта. Если же браузер пользователя поддерживает сценарии, то упомянутые гиперссылки целесообразно скрывать, для чего им можно присвоить идентификаторы, например index1, index2, а в один из файлов сценариев вставить следующие строки:

index1.style.display = «none»;

index2.style.display = "none";

Итак, после рассмотрения файла шаблона страниц сайта можно назвать первую причину, по которой все файлы помещаются в одной папке, – это отсутствие необходимости изменения значений атрибутов в тегах <SCRIPT>, <LINK> и <META> каждой новой страницы. Вторая причина станет очевидна при рассмотрении сценария, создающего меню при загрузке страницы.

Реализация меню

Итак, с меню связаны два сценария. Первый находится в файле create_menu.js и записывает в HTML‑документ строки, создающие таблицы – раскрывающиеся меню и таблицу строки меню. Рассмотрим содержимое этого файла (пример 14.2).

Пример 14.2. Содержимое файла create_menu.js

/*

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

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

*/

//Определение меню "Информация"

document.write("<TABLE id = \"general\" class = \"hidden\">");

document.write("<TR id = \"general_history\" class = \"item\"");

document.write("onMouseOver = \"general_history.className = 'selected'\"");

document.write("onMouseOut = \"general_history.className = 'item'\">");

document.write("<TD><A href = \"history.html\">История</A></TD>");

document.write("</TR>");

document.write("<TR id = \"general_values\" class = \"item\"");

document.write("onMouseOver = \"general_values.className = 'selected'\"");

document.write("onMouseOut = \"general_values.className = 'item'\">");

document.write("<TD><A href = \"values.html\">Пищевая ценность яблок</A></TD>");

document.write("</TR>");

document.write("<TR id = \"general_collectsave\" class = \"item\"");

document.write("onMouseOver = \"general_collectsave.className = 'selected'\"");

document.write("onMouseOut = \"general_collectsave.className = 'item'\">");

document.write("<TD><A href = \"collectsave.html\">Сбор и хранение яблок</A></TD>");

document.write("</TR>");

document.write("</TABLE>");

//Определение меню «Сорта яблок»

document.write("<TABLE id = \"types\" class = \"hidden\">");

document.write("<TR id = \"types_summer\" class = \"item\"");

document.write("onMouseOver = \"types_summer.className = 'selected'\"");

document.write("onMouseOut = \"types_summer.className = 'item'\">");

document.write("<TD><A href = \"summer.html\">Летние</A></TD>");

document.write("</TR>");

document.write("<TR id = \"types_autumn\" class = \"item\"");

document.write("onMouseOver = \"types_autumn.className = 'selected'\"");

document.write("onMouseOut = \"types_autumn.className = 'item'\">");

document.write("<TD><A href = \"autumn.html\">Осенние</A></TD>");

document.write("</TR>");

document.write("<TR id = \"types_winter\" class = \"item\"");

document.write("onMouseOver = \"types_winter.className = 'selected'\"");

document.write("onMouseOut = \"types_winter.className = 'item'\">");

document.write("<TD><A href = \"winter.html\">Зимние</A></TD>");

document.write("</TR>");

document.write("<TR id = \"types_deepwinter\" class = \"item\"");

document.write("onMouseOver = \"types_deepwinter.className = 'selected'\"");

document.write("onMouseOut = \"types_deepwinter.className = 'item'\">");

document.write("<TD><A href = \"deepwinter.html\">Позднезимние</A></TD>");

document.write("</TR>");

document.write("</TABLE>");

//Определение меню «Рецепты»

document.write("<TABLE id = \"recepts\" class = \"hidden\">");

document.write("<TR id = \"recepts_salat\" class = \"item\"");

document.write("onMouseOver = \"recepts_salat.className = 'selected'\"");

document.write("onMouseOut = \"recepts_salat.className = 'item'\">");

document.write("<TD><A href = \"salat.html\">Салаты с яблоками</A></TD>");

document.write("</TR>");

document.write("<TR id = \"recepts_soup\" class = \"item\"");

document.write("onMouseOver = \"recepts_soup.className = 'selected'\"");

document.write("onMouseOut = \"recepts_soup.className = 'item'\">");

document.write("<TD><A href = \"soup.html\">Супы с яблоками</A></TD>");

document.write("</TR>");

document.write("<TR id = \"recepts_meat\" class = \"item\"");

document.write("onMouseOver = \"recepts_meat.className = 'selected'\"");

document.write("onMouseOut = \"recepts_meat.className = 'item'\">");

document.write("<TD><A href = \"meat.html\">Мясные блюда с яблоками</A></TD>");

document.write("</TR>");

document.write("<TR id = \"recepts_fish\" class = \"item\"");

document.write("onMouseOver = \"recepts_fish.className = 'selected'\"");

document.write("onMouseOut = \"recepts_fish.className = 'item'\">");

document.write("<TD><A href = \"fish.html\">Рыбные блюда с яблоками</A></TD>");

document.write("</TR>");

document.write("</TABLE>");

//Определение строки меню

document.write("<TABLE id = \"main_menu1\" class = \"menu_line\">");

document.write("<COL width = \"70\">");

document.write("<COL width = \"100\">");

document.write("<COL width = \"100\">");

document.write("<COL width = \"80\">");

document.write("<COL width = \"*\">");

document.write("<COL width = \"100\">");

document.write("<TR>");

document.write("<TD class = \"main_item\" id = \"main_index\"");

document.write("onMouseOver = \"main_index.className = 'main_selected'\"");

document.write("onMouseOut = \"main_index.className = 'main_item'\">");

document.write("<A href = \"index.html\" class = \"main_href\">Главная</A>");

document.write("</TD>");

document.write("<TD class = \"main_item\" id = \"main_general\"");

document.write("onClick = \"show_menu(general, main_menu1, main_general)\"");

document.write("onMouseOver = \"main_general.className = 'main_selected'\"");

document.write("onMouseOut = \"main_general.className = 'main_item'\">");

document.write("<A href = \"general\" class = \"main_href\" ");

document.write("onClick = \"event.returnValue = false\">");

document.write("Информация</A>");

document.write("</TD>");

document.write("<TD class = \"main_item\" id = \"main_types\"");

document.write("onClick = \"show_menu(types, main_menu1, main_types)\"");

document.write("onMouseOver = \"main_types.className = 'main_selected'\"");

document.write("onMouseOut = \"main_types.className = 'main_item'\">");

document.write("<A href = \"types\" class = \"main_href\" onClick = \"");

document.write("event.returnValue = false\">");

document.write("Сорта яблок</A>");

document.write("</TD>");

document.write("<TD class = \"main_item\" id = \"main_recepts\"");

document.write("onClick = \"show_menu(recepts, main_menu1, main_recepts)\"");

document.write("onMouseOver = \"main_recepts.className = 'main_selected'\"");

document.write("onMouseOut = \"main_recepts.className = 'main_item'\">");

document.write("<A href = \"recepts\" class = \"main_href\" onClick = \"");

document.write("event.returnValue = false\">");

document.write("Рецепты</A>");

document.write("</TD>");

document.write("<TD></TD>");

document.write("<TD class = \"main_item\" id = \"main_about\"");

document.write("onMouseOver = \"main_about.className = 'main_selected'\"");

document.write("onMouseOut = \"main_about.className = 'main_item'\">");

document.write("<A href = \"about.html\" class = \"main_href\"> О проекте</A>");

document.write("</TD>");

document.write("</TR>");

document.write("</TABLE>");

Приведенный пример является самым объемным в этой книге, однако его суть довольно проста. Вначале в документ записывается HTML‑код создания трех таблиц, соответствующих раскрывающимся меню (идентификаторы таблиц: general, types, recepts). Четвертая таблица, добавляемая в документ сценарием, является строкой меню. Начнем рассмотрение именно с нее.

Для начала перепишем HTML‑код, описывающий строку меню, в более наглядной форме (то есть рассмотрим создаваемую сценарием таблицу) (пример 14.3).

Пример 14.3. Таблица строки меню

<TABLE id = «main_menu1» class = «menu_line»>

<COL width = "70">

<COL width = "100">

<COL width = "100">

<COL width = "80">

<COL width = "*">

<COL width = "100">

<TR>

<TD class = "main_item" id = "main_index"

onMouseOver = "main_index.className = 'main_selected'"

onMouseOut = "main_index.className = 'main_item'">

<A href = "index.html" class = "main_href">Главная</A>

</TD>

<TD class = "main_item" id = "main_general"

onClick = "show_menu(general, main_menu1, main_general)"

onMouseOver = "main_general.className = 'main_selected'"

onMouseOut = "main_general.className = 'main_item'">

<A href = "general" class = "main_href"

onClick = "event.returnValue = false">

Информация

</A>

</TD>

<TD class = "main_item" id = "main_types"

onClick = "show_menu(types, main_menu1, main_types)"

onMouseOver = "main_types.className = 'main_selected'"

onMouseOut = "main_types.className = 'main_item'">

<A href = "types" class = "main_href" onClick = "

event.returnValue = false">

Сорта яблок

</A>

</TD>

<TD class = "main_item" id = "main_recepts"

onClick = "show_menu(recepts, main_menu1, main_recepts)"

onMouseOver = "main_recepts.className = 'main_selected'"

onMouseOut = "main_recepts.className = 'main_item'">

<A href = "recepts" class = "main_href" onClick = "

event.returnValue = false">

Рецепты

</A>

</TD>

<TD></TD><!–Эта ячейка просто занимает место–>

<TD class = "main_item" id = "main_about"

onMouseOver = "main_about.className = 'main_selected'"

onMouseOut = "main_about.className = 'main_item'">

<A href = "about.html" class = "main_href"> О проекте</A>

</TD>

</TR>

</TABLE>

Как можно увидеть, строка меню во многом аналогична той, что была создана в предыдущей главе. Исключением является использование гиперссылок вместо обработки событий onClick для пунктов Главная и О проекте. Конечно, можно было бы осуществлять переход к страницам для этих пунктов при обработке события onClick с использованием объекта location, но зачем? Ведь для простого перехода к другой странице проще использовать стандартную обработку выбора пользователем гиперссылки. Да и к тому же не нужно заботиться о форме указателя, когда он находится над текстом пункта меню.

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

Подсветка выделенных пунктов меню осуществляется за счет назначения ячейкам таблицы соответствующего стилевого класса при обработке событий onMouseOver (ячейка выделяется, включается подсветка) и onMouseOut (подсветка убирается).

При выборе одного из пунктов Информация, Сорта, Рецепты обработчиком события onClick вызывается функция show_menu(), показывающая меню возле выбранного пункта. Эта функция вместе с функцией hide_menu() находится в файле popup_menu.js. Они приводятся в примере 14.4.

Пример 14.4. Сценарий, показывающий и скрывающий всплывающее меню

var lastMenu = null; //Прошлое показанное меню

//Функция показывает меню function show_menu(menu, main_menu, item){

if (menu.className == "menu"){

//Закрываем открытое меню hide_menu();

return;

}

//Скрываем прошлое меню hide_menu();

//Определяем положение меню menu.className = "menu";

menu.style.top = main_menu.offsetTop + main_menu.clientHeight;

menu.style.left = main_menu.offsetLeft + item.offsetLeft;

lastMenu = menu;

//Сделаем так, чтобы до BODY событие onClick не дошло event.cancelBubble = true;

}

//Функция скрывает меню, открытое ранее

function hide_menu(){

if (lastMenu != null){

lastMenu.className = "hidden";

lastMenu = null;

}

}

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

<BODY onClick = «hide_menu();»>

Теперь рассмотрим, как реализованы раскрывающиеся меню. Они реализуются даже проще, чем сама строка меню. Как и в примерах предыдущей главы, раскрывающиеся меню основаны на использовании свободно позиционируемых таблиц (хотя это можно сделать на основе любого свободно позиционируемого элемента, например DIV, причем внешний вид такого меню будет ничуть не хуже). Каждая строка таблицы представляет собой отдельный пункт меню. Ниже приводится HTML‑код, добавляемый сценарием для создания раскрывающегося меню Информация (это меню самое маленькое и поэтому его реализацию удобнее изучать) (пример 14.5).

Пример 14.5. Таблица, соответствующая меню Информация

<TABLE id = «general» class = «hidden»>

<TR id = "general_history" class = "item"

onMouseOver = "general_history.className = 'selected'"

onMouseOut = "general_history.className = 'item'">

<TD><A href = "history.html">История</A></TD>

</TR>

<TR id = "general_values" class = "item"

onMouseOver = "general_values.className = 'selected'"

onMouseOut = "general_values.className = 'item'">

<TD><A href = "values.html">Пищевая ценность яблок</A></TD>

</TR>

<TR id = "general_collectsave" class = "item"

onMouseOver = "general_collectsave.className = 'selected'"

onMouseOut = "general_collectsave.className = 'item'">

<TD><A href = "collectsave.html">Сбор и хранение яблок</A></TD>

</TR>

</TABLE>

При просмотре текста примера 14.5 можно увидеть, что текст пунктов меню, как и текст пунктов строки меню, заключен в теги <A> и </A>. Это сделано для упрощения, ведь, кроме навигации (основная функция гиперссылок), других функций на меню не возлагается.

Подсветка выделенных пунктов меню осуществляется за счет изменения их стилевого класса при обработке событий onMouseOver и onMouseOut.

Следует отметить один недостаток использованной реализации меню: хотя и подсвечивается вся ячейка таблицы, «срабатывает» пункт меню только при щелчке кнопкой мыши на тексте гиперссылки. Это потому, что внутрь тегов <A> и </A> заключен только текст, а не вся ячейка таблицы. Это сделано лишь для того, чтобы не усложнять еще больше сценарий, создающий меню. Вы можете устранить этот недостаток самостоятельно, изменив фрагменты типа

<TD><A href = «history.html»>История</A></TD>

на

<A href = «history.html»><TD><A href = «history.html»>История</A></TD></A>

Если же просто поместить внутрь элемента A ячейку (не помещая еще и текст), то меню тоже будет работать, но форма указателя над текстом будет уже не та (текстовый I‑указатель).

Разворачивающиеся абзацы

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

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

Собственно так и реализовано представление рецептов на сайте. Фрагмент HTML‑документа, в котором используется описанный подход (разворачивающиеся абзацы), приведен в примере 14.6.

Пример 14.6. Использование разворачивающихся абзацев

...

<TD class = "content">

<!–Далее идет содержимое страницы–>

<P>Текст страницы...

<P class = "exp" onClick = "expand(recept1_body)">

<A href = "expand" class = "exp_ref"

onClick = "event.returnValue = false;">

Рецепт 1

</A>

<DIV class = "exp_hidden" id = "recept1_body">

<SPAN class = "process">

Порядок приготовления блюда

</SPAN>

<P class = "products">Состав блюда

</DIV>

<P class = "exp" onClick = "expand(recept2_body)">

<A href = "expand" class = "exp_ref"

onClick = "event.returnValue = false;">

Рецепт 2

</A>

<DIV class = "exp_hidden" id = "recept2_body">

<SPAN class = "process">

Порядок приготовления блюда

</SPAN>

<P class = "products">Состав блюда

</DIV>

<P>Прочий текст страницы...

</TD>

...

В приведенном выше примере, помимо текста, к содержимому страницы добавлены два рецепта (см. элементы, имеющие стилевой класс exp, разворачиваемая часть этих элементов имеет стилевой класс exp_hidden, когда она скрыта, и класс expboby, когда показана).

Страница, фрагмент которой приведен в примере 14.6, выглядит так, как показано на рис. 14.3.

Рис. 14.3. Представление рецептов

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

Пример 14.7. Сценарий, реализующий работу разворачивающихся абзацев

//Функция разворачивает или сворачивает абзац, на котором щелкнул

//пользователь (если, конечно, абзац для этого предназначен)

function expand(element){

if (element.className == "exp_hidden"){

//Показываем абзац element.className = "expbody";

}

else if (element.className == "expbody"){

//Скрываем элемент element.className = "exp_hidden";

}

}

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

Прочие сценарии

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

Первый из указанных сценариев находится в файле load_info.js и выглядит следующим образом (пример 14.8).

Пример 14.8. Содержимое файла load_info.js

/*

Сценарий в этом файле загружает картинки яблок

и рекламные сообщения

*/

//Функция генерации случайного значения (целого)

function rand(min, max){

return Math.floor(Math.random()*(max-min)+min);

}

//Загрузка изображения document.write("<TABLE width = \"100%\" height = \"100%\">");

document.write("<TR><TD><IMG id = \"apple_image\" width = \"100%\"");

document.write("src = \"apples/" + rand(1,14.9) + ".jpg\"></TD></TR>");

//Типа загрузка рекламы...

document.write("<TR><TD>Здесь могла быть Ваша реклама</TD></TR>");

document.write("</TABLE>");

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

Еще один сценарий используется для заполнения ячейки в нижней части страницы сведениями об авторских правах. Он записан в файле copyright.js и состоит из одной‑единственной строки:

document.write(«© Чиртик Александр 2006»);

Используемые таблицы стилей

В двух CSS‑файлах помещены используемые таблицы стилей. В файле page.css находится таблица стилей, используемая для оформления текста страниц (плюс оформление основной таблицы страниц) (пример 14.9).

Пример 14.9. Содержимое файла page.css

/*

Определения стилей для таблицы, форматирующей страницу

*/

TABLE.main_table {width: 100%; border-style: none;

background-color: green}

COL.info {width: 100px; background-color: rgb(180,255,200)}

COL.content {background-color: rgb(200,255,200)}

TR.copyright {background-color: green; color: white; text-align: right;

padding: 5; font-size: 3mm}

/*

Стили рецептов

*/

.process {font-size: 85%}

.products {font-style: italic; font-size: 85%}

/*

Прочие стили разметки

*/

H1 {text-align: center}

В файле menu.css находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 14.10).

Пример 14.10. Содержимое файла menu.css

/*

Стиль строки меню и ее пунктов

*/

.menu_line {border-style: none; background-color: green;

width:100%; text-align: center}

.main_item {background-color: green}

.main_selected {background-color: magenta}

A.main_href {color: rgb(230,230,230); text-decoration: none;

font-family: "times new roman"}

/*

Стиль пунктов меню

*/

.item {background-color: rgb(230,230,230)}

.selected {background-color: magenta}

A.main_href {}

/*

Стили отображаемого и спрятанного меню

*/

.menu {border-style: solid; border-width: 1px;

visibility: visible; position: absolute;

background-color: rgb(230,230,230); border-color: black}

.hidden {display: none}

/*

Определение стилей для разворачиваемых элементов exp – класс элемента, при щелчке кнопкой мыши на котором будет показан соответствующий элемент класса expbody

*/

.exp {background-color: rgb(150, 255, 200)}

.exp_ref {text-decoration: none; font-weight: bold}

.expbody {display: block; background-color: rgb(150, 255, 150)}

.exp_hidden {display: none}

В приведенных таблицах стилей использовано небольшое количество настроек, чтобы слишком не увеличивать размер таблиц.

14.5. Примеры работы сайта

При открытии сайта пользователь попадает на главную (стартовую) страницу (файл index.html), показанную на рис. 14.4.

Рис. 14.4. Главная страница сайта

Реализованная страница истории яблок особого интереса не представляет. Обратим внимание, как выглядит страница с рецептами, ведь там дополнительно используются реализованные нами разворачивающиеся абзацы. Итак, внешний вид страницы с рецептами приведен на рис. 14.5 (начало страницы).

Рис. 14.5. Страница с рецептами

Сами рецепты выглядят так, как показано на рис. 14.6.

Рис. 14.6. Страница с рецептами (сами рецепты)

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

Глава 15 Публикация сайта в Интернете

После того как пройден путь от изучения основ HTML до создания собственного сайта, наступило время выйти в большой мир, то есть опубликовать сайт в Интернете. Для этого нужно узнать еще совсем немного (на первый взгляд): как, где помещается сайт в Сети.

15.1. Ищем место для сайта

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

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

• ограничение на объем данных сайта (часто, но не всегда);

• отсутствие поддержки полезных сервисов и сценариев, выполняемых на сервере (например, PHP‑сценариев);

• довольно строгие требования к содержанию сайта и возможность удаления сайта (некоторые хостеры удаляют сайты, содержащие, например, файловые архивы);

• отсутствие гарантий постоянной готовности сервера, то есть вероятность (и иногда она бывает высокой), что ваш сайт будет недоступен пользователям Сети;

• более «слабое» оборудование по сравнению с серверами платного хостинга.

Кроме всего перечисленного, при пользовании бесплатным хостингом часто приходится расплачиваться местом страницы, отведенным под рекламу (баннеры, ссылки и пр.), ведь хостеру нужно как‑то зарабатывать деньги.

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

Чтобы получить информацию, где и на каких условиях вы можете разместить свой сайт, достаточно ввести слово «хостинг» или что‑то подобное в строке поиска любого поисковика, например Google ().

Не стоит оставлять без внимания и тот факт, что возможность размещения для зарегистрированных пользователей личного сайта на своем сервере предоставляют некоторые интернет‑порталы. Для таких сайтов бесплатно выделяется очень небольшой объем (5–10 Мбайт), но зато вероятность удаления сайта не более чем вероятность удаления учетной записи пользователя портала. Только следует помнить, что и здесь действует законодательство о цензуре. Для поделок начинающих мастеров такой хостинг подходит как нельзя лучше. Тем более что, помимо сайта, вы будете располагать еще и почтовым ящиком.

Для размещения созданного в предыдущей главе сайта воспользуемся услугами как раз интернет‑портала, а конкретно – интернет‑портала . Пользователю этого портала предоставляется 50 Мбайт на почтовый ящик и 5 Мбайт на личный сайт. Ну что же, для начала вполне хватит. К тому же здесь вполне снисходительно относятся к пользователям в отношении обязательного размещения рекламы на личном сайте – ее нет.

15.2. Доменное имя для сайта

Сайт мало просто разместить на сервере, доступном по Интернету. Его же нужно как‑то идентифицировать. Для сайта нужно заполучить доменное имя. Что же это такое?

Система доменных имен возникла как средство повышения удобства работы с сетью пользователя. Эта система первоначально обеспечивала возможность назначения компьютерам Сети символьных имен, которые преобразовываются в IP‑адреса серверами службы DNS. Сеть WWW позволяет не только определять адреса компьютеров Сети при использовании доменных имен, но и получить доступ к опубликованным на этих компьютерах ресурсам.

Рассмотрим, из чего состоит доменное имя на примере имени . Здесь www – это просто обозначение, что адрес в сети WWW. Итак, собственно доменное имя имеет вид: some.site.mysoft.com. Читать адрес нужно справа налево. При таком порядке разбора адреса получим следующую последовательность адресов доменов и поддоменов, которым принадлежит сайт с указанным адресом.

• com – домен первого уровня, самый верхний. В домены первого уровня входят ресурсы, объединенные по территориальному признаку (например, домены ru, by, de и т. д.) и типам организаций, использующих этот домен (например, com – коммерческие организации, gov – правительственные организации, edu – образовательные учреждения). Доменов верхнего уровня немного, и заполучить такое имя нельзя.

• mysoft.com – доменное имя второго уровня (поддомен домена com). Получить такое имя можно, но за плату. Оптимальный выбор для организаций.

• site.mysoft.com – доменное имя третьего уровня. Обычно такие имена могут бесплатно предоставляться пользователям бесплатного хостинга.

• some.site.mysoft.com – доменное имя четвертого уровня, в нашем примере идентифицирующее сайт.

Полным именем сайта будет some.site.mysoft.com/index.html, где последняя часть указывает, какой именно HTML‑файл открывать. Однако серверы, на которых размещаются ресурсы, предусматривают автоматическое преобразование к таким адресам. Могут различаться только имена страниц, открываемых по умолчанию.

Теперь вернемся к публикации сайта о яблоках. Используемый портал tut.by предоставляет для личных сайтов довольно короткие доменные адреса четвертого уровня вида: <имя_пользователя>.at.tut.by. Значит, сайт будет иметь имя applesite.at.tut.by.

15.3. Проблема стартовой страницы

Рассмотрим небольшой вопрос, связанный с различными именами стартовых страниц сайтов на различных серверах. Так, используемый домен at.tut.by предъявляет требование: стартовая страница должна иметь имя default.html. В соответствии с этим требованием стартовую страницу можно переименовать с index.html на default.html, а можно создать стартовую страницу‑редиректор, используя элемент META следующим образом (пример 15.1).

Пример 15.1. Страница-редиректор

<HTML>

<HEAD>

<META http-equiv = "refresh" content = "0; url = index.html">

</HEAD>

</HTML>

Приведенный в примере HTML‑документ нужно назвать default.html и скопировать вместе с остальными страницами сайта (как это делается, рассказано далее). При открытии файла default.html браузер пользователя сразу перейдет к файлу index.html.

15.4. Администрирование сайта

Итак, непосредственно администрирование сайта (копирование и изменение информации на сервере) может осуществляться как минимум двумя путями. Первый из них – наименее удобный, пригодный для небольших изменений сайта (например, для закачки нового файла) – это применение форм, своеобразных файловых менеджеров, предоставляемых хостерами. Второй способ – куда более мощный и удобный – использование файловых менеджеров, поддерживающих соединение по протоколу FTP (Проводник Windows, FAR Manager и т. д.). Рассмотрим оба способа.

Использование форм

Этот вопрос удобнее рассматривать на конкретном примере, в данном случае на примере at.tut.by. Итак, чтобы приступить к редактированию сайта, нужно войти под зарегистрированным ранее именем и перейти по ссылке Личный сайт. Здесь вы увидите форму, похожую на ту, что приводится на рис. 15.1.

Рис. 15.1. Форма администрирования сайта

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

Использование Проводника Windows

Чтобы получить возможность управлять файлами и папками сайта прямо из Проводника, достаточно подключиться к соответствующему FTP‑серверу. Для tut.by этим сервером является ftp.tut.by.

Чтобы подключиться к FTP‑серверу, в адресной строке вводится строка вида:

ftp://<имя_пользователя>:<пароль>@ftp.tut.by

Пароль можно прямо в строке адреса и не вводить, тогда его нужно будет ввести в окне, показанном на рис. 15.2 (или подобном).

Рис. 15.2. Окно авторизации пользователя FTP-сервера

В данном случае показано окно, которое появилось при подключении с использованием строки ftp://applesite@ftp.tut.by

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

Рис. 15.3. Папка сайта в Проводнике

Показанное на рис. 15.3 окно использовалось для помещения файлов сайта на сервер. Ненужность ручного создания папок и копирования каждого файла в отдельности при этом сэкономила много, прежде всего, оплачиваемого времени подключения к Интернету.

После того как файлы сайта помещены на сервер, можно открыть браузер, ввести в строке адреса applesite.at.tut.by и посмотреть, как сайт открывается уже непосредственно с сервера в Интернете (рис. 15.4).

Рис. 15.4. Сайт при загрузке с сервера

Ну вот, собственно, и все, что необходимо для публикации сайта. Теперь он стал доступен многочисленной аудитории Интернета.

15.5. Увеличение посещаемости сайта

Здесь мы кратко рассмотрим основные направления увеличения посещаемости сайтов. На самом деле эта тема очень объемна. Существует множество методов, как честных так и не очень, направленных на рост посещаемости сайта. Раскруткой сайтов занимается множество компаний, да и качественной информации в Интернете на этот счет очень много, поэтому ограничимся общими замечаниями на эту тему.

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

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

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

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

Современные поисковые системы производят автоматическое индексирование сайтов специальными программами (так называемые роботы). При этом очень часто может анализироваться не только содержимое элементов META, но и содержимое самого сайта. Кстати, созданный в предыдущей главе сайт несколько неудачен для подобного индексирования: гиперссылки создаются сценарием, что делает невозможном перемещение по страницам при индексировании сайта. Способ решения проблемы с гиперссылками уже рассмотрен в предыдущей главе. Можно также постараться сформировать текст главной страницы сайта таким образом, чтобы в нем упоминались все ключевые слова (главное, чтобы получился нормальный текст, а не «масло масляное»).

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

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

Итак, на главной странице большинства поисковиков (например, yandex.ru, rambler.ru, tut.by, aport.ru, google.com) есть ссылка типа Добавить ресурс. При переходе по такой ссылке вам будет предложено заполнить форму с информацией о вашем сайте. Если используется стартовая страница‑редиректор, то лучше все‑таки указать путь к настоящей стартовой странице, чтобы не возникло проблем при индексировании. В данном случае этот адрес имеет вид:

applesile.at.tut.by/index.html

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

Заключение

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

При изложении я старался придерживаться стандарта языка HTML 4.01. Однако для того чтобы создавать полностью переносимые сайты, нужно знать не только HTML на уровне стандарта организации W3C. Дело в том, что браузеры различных производителей могут не только по‑разному реализовывать поведение стандартных атрибутов HTML‑элементов, но и предоставлять множество дополнительных возможностей, поддержка которых браузерами других производителей отнюдь не гарантирована.

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

• / – документация к браузеру Microsoft Internet Explorer, информация об HTML и не только;

• / – документация к браузеру Opera.

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

И конечно же, нужно помнить про официальный сайт W3C: . Здесь есть многое, практически все о современных интернет‑технологиях.

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

На этом я с вами прощаюсь. Творческих вам успехов!

Приложение 1 Именованные ссылки на символы

В табл. П1.1 приведен список именованных ссылок на символы.

Таблица П1.1. Список ссылок на символы (стандарт ISO8859–1)

Полный список греческих букв, а также математические и прочие символы приведены в табл. П1.2.

Таблица П1.2. Греческие буквы, математические и прочие символы

Приложение 2 Свойства CSS

Ввиду большого количества свойств их список в главах книги полностью не приводится. Здесь представлен более полный список свойств, доступных в таблицах стилей. Свойства задания цвета текста и фона представлены в табл. П2.1. Свойства для настройки рамок, отступов и полей приведены в табл. П2.2. Свойства отображения текста приведены в табл. П2.3. Свойства, применяемые к спискам, приведены в табл. П2.4. Наконец, свойства позиционирования, размера и видимости элементов находятся в табл. П2.5.

Таблица П2.1. Цвет и фон

Таблица П2.2. Рамки, поля и отступы

Таблица П2.3. Свойства отображения текста

Таблица П2.4. Списки

Таблица П2.5 Свойства позиционирования, размера и видимости элементов страницы

Приложение 3 Названия основных цветов

В табл. П3.1 приведен список названий основных цветов и их численные значения.

Таблица П3.1. Название основных цветов и их RGB-значения

Оглавление

Введение

Глава 1 . Введение в HTML

  1.1. Краткая история HTML

  1.2. Базовые понятия HTML

    Элементы

    Атрибуты

    Вложенные элементы

    Блочные и встроенные элементы

  1.3. Просмотр HTML-документа

  1.4. Универсальный идентификатор ресурса URI

Глава 2 . Структура HTML-документа

  2.1. Информация о версии HTML

  2.2. Элемент HTML

  2.3. Заголовок

    Элемент HEAD

    Элемент TITLE

    Элемент BASE

    Метаданные

  2.4. Тело HTML-документа

Глава 3 . Текст

  3.1. Особенности ввода текста

  3.2. Форматирование текста

    Задание начертания текста

    Задание шрифта текста

    Задание выравнивания текста

    Сохранение авторского форматирования

    Запрет разрыва строки

    Переносы

    Обтекание текстом нетекстовых элементов

  3.3. Структурирование текста

    Разбиение на абзацы

    Заголовки

    Задание типов фраз

    Цитаты

    Указание изменений в документе

    Контактная информация

  3.4. Комментарии в HTML-коде

Глава 4 . Списки

  4.1. Маркированные списки

  4.2. Нумерованные списки

  4.3. Списки определений

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

Глава 5 . Гиперссылки

  5.1. Простой переход к ресурсам

    Навигация между HTML-документами

    Загрузка файлов

    Ссылки на другие службы

  5.2. Навигация в пределах документа

  5.3. Прочие атрибуты гиперссылок

Глава 6 . Линейки, изображения, внедренные объекты

  6.1. Линейки

  6.2. Изображения

    Изображения-гиперссылки

    Изображения-карты

  6.3. Добавление фоновой музыки

  6.4. Простое проигрывание видео

  6.5. Внедрение объектов

Глава 7 . Таблицы

  7.1. Структура простейшей таблицы

  7.2. Элементы таблицы

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

    Параметры отображения таблицы

    Параметры отображения строк таблицы

    Параметры отображения ячеек. Слияние ячеек

    Ячейки заголовков

  7.3. Структурирование таблицы

    Группировка строк

    Описание и группировка столбцов

    Особенности задания ширины столбцов

  7.4. Использование таблиц для формирования дизайна HTML-документа

Глава 8 . Фреймы

  8.1. Понятие фрейма

  8.2. Создание набора фреймов

  8.3. Новые возможности гиперссылок

    Целевой фрейм отдельных гиперссылок

    Целевой фрейм по умолчанию

  8.4. Элемент NOFRAMES

  8.5. Плавающие фреймы

  8.6. Замена фреймов внедренными HTML-документами

Глава 9 . Формы

  9.1. Создание формы

  9.2. Элементы управления формы

    Стандартные элементы управления

    Многострочное текстовое поле

    Снова кнопки

    Меню

    Подписи элементов управления

  9.3. Группировка элементов управления

Глава 10 . Введение в CSS

  10.1. Возможности CSS

  10.2. Внешние и встроенные таблицы стилей

  10.3. Записи таблицы стилей

    Правила отображения HTML-элементов

    Использование стилевых классов

    Задание отображения единичных элементов документа

    Контекстные селекторы

    Комментарии в таблице стилей

  10.4. Порядок применения стилей

  10.5. Единицы измерения CSS

    Линейный размер и положение

    Цвета

  10.6. Скрытие таблиц стилей

Глава 11 . Использование таблиц стилей

  11.1. Шрифт

  11.2. Стиль текста

  11.3. Cписки

  11.4. Границы

  11.5. Поля и отступы

  11.6. Цвет и фон

  11.7. Свободное позиционирование

  11.8. Использование элементов DIV и SPAN

  11.9. Псевдоклассы гиперссылок

  11.10. Псевдоклассы текста

  11.11. Создание CSS для различных устройств

Глава 12 . Краткий курс JavaScript

  12.1. Замечание о строках кода JavaScript

  12.2. Комментарии

  12.3. Типы данных, переменные, выражения

  12.4. Простые и составные операторы

  12.5. Операторы языка JavaScript

    Арифметические операторы. Инкремент и декремент

    Логические операторы и операторы сравнения

    Двоичные операторы

    Приоритет операторов

    Условные операторы

    Циклы

    Операторы break и continue

    Оператор запятая

  12.6. Функции

    Пользовательские функции

    Встроенные функции JavaScript

    Глобальные и локальные переменные

    Ссылки на функции

  12.7. Массивы

  12.8. Работа с объектами

    Понятие объекта. Свойства и методы

    Встроенные классы JavaScript

  12.9. Взаимодействие с пользователем

  12.10. Поиск ошибок в программе

Глава 13 . Динамический HTML

  13.1. Основы использования сценариев в HTML-документе

    Помещение сценария в документ

    Скрытие сценария

  13.2. Исполнение сценария

    Исполнение при загрузке документа

    Реакция на события

  13.3. Объектная модель документа

    Объект document

    Объект navigator

    Объект window

    Объект style

    Объект screen

    Объект event

Глава 14 . Создаем настоящий веб-сайт

  14.1. Содержание сайта

  14.2. Навигация по сайту

  14.3. Расположение файлов

  14.4. Реализация сайта

    Шаблон и внешний вид страниц

    Реализация меню

    Разворачивающиеся абзацы

    Прочие сценарии

    Используемые таблицы стилей

  14.5. Примеры работы сайта

Глава 15 . Публикация сайта в Интернете

  15.1. Ищем место для сайта

  15.2. Доменное имя для сайта

  15.3. Проблема стартовой страницы

  15.4. Администрирование сайта

    Использование форм

    Использование Проводника Windows

  15.5. Увеличение посещаемости сайта

Заключение

Приложение 1 . Именованные ссылки на символы

Приложение 2 . Свойства CSS

Приложение 3 . Названия основных цветов

Реклама на сайте