Работа с изображениями - тег img.
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Фоновые изображения
Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body>атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера.
Пример кода:
<html>
<head>
<title>Фоновое изображение</title>
</head>
<body background="../images/fon.gif" bgcolor="pink">Здесь содержание документа
</body>
</html>
Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor.
Встраивание изображений
Для размещения на странице изображений используется тег <img>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения.
Пример кода:
<html>
<head>
<title>Тег img</title>
</head>
<body>
<img src="../images/fish.gif"> Остальное содержимое документа
</body>
</html>
Результат:
Остальное содержимое документа
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Для этого у тега <img> существуют параметры width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана)
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Пример кода:
<html>
<head>
<title>Тег img</title>
</head>
<body>
<img src="../images/fish.gif">
<img src="../images/fish.gif" width="50" height="50">
<img src="../images/fish.gif" width="25" height="25">
</body>
</html>
Результат:
