Вставка элементов из внешних источников. Вставка изображений. Фоновая графика

Если текст в HTML-документ может быть введен непосредственно, то для вставки на веб-страницу графики, звука, видео и т.п. применяются специальные теги и атрибуты с адресами соответствующих файлов. При загрузке в веб-браузер HTML-документа с такими тегами в него будут загружены и требуемые файлы, если они будут найдены.

Графика

Применение графики делает веб-страницу визуально привлекательнее. Изображение позволяет лучше передать суть и содержание документа.

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

В Интернете применяются графические форматы GIF, JPEG, PNG. Кроме того GIF-файл может содержать анимацию.

Вставка изображения

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

Изображение вставляется в веб-страницы с помощью одинарного тега <img> (image(англ) — изображение). Этот тег имеет следующие параметры:

src — URL-адрес графического изображения
<img src = "адрес_ графического_ файла">

Адрес графического файла — это либо URL-адрес, либо имя файла, возможно с указанием пути. Путь может быть абсолютным или относительным. Если в качестве адреса файла указано просто имя файла, то браузер будет искать его в той же папке, в которой расположен вызывающий его HTML-документ.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src="http://sevidi.narod.ru/images/sv1.gif">
<img src="D:site/images/100-IMGA0442.JPG">
<img src="100-IMGA0390.JPG">
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В теге <img> можно использовать атрибут lowsrc, который принимает в качестве значения адрес графического файла. Можно создать два графическич файла: один содержит изображение полученное с высоким разрешением (logo.png), а другой рисунок полученный с низким разрешением и занимающий меньший объем (logo.gif).

Тогда тег

<img src = "logo.png" lowsrc = "logo.gif">

предпишет браузеру сначала загрузить файл logo.gif, а затем по мере загрузки страницы заменит его файлом logo.png. Этот метод позволяет ускорить формирование страницы в окне браузера.

В окне веб-браузера это будет выглядеть ТАК.
width — ширина изображения в пикселах или процентах;

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src="100-IMGA0455.JPG" width="340">
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.
hight — ширина изображения в пикселах или процентах;

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src="100-IMGA0455.JPG" width="340" height="200">
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Значения параметров width и hight могут не соответствовать реальным размерам изображения. В этом случае веб-браузер выполнит перемаштабирование. Если значение одного из параметров указать неправильно, то изображение будет искажено. Если указать только один параметр, то значение второго будет расчитано пропорционально значению первого исходя из реальных размеров изображения. Без указания значений параметров width и hight загрузка графики происходит сразу же, как только браузер начнет интерпретировать тег <img> и, следовательно вывод последующего текста и других элементов будет задерживаться, а размер изображения будет равен оригинальному. Поэтому рекомендуется всегда указывать значения width и hight, так как это позволит веб-браузеру отформатировать веб-страницу до загрузки изображений. В противном случае загрузка каждого изображения приведет к необходимости произвести форматирование еще раз, что в свою очередь приведет к перемещению других элементов веб-страницы. В результате картинка в окне веб-браузера будет дергаться.
border — толщина границы изображения;

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src=" 100-IMGA0707.JPG" width="640" height="360" border="1">
<img src=" 100-IMGA0695.JPG" width="640" height="360" border="0">
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.
alt — строка текста, которая будет выводиться на месте появления изображения до его загрузки или при отключенной графике, а также если изображение загрузить не удалось. Кроме того при наведении курсора мыши на изображение текст, указанный в параметре alt, можно увидеть в качестве текста всплывающей подсказки.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src="100-IMGA0715.JPG" alt="Белая черемуха" width="640" height="360">
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.
aign — расположение изображения относительно текста или других элементов веб-страницы. Параметр можетпринимать следующие значения:
- left — изображение выравнивается по левому краю, а текст обтекает его с правой стороны;
 
 Пример:
 
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Изображение на странице</title>
 </head>
 
 <body>
 <img src="100-IMGA0203.JPG" align="left" >Молодые сосны
 </body>
 </html>
 
 В окне веб-браузера это будет выглядеть ТАК.
