3. Изображение-ссылка

Ссылки можно делать не только с помощью текста, но и с помощью изображений. Для этого нужно обернуть тег <img> в тег <a>. Например:

<a href="http://ssuwt.ru">

<img src="vuz.png" alt="СГУВТ" />

</a>

11. Таблицы

Таблица состоит из двух измерений: столбцы и строки. Пересечение строки и столбца называется ячейкой. Для этого необходимы следующие теги:

<table> для самой таблицы;

<tr> для рядов, в том числе строк (англ. "table row" - ряд таблицы),

<td> для ячеек (англ. "table data cell" - ячейка данных таблицы);

<th> для ячеек, содержащих заголовок (англ., "table header cell").

Таблицы в HTML формируются нетрадиционным способом – построчно. Сначала необходимо создать ряд таблицы, в который затем помещаются ячейки.

Например, требуется построить следующую таблицу:

Фрукты	Цена за 1 кг
Яблоки	65 рублей
Вишня	125 рублей

Код программы выглядит следующим образом:

<table border="1">

<tr>

<th>Фрукты</th>

<th>Цена за 1 кг</th>

</tr>

<tr>

<td>Яблоки</td>

<td>65 рублей</td>

</tr>

<tr>

<td>Вишня</td>

<td>125 рублей</td>

</tr>

</table>

В программе Aptana Studio 3 данная программа набирается следующим образом:

Таблица состоит из 3 строк, в каждой строке 2 ячейки, поэтому:

1. Вводим с клавиатуры table>tr*3>td*2 (Рис.7).

2. Нажимаем Ctrl+E, появляется структура таблицы (Рис.8).

Т.к. в таблице в верхней строчке содержимое ячеек находится по центру и написано жирным шрифтом, то это ячейки <th>, поэтому в программе мы выделяем в первой строке таблицы <td> ячейки (Рис.9), удаляем их, прописываем th*2 (Рис.10), и нажимаем Ctrl+E.

Теперь добавляем в тег <table> атрибут border="1". Заметим, что когда в теге <table> после названия тега ставим пробел, Aptana Studio 3 предлагает список атрибутов для тега <table>.

Выбираем стрелками атрибут border (Рис.11) и нажимаем клавишу Enter (либо дважды щелкаем левой кнопкой мыши по атрибуту border). Появится атрибут border с равенством и кавычками, и курсор будет находиться между кавычками.

Вводим туда 1, чтобы появилась граница у таблицы. В ячейки вписываем текст (Рис.12).

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

1. Выравнивание содержимого ячеек

У ячеек, содержащих заголовок, текст выравнивается по центру по горизонтали и вертикали, и отображается жирным шрифтом, у ячеек, содержащих данные – по левому краю и по центру вертикально, и отображается обычным шрифтом. Оба эти параметра можно изменить как в каждой ячейке, так и для строки. Для этого нужно использовать атрибуты align и valign с следующими значениями:

align="left" – выравнивание по левому краю;

align="center" – выравнивание по центру по горизонтали;

align="right" – выравнивание по правому краю;

valign="top" – выравнивание по верхнему краю;

valign="middle" – выравнивание по центру по вертикали;

valign="bottom" – выравнивание по нижнему краю;