создай свой первый сайтСайт создан на сервисе Яндекс.НародСайт создан на сервисе Sites.GoogleСайт создан на сервисе ucozСайт создан на html/css


Вставка изображения на html сайте. Тег img и его атрибуты

Вставка изображения осуществляется с помощью тега <img>. В значении атрибута src (от source - положение) указываете месторасположение картинки.

Существует несколько способов вставки изображения.
Например, если вы хотите вставить картинку (файл kartinka.jpg), которая находится в папке images (отсчет идет относительно папки с веб-страницей - как в примере с относительными ссылками), то пишем следующее:
<img src="images/kartinka.jpg">
Файл kartinka.jpg находится в папке images, которая расположена в той же папке, что и данная страница.

Если же вы размещаете изображение с указанием сайта, на котором она находится, то адрес будет выглядеть немного по-другому (как в примере с абсолютными ссылками).
<img src="http://1sait.com/images/kartinka.jpg">

С помощью атрибутов можно задавать размеры (высота - height, ширина - width), отступы изображения от текста (по горизонтали - hspace, по вертикали - vspace), выравнивание (align) картинки на странице.
Пример:
<img src="../logotype.png" alt="логотип сайта 1sait.com" width="104" height="100" hspace="5" vspace="5" align="left">

Результат: логотип сайта 1sait.com изображение logotype.png (находится в папке на уровень выше той, где находится данная страница) шириной 104 пиксела и высотой 100 пикселов выровнено слева с отступами от текста по 5 пикселов по горизонтали и вертикали. Прописан также атрибут <alt>, который содержит текст "логотип сайта 1sait.com". Он отображается в окне обозревателя, если в настройках отключен показ картинок и также этот текст важен для поисковых систем (в особенности для поиска по картинкам).


<a href="http://1sait.com"><img src="../logotype.png" alt="логотип сайта 1sait.com" width="104" height="100" hspace="5" vspace="5" border="0" align="left"></a>

логотип сайта 1sait.com Результат: А данная картинка является гиперссылкой (<a href="http://1sait.com">...</a>). Нажатией по ней приведет к перенаправлению пользователя на главную страницу сайта 1sait.com. Также, у атрибута border стоит значение "0", что означает отсутствие границы у картинки, являющейся гиперссылкой.

Источник урока: 1sait.com