Изображения - это важнейший элемент любого сайта.
Без изображений сайт будет не так интересен пользователям.
Наиболее часто используются три типа файлов изображений.
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="/images/kartinka.jpeg">
В результате мы увидим:
В данном случае нам понадобились:
Элемент IMG - не имеет закрывающего тега.
Атрибут SRC - который указывает путь где находится изображение.
Также существуют важные атрибуты:
ALIGN - используется для выравнивания изображения по горизонтали. Имеет значения LEFT и RIGHT. С помощью этих значений можно регулировать обтекание текста. Если картинку выравнять по левому краю, то текст будет обтекать её справа, или наоборот, картинку можно расположить по правому краю и текст будет обтекать слева.
HSPACE (горизонтальный отступ) и VSPACE (вертикальный отступ) - это отступы от изображения до других элементов текста.
HEIGHT (высота) и WIDTH (ширина) - задают размер картинки. Если задать реальные размеры изображения, то это поможет уменьшить время загрузки страницы.
Вот еще два часто используемых атрибута - ALT и TITLE.
ALT - отображает текст в случае если если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения:
<img src="/images/kartinka.jpeg" alt="Щука">
TITLE - обозначает заголовок изображения и при наведении на него появляется надпись с текстом из атрибута title:
<img src="/images/kartinka.jpeg" title="Щука" >
Попробуйте навести указатель на изображение:
Также можно картинку сделать ссылкой следующим образом:
<a href="//wm-port.com">
<img src="/images/kartinka.jpeg" title="Щука">
</a>
Кликнув по изображению Вы перейдете на сайт, которой указан:
Border - для создания рамки вокруг изображения, значение задаётся в пикселях. Сделаем рамку толщиной 2 пикселя:
<img srс="images/kartinka.jpeg" style="border:2px;">
Мы увидим:
Следующая страница - Цвет фона и текста
Предыдущая - Работа с ссылками в html