www.wmaster.ru
Wmaster.ru

На главную

Введение в дизайн

СТАТЬИ

Хостинг

DOCS

Коллекция шрифтов

Скрипты

Секреты мастеров

Продвижение сайта

Soft

Журнал Wmaster

Электронные журналы

ФоруМ

web-mastering
HTML
Programming
HTML-редакторы
Учебник по SEO
Apache
MySQL
XML/WML
Flash
Photoshop
.htaccess
Всё для форумов
Clipart
3DSMax
SSI
CSS
Технология раскрутки
Авторское право
Кодовые таблицы
Важное

Windows

Учебник по Adobe GoLive6

ЯЗЫК HTML (ЧАСТЬ 1)

Основы
Cтруктура HTML-документа
Используемые символы
Цвета и единицы измерения
Оформление текста
Графика и мультимедиа
Гиперссылки

Основы

Интернет — это огромное объединение компьютерных сетей в планетарном масштабе. А если учесть, что обитатели Международной Космической Станции пользуются услугами электронной почты, то становится ясно, что Интернет уже шагнул за пределы планеты. Очень часто Интернет ошибочно отождествляют с самой популярной и масштабной его частью — всемирной путиной, которая в английском языке получила наименование 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-документов.
Естественно, как и в любом компьютерном языке, нельзя обойтись без комментариев, содержимое которых не обрабатывается браузером и не отображается. Они служат лишь для! удобства разработчика, для внутреннего документирования структуры ljrevtyn документа. Комментарии заключаются между фрагментами <-- и-->. Вот пример создания комментариев:

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

Любая 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="green">

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

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

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

<meta name="имя переменной" content = "значение переменной">

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

<meta name="Author" content = "It's me!!!">

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

<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

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

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

Страница с подобной конструкцией в блоке заголовка будет автоматически перезагружаться каждые десять секунд.
На этом заканчивается рассмотрение структуры заголовка HTML-документа. Мы переходим к изучению структуры основного раздела Web-страницы, Как мы помним, вся отображаемая в окне просмотра браузера информация размещается между тегами <body> и </body>. О том, какие возможности по указанию правил отображения содержимого Web-страницы нам предоставляет .язык HTML, мы узнаем в следующих разделах этой главы. Здесь мы рассматриваем лишь общую структуру HTML-документа.
HTML предоставляет нам возможность для каждого применяемого тега задать уникальный идентификатор. Скажем, если наш текст разбит на абзацы, то для каждого абзаца мы можем задать свое специфичное наименование, а затем, при помощи некоторых дополнительных средств языка HTML, управлять отображением этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет шрифта, т. е. изменять правила их отображения. Причем, это относится не только к абзацам, а ко всем частям содержимого Web-cTpaHmftij которые заключены в,те или иные теги.
Для идентификации какого-либо тега применяется параметр 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> и <diy>, т. е. идентификационные 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-страницы. Проблему необходимо было решить. И выход был найден.
Вместо самих символов в текст подставлялись последовательности, которые можно было уже нормально интерпретировать. Так, знак неравенства "меньше", он же — открывающая угловая скобка, заменяется на последовательность &it;, В данном случае вся последовательность заключена в кавычки, начинается она со знака амперсанта, а заканчивается знаком точки с запятой. Подобные последовательности перекочевали и в язык следующего поколения — XML, и получили название "eatities", что в русскоязычной литературе переводят как "сущности". Перевод, конечно, правильный, но, к сожалению, ничуть не разъясняет суть дела. Проще и, наверное, правильней называть эти сущности текстовыми подстановками. Список текстовых подстановок используемых в HTML приведен в табл. 1.1.

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

Символы
Описание
&lt;
Знак неравенства "меньше" (<)
&gt ;
Знак неравенства "больше" (>),
&amp;
Знак амперсанта (&)
&quot;
Знак кавычек
&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
Прописная 1, сильное ударение
&Igrave
Прописная 1, тупое ударение
&Iuml
Прописная 1, умляут
&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-страниц пытаются использовать пустые абзацы, т. е. между стартовым и конечным тегом абзаца ничего нет. Согласно спецификациям, браузеры должны просто игнорировать подобные конструкции. Поэтому для разделения абзацев или принудительного обрыва строки внутри одного абзаца следует использовать тег <ы>. Это директивный тег. Он просто обозначает то место, где надо перенести отображение на другую строку. Пример использования этого тега для достижения обеих этих целей показан на примере 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 мы можем указывать и изменение размера шрифта. Например, для того, чтобы увеличить размер шрифта на один уровень, следует использовать следующую конструкцию:

