Урок 10. Изображения в HTML

Привет! Тема сегодняшнего урока – изображения!

урок - изображения в HTML

Допустим у нас есть изображение размером 100х100. Называется файл “kartinka.jpg”. Сразу призываю вспомнить урок “Чистая структура проекта“, и скопировать изображение в папку “img” которую вы уже заранее создали (надеюсь).
И так, картинки в HTML вызываются единичным тегом:

<img />

Конечно же если мы вставим этот тег в код документа, ничего не появится. Мы не указали где размещена картинка. Путь к картинке указывается не так как в гипертекстовых ссылках т.е. тегом “href”. В случае с картинкой нужно использовать тег “src” (с англ. “source” – источник). И не забываем что картинка в папке “img”, и нужно правильно указать путь.

Вот так:

<img src="img/kartinka.jpg" />

Также обязательно указывайте альтернативный текст с описанием картинки. Задается так:

<img src="img/kartinka.jpg" alt="альтернативный текст" />

Альтернативный текст нужен для того, что если картинка каким-то магическим образом исчезнет или не загрузится, пользователь увидит название картинки, а не пустое место. Это важно.

Еще один момент! Картинка не обязательно должна быть именно у вас на сайте. Вы можете указать “источник”, например:

<img src="http://saddy.com.ua/kartinka.jpg" />

Таким образом вы можете использовать картинки которые “хостит” кто-нибудь другой.

ВНИМАНИЕ!!! Делать такое крайне не рекомендуется. Информация о вставке картинок с других сайтов предоставлена только для ознакомительных целей и лучшего понимания принципов HTML!

Есть много весомых причин почему так делать нельзя. Например, вы пишете пост в котором ставите ссылку на картинку которая на другом сайте. Через неделю этого сайта может не стать! Может владелец продал его, а может просто изменил тематику сайта. Картинка с вашего сайта также пропадет, а на ее месте останется ссылка на несуществующее место в сети! Для SEO это очень плохо.

Думаю статья пришла к концу. Подробнее о картинках расскажу когда будем верстать фрагмент сайта.

Любые вопросы можете задавать в комментарии :)

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>