HTML_3 (Методические материалы к лабораторным работам 1, 2)

Лекция №3. Таблицы. Изображения. Навигационные карты.

----------------------------------------------------------------

1. Элементы создания таблиц

2. Изображения в документах HTML.

3. Навигационные карты.

4. Элемент OBJECT.

5. Группировка элементов: элементы DIV и SPAN

----------------------------------------------------------------

1. Элементы создания таблиц

Пример таблицы:

Языки разметки
	Языки разметки
	HTML	XML
Год создания	1990	1998

<TABLE border=1>

<CAPTION>Языки разметки</CAPTION>

<TR><TH rowspan=2><TH colspan=2>Языки разметки

<TR><TH>HTML</TH><TH>XML</TH></TR>

<TR><TH>Год создания<TD>1990<TD>1998

</TABLE>

Элементы, используемые для создания таблиц:

Элемент TABLE - таблица

Начальный тег: обязателен, конечный тег: обязателен

Атрибуты:

1. align = left|center|right . Горизонтальное выравнивание таблицы в документе.

2. width = ширина таблицы (в пикселах или %). Если значение атрибута меньше минимально возможной ширины таблицы, то таблица отображается целиком с минимально возможной шириной.

3. bgcolor = цвет фона

4. border = ширина внешней границы таблицы в пикселах

5. frame = void|above|below|hsides|vsides|lhs|rhs|box|border

Атрибут определяет видимость внешних границ таблицы.

1. void: Границ нет. По умолчанию, если не задан border.

2. above: Только верхняя граница.

3. below: Только нижняя граница.

4. hsides: Только верхняя и нижняя границы.

5. vsides: Только левая и правая границы.

6. lhs: Только левая граница.

7. rhs: Только правая граница.

8. box, border: Все четыре границы. По умолчанию, если border>0

6. rules = none|groups|rows|cols|all

Атрибут определяет видимость внутренних границ между ячейками таблицы.

1. none: Нет границ. По умолчанию, если не задан border.

2. groups: Границы отображаются только между группами. Элементы группировки строк (THEAD, TFOOT, и TBODY).

3. rows: Границы отображаются только между строками.

4. cols: Границы отображаются только между столбцами.

5. all: Отображаются все внутренние границы. По умолчанию, если border>0

7. cellspacing = толщина внутренней границы (в пикселах)

8. cellpadding = отступ между внутренней границей и текстом ячейки (в пикселах)

Элемент CAPTION – подпись таблицы (необязательный).

Начальный тег: обязателен, конечный тег: обязателен

Атрибуты:

align = top|bottom|left|right

Расположение подписи сверху по центру (по умолчанию), снизу по центру, сверху слева или сверху справа от таблицы.

Элемент CAPTION должен располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION.

Элемент TR – строка таблицы.

Начальный тег: обязателен, Конечный тег: не обязателен

Атрибуты:

1. align = left|center|right

Горизонтальное выравнивание в ячейках строки.

2. valign = top|middle|bottom

Вертикальное выравнивание в ячейках строки.

1. top: Выравнивание по верхнему краю ячейки.

2. middle: Выравнивание по середине ячейки. (По умолчанию.)

3. bottom: Выравнивание по нижнему краю ячейки.

3. height = высота строки в пикселах (или в % от высоты таблицы)

Ячейки таблицы: элементы TH и TD

Начальный тег: обязателен, Конечный тег: не обязателен

Могут использоваться только внутри элемента TR. TD - ячейка данных таблицы, TH - ячейка заголовка таблицы. TD как правило отображается обычным шрифтом с выравниванием влево, а TH – полужирным с выравниванием по центру.

Атрибуты:

1. rowspan = число объединяемых ячеек по вертикали

2. colspan = число объединяемых ячеек по горизонтали

Атрибуты rowspan и colspan могут быть использованы совместно для объединения ячеек по горизонтали и по вертикали.

Пример: <TD rowspan=2 colspan=2>Четыре ячейки (2х2) </TD>

3. nowrap (логический). Запрет переноса слов внутри ячейки. Текст ячейки располагается в одну строку.

4. width = ширина ячейки в пикселах (или % от ширины таблицы)

5. height = высота ячейки в пикселах

Также могут быть заданы атрибуты bgcolor align, valign, которые перекрывают соответствующие атрибуты элементов TABLE и TR.

Группировка строк таблицы: элементы THEAD, TFOOT и TBODY

Использование данных элементов необязательно.

Элемент THEAD задает верхний заголовок таблицы, элемент TFOOT - нижний заголовок таблицы, а элемент TBODY –тело таблицы. Элементы должны быть вложены в элемент TABLE и могут содержать вложенные элементы TR.

Атрибуты: align, valign.

Элемент TFOOT должен располагаться до элемента TBODY, чтобы броузер мог генерировать нижний заголовок до получения всех (возможно, многочисленных) строк данных. Элемент TBODY может встречаться несколько раз.

Пример:

<TABLE border="1">

<THEAD>

<TR><TH>Верхний заголовок 1<TH>Верхний заголовок 2

</THEAD>

<TFOOT>

<TR><TH>Нижний заголовок 1<TH>Нижний заголовок 2

</TFOOT>

<TBODY>

<TR><TD>Данные 1<TD>Данные 2

