Компьютерная графика и Web-дизайн

<META HTTP-EQUIV="Content-type" CONTENT="text/html; CHARSET=windows-1251">

Приведенный выше пример показывает, как используются операторы заголовка HTTP-сообщения. Однако здесь тоже следует быть осторожным. Большинство российских Web-узлов используют в качестве HTTP-сервера Russian Apache. Эта модификация сервера поддерживает перекодировку документов "на лету" для правильного отображения на стороне клиента. Russian Apache сам вставляет в HTTP-заголовок (не путать с HEAD) директиву Content-type. Если в документе будет META-элемент c указанием типа кодировки, а Apache перекодировал содержание, то возможно несоответствие между указанным в META типом кодировки и реальной кодировкой содержания документа.

Кроме Content-type, можно указать и другие операторы. Например, запретить кэширование документа. Необходимость в этом возникает при частом обновлении документа или наличии в нем изменяющихся SSI-вставок. Для запрета кэширования достаточно вставить в заголовок META-тег вида:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Pragma -- это наследие HTTP 1.0. В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control. Для получения такого же эффекта, как в случае с Pragma, в заголовке HTML-документа достаточно указать:

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

Новый механизм управления кэшированием и хранением документа на стороне клиента гораздо более гибок, чем в HTTP 1.0. Например, можно запретить хранение документа после пересылки:

<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">

Точно так же можно задать время последней модификации (Last-Modified) или дату истечения актуальности документа (Expire).

С появлением роботов поисковых машин на META-тег была возложена еще одна функция -- описание поискового образа документа. Наиболее последовательно это было впервые реализовано в Webcrawler. До этого в качестве поискового образа документа использовался либо весь список слов документа, либо слова первого абзаца.

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

<TITLE>Основы Web-технологий</TITLE>

<META NAME="description" http-equiv="description" content="Учебный курс Основы Web-технологий. Тема: Заголовок HTML-документа. Элемент разметки META. Дается краткое описание основных способов применения контейнера META в заголовке HTML-документа. Рассматривается управление HTTP-обменом и индексирование документов.">

<META NAME="keywords" HTTP-EQUIV="keywords" CONTENT="учебный курс; Web-технология; web; технология; HTML; язык гипертекстовой разметки; заголовок HTML-документа; заголовок; HTML; документ; контейнер; META; элемент; HEAD; пример; разметка; методика">

При индексировании такого документа содержимое контейнера TITLE и атрибутов CONTENT контейнеров META после фильтрации попадет в индекс поисковой машины и может быть использовано для составления запросов. Процесс фильтрации отбракует так называемые stop-слова и общие слова. Они не попадут в индекс поисковой машины. В частности, будут отбракованы предлоги или, если речь идет о тематическом поисковом индексе, например по технологиям World Wide Web, то в него не попадут: web, Web-технология и т.п.

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

<META [name=имя] [HTTP-EQUIV=имя_HTTP-оператора] CONTENT=текст>

Практика показывает, что при индексировании можно указывать одновременно и атрибут NAME, и атрибут HTTP-EQUIV с одинаковыми значениями. Это связано с тем, что одни роботы индексирования анализируют содержание META-элемента по атрибуту NAME, а другие -- по атрибуту HTTP-EQUIV.

Элемент разметки LINK

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

Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй -- мишенью. Собственно, это и отражено в названии элемента разметки A (anchor), который определяет гипертекстовую ссылку (не путать с гипертекстовой связью). При этом в контекстной связи один и тот же термин может идентифицировать разные связи. Например, в контексте содержания конспекта данной темы слово "HEAD" определяет документ head.htm, который описывает контейнер HEAD и особенности его применения, а в контексте справочника по данной теме слово "HEAD" будет означать ссылку на описание синтаксиса этого контейнера.

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

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

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

Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в Netscape Navigator и Internet Explorer четвертых версий. CSS (Cascade Style Sheets, каскадные таблицы стилей) позволяют определять для различных типов гипертекстовых связей вид гипертекстовых ссылок. При этом можно определять различные типы контекстных ссылок. Кроме того, впервые нашел осмысленное применение контейнер LINK. Он позволил загружать внешние описатели стилей:

