Основы

Интернет — это огромное объединение компьютерных сетей в планетарном масштабе. А если учесть, что обитатели Международной Космической Станции пользуются услугами электронной почты, то становится ясно, что Интернет уже шагнул за пределы планеты. Очень часто Интернет ошибочно отождествляют с самой популярной и масштабной его частью — всемирной путиной, которая в английском языке получила наименование WWW (World Wide, Web). По сути дела, паутина — просто огромное количество взаимосвязанных документов. Ключевое слово — взаимосвязанных, т. е. текст Web-страницы органично вставляются гиперссылки, которые служат механизмом соединения с другими Web-страницами. Честно говоря, рассказывать на словах о механизме гиперссылок достаточно трудно, но тот, кто ють раз посетил какой-либо Web-сайт, тот сразу поймет все их значение.
Именно гиперссылки, позволяющие связывать друг с другом самые различные документы из Сети, создали ту удивительную общность, которая и является теперь визитной карточкой всемирной паутины. Гиперссылки ис-вользуют для отыскания документа его уникальный адрес во всемирной паутине, который также называется URL (Universal Resource Locator).
Как мы знаем, основное предназначение Web-страниц — отображать

информацию, доносить ее до пользователя. При этом существует ряд функциональных «раничений. Ведь заранее неизвестно, какой именно компьютер используется пользователем, просматривающим Web-страницу. Нельзя заранее предсказать, какое разрешение у его монитора, или какие размеры окна просмотра он установил. Да что там, мы не можем заранее знать, какая Используется операционная система или даже платформа. Web-страницы должны практически одинаково отображаться и на Intel-машинах, и на Макинтошах и на телевизионных Web-приставках. Неизвестно, какие шрифты установлены и; используются в операционной системе пользователя, неизвестно, какая глубина цвета поддерживается его видеокартой. Все эти неизвестности должны были бы послужить большим барьером для создания общего языка. Но этого не случилось.
Дело в том, что еще на заре компьютерной эры, в 1986 году, международной организацией по стандартизации ISO (International Organization for Standardization) был разработан язык разметки документов SGML (Standard Generalized Markup Language), который предусматривал практически все возможные случаи отображения информации. Как на бумаге, так и на мониторах. Естественно, чтобы учесть все возможные случаи, была разработана действительно мощная система. Казалось, для Web-страниц это идеальный вариант. Однако только описание правил этого языка занимало сотни страниц. Следовательно, на разработку программ, которые могли бы отображать страницы, созданные на основе такого языка, ушло бы очень много времени. Поэтому для нужд Интернета было выбрано некоторое подмножество этого языка, которое получило самостоятельное наименование — HTML (HyperText Markup Language), т. е. язык разметки гипертекстовых документов.
Это язык разметки, как следует из названия, т. е. в файле Web-страницы информация находится вперемешку с инструкциями по ее отображению. По сути, это обычный текстовый файл. Но читать его самостоятельно трудно, так как инструкции по отображению информации мешают читать сам текст. А графику тем более нельзя увидеть.
Web-страницы, которые все написаны на HTML, просматриваются при помощи специализированных программ, которые обычно называют браузерами. Это калька с англоязычного термина. Прямой перевод на русский язык, т. е. Программы-обозреватели, почему-то не прижился. Что ж, будем называть их устоявшимся термином. Основная задача браузера — по запросу пользователя отыскивать требуемый документ в Интернете и адекватно отображать его, т. е. браузер анализирует инструкции, написанные на языке HTML, а затем отображает информацию, находящуюся на Web-странице, пользуясь этими инструкциями. Отсюда вывод — если мы хотим создавать собственные Web-страницы, то жизненно необходимо знать язык HTML
Конечно, можно писать код Web-страницы вручную, пользуясь каким-нибудь простеньким текстовым редактором, таким, например, как тривиальный Блокнот. Однако, это не самое приятное времяпровождение. Сейчас существует огромное множество визуальных редакторов Web-страниц, которые позволяют простым и естественным образом размещать информацию, не заботясь о ее переводе в HTML. Казалось бы, если все так замечательно, то зачем изучать HTML самостоятельно? Оказывается, при создании HTML-кода эти редакторы в некоторых случаях пишут неверный, частично неверный или избыточный код. Иногда просто не получается добиться именно того результата, который необходим, я надо знать язык HTML, чтобы быть в состоянии преодолеть встречающиеся препятствия.
Также следует упомянуть о последствиях так называемой "браузерной войны". Дело в том, что в самом начале развития WWW лидерство на рынке занял браузер Netscape Navigator от Netscape. Фирма Microsoft изначально не смогла правильно оценить будущего потенциала WWW, и браузер Netscape Navigator благополучно занял почти весь рынок. Но когда менеджмент Microsoft донял, что они упустили, в ход пошла вся тяжелая артилле-гдия. Срочно был создан браузер Internejt Explorer, и началась браузерная война. В целях продвижения собственного браузера каждая из конкурирующих фирм немного "улучшала" стандарт HTML, т. е. добавляла в него конструкции, которые мог правильно обрабатывать только собственный браузер. Конечно, WWW Consortium, организация, курирующая развитие интернет-технологий, некоторые из этих новшеств включала в последующие версии стандартов, но конкуренты не останавливались на достигнутом. Более того, в рамках все той же браузерной войны, Microsoft вживила свой браузер в операционную систему Windows 9x. Закончилось вся эта эпопея, как мы помним, судебным разбирательством, в котором ставший в одночасье известным всему миру судья Джонсон обязал Microsoft вывести браузер Internet Explorer из состава операционных систем.
Но к тому времени задача-минимум была выполнена. Браузер Internet Explorer занял около половины объема рынка браузеров. Так закончилась "браузерная война". Или, если быть точным, перешла из "горячей" фазы в "холодную". Но отголоски этого противостояния до сих пор аукаются разработчикам Web-страниц, так как необходимо проверять, как выглядит разрабатываемая страница в каждом браузере. Более того, некоторые визуальные HTML-редакторы прямо ориентированы на тот или иной браузер, и, следовательно, при щ использовании разработчик тоже будет ориентироваться только на один браузер или ограничивать функциональность и наполнение Web-страниц, упрощая их структуру практически до предела.
Но выход есть. Код, генерируемый визуальным редактором, практически всегда необходимо править вручную. А для этого, повторюсь, стоит знать язык HTML. Без знания HTML просто нельзя создавать Web-страницы хорошего качества. В любой технологии есть свои подводные камни, и если мы не знаем основы этой технологии, мы обязательно на них наткнемся. Для того, чтобы добиться максимально адекватного соответствия создаваемой Web-страницы первоначальному замыслу, действительно просто необходимо изучать язык HTML Чему, собственно, и посвящена эта книга. Если кто еще не догадался

Структура HTML-документа

Конструкции HTML называются тегами. Для того, чтобы браузер мог отличить их от обычного текста, они заключаются в угловые скобки. Тег обозначает начало действия какой-либо инструкции отображения. Если эта инструкция применяется ко всему документу, то этот тег не имеет своего закрывающего близнеца. Но большинство тегов все-таки обладают парой, которая прекращает действие первого тега. Так, например, каждая Web-страница должна начинаться с тега <html>, а заканчиваться его закрывающим близнецом </html>. Обратите внимание, что закрывающий тег отличается от открывающего лишь наличием косой черты после первой угловой скобки.
Также некоторые тега обладают параметрами, которые уточняют правило отображения содержимого. Немного позже мы на примере увидим, как применяются эти параметры, а сейчас лишь отметим, что эти параметры могут указываться только в открывающем теге.
Наименования тегов и их параметров могут быть написаны в любом регистре, как большими символами, так и строчными. Анализаторы HTML, встроенные в каждый браузер не обращают внимания на регистр символов, которыми написаны все служебные конструкции HTML-документов.
Естественно, как и в любом компьютерном языке, нельзя обойтись без комментариев, содержимое которых не обрабатывается браузером и не отображается. Они служат лишь для удобства разработчика, для внутреннего документирования структуры документа. Комментарии заключаются между фрагментами <-- и-->. Вот пример создания комментариев:

<--Это комментарий -->

Любая Web-страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается тегами <body> и </body>. Но по правилам хорошего стиля программирования перед заголовком ставится еще идентификатор применяемого стандарта HTML. Таким образом, структура любой Web- страница выглядит следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C'//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  Заголовок документа
  </head>
  <body>
  Тело документа
   </body>
</html>

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

<head>
<title> Заголовок Web-страницы</title>
</head>

Заголовком Web-страницы никогда не следует пренебрегать, так как это самое первое, что видит посетитель Web-сайта. Заголовок отображается еще до того, как произойдет окончательная загрузка содержимого страницы. Поэтому и выбирать его следует тщательно.
С первой частью структуры Web-страницы мы разобрались, теперь мы можем переходить к рассмотрению тела HTML-документа, его основной части. Как мы уже знаем, содержимое Web-страницы располагается между тегами <body> и </body>. В самом простейшем случае, это может быть обыкновенный текст. Браузер правильно интерпретирует его и отобразит. Попробуем увидеть это на примере.
Для создания нашей первой Web-страницы нам потребуется обычный текстовый редактор. Стандартный Блокнот вполне подойдет. Нам достаточно будет создать текстовый файл, содержимое которого приведено в листинге 1.1.

<!DOCTYPE HTML PUBLIC "-//W3G//DTD HTМL 4.01//EN"
"http;//www.w3.org/TR/htral4/strict.dtd">
<html>
  <head>
  <title> Моя первая Web-страница</title>
   </head>
  <body>
   Доброго времени суток, всем посетившим мой скромный сайт
   </body>
</html>

Не следует забывать, что при сохранении файла, следует установить дли него расширение htm или html. Если после этого запустить его на выполнение, просто щелкнув по его наименованию в Проводнике Windows, то автоматически будет запущен браузер, установленный по умолчанию в операционной системе, и в него уже будет загружен HTML-документ. Как выглядят наша первая Web-страница в браузере Internet Explorer видно на рис. 1.1.

Рис. 1.1. Результат просмотра в браузере файла, приведенного в листинге 1.1

Но следует отметить, что тег <body> может содержать дополнительные параметры. Мы уже говорили немного ранее, что параметры включаются в состав стартового тега конструкции. Теперь пришло время увидеть, как это происходит на самом деле.
Чаще всего параметр представляет собой пару "наименование—значение". Рассмотрим на простом примере. Параметр bgcolor позволяет задавать цвет фона, на котором будет отображаться содержимое Web-страницы. Например, если мы хотим использовать зеленый фон, то мы должны использовать следующую конструкцию:

Необходимо отметить, что все текстовые значения параметров обычно заключаются в кавычки. О том, как задаются цвета, мы узнаем в следующих разделах этой главы, а сейчас вернемся к параметрам тега <body>.
О параметре bgcolor, который позволяет устанавливать цвет фона Web-страницы, мы уже знаем. Рассмотрим остальные параметры.

Параметр background позволяет использовать в качестве фона какое-либо графическое изображение. Значением параметра является адрес этого изображения, т. е. его URL. Параметр text задает цвет шрифта, которым будет отображаться текстовое содержимое Web-страницы. Параметр link позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое Web-страницы. Параметр viink задает цвет гиперссылок, которые пользователь уже проходил в текущем сеансе работы. Параметр aiink указывает, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем. Параметр lang указывает, на каком языке написано текстовое содержимое Web-страницы. В качестве значения используются кодовые двухбук-венные обозначения языков, приведенные в документе RFC 1766. На самом деле, нам не надо знать все эти обозначения. В подавляющем большинстве случаев мы будем использовать русский или английский язык. Их коды: "гu" и "en" соответственно.

Помимо вышеперечисленных параметров тег <body> может обладать двумя идентифицирующими параметрами id и class, но на практике они к этому тегу почти никогда не применяются.
Как видно, все просто и незатейливо. Теперь самое время узнать, что же такое метаданные. Метаданные, скорее всего, можно определить как неотображаемая информация о документе. Она применяется для идентификации документа и указания режима отображения Web-страницы. Для внедрения метаданных в Web-страницу используется тег <meta>. Чаще всего он имеет следующий вид:

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

Однако, установка собственных переменных необходима только в том случае, если Web-страницы обрабатываются при помощи какого-либо специализированного Интернет-приложения. Но такая необходимость возникает достаточно редко. Что же, получается, что эти метаданные не несут никакой реальной пользы? Это не так.
Как мы все знаем, недостаточно просто поместить сайт во всемирную паутину. Надо еще сделать так, чтобы он попал в списки поисковых машин. Мы не будем сейчас рассматривать полностью процедуру регистрации сайта на поисковых машинах, тем более что для каждой такой машины процедура регистрации своя. Нас интересует кое-что другое.
Откуда поисковые машины берут информацию о содержимом той или иной Web-страницы? Как раз из метапеременных. Чаще всего используются метапеременные с наименованиями keywords и description. Переменная keywords в качестве своего значения содержит список ключевых слов Web-страницы. А переменная description предназначенна для хранения краткой аннотации Web-страницы. Приведем пример использования подобных метаданных. Предположим, что наша Web-страница посвящена сложному и щепетильному вопросу правильного кормления хомячков. Тогда ее структура должна выглядеть приблизительно следующим образом:

<!POCTYPE HTML PUBLIC "-//W3C//9TD HTML 4.01//EN'"
"W;tp: //www. w3 . org/TR/html4 /strict . dtd">
<html>
<head>
«bitle> Все о кормлеиии хомяков</title>
<meta name="keywords" lang="ru" content=хомяк, грызун, кормление, животное, уход">
<meta name=t>description" contferit="Web-Cтраница о кормлении мелких
грызунов, в частности, хомяков, в условиях домашнего содержания">
</head>
<body>
О, эти маленькие, симпатичные животные — хомячки. ,
</body>
</html>

Естественно, памятуя о том, что идентификация содержимого Web-страниц поисковыми машинами осуществляется при помощи ключевых слов, указываемых разработчиком» может возникнуть соблазн в их состав ввести слова, не отражающие суть документа, но часто запрашиваемые посетителями поисковых машин. Должен заметить, что Этот фокус может не получиться. Дело в том, что поисковые машины чаде всего сканируют еще и текст самой Web-страницы, и если какое-либо ключевое слово не встречается в нем, то оно просто не учитывается.
Следует также обратить внимание на то, что при указании ключевых слов, мы добавили в тег <meta> дополнительный параметр lang. Мы уже говорили, что этот параметр предназначен для указания языка, на котором написан тот или иной текст. В нашем примере мы указали, что перечисленные ключевые слова написаны на русском языке, т. е.: мы можем задать наборы ключевых слов на нескольких языках, использовав для этого несколько тегов <meta>.
Также метаданные позволяют передавать так называемые заголовки HTTP. Здесь необходимо сделать маленькое техническое отступление. Все HTML-документы передаются при помощи специализированных
программ, называемых Web-серверами, при помощи определенного набора правил. Этот набор правил приема и передачи информации в компьютерной индустрии называется протоколом. А набор правил для; передачи Web-страниц и данных от удаленных пользователей называется протоколом HTTP (HyperText Transfer Protocol), Этот протокол обладает набором директив и переменных, которые часто называют заголовками HTTP-протокола.
Перед нами не стоит задача изучить всё переменные протокола HTTP, нам достаточно будет узнать о наиболее часто применяемых его заголовках. Прежде всего, стоит упомянуть о переменной Expires, которая позволяет устанавливать так называемый "срок годности" Web-страницы. Дело в том, что браузеры и некоторые другие коммуникационные программы сохраняют посещенные пользователем Web-страницы в кэше, а затем, когда пользователь запрашивает их снова, подсовывают ему эти копии, экономя, таким образом, время получения. Но Web-страницы все-таки достаточно часто обновляют. Поэтому, пользователь может получить устаревшую копию. Конечно существуют способы настройки правил работы с кэшем, но далеко не все их используют. Поэтому лучше подстраховаться, и указать "срок годности" Web-страницы. Если он прошел, то браузер вместо использования копии из кэша все-таки запросит документ из Сети.
Тег <meta>, приспособленный для указания срока годности Web-страницы, выглядит приблизительно следующим образом:

Из примера видно, что для указания наименования стандартной неременной HTTP-протокола используется параметр http-equiv, а для установки значения этой переменной — уже знакомый нам параметр content. Также легко заметить, что установка срока последнего использования документа производится при помощи переменной Expires, а значение ее должно быть указано в определенном текстовом формате со временем, указанным по гринвичскому меридиану.
Впрочем, может случиться и такое, что информация на страничке обновляется настолько быстро, что ее необходимо несколько раз перезагружать в процессе одного сеанса работы. Такие страницы с информацией, обновляемой в реальном времени, — достаточно частое,явление, например, в чатах или при отображении изменений котировок ценных бумаг во время операционного дня на фондовой бирже. В этом случае необходимо использовать переменную с наименованием Refresh. Значение этой переменной указывается в секундах. Тогда рассматриваемый нами тег <meta> приобретет следующий вид:

<МЕТА http-equiv-"Refresh" cpntent=10>

Страница с подобной конструкцией в блоке заголовка будет автоматически перезагружаться каждые десять секунд.
На этом заканчивается рассмотрение структуры заголовка HTML-документа. Мы переходим к изучению структуры основного раздела Web-страницы, Как мы помним, вся отображаемая в окне просмотра браузера информация размещается между тегами <body> и </body>. О том, какие возможности по указанию правил отображения содержимого Web-страницы нам предоставляет .язык HTML, мы узнаем в следующих разделах этой главы. Здесь мы рассматриваем лишь общую структуру HTML-документа.
HTML предоставляет нам возможность для каждого применяемого тега задать уникальный идентификатор. Скажем, если наш текст разбит на абзацы, то для каждого абзаца мы можем задать свое специфичное наименование, а затем, при помощи некоторых дополнительных средств языка HTML, управлять отображением этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет шрифта, т. е. изменять правила их отображения. Причем, это относится не только к абзацам, а ко всем частям содержимого Web-cтраницы которые заключены в,те или иные теги.
Для идентификации какого-либо тега применяется параметр id. Вернемся к примеру е абзацами текста. Забегая немного вперед, можно сказать, что абзацы указываются при помощи пары тегов <р> и </р>. Таким образом, создание абзацев, которые мы сможем потом отличать, производится при помощи приблизительно следующей конструкции:

<р id="р1">Первый абзац</р>
<р id="p2">Bторой абзац</р>

