Изображения – это важнейший элемент любого сайта.
Без изображений сайт будет не так интересен пользователям.
Наиболее часто используются три типа файлов изображений.
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
