Войти
s-lub » Учебники » HTML » Вставляем изображения в HTML документ

Вставляем изображения в HTML документ

Вставляем изображения в HTML документ

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

Для сайтов в основном используют изображения трёх типов:
• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

Краткая информация о форматах изображений:

GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым кол-вом оттенков. Этот формат поддерживает прозрачность изображений.

JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков).

PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.

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

Самый простой пример вставки изображения в HTML документ:

<img src="html.jpg">

Как вы заметили из образца, элемент img не требует закрывающего тега, а атрибутом является (сокращение от source - положение) который указывает, где находится изображение. Можно вставлять изображение из любых папок или даже с любых других сайтов, главное правильно указать адрес картинки.

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

<img src="/img/html.jpg">
<img src="домен сайта/img/html.jpg">

На всех предыдущих примерах мы не использовали атрибутов и изображение в таком случае будет отображаться в полную величину и том месте текста куда мы её вставляем:

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

ALIGN

ALIGN - указывает способ выравнивания картинки по левому или правому краю. Является необходимым свойством для обтекания картинки текстом. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева).
Пример:

<p align="justify"> На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения изменяться не будет, отступов между изображением и текстом так же не будет. Для удобства и более понятного отображения текст мы выровняли по ширине. <img src="html.jpg" align="right">На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения изменяться не будет, отступов между изображением и текстом так же не будет. Для удобства и более понятного отображения текст мы выровняли по ширине. На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения изменяться не будет, отступов между изображением и текстом так же не будет. Для удобства и более понятного отображения текст мы выровняли по ширине. </p>

HSPACE и VSPACE

HSPACE и VSPACE – устанавливает отступы в пикселях по горизонтали и по вертикали от картинки до текста или других элементов сайта. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.
Пример:

<p align="justify"> На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения изменяться не будет, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. <img src="html.jpg" align="right" hspace="15" vspace="15" > На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения изменяться не будет, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения изменяться не будет, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. </p>

HEIGHT и WIDTH

HEIGHT и WIDTH – устанавливают высоту и ширину изображения в пикселях. Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных устройствах (с медленным интернетом) это смотрится просто ужасно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. Так же не рекомендуется искажать реальные размеры картинки.

Пример:

<p align="justify"> На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. <img src="html.jpg" align="right" width="150" height="150" hspace="15" vspace="15" > На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. </p>

ALT

ALT – текст прописанный в этом атрибуте будет вставлен на место изображения если само изображение по каким-то причинам не загрузилось. В качестве значения задается текст с описанием изображения.

Пример:

<p align="justify"> На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. <img src="html.jpg" alt="создать сайт HTML" align="right" width="150" height="150" hspace="15" vspace="15" > На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. </p>

TITLE

TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title.

Пример:

<p align="justify"> На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. <img src="html.jpg" title="создать сайт HTML" alt="создать сайт HTML" align="right" width="150" height="150" hspace="15" vspace="15" > На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения будет 150 на 150 пикселей (изображение из-за нарушения пропорций будет немного искажено, отступ между изображением и текстом будет 15 пикселей. Для удобства и более понятного отображения текст мы выровняли по ширине. </p>

Как сделать изображение ссылкой

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

<a href="https://s-lub.ru" > <img src="html.jpg"></a>

Border

Border – этот атрибут делает рамку изображения. Не будет углубляться, а просто покажем пример:

<p align="justify"> На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения не установлен, отступ между изображением и текстом не установлен, зато установили рамку толщиной 3 пикселя. Для удобства и более понятного отображения текст мы выровняли по ширине. <img src="html.jpg" align="right" border="3" > На данном примере картинка будет выравниваться по правому краю и будет обтекать текстом, размер изображения не установлен, отступ между изображением и текстом не установлен, зато установили рамку толщиной 3 пикселя. Для удобства и более понятного отображения текст мы выровняли по ширине. </p>

Теперь мы закончили и с изображениями в тексте.


Все статьи по теме HTML:

- Введение и основы HTML
- Структура WEB документа
- Синтаксис в HTML
- Пробуем создать первую страничку
- Оформление текста в HTML (часть 1)
- Оформление текста в HTML (часть 2)
- Создание списков в HTML
- Ссылки в HTML
- Вставляем изображения в HTML документ
- Цвет теста и фона в HTML
- Создаём таблицы в HTML
- Что и для чего прописывать в HEAD
- Заключение и подведение итогов по всем пройденным элементам и атрибутам