Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Marina / часть 2 / Пошаговое создание сайта в HTML.pptx
Скачиваний:
48
Добавлен:
18.05.2015
Размер:
1.2 Mб
Скачать

РАЗМЕРЫ ИЗОБРАЖЕНИЙ

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

Для этого у тега <img> существуют параметры

width - ширина height - высота.

Они задаются в пикселах или в процентах (процент от ширины экрана)

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

<img src="../images/fish.gif">

<img src="../images/fish.gif" width="50" height="50">

<img src="../images/fish.gif" width="25" height="25">

Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.

<img src="../images/fish.gif" align="left" hspace="20" vspace="20"> Остальное содержимое документа теперь не

прилипает к изображению.

АЛЬТЕРНАТИВНЫЙ ТЕКСТ

Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик. Неплохо было бы дать ему подсказку, что изображено на рисунке. Для этого используется параметр alt. Текст из этого параметра будет отображаться вместо картинки.

<img src="../images/fish.gif" alt="рыбка"> <img src="../images/fish1.gif" alt="рыбка">

ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ

ССЫЛКИ

Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера <a>. В примере наша картинка будет ссылаться на страницу html_example1.html, которая будет открываться в отдельном окне.

<body>

<a href="html_example1.html" target="_blank"> <img src="../images/fish.gif" alt="рыбка"> </a> </body>

Добавьте в тег <img> атрибут border="0", значением которого является толщина рамочки.

Вставьте фоновую картинку, отрегулируйте отступы от краев страницы

Все имена авторов сделайте

гиперссылками на соответствующие страницы Википедии

Вставьте картинки по тексту

Вставьте логотип ИРСО и сделайте

его гиперссылкой на сайт ИРСО.

ТАБЛИЦЫ

Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Любая таблица представляет собой набор строк и столбцов, на пересечении которых

Рассмотрим нашу таблицу с точки зрения HTML:

сама таблица задается с помощью тегов <table></table>,

у таблицы есть название - теги <caption></caption>,

таблица состоит из строк - теги <tr></tr>,

каждая строка состоит из столбцов - теги <td></td>,

столбцы имеют названия, расположенные в первой строке - теги <th></th>.

<table>

<caption>Название таблицы</caption> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><td>11</td><td>12</td><td>13</td></tr> <tr><td>21</td><td>22</td><td>23</td></tr> <tr><td>31</td><td>32</td><td>33</td></tr>

</table>

Соседние файлы в папке часть 2