Значения всех параметров id в HTML-документе обязаны быть уникальными. Если встречается пара одинаковых значений, то эти идентификаторы просто игнорируются. Естественно, применение параметра id не является обязательным. Имеет смысл использовать его только в тех случаях, когда конструкция с идентифицируемым тегом будет подвергнута стилевой обработке (о которой мы поговорим во второй главе), или этот тег будет являться закладкой в документе, на которую будет указывать какая-либо гиперссылка, либо идентифицируемая конструкция будет обрабатываться динамически, при помощи инструкций DHTML, о которых мы узнаем в третьей главе. Также идентификаторы применяются в тех случаях, когда HTML-документ обрабатывается специализированными приложениями, но это уже для совсем серьезных программистов. Нам это пока не так уж и нужно.
Если параметр id применяется для уникальной идентификации, то при помощи параметра class мы можем относить тег к той или иной группе. Этот параметр используется только для стилевого оформления. Мы просто некоторые элементы Web-страницы разбиваем на классы, а затем достаточно в одном месте изменить описание правил отображения класса, и это изменение автоматически распространится на все теги, которые вошли в данный класс.
Также нам доступны методы объединения соседних элементов Web-страницы в единые блоки. Все элементы оформления HTML-документов разделяются на два типа. Inline-элементы, которые чаще всего являются просто элементами текста, и блочные элементы. Inline-элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на Web-странице и обязаны начинаться всегда с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и inline-элементы. По вполне понятным причинам inline-элементы не могут включать в себя блочные элементы.
Объединение элементов Web-страницы в блоки позволяет применять к ним единое оформление, осуществлять некое подобие верстки. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента Web-страницы по отдельности.
Для объединения элементов блочного типа используется тег <div> с его закрывающим близнецом </div>. А для inline-элементов используется пара тегов <span> и </span>. С учетом вышесказанного, ясно, что блок с тегом <div> не может располагаться внутри блока с тегом <span>, так как блочные элементы не могут входить в состав inline-элементов.
Также следует отме/гить, что браузеры обрамляют div-блоки разрывами строки. Проще всего это показать на примере:

Листинг 1.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://wvw.w3.org/TR/html4/striсt.dtd">
<html>
  <head>
    <title> Отображение div-блоков</title>
   </head>
   <body>
   <div>
    Доброго времени <div>cyток, всем посетившим </div>мой скромный сайт .
</div>
    </body>
</html>

Результат отображения подобного HTML-файла браузером Internet Explorer показан на рис. 1.2.
Теги <span> и <div> могут также иметь дополнительные параметры. Помимо уже знакомых нам идентифицирующих параметров id и class, могут использоваться параметры style и align. Параметр style применяется для установки стиля отображения содержимого блока, а параметр align позволяет устанавливать выравнивание данного блока относительно других
элементов содержимого Web-страницы. Более детально применение этих параметров мы рассмотрим в следующих разделах этой главы.

Рис. 1.2. Окно браузера с результатом отображения файла, приведенного в листинге 1.2

Также к вопросам структуры HTML-документа можно отнести использование различных заголовков в тексте. Для заголовков в HTML отведены собственные теги. Всего в HTML-документах применяется шесть уровней текстовых заголовков. Самый старший уровень — первый. И для каждого заголовка существует свой тег и свои правила отображения.
Теги для обозначения заголовков чрезвычайно просты. Для заголовка первого уровня применяется тег <h1> с его закрывающей парой </h1>, заголовок второго уровня реализуется при помощи пары <h2>—</h2>, и так далее, вплоть до заголовка шестого уровня с тегом <h6>. Ниже, в листинге 1.3 приведен пример использования заголовков в HTML-документе.

Листинг 1.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3,org/TR/html4/strict.dtd">
<html>
    <head>
    <title> Отображение заголовков</title>
    </head>
    <body>
    <hl> Заголовок первого уровня </h1>
    <h2> Заголовок второго уровня </h2>
    <h3> Заголовок третьего уровня </h3>
    <h4> Заголовок четвертого ;уровжя </h4>
    <h5> Заголовок пятого уровня </h5>
    <h6> Заголовок шестого уровня </h6>
    <р>0бычный текст</р>
</body>
</html>

А как это рее выглядит, хорошо видно на рис. 1.3.

Рис. 1.3. Окно браузера с результатом отображения файла, приведенного в Листинге 1.3

Теги заголовков обладают тем же набором параметров, что и недавно рассмотренные теги <span> и <div>, т. е. идентификационные id и class, параметр общего оформления style и параметр выравнивания align.

На этом и заканчивается рассмотрение структуры типичного HTML-документа. Как видно, никаких особых сложностей в этом нет. Все стройно и логично.

Используемые символы

А теперь обратимся к политике используемых символов в HTML. Как известно, в компьютерах каждый символ все-таки на самом деле является неким числом. И операционная система при дакэбражеши текста выводит уже символ, соответствующий какому-либо числу. Таблица соответствия чисел и символов называется кодировкой. Но дело в том, что кодировок только для русскоязычных символов уже не менее пяти. И если браузер не распознает, какая кодировка использована гфи создании Web-страницы, то вместо текста пользователь увидит мешанину непонятных символов. Каждый, наверное, с этим встречался. Поэтому в каждый браузер встроена функция смены кодировки отображаемой Web-страницы. Однако язык HTML обладает возможностями указания используемой кодировки, чтобы браузер не пытался распознать ее самостоятельно. Для этих целей используется уже знакомый нам тег <meta>. Дело в том, что среди предбпределенных переменных протокола HTTP есть переменная с наименованием Сontent-Type. Она задает тип содержимого Web-страницы и дополнительно позволяет указывать наименование применяемой кодировки. Полностью соответствующая конструкция выглядит так:

<МЕТА. http-equiv="Content-Type" content="text/html;
charset=ISO-8858-5">

В приведенном примере видно, что значение переменной состоит из двух частей, разделенных знаком точки с запятой. Первая часть говорит о том, что данный документ является обычным текстом с тегами HTML, а вторая часть указывает используемую кодировку. При этом использование слова charset является обязательным. А, после знака равенства указывается уже само название кодировки. В примере использовано стандартная кодировка, утвержденная Международной Организацией по Стандартизации (ISO) с поддержкой кириллицы. Однако вместо нее можно использовать стандартную кириллическую кодировку Windows или КОИ-8.
Также следует указать, что браузеры не могут обычным порядком отображать некоторые символы, которые встречаются в тексте. Так, если браузер в тексте встретит знак неравенства "меньше", то он просто интерпретирует его как открывающую скобку для тега. А так как стандартного тега за этим знаком не последует, то некоторая часть текста будет просто проигнорирована и не отображена. Более того, некоторые специализированные европейские символы просто отсутствуют на клавиатуре, и их будет затруднительно .вставить в текст содержимого Web-страницы. Проблему необходимо было решить. И выход был найден.
Вместо самих символов в текст подставлялись последовательности, которые можно было уже нормально интерпретировать. Так, знак неравенства "меньше", он же — открывающая угловая скобка, заменяется на последовательность ⁢, В данном случае вся последовательность заключена в кавычки, начинается она со знака амперсанта, а заканчивается знаком точки с запятой. Подобные последовательности перекочевали и в язык следующего поколения — XML, и получили название "eatities", что в русскоязычной литературе переводят как "сущности". Перевод, конечно, правильный, но, к сожалению, ничуть не разъясняет суть дела. Проще и, наверное, правильней называть эти сущности текстовыми подстановками. Список текстовых подстановок используемых в HTML приведен в табл. 1.1.

Таблица 1.1. Текстовые подстановки

Символы	Описание
<	Знак неравенства "меньше" (<)
&gt ;	Знак неравенства "больше" (>),
&	Знак амперсанта (&)
"	Знак кавычек
&Agrave	Прописная А, тупое ударение
&Aacute	Прописная А, сильное ударение
&Acirc	Прописная А, диакритическое ударение
&Atilde	Прописная А, тильда
&Auml	Прописная А, умляут
&Aring	Прописная А, звонко» произношение
&agrave	Строчная а, тупое ударение
&acute	Строчная а, сильное ударение
&acirc	Строчная а, диакритическое ударение
&atilde	Строчная а, тильда
&auml	Строчная а, умляут
&aring	Строчная а, звонкое произношение
&Aelig	Прописные АЕ, дифтонг
&aelig	Строчные ае, дифтонг
&Ccedil	Прописная С, седиль
&ccedil	Строчная с, седиль
&Egrave	Прописная Е, тупое ударение
&Eacute	Прописная Е, сильное ударение
&Ecirc	Прописная Е, диакритическое ударение
&Еuml	Прописная Е, умляут
&egrave	Строчная е, тупое ударение
&eacute	Строчная е, сильное ударение
&ecirc	Строчная е, диакритическое ударение
&euml	Строчная е, умляут
&Iacute	Прописная I, сильное ударение
&Igrave	Прописная I, тупое ударение
&Iuml	Прописная I, умляут
&iacute	Строчная i, сильное ударение
&igrave	Строчная i, тупое ударение
&ticirc	Строчная i, диакритическое ударение
&iuml	Строчная i, умляут
&ETH	Сочетание Eth
&eth	Строчные eth
&Ntilde	Прописная N, тильда
&ntilde	Строчная п, тильда
&Ograve	Прописная О, тупое ударение
&Oacute,	Прописная О, сильное ударение
&0circ .	Прописная О, диакритическое ударение
&0tilde	Прописная 0, тильда
&Ouml	Прописная О, умляут
&Oslash	Прописная О, слэш
&ograve	Строчная о, тупое ударение
&oacute	Строчная о, сильное ударение
&ocirc	Строчная о, диакритическое ударение
&otilde	Строчная о, тильда ,
&ouml	Строчная о, умляут
&oslash	Строчная о, слэш
&Ugrave	Прописная U, тупое ударение
&Uacute	Прописная U, сильное ударение
&Ucirc	Прописная U, диакритическое ударение
&Uuml	Прописная U, умляут
&ugrave	Строчная и, тупое ударение
&uacute	Строчная и, сильное ударение
&ucirc	Строчная и, диакритическое ударение
&uuml	Строчная и, умляут
&Yacute	Прописная Y, сильное ударение
&yacute	Строчная у, сильное ударение
&reg	Зарегистрированная торговая марка — Trademark
scopy	Права собственности - Copyright
Snbsp	Неразделяемый пробел

Но подстановки бывают не только текстовыми. Мы можем воспользоваться подстановкой для вставки в текст любогр символа из текущей кодировки, если нам известен его числовой код. Для этого используется конструкция "&#числовой_код;". В подобном формате численных подстановок используется запись числового кода в десятичном виде. Если необходимо использовать шестнадцатеричную запись, то подстановка примет следующий вид: "&#хчисловой_код;", т. е. после знака решетки добавляется латинский символ "икс".

Цвета и единицы измерения

В коде HTML-документа нам всегда придется указывать размеры тех или иных объектов оформления Web-страницы, а также цветовые свойства этих объектов. В HTML предусмотрены стандартные правила для обозначения цветов и единиц измерения. Начнем мы с цветовых обозначений.
Предусмотрено два способа задания цвета,.Чаще всего используется способ с указанием RGB-кода требуемого цвета. Как известно, любой цвет разлагается на три основных: красный, зеленый и синий. Браузеры позволяют нам отображать более шестнадцати миллионов цветов. Все это многообразие обеспечивается за счет того, Что каждая доля основных цветов может варьироваться от нуля до. двухсот пятидесяти пяти, т. е. каждый цвет задается сочетанием трех .чисел» каждое из которых отражает Долю одного из трех основных цветов. Для удобства обработки в HTML цвет задается в виде группы из шести шестнадцатеричных цифр в следующей форме:

color="IFFOOOO" - '' ''

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

Таблица 1.2. Цветовые обозначения

Цвет	Шестнадцатеричный код	Буквенное обозначение
Черный	#000000	Black
Серебряный	#СОСОСО	SHver
Серый	#808080	Gray
Белый	#FFFFFF	White
Темно-красный	#800000	Maroon
Красный	#FFOOOO	Red
Пурпурный	#800080	Purple
Малиновый	#FFOOFF	Fuchsia
Зеленый	#008000	Green
Ярко-зеленый	#OOFFOO	Lime
Оливковый	#808000	Olive
Желтый	#FFFFOO	Yellow
Темно-синий	#000080	Navy
Голубой	#OOOOFF	Blue
Темная морская волна	#008080	Teal
Морская волна	#OOFFFF	Aqua

С учетом этих обозначений, наш пример с красным цветом мы могли бы написать и вот таким образом:

color="Red"

Так, с цветом разобрались, теперь переходим к рассмотрению единиц измет рения длины. Согласно спецификации языка HTML, мы можем указывать размеры каких-либо объектов оформления Web-страниц только двумя способами. Либо указывать их размер в пикселах, либо — в процентном отношении. Процентное соотношение рассчитывается относительно "родительского" объекта, внутри которого и находится данный элемент оформления, /т.е., если мы на Web-странице размещаем, скажем, таблицу и указываем, что ее ширина должна составлять пятьдесят процентов, то эти пятьдесят процентов будут рассчитываться от ширины окна просмотра браузера. А уже процентное отношение ширины ячейки таблицы будет рассчитываться от общей ширины именно таблицы, в которой и находится эта ячейка. И если пользователь изменит размеры окна браузера, соответствующим образом изменится и компоновка содержимого Web-страницы. Поэтому, при создании Web-страницы всегда следует изыскивать такие способы размещения содержимого, чтобы их компоновка не изменялась кардинально при изменении размеров окна браузера. Также следует учитывать и тот факт,что удаленные пользователи используют различные разрешения мониторов. О том, как узнать, какое именно разрешение монитора установлено у посетителя Web-страницы, мы выясним в третьей главе, а пока вернемся к единицам измерения размеров объектов Web-страниц.
Для того чтобы указать размер некоего элемента в пикселах, достаточно в качестве значения соответствующего параметра указать необходимое число. Так, если мы захотим установить ширину некоего объекта в тридцать пикселов, следует использовать следующую конструкцию:

width="30"

А если ширина должна составлять тридцать процентов от "родительского" объекта, то мы запишем уже такой код:

width="30%"

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

height ="3*"

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

height-"*"

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

Оформление текста

Как известно, основное наполнение Web-страниц — это все-таки текст. За редким исключением специальных сайтов-галерей. Поэтому неудивительно, что в HTML введено столько различных средств управления .отображения текста.
На самом деле, для того, чтобы в окне просмотра браузера отобразить текстовую строку, Никаких тегов применять не требуется: Достаточно просто написать сам текст. Но когда нужно уже разбит^ его хотя бы на абзацы, вот туг надо пользоваться тегами. Дело в том, что в различных компьютерных системах используются различные символы для разбивки текста на абзацы, a HTML-документы всегда должны отображаться по возможности одинаково на самых различных компьютерных платформах. Поэтому и пришлось ввести теги, обозначающие абзацы.
В начале каждого абзаца ставится тег <р>, а в конце -, закрывающий тег </Р>. При этом, тег, естественно, обладает некоторыми параметрами. В их число входят уже известные нам общие параметры идентификации class и id, параметр стилевого оформления style, который нам предстоит рассмотреть во второй главе, и параметр-выравнивания align. Вот о последнем параметре нам следует поговорить несколько поподробнее.
В HTML термин "выравнивание" относят как к горизонтальному, так и к вертикальному позиционированию элемента. Но в случае с абзацами текста имеет смысл говорить только о горизонтальном выравнивании или, как его еще называют, "выключке".
Выключка позволяет прижимать абзац к левому или правому краю окна просмотра браузера, центрировать его или растягивать слова таким образом, чтобы текст равномерно занимал всю ширину отведенного ему места. Для этих целей используются значения left, right, center и justify, соответственно. Рассмотрим их применение на примере еще одного HTML-документа.

Листинг 1.4

<!DOCTYPE1HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/striet.dtd">
<html>
<head>
<title> Горизонтальное выравнивание a63aцeв</title>
</head>
<body>
<p align="left">Aбзац, прижатый к левому краю</р>
<р align="right">Aбзац, прижатый к лравому краю</р>
<р align="center">Центрированный абзац</р>
<p align="justify">Aбзац, растянутый по ширине</р>
</body>
</html>

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

Рис. 1.4. Окно браузера с результатом отображения файла, приведенного в листинге 1.4

Иногда для того, чтобы сильнее отделить один абзац от другого, создатели Web-страниц пытаются использовать пустые абзацы, т. е. между стартовым и конечным тегом абзаца ничего нет. Согласно спецификациям, браузеры должны просто игнорировать подобные конструкции. Поэтому для разделения абзацев или принудительного обрыва строки внутри одного абзаца следует использовать тег <br>. Это директивный тег. Он просто обозначает то место, где надо перенести отображение на другую строку. Пример использования этого тега для достижения обеих этих целей показан на примере HTML-документа, чей код приведен в листинге 1.5.

Листинг 1.5

<!DOGTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> .
<head>
<title> Принудительные разрывы cтрок</title>
</head>
<body>
<р>Aбзац, который мы <br>Принудительно разорвали</р>
<р>Следующий абзац</р>
<br>
<р>Абзац после принудительного разрыва</р>
</body>
</html>

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

Рис. 1.5. Окно браузера с результатом отображения файла, приведенного в листинге 1.5

Тег <br> помимо всеобщих параметров идентификации обладает еще параметром clear, который применяется для более точного выравнивания текста, когда тот обтекает какой-либо объект, например, графическое изображение, внедренное в состав Web-страницы. В качестве значения этого параметра может использоваться одно из четырех заранее предопределенных ключевых слов: none, left, right, all. Значение none используется по умолчанию и указывает, что следующая строка начнется с того места, где она начиналась бы и без использования данного параметра, в обычных условиях. Значение left говорит о том, что следующая строка начнется у левого поля объекта, обтекаемого текстом. Если же необходимо использовать правое поле для этих целей, то следует воспользоваться значением right.
А значение all указывает браузеру, что воспользоваться можно как левым, так и правым полем объекта, лишь бы текст был максимально компактно отображен.
Теперь перейдем к рассмотрению шрифтового оформления текста. В любом месте абзаца мы можем использовать тег <font> с некоторым набором параметров, которые и будут определять внешний вид шрифта, который будет применяться для отображения текста, находящегося после этого тега. Прекращение действия этого тега осуществляется при помощи его закрывающей пары </font>.
Тег <font> обладает следующими, присущими именно ему параметрами: size, использующийся для указания размера применяемого шрифта, color - для установки цвета символов шрифта, и face, указывающий, какой именно шрифт будет применяться для отображения текста. Разберем эти параметры.
Как мы только что говорили, параметр size применяется для указания размера символов используемого шрифта. В качестве значений этого параметра используются цифры от единицы до семи. Они обозначают некий относительный размер символов. Дело в том, что в HTML нельзя установить абсолютный размер символов в пунктах, как мы это привыкли делать в обычных офисных приложениях. Пользователь будет просматривать Web-страницу на своем компьютере, и нам заранее неизвестно, какие шрифты могут быть у него установлены, и какие их размеры доступны. Поэтому мы можем лишь указать относительный размер шрифта, а браузер пользователя сам подберет максимально подходящий размер.
Также в качестве значения параметра size мы можем указывать и изменение размера шрифта. Например, для того, чтобы увеличить размер шрифта на один уровень, следует использовать следующую конструкцию:

