Изображения в HTML онлайн урок.



Синтаксис HTML позволяет добавлять на страницу изображения.
Наиболее распространенные форматы файлов изображений это:

  • GIF (Graphics Interchange Format) - используется как правило для небольших иконок с небольшим спектром цветов и прозрачностью

  • JPEG (Joint Photographic Experts Group) - используется для отображения полноценных изображений, например фотографий

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

  • SVG (Scalable Vector Graphics) - используется для создания векторной графики в формате XML.


Изображение (кроме SVG) вставляется в веб-страницу с помощью тега <img>. У него есть обязательный атрибут src (от английского source - путь, источник) и дополнительные атрибуты - alt (альтернативный текст), width (ширина) и height (высота), align - обтекание текста, title - подсказка при наведении курсора на изображение.

Для указания адреса изображения могут быть использованы либо абсолютные, либо относительные пути.

Абсолютный путь - это полный пусть в веб-ресурсу, который должен начинаться с указания протокола, например http://some-site.com/pic.jpg.

Относительный путь - это путь, который задается относительно некоторого каталога, например, корня сайта, текущей папки или папки уровнем выше. К примеру, /pic.jpg - пусть относительно корня сайта, pic.jpg - путь относительно текущей папки, ../hello/pic.jpg - путь относительно папки уровнем выше и картинка лежит в каталоге hello.

Рассмотрим несколько примеров. GIF может представлять из себя анимацию:

<img src='img/animation.gif' alt='Animtaion' title='This is animation gif' />


Animtaion


PNG, в отличии от JPG может иметь участки прозрачности:

<img src='img/fish.png' alt='Fish' title='his is transparent png' />


Fish


Для установки обтекаемости изображения другими элементами, используется атрибут align. В примере ниже рассмотрен случай, когда текст обтекает изображение справа, соответственно изображение "плавает" слева.

SVG - это отдельный тип изображений, который, в отличие от предыдущих форматов, не хранится в файловой системе, а генерируется во время работы скрипта. Изображение такого формата добавляется на страницу с помощью тега svg с рядом обязательных атрибутов:



Проверьте свои знания
Создать веб-документ, в котором будет некоторый текст, разбитый по абзацам. В первый абзац изображение планеты Земля, найденного в интернете. Текст должен обтекать изображение по правому его краю и ширина изображения должна быть 50.