Представить себе современный сайт без картинки — нереально. Кому-то такое даже может показаться глупостью, как это пустой сайт что ли? В этом материале мы рассказываем о том, как правильно использовать тег IMG, ведь именно благодаря ему добавляются изображения на сайт.

О картинках в HTML

   Примеры будут рассмотрены для пятой версии языка, но они будут работать и для более ранних. Узнайте более подробно про картинки в коде страницы - курсы html  

Вставляем картинку

   Чтобы вставить понравившуюся нам картинку в наш сайт, мы используем тег IMG. Этот тег всегда сопровождается двумя обязательными атрибутами. Один из них — это src не что иное, как путь к изображению. Второй — alt, это альтернативный текст, который загрузиться вместе графического файла. Этот атрибут может остаться пустым, но должен обязательно присутствовать.

   Атрибут title не обязательный, но с помощью него можно задать название, которе можно будет увидеть, если навести курсор на картинку. Если картинки складывать туда же, куда и страницу, то можно не указывать весь путь к файлу, а только название загружаемого файла.

   Образец-пример: (<img src="/картинка.jpg" alt=") текст, которые увидит пользователь, если не загрузиться картинка" title="название">

   Есть небольшие нюансы, в зависимости от того, откуда вы будете вставлять картинку. Будьте в этом вопросе максимально внимательны.

Ширина и высота

   В первых версиях HTML для того, чтобы задать эти параметры мы использовали атрибуты width и height. Сейчас, как вы знаете, все что касается визуального отображения задаются с помощью CSS в атрибуте style. Эти параметры можно задать в разных метриках, обычно все же измеряют в пикселях:

   Образец-пример: (<img src="/картинка.jpg" alt="текст, которые увидит пользователь, если не загрузиться картинка"style="width: 100px; height: 50px/>)

   Если эти параметры не задать, то картинка отобразится в своем оригинальном размере. Если вы укажете размеры больше, чем оригинальные — браузер растянет изображение, но сложно будет гарантировать хорошее качество. Если же указать размеры меньше, то соответственно браузер уменьшит картинку до заданных размеров. Если вы боитесь сильно исказить картинку, то воспользуйтесь такой хитростью: указывайте только 1 параметр, тогда картинка по второму будет изменяться пропорционально.

   Эти параметры можно задавать не только в пикселях, но и в процентном соотношении.

   По умолчанию контент отражается перед изображением. Для такого чтоб контент обтекал фотку употребляется CSS свойство float, которое подменяет align. Ежели мы желаем чтоб картина была слева от слова, а контент обтекал ее справа и снизу, то тогда задается смысл left для CSS характеристики float, а ежели картинка обязана быть справа, то тогда задается свойство right.

Как сделать картинку ссылкой на страницу

   Для такого чтоб картинка стала гиперссылкой ее необходимо элементарно вставить внутрь гиперссылки, внутрь тега <a>...</a>, по умолчанию ваше изображение будет внутри рамки, чтобы ее убрать, надо установить значение 0 px для рамки.

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