А для уменьшения размера символов на два уровня, применяется следующий код:

Однако для использования подобных конструкций необходимо отталкиваться от некоего базового размера. Для установки такого размера применяется тег <basefont> с все тем же параметром size. Если же этот тег не использовать, то в качестве базового размера символов будет применяться третий уровень. Приведем пример использования этих тегов.

Листинг 1.6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTO HTML*4.01//EN"
"http://www.wa.org/TR/html4/stcict.dtci">
<html>
<head>
<title> Размер сиволов</tit1е>
</head>
<body>
<p><font sizе=*7">Седьмой paзмep</font></p>
<p><font sizе="6">Шестой paзмepp</font></p>
<pxfont sizе="5">Пятый paзмep</font></p>
<pxfont sizе="4">Четвертый paзмep</font></p>
<pxfont sizе="3">Третий paзмep</font></p>
<p><font sizе="2">Второй paзмep</font></p>
<p><font size="l"^Первый paзмep</font></p>
<p><basefont size=2xfont з12е="+2">Смещение paзмepa</font></p>
</body>
</html>

Рис. 1.6. Окно браузера с результатом отображения файла, приведенного в листинге 1.6

Но мы рассмотрели применение только одного атрибута тега < font >. На очереди — процедура установки цвета символов применяемого шрифта. Мы уже знаем, что для этого применяется параметр color. О том, как именно записывать обозначение того или иного цвета мы говорили в предыдущем разделе, т. е. нам осталось всего лишь привести пример. Так, для установки зеленого цвети символов применяемого шрифта, следует использовать следующую конструкцию:

А последний рассматриваемый нами параметр face позволяет устанавливать вид применяемого шрифта, т. е. мы можем указать, что текст следует отображать, скажем, при помощи шрифта Times New Roman или Copperplate Gothic. Однако здесь следует понимать, что браузер пользователя будет отображать текст при помощи шрифтов, установленных в операционной системе удаленного пользователя, и если мы используем некий редкий шрифт для придания большей выразительности текстовому наполнению Web-страницы, то его может и не быть в системе пользователя. В этом случае браузер будет использовать свои собственные правила шрифтового оформления. В каждом браузере есть раздел настроек, в котором пользователь указывает, какие именно шрифты применять для текстового содержимого загружаемых Web-страниц. Поэтому в качестве значения параметра face применяется список из наименований шрифтов, разделенных запятой. Браузер пытается отыскать их в своей системе в том порядке, в котором они перечислены, и первый подошедший шрифт используется для отображения текста. Теперь, когда мы знаем порядок использования всех параметров тега <font>, приведем пример их общего использования:

При помощи этого тега мы объявляем, что текст, находящийся после него, будет отображаться четвертым размером, символы будут черными, а применяться должен шрифт Courier New или, если он в системе не установлен, Arial Black.
Но при создании обычных текстовых документов мы не удовлетворяемся одним указанием размера, цвета и вида шрифта. Есть ведь еще и различные начертания одного шрифта. Мы можем делать символы курсивными, полужирными, подчеркнутыми и перечеркнутыми. HTML также предоставляет нам эти возможности. Итак, все по очереди.

Тег <b> с закрывающей парой </b> создает полужирное начертание символов выбранного шрифта. Теги <i> и </i> обрамляют курсивные символы. Тег <u> и </u> заставляют браузер подчеркивать текст, расположенный междуними Тег <strike> со своей закрывающей парой </strike> создают перечеркнутый текст. Теги <tt> и </tt> обрамляютсимволы, которые браузер отображает моноширинным шрифтом. Теги <small> и </small> указывают, что текст, заключенный между ними, необходимо отображать шрифтом уменьшенного размера. Теги <big> и </big>, наоборот увеличивают размер символов, находящихся между ними.

Естественно, без примера нам никак не обойтись.

Листинг 1.7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"htfcp://www.w3.org/TR/html4/strict.dtdH>
<html>
<head>
<title> Начертания cимволов</title>
</head>
<body>
<p><font face-="Times New Roman">Текст бывает <b>полужирным</b> или <i>курсивным</i><br>
А может быть одновременно и <b><i>полужирным и курсивным</i></b></р>
<р>Бывает <u>подчеркнутым</u> и <strike>nepeчepкнутым</strike>.
<Р>или <tt>моноширинным</tt> .
<р>Мы можем <big>увеличивать</big> и <small>уменьшать</small> размер символов.</р>
</body>
</html>

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

Выделение термина в тексте производится при помощи пары тегов <еm> и </еm>. "Усиленное" выделение, призванное еще больше привлекать внимание, создается при помощи тега <strong> и его закрывающего близнеца </strong>. При помощи тегов <cite> и </cite> указывается, что текст, расположенный между ними, является цитатой. Определение некоего термина выделяется при помощи тегов <dfn> и </dfn>. Пара тегов <code> и </code> применяется для выделения исходного кода на каком-либо языке программирования. Текстовая информация, выводимая программой, оформляется при помощи тегов <samp> И </samp>. Текст, вводимый пользователем, обозначается тегами <kbd> и </kbd>. П Переменные в исходном коде программ обозначаются при помощи пары тегов <var> и </var>. Теги <abbr> и </abbr> выделяют аббревиатуры. А устоявшиеся буквосочетания, не являющиеся аббревиатурами, т. е. акронимы, выделяются тегами <acronym> и </acronym>.

Однако, знать наименования тегов мало, надо еще отчетливо себе представлять, как именно они оформляют текст. И здесь без примера никак не обойтись.

Рис. 1.7. Окно браузера с результатом отображения файла, приведенного в листинге 1.7

Листинг 1.8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Стандартные варианты отображения</title> </head> <body> <p> <font face="Times New Нотап">Это обычный текст</р>
<р>Это <еm>выделение</еm>. И <strong> Более заметное выделение </strongx> </p>
<р>Это <cite>цитата </cite> А это <dfn>определение </dfn>.</p>
<р>Мы можем писать <code>код программы</code>, текст, пoльзoвaтeлeм</kbd>,
<samp>выводимый текст</samp> и <var>nepeменные</var>
<р>Так отображаются <аbbr>аббревиатуры </аbbr>.' А так — <аcronum>акронимы</аcronum> .
</р>
</body>
</html>

Результат отображения подобного HTML-документа показан на рис. 1.8.

Рис. 1.8. Окно браузера с результатом отображения файла, приведенного в листинге 1.8

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

<pre width=60>текст.</pre>

В данном примере мы указываем, что текст должен отображаться исходя из расчета, что строка составляет в длину шестьдесят символов. При этом, в предварительно отформатированном тексте также не действуют правила "сворачивания пробелов". Дело в том, что когда браузер встречает в обычном тексте Web-страницы несколько идущих подряд пробелов, он их сворачивает в один пробел. А предварительно отформатированный текст подобному преобразованию не подвергается, что и позволяет сохранять его форматирование, которое в простейших текстовых редакторах осуществляется при помощи пробельных символов. В HTML, кстати, символ табуляции тоже считается пробельным символом.
Также следует отметить, что HTML предоставляет возможность при помощи тегов отображать верхние кавычки, при помощи которых обычно выделяется прямая речь и некоторые цитаты. Для цитат предусмотрен тег <biockquote> с его завершающим близнецом </biockquote>. А для обрамления прямой речи обычно используются теги <q> и </q>. При этом, тег <biockquote> обладает параметром cite, в качестве значения которого используется сетевой адрес, называемый также URL, того интернет-ресурса, на котором изначально и находился цитируемый текст. А вместе с тегом <q> обычно используется параметр lang, значением которого является кодовое обозначение языка, согласно правил пунктуации которого и ставятся ограничивающие кавычки. Не секрет ведь, что в разных языках принято использовать различные символы кавычек.
Также следует упомянуть и о проблеме переносов. Обычно создатели Web-страниц даже не задумываются об этой проблеме, и браузеры не занимаются переносом слов с разбиением. Если слово не умещается в строке, оно просто переносится в другую строку. Но ведь это не единственный правильный способ отображать текст. Вполне может возникнуть ситуация, когда понадобится отображать текст, пользуясь переносами слов. В HTML предусмотрено два вида переносов — явный и, так называемый, "мягкий". Явный перенос создается при помощи символа короткого тире, заменяемого обычно численными текстовыми подстановками "-" и "&#х2D", Однако явный перенос неудобен тем, что при изменении размеров окна просмотра браузера может измениться и длина строки, а знак переноса все равно останется виден. Даже если он будет находиться в середине строки. Поэтому чаще все-таки пользуются "мягкими" переносами. Они создаются при помощи текстовой подстановки "". При этом символы мягких переносов в тексте не видны, и лишь в том случае, когда какое-либо слово, в которое были вставлены эти символы, не умещается целиком в строке, оно переносится с разбивкой на слоги, согласно вставленным "мягким" переносам. И лишь один из символов мягкого переноса в этом слове становится виден.
Также HTML при помощи своих тегов позволяет отображать верхние и нижние индексы. Для создания верхнего индекса используется пара тегов <sup> и </sup>, а нижний индекс должен быть обрамлен тегами <sub> и </sub>. Рассмотрим пример применения этих тегов.

Листинг 1.9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bepxние и нижние индексы</title>
<body>
<р>Вода это H<sub>2</sub>0</p>
<р>Соотношение массы и энергии — Е = mc<sup>2</supx/p>
</body>
</html>

Как именно отображает индексы браузер показано на рис. 1.9.

Рис. 1.9. Окно браузера с результатом отображения файла, приведенного в листинге 1.9

Также к текстовому оформлению относятся горизонтальные линии, которыми часто отделяют значимые части текстового содержимого Web-страниц. Линия вставляется в текст HTML-документа при помощи тега <hr>. Тег обладает несколькими параметрами, которые позволяют достаточно детально регулировать внешний вид горизонтальной линии.
Параметр align позволяет указывать горизонтальное выравнивание линии. Параметр может обладать одним из трех предустановленных значений: left, right и center, которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. По умолчанию используется значение center. Если в состав тега <hr> входит параметр , то отображаемая горизонтальная линия не будет иметь тени. А последний параметр width позволяет устанавливать длину горизонтальной линии. По умолчанию используется значение "100 %". А высота линии в пикселах задается при помощи параметра size. Рассмотрим применение всех этих параметров на примере.

Листинг 1.10

<!DOCTYPE HTML POBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<body>
<р>Это обычная линия, отображаемая по умолчанию <hr></p>
<р>Это укороченная линия, прижатая влево <hr align="left" width="70%" size=5x/p>
<р>Это укороченная линия, расположенная по центру <hr align="center" width="70%" size=5x/p>
<р>Это укороченная линия, прижатая вправо <hr align=" right" width="70%" size=5x/p>
<р>Это утолщенная линия без тени <hr align="center" width="70%" size»10></p>
</html>

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

Рис. 1.10. Окно браузера с результатом отображения файла, приведенного в листинге 1.10

Графика и мультимедиа

Вторым по значимости компонентом наполнения Web-страниц после текста, несомненно, будет графическое оформление. Это различного рода рисунки, фотографии и, может даже, видеоклипы. Также мы можем использовать звуковое сопровождение отображения Web-страниц.
Начнем мы с размещения графических изображений. Браузеры в состоянии отображать только три вида графических файлов. Это файлы форматов GIF, JPEG и PNG. Файлы формата GIF позволяют создавать анимированные изображения. JPEG-файлы обьино применяются для сохранения фотографических изображений. Недавно появившийся формат PNG позволяет совмещать хорошее качество изображения и маленький объем графического файла. Но после того как изображение было упаковано в графический файл, его все-таки необходимо каким-либо образом внедрить в состав Web-страницы.
Для этого применяется тег <img> со множеством параметров. Данный тег не имеет закрывающей пары, так как он не создает какой-либо области действия правила отображения, он лишь внедряет в содержимое Web-страницы
графическое изображение. На самом деле графическое изображение может быть еще и гиперссылкой или, даже, скрывать за собой несколько гиперссылок но о гиперссылках мы поговорим в следующем разделе этой главы, а пока разберемся с правилами применения тега <img>.
Основным и обязательным атрибутом тега <img> является атрибут src. В качестве значения этого атрибута используется адрес вставляемого графического файла или, если быть точным, его URL. Если графический файл находится на том же Web-сервере, то достаточно записать полное наименование файла, включая путь к нему по вложенным каталогам, т. е. если в той же папке, что и HTML-файлы с Web-страницами, расположен каталог images с рисунками, то тег вставки графического изображения приобретет следующий вид:

В этом примере мы используем рисунок формата GIF, находящийся в файле с именем pictl.gif, который, в свою очередь, расположен в каталоге с наименованием images. Следует обратить внимание, что слэши — наклонные черты, наклонены в другую сторону, нежели при использовании их в путях файлов операционных систем семейств DOS и Windows. Дело в том, что изначально Web-серверы базировались на операционной системе Unix, которая и поддерживает файловую систему с подобными слэшами. А сейчас абсолютно неважно, какая операционная система поддерживает сервер с Web-сайтом, все пути записываются одинаковым способом и правильно обрабатываются программным обеспечением сервера.
На заре развития WWW браузеры отображали только текстовую информацию, никакая графика не поддерживалась. Сейчас они практически не встречаются, но каждый браузер имеет возможность отключения загрузки графики. Поэтому всегда следует использовать альтернативное текстовое представление рисунка. Попросту, необходимо приготовить текст, который будет отображаться вместо рисунка, если тот не может быть по каким-либо причинам загружен браузером. Этот текст добавляется к тегу <img> при помощи параметра alt, значением которого и является искомая текстовая строка, т. е. получится приблизительно следующая конструкция:

В том случае, если графическое изображение все-таки показывается браузером, текст альтернативного текстового представления отображается в виде «хинта», короткой текстовой подсказки, когда пользователь наводит курсор мыши на искомое графическое изображение.
Впрочем, существует и более развернутый вариант создания подобных текстовых подсказок. При помощи параметра longdes с задается адрес интернет-ресурса, на котором находится полное описание данного графического изображения. В качестве значения этого параметра указывается, естественно, URL ресурса с описанием изображения.
Параметр name позволяет задавать уникальное имя изображения, которое идентифицирует этот элемент оформления Web-страницы. Этот параметр оставлен для целей обратной совместимости, он остался от предыдущих версий стандарта HTML. Сейчас для этих целей все теги используют параметр id.
По умолчанию графическое изображение показывается именно в таком виде, как оно и было создано, с сохранением размеров по вертикали и горизонтали. Однако мы имеем возможность явно задавать размеры рисунка по своему усмотрению. Для этого используются параметры height и width. Как задавать размеры в пикселах или процентном соотношении мы уже знаем. Необходимо отметить лишь, что браузеры стремятся сохранять пропорции рисунка, поэтому явное задание размеров, меняющее пропорции, может быть проигнорировано браузером, и тот выберет такие размеры, которые были бы максимально близки к указанным пользователем, не нарушая пропорций. Поэтому для Web-страниц обычно готовят графические изображения тех размеров, которые будут применяться и при отображении их в составе Web-страниц. И если одно изображение должно отображаться несколько раз с различными размерами, то проще приготовить несколько графических файлов, чем отдавать свои рисунки на самовольное отображение браузеру, который сможет нарушить всю верстку Web-страниц.
При помощи параметров мы можем указывать величину чистого пространства, которое будет отделять графическое изображение от окружающих его других элементов оформления Web-страницы, т. е. фактически, задавать отступ рисунка. Для этого применяются параметры hspace и vspace. Параметр hspace устанавливает отступ по горизонтали в пикселах, a vspace — по вертикали. Обратите внимание, в качестве значений этих параметров могут применяться только численные значения, указывающие расстояния в пикселах. Нулевого значения для этих параметров не предусмотрено, но обычно каждый браузер использует малое ненулевое значение.
А при помощи параметра border мы можем устанавливать толщину границы, окружающей рисунок. Как обычно, значением параметра является число, указывающее толщину в пикселах. По умолчанию используется нулевое значение, делающее границу невидимой.
Также необходимо упомянуть о выравнивании графического объекта относительно обтекающего его текста. Для этого используется параметр align. В качестве его значения может использоваться одно ключевое слово из предопределенного их набора. Значения bottom, middle и top применяются для позиционирования первой строки текста, обтекающего рисунок по вертикали. Значение top смещает ее наверх, bottom— вниз, a middle позволяет центрировать строку по вертикали. Для выравнивания по горизонтали графического изображения применяются значения left и right. Первое значение left, как нетрудно догадаться, смещает рисунок к левому края блока, в котором тот отображается, a right — к правому.
Теперь пришло время на примерах увидеть, как мы можем позиционировать рисунок и комбинировать его с текстом, который должен обтекать искомое графическое изображение.

Листинг 1.11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">
<html> > .
<head> ,
<1:11:1е>Рисунки и TeKCT</title>
<body>
<р>Это текст, который обтекает рисунок.<img src="redhood.gif">
Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.</р>
</body>
</html>

Внешний вид этого HTML-документа при отображении его с помощью браузера показан на рис. 1.11.

Рис. 1.11. Окно браузера с результатом отображения файла, приведенного в листинге 1.11

В этом примере мы использовали чистый тег вставки изображения без каких-либо дополнительных параметров. Как мы можем видеть, изображение вставляется сразу после первого предложения, там, где мы и разместили тег <img>. При этом, если мы уменьшим размеры окна просмотра браузера по горизонтали так, чтобы первое предложение и рисунок не смогли бы поместиться там на одной строке, то сначала было бы отображено предложение, а уже под ним рисунок, прижатый к левому краю окна просмотра. Справа от него начиналось бы отображение следующего за ним текста таким образом, что базовая линия строки совпадала бы с нижним краем рисунка.
А теперь добавим к тегу отображения рисунка параметр горизонтального выравнивания. Получившийся код приведен в листинге 1.12.

Листинг 1.12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Рисунки и текст</title> <body>
<р>Это текст, который обтекает рисунок.<img src="redhood.gif"
align="ieft">
Это текст/ который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.</р>
</body>
</html>

Как видно, в этом случае опять сначала начийает отображаться текст, затем графическое изображение, прижатое к левому краю, согласно директиве, отданной при помощи параметра align, а справа от рисунка размещается остальной текст (рис. 1.12), т. е. изображение не может занять первую строку, так как текст начинается раньше него. То же самое произойдет, если применить параметр align со значением right, но рисунок окажется лишь прижатым к правому краю окна просмотра, а текст будет обтекать его с левой стороны. Вот и все изменения.
Теперь рассмотрим, как действует выравнивание по вертикали. Хотя параметр выравнивания вставляется в тег рисунка, наибольшие изменения заметны все-таки у текста, окружающего рисунок. Посмотрим действие параметра вертикального выравнивания на примере.