<LINK REL=stylesheet href="../css/css.htm" TYPE="text/css">

В данном случае речь идет о загрузке стилей из файла css.htm. При этом стили задаются в нотации W3C, а не JavaScript, что определяется атрибутом TYPE. В сущности, атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.

В общем случае контейнер LINK может имеет следующий вид:

<LINK [REL=тип_отношения] [HREF=URL] [TYPE=тип_содержания]>

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

Элемент разметки STYLE

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

В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css, либо text/javascript. Если элемент разметки открыт тегом начала, то он должен быть закрыт тегом конца. В общем виде запись элемента STYLE выглядит так:

<STYLE TYPE=тип_описания_стилей>

описание стиля/стилей

</STYLE>

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

Элемент разметки SCRIPT

Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:

<SCRIPT LANGUAGE="JavaScript" SRC=script.code>

Если открыт тег начала, то нужно обязательно использовать тег конца контейнера. В противном случае, браузер может отобразить только символ "]". Если код не помещен в HTML-комментарии, то старые версии браузеров (до Mozilla 2) отображают программу перед текстом страницы. В ряде случаев страница вообще может не отображаться.

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

<SCRIPT [TYPE=тип_языка_программирования] [SRC=URL]>

JavaScript/VBScript-код

</SCRIPT>

Существует несколько скриптовых языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript. Подробнее с JavaScript и контейнером SCRIPT можно ознакомиться в главе "Введение в JavaScript".

Лекция #3: Контейнеры тела документа

Теги тела документа

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

· иерархических контейнеров и заставок;

· заголовков (от Н1 до Н6);

· блоков (параграфы, списки, формы, таблицы, картинки и т.п.);

· горизонтальных отчеркиваний и адресов;

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

· математических описаний, графики и гипертекстовых ссылок.

Тело документа - контейнер ВОDY

Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

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

Таблица 1. Атрибуты
Атрибут	Значение
ВGCOLOR=#FFFFFF	Цвет фона
ТЕХТ=#0000FF	Цвет текста
VLINK =#FF0000	Цвет пройденных гипертекстовых ссылок
LINK =#00FF00	Цвет гипертекстовой ссылки

В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Далее в таблице приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.

Таблица 2. Цвета
Название	Код	Название	Код
aqua	#00FFFF	navy	#000080
black	#000000	olive	#808000
blue	#0000FF	purple	#800080
fuchsia	#FF00FF	red	#FF0000
gray	#808080	silver	#C0C0C0
green	#008000	teal	#008080
lime	#00FF00	white	#FFFFFF
maroon	#800000	yellow	#FFFF00

Так, значения атрибутов в таблице 1 определяют цвет текста как синий, фона -- белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать

<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>,

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

Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.

Теги управления разметкой

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим -- это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 -- крайне редко.

Ниже на рисунке показан результат использования следующих заголовков: (открыть)

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

<H2>Заголовок 2</H2>



Тег <P>

Тег <P> применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.

Атрибут АLIGN

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

Далее приведены возможные значения атрибута АLIGN:

АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.

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

АLIGN=right выравнивание по правому краю. Текст, выровненный по правому краю и не выровненный по левому -- концы строк находятся на одном уровне, а начало на разных, -- часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.

АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом <АLIGN=сеntеr>. Однако этот тег применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выровненный по левому краю.

Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст "обтекать" графический объект. Для этого следует поместить тег <IMG SRC="/путь/файл.gif"> туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не "обтекал" графику, а прерывался, необходимо применить тег <BR> c атрибутом СLEAR.

Использование тега <ВR>

Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:

<BR СLЕАR=lеft> Текст будет продолжен, начиная с ближайшего пустого левого поля.

<BR СLЕАR=right> Текст будет продолжен, начиная с ближайшего пустого правого поля.

<BR СLЕАR=аll> Текст будет продолжен, как только и левое, и правое поля окажутся пустыми.

Элемент разметки <NOВR>

