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

Автор: | 20 февраля, 2020

Изображения – это важнейший элемент любого сайта.

Без изображений сайт будет не так интересен пользователям.

Наиболее часто используются три типа файлов изображений.

GIF (Graphics Interchange Format) – имеет 256 цветов, поэтому является более подходящим для изображений с небольшим количеством оттенков.
JPG / JPEG (Joint Photographic Experts Group) – формат изображений, который использует до миллиона цветов. Применяется для фотографий и качественной графики.

PNG
(Portable Network Graphics) – данный формат использует более миллиона цветов, при этом можно уменьшать вес изображения и сохранять качество изображения, что очень немаловажно.

Для того, чтобы вставить изображение в html код используется одиночный тэг:
<img srс=”kartinka.jpeg”>
где kartinka.jpeg – это название файла изображения. Для удобства картинки размещают в отдельной папке, например images.
Если картинка находится в папке images, то html код будет такой:
<img srс=”images/kartinka.jpeg”>

Если на другом сайте в папке images то будет так:
<img srс=”//wm-port.com/images/kartinka.jpeg>

Попробуем вставить на страницу такое изображение:

<img src=”https://wm-port.com/images/kartinka.jpeg”>

В результате мы увидим:

Вставка изображения

В данном случае нам понадобились:
Элемент IMG – не имеет закрывающего тега. 
Атрибут SRC – который указывает путь где находится изображение.

Также существуют важные атрибуты:

ALIGN – используется для выравнивания изображения по горизонтали. Имеет значения LEFT и RIGHT. С помощью этих значений можно регулировать обтекание текста. Если картинку выравнять по левому краю, то текст будет обтекать её справа, или наоборот, картинку можно расположить по правому краю и текст будет обтекать слева.

HSPACE 
(горизонтальный отступ) и VSPACE (вертикальный отступ) – это отступы от изображения до других элементов текста.

HEIGHT
(высота) и WIDTH (ширина) –  задают размер картинки. Если задать реальные размеры изображения, то это поможет уменьшить время загрузки страницы. 

Вот еще два часто используемых атрибутаALT и TITLE.

ALT
– отображает текст в случае если если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения:

<img src=”https://wm-port.com/images/kartinka.jpeg” alt=”Щука”>

TITLE – обозначает заголовок изображения и при наведении на него появляется надпись с текстом из атрибута title:

<img src=”https://wm-port.com/images/kartinka.jpeg” title=”Щука” >

Попробуйте навести указатель на изображение:

Щука

Также можно картинку сделать ссылкой следующим образом:

<a href=”//wm-port.com”>
<img src=”https://wm-port.com/images/kartinka.jpeg” title=”Щука”>
</a>

Кликнув по изображению Вы перейдете на сайт, которой указан:

Изображение ссылкой

Border – для создания рамки вокруг изображения, значение задаётся в пикселях. Сделаем рамку толщиной 2 пикселя:

<img srс=”images/kartinka.jpeg” style=”border:2px;”>

 Мы увидим:

картинка

Следующая страница – Цвет фона и текста

Предыдущая – Работа с ссылками в html

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *