Как вставить картинку в HTML документ. Тег IMG и его атрибуты

Эта статья целиком посвящается тегу IMG (англ. image — изображение) и его атрибутам. Вставка картинки в HTML, атрибуты изображения в документе, обтекание текстом и многое другое.

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

Базовый синтаксис

Понятие «синтаксис» относится как к русскому языку («правильно-писание», как говаривал Винни-Пух), так  и к языкам разметки и программирования.

HTML как язык разметки требует следовать определённым правилам — синтаксису. Для картинки они такие: Тег IMG обязательно имеет атрибут SRC — в нём указан путь и название файла-картинки, которую нужно вставить в HTML документ.

В данном случае — файл картинки — gift_box.png, и находится он в том же каталоге, что и сам HTML документ.

Атрибут width — задает ширину картинки в пикселях, атрибут height — задает высоту рисунка. Хотя они и не строго обязательны – их наличие позволить браузеру не тратить время на вычисление физических размеров картинки и он отобразит её гораздо быстрее.

Атрибут ALT – задаёт альтернативный текст для картинки. Если посетитель в браузере отключит показ картинок, он увидит прямоугольник (размерами с картинку), и в нём – этот альтернативный текст. Поэтому, в нём нужно кратко дать знать посетителю – что на картинке.

Задавать текст в атрибуте ALT – КРАЙНЕ рекомендуется к любому изображению на странице, несущий хоть какой-то смысл. А чисто декоративные картинки (виньетки), могут иметь пустой атрибут ALT.

ALT=""

Содержание атрибута ALT активно используется поисковыми системами и произносится голосовыми браузерами

Тег IMG – непарный и должен быть обязательно закрыт слешем (<IMG…/>).

Обтекание картинки текстом

Код для картинки, которую текст должен обтекать с правой стороны:

Атрибут ALIGN — задает выравнивание рисунка и способ обтекания текстом:

  • bottom— нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх картинки выравнивается по самому высокому элементу строки
Обтекание картинки текстом
Обтекание картинки текстом, атрибут ALIGN

Надо сказать, что в строгой версии HTML5 рекомендуется вместо этого атрибута, использовать его аналог в CSS-файле. Кроме этого, средствами CSS можно задать и нужные отступы между картинкой и текстом.

Если вам непременно хочется забежать «вперёд паровоза» – можете почитать об этом на сайте Влада Мержевича.

Распространённые ошибки

Не нужно масштабировать изображения с использованием атрибутов width и height – ни к чему хорошему это не приводит. Если вы пытаетесь увеличить маленькую картинку – сильно падает её качество и становятся видна пиксельная структура.

Ещё хуже – когда огромную (в пикселях) картинку пытаются уменьшить атрибутами width и height. «Вес» изображения в килобайтах (или мегабайтах?) – остается прежним и она очень долго может грузиться.

Все изменения физических размеров картинки проводятся в Adobe Photoshop, например. И значения width и height в HTML документе должны совпадать с её реальным размером в пикселях.

Не используйте в ALT тексте двойные кавычки и знаки препинания и не пишите слишком длинно.

Дополнительные атрибуты и индексация картинок поисковиками

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

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

Кроме этого – ваши картинки должны быть оригинальными, а не скачанными с других HTML – страниц.

Как сделать оригинальную картинку в Adobe Photoshop, я напишу в новом своем посте. Видеоурок об этом вы получите в почтовой рассылке. Подписаться можно в правом сайдбаре — форма вверху.

Метод получения HTML — кода для изображения

Иногда требуется по-быстрому получить HTML – код какой-либо картинки. Чтобы не тратить время на «набивку пальцев» на клавиатуре, я запускаю Adobe Dreamweaver (DW) и просто перетаскиваю картинку из панели «Files» в документ.

Остаётся только скопировать код в соответствующем окне DW.

Продолжение сериала о HTML

В следующей статье я буду писать о ссылках, УРЛах  и Поисковых Системах.

Поделиться этим:

Комментарии 1

  • align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута

Добавить комментарий

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