Основы HTML, добавление изображений

цвета html

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

Широкое распространение для веб-графики получили два формата графических файлов — GIF и JPEG. В основном за счет их многофункциональности, универсальности и небольшого объема исходных файлов.

Выше я разместил изображение всем известной Шарлиз Терон. Что мне потребовалось для этого простого действия? Да просто написать следующее:

<p align="center"><img src="Charlize Theron.jpg" width="225" height="260" border="0"></p>

Файл изображения (в примере - Charlize Theron.jpg) должен находиться в одной папке с шаблоном сайта. Это обязательное условие для написанного выше кода.

Такие параметры тэга "img", как "width" и "height" задают соответственно ширину и высоту изображения в пикселях. В моем примере они соответствуют реальному размеру изображения. Ширину и высоту рисунка можно указать произвольно, и браузер подгонит изображение под указанный размер.

Рамка вокруг изображения. Сразу хочу сказать, что изображение можно сделать ссылкой. Для этого оно помещается между тэгами <a></a>. В этом случае вокруг рисунка браузер автоматически устанавливает рамку, цвет которой совпадает с цветом ссылок. Но рамку можно добавить самостоятельно, воспользовавшись параметром border тега IMG.

Пишем <img src="Charlize Theron.jpg" width="225" height="260" border="4" style="border-color: yellow">

Толщина рамки всегда устанавливается в пикселах, поэтому в примере параметру border присваивается число 4 без указания единиц измерения. Чтобы убрать рамку, следует задать нулевое значение у параметра border.

Также в примере с помощью стилей мы задали цвет рамки желтым.

Фоновый рисунок. В качестве фона можно использовать любое подходящее для этого изображение в формате GIF, JPEG или PNG. Если вы хотите добавить фоновый рисунок на веб-страницу, следует воспользоваться параметром background тега BODY. В качестве аргумента параметра background принимается путь к графическому файлу. Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

<html>
<head>
<title>Название сайта</title>
</head>
<body bgcolor="white" text="black" background="Charlize Theron.jpg">
<p>Текст</p>
</body>
</html>

По умолчанию фоновое изображение заполняет собой всю рабочую область веб-страницы. Изменить эту особенность можно только с помощью стилей. Атрибут "background" позволяет задать одновременно цвет фона, фоновое изображение, устанавливает положение рисунка, указывает, фиксировать фон или нет, а также определяет, как будет повторяться изображение.

<html>
<head>
<title>Название сайта</title>
<style type="text/css"> (используем стили)
BODY
{background: (фон под текстом)
white; (Цвет фона)
url(Charlize Theron.jpg); (Путь к файлу с рисунком фона)
right top (Положение в правом верхнем углу)
no-repeat (Не повторять рисунок)
fixed } (Зафиксировать фон)
</style>
</head>
<body>
<p>...</p>
</body>
</html>

Зафиксировать фон – это значит, что при любой прокрутке вэб-страницы вниз, изображение остается в окне браузера. Если эта функция вам не нужна, вместо fixed укажите scroll.

Вместо no-repeat можно указать repeat — повторяемость по вертикали и горизонтали, repeat-x — только по горизонтали, repeat-y — только по вертикали.

При указании положения фонового изображения в окне браузера помимо right и top можно также использовать параметры center, left, bottom (основание).