- right — изображение выравнивается по правому краю, а текст обтекает его с левой стороны;
 
 Пример:
 
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Изображение на странице</title>
 </head>
 
 <body>
 <img src=" 100-IMGA0203.JPG" align="right" >Молодые сосны
 </body>
 </html>
 
 В окне веб-браузера это будет выглядеть ТАК.
- top — изображение выравнивается по верху текущей строки;
 
 Пример:
 
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Изображение на странице</title>
 </head>
 
 <body>
 <img src="100-IMGA0203.JPG" align="top" >Молодые сосны
 </body>
 </html>
 
 В окне веб-браузера это будет выглядеть ТАК.
- bottom — изображение выравнивается по низу текущей строки;
 
 Пример:
 
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Изображение на странице</title>
 </head>
 
 <body>
 <img src=" 100-IMGA0203.JPG" align="bottom" >Молодые сосны
 </body>
 </html>
 
 В окне веб-браузера это будет выглядеть ТАК.
- middle — центр изображения выравнивается по базовой лиии текущей строки;
 
 Пример:
 
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Изображение на странице</title>
 </head>
 
 <body>
 <img src="100-IMGA0203.JPG" align="middle" >Молодые сосны
 </body>
 </html>
 
 В окне веб-браузера это будет выглядеть ТАК.
hspace — отступ от изображения до текста по горизонтали;

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src=" 100-IMGA0203.JPG" align="left" hspace="20">Молодые сосны
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.
vspace — отступ от изображения до текста по вертикали;

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body>
<img src="100-IMGA0203.JPG" align="left" vspace="20">Молодые сосны
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Примечание. Если тег <img>, задающий изображение, вставить в контейнерный тег ссылки <a>, то получится так называемая графическая ссылка (баннер). Браузер по умолчанию выделяет ссылки рамки вокруг их графических изображений. Чтобы исключить отображение рамки, достаточно использовать в теге <img> атрибут border = 0.

Фоновая графика

Фон клиентской области окна браузера можно заполнить изображением из графического файла. Фоновая графика задается в теге <body> с помощью атрибута background, значением которого является URL-адрес или имя графического файла.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body background="fon1.png" >
Привет всем!
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Для браузера Internet Explorer можно указать дополнительный атрибут bgproperties="fixed", запрещающий прокрутку фонового изображения.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body background="fon1.png" bgproperties="fixed">
Привет всем!
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Для того, чтобы предотвратить резкий переход, например от светлого тона к темному, вызывающее неприятное мелькание, необходимо использовать параметр bgcolor, где указать цвет близкий к фоновому. Ведь фоновое изображение может загрузиться с некоторой задержкой.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изображение на странице</title>
</head>

<body background="fon1.png" bgproperties="fixed" bgcolor="#D2FFFF">
Привет всем!
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В качестве фонового изображения обычно используется небольшой и простой рисунок (текстура), который многократно выводится на экран, заполняя все окно. Этот рисунок может представлять собой небольшой прямоугольник или же узкую полоску (например,с градиенской заливкой). Такие изображения, подобно листам обоев, покрывают все окно браузера, оставляя незаметными стыки. Кроме того, поскольку изображение небольшое (не более нескольких килобайтов), создание фона происходит быстро.

В качестве фона также можно использовать один экземпляр изображения, например фотографию. Поскольку размеры окна браузера и монитора могут быть самыми различными, то размеры фонового изображения должны соответствовать типичному или даже крайнему случаю. Например, если типичными являются разрешение монитора 1024х768 пикселов и полностью раскрытое окно браузера, то фоновое изображение должно иметь размеры 1024х768 пилселов или больше. При большом разрешении монитора в полностью открытом окне браузера будут видны 4 экземпляра этого изображения, что обычно связано с проблемой их стыковки.

Обсудить на форуме

Другие |

Похожие материалы по теме: Вставляем изображение

разработка веб-сайтов под ключ обучающие программы для веб-разработчиков