Рис. 1.12. Окно браузера с результатом отображения файла, приведенного в листинге 1.12

Листинг 1.13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/striqt.dtd">
<html> -
<head> '
<title>PMcyHKM и TeKCT</title>
<body>
<р>Это текст, который обтекает рисунок.<img src="redhood.gif"
align="middle">
Это текст, который обтекает рисунок. Это текст,
который обтекает рисунок.
Это текст, который обтекает рисунок.</р>
</body>
</html>

Результат отображения этого HTML-документа показан на рис. 1.13.

Рис. 1.13. Окно браузера с результатом отображения файла, приведенного в листинге 1.13

В данном примере мы установили вертикальное выравнивание посередине, т. е. первая строка текста, находящегося после тега вставки изображения, отображается в центре по вертикали свободного пространства справа от рисунка. Остальной текст отображается под рисунком. Если бы мы установили для параметра align значение top, то первая строка будет отображаться рядом с верхним обрезом рисунка. А при использовании значения bottom, первая строка текста будет отображаться рядом с нижней границей рисунка. Следует обратить внимание, что браузер распознает только один параметр align, т. е. мы можем указать либо вертикальное, либо горизонтальное выравнивание. Если же встроенных средств позиционирования и выравнивания рисунка не хватает, можно обратиться к процессу верстки с использованием таблиц. Применение таблиц мы рассмотрим в одном из следующих разделов этой главы.
Мы имеем возможность использовать в оформлении Web-страниц видеоролики. Следует быть очень аккуратным с их применением, так как файлы, содержащие эти видеоресурсы, обычно имеют достаточно большой объем. А для того, чтобы удаленный пользователь мог просмотреть их в своем браузере, ему понадобится полностью загрузить этот файл на свою машину. С использованием тех каналов, которые доступны большинству пользователей Интернета, подобная процедура может занять достаточно большое время. А ведь никто из нас не любит ждать загрузки Web-страницы.
Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real Video и Windows Media. А внедрение их в состав Web-страницы производится при помощи все того же тега <img>. Но для указания местонахождения видеофайла используется параметр dunscr. По умолчанию, внедренный в Web-страницу видеоклип проигрывается один раз, сразу после полной загрузки страницы. Но мы имеем некоторые возможности регулировать процесс проигрывания клипа или давать самому пользователю возможность управления его воспроизведения.
Если в состав тега <img> мы включим параметр start, то мы сможем явно указывать событие, после которого браузер должен будет воспроизвести загруженный видеоклип. В качестве значений данного параметра могут использоваться ключевые слова mouseover и fileopen. Первое из них указывает, что клип необходимо воспроизвести после того, как пользователь поместит курсор мыши на пространство, отведенное под видеовставку, а второе — что воспроизведение начнется сразу после полной загрузки HTML-файла. Впрочем, мы можем сочетать эти два варианта. В этом случае, тег вставки видеоролика будет выглядеть следующим образом:

Мы можем указывать, сколько раз необходимо воспроизвести видеоролик, используя для этой цели параметр loop. В качестве значения этого параметра используется число, устанавливающее количество повторения видеоклипа. Впрочем, если мы хотим, чтобы видео воспроизводилось постоянно, без какого-либо фиксированного количества повторений, то следует использовать значение infinite. А при помощи параметра loopdeiay мы можем устанавливать временную задержку между повторами воспроизведения видеоклипа. Значением данного параметра является число, указывающее промежуток времени в миллисекундах. Рассмотрим применение этих параметров на примере следующего фрагмента кода:

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

Листинг 1.14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http : / /www . w3 . org/TR/html4 /strict . dtd">
<html>. <head>
<title>Видео</title> <body>
<р>Обычный текст. <img dynsre=" intro.avi" start="mouseover" loop="2"; loopdelay="5000">
</body>
</html>

Рис. 1.14. Окно браузера с результатом отображения файла, приведенного в листинге 1.14

Естественно, так как процедура вставки видеофрагмента в тело Web-страницы является частным случаем вставки графики, то к тегу вставки видеофрагмента применяются и все остальные параметры, применимые к тегу <img>, такие, как параметры выравнивания, явного указания размера и прочие.
К мультимедийным возможностям относятся и звуковое оформление Web-страницы. Но звук мы можем использовать лишь в качестве фонового формления, т. е. некий звуковой файл будет воспроизводиться на компьютере удаленного пользователя после того, как тот загрузит Web-страницу. Если, конечно, в его компьютере установлена звуковая плата, т. е. изначально на компьютер удаленного пользователя загружается HTML-файл с Web-страницей, а затем подгружаются все остальные файлы, используемые в оформлении этой Web-страницы, такие как графические файлы, видeo- и аудиоклипы.
Итак, для того, чтобы просмотр Web-страницы сопровождался звуковым воспроизведением, необходимо в код страницы вставить тег <bgsound>. Тег ставляется не в тело Web-страницы, а в его заголовок, т. е. между тегами <head> и </head>. У данного тега существует обязательный параметр src, в качестве значения которого используется URL подключаемого звуквого файла. Необходимо отметить, что браузеры гарантированно распознают и воспроизводят аудиофайлы форматов MIDI и WAV. Воспроизведение иных форматов, таких как МРЗ и Real Audio, возможно только при подключении дополнительных модулей к браузерам.
Как и в случае с видеоклипами, мы можем задавать количество воспроизведений звукового файла при помощи параметра loop. В качестве значения этого параметра используется число повторений. Если необходимо воспроизводить аудиофрагмент постоянно, следует использовать значение "-1", т. е. если мы хотим, чтобы при загрузке Web-страницы непрерывно проигрывался некий аудиофайл, следует воспользоваться следующей конструкцией:

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

Гиперссылки

Гиперссылки являются основным достоинством Web-страниц. Это, по сути, и есть ядро всемирной паутины. Тем, без чего бы она так и осталась просто еще одним средством отображения документов. Они являются видимым отображением той технологии связи самых различных интернет-ресурсов, которая и создает уникальную интегрированность Сети.
Мы все прекрасно знаем, что если при просмотре Web-страницы навести курсор мыши на гиперссылку, внедренную в состав содержимого Web-страницы, то курсор примет форму кисти руки с вытянутым указательным пальцем, а единичный щелчок по этой гиперссылке заставит браузер отыскать в Сети тот ресурс, на который гиперссылка указывает, и загрузить его.
В качестве гиперссылки может выступать любой фрагмент видимого содержимого Web-страницы, т. е. и текст, и графические изображения. Для этого применяется тег <а> со своим закрывающим близнецом </а>. Рассмотрим самый простой пример.

Листинг 1.15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html47strict.dtd">
<html> <head>
<title>Гиперссылки</title> <body>
<р>0бычный текст. <a href="other_doc.htm">Гиперссылкa на другую web-страницу</а> </р>
</body>
</html>

Рис. 1.15. Окно браузера с результатом отображения файла, приведенного в листинге 1.15

Как легко увидеть на рис. 1.15, гиперссылка также выделяется цветом, чтобы ее можно было отличить от обычного текста. Цвет выделения устанавливается удаленным пользователем в своем браузере, но мы имеем возможность явно указывать, какой цвет использовать для выделения гиперссылок при помощи стилевых таблиц. Их применение мы рассмотрим в следующей главе. Если мы посмотрим на код листинга 1.15, то увидим, что текст, с которым связывается гиперссылка, обрамляется тегами <а> и </а>. При этом открывающий тег обладает параметром href, в качестве значения которого используется URL того Интернет-ресурса, на который и указывает создаваемая гиперссылка. При этом URL может быть как полным, т. е. включающем в себя наименование протокола доступа к ресурсу, наименования сайта и страницы, Как, например, "http://www.mysite.com/mypage.htm", так и относительным, когда указывается путь к документу, находящемуся на том же сайте, где и исходная Web-страница. При этом будет использоваться код приблизительно следующего вида:

<а href="/chap2/page1.htm">

Здесь мы ссылаемся на Web-страницу, находящуюся в файле с наименованием pagel.htm, который размещается в каталоге chap2.
Вообще, об URL следует рассказать несколько подробнее. Это единственное и абсолютно точное средство идентификации любых ресурсов, размещенных в Сети. В общем виде его можно написать следующим образом:

http://www.mysite.com/fоlderl/filel.htm

Сам URL можно разделить на три логические части. В самом начале URL мы описываем протокол, по которому производится доступ к интернет-ресурсу. Для Web-страниц используется протокол HTTP, как в нашем примере. Если необходимо установить гиперссылку на некий файл, размещенный на каком-либо FTP-сервере, то это наименование и записывается в начальной части URL. Также существует механизм, позволяющий при нажатии курсором мыши на гиперссылку, активировать почтовый клиент, установленный пользователем в системе по умолчанию, и запускать режим написания письма, одновременно указывая адрес получателя. Для этого используется гиперссылка следующего вида:

<а href="mailto://address@host.com">

Как видно, в качестве обозначения протокола используется ключевое поле maiito, а после двоеточия и пары слэшей, которые всегда отделяют наименование протокола от основной части адреса, записывается адрес электронной почты, на который будет отсылаться написанное пользователем электронное письмо.
Вторая часть URL описывает сам адрес ресурса. Для Web-страницы это доменное имя сайта. Обычно применяется доменное имя второго или третьего уровня. Доменные имена первого уровня записываются в самом конце доменного имени. Внутри каждого домена первого уровня контролирующими организациями выделяются доменные имена второго уровня. А владельцы доменных имен второго уровня самостоятельно создают доменные имена третьего уровня. Так, практически, каждый владелец доменного имени второго уровня выделяет себе доменное имя третьего уровня WWW.
А третья часть URL представляет собой путь к конкретному файлу во внутреннем файловом пространстве Web-сервера. Здесь необходимо сделать маленькое отступление, разъясняющее механизм действия Web-серверов.
Для того, чтобы любой удаленный пользователь мог получить доступ к какому-либо Web-сайту, представляющему собой, как известно, некую коллекцию отдельных Web-страниц и специализированных выполняемых приложений — скриптов, необходимо, чтобы все эти Web-страницы находились на отдельном компьютере, на котором действует специализированное приложение, называемое Web-сервером. В обязанности подобного Web-сервера входит получение запросов удаленных пользователей, обработка этих запросов и передача удаленным пользователям содержимого Web-страниц по протоколу HTTP. Для Web-сервера на диске компьютера выделяется отдельный каталог, в котором и размещаются html-файлы, содержащие Web-страницы, и приложения — скрипты, обеспечивающие интерактивные функции сайта. Естественно, внутри общего каталога, отведенного для Web-страниц, мы можем создавать свои структуры папок для более четкого разделения ресурсов сайта. Так в отдельные папки обычно выделяются графические изображения, используемые в оформлении Web-страниц, сами Web-страницы группируются в каталогах, по признаку принадлежности к тому или иному разделу сайта. И полный путь к некоему html-файлу или иному ресурсу, который используется в оформлении Web-страниц, и является третьей частью URL. Рассмотрим маленький пример:

http://www.mysite.com/content/about.html

Этот URL указывает на файл с наименованием about.html, который располагается в директории content, находящейся в файловом пространстве Web-сервера с доменным именем www.mysite.com. При этом передача пользователю содержимого искомого файла будет проходить с использованием протокола HTTP.
Впрочем, в поле ввода адреса интернет-ресурса любого браузера можно ввести только доменное имя сайта, и мы уже получим доступ к основной Web-странице данного сайта. Дело в том, что если не указывать в поле ввода протокол, то браузер автоматически использует протокол HTTP. А если не указывать полное наименование html-файла с Web-страницей, то Web-сервер, принимающий запрос удаленного пользователя, выдаст главную страницу сайта, называемую часто домашней страницей, которая обязательно хранится в файле с наименованием index.html, т. е. каждый сайт обязан содержать файл с таким наименованием, который и является стартовой страницей Web-сайта.
Но при этом необходимо осознавать, что если в браузере мы можем позволить себе написать адрес не полностью, понадеявшись на правильную его интерпретацию самим браузером, то в гиперссылках мы обязаны писать URL полностью, за исключением тех случаев, когда документы, на которые указывает гиперссылка, находятся на том же сайте, что и исходная Web-страница. В подобных случаях мы можем не указывать доменное имя сайта, ограничившись указанием протокола и полного наименования, включающего в себя путь в файловой системе Web-сервера, ресурса, на который указывает гиперссылка.
На самом деле, тег <а> обладает достаточно большим количеством параметров, которые позволяют задавать самые различные свойства гиперссылки. По мере изучения материала мы рассмотрим их все.
Гиперссылки принято разделять на глобальные и локальные. Глобальные гиперссылки указывают на интернет-ресурсы, размещенные вне исходной Web-страницы. Локальные же ссылки адресуют некоторые ресурсы, расположенные на текущей странице. Часто этот прием используется если страница содержит достаточно большой объем информации, который не умещается полностью в окне просмотра. Например, мы размещаем на Web-странице некую повесть, или текстовый документ, разбитый на разделы. При этом в начале этого документа мы можем создать его оглавление, действующее на основе гиперссылок, каждая из которых будет указывать на какой-либо раздел документа. Тогда пользователь, загрузивший Web-страницу, сможет перемещаться по документу с использованием этих гиперссылок, а не только при помощи вертикальной полосы прокрутки, что, несомненно, облегчает навигацию.
Для того чтобы в документе мы могли использовать локальные гиперссылки, необходимо сначала пометить те фрагменты документа, на которые они будут указывать. Например, если мы хотим, чтобы какая-либо локальная гиперссылка перемещала удаленного пользователя к некоему определенному абзацу, то в этот абзац мы должны поместить тег <а> с параметром name. При этом сама гиперссылка будет создаваться с использованием несколько измененного значения параметра href. Но проще все это увидеть на примере (рис. 1.16).

Листинг 1.16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Гиперссылки</title>
<body>
<p><a href="#аnсh1">Локальная гиперссылка</а></р> <р>0бычный текст</р>
<р><а name="anch1">Teкст, на который мы ссылаемся в начале страницы</ах/р>
</body>
</html>

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

<а href="http://www.mysite.com/doc2.htmfanch3">

To есть, мы совмещаем использование полного URL документа и одновременно указывааем на некий его фрагмент, помеченный как "anchs".

Рис. 1.16. Окно браузера с результатом отображения файла, приведенного в листинге 1.16

Следует отметить, что если текст, на который указывает гиперссылка, уже отображен в окне просмотра, как это случилось в нашем последнем примере, то никаких изменений не произойдет. Но стоит лишь изменить размеры окна просмотра браузера по вертикали так, чтобы скрыть последнюю строку содержимого, на которую и указывает гиперссылка, и результат ее действия можно будет наглядно продемонстрировать.
Естественно, все наименования подобных маркеров-закладок, которые определяются при помощи значения параметра name, должны быть уникальными. При этом следует учитывать, что HTML не делает различий между заглавными и прописными символами. Поэтому, если в нашем HTML-документе определены две закладки, на которые будут впоследствии ссылаться гиперссылки, различающиеся лишь регистром символов, то для HTML-анализатора, встроенного в браузер, эти идентификаторы будут считаться одинаковыми, и он не будет обрабатывать ни один из них.
Впрочем, мы уже знаем, что идентифицировать какой-либо элемент HTML-документа можно и при помощи параметра id, который может использоваться в составе любого тега. При этом гиперссылки, указывающие на фрагменты документов, могут использовать и эти параметры, т. е. для установки маркера-закладки на какой-либо тег не обязательно использовать тег <а> с параметром name, достаточно лишь использовать параметр id.
Значения параметра name и параметра id являются уникальными идентификаторами элементов HTML-документа. Поэтому ни одно значение параметра name не должно совпадать ни с одним значением параметра id.
Но какой вариант следует выбрать для своих Web-страниц, какой именно параметр стоит использовать? Здесь необходимо осознавать, что, несмотря на то, что параметр id может служить для выполнения нескольких действий, таких как идентификация маркера-закладки, создание уникальных щдентификаторов для выполняемых сценариев DHTML и стилевого оформления, некоторые устаревшие браузеры могут не воспринимать эти идентификаторы для ориентирования гиперссылок.
Совместно с тегом <а> может использоваться параметр title, который поможет идентифицировать гиперссылку для удаленного пользователя. Значением этого параметра является текстовая строка, которая будет отображаться виде маленькой подсказки — хинта, когда пользователь наведет курсор мыши на искомую гиперссыяку. Выглядит объявление подобной гиперссылки приблизительно следующим образом:

<а href="www.site.com" title="Очень симпатичный сайт">

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

Alternate. Значение указывает, что документ является альтернативным представлением исходного документа. Если при этом в гиперссылке используется параметр lang со значением, которое отлично of языка исходного документа, то подобная гиперссылка обычно рассматривается как ссылка на копию исходного документа на другом языке. Stylesheet. Обозначает, что документ, на который указывает гиперссылка, является стилевой таблицей. О механизме применения стилевых таблиц подробно рассказано во второй главе. start. Применяется для обозначения начального, стартового документа некоего множества документов. Применительно к Web-сайту это, очевидно, будет домашняя страница. Next. Значение используется, если стартовый документ и документ, на который указывает гиперссылка, входят в некую линейную упорядоченную последовательность документов, и последний является следующим в последовательности по отношению к исходной Web-странице. Prev. Значение используется в том же случае, что и предыдущее, но теперь указывает на то, что документ в цепочке является не следующим, а предыдущим, по отношению к стартовому документу. index. Используется в гиперссылках, которые указывают на документ, являющийся индексированным содержанием исходной Web-страницы. Glossary. Значение указывает, что документ содержит словарь терминов, использующихся в исходном документе. copyright. Используется, если документ, на который указывает гиперссылка, содержит уведомление об авторских правах на содержимое исходного документа. chapter. Применяется в гиперссылках, указывающих на документы, являющиеся отдельными главами в некоем множестве документов. section. Гиперссылка с таким значением параметра rel указывает на документ, который является разделом в общем множестве документов, образующих единое целое содержание. subsection. Значение является некоторым продолжением концепции, обозначенной предыдущим рассмотренным нами значением. Оно обозначает, что документ является уже подразделом. Appendix. Значение указывает, что документ, на который указывает гиперссылка, является приложением к исходному документу. Help. Используется для ссылок на документы, которые предоставляют дополнительную справочную информацию по отношению к содержимому исходного документа. Bookmark. Применяется для ссылок на HTML-документы, содержащие ссылки на некоторые выделенные ключевые фрагменты исходного документа.

