Графика внутри HTML-документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

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

<IMG SRC=" URL " ALT=" text " HEIGHT=n1 WIDTH=n2 ALIGN= top|middle|bottom|texttop ISMAP>

Опишем элементы синтаксиса тэга:

URL

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

ALT="text"

Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1

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

WIDTH=n2

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

ALIGN

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

ISMAP

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

Приведем пример использования данного тэга:

< IMG SRC="http://www.softexpress.com/images/nekton.jpg" ALT="СофтСервис лого" ALIGN="top" ISMAP>

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

<IMG SRC=" URL " ALT=" text " HEIGHT=n1 WIDTH=n2 ALIGN= top|middle|bottom|texttop| absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Новые параметры:

BORDER

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

VSPACE

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

HSPACE

То же самое, что и VSPACE, но только по горизантали.

Фоновые рисунки

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

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

< BODY BACKGROUND=" picture.gif ">

Задание стандартных цветов

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

< BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR

Цвет фона документа

TEXT

Цвет простого текста документа

LINK

Цвет ссылки

Цвет задается шестизначным числом в шестнадцатиричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

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

Горизонтальная линия

Используя тэг <HR> вы можете разделить текст горизонтальной чертой.

Формат тэга:

<HR SIZE=number WIDTH= number|percent ALIGN= left|right|center NOSHADE >

Параметры тэга:

SIZE

Толщина линии в пикселах.

WIDTH

Ширина линии в пикселах или процентах от ширина окна броузера.

ALIGN

Расположение на экране (слева | по центру | справа).

NOSHADE

По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

Добавление стилей в ваш HTML-документ

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

• bold (жирный)
• italic (наклонный)
• mono spaced (type writer - с использованием фиксированных шрифтов)

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

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

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

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!

Дополнительные стили:

• big (юольшой)
• small (маленький)
• sub (подстрочник)
• sup (надстрочник)

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст ^надстрочник

Размер шрифта <FONT SIZE>

Вы можете изменять размер шрифта при помощи тэга:

<FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:

<BASEFONT SIZE=n>

Например:

<p>и
<font SIZE=+1>з</font><font SIZE=+2>м</font>
<font SIZE=+3>е</font><font SIZE=+4>н</font>
<font SIZE=+3>е</font><font SIZE=+2>н</font>
<font SIZE=+1>и</font>
е</p>

изменение

Цвет шрифта <FONT SIZE>

Вы можете изменить цвет шрифта при помощи тэга:

<FONT COLOR="#xxxxxx>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатиричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

<FONT COLOR="#FF0000">
Красный </FONT>
<FONT COLOR="#00FF00">
Зеленый </FONT>
<FONT COLOR="#0000FF">
Синий </FONT>

Красный Зеленый Синий

Специальные тэги HTML

Следующие тэги позволят вам сделать ваш HTML-документ более функциональным.

Тэг адреса <ADDRESS>

Тэг <ADDRESS> используется для выделения автора документа и его дреса (например, e-mail). Синтаксис:

<ADDRESS> Адрес-автора </ADDRESS>

Escape-последовательности

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

• левая угловая скобка "<"
• правая угловая скобка ">"
• амперсанд "&"
• двойные кавычки """

Чтобы использовать данные символы в документе, необходимо заменить их escape-последовательностями:

<	&lt;
>	&gt;
&	&amp;
"	&quot;

Существует большое количество escape-последовательностей для обозначения специальных символов, например "&copy;" для обозначения знака © и &reg; для значка ®, появившихся в HTML 2.0. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.

Внимание! Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;.

 

Произвольные тэги

Произвольные Тэги предоставляют вам всю мощь языка Java наряду с почти совершенной интеграцией в ваш уровень представления. [6]

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

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

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

Основным механизмом для этого являются тэги.

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

Другой важный механизм для применения этой структуры к данным - это атрибуты, которые делают тэги немного более сложными, такие как, например, тэг "table" в HTML. Тэг таблицы может иметь атрибут бордюра, то есть <table border="3">, это значение атрибута border, применяется к данным, которые появятся после тэга <table> и перед тэгом </table>. Эти данные, находящиеся между двумя тэгами, являются телом тэга. Все данные в теле этого тэга будут отображаться в таблице, а бордюр вокруг каждого элемента таблицы будет толщиной "3".

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

Пример:

<table border=”3”>

<tr>

<td>black</td>

<td>white</td>

</tr>

</table>

Здесь определена таблица с размером бордюра равным трем, одной строкой и двумя колонками, содержащая данные black и white. Слова black и white являются элементами данных, которые составляют тело тэга <td> или тэга данных таблицы (table data). Тэг <tr>, или тэг строка таблицы (table row), со своим встроенным тэгом <td> и данными составляет тело тега таблицы. Вы можете четко видеть, что взаимосвязь между этими тегами важна. Тэг строки таблицы <tr>, имеет мало смысла вне пределов тэга таблицы, аналогично, тэг данных таблицы <td> не имеет смысла вне пределов тега строки таблицы. Мы ссылаемся на тэг таблицы, как на родительский для тэга строки таблицы, а на тэг строки таблицы, как на родительский для тега данных таблицы.

XML вводит идею пространства имен, которое дает вам немного больше гибкости при именовании тэгов. (Более детально смотрите главу об XML.) Если вы хотите создать свой собственный язык разметки, аналогичный HTML, вы можете определить пространство имен, называемое mytags, и определить ваш собственный тэг в нем, таким образом получиться тэг <mytag:table> и </mytag:table>. Смысл прост: это должно значить, что в данном случае не будет путаницы между оригинальным HTML тэгом table и вашим собственным, заново определенным тэгом table. Ваш тэг table находится в собственном пространстве имен. Это значит, что вы можете использовать последовательную конвенцию имен, то есть вызов "table" предпочтительнее "myspecialtable", когда не нужно беспокоиться о коллизии с определением в HTML стандарте.

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