Пример 8. Вставка изображений

<HTML>

<HEAD>
<TITLE>
Изображение
</TITLE>
</HEAD>

<BODY>
<IMG src="foto.gif" border=4 height=400 alt="изображение размером 400 на 400">
Здесь специально указан не существующий URL изображения и поэтому оно не может быть отображено

</BODY>

</HTML>

Гиперссылки.

Для навигации и связывания документов между собой в языке гипертекстовой разметки HTML предусмотрена возможность создания гиперссылок. Для этого используется элемент A, который задаётся парными тегами <A>....</A>. Обычно браузеры выделяют гиперссылки, чтобы их сразу можно было отличить от остального содержимого страницы - подчёркивание и синий цвет.

Для создания ссылки нужно задать атрибуту href элемента A URL нужного ресурса.

Например:
<A href="1.html"> Первая страница сайта </A>

<A href="2.html"> Вторая страница сайта </A>

В данном случе показан пример задания гиперссылки на документ, который находится в той же папке, что и ссылающаяся страница, для задания ссылки на документ находящийся на другом сайте необходимо указывать его полный URL: <A href="http://www.yandex.ru/"> Яндекс </A>

Для примера составим такой документ:

Пример 9. Гиперссылки

<HTML>

<HEAD>
<TITLE>
Создание гиперссылок
</TITLE>
</HEAD>

<BODY>
<A href="1.html">Первая страница сайта</A><BR>
<A href="2.html">Вторая страница сайта</A><BR>
<A href="http://www.yandex.ru/">Яндекс</A><BR>

</BODY>

</HTML>

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

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

Таблицы задаются парными тегами <TABLE>...</TABLE> и состоит из строк, задаваемых элементом TR - парные теги <TR>...</TR> (закрывающий тег не обязателен) и ячеек - элемент TD, с парными тегами <TD>...</TD> (закрывающий тег так же не обязателен).

Для таблицы имеется возможность создавать заголовок, задаваемый парными тегами <CAPTION>...</CAPTION>, который должен располагаться непосредственно за открывающим тегом <TABLE>.

Пример простейшей таблицы:

Пример 10.1 Создание таблиц

<HTML>

<HEAD>
<TITLE> Простейшая таблица </TITLE>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD> 1
<TD> 11
<TD> 111
<TR>
<TD> 2
<TD> 22
<TD> 222
</TABLE>

</BODY>

</HTML>

Пример таблицы с заголовком:

Пример 10.2 Создание таблиц с заголовком

<HTML>

<HEAD>
<TITLE>
Таблица с заголовком
</TITLE>
</HEAD>

<BODY>
<TABLE>
<CAPTION> Пример таблицы с заголовком </CAPTION> <TR>
<TD> 1
<TD> 11
<TD> 111
<TR>
<TD> 2
<TD> 22
<TD> 222
</TABLE>

</BODY>

</HTML>

Атрибуты таблиц.

Многие параметры отображения таблицы задаются соответствующими атрибутами элемента TABLE, рассмотрим некоторые из них:

− align - задаёт положение таблицы в окне браузера;

− bgcolor - цвет фона таблицы;

− border - толщина внешней границы;

− bordercolor - цвет границ таблицы;

− cellpadding - размер пустого пространства между границами и содержимым ячейки;

− cellspacing - расстояние между ячейками;

− width - ширина таблицы;

− height - высота таблицы;

− frame - задаёт отображаемые части внешней таблицы.

Атрибуты для строк таблицы TR:

− align - задаёт горизонтальное выравнивание текста;

− valign - задаёт вертикальное выравнивание текста;

− bgcolor - цвет фона строки;

− bordercolor - цвет рамки строки.

Атрибуты для ячеек таблицы: Атрибуты для строк таблицы TR:

− align - задаёт горизонтальное выравнивание текста;

− valign - задаёи вертикальное выравнивание текста;

− bgcolor - цвет фона ячейки;

− bordercolor - цвет рамки ячейки.

Для объединения ячеек используется атрибут тега <TD>:

− colspan ="количество ячеек" - по горизонтали;

− rowspan =" количество ячеек" - по вертикали.

Пример 1:

Пример 11.1. Атрибуты таблиц

<HTML>

<HEAD>
<TITLE>
Таблица
</TITLE>
</HEAD>

<BODY>
<TABLE frame=box>
<TR bgcolor=gold>
<TD>1
<TD>11
<TR>
<TD bgcolor=blue>2
<TD bgcolor=lime>22
</TABLE>

</BODY>

</HTML>