Графические карты: клиентские графические карты

Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map—встроенное в HTML-документ изображение, для которого определены "горячие" (или активные) точки или области, имеющие ссылки на различные URL-адреса

Тег <map> служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега <map> — в связывании тега <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге <img>, задаваемого атрибутом usemap, так и в теге <map>, устанавливаемого атрибутом name.

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

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

Клиентский вариант карты-изображения

Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты.

Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area>.

Атрибуты тега AREA

shape

Определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).

alt

Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.

coords

Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

<area shape="circle" coords="230,340, 100" href="circle.html">

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

<area shape="rect" coords="24,18, 210,56" href="rect.html">

Для полигона задаются координаты его вершин (рис. 2).

Рис. 2. Координатные точки для полигона

href

Определяет адрес ссылки для области. Правила записи такие же, как и для тега <a>.

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

Преимущества карт-изображений

1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.

2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.

Недостатки

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

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

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

 

Выравнивание текста.

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

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

Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.

Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1>.

 

 

Шрифтовое оформление: размер шрифта, начертание шрифта, выбор шрифта по его названию.

Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис <font>Текст</font>

Закрывающий тег Обязателен.

Атрибуты:

color- Устанавливает цвет текста.

face-Определяет гарнитуру шрифта.

size-Задает размер шрифта в условных единицах.

 

Здесь все достаточно просто..

Итак, новые теги:

<b> </b>	- Полужирный текст
<i> </i>	- Наклонный текст
<u> </u>	- Подчеркнутый текст
<strike> </strike>	- Перечеркнутый
<s> </s>	- Перечеркнутый (второй вариант, от первого ничем не отличается)
<tt> </tt>	- моноширинный шрифт
<small> </small>	- Малый
<big> </big>	- Большой
<sup> </sup>	- Верхний индекс
<sub> </sub>	- Нижний индекс

 

тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк

Таблицы. Атрибуты тега <TABLE>

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие лементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Синтаксис

<table>

<tr>

<td>...</td>

</tr>

</table>

Атрибуты

align-Определяет выравнивание таблицы.

background-Задает фоновый рисунок в таблице.

bgcolor-Цвет фона таблицы.

border-Толщина рамки в пикселах.

bordercolor-Цвет рамки.

cellpadding-Отступ от рамки до содержимого ячейки.

cellspacing-Расстояние между ячейками.

cols-Число колонок в таблице.

frame-Сообщает браузеру, как отображать границы вокруг таблицы.

- void - Нет бордюра

- border - Бордюр вокруг всей таблицы. (по умолчанию)

- above - Бордюр по верхнему краю таблицы.

- below - Бордюр только снизу таблицы.

- hsides - Только горизонтальные границы.

- vsides - Только вертикальные границы.

- rhs -Бордюр только справа.

- lhs - Бордюр только слева.

 

height-Высота таблицы.

rules-Сообщает браузеру, где отображать границы между ячейками.

- all - Вокруг каждой ячейки.(по умолчанию)

- groups - Между группами ячеек образованными тегами <thead>, <tbody>, <tfoot>, <colgroup>, <col>.

- cols - Только между столбцами таблицы.

- none - Отсутствуют.

- rows - Только между строк таблицы.

 

summary-Краткое описание таблицы.

width-Ширина таблицы.

colspan - определяет какое количество столбцов будет занимать данная ячейка

rowspan - количество рядов занимаемое ячейкой

 

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег Обязателен.

Таблицы. Атрибуты тега <TR>

Создаёт строку в таблице.

Атрибуты:
align - Выравнивает текст в ячейках строки:

- left - по левому краю (по умолчанию)

- right - по правому краю

- center - по центру

- justify - по левому и правому краю.

valign - Выравнивает текст в ячейках строки по вертикали:

- top - по верхнему краю

- middle - по центру

- bottom - по нижнему краю

- baseline - по базовой линии.

bordercolor - Цвет бордюра.
bgcolor - Цвет фона ячеек строки

Таблицы. Атрибуты тегов <TD>, <TH>

<TD>

Создаёт отдельную ячейку в таблице.

Атрибуты:
width - Ширина ячейки в процентах или пикселях
height - Высота ячейки в процентах или пикселях
align - Выравнивает текст в ячейке:

- left - по левому краю (по умолчанию)

- right - по правому краю

- center - по центру

- justify - по левому и правому краю

valign - Выравнивает текст в ячейке по вертикали:

- top - по верхнему краю

- middle - по центру

- bottom - по нижнему краю

- baseline - по базовой линии.

colspan - количество столбцов занимаемое ячейкой
rowspan - количество рядов занимаемое ячейкой
bgcolor - Цвет фона ячейки
background - Задает фоновый рисунок в ячейке.
bordercolor - Цвет бордюра.
title - Всплывающая подсказка
nowrap - Запрещает перенос строк в ячейке.

 

<TH>

Создаёт ячейку в таблице которая определяется как заголовок.

Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным.

Атрибуты:
width - Ширина ячейки в процентах или пикселях
height - Высота ячейки в процентах или пикселях

align - Выравнивает текст в ячейке:

- left - по левому краю

- right - по правому краю

- center - по центру

- justify - по левому и правому краю

valign - Выравнивает текст в ячейке по вертикали:

- top - по верхнему краю

- middle - по центру

- bottom - по нижнему краю

- baseline - по базовой линии.

colspan - количество столбцов занимаемое ячейкой
rowspan - количество рядов занимаемое ячейкой
bgcolor - Цвет фона ячейки
background - Задает фоновый рисунок в ячейке.
bordercolor - Цвет бордюра.
title - Всплывающая подсказка
nowrap - Запрещает перенос строк в ячейке.

 

Таблицы. Тег <CAPTION>

Описание

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

Атрибуты:

align-Определяет выравнивание заголовка по горизонтали.

valign-Устанавливает расположение заголовка до или после таблицы.