Логотип

Как создать сайт

Всё что нужно для создания сайта!

HTML-тег для картинки


Неотъемлемым элементом каждого сайта являются изображения. Они позволяют разбавить текст графическими элементами, сделать его более ярким, проще читаемым и интересным для посетителей.

Из изображений состоит интерьер сайта, его дизайн и непосредственно для отображения изображений в 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 в работе с изображениями - безусловна. Он позволяет осуществлять различные деформации изображений, перемещать их в среде текстовых документов и делать все, чтобы ваш сайт казался более насыщенным, интересным и конечно же привлекательным для посетителей.

Подсказка:

Сайт нужно делать для людей но в то-же время не забывать о поисковых системах.

Курс ещё не готов, но подписчики получат его первыми - как только работа будет закончена. На данный момент 22.06.2018 записано 19 теоретических уроков и 0 практических. Теоретический курс Готов! "Как создать, настроить, наполнить и раскрутить сайт на uCoz"