<TR><TD>Данные 1<TD>Данные 2

</TBODY>

<TBODY>

<TR><TD>Данные 1<TD>Данные 2

<TR><TD>Данные 1<TD>Данные 2

</TBODY>

</TABLE>

Таблицы могут быть вложены друг в друга. Элемент TABLE внутренней таблицы может быть вложен в элемент TD внешней таблицы.

Подробные примеры можно найти в статье «Таблицы в примерах», в архиве.

-----------------------------------------------------------------

2. Изображения в документах HTML.

В HTML5 появился новый элемент CANVAS с атрибутами

id=id элемента (для удобной ссылки в JavaScript)

width = ширина (в пикселах или %) height = высота (в пикселах или %)

В этот элемент нельзя загрузить изображение, на нем можно только рисовать с помощью JavaScript

Для вставки изображений в документ HTML используется элемент IMG.

Начальный тег: обязателен, Конечный тег: запрещен

Атрибуты элемента IMG:

1. src = uri

Атрибут задает адрес (URI) изображения. Как правило, является ссылкой на файл в формате GIF или JPEG.

2. alt = строка

Альтернативный текст, который выводит броузер, если он не может найти или показать изображение. Пользователь может использовать текстовый броузер (например LYNX). Во многих графических броузерах (например в Netscape) также существует возможность явного отключения вывода изображений (для ускорения загрузки страниц).

Некоторые броузеры (например IE) выводят значение атрибута alt как всплывающую подсказку. (Если задавать и title и alt, то IE в качестве подсказки выводит title, а если изображение не найдено, то в качестве изображения выводится alt, а в качестве подсказки title)

Атрибуты src и alt являются обязательными.

3. width = ширина (в пикселах или %)

4. height = высота (в пикселах или %)

Если указаны атрибуты width и height, то они переопределяют исходный размер изображения. Броузер масштабирует изображение так, чтобы оно соответствовало заданной ширине и высоте.

Если ширина или высота заданы в процентах, то процент вычисляется не от исходного размера изображения, а от размера окна броузера.

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

5. border = ширина границы в пикселах

6. hspace = горизонтальный отступ справа и слева (в пикселах или %)

7. vspace = вертикальный отступ сверху и снизу (в пикселах или %)

8. align = bottom | middle | top | left | right

Выравнивание изображения в тексте.

1. bottom: Изображение выравнивается по вертикали по нижней границе текущей строки текста. (По умолчанию).

|--|

111111111|--|1111111111

1. middle: Изображение выравнивается по вертикали по середине текущей строки текста.

|--|

111111111|--|1111111111

|--|

1. top: Изображение выравнивается по вертикали по верхней границе текущей строки текста.

111111111|--|1111111111

|--|

• left или right: Изображение перемещается к левой или правой границе окна броузера. Текст может обтекать изображение.

111111

|--|11

|--|11

111111

9. usemap = имя навигационной карты

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

10. ismap (логический). Задает использование серверной навигационной карты.

Примеры:

<IMG src=1.gif alt=картинка>

<IMG src=1.gif alt=картинка width=100 height=50>

<IMG src=1.gif alt=картинка border=10>

<P>Текст</P>

<!-- 100 px -->

<IMG src=1.gif alt=картинка vspace=100>

<!-- 100 px -->

<P>Текст</P>

<P>Текст<IMG src=1.gif hspace=100>Текст</P>

|--|

Текст |--| Текст

<P>Текст<IMG src=1.gif align=middle>Текст</P>

|--|

Текст|--|Текст

|--|

<P>Текст<IMG src=1.gif align=middle hspace=100>Текст</P>

|--|

Текст |--| Текст

|--|

3. Навигационные карты.

Навигационные карты позволяют определять области изображения и назначать каждой области определенный URI (конечный якорь гиперссылки).

Пример:

----------------

| URI 1 | URI 2|

----------------

| URI 3 | URI 4|

----------------

Существует два типа навигационных карт:

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

2. Серверная. Координаты точки передаются сценарию на сервере, который интерпретирует координаты и выполняет соответствующие действия.

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

Клиентские навигационные карты.

Задаются с помощью элемента MAP и вложенных элементов AREA.

Элемент MAP определяет клиентскую навигационную карту.

Начальный тег: обязателен, Конечный тег: обязателен

Атрибуты:

name = имя навигационной карты (обязательный)

Элемент AREA определяет область клиентской навигационной карты

Начальный тег: обязателен, Конечный тег: запрещен

Атрибуты:

1. shape = default|rect|circle|poly

Определяет форму области. Возможные значения:

1. default: Задает всю область.

2. rect: Определяет прямоугольную область.

3. circle: Определяет круглую область.

4. poly: Определяет многоугольную область.

2. coords = координаты точек

Число и порядок значений зависят от атрибута shape. Координаты задаются относительно верхнего левого угла.

1. rect: x левой границы, y верхней границы, x правой границы, y нижней границы. (X1,Y1,X2,Y2)

2. circle: x центра, y центра, радиус. (Xc,Yc,R)

3. poly: x1, y1, x2, y2, ..., xN, yN.

Первая и последняя точка многоугольника автоматически замыкаются.

3. href = URI

Конечный якорь гиперссылки.

4. nohref (логический)