При использовании этих значений необходимо учитывать, что в данном случае HTML-анализаторы будут чувствительны к регистру символов, поэтому необходимо полностью придерживаться того написания, которое приведено в нашем списке.
На самом деле, в HTML присутствует возможность создавать свои значения для рассматриваемого нами атрибута, но так как для использования этого параметра в полной мере необходимо использовать специализированные средства описания этих новых значений и программное обеспечение, нацеленное на распознавание этих типов ссылок. Так как нас интересуют браузеры, то создание новых типов ссылок нам ни к чему.
Данная технология на самом деле является паллиативом, который призван обеспечить хотя бы часть возможностей, предоставляемых новым языком описания документов в Интернете — XML (extensible Markup Language), который пророчат на роль преемника и "убийцы" HTML Но пока не существует распространенных XML-браузеров и приложений, обрабатывающих XML-документы. И еще достаточно долгое время эта технология не станет общепринятой, а значит, технология HTML еще имеет полное право на жизнь и будет использоваться в качестве основы для Web-страниц еще достаточно долго.
Но вернемся к рассмотрению атрибутов тега <а>. Атрибут rev является противоположностью атрибутов тега <а>. Если атрибут rel определяет тип документа, на который указывает гиперссылка, то атрибут rev определяет тип исходного документа, содержащего гиперссылку. В качестве значений этого атрибута применяется все тот же набор ключевых слов, который использовался и для атрибута rel.
При помощи параметра target мы указываем, в каком фрейме необходимо отобразить документ, на который указывает гиперссылка. Дело в том, что обычно в одном окне просмотра браузера отображается один документ. Но в HTML существует возможность поделить окно просмотра на несколько областей, называемых фреймами, в каждом из которых будет отображаться свой HTML-документ. Саму технологию использования фреймов мы будем рассматривать в одном из следующих разделов этой главы, а пока лишь отметим, что параметр target позволяет явно указывать, в каком фрейме необходимо отобразить Web-страницу. Установка гиперссылки с использованием этого параметра будет выглядеть приблизительно следующим образом:

<а href="http://www.mysite.com/docl.html" target="_top">

Подобная гиперссылка заставит браузер загрузить Web-страницу, URL которой указан в качестве значения параметра href, в верхний фрейм, имя которого указано в параметре target. В качестве значения последнего параметра используются ключевые слова, определенные в спецификации HTML. Мы рассмотрим их в разделе, посвященном фреймам.
Некоторые органы ввода информации и гиперссылки позволяют перемещать фокус ввода между собой при помощи клавиши табуляции, т. е. одно нажатие этой клавиши активизирует следующий орган ввода, входящий в общую последовательность. А порядок перемещения между органами управления, входящими в общую последовательность, задается при помощи параметра tabindex. В качестве значения этого параметра используется обычное целое положительное число, и чем больше это число у какого-либо органа ввода данных или гиперссылки, тем позже дойдет до него очередь при перемещении фокуса ввода. Естественно, ни у какой пары элементов оформления Web-страницы значение этого параметра не должно совпадать, иначе браузер просто не будет включать их в последовательность элементов с перемещением фокуса ввода.
Впрочем, помимо доступа при помощи последовательных нажатий клавиши табуляции, мы можем использовать параметр access key, в качестве значения которого указывается символ. Когда пользователь нажимает на клавишу, которая отвечает за ввод данного символа, фокус ввода автоматически передается искомой гиперссылке, в объявление которой и встроен параметр access key, и пользователь может активировать ее без использования мыши, одним лишь нажатием на клавишу <Enter>. Рассмотрим маленький пример:

<а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U">

Этим тегом мы объявляем гиперссылку, доступ к которой можно получить либо при помощи последовательных нажатий клавиши табуляции, либо нажав клавишу с символом "U".
В качестве носителя гиперссылки может выступать не только текст, но и графическое изображение. Для этого необходимо тег, объявляющий вставку графики в состав содержимого Web-страницы, поместить между тегами <а> и </а>. Но дело в том, что на графическое изображение мы можем "навесить" не одну, а несколько гиперссылок, т. е. в пределах картинки выделяется несколько активных областей, нажатие мышью на каждую из которых активирует соответствующую гиперссылку. Подобная технология называется сегментированной графикой.
Для создания подобных графических изображений, связанных с несколькими гиперссылками, применяются специализированные теги. Сначала объявляются активные области рисунка, называемые также сегментами. Вся их совокупность составляет карту активных сегментов рисунка, которой присваивается некое имя. А затем это имя карты связывается с самим изображением, объявляемым при помощи тега <img>. Рассмотрим типичный пример.

Листинг 1.17

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">
<html>
<head>
<title>Ceгментированная графика</title>
<body>
<р>Это обычный текст.<img srce"redhood.gif" usemap="#mapl"
alt="docs"x/p> <map namee"mapl">
<area href^"1.htm" shape-"rect" coords="l, 1, Ю, 10" alt-"l">.
<area href="2.htm" shape="circle" coords«"20,20,5" alt-"2">
<area href-"l.htm" shape»"poly" coords-.111,30,10,35,1, 50', 1, 30" alt="3">
</raap>
</body>
</html>

В этом примере видно, что при объявлении рисунка, в тег <img> мы вставляем параметр usemap, значением которого является наименование карты активнь!х сегментов рисунка, связанных с гиперссылками. Перед наименованием используемой карты активных сегментов вставляется символ решетки. Описание этой карты помещается между тегами <тар> и </тар>. При этом у открывающего тега <тар> существует обязательный параметр name, значением которого является наименование карты.
Карта состоит из описания сегментов. Каждый сегмент описывается при помощи одного тега <агеа>. Мы можем применять активные сегменты трех различных форм: прямоугольники, круги и многоугольники. Форма задается при помощи обязательного параметра shape. В качестве значения данного параметра мы можем использовать одно из трех предустановленных значений.

Значение rect используется для создания прямоугольных активных областей. Значение circle используется для создания кругового сегмента. Значение poly позволяет создавать активные сегменты в виде выпуклых многоугольников.

После того, как мы задали тип формы, следует точно определить их размеры и расположение на нашем графическом изображении. Для этого используется параметр coords, в качестве значения которого записывается перечень координат, определяющих активный сегмент. В листинге 1.17 мы можем увидеть, что координаты в общем списке разделяются обычной запятой. Отсчет координат ведется от верхнего левого угла рисунка, который имеет координаты (0;0).
Для прямоугольных сегментов задаются координаты верхнего левого и правого нижнего угла. А для многоугольников последовательно перечисляются координаты всех точек, в порядке соединения их линиями. Естественно, первая и последняя пара координат должны совпадать, иначе многоугольник окажется незамкнутым, и активный сегмент не будет обрабатываться.
В тег <агеа> входит и параметр href, в качестве значения которого используется URL ресурса, на который указывает гиперссылка данного сегмента.
Но этот параметр, как ни удивительно, не является обязательным. В том случае, когда сегмент создается, но не должен соединятся с гиперссылкой, следует использовать параметр nohref, который не имеет значения.
Но обязательный параметр для тега <агеа> все-таки есть. Это параметр alt, значением которого является текстовая строка, являющаяся альтернативным представлением рисунка. Как мы знаем, данная строка отображается в виде хинта, когда пользователь наводит курсор мыши на объект. В нашем случае подобным объектом является активный сегмент, внедренный в графическое изображение.
Также в теге <агеа>, как и в тегах обычных гиперссылок, используются параметры tabindex и access key, которые позволяют активизировать гипер-ссылку без использования мыши, при помощи одной лишь клавиатуры. Структуру значений этих параметров мы рассмотрели несколько ранее. Немного отступая от темы, следует заметить, что любой «давильным Web-мастер непременно должен использовать эти параметры, так как только их применение может гарантировать активацию гиперссылок без помощи мыши.
Итак, мы разобрались с применением технологии сегментированной графики. Но о ссылках мы узнали далеко не все. В спецификации HTML определен тег <link>, который создает не привычную нам гиперссылку, а некоторую связь между отображаемым документом и каким-либо дополнительным файлом. Теги <link> могут размещаться только в разделе заголовка HTML-документа, между тегами <head> и </head>В качестве примера применения рассматриваемого нами тега <link> можно привести следующий фрагмент кода:

Листинг 1.17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Chapter 2</title>
<link rel="Index" href="/index.html">
<link rel="Next" href="Chapter3.html">
<link rel="Prev" href="Chapterl.html">
</head>

При помощи этого фрагмента мы указываем, что данная Web-страница содержит вторую главу некоего обширного документа, и при помощи тегов <link> указываем связи с Web-страницами, содержащими оглавление, а также предыдущую и следующую главу. Тип документа, на который указывает ссылка, определяется при помощи знакомого нам параметра гel, Обычный браузер, конечно, не сможет каким-либо образом обработать и отобразить подобные ссылки. Они были введены в HTML для создания документов, которые обрабатывались бы при помощи неких специализированных приложений, позволяющих на основе данного формата создавать системы документооборота. Но встроенных скудных возможностей HTML
для создания полноценных систем документооборота было явно недостаточно, и когда был разработан стандарт XML, разработчики с радостью сменили фаворита.
Так что же, получается, что в обычных Web-страницах тег <iink> абсолютно бесполезен? На самом деле нет. Только при помощи этого тега мы можем соединять Web-страницы с внешними стилевыми таблицами, мощнейшим средством управления отображением документа в браузере. Но о стилевых таблицах мы узнаем чуть позже, во второй главе. Там же мы и рассмотрим пример применения тега <link>. А пока нам осталось лишь перечислить параметры данного тега. Все эти параметры применяются и в тегах <а> с теми же возможными значениями, поэтому мы не будем детально рассматривать каждый параметр, а просто вкратце их перечислим:

charset — указывает кодировку документа, на который указывает ссылка; href — в качестве значения используется URL документа, на который указывает ссылка; hrefiang — значением является кодовое обозначение языка, на котором написан связываемый документ; type — устанавливает тип документа, на который указывает ссылка; rel— задает статус документа, на который указывает ссылка по отношению к исходному документу; rev — задает статус исходного документа по отношению к тому, на который указывает данная ссылка; media — указывает тип устройства, на котором будет отображаться документ, на который указывает ссылка.

На данный момент поддерживаются документы, отображаемые на обычных мониторах, на брайлевских мониторах, рассчитанных на людей с потерей зрения, для печатающих устройств и устройств речевого воспроизведения.
И, естественно, помимо этих параметров используется набор общих для всех тегов параметров дополнительной идентификации.
Осталось нам рассмотреть только один тег, применяемый для обслуживания гиперссылок. Как мы знаем, мы можем не указывать полный URL для документов, на которые указывают гиперссылки, если этот документ находится на том же Web-сайте, что и исходная Web-страница. Но оказывается, мы можем точно так же поступать и с гиперссылками на Web-страницы, входящими в состав иных сайтов.
При помощи тега <base> мы задаем основание для гиперссылок с укороченными значениями параметра href. Попробуем продемонстрировать действие этого механизма на простом и наглядном примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Web-Cтраница</title>
<base href="http://www.mysite.com/tour.html"> </head> <body>
<Р>Текст<А href="/cages/birds.gif">Ссылка</А>
</body>
</html>

В качестве значения обязательного параметра href тега <base> мы задаем документ, являющийся основой для содержимого Web-страниц нашего сайта. И теперь, если в теле нашего HTML-документа мы используем гиперссылку с укороченным URL, то в качестве доменного имени для этого URL будет использоваться не имя исходного сайта, а того, который указан в теге <base>. Таким образом, в примере гиперссылка указывает на документ c URL www.mysite.com/cages/birds.gif.
Следует уточнить, что тег <base> размещается в заголовке документа между тегами <head> и </head>.
И это все, что мы можем рассказать о применении гиперссылок в HTML.

Списки

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

Таблицы

Таблицы являются одной из важнейших форм визуальной организации информации, располагающейся на Web-страницах. Это не просто средство отображения таблиц, включенных в состав Web-страниц. Это, пожалуй, единственное средство некоей верстки страниц. Мы знаем, что в HTML, a точнее, в его стандарт не встроены средства точного позиционирования элементов оформления Web-страниц. И здесь таблицы пришлись как нельзя кстати. Их можно распространить на всю страницу, и уже в ее ячейках размещать элементы оформления Web-страниц. В качестве подобного средства верстки также могут применяться фреймы, которые мы будем рассматривать в следующем разделе этой главы, но в последнее время в среде Web-мастеров они теряют свою популярность. И тому есть свои причины, которые берут начало в теории пользовательского интерфейса. Но вернемся к нашим таблицам.
Для максимально полного понимания правил использования таблиц необходимо знать их структуру. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки. Так как для всех этих объектов существуют свои параметры, задающие их размеры, создается некоторая иерархия этих свойств. Но основой являются ячейки и их содержимое. Если мы жестко задаем ширину таблицы, скажем, в сто пикселов, а в каждой строке таблицы находится по четыре ячейки, каждая шириной в тридцать пикселов, то, несмотря на явную установку ширину всей таблицы, она все равно составит не сто, а сто двадцать пикселов. А если в какой-либо из ячеек будет находится графическое изображение, шириной более предусмотренных тридцати пикселов, то оно "растянет" собой ячейку, а с ней и весь столбец. А следовательно, еще более увеличится ширина всей таблицы. Сделано это для того, чтобы максимально адекватно отображать содержимое табличных ячеек, без пропажи их содержимого, полного или частичного. А жестко заданные размеры таблицы сохраняются, если есть такая возможность.
Таким образом, явного объекта, обозначающего столбец таблицы, нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица в целом. Таким образом, при загрузке Web-страницы, содержащей таблицы, она не будет отображаться постепенно, по мере ее загрузки, а только после того, как она будет получена браузером вся полностью.
Но пора переходить к рассмотрению тегов, реализующих таблицы. Сама таблица, все ее составляющие, находятся между стартовым тегом <table> и его закрывающим близнецом </table>. В качестве составляющих используется заголовок таблицы, реализуемый тегом <caption>, группы столбцов, объявляемые при помощи тегов <col> и <coigroup>, шапка и подвал таблицы, создаваемые тегами <thead> и <tfoot>, соответственно, и группы строк, реализуемые тегом <tbody>. Все остальные, более мелкие элементы таблицы, размещаются уже внутри этих объектов.
Сам тег <table> обладает достаточно обширным набором параметров, которые позволяют устанавливать самые различные свойства таблицы.
Так уж сложилось, что вопросам ширины каких-либо элементов оформления Web-страниц мы уделяем много больше внимания, чем установке высоты. Проще говоря, люди много спокойнее относятся к вертикальной полосе прокрутки, нежели к горизонтальной. Поэтому у таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Но вот ширину мы можем явно устанавливать. Производится это при помощи необязательно параметра width. В качестве значения этого параметра мы можем указать прямое или кратное количестве пикселов, или воспользоваться процентным соотношением.
Также часто используется параметр border, при помощи которого мы можем явно указывать ширину границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, которое и указывав ширину таблицы в пикселах. Если мы установим нулевое значение этогс параметра, то сама граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы.
Параметр cellspacing позволяет устанавливать размер в пикселах между отдельными ячейками страницы. А похожий параметр cellpadding устанавливает размер отступа содержимого ячеек от ее границы, т. е. cellspacing устанавливает отступ вне ячейки, a cellpadding — внутри ячейки.
А при помощи уже знакомого нам параметра align у нас есть возможносп установить горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: left, center и right, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно.
В самом простом варианте создания таблицы, мы объявляем саму таблицу при помощи тега <table>, затем, несколько строк, а внутри этих строк сами ячейки. Это, повторюсь, самый простой способ, который не требует применения всех тех встроенных табличных объектов, которые мы упоминали несколько выше. До них еще дойдет очередь, а пока посмотрим на примере, как создаются и отображаются таблицы в HTML-документах" (рис. 1.24).

Листинг 1.25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=5 cellpadding=7 cellspacing=10 a,lign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>

В данном примере мы намеренно применили достаточно большие значения для толщины границы и отступов снаружи и внутри ячеек для того, чтобы максимально наглядно показать их действие. А из листинга примера видно, что строки таблицы объявляются при помощи пары тегов <tr> и </tr>. Уже внутри этих тегов мы объявляем ячейки при помощи тега<td> и его закрывающей пары </td>, между которыми и находится содержимое каждой конкретной ячейки. Как видно, сколько ячеек будет в строке, столько столбцов в таблице и отобразит браузер. Размер ячеек будет определяться, исходя из размеров содержимого и установленных отступов. При этом, если содержимое какой-либо одной ячейки столбца будет больше по размерам, чем содержимое иных ячеек этого столбца, ширина всего столбца будет установлена по ширине самой большой ячейки.
Естественно, также возможна ситуация, когда создатель Web-страницы в различных строках объявит разное количество ячеек. Но и тогда браузер сможет отобразить таблицу, как это показано в следующем примере (рис. 1. 25).

Рис. 1.24. Окно браузера с результатом отображения файла, приведенного в листинге 1.25

Листинг 1.26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http : / /www . w3 . org/TR/htm!4 /strict . dtd">
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 аlign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>Длинная ячейка</td><td>l0</td>
</tr>
</table>
</body>
</html>

Рис. 1.25. Окно браузера с результатом отображения файла, приведенного в листинге 1.26

Но это был самый простой способ создания таблиц, когда в ее состав входят только основные строки. На самом деле возникает гораздо больше возможностей, если мы используем различные дополнительные объекты, входящие в состав таблицы. Одним из таких объектов является заголовок, реализуемый при помощи тега <caption>. Текст заголовка размещается между этим стартовым тегом и его завершающим двойником </caption>. Тег, объявляющий заголовок таблицы обладает параметром align, при помощи которого мы можем указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: top, bottom, left и right. Значение top заставляет браузер отображать заголовок таблицы над ней самой. Значение bottom перемещает заголовок под таблицу. Значения left и right устанавливают, соответственно, левое и правое горизонтальное выравнивание заголовка, который при этом отображается сверху таблицы. По умолчанию, заголовок отображается сверху, а если не указывать явно выравнивание по горизонтали, то заголовок центрируется. Приведем пример использования этого тега.

Листинг 1.27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.4td">
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 align=left>
<caption > 3аголовок таблицы</сарtion>
<tr>
<td> 1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>

В данном случае мы использовали значение right два параметра align. Таким образом, заголовок отображается сверху таблицы, занимает по горизонтали пространство не больше, чем сама таблица, и текст прижат к правой границе этого пространства. Все это показано на рис. 1.26.

Рис. 1.26. Окно браузера с результатом отображения файла, приведенного в листинге 1.27