Тег <NОВR> (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <ВR>.

Теги управления отображением символов

Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.

Теги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации -- все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью атрибута FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.

Теги <ВIG> и <SMALL> -- изменение размеров шрифта

Текст, расположенный между тегами <ВIG></ВIG> или <SMALL> </SMALL>, будет, соответственно, больше или меньше стандартного.

Верхние и нижние индексы

С помощью тегов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги <SUР> и <SUВ> с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.

Атрибут SIZЕ

Атрибут SIZЕ тега <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тегом <ВАSЕFОNТ SIZЕ=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3. Некоторые браузеры тег <FONТ> не поддерживают, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать теги <Н1>, <Н2>, <НЗ> и т.д. Главное преимущество тега <FONТ> состоит в том, что после окончания действия он не разбивает строку, как теги <Нn>. Поэтому тег <FONТ> бывает очень полезен для изменения размера шрифта в середине строки.

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

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

Тег	Значение
<I>...</I>	Курсив (Italic)
<B>...</B>	Усиление (Вold)
<ТТ>...</TТ>	Телетайп
<U>...</U>	Подчеркивание
<S>...</S>	Перечеркнутый текст
<BIG>...</BIG>	Увеличенный размер шрифта
<SMALL>...</SMALL>	Уменьшенный размер шрифта
<SUB>...</SUB>	Подстрочные символы
<SUP>...</SUР>	Надстрочные символы

Теги, характеризующие тип информации
Тег	Значение
<ЕМ>...</ЕМ>	Типографское усиление
<СIТЕ>...</СIТЕ>	Цитирование
<STRONG>...</STRONG>	Усиление
<СODE>...</СОDE>	Отображает примеры кода (например, "коды программ")
<SАМР>...</SАМР>	Последовательность литералов
<КВD>...</КВD>	Пример ввода символов с клавиатуры
<VAR>...</VAR>	Переменная
<DFN>...</DFN>	Определение
<Q>...</Q>	Текст, заключенный в скобки

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

Блоки цитат -- элемент <ВLОСKQUOTE>

Тег добавляет поля слева и справа от текста. Это полезный тег, поскольку он позволяет компактно расположить текст в центре страницы. При неоднократном использовании <ВLОСKQUOTE> текст все больше сжимается к центру.



Создание списков в HTML

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists <UL>), нумерованный список (упорядоченный) (Ordered Lists <OL>) и список определений. Теги для ненумерованных и нумерованных списков -- это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item <LI>), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.

Неупорядоченные списки -- тег <UL>

Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

· первый элемент списка;

· второй элемент списка;

· третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

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

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

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

</UL>

Теги <UL> и </UL> -- это теги начала и конца ненумерованного списка, тег <LI> (List Item) задает тег элемента списка. Помимо этих тегов, существует тег, позволяющий именовать списки -- <LН> (List Header).

Атрибуты маркеров в ненумерованном списке

Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:

<UL TYPE=DISK>Тег создает сплошные маркеры такого типа, как в списках первого уровня по умолчанию.

<UL TYPE=СIRCLE>Тег создает маркеры в виде окружностей.

<UL TYPE=SQUARE>Тег создает сплошные квадратные маркеры.

Упорядоченные списки -- тег <OL>

Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С., D. и т.д.

<OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с., d. и т.д.

<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III., IV. и т.д.

Список определений -- тег <DL>

Теги списка (Definition List: <DL>, <DT>, <DD>) используют для создания списка терминов и их определений. Схема использования тега следующая.

<DL><DT>Термин</DT> <DD>Определение</DD></DL>

Определяемый термин записывается на одной строке, а его определение -- на следующей, с небольшим отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег </DL>. Помните, что тег <DL> сдвигает только левую границу абзаца.

Горизонтальные линейки -- тег <НR>

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

Преформатированный вывод -- тег <РRЕ>

Применение этого тега позволяет отобразить текст "как есть" (без форматирования), теми же символами и с тем же разбиением на строки.

Применение тега <BLINK>

Текст, помещенный между тегами <BLINK> и </BLINK>, мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.

Комментарии в языке HTML

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

Гипертекстовые ссылки

Все рассмотренные выше средства управления отображением текста, безусловно, важны, но они только дополняют основной тег HTML-документа -- гипертекстовую ссылку. Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде

<А НREF="http://www.intuit.ru/index.htm">Отображаемое название гипертекстовой ссылки</А>,

