Графика и мультимедиа в веб-документах. Встраивание изображений в HTML-документы. Параметр BORDER. Параметры WIDTH и HEIGHT

ЛАБОРАТОРНАЯ РАБОТА № 4

Тема: Графика и мультимедиа в веб-документах.

Цель: научиться добавлять графические изображения и файлы мультимедиа в веб-документы.

Оборудование и программное обеспечение:

Персональный компьютер IBM PC/AT.

Операционная система MS-DOS, Windows 95/98/NT/2000/XP.

Теоретическая часть

В HTML-документах графические изображения можно внедрять в документ или использовать как фоновый рисунок документа. Браузеры могут отображать три вида графических изображений: GIF, JPEG, PNG.

Встраивание изображений в HTML-документы

Вставка изображений в HTML-документ осуществляется при помощи тега <IMG>. Тег <IMG> одиночный, он имеет следующие атрибуты:

Параметр SRC - единственный параметр, который является обязательным для указания, он задает путь (относительный или абсолютный) к рисунку. Формат указания следующий:

<IMG SRC="picture.gif">

В  данном  случае  браузер  станет  искать  файл "picture.gif" в том же каталоге, где находится и HTML-документ, ссылающийся на этот рисунок. Обычно для графических изображений выделяется отдельная папка:

<IMG SRC="images/picture.gif">

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

<А HREF="My_doc.html"><IMG SRC="map.gif"></A>

Любая часть такого изображения будет работать как указатель ссылки на документ My_doc.html.

Параметр BORDER - предназначен для отображения вокруг рисунка рамки определенной толщины. Толщина указывается в пикселах, по умолчанию  рамка браузером не отображается:

<IMG SRC="images/clock.gif"BORDER="5">

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

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

<A><HREF="clock.html"><IMG SRC="images/clock.gif"  BORDER="0"></A>

Параметры WIDTH и HEIGHT - используются для определения размеров графического изображения, встраиваемого в электронный документ (ширина и высота, в пикселах):

<IMG SRC="images/clock.gif" BORDER="1" WIDTH="300" HEIGHT="201">

Использование этих параметров не обязательно, однако рекомендуется по двум основным причинам:

• во время загрузки изображения браузер сразу зарезервирует на странице столько места, сколько необходимо для отображения рисунка. Многие разработчики пренебрегают этим правилом, в результате чего при загрузке под рисунок изначально отводится слишком мало места, а потом страница начинает "скакать", поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла;
• иногда размеры изображения слишком велики и для его просмотра "в полный рост" требуются полосы прокруток. В таком случае, если необходимо поместить рисунок в окне браузера, не прибегая к помощи полос прокруток, то можно в HTML-коде указать пропорционально уменьшенные размеры этого рисунка. Размещая на странице уменьшенный вариант рисунка, обязательно помните о необходимости пропорционального изменения размеров, в противном случае при нарушении соотношения этих размеров, изображение получится искаженным и неприглядным

Корректно изменить пропорции рисунка можно следующими способами:

• указать в теге <img> измененным только один из параметров (либо