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

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


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


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

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

Рассмотрим минусы занижения размеров картинки при помощи HTML:

• картинка сохраняет свои реальные размеры и, соответственно, вес – даже если вы сделаете огромадную картинку в несколько мегабайт весом, размерами с почтовую марку, грузиться она будет всеми своими мегабайтами.
• картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное.

Теперь плюсы занижения размеров:

• картинку можно вписать в дизайн, пожертвовав парой сантиметров, а при копировании ее на винт она сохранит свои размеры.

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