Как видно, заголовок таблицы, хоть и относится, строго говоря, к таблице, во отображается вне ее самой. Зато следующие три объекта, которые мы ршгсмотрим, являются составными частями таблицы.
В предыдущих примерах содержимое таблицы разбивалось на обычные равноценные строки. Но ведь обычно таблицы содержат и явно выделенную верхнюю часть, называемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются при помощи тегов <thead> и <tfoot> соответственно. Если мы применяем эти теги в объявлении таблицы, то нам необходимо будет явно обозначить часть таблицы, в которой размещаются обычные данные. Это обозначение производится при помощи тега <tbbdy>. Естественно, все три только что упомянутых тега применяются обязательно в паре со своими закрывающими двойниками. Посмотрим на примере, как изменяется объявление таблицы в коде HTML-документа и при отображении ее в браузере, с использованием этих структурных элементов (рис. 1.27).

Листинг 1.28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.4td">
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный тёкст</р>
<table border=2 align=left>
<caption> 3аголовок таблицы</сарtion>
<thead>
<tr>
<td>Cтолбец 1</td><td>Cтолбец 2</td><td>Cтолбец 3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</tbody>
tfoot>
<tr>
<td>5</td> <td>7</td> <td>9</td>
</tfoot>
</table>
</body>
</html>

Рис. 1.27. Окно браузера с результатом отображения файла, приведенного в листинге 1.28

Из листинга легко увидеть, что содержимым всех рассматриваемых нами структурных частей таблицы по-прежнему являются строки, составляющиеся, в свою очередь, из отдельных ячеек.
Как видно, несмотря на кардинально изменившуюся структуру таблицы в коде HTML-документа, при отображении ничего принципиально нового не появилось. И это правильно, так как HTML старается передавать конкретные аспекты отображения на более низкий, более детальный уровень иерархии объектов, т. е. если мы хотим, чтобы ячейки подвала, заголовка и тела таблицы отличались друг от друга по оформлению, мы должны либо самостоятельно установить эти правила отображения для каждой ячейки, либо воспользоваться стилевым оформлением.
Тем не менее, одно средство оформления все-таки встроено в эти теги. При помощи параметров align и valign мы можем устанавливать выравнивание содержимого ячеек. Параметр align задает выравнивание содержимого ячеек данного раздела таблицы по горизонтали. В качестве значения данного параметра применяется одно из предустановленных ключевых слов. Рассмотрим их.

Значение left прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы. Значение right выравнивает любое содержимое ячеек по правому краю. Значение center центрирует содержание ячеек, включенных в раздел, к которому и применяется данный параметр. Используется по умолчанию для заголовков таблицы. Значение justify заставляет браузер попытаться отобразить содержимое ячеек, равномерно растянув их по всей ширине ячейки. Значение char применяется в том случае, если в ячейках раздела отображается численная информация в финансовом формате, и необходимо выровнять ее не просто по левому или правому краю, а так, чтобы разделители целой и десятичной частей всех чисел находились на одном и том же уровне.

О последнем случае вообще стоит поговорить особо. Мы сказали, что выравниваться будут не столько сами числа, сколько их десятичные разделители. А какие символы будут считаться десятичными разделителями? Если для всего документа явно установлен язык текстового содержимого, то браузер сам поймет, какой символ считается десятичным разделителем. Но нет никакой гарантии, что мы для этих целей будем использовать именно тот символ, который распознается браузером. Поэтому у нас есть возможность самостоятельно явно указать, какой символ мы применяем для разделения целой и дробной частей чисел. Для этих целей используется параметр char, значением которого и является данный символ. К сожалению, данную возможность стандарта HTML поддерживают далеко не все браузеры.
Теперь перейдем к параметру, позволяющему явно устанавливать вертикальное выравнивание содержимого ячеек, входящих в состав какого-либо блока таблицы. Он носит наименование vaiign. Как и параметр горизонтального выравнивания, он в качестве значения может использовать только одно ключевое слово из заранее предопределенного набора.

Значение top прижимает содержимое ячеек к их верхним границам. Значение middle центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Данное значение используется по умолчанию. Значение bottom прижимает содержимое ячеек к их нижним граням. Значение baseline имеет смысл применять только для ячеек с текстовым содержимым. В этом случае, базовые линии первых строк текстового содержимого ячеек, входящих в объявляемый раздел таблицы, выравниваются по базовой линии первой строки текста содержимого первой ячейки во всей строке. Напомню, что базовой линией текста называется невидимая линия, на которой и располагаются основания большинства символов применяемого алфавита. Но у некоторых символов, таких как "g" в латинском алфавите, или "р" — в русском, существуют так называемые "хвостики", которые уходят вниз за базовую линию.

При помощи рассмотренных нами блоков таблицы, мы можем структурировать ее содержимое и немного управлять отображением содержимого ячеек, входящих в эти блоки. Но что делать, если нам необходимо установить единые правила оформления для одного или нескольких столбцов таблицы? Как мы знаем, нам нет нужды объявлять их специально, так как столбцы монтируются из ячеек, входящих в строки. Но, тем не менее, в стандарте HTML 4.1 существуют теги, которые позволяют объявлять отдельные столбцы и их группы. Для объявления одного столбца используется тег <col>, а если нам необходимо несколько столбцов объединить в одну группу, лучше использовать тег <coigroup>.
Следует осознавать, что если мы используем эти теги объявления столбцов, то количество столбцов в таблице будет рассчитываться именно на их основе, т. е. нам необходимо каждый столбец описать подобным образом, а не какую-либо их группу. Браузер при отображении таблицы сначала анализирует ее объявление на предмет нахождения тегов, создающих столбцы. Если они есть, то количество столбцов в таблице рассчитывается на их основе. Если таких тегов нет, то количество столбцов рассчитывается исходя из количества ячеек в строках.
При помощи тега <colgroup> мы объявляем группу столбцов. Каждый столбец этой группы мы можем дополнительно явно объявить при помощи тега <col>, но это не обязательно делать, если столбцы имеют одинаковое оформление. Оформление группы столбцов задается при помощи параметров тега<colgroup> . К этому тегу применимы параметры align и vaiign, которые мы рассматривали чуть ранее, с теми же возможными значениями. Помимо этого чаще всего применяется еще два параметра.

Параметр span показывает, какое количество столбцов будет находиться в данной группе. Значением данного параметра является положительное целое число. По умолчанию используется единичное значение, т. е. в группу по умолчанию входит всего один столбец. Параметр width позволяет устанавливать единую ширину для всех столбцов, входящих в данную группу. Мы можем устанавливать точное абсолютное значение в пикселах, процентное соотношение или "кратные размеры", как мы описывали их в одном из предыдущих разделов данной главы. Так, если мы хотим, чтобы каждый столбец устанавливал ширину минимально необходимую, чтобы вместить содержимое ячеек, следует использовать конструкцию width="0*".

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

Только никогда не следует забывать о том, что нам никогда заранее неизвестно, какое разрешение экрана будет у пользователя, загружающего нашу Web-страницу.
Отдельный столбец, входящий в группу, объявляется при помощи тега <col>. Этот тег обладает тем же .набором параметров, что и рассмотренный нами только что тег <colgroup>. Вот только параметр span здесь имеет несколько иное значение. Как мы знаем, некоторые ячейки, могут объединять сразу несколько ячеек из соседних столбцов. А теги <col> могут создавать столбцы, которые на самом деле будут состоять из нескольких столбцов, т. е. одна ячейка такого столбца может состоять из нескольких тегов <td>. Значение параметра span как раз и указывает, сколько именно столбцов будут объединяться в одном. Приведем пример использования данного параметра.
Если нам необходимо создать таблицу с тремя столбцами, стоит в код HTML-документа вставить следующую конструкцию:

<table>
<colgroup> <col>
<col span="2"> </colgroup>
<tr>
<td> .. . ...Определение строк...
</table>

Между тегами <colgroup> и </colgroup> мы вставили два тега <col>. Легко заметить, что это просто объявляющие теги, которые не требуют использования закрывающей пары для себя. В данном фрагменте мы создали таблицу с тремя столбцами. Первый столбец объявлен при помощи первого тега <col>, а вторые два столбца объединены в единую группу при помощи второго тега <col> с параметром span, значение которого установлено в "два".
Мы знаем, как объявлять столбцы. Но после объявления столбцов мы все равно переходим к заполнению таблицы, и там уже без тегов, создающих строки, не обойтись. Из предыдущих примеров мы видели, что строки создаются при помощи пары тегов <tr> и </tr>, между которыми находятся теги, объявляющие отдельные ячейки. Тег <tr>, естественно, обладает целым рядом параметров, которые, тем не менее, нам уже знакомы. Помимо всеобщих параметров идентификации, есть и параметры, регулирующие отображение информации, находящейся в ячейках, входящих в данную строку. Перечислим их.

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

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

Листинг 1.28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<р>Это обычный текст</р> <table border=2 align=left> <caption >3аголовок <thead> <tr>
<th> Столбец K/thxth>CTon6eu 2</thxth>CTon6eu 3</th> </tr> </thead> <tbody>
<tr> ..
<td>l</td> <td>2</td> <td>3</td> </tr> <tr>
<td>4</td> <d>5</td> <td>6</td> </tr>
</tbody>
</table>
</body>
</html>

Рис. 1.28. Окно браузера с результатом отображения файла, приведенного в листинге 1.29

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

Параметр rowspan указывает, на сколько строк по вертикали растянута искомая ячейка. При помощи этого параметра мы имеем возможность объединять соседние ячейки, находящиеся в одном столбце таблицы. Значением данного параметра является целое неотрицательное число. По умолчанию используется единичное значение. Если мы для данного параметра установим нулевое значение, то будут объединены ячейки в столбце, начиная от текущей до самой нижней ячейки. Параметр colspan подобен только что рассмотренному параметру rowspan, но он определяет количество ячеек, объединяемых по горизонтали, в пределах одной строки. Как и прежде, значением по умолчанию является единица, а нулевое значение объединяет ячейки, начиная от текущей и до конца строки таблицы. Параметр no wrap применяется без каких-либо значений. Его присутствие в теге, объявляющем ячейку, означает, что текстовое содержимое данной ячейки необходимо отображать в одной строке, не разбивая на несколько, если длины ячейки для этого недостаточно. В подобных случаях, если единственная строка текстового содержимого по ширине больше, чем сама ячейка, ширина ячейки будет увеличена, чтобы содержимое было отображено полностью. Параметр width предназначен для указания рекомендованной ширины ячейки. Значением Данного параметра является число, обозначающее ширину в пикселах, процентное или кратное соотношение. В том случае, однако, если содержимое ячейки, текстовое или графическое, по своим размерам превышает установленную ширину ячейки, та будет принудительно растянута до необходимого размера. Параметр height предназначен для указания рекомендованной высоты ячейки. Возможные значения и порядок обработки этого параметра браузерами полностью совпадают с только что рассмотренным параметром width. Параметр align задает горизонтальное выравнивание содержимого ячеек. В качестве значения используется одно из предустановленных ключевых слов, список которых мы рассматривали ранее в этом разделе главы. Параметр vaiign предназначен для установки вертикального выравнивания содержимого ячейки. Возможные значения этого параметра мы также рассматривали несколько ранее в этом разделе. Параметр dir позволяет задавать направление отображения текста. Так как некоторые языки предполагают написание слов не слева направо, как привыкли мы, а справа налево,, необходимо иметь возможность явно указывать, куда направлен порядок чтения. Если отображаемый текст должен читаться слева направо, следует использовать значение LTR, установленное по умолчанию. Если текст доложен читаться справа налево, то используется значение RTL.

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

Листинг 1.30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www, w3.org/TR/html4 /strict. dtd">
<html> <head>
</head>
<body>
<table border=2 width="100%"> <caption >3аголовок таблицы</сар^оп> <thead> -о
<th bgcolor=Xime rowspan=2>snbsp;<yth><"th> Столбец K/th><th>CT<Mi6eu 2</th><th>CTCMi6eu 3</th>
</tr>
<tr>
<th соlspаn=2>Объединенная ячейка
3</th>
</thead> <tbody>
V<tr> .
<td width=100>  </td><td>K/td><td>2</td><td>3</td> </tr>
<tr>
<td>  </tdxtd>4</td><td>5</td><td>6</td> </tr>
</tbody>
</table>
</body>
</html>

Рис. 1.29. Окно браузера с результатом отображения файла, приведенного в листинге 1.30

Теперь посмотрим, что у нас получилось (рис. 1.29). Самую первую ячейку мы объединили по вертикали и явно задали для нее цвет фона. Этот цвет распространился и на присоединенную к ней ячейку из второй строки. Для всей таблицы мы задали ширину в процентном соотношении, поэтому все столбцы были растянуты равномерно. Все, за исключением первого, так как . для первой ячейки в третьей строке мы жестко задали ширину в сто пикселов. Поэтому весь столбец у нас отображался с такой шириной. А во второй строке таблицы мы создали ячейку, объединяющую сразу две соседние ячейки в текущей строке. Также на иллюстрации видно, что блок ячеек, созданных при помощи тега <th> немного отделен по вертикали от основного блока таблицы, созданного при помощи ячеек, объявленных тегом <td>. Также мы во всех ячейках, где нет текстового содержимого, вставили символ неразрывного пробела. Сделано это не случайно. Дело в том, что браузер Netscape Navigator ранних версий неадекватно отображает столбцы таблиц, в которых нет содержимого. Поэтому следует взять за правило вставлять неразрывные пробелы в пустые ячейки таблиц.
Вообще, прием установки процентного соотношения ширины таблицы и жесткого задания ширины первого столбца широко применяется в Web-дизайне. Обычно меню навигации по сайту размещается в левой части экрана. Поэтому Web-дизайнер обычно заключает все содержимое страницы в одну большую таблицу с двумя ячейками. Ширина левой ячейки задается жестко в пикселах, а все остальное пространство окна просмотра отдается под отображение основного содержимого страницы. При этом, если это содержимое тоже имеет жесткую структуру, то его тоже можно поместить в таблицу, которая вся будет размещаться в одной ячейке первичной таблицы. Следует лишь аккуратно относиться к созданию вложенных таблиц, так как ранние версии браузера Netscape Navigator при обилии таблиц, вложенных друг в друга, могут просто зависать.

Фреймы

Как мы знаем, в одном окне просмотра браузера мы не можем одновременно загрузить два HTML-документа. Таким образом, если у нас на всех страницах есть одинаковое меню навигации, то абсолютно одинаковый фрагмент кода пользователь будет загружать каждый раз, когда будет переходить с одной Web-страницы сайта на другую. Даже если само меню невелико, это не самый удобный вариант, так как те каналы связи, которые есть у российских пользователей, не слишком велики, и загрузка меню может занять как минимум несколько секунд. Можем ли мы сделать так, чтобы неизменяемые элементы сайта всегда оставались в окне просмотра пользователя без перезагрузки? Можем.
Мы можем создать документ, который разобьет одно окно просмотра на несколько прямоугольных областей, в каждой из которых будет отображаться один HTML-документ. Эти прямоугольные области, каждая из которых является, по сути, отдельным окном просмотра, и называются фреймами.
Таким образом, мы можем оставить левое и/или верхнее меню навигации постоянно находиться » окне просмотра, а перезагружать только ту часть сайта, которая необходима.
Как любое окно просмотра, фреймы могут обладать полосами прокрутки, которые позволяют пользователю увидеть все содержимое фрейма, если оно не умещается полностью в видимой зоне. Именно эта особенность фреймов и вызывает постоянные споры между Web-мастерами. Кто-то утверждает, что подобные элементы управления не должны находиться во внутреннем пространстве основного окна просмотра, так как они занимают бесценное пространство и рассеивают внимание пользователя. Кто-то утверждает, что эти недостатки— не слишком большая цена за облегчение перезагрузки Web-страниц в условиях медленных каналов связи. Так или иначе, вопрос о возможности применения фреймов каждый должен решать самостоятельно.
В HTML предусмотрено два вида фреймов: обычные, и, так называемые, "плавающие". Если мы применяем обычные фреймы, то создается документ, который все окно просмотра разбивает на фреймы, и в них уже отображаются те или иные HTML-документы. Если же мы используем плавающий фрейм, то его можно включать в обычный HTML-документ без каких-либо особых ухищрений. Разницу между двумя этими типами фреймов мы увидим на примере.
Документ с фреймовой структурой создается при помощи тега <frameset> и его закрывающего близнеца </frameset>. Внутри этих двух тегов размещаются конструкции объявления отдельных фреймов и информация, отображаемая в окне просмотра браузера, если тот не распознает фреймы. Отдельные фреймы создаются при помощи пары тегов <frame> и </frame>. А информация, отображаемая, когда браузер не поддерживает фреймы, закладывается в HTML-документ при помощи тега <nof rames>. Но все по порядку.
Основой тега <frameset> является разбиение окна просмотра на несколько частей. Для этого у тега есть два основных параметра: rows и cols, которые указывают количество и размеры фреймов по вертикали и горизонтали. При этом задается прямоугольная табличная структура. Если нам необходимо сделать более детальное разбиение, например, один фрейм в левой части окна по вертикали и два фрейма, отделенных друг от друга горизонтальной границей в правой части окна, то можно создать два тега <frameset>, один внутри другого. Но все-таки, рассмотрим параметры тега <frameset> более детально.

Параметр cols предназначен для указания количества и размеров фреймов по горизонтали в окне просмотра. В качестве значения параметра используется список размеров фреймов, разделенных запятыми. Как обычно, для указания размера мы можем использовать абсолютные и кратные величины, а также процентные соотношения. По умолчанию используется значение100%, т. е. основное окно просмотра по вертикали не разбивается. Параметр rows позволяет указывать количество и размеры фреймов по вертикали в окне просмотра, Специфика задания значений ложностью совпадает с параметром cols.

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

Листинг 1.31

<!DOCTYPE HTML PUBLIC "-//W3C/VDTD HTML 4.01//EN" ''http://www.w3.org/TR/html4/strict.dtd">
<fhtml>
<head> .
<title>0peuMbi</title>
</head>
<frameset cols="150,*">
<frame src="l-27.htm">
<frame src="l-30.htm"> ;
<nofr?mes>
<p>K сожалению, ваш браузер не поддерживает фреймы. Воспользуйтесь более свежей версией ПО</р>
</noframes>
</frameset>
</html>

Рассмотрим внимательно приведенный код HTML-документа и то, как был отображен браузером этот документ. Прежде всего, следует обратить внимание, что в листинге отсутствуют теги <body> и </body>. Эти теги говорят о том, что все находящееся между ними является отображаемым кодом, а тег <frameset> сигнализирует браузеру что в данном документе приведена лишь структура разбивка окна просмотра.
В теге <franieset> мы использовали единственный параметр cols. Значением его был список из двух обозначений размеров. Из листинга видно, что первый, т. е. левый фрейм обладает шириной в сто пятьдесят пикселов. Для второго фрейма мы установили ширину в виде кратной величины. То, так как мы не указали, какому именно числу будет кратна эта ширина, фрейм занял все свободное место, чего мы и добивались.

