✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов 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-документ стоит очень часто, это совсем не сложно. Однако, если вы вдруг забыли как это делается, то наш урок окажется весьма кстати.

Подпишись и будь в курсе всех событий!

ВКонтакте Одноклассники Twitter

Поддержать проект и поблагодарить автора

Читайте также:

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

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

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

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