где значение атрибута HREF -- адрес документа "index.htm" на машине "www.intuit.ru", доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов URL и является составной частью технологии WWW.

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

http://user:password@domain.ru:port/path/some.html?query_string,

где

http -- протокол обмена данными;

user -- идентификатор пользователя;

password - пароль;

domain.ru -- доменное имя сервера;

port -- номер TCP-порта, на котором ведет обслуживание сервер;

path -- путь в корневом каталоге сервера к файлу ресурса;

some.html -- файл ресурса;

query_string -- поисковое предписание.

Заданный в таком виде адрес ресурса называется абсолютным или полным адресом ресурса. На практике редко используют все компоненты полного адреса схемы HTTP. Чаще всего первые компоненты опускают. Например, обращение к документу в том же каталоге в гипертекстовой ссылке будет записано просто как имя данного файла. Обращение к CGI-скрипту может выглядеть следующим образом:

<A HREF=../scripts/my_script?query_string>

Имя протокола, имя домена, номер порта и другие компоненты начала URL опущены. В этом случае говорят, что ссылка задана частично определенной или неполной формой URL.

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

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

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

Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:

Атрибут	Значение
ТЕХТ=#000000	Цвет текста (черный)
ALINK=#FF0000	Цвет "активных" гипертекстовых ссылок (красный)
VLINK=#FF00FF	Цвет пройденных гипертекстовых сылок (пурпурный)
LINK=#0000FF	Цвет гипертекстовой ссылки (синий)

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

<A HREF="http://www.intuit.ru/help/index.html">Помощь</A>

При нажатии на ссылку в окно браузера будет загружен новый документ.

Другой формой использования тега <А> является определение точек внутри текста, на которые можно сослаться. Такой метод применяется в том случае, когда документ нельзя поделить на части и необходимо быстро перемещаться из оглавления в текст:

<А NАМЕ="роint">

Для ссылки на такую точку используют следующую форму URL:

<А НREF="http://www.intuit.ru/index.html#роint">Ссылка на точку "роint" в документе "index.html"</А>

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

Лекция #4: Графика

Использование графики в HTML

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

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

· логотип компании на деловой странице;

· графика для рекламного объявления;

· различные рисунки;

· диаграммы и графики;

· художественные шрифты;

· подпись автора страницы;

· применение графической строки в качестве горизонтальной разделительной линии;

· применение графических маркеров для создания красивых маркированных списков.

Теперь рассмотрим как вставить изображение в Web-страницу. Тегом НТМL, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Пример вставки изображения:

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <А>, что и для текста, но между <А> и </А> вставляется тег изображения <IMG>:

<А НREF="адрес файла или изображения"> <IMG SRC="image.gif"></А>

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

Атрибуты и их аргументы. Тег изображения имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут SRC

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

Атрибут ALT

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

Атрибут АLIGN

Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента -- ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.

ALIGN="middle" выравнивает центр изображения по базовой линии строки окружающего текста.

ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста.

Кроме основных значений атрибута ALIGN="ключевое слово" существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее.

Дополнительные возможные значения аргумента -- ["left" | "right" | "top" | "texttop" | "middle" |"absmiddle" | "baseline" | "bottom" | "absbottom" ].

ALIGN="left" определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN="right" определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="textop" выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев, но не всегда, подобно действию аргумента ALIGN="top".

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

ALIGN="absmiddle" выравнивает центр изображения по центру строки окружающего текста.

ALIGN="baseline" выравнивает нижний край изображения по базисной линии строки окружающего текста, то есть производит такое же действие, как и ALIGN="bottom".

ALIGN="bottom" выравнивает нижний край изображения по базисной линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="absbottom" выравнивает нижний край изображения по нижнему краю строки окружающего текста.

Атрибут USEMAP

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

Атрибут BORDER

Целочисленное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=O в изображениях, которые представляют собой часть элемента якоря, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.

Атрибут НSРАСЕ

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

Атрибут VSPACE

Целочисленное значение этого атрибута задает вертикальное расстояние между строками текста и изображением.

Атрибуты WIDTH и HEIGHT

