✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по HTML, HTML5 ›› Вставка картинки в HTML

Вставка картинки в HTML

Часто при работе с сайтами требуется вставка картинки в HTML. В данном уроке мы научимся размещать изображения на страницах сайта и познакомимся с атрибутами, которые отвечают за форматирование изображений. Для вставки изображений на HTML страницу используется специальный тег <img> (от англ. «image», изображение). Данный тег имеет определенные атрибуты.

Вставка картинки в HTML

Как делается вставка картинки в HTML?

Рассмотрим вставку картинки на странице с использованием трех атрибутов на примере. HTML код страницы будет иметь следующий вид:

<img src="картинка.jpg" width="300" height="250">

Атрибут «src» (от английского «source», источник) указывает место, где хранится наше изображение. В данном случае картинка лежит в корневой категории, поэтому мы не прописывали ей адрес. В случае, когда картинка находится не в корневой категории, необходимо указать полный путь до нее.

Атрибуты «width» (ширина) и height (высота) — задают размер изображения соответственно по ширине и высоте. Выравнивание в данном случае будет по умолчанию по левому краю.

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

<p align="center"><img src="картинка.jpg" width="300" height="250"></p>

Теперь рассмотрим более сложный пример:

<p><img src="картинка.jpg" width="300" height="250" border="1" border-color="red" align="left" hspace="10" vspace="10" alt="Бабочка"></p>

Ширина изображения — 300 пикселей, высота — 250 пикселей, толщина рамки — 1 пиксель, цвет рамки — красный. Изображение обтекает текст справа, отступ от изображения до текста по горизонтали и вертикали составляет 10 пикселей.

В данном примере задействованы следующие атрибуты:

С помощью атрибута «border» можно задать рамку для изображения определенной толщины, «border-color» позволяет задать цвет этой рамки. Атрибут «align» прописан непосредственно в теге вставки изображения <img>, благодаря этому картинка обтекается текстом. Атрибуты «hspace» и «vspace» — это отступы от изображения до текста, соответственно, по горизонтали и вертикали. Атрибут «alt» позволяет указать описание (альтернативный текст) для картинки.

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

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

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

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru