В зависимости от положения изображения различают разные способы их выравнивания. Так, рисунок может выравниваться по правому или левому краю окна браузера или, если он встраивается непосредственно в текстовую строку, по базовой линии текста.
Для встраивания изображения в документ используется элемент img, имеющий два обязательных атрибута — src и alt. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив img внутрь a.
Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius. К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной.
Подрисуночная подпись — это текст, который является комментарием к рисунку и его описывает. Такая подпись важна, поскольку она привлекает внимание читателя к иллюстрации и даёт больше информации об изображении. У элемента img существует, конечно, атрибут title, который задаёт текст всплывающей подсказки, но чтобы её получить, приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и, соответственно, более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться сверху или сбоку от рисунка, если это продиктовано соображениями вёрстки и дизайна.
Для отправки формы на сервер применяется кнопка Submit, которая имеет слабые средства по настройке своего вида в сравнении с рисунками. Чтобы не ограничивать дизайн и расширить возможности по оформлению форм используется поле с изображением, представляющее собой рисунок и по своему действию аналогично кнопке Submit.
Возможность писать HTML и CSS с твёрдым пониманием веб-технологий — это большой опыт. Но по мере роста кода и трафика сайта, в игру вступает новый набор навыков, тот, который является чрезвычайно важным как во время разработки, так и для пользовательского опыта. Знание основ производительности и организации сайта может оказать большое значение.
Для добавления вокруг изображения цветной рамки применяется стилевое свойство border. В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов img.
Приём, когда один рисунок меняется на другой при наведении на него курсора мыши, называется эффект перекатывания, или rollover. Смену картинок можно сделать с помощью скриптов или стилей, но нужно помнить о некоторых моментах.
Настало время для другого упражнения, которое покажет вам философию вёрстки более сложных сайтов на HTML5. Мы постараемся представить следующий пример в виде статьи блога.
Для добавления иллюстраций, графиков, диаграмм, фотографий применяется элемент figure. Его содержимое не ограничивается изображениями, допустимо вставлять видео, примеры кода, даже текст. Внутри figure при желании добавляется заголовок с помощью элемента figcaption до или после содержимого.