Оба атрибута задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно. Это позволяет уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу. Пока загружается графика, пользователь может начать читать текст. Определить размер изображения нетрудно, для этого достаточно воспользоваться любой программой просмотра графических файлов, например ACDSee или графическим редактором Corel PhotoPaint или Adobe Photoshop. Откройте файл в графическом редакторе и определите размер картинки в пикселах. В теге изображения следует указать ширину и высоту картинки.

<IMG SRC="image.gif" ALT="изображение" WIDTH="100" HEIGHT="200" HSPACE="10" VSPACE="10" BORDER="2" ALIGN="left">

Форматы графических файлов

Самыми распространенными графическими форматами в Web являются GIF и JPEG. GIF -- наиболее подходящий формат для обмена изображениями между системами. Архивы с изображениями в формате GIF можно найти на многих серверах Internet. Данный формат поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web.

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

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

С развитием аппаратного обеспечения, поддерживающего высокое разрешение и богатую цветовую гамму, графические файлы значительно увеличились в размерах. Профессиональные художники теперь, как правило, работают с файлами, содержащими 10 и более мегабайт данных на каждое изображение. Даже пользователи с более скромными запросами подчас имеют дело с изображениями 640 на 480 пикселов в 256 цветах (а это более 300 килобайт). Кроме того, многие сейчас начинают работать с полноцветными изображениями 1024 на 768 пикселов (это более 2,3 мегабайт данных). Так как высококачественные изображения встречаются все чаще, ограничения, накладываемые традиционными методами сжатия (например, LZW), становятся все более ощутимыми.

Для поиска оптимального способа сжатия изображений фотографического качества две международные организации по стандартизации, International Telecommunications Union (ITU, Международный союз телекоммуникаций) и International Organization for Standartization (ISO, Международная организация по стандартизации), создали Joint Photographic Experts Group (JPEG, объединенная экспертная группа по фотографии). С тех пор сокращение "JPEG" используется как название этой техники сжатия. Кроме того, оно входит в названия некоторых использующих ее файловых форматов.

Имя JPEG указывает на метод сжатия, но не на формат файла. На самом деле метод сжатия JPEG используют как многочисленные мало различающиеся форматы, зачастую известные, например "JPEG", так и единичные радикально отличающиеся форматы, такие как TIFF и Quick Time. К счастью, все же большинство форматов, известных под именем "JPEG", очень похожи, и, скорее всего, у вас не возникнет с этим проблем, однако знать о возможных осложнениях не помешает.

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

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

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

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

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

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

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

Активные изображения

Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать на узле графические меню произвольной формы. Активное изображение -- это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов.

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

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

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

Определить карту легко. Нужно открыть в МарEdit HTML-файл, содержащий изображение, на котором требуется создать активные области, после чего выбранное изображение будет загружено в рабочее окно. Затем следует выбрать тип активной области (квадрат, треугольник и круг), щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически производит запись в HTML-файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области и определить для каждой из них URL. Важно оставлять между областями немного места, чтобы при чтении быть уверенным, что активизируется правильная ссылка. Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тегов <МАР>. Вам придется самим задать тег изображения с атрибутом USЕМАР и поместить его после тега </МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ "#" следующим образом:

<IMG SRC="mymap.gif" USЕМАР="#sitemap">

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

<IMG SRC="image.gif" ALT="Изображения" USEMAP="#imap">

</CENTER>

<MAP NAME="imap">

<AREA SHAPE="rect" COORDS="0,0,100,100" HREF="http://www.intuit.ru/help/index.html">

<AREA SHAPE="rect" COORDS="100,0,200,100" HREF="http://www.intuit.ru/shop/index.html">

<AREA SHAPE="default" nohref>

</MAP>

Изображения в миниатюре

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

Лекция #5: Таблицы в HTML

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML

Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Создание строки таблицы -- тег <ТR>

Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.

Определение ячеек таблицы - тег <ТD>

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

<HTML>

<BODY>

<H1 ALIGN=center>Таблица</H1>

<CENTER>

<TABLE BORDER>

<TR>

<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>

</TR><TR>

<TD>Если в строке три тега TD,</TD>

<TD>то в ней</TD>

<TD>три столбца.</TD></TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Заголовки столбцов таблицы -- тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

...