Изображения в HTML

Картинки в html

Здравствуйте дорогие друзья! В этой статье мы поговорим о том, как работать с изображениями в HTML. Вы видели изображения уже на многих сайтах. Ниже приведу пару примеров, где они применяются:

  • Фон сайта
  • В виде логотипа на сайте
  • В виде персонального аватара пользователя.
  • В виде баннера
  • В виде заголовка статьи
  • По необходимости в статье
  • И еще во много других случаев.

И так, думаю, что Вы поняли, что это важный элемент для сайта и безусловно, Вы должны знать как вставить изображение на сайт и как с ней работать.

Изображение создается с помощью тега <img />. Это одинарный тег, потому что изображение не может начаться в одной части страницы и заканчиваться в другой. Для этого тега существуют два обязательных атрибутов это атрибут src и атрибут alt. Через атрибут src мы указываем путь к картинке. Атрибут alt используется в первую очередь для того чтобы вывести на странице текст, который указан в значение данного атрибута, в том случае если картинка не отображается в браузере. Картинка может не отображаться в браузере по одной из двух причин:

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

Также атрибут alt используется для оптимизации картинок для поисковых систем.

По стандарту XHTML требуется, чтобы изображения была внутри абзаца, иначе код страницы будет не валидным. Вот пример вставки изображения на странице:

<h3>Вставка изображения на сайт</h3>
<p>
    <img src="images/city.jpg" alt="Город" />
</p>

Обратите внимание на путь к картинке. Картинка находится в папку images, поэтому мы написали такой путь images/city.jpg.
Смотрим на результат в браузере:

вставка-изображения-на-страницу

Но, мы видим, что изображение вывелась на странице в полном размере, что вызовет неудобства для пользователей. Для того чтобы решить данную проблему мы должны указать ширину изображения, через атрибут width, высота подстраивается автоматически пропорционально заданной ширины.
Задаем ширину для изображения, примерно 600px.

<h3>Вставка изображения на сайт</h3>
<p>
    <img src="images/city.jpg" alt="Город" width="600" />
</p>

Смотрим что получилось:

задаем-ширину-для-изображения

Таким образом, мы подгоняем изображение под нужным размером.
Для тега img существует еще один необязательный атрибут title. Данный атрибут выводит всплывающий текст над изображением, когда мы вставим курсор мыши на данное изображение.
Рассмотрим небольшой пример.

<h3>Shrek</h3>
<p>
    <img src="/images/img-articles/vsplyvayushhij-tekst-nad-izobrazheniem.jpg" alt="Shrek" title="Shrek" />
</p>

Смотрим на результат:

Использование атрибута title

На этом, пожалуй, все. Теперь Вы знаете, как вставить изображение на сайт и как с ней работать. Заметьте, что это важный элемент, и вы обязаны его знать. Желаю всем успехов!

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu920@mail.ru. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2015-03-23 11:59:07