<font size«"+1">

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

<font size«"-2">

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

<font color="green">

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

<font size=4 color="black" face="Courier New, Arial Black">

При помощи этого тега мы объявляем, что текст, находящийся после него, будет отображаться четвертым размером, символы будут черными, а применяться должен шрифт 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 предусмотрено два вида переносов — явный и, так называемый, "мягкий". Явный перенос создается при помощи символа короткого тире, заменяемого обычно численными текстовыми подстановками "&#45;" и "&#х2о,Л Однако явный перенос неудобен тем, что при изменении размеров окна просмотра браузера может измениться и длина строки, а знак переноса все равно останется виден. Даже если он будет находиться в середине строки. Поэтому чаще все-таки пользуются "мягкими" переносами. Они создаются при помощи текстовой подстановки "&shy;". При этом символы мягких переносов в тексте не видны, и лишь в том случае, когда какое-либо слово, в которое были вставлены эти символы, не умещается целиком в строке, оно переносится с разбивкой на слоги, согласно вставленным "мягким" переносам. И лишь один из символов мягкого переноса в этом слове становится виден.
Также 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> входит параметр noshade, то отображаемая горизонтальная линия не будет иметь тени. А последний параметр width позволяет устанавливать длину горизонтальной линии. По умолчанию используется значение "юо%". А высота линии в пикселах задается при помощи параметра 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%" noshade 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 с рисунками, то тег вставки графического изображения приобретет следующий вид:

<img src="images/pictl .gif ">

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

<img src="images/pictl.gif" 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 и f iieopen. Первое из них указывает, что клип необходимо воспроизвести после того, как пользователь поместит курсор мыши на пространство, отведенное под видеовставку, а второе — что воспроизведение начнется сразу после полной загрузки HTML-файла. Впрочем, мы можем сочетать эти два варианта. В этом случае, тег вставки видеоролика будет выглядеть следующим образом:

<img dynsгс="movie.avi" start="mouseover, fileopen">

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

<img dynscr="movie.avi" loop="2" loopdelay="5000">

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

<bgsound src="song.mid" loop="-1">

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

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 является противоположностью атрибута те 1. Если атрибут rei определяет тип документа, на который указывает гиперссылка, то атрибут 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, в качестве значения которого указывается символ. Когда пользователь нажимает на клавишу, которая отвечает за ввод данного символа, фокус В1вода автоматически передается искомой гиперссылке, в объявление которой и встроен параметр 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>
i лава i, /темп n i mi.
<р>Это обычный текст.<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 определен тег <iink>, который создает не привычную нам гиперссылку, а некоторую связь между отображаемым документом и каким-либо дополнительным файлом. Теги <iink> могут размещаться только в разделе заголовка HTML-документа, между тегами <head> и </head>В качестве примера применения рассматриваемого нами тега <iink> можно привести следующий фрагмент кода:

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

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.

[ Оглавление ]
Партнеры Wmaster
Protoplex.RU
Эскизы татуировок
Поиск по сайту
Объявления
Twitter автора
Карта сайта
Наши баннеры
О проекте

Реклама
(понижение цен)

Об Авторе
Команда
Архив рассылки
 Запомнить эту страницу
Сделать стартовой
Рассылка
Wmaster.ru - всё для вебмастера.
Наша кнопка

Все желающие могут поставить нашу кнопочку к себе на сайт
Всё для веб-мастеров

Партнеры
Бочкарёв Антон
Mail: webmaster[at]wmaster.ru
ICQ: 148780826
Хостинг от Valuehost
© RUscripts.design 2003

© Wmaster Design Group 2001-2008. © Все права защищены. При перепечатке любого материала с сайта  ссылка на http://www.wmaster.ru/  обязательна.