Пример 102
<img src=" AG00171.gif" alt="На картине изображены три трубача" />
Создание карт изображений
В HTML можно создавать специальные карты, которые содержат список областей-ссылок и привязываются к изображениям.
Карты в HTML создаются с помощью тэга <map>, а области-ссылки в них с помощью тэга <area>.
Пример карты изображения:
Форма и координаты областей-ссылок задаются с помощью атрибутов shape и coords тэга <area>, а место на которое они ссылаются с помощью атрибута href.
Возможные формы областей ссылок:
Форма |
Атрибуты |
Прямоугольная область-ссылка |
shape="rect", coords="x1,y1,x2,y2", где x1,y1 координаты верхнего левого угла прямоугольной области, а x2,y2 координаты нижнего правого угла области. |
Круглая область-ссылка |
shape="circle", coords="x,y,радиус", где x,y координаты центра области. |
Область-ссылка многоугольник |
shape="poly", coords="x1,y1,x2,y2..xz,yz", где x1,y2 координаты первого угла многоугольника, x2,y2 второго и т.д. Если координаты первого и последнего угла не совпадают, браузер автоматически добавит координату последнего угла, чтобы завершить многоугольник. |
После того, как карта создана, необходимо привязать ее к какому-нибудь изображению. Для этого необходимо добавить к изображению атрибут usemap="#имя_карты", а к карте добавить атрибут name="имя_карты".
Пример 103
<html>
<body>
<p> Нажмите на любую фигуру: </p>
<img src='figures.gif' usemap='#figuremap' />
<map name='figuremap'>
<area shape='rect' coords='3,8,72,75' href='bluesquare.html' target='_blank' />
<area shape='circle' coords='125,50,38' href='greencircle.html' target='_blank' />
<area shape='poly' coords='180,27,210,6,248,30,233,74,190,72' href='redpolygon.html' target='_blank' />
</map>
</body>
</html>
Задание: добавьте недостающие файлы ( посмотрите, что будет при нажатии мышкой на соответствующие геометрические фигуры) для корректного отображения ссылок.Результат покажите преподавателю.
11.Таблицы
Создание таблиц
Таблицы в HTML определяются с помощью тэга <table>.
Тэг <tr> позволяет создать в таблице строку, а тэг <td> добавить в эту строку ячейку с данными.
По умолчанию таблицы отображаются без границ. Для того, чтобы отобразить границу необходимо использовать атрибут border="1".
Обратите внимание: в ячейках таблиц может располагаться не только обычный текст, но и картинки, ссылки и другие таблицы.
Пример 111
<html>
<body>
<table border='1'>
<tr>
<th> Страна </th>
<th> Население (млн.) </th>
</tr>
<tr>
<td>Россия</td>
<td>141</td>
</tr>
<tr>
<td>США</td>
<td>309</td>
</tr>
<tr>
<td>Китай</td>
<td>1338</td>
</tr>
<tr>
<td>Великобритания</td>
<td>61</td>
</tr>
</table>
</body>
</html>
Табличные заголовки
С помощью тэга <th> Вы можете создать табличный заголовок. Текст элемента th центрируется и выделяется жирным шрифтом.
Пример 112
<html>
<body>
<table border='1'>
<tr>
<th>Памятник Горькому обещают вернуть</th>
<th>Раскрасьте люки</th>
<th>Художник убил бабочек</th>
</tr>
<tr>
<td>Площадь Тверской заставы.Чиновники обещают, что на площадь вернется памятник Максиму Горькому, который украшал её десятки лет.</td>
<td>Москвичи заявили, что хотят видеть канализационные люки креативными, но когда Мосводоканал займется творчеством, пока неизвестно.</td>
<td>Мастера инсталляций Дэмьена Хёрста обвинили в смерти 9 тысяч бабочек.</td>
</tr>
<tr>
<td>Памятник работы скульптора Мухиной был установлен в 1951 году, а в 2005-м перемещен в «Музеон» </td>
<td>В Японии картины на канализационные люки наносятся еще на этапе производства, однако в Европе люки часто раскрашивают уличные художники.</td>
<td>Экологи уверены, что бабочки красивы сами по себе и их красотой стоит наслаждаться в дикой природе.</td>
</tr>
</table>
</body>
</html>
Растягивание ячеек
С помощью атрибута colspan Вы можете указать, на сколько столбцов должна быть растянута указанная ячейка.