Очень часто при работе с сайтами нам надо вставить картинку на страницу. В html для вставки картинок используется специальный тег . Разберем основные для нас атрибуты которые имеют тег:

1. align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом;
2. alt — альтернативный текст для изображения, такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений;
3. border — толщина рамки вокруг изображения;
4. height — высота изображения;
5. width — ширина изображения;
6. src — путь к картинке;
7. hspace — горизонтальный отступ от изображения до окружающего контента;
8. vspace — Вертикальный отступ от изображения до окружающего контента.

В статье про HTML-редакторы я использовал несколько картинок, давайте в качестве примера возьмем одну из них, например скриншот программы SublimeText. Ссылка на эту картинку: https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png

Итак, в нашей рабочей папке создаем подпапку «Урок 2″, копируем туда наш файл, который мы сделали в прошлом уроке и добавляем в него тег <img> в атрибуте src которого содержится ссылка на выбранную нами картинку.

[crayon lang=»HTML»]

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

Это текст моей html-странички, а ниже картинка.

[/crayon]

Если мы сохраним эту картинку у себя на компьютере, то увидим, что она имеет довольно большой размер — 1600px x 903px. Для того чтобы изменить размеры картинки при выводе на нашей странице применяются атрибуты height и width. Эти атрибуты можно применять как вместе, так и по отдельности. Я задал ширину картинки при выводе на экран — 500px, а высоту задавать не стал — в этом случае браузер сам, пропорционально подберет высоту.

Теперь можно попробовать поменять местами теги <p> и <img> при этом задав атрибут align=»left» — изображение будет расположено у левого края страницы, а текст обтекать справа. А если задать атрибут align=»right», то изображение будет расположено у правого края страницы, а текст обтекать слева.

В случае когда текст обтекает справа мы можем заметить, что между картинкой и текстом нет отступа, давайте зададим этот отступ с помощью атрибута hspace=»20″. Теперь картинка слева и справа имеет отступ 20px.

С помощью атрибута border мы можем задать рамку вокруг изображения — border=»2″ — у картинки будет черная рамка с толщиной 2px. Цвет рамки мы можем изменить только с помощью css и о том, как это сделать я расскажу в следующих уроках.