Неотъемлемым элементом каждого сайта являются изображения. Они позволяют разбавить текст графическими элементами, сделать его более ярким, проще читаемым и интересным для посетителей.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Из изображений состоит интерьер сайта, его дизайн и непосредственно для отображения изображений в HTML-формате применяется тег img, который является единственным в своем роде и не имеет аналогов.
Особенность тега img заключается в его самостоятельности, он не требует дополнительного закрывающего тега и считается полностью одиночным, не зависящим от посторонних элементов.
В паре с тегом img используется атрибут src, который делает ссылку на адрес изображения, задает к нему путь — относительный или абсолютный.
Также, к тегу img может быть применено дополнение alt=»описание», которое не относится к обязательным элементам и используется по желанию веб-програмиста.
Это дополнение необходимо для того чтобы в случае некорректного отображения изображения, пользователь смог увидеть описание графического элемента на выведенной странице.
Название HTML-тега img берет начало от английского слова image, которое в переводе обозначает — изображение и очень важно понимать, что сам тег img не ставит изображение на сайт напрямую, он просто содержит в себе скрытую ссылку на указанный графический элемент, а также создает пространство необходимого размера для него и его формата.
Графическая составляющая изображений для работы с тегом img должна быть представлена в JPEG, PNG или GIF форматах.
Формат JPEG актуален для фотографий, так как его расширение позволяет отображать огромную цветовую гамму с миллионами оттенков и градиентов, но он имеет небольшой недостаток — прозрачные области здесь отсутствуют.
Формат GIF применяется для простых графических элементов, к примеру, для создания логотипов. Он не подходит для фотографий, но имеет прозрачные области, легко сжимается до маленьких размеров и поддерживает анимационные эффекты, в чем и заключается его преимущество.
Формат PNG является чем-то средним между JPEG и GIF, так как способен отображать широкую цветовую гамму и содержит прозрачные области, но в этом и скрывается его недостаток — изображения этого формата имеют большой размер.
Атрибуты применимые к HTML-тегу img
Первый атрибут, который применим к тегу img и отвечает за выравнивание рисунка, является align=»параметр», именно он имеет непосредственное влияние на обтекаемость рисунка и может быть использован в паре с такими параметрами как:
— выравнивание картинки по левому или правому краю, соответственно left или right;
— выравнивание картинки по средней базовой линии на заданной строке — middle;
— выравнивание верхних граней картинки по наиболее высокому элементу заданной строки — top;
— выравнивание самых нижних граней картинки в соотношении с окружающим текстом — bottom.
Второй атрибут тега img качественно выполняет уже две прямые задачи — выводит скрытый за изображением текст в случае непредвиденных неполадок и выдает информационную подсказку при прямом наведении на конкретное изображение, он прописывается как alt=»текст».
Этот атрибут играет роль в ранжировании изображений поисковыми системами Yandex и Google, поэтому его рекомендуется присваивать всем изображениям.
Третий атрибут тега img отвечает за толщину рамки которая может быть применена для обтекания изображения, он измеряется в пикселях и прописывается как border=»число».
Четвертый атрибут тега img используется для определения цвета рамки обтекающей выбранное изображение, он прописывается как bordercolor=»цвет» и актуален только в тех случаях, если атрибут border имеет значение больше чем ноль.
Пятый атрибут тега img отвечает за определение высоты выбранного изображения, которая может быть выведена в пикселях или процентах и прописывается как height=»число».
Шестой атрибут тега img необходим для определения ширины изображений и также соизмеряется в пикселях или процентах, а прописывается как width=»число».
Седьмой атрибут тега img определяет отступ изображения по горизонтали от прочих объектов формата html. Он прописывается как hspace=»число» и соизмеряется в пикселях.
Восьмой атрибут тега img определяет отступ изображения по вертикали от прочих объектов формата html, прописывается как vspace=»число» и соизмеряется в пикселях.
Девятый атрибут тега img позволяет присвоить изображению класс, что порой бывает необходимо для определения стилей css class=»имя класса».
Важность HTML-тега img в работе с изображениями — безусловна. Он позволяет осуществлять различные деформации изображений, перемещать их в среде текстовых документов и делать все, чтобы ваш сайт казался более насыщенным, интересным и конечно же привлекательным для посетителей.