Рис. 1.30. Окно браузера с результатом отображения файла, приведенного в листинге 1.31

Между стартовым и закрывающим тегами<frameset> мы разместили два тега <frame>. Обстоятельнытй и подробный разговор о них еще впереди, а пока же ограничимся замечанием, что эти теги объявляют каждый фрейм по отдельности и задают их свойства. В нашем случае мы использовали лишь один обязательный параметр зге, значением которого является URL того HTML-документа, который и будет отображаться в данном фрейме.
Также мы использовали тег <noframes>. Между ним и его закрывающей парой </noframes> располагается HTML-код сообщения, которое будет отображаться в окне просмотра браузера, если тот не поддерживает фреймовую технологию. Сейчас конечно, встретить подобный браузер чрезвычайно трудно, тег остался в спецификации HTML с давних времен текстовых браузеров, но использовать его все-таки стоит хотя бы из соображений вежливости к пользователям.
На иллюстрации (рис. 1.30) видно, что окно просмотра действительно было разбито на две части, и в каждой из них отображался один из созданных нами ранее HTML-файлов. При этом пользователь может самостоятельно изменять размеры фреймов, так как граница между ними, называемая также сплиттером, подвижна. Пользователю достаточно навести на нее курсор мыши, нажать основную кнопку мыши и, не отпуская ее перенести границу в необходимое место.
Единственным ограничением на размещение фреймов служит четко выраженная табличная структура набора фреймов. А что делать, если нам захочется, чтобы меню в девой части окна просмотра было само разбито на два фрейма? Классический подход не позволяет сделать это. Поэтому можно использовать вложенные структуры.
Для того, чтобы создать разбивку основного окна просмотра на три фрейма, два из которых расположены в одной колонке, друг под другом, а третий занимает все остальное свободное пространство, следует использовать следующий фрагмент кода:

В этом примере видно, как один блок <frameset> мы встраиваем внутрь другого такого же блока. И естественно, следует использовать теги <frame>. Кстати, их мы еще не рассмотрели подробно. Самое время это сделать.
Тег <frame> предназначен для установки свойств отдельного фрейма. Так как ширина и высота фрейма устанавливаются в конструкции <frameset>, нам остается установить остальные свойства.

Параметр name позволяет устанавливать уникальное имя фрейма. Не следует путать его с параметром id. Имя, которое мы задаем при помощи параметра name, используется в тегах гиперссылок, когда необходимо загрузить документ не в родительский фрейм, а в какой-либо другой. Параметр src, как мы уже видели из предыдущего листинга, применяется для задания URL того HTML-документа, который должен быть отображен в искомом фрейме. Параметр frameborder применяется для того, чтобы указать, будет ли отображаться граница данного фрейма или нет. Дело в том, что создавать видимую границу далеко не обязательно. В качестве значения данного параметра используется либо нуль, либо единица. Единичное значение, установленное по умолчанию, обозначает, что данный фрейм будет иметь видимую границу. При использовании нулевого значения, граница фрейма будет невидимой. Параметр marginwidth позволяет задавать ширину полей данного фрейма в пикселах, Параметр marginheght предназначен для установки размеров полей по вертикали в пикселах для данного фрейма. Параметр noresize следует применять, если пользователь не должен иметь возможности передвигать границы фрейма, изменяя его размеры подобным образом. Если мы включаем его в состав тега <frame>, то пользователь не сможет изменять размеры данного фрейма. Параметр используется без Значений. Параметр scrolling позволяет читателю Web-страницы управлять отображением полос прокрутки для данного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение auto, установленное по умолчанию, обозначает, что полосы прокрутки у фрейма будут появляться только в том случае, если содержимое данного фрейма не будет полностью укладываться в отображаемой области. Значение yes указывает браузеру, что для данного фрейма необходимо постоянно отображать полосы прокрутки, вне зависимости от того, насколько велика его отображаемая область, и как ровно в нее "укладывается" содержимое фрейма. Значение по заставляет браузер отображать фрейм вообще без полос прокрутки. Несмотря на то, что полосы прокрутки являются самым раздражающим пользователя компонентом, не следует пользоваться подобным значением без особых на то причин. Еще раз повторюсь, что нам заранее неизвестно, какое разрешение монитора установлено у пользователя, загрузившего нашу страницу, и каков размер окна просмотра браузера. А если там не окажется достаточно места для отображения содержимого фрейма полностью, и будут отсутствовать полосы прокрутки, пользователь вообще не сможет увидеть скрытую информацию.

Теперь, когда мы рассмотрели параметры тега <frame>, следует сделать маленькое дополнение, объясняющее одно незначительное ограничение параметра src, тесно связанное с дополнительным тегом <noframes>. Дело в том, что между этим тегом и его завершающим двойником </nof rames> мы размещаем некое содержимое, которое будет отображено в том случае, если браузер пользователя не поддерживает отображение фреймов. Это содержимое, естественно, тоже может быть структурировано при помощи тегов HTML. Следовательно, там могут быть использованы гиперссылки и закладки, называемые также "якорями". Так вот, если мы в этом фрагменте создадим такую закладку, то мы не можем для какого-либо из фреймов значением параметра src сделать URL данной закладки.
Также мы можем указать фрейм, в который загрузка HTML-документа будет происходить по умолчанию. Как мы знаем, тег гиперссылки <а> обладает параметром target, в качестве значения которого записывается имя фрейма, где и будет отображаться содержимое HTML-документа, на который указывает гиперссылка. Но если мы используем данный параметр в теге <base>, размещаемом, как мы помним, в заголовке HTML-документа, то все гиперссылки с неполным URL в параметре href, будут помещать документы, на которые они указывают, именно в тот фрейм, наименование которого обозначено в теге <base>.
До сих пор мы не рассматривали отдельно тег <noframes>. Но дело в том, что данный тег не обладает какими-либо уникальными параметрами, кроме общераспространенных, а механизм его применения мы могли видеть в предыдущих примерах. Поэтому мы и не будем на нем долго задерживаться.
До сих пор мы рассматривали обычные фреймы, которые полностью разбивают окно просмотра браузера на отдельные области, и для использования которых необходимо Применять документы со специализированной структурой. Но есть и другой вид фреймов, которые можно просто вставлять в обычный HTML-документ как стандартный объект. Больше всего это похоже на вставку графического изображения. Для вставки подобного встроенного фрейма используется тег <iframe> Но в отличие от процедуры вставки графики и иных объектов, для встроенных фреймов необходимо использовать и закрывающий тег </iframe> Приведем пример включения встроенного фрейма в обычный HTML-документ и посмотрим, как выглядит этот документ, при просмотре его в браузере.

Листинг 1.32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><t>peftMbi</title>
</head>
<body>
<р>Текст со встроенным <iframe src="l-25.htm"> </iframe> фреймом</р>
</body>
</html>

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

Параметр name позволяет задавать имя данного встроенного фрейма. Значением параметра является обычная текстовая строка. После этого на данный фрейм можно указывать в гиперссылках. Таким образом, мы получаем возможность динамического изменения содержимого встроенного фрейма. Параметр src предназначен для установки содержимого встроенного фрейма. Значением параметра является URL того HTML-документа, который будет загружен в этот встроенный фрейм. Параметр frameborder, наравне со многими другими параметрами, явно унаследован из обычных фреймов. Точно так же, как и там, он указывает браузеру, следует ли нет отображать границу у фрейма. В качестве значений используются нуль и единица. Единичное значение, установленное по умолчанию, обозначает, ига границу встроенного фрейма необходимо отображать. Нулевое значение делает границу невидимой. Параметры marginwidh и marginheight задают ширину и высоту полей встроенного фрейма, соответственно. Значением параметров являются числа, выражающие размеры в пикселах.

Рис. 1.31. Окно браузера с результатом отображения файла, приведенного в листинге 1.32

Параметр scrolling регулирует отображение полос прокрутки встроенного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение auto, установленное по умолчанию, означает, что полосы прокрутки будут появляться только в том случае, когда содержимое фрейма будет больше по размерам, чем сам фрейм. Значение yes принудительно отображает полосы прокрутки в любом случае, а значение по запрещает браузеру отображать эти полосы прокрутки для данного фрейма вообще. Параметр align позволяет нам устанавливать выравнивание встроенного фрейма по вертикали или горизонтали относительно остального содержимого Web-страницы. Возможные значения точно такие же, как у одноименного параметра тега <img>, поэтому не стоит их еще раз повторять. И результат действия этих значений тоже был нами рассмотрен ранее. Параметр height предназначен для явной установки размеров встроенного фрейма по вертикали. В качества значения данного параметра может использоваться любое обозначение размера. Параметр width позволяет задавать ширину встраиваемого фрейма. Значение может задаваться в пикселах, кратных величинах или процентных соотношениях.

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

Встраиваемые объекты

Для того, чтобы добавить создаваемым Web-страницам дополнительные возможности, мы можем вставлять в состав их содержимого специализированные функциональные элементы. В качестве подобных элементов часто выступают Java-апплеты, элементы ActiveX, Flash-ролики и многое другое. Как их обрабатывает браузер, нас заботить не должно. Он все равно сделает это правильно. Нас интересует, как их внедрять в Web-страницы.
До тех пор, пока ,мы не научились сами создавать функциональные объекты, пользуясь какой-либо достаточно серьезной технологией, часто требующей хороших навыков программиста, мы можем использовать подобные компоненты от сторонних производителей. Благо подобные компоненты в изобилии выложены в Сети. Главное, их найти и правильно внедрить в Web-страницу.
Для вставки некоего функционального объекта, следует воспользоваться тегом <object>. Для него существует и закрывающая пара </object>. Между этими двумя тегами обычно размещается список дополнительных данных, которые передаются объекту в Качестве параметров, и некий текст, который будет отображаться, если браузер все-таки не сможет правильно обработать внедренный объект. Здесь необходимо различать свойства объекта, которые мы задаем при помощи параметров тега, и дополнительные данные, которые передаются как параметры самого объекта при помощи специализированных тегов.
Так, например, если мы хотим вставить в свою Web-страницу некий элемент ActiveX, демонстрирующий изменение некоторой зависимости на графике, то нам потребуется, помимо внедрения самого объекта, установить еще и начальные данные. Для этого придется воспользоваться приблизительно следующей конструкцией:

В данном примере мы при объявлении внедренного объекта использовали в объявляющем теге несколько параметров. Параметр classid применяется для установки идентификатора внедряемого элемента, а параметр codebase задает URL файла, в котором и содержится внедряемый объект. Обычно для распространяемых объектов подобные параметры детально описываются в сопроводительном тексте. Чуть позже мы подробно рассмотрим все параметры этого тега. После тега <object> мы разместили тег <param>, при помощи которого задали начальные данные для внедренного объекта. Проще всего рассматривать подобные передаваемые параметры как переменные. На каждую передаваемую переменную требуется один тег <рагаm>. Но теперь, все-таки, перейдем к рассмотрению многочисленных параметров тега <оbject>.

Параметр classid, как мы уже знаем, применяется для установки уникального идентификатора внедряемого элемента. Часто его просто необходимо использовать, так как внедряемый элемент сохраняется в локальной системе пользователя, как, например, элементы ActiveX. Параметр codebase предназначен для указания URL, который указывает на некий файл или каталог, в котором располагаются все необходимые для функционирования внедряемого элемента файлы. Параметр data предназначен для задания местоположения графических изображений или иных блоков данных, которые используются встраиваемым объектом для своей деятельности. В качестве значения параметра используется URL, указывающий на файл с требуемым блоком данных. Параметр type задает тип данных, на которые указывает предыдущий параметр. В качестве значения данного параметра используется одно из стандартных наименований типов данных, определенных в протоколе HTTP. Параметр codetype позволяет указывать тип подключаемого объекта. Рекомендуется использовать данный параметр в тех случаях, когда информации, находящейся в параметре ciassid недостаточно для того, чтобы четко указать тип внедряемого элемента. Параметр archive позволяет указывать местоположение архивных данных, которые имеют отношение к внедренному объекту, например, его обновлению. В некоторых случаях это позволяет сократить общее время загрузки новой версии внедряемого объекта. В качестве значения данного параметра используется список URL, разделенный пробелами. Параметр declare не имеет значений. Если он входит в состав тега <object>, то внедряемый объект просто объявляется, но не вставляется в Web-страницу. Обычно параметр применяется, если у нас есть несколько тегов <object>, вставленных друг в друга. Параметр standby позволяет задавать текст, который будет отображаться на месте объекта, пока он сам загружается из Сети. В качестве значения параметра используется обычная текстовая строка. Параметр height предназначен для явного указания высоты объекта. В качестве значения параметра используется количество пикселов, абсолютное или кратное, или процентное соотношение. Параметр width позволяет явно задавать ширину внедряемого объекта. В качестве значения используется один из стандартных вариантов задания размеров. Параметр usemap используется, если внедряемый объект является графическим изображением, которое предназначено для использования в качестве сегментированной карты. Вопросы использования сегментированной графики мы рассматривали в разделе, посвященном гиперссылкам. В качестве значения параметра используется имя карты ссылок, заданное в параметре паще тега <тар>, объявляющего подключаемую карту сегментов. Параметр name позволяет задавать уникальное идентифицирующее' имя данного конкретного внедряемого объекта. Параметр tabindex Позволяет задавать порядковый номер объекта в последовательности органов управления, размещенных на Web-странице, переход между которыми производится при помощи клавиши табуляции. Параметр hspace задает размеры свободного пространства по горизонтали между встроенным объектом и остальным содержимым Web-страницы. В качестве значения, используется число, обозначающее количество пикселов в отступе. Параметр vspace позволяет задавать отступы про вертикали. В качестве значения используется все то же количество пикселов. Параметр border задает толщину границы, обрамляющей внедренный объект. В качестве значения используется количество пикселов. Параметр align позволяет задавать вертикальное или горизонтальное выравнивание объекта относительно остального содержимого Web-страницы. В качестве значения используется одно из уже знакомых нам ключевых слов: bottom, middle, top, left, right. Механизм их действия подробно описывался в разделе, посвященном использованию графики.

Если встраиваемому объекту необходимо передавать начальные данные для работы, то для этих целей применяется тег <param>, который мы уже упоминали ранее. Он помещается между тегами <object> и </object>. Если мы передаем данные объекту, то тот принимает их как переменные. Следовательно, нам необходимо задать имяэтой переменной, чтобы объект мог правильно ее распознать, и значение переменной. Это минимальные требования. На самом деле, мы можем сделать больше. Все эти действия производятся при помощи параметров <param>. Всего этих параметров — пять. Помимо общего идентифицирующего параметра id, есть и четыре специфичных.

Параметр name является обязательным для тега <param>. При помощи значения этого параметра мы устанавливаем имя передаваемой переменной. Значением параметра является текст. Так как существуют самые различные методы создания встраиваемых объектов, то может получиться так, что это наименование переменной будет чувствительно к регистру символов. Поэтому стоит придерживаться того наливания, которое приводится ;в описании объекта. Параметр value предназначен для установки значения передаваемой переменной. Значением данного параметра является текст. Встраиваемый объект сам берет на себя его распознавание. Параметр vaiuetype позволяет задавать тип передаваемого значения. Это могут быть данйые в каком-либо стандартизованном формате, ссылка на некий ресурс в Сети Или другой объект. Кроме того, некоторые встраиваемые объекты в качестве переменных могут принимать другие объекты, причем, их тип может и не совпадать. В качестве значения параметра может использоваться одно из трех ключевых слов. Значение data, установленное по умолчанию, указывает, что используется стандартная переменная, передающая данные какого-либо типа. Как и упоминалось, мы передаем данные как строку, а объект сам интерпретирует их. Значение ref указывает, что в качестве переменной передается ссылка на какой-либо ресурс в Сети: А значение object сигнализирует, что мы передаем в качестве стартовых данных другой объект. Параметр type используется в тех случаях, когда параметр vaiuetype имеет значение ref, т.е. когда в качестве переменной мы передаем ссылку на некий ресурс в Сети. Данный параметр указывает, какой тип имеет ресурс, на который мы ссылаемся.

И на этом перечень используемых параметров тега <param> заканчивается. Еще раз напомню, что когда мы берем из Сети некий встраиваемый объект, к нему всегда прилагается сопроводительный текст, в котором рассказывается, как подключать данный объект, и какие стартовые данные ему нужны для работы. Внимательно читайте инструкцию, это может серьезно сэкономить вам время.
Среди встраиваемых объектов HTML выделяет в особую группу Java-апплеты. Для того, чтобы внедрить их в состав содержимого Web-страниц, предусмотрен специализированный тег <appiet>. Но прежде, чем мы разберем его использование, стоит все-таки узнать, что такое Java-апплеты.
Язык Java изначально задумывался для создания приложений, которые бы выполнялись на любой компьютерной платформе без изменения кода, т. е. с использованием Java не нужно писать отдельные версии программного обеспечения для компьютеров на базе Intel-процессоров и компьютеров семейства Macintosh, или для различных операционных систем.
Подобная "многоликость" достигается за счет очень остроумного решения. Java-приложения записываются не в кодах какого-либо процессора, как обычные исполняемые программы, а в своем специализированном формате, называемом байт-кодом. Этот байт-код распознается не процессором, а другим приложением, которое называется виртуальной Java-машиной, Вот эта виртуальная Java-машина пишется для каждой компьютерной системы отдельно. Она переводит байт-код в команды процессора. Эти виртуальные Java-машины написаны уже почти для каждой операционной системы, поэтому Java-приложения медленно, но верно завоевывают популярность.
Естественно, возможность выполнения кода на любой компьютерной системе — это именно то, чего не хватает WWW. Ведь если документы читают браузеры, то активные элементы должны обрабатываться непосредственно операционной системой; и если сделать ставку на какое-либо решение, которое действует только в одной системе, то тем самым мы отсекаем от своего ресурса пользователей остальных компьютерных платформ и операционных систем.
Поэтому был разработан дополнительный стандарт облегченных Java-приложений, которые могли бы внедряться в Web-страницы. Подобные облегченные Java-приложения называются Java-апплетами. Вставляются в содержимое Web-страниц они при помощи тега<appiet>. Но специфика использования его ничем не отличаются от правил использования тега <object>. И наборы параметров этих двух тегов практически не различаются. В теге <applet> могут применяться параметры codebase, code, name, archive, width, height, alt, align, hspace, vspace. Естественно, функциональность этих параметров не отличается от функциональности их близнецов, используемых в теге <object>. Между тегами <applet> и</applet> могут размещаться теги <param>, задающие стартовые данные для Java-апплета.
Следует обратить внимание на то, что в списке параметров отсутствует параметр ciassid. Дело в том, что тег; <applet> применяется для объектов строго фиксированного типа, для апплетов, А они унаследовали пакетную структуру из своего прародителя — языка Java. Java-апплеты, если говорить более точно, представляют собой не просто какие-то файлы, а, так называемые, классы, хранимые в Java-пакетах. Поэтому для идентификации используется просто наименование класса, которое записывается в параметре name.
И на этом мы заканчиваем рассмотрение внедряемых исполняемых объектов. Еще раз повторюсь: до тех пор, пока вы не умеете создавать их самостоятельно, а для этого необходимо уметь программировать немного лучше начального уровня, следует использовать общедоступные внедряемые элементы. Однако при их использовании все-таки следует соблюдать опреде-пенную осторожность, так как исполняемые объекты от неизвестных производителей потенциально могут быть опасны для пользователей. Следует пользоваться элементами, которые уже прошли проверку временем и интернет-сообществом.

