Урок №5: изображения в HTML

---

Параметры вставки изображения в HTML страницу

• <img> - этот тег используется для вставки изображения на страницу, имеет единственный параметр src, который указывает путь к файлу вашей картинки. Картинка не обязательно должна находится на вашем компьютере, можно использовать url адрес любой картинки, которую вы нашли в интернете. Но стоит учесть, если сервер, на котором находится ваша картинка выключится, то и она перестанет отображаться.

Например: <img src="http://picture.com/tiger.png" align="left">. Благодаря значению align="left" картинка расположена слева, а текст обтекает ее справа. Если не указывать значение align, картинка по умолчанию будет слева, однако текст уже будет находиться под картинкой. Такой вид не особо привлекательный, поэтому лучше указывать значение align. Существуют следующие значения параметра align:

• left - картинка находится слева, а обтекающий ее текст - справа
• right - картинка находится справа, а обтекающий ее текст - слева
• top - изображение встраивается в строку так,что первая строка текста находится на одном уровне с верхним краем картинки, следующая строка уже будет под изображением.
• texttop - картинка выравнивается по самому высокому символу текста, следующая строка уже будет под изображением.
• middle - изображение выравнивается по центральной линии изображения, следующая строка уже будет под изображением.
• absmiddle - выравнивает изображение посередине текущей строки.
• bottom - выравнивание нижней границы изображения по основной линии текущей строки.
• absbottom - выравнивает изображение по самому низкому элементу текущей строки.

Если понадобиться запретить обтекание текстом необходимое изображение, следует использовать тег <br clear="all">, если понадобиться запретить обтекание только с одной стороны, вместо all, подставляете значение left или right, в зависимости от того, где необходимо запретить обтекание.

---

Изменение размера изображения

Иногда изображение не соответствует необходимой высоте или ширине, чтобы хорошо выглядеть на определенной странице. Конечно, существуют различные редакторы изображений, однако в HTML также можно настроить габариты изображения, с помощью следующих значений тега <img>:

• width - задает ширину изображения в пикселах или % от ширины экрана, 
• height - задает высоту изображения в пикселах или % от высоты экрана

Для примера создадим HTML документ с 3-мя одинаковыми картинками, но с разными габаритами:

<img src="путь к файлу"> <img src="путь к файлу" width="125" height="125"> <img src="путь к файлу" width="100" height="100">

Значительно быстрее, чем каждую картинку редактировать. Параметр align указан не был, поэтому текст начинается под изображениями.

---

Изменение промежутка между текстом и изображением

Не всегда красиво, когда текст обтекает картинку вплотную. Клавиша "пробел" в этом не поможет. Зато помогут значение тега <img>:

• hspace - задает горизонтальный отступ от изображения, задается в пикселах
• wspace - задает вертикальный отступ от изображения, задается также в пикселах

Например напишем код:
<img src="путь к файлу" align="left" hspace="70" vspace="10">
Теперь каждая новая строка текста
будет находиться на расстоянии
от изображения в 30 пикселей
по горизонтали и в 10 пикселей
по вертикали.
Также можно сравнить расстояние между текстом и картинкой здесь,
с расстоянием отступа текста от картинки, на которой изображен тигр.

---

Название изображения и его альтернативный текст

Вам наверное приходилось встречать изображения с каким-нибудь текстом, который всплывает, если навести на это изображение курсор мышки. В таком случае в теге <img>, задается значение параметра title.

Если у пользователя в браузере отключено отображение картинок или же по каким-то причинам данная картинка не отобразилась, то вместо картинки, в зависимости от браузера, появляется иконка. Альтернативный текст подсказывает таким пользователям, что изображено на этой картинке; текст будет написан на данной иконке. Чтобы задать альтернативный текст картинки необходимо в теге <img> задать значение alt. Синтаксис этих значений: <img src="http://picture/pic2LionKing.jpg" title="Король Лев" alt="Король Лев" align="right">
Правее изображена картинка данного кода.

Благодаря align="right" картинка расположена справа, а текст обтекает ее с левой стороны. При наведения курсора мышки на данную картинку, мы увидим текст заданный значением title - "Король Лев". Также данной картинке был задан альтернативный текст, так что в случае, если картинка по каким-то причинам не будет загружена - появится иконка с сообщением "Король Лев".

---

Добавление рамки изображения

Иногда изображение красивее смотрится в рамке. В этом поможет параметр border, он определяет, должна ли быть рамка вокруг изображения, а также задает ее ширину. Ширина рамки задается в пикселах.
Левее находится картинка с кодом:

<img src="http://pictures/boromir.jpg" hspace="30" align="left" border="6">

Данную картинку окружает черная рамка шириной в 6 пикселей. Кстати, даже если рамка вокруг изображения не нужна, рекомендуется указывать border="0". Изображения также можно использовать в качестве ссылки, а также вставлять в таблицы и фреймы (см. соответствующие темы).

Урок№4: Бегущая строка

Урок№6: Создание ссылок

Все уроки