Wiki-учебник по веб-технологиям: HTML/Изображения ...

Главная | |

Вставка изображений в HTML

Картинки вставляются тегом <img src="/путь к картинке/название картинки . расширение картинки">.
Тег этот не «контейнерный», посему в закрывающей части не нуждается. Располагая этот тег внутри классической гиперссылки, мы можем добиться, чтобы при тычке по картинке осуществлялся переход по ссылке:

<a href="куда переходим при нажатии">
<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left"></a>

То есть картинка – не что иное, как обычная ссылка, в которую вставляется код с адресом и параметрами картинки:

<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left">

Все задействованные в коде теги вам уже без сомнения встречались в предыдущих главах, за исключением разве что hspace и vspace – эти два тега тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст впритык к картинке... Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height – если указать в них меньшие размеры, чем реально у картинки, можно вписать ее в любой практически дизайн.

Зачем это нужно? Почему бы не обрезать картинку графическим редактором – что намного более практично?!

Рассмотрим минусы занижения размеров картинки при помощи HTML:
Теперь плюсы занижения размеров:
Это нужно в редких случаях, когда вы вывешиваете картинку размерами большими, чем разрешающая способность монитора посетителя. И картинку в дизайн впишем и сохранится она на все 2040 на сколько там положено.