Формы

Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось шести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.
Итак, пользователь загрузил себе Web-страницу, на которой располагаются эрганы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе, Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при юмощи самых различных технологий программирования. Объединяет их шшь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway nterface). Поэтому обрабатывающие программы часто называют CGI-триложениями или CGI-скриптами.
Итак, приложение получает данные и обрабатывает их. Затем оно может гибо послать некое электронное письмо, либо произвести некоторую операцию в базе данных, или передать пользователю новую Web-страницу, возможные действия ограничиваются лишь свойствами технологии и фантазией программиста. При помощи подобных программ действуют всевозможные системы регистрации, обратной связи, гостевые книга, форумы, чаты. С их помощью создаются и более разветвленные и сложные системы, например, online-магазины.
Идя того чтобы создавать подобные приложения все-таки необходимо уметь программировать и знать соответствующие правила создания CGI-прилржений. До, тех пор, пока мы этого не умеем, нам остается пользоваться опять-таки общедоступными CGI-скриптами. Но если мы и получим эти приложения, то форму для ввода данных пользователем необходимо все равно делать самостоятельно. В данном разделе мы научимся это делать.
Форма ограничивается тегами<form> и </form>. Между этими тегами располагаются теги, создающие органы ввода информации и теги создания обычного содержимого Web-страницы, т. е. сами органы ввода могут раз щаться в таблице, которая в свою очередь полностью размещается в фор Тег <form> не создает какой-либо отображаемой структуры. Он, скорее предназначен для внутренней группировки объектов.
Тег <form>, естественно, обладает целым рядом параметров, которые задг свойства создаваемой формы. Рассмотрим эти параметры.

Параметр action является обязательным. Значением его является URL указывающий на расположение того CGI-приложения, которое и бу, обрабатывать данные, введенные пользователем при помощи орш управления данной формы. Параметр method предназначен для указания способа, которым данные будут передаваться обрабатывающему приложению. В качестве значен параметра используется одно из двух предустановленных ключевых cлов: get или post. Сейчас нам нет нужды узнавать, какие механизмы pear зуются при помощи того или иного метода. Так или иначе, в сопровод: тельной документации CGI-приложения указывается, какой метод neрдачи данных следует использовать. По умолчанию используется значек get. Параметр enctype используется для указания типа передаваемых да ных из формы. Обычно нет нужды его использовать, так как значение application/x-www-form-urlencoded, используемое по умолчани идеально подходит для подавляющего большинства CGI-приложений. Параметр accept-charset используется в тех случаях, когда пользователь передает из формы приложению не только информацию, но и файлы. В этом случае мы можем явно указать кодировки передаваемых фа лов. В качестве значения данного параметра используется текстов строка, в которой записывается одно или несколько названий кодировс В том случае, если применяется несколько кодировок, их наименование разделяются пробелами идя запятыми. По умолчанию используется значение unknown, которое указывает серверу, что тот должен сам разобраться с используемыми кодировками Параметр accept задает типы передаваемых файлов. Обычно не испол зуется, так как сервер вполне в состояний сам адекватно распознать тип принимаемого файла. Параметр name позволяет задавать уникальное имя формы. Естественно на одной Web-странице мозкет находиться несколько форм. В этом ел; чае значения параметров name у них не должны совпадать.

Тег <form> с его закрывающим близнецом </form>, по сути, создают контейнер для размещения органов ввода информации. Большая часть эт органов ввода реализуется при помощи тега <input>. Продемонстрируем эт на небольшом примере (рис. 1.32).

Листинг 1.33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title><?>opMbi</title> </head> <body>
<form action="http;7/,www.iaysite.com/cgi-bin/tesl-.exe" method="post">
<р>Поле для ввода строки текста < input type="text"x/p>
<input type="submit" value="OTnpaBMTb"> </form>
</body>
</html>

Рис. 1.32. Окно браузера с результатом отображения файла, приведенного в листинге 1.33

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

Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже. Параметр name предназначен для установки уникальных имен для ка дого органа управления. Несмотря на то, что параметр не является обя: тельным, настоятельно рекомендуется использовать его. В сопровод тельной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации. Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользоват лю, но именно это значение получить обрабатывающее CGI-приложени если пользователь выберет соответствующий переключатель. Параметр cheked используется только для независимых переключателе и радиокнопок. Он устанавливает их начальное состояние. Если этот ni раметр будет введен в тег <input>, то переключатель будет переведен во включенное состояние. Параметр используется без значений. Параметр disabled делает орган управления недоступным для использс вания пользователем. Параметр используется без значений. Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отобра жаемые в этих полях, нельзя будет изменять. Параметр size обычно задает размеры органа ввода данных. Но для каж дого отдельного типа органов ввода его действие специфично. Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстовоп ввода. Значением параметра является целое положительное число. Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок. Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода. Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции. Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.

Итак, мы рассмотрели параметры, применяемые в теге <input>. Но мы уже аем, что при помощи данного тега мы можем создавать самые различные объекты форм. Пришло время детально разобраться с ними.
Объекты, входящие в форму, разделяются на два типа — органы ввода данах и кнопки, инициирующие различные действия. Сначала посмотрим, как мы можем создавать органы ввода.
Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи паметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые эльзователь может внести в это поле. Это ограничение реализуется при помощи параметра maxlength.
Существует модификация однострочного поля ввода текста, которая предназначена именно для ввода секретной информации, например, паролей. Они в отображают вводимый текст, а заменяют его звездочками. Создание подобных полей ввода производится при помощи следующей конструкции:

Использование типа checkbox позволяет создавать независимые переключатели. Они представляют собой всем знакомые квадратики, в которых щелчком мыши мы можем устанавливать и снимать флажки в виде галочек. При том используется параметр value. Значение этого параметра будет передана в обрабатывающее CGI-прияожение, если пользователь взведет флажок данном независимом переключателе.
'акже мы можем создавать группы переключателей, которые часто называет зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создаtтся при помощи тега <lnput> с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.
Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.

Листинг 1.34

:! DOCTYPE HTML РИВЫС "-//W3C//DTD HTML 4 . 01//EN"
'http://www.w3.Qrg/TR/html4/strict.dtd">
:html> <head> , <title><t>opMbK/title> </head>
<form action="http://www.mysite.com/.cgi-bin/test.exe" method="post"> .
<р>Поле для ввода строки текста <input type="text"x/p> <р>Поле для ввода пароля <input type="password"x/p> <р>Независимый переключатель <input type»"checkbox"
value="checked"x/p> <р>Группа переключателей</р>
<р>Аньтернатива 1 <input type="radio" name="groupl" value="checkl"x'/p>
<р>Альтернатива 2 ,<input type»"^adio" name="groupl" value="checki
checkedx/p>
<р>Альтернатива 3 <input type="radio" name="groupl"
value="check3"x/p> '
<input type="submit" value="Отправить"> </form> ' ...
</body> </html>

На приведенной иллюстрации (рис. 1.33) видно, как отображается введен ный текст в обычном поле ввода и в поле ввода конфиденциальной инфор мации. А в листинге 1.34 четко показано, как мы можем создавать незави симые переключатели и группы переключателей. При этом, второму по сче ту переключателю в группе мы изначально установили взведенное состояни по умолчанию. Но пользователь, естественно, всегда может сам выбрат требуемую альтернативу.
При помощи параметра type с приписанным значением hidden мы може« создавать скрытые поля. Это поле не только не позволяет пользователю вво дать какую-либо информацию, но и вообще не отображается в окне про смотра. Данный тип поля применяется обычно для служебных целей разработчиков.
А при помощи значения file мы можем создавать поле ввода имени файла При этом, рядом с полем ввода текста автоматически создается кнопкг с наименованием Обзор, при нажатии на которую открывается стандартный диалог выбора файла.
Помимо органов ввода информации, мы можем размещать еще и органы управления. В данном случае Ими являются кнопки. В формах используется три вида кнопок. Кнопка типа "submit" отправляет введенные пользователем данные обрабатывающему CGI-приложению. Кнопка "reset" убирает из органов ввода информацию, внесенную пользователем, и отображает информацию, установленную по умолчанию. Существуют и простые кнопки, реакцию которых мы можем программировать самостоятельно при помощи скриптовых языков. Также, вместо кнопки "submit" мы можем использовать любое графическое изображение. Рассмотрим способы создания этих органов управления.

Рис. 1.33. Окно браузера с результатом отображения файла, приведенного в листинге. 1.34

Кнопка типа "submit" создается при помощи конструкции следующего вида:

Как видно, создание кнопки производится при помощи параметра type, a надпись на ней задается значением параметра value.
Если же нам необходимо создать кнопку очистки полей ввода информации, мы можем применить следующий фрагмент кода:

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

Мы уже говорили, что вместо обычной кнопки типа "submit" мы можем использовать любое графическое изображение. Для этого мы применяем такой фрагмент кода:

В этом случае нет нужды использовать параметр

value

так как не нужно задавать надпись на кнопке. Но тогда необходимо использовать параметр

src

значением которого является URL используемого графического файла.
Но помимо тех органов ввода информации, которые мы уже рассмотрели, есть и дополнительные органы, которые не реализуются при помощи тега <input>. К ним относится раскрывающегося списка и многострочное поле текстового ввода.
Выпадающий список реализуется при помощи тега <select>. При этом, естественно, используется и его закрывающая пара</select>. Между этими тегами мы объявляем элементы списка при помощи тегов <option>. Тег <select>, естественно, обладает некоторыми свойствами, регулируемыми при помощи параметров.

Параметр name, как обычно, задает уникальное имя данного поля ввода, т. е. раскрывающегося списка. Параметр size задает количество видимых строк при раскрытии списка. Естественно, самих элементов в списке может быть больше, чем отображаемых строк. Но в этом случае всего-навсего будет отображаться вертикальная полоса прокрутки. Значением параметра является целое положительное число. Параметр multiple применяется, если мы хотим позволить пользователю выбирать из списка несколько значений сразу. Параметр disable заставляет браузер отображать данный выпадающий список, но при этом пользователь не получит возможность активизировать его и выбрать какое-либо значение. Параметр tabindex, как мы уже знаем, устанавливает порядковый номер элемента ввода данных в последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.

A сами элементы выпадающего списка создаются при помощи тегов <option>. Эти теги тоже имеют свои свойства. Но их не так уж и много.

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

Теперь рассмотрим несложную процедуру создания выпадающих списков в формах HTML-документов (рис. 1.34).

Листинг 1.35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http: //www. w3.org/TR/htm!4/Strict.dtd">
<html>
<head>
<title><t>opMfci</title>
<body>
<form action="http: //www.mysite.com/cgi-bin/test.exe
<select name=""menul"> <option value=*"sell">l nyHKT</option> <option value="se!2" select«d>2 nyHKT</option>
coptibn value«="sel3">3 nyHKT</option> </select>
<input type="submit" уа1ие»"Отправить"> </form> -
</body> 'html> /

Рис. 1.34. Окно браузера с результатом отображения файла, приведенного в листинге 1.35

Там осталось рассмотреть только один элемент ввода данных. Это многострочное поле текстового ввода. Оно реализуется при помощи тега textareax Этот тег создает область ввода, которая может быть достаточно бширной, и применяется обычно для ввода средних и больших объемов екстовой информации. Тег не может обойтись без параметров. И мы обязательно их рассмотрим.

Параметр name позволяет задавать уникальное имя для данного элемента ввода данных, Параметр rows задает количество отображаемых строк у создаваемого поля ввода. По сути дела, это его высота, но задается она в строках. Параметр является обязательным. В качестве значения используется целое положительное число. Параметр cols задает ширину в символах создаваемого поля текстовог ввода. Параметр также является обязательным. Параметр disabled используется, если поле необходимо сделать недоступным для использования. Параметр readonly применяется для создания полей с нередактируемьм текстом. Текст в таких полях ввода может только отображаться, но пользователь не сможет изменить его. Параметр tabindex устанавливает порядковый номер элемента ввода данных а последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции. Параметр accesskey позволяет задавать клавишу, при нажатии на которую фокус ввода будет автоматически передан данному полю ввода.

Теперь посмотрим, как создаются подобные поля ввода (рис. 1.35).

Листинг 1.36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.Q1//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>OopMbi</title> </head>. - .
<body>
<form action=»"http://www.mysite.com/cgi-bin/test.exe" method="post">
<textarea rows»5 cols»2?}>
Текст, который будет отображаться в многострочном поле, ввода </,textarea>
<p><input type="submit" уа1ие="0тправить"х/р>
</form> </body>
</html>

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

Рис. 1 .35. Окно браузера с результатом отображения файла, приведенного в листинге 1 .36

Для создания подобных текстовых пометок и заголовков, связанных с конкретными элементами ввода данных, мы можем использовать тег <label> Но привязывать подобные метки мы сможем только к тем органам ввода данных, для которых мы явно задали идентифицирующий фаметр id. Именно по нему и устанавливается соответствие между меткой и объектом формы. Основным параметром для тега <label> служит параметр for, значением которого является значение параметра id объекта, к которому данная текстовая метка и привязывается. Приведем Пример создания подобной связи. Сначала мы создадим независимый переключатель, а затем присоединим к нему связанный текстовый заголовок. Производится подобная операция при помощи следующего фрагмента кода:

<label for="сheck1">Независимый переключатель</label>
Input type="checkbox" name="check" value="checked" id="checkl">

Впрочем, можно обойтись и без параметра for, если тег, объявляющий связанный орган ввода данных, разместить между тегами <label>
И на этом мы можем закончить рассмотрение процедуры создания форм для ввода данных в статических HTML-документах.

Использование сценариев

В рамках HTML мы обладаем возможностью использовать при создании Web-страниц специальный вид программ, называемых сценариями или скриптами. Они очень тесно связаны с технологией динамического HTML (DHTML), которую мы будем рассматривать в третьей главе. Но сейчас мы лишь разберем возможности их подключения к HTML-документу.
Для создания подобных программ-сценариев могут использоваться два языка програмирования: JavaScript и VBScript. Эти программы просто встраиваются в Web-страницу, а браузер пользователя получает их и самостоятельно выполняет. В связи с тем, что VBScript недостаточно хорошо поддерживается всеми браузерами, чаще всего используется язык JavaScript.
Итак, мы создали или нашли на просторах Сети программу-сценарий, которую нам хотелось бы использовать на своей Web-странице для придания ей некоей динамичности и интерактивности. Теперь ее необходимо подключить к нашей странице. Для этих целей используется тег <script> со своим закрывающим близнецом </script>. Между этими тегами обычно размещается текст программы-сценария. Впрочем, иногда просто указывается UR.L файла с этим текстом,, и тогда браузер сам отыщет его, руководствуясь указанным URL. Однако, так как поиск он будет производить тогда, когда потребуется запустить скрипт, то между действиями пользователя и реакцией программы будет возникать определенная задержка. Поэтому, чаще всего текст программы присоединяют к HTML-документу.
Тег <script> с его содержимым чаще всего размещается в заголовке Web-страницы, между тегами <head> и </head>. Связано это с тем, что подключаемый скрипт должен быть описан до момента его первого использования, т. е. мы можем описать его в теле документа, после тега <body>, но при этом мы должны быть уверены, что все элементы Web-страницы, использующие или активизирующие этот скрипт, будут описаны после него. Чтобы исключить возможные ошибки и коллизии, обычно скрипты описывают в заголовках. Это просто проявление правильного стиля создания документов, которого всегда следует придерживаться.
Итак, тег <script>, как мы уже знаем, позволяет внедрять в создаваемые Web-страницы программы-сценарии. Но тег обладает рядом параметров, которые позволяют браузеру максимально адекватно распознавать передаваемую информацию и выполнять инструкции программы.

Параметр type предназначен для указания типа присоединяемого скрипта. Он используется вместо устаревшего параметра language. Обычно используются значения text/javascript и text/vbscript. Первое значение указывает, что присоединяемый скрипт написан на языке JavaScript, а второе, соответственно, зарезервировано для VBScript. Данный параметр является обязательным. Параметр src применяется в тех случаях, когда код присоединяемого скрипта не внедряется непосредственно в HTML-документ, а вынесен в отдельный файл, который браузер должен сам нати и загрузить. Значением данного параметра является URL искомого файла, содержащего код присоединяемого скрипта. Параметр charset имеет смысл использовать в паре с предыдущим параметром, так как его значение определяет кодировку символов, которая использовалась при создании файла с подключаемым скриптом.

Теперь, когда мы знаем, какие параметры есть у тега <script>, рассмотрим фрагмент кода, в котором показан порядок его использования.

ODOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
chtml>
<head>
<title>Интерактивная страница</title> ;
<script type="text/javascript"> ...Код скрипта...
</script> .
</head>'

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

В этом примере мы подключаем файл, который находится в каталоге progs на сайте www.mysite.com. Как видно, все достаточно просто и понятно.
Очень часто при помощи подобных скриптов создатели Web-страниц динамически генерируют содержимое этих страничек. Это как раз одна из наиболее популярных возможностей DHTML. Но всегда есть вероятность, что пользователь будет использовать для просмотра Web-страницы устаревший браузер, который не сможет обрабатывать скрипты. В этом случае было бы хорошо иметь возможность установить альтернативное оповещение, которое отображалось бы браузером, если тот не в состоянии использовать программы-сценарии. Подобное сообщение мы можем устанавливать при помощи тегов <noscript> и </noscript>. Обычно они устанавливаются сразу после тегов <script>. В итоге получается конструкция следующего вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Интерактивная страница</title>
<script type="text/javascript">
...Код скрипта.... .
</script> -
<noscript>
К сожалению, ваш браузер не поддерживает скрипты.
</noscript>
</head>

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