Пятница, 18 Января 2013 15:10

Тег img, картинка на HTML странице

Written by 
Оцени эту запись
(3 Голоса)

При помощи тега img можно вставить картинку на HTML страницу, задать ее размеры и описание. Картинки вставляют в статьи для иллюстрации их тематики, используют для фотогалерей или для отображения фото пользователя. Картинки могут быть статическими (png или jpg) или динамическими (gif). Из картинки можно сделать баннер, вставив ее в ссылку.

 

Вставить картинку на HTML страницу можно при помощи такой строки кода:

 

<img alt="" src="/images/stories/html_code2.jpg">

 

Здесь <img> - это сам тег, а alt="" и src="/" - его атрибуты.

 

Результат этого кода:

 

Тег img, картинка на HTML странице

 

Тег <img> пустой, он не содержит внутри информации и не имеет закрывающего тега. 

 

Для XHTML тег img нужно его закрывать внутри:

 

<img alt="" src="/images/stories/html_code2.jpg" />

 

Перед слешем пробел ставить обязательно.

 

Для тега img применимы все глобальные атрибуты вроде id, class, style, tabindex и другие.

 

Единственным обязательным атрибутом является src, который задает путь к картинке:

 

<img alt="" src="/images/stories/html_code2.jpg">

 

Здесь атрибут src равен "images/stories/html_code2.jpg". Это значит, что картинка, описанная в теге img, называется html_code2, ее формат .jpg и лежит она в папке images, которая находится в корневой папке. То есть, по сути, картинка не вставляется непосредственно на страницу. Но на странице есть ссылка на нее в атрибуте src.

 

Второй по значимости атрибут для <img> - alt - альтернативный текст. Его задавать не обязательно, но очень желательно. Альтернативный текст выводится на месте картинки, если она по какой-то причине не отображается. К тому же, альтернативный текст считывается программами для просмотра веб-страниц для людей с ограниченными возможностями, требуется по юзабилити(по той же причине), валидации(не для всех версий) и применяется для SEO-оптимизации (должен описывать содержимое страницы, тему статьи). 

 

<img alt="Тег img, картинка на HTML странице" src="/images/stories/html_code2.jpg">

 

Атрибут alt может содержать название статьи, название раздела, описание содержания картинки. По атрибуту alt и его соответствию теме страницы, на которой расположена картинка в img, эте страницу могут искать поисковые системы. 

 

Вы можете спросить, зачем нужно задавать альтернативный текст для картинок, которые используются для оформления страницы? Ответ прост - для оформления страницы не нужно использовать картинки. Картинки в теге img должны использоваться только по их прямому назначению - иллюстрировать статью, например. А для оформления страницы следует использовать нейтральные элементы span, div с фоновыми картинками. Именно так делаются фоны сайта или информационных блоков, иконки, стилизированные пункты меню и т. д. 

 

Картинке можно задавать размеры при помощи атрибутов width(ширина) и height(высота) тега img. Но размеры картинки можно также задавать в CSS стилях:

 

img {

      width: 164px;

      height: 233px;

}

 

Если размеры не заданы, картинка будет отображаться в своем реальном размере. Чтобы сохранить пропорции картинки, нужно задавать ее точные размеры или только один из размеров (второй подстроится):

 

img {

       width: 100px;

}

 

 

 

Задание размеров картинки не обязательно, но это может ускорить загрузку страницы. Картинки загружаются дольше, чем текст. Если браузер будет заранее знать размер картинки, он сразу зарезервирует для нее место до ее загрузки и окружающий ее контент не будет "прыгать". Кроме того, если картинка по какой-то причине не отображается, ее отсутствие не сломает дизайн и структуру страницы.

 

Также можно задать картинке рамку в атрибуте border:

 

 <img alt="" src="/images/stories/html_code2.jpg" border="2" />

 

 

 

Атрибут align задает выравнивание картинки - слева или справа:

 

 

<img alt="" src="/images/stories/html_code2.jpg" align="right" />

 

Результат:

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

 

 

Но атрибуты border и align тега img не поддерживаются HTML5. Потому лучше выравнивание и границы задавать в CSS стилях.

 

Последний атрибут, который можно применить к картинке img - usemap, который указывает на элемент map, создающий активные области на картинке. Таким образом можно сделать, например, кликабельную карту города. Для этого нужно вставить картинку карты в тег img и прописать в элементе map районы по координатам. 

 

Через тег img можно задавать картинки в форматах gif, png(png-8 и png-24), jpg.

 

Картинке можно задавать фон, но он будет виден только на прозрачных областях картинки:

 

 

По стандарту XHTML картинку нужно вписывать в блочный элемент div или p, так как элемент img явялется строчным.

 

Картинку можно сделать ссылкой, если поместить ее внутрь тега <a>:

 

<a href="http://kate-land.net" title="Главная страница сайта Kate-Land"><img alt="" src="/images/stories/html_code2.jpg" /></a>

 

Картинка стала ссылкой на главную страницу сайта Kate-Land:

 

 

 

Стандартный CSS стиль для картинки:

 

img {

      display: inline-block;

}

 

 

Пример использования картинки:

 

 

Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari. Подробнее в статье Браузеры, под которые нужно делать верстку

 

Что такое HTML

 

Версии HTML

 

На данным момент актуальны такие версии HTML:

 

  • HTML 4 (разработан в 1997 году)
  • XHTML (является расширением HTML4 на основе XML)
  • HTML5 (находится в стадии разработки, но уже пользуется большой популярностью)

 

Структура HTML документа

 

Каждый HTML документ должен начинаться со строки <!DOCTYPE ...>, которая указывает на версию HTML и строгость написания и использования HTML элементов (тегов).

 

 

Полезные статьи:

Пропорции картинки CSS

Оптимизация изображений и особенности PNG-формата

Одинаковые размеры картинок для списка новостей

WebKit фильтры - grayscale, sepia, saturate, hue-rotate, invert, brightness, contrast, blur

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов