В этой статье мы расскажем вам о тех особенностях HTML и CSS, которые связаны с изображениями. Вы узнаете, как вставить их в HTML-документ. Также в статье приведена информация о том, как изменить параметры рисунка и организовать обтекание картинки текстом.
Сначала – о вставке изображения. Для этого существует тег "img", у которого есть несколько атрибутов. Основной из них - "src". В нём хранится адрес, из которого браузер сможет вставить картинку. Можно указать путь к изображению, уже сохраненному в компьютере, или дать ссылку на веб-ресурс.
Следующая немаловажная пара атрибутов – "width" (ширина) и "height" (высота). Они используются для того, чтобы вручную изменить размеры картинки (полезная опция для растяжения и сжатия изображения).
Далее следуют параметры "hspace" и "vspace" (расстояние от изображения до окружающего его текста). Ясно, что "hspace" – горизонтальный отступ, а "vspace" – вертикальный.
У тега есть такие атрибуты, как "alt" и "title". Они похожи между собой, так как назначением их является описание картинки. Но в "title" прописывается текст, который показывается при наведении мышки на изображение, а буквенное значение атрибута "alt" отображается в том случае, если картинку загрузить не удалось.
Существует еще несколько специфических атрибутов, присутствующих у большинства тегов. Это "accesskey", "class", "id" и "style". "Accesskey" задаёт сочетание клавиш, с помощью которого осуществляется доступ к объекту. "Class" и "id" – параметры, связанные с CSS. Они описывают то, к какому классу принадлежит картинка (или её идентификатор). "Style" – атрибут текста, позволяющий задать встроенный CSS-стиль изображения.
Одним из параметров, задающих внешний вид картинки, является "border". Он определяет толщину рамки вокруг объекта и может быть задан любым целым положительным числом (в пикселях).
Есть и другой мощный инструмент – CSS (значительно более универсальный). С его помощью можно гораздо эффективнее задать атрибуты тега, в том числе и обтекание картинки текстом. CSS позволяет определить параметры не только конкретного объекта, а и всех ему подобных. Например, если вы хотите задать отступы всех картинок в документе равными десяти пикселям, то достаточно подключить к нему CSS-файл с одной-единственной строчкой: "img { margin: 10px 10px 10px 10px; }" (на практике кавычки не нужны!).
А обтекание картинки текстом, например, по левому краю задаётся так: "img { align: left; }".
Кстати, для добавления CSS-кода вовсе не придется писать его в файле. Для этого в HTML предусмотрен тег "style", в который можно вставлять CSS-код. Но он будет работать только для данного документа (если нужно добавить один и тот же код в несколько HTML-файлов, то стоит создать отдельную таблицу стилей).
Теперь вы сможете "разбавить" сайт изображениями, воспользовавшись полезными свойствами тега, который за это отвечает. Смело применяйте изменение размеров или обтекание картинки текстом. Веб-страницы без графических составляющих - достаточно унылое зрелище, не правда ли?
