Графика в Web

Тема 7: Графика в Web (1 час)

План

1. Использование дескриптора <IMG> для вставки графических файлов

2. Выравнивания текста относительно изображения

3. Плавающие изображения. Поля вокруг изображений

4. Определение ширины и высоты изображения

5. Обтекание изображений текстом

Преимущества использования графики

ü Текст разделяется на небольшие фрагменты, что позволяет быстрее усвоить содержание страницы

Рекомендуемые материалы

ü Содержание страницы разбивается на темы, что предоставляет читателю возможность лучше ориентироваться в материале

ü С помощью графических изображений можно дать информацию, которую невозможно получить из текста (фотографии и т.д.)

ü С помощью изображений можно не только сделать страницу цветной, но и придать ей определенное настроение: лирическое, юмористическое и т.д.

1. Использование дескриптора <IMG> для вставки графических файлов

Встроенные изображения – это графические изображения, которые всегда остаются на одном и том же месте на Web-странице.

Плавающие изображения – выравниваются относительно окружающего их текста. Встроенные изображения как бы продолжают строку текста (если в ней есть место), а плавающие обычно переходят на новую строку.

Чтобы вставить графический файл на Web-страницу, нужно включить гипертекстовую ссылку на него (так же, как при создании гиперссылки на другую страницу). Причем изображение, на которое вы ссылаетесь, может находиться как на том же сервере, на котором расположена ваша страница, так и в любом другом месте Internet.

Для создания URL изображения используется элемент IMG, который имеет следующий синтаксис:

<IMG SRC=URL_изображения>/

SRC означает источник (source), т.е. место, где хранится изображение.

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

2. Выравнивания текста относительно изображения

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

Атрибут ALIGN позволяет определить взаимное расположение текста и изображений на Web-странице. Для данного атрибута используется следующий синтаксис:

<IMG ALIGN=значение SRC=URL_изображения>

В таблице приведены некоторые значения атрибута ALIGN

По умолчанию в дескрипторе <IMG> атрибуту ALIGN присваивается значение BOTTOM.

3. Плавающие изображения. Поля вокруг изображений

С помощью значений LEFT и RIGHT атрибута ALIGN можно определить, вдоль какого поля должно "плавать" изображение.

Для определения расстояния между текстом и плавающими изображениями, а также между краем окна и изображениями используются атрибуты VSPACE и HSPACE. Атрибут VSPACE служит для определения пустого пространства над и под плавающим изображением, а атрибут HSPACE – для определения пустого пространства справа и слева от плавающего изображения.

4. Определение ширины и высоты изображения

В HTML высоту и ширину изображения можно определить с помощью атрибутов HEIGHT и WIDTH дескриптора <IMG>.

Во время загрузки Web-страниц сначала загружаются все встроенные изображения и только потом – окружающий их текст. Но с помощью вышеприведенных атрибутов можно решить эту проблему.

Если сообщить браузеру размер в пикселях изображений, содержащихся на вашей Web-странице, то браузер сможет подготовить макет страницы и разместить текст до того, как будет окончена загрузка всех изображений. Синтаксис:

<IMG SRC="file.gif" HEIGHT=400 WIDTH=450 ALIGN=LEFT>

5. Обтекание изображений текстом

Для определения способа обтекания текста вокруг изображения используются дескриптор <BR> и атрибут CLEAR. Для того чтобы удалить текст, находящийся справа от изображения, и поместить его под изображением, воспользуйтесь следующей записью:

<BR CLEAR=LEFT>.

Для удаления текста, находящегося слева от изображения, и его размещения под изображением, воспользуйтесь следующей записью:

<BR CLEAR=RIGHT>.

Чтобы удалить весь текст, расположенный слева и справа от изображения, и разместить его внизу, воспользуйтесь следующей записью:

<BR CLEAR=ALL>

Изображение-ссылка – это изображение на Web-странице, щелкнув на котором, можно открыть новую Web-страницу или службу Internet.

Типичный HTML-код изображения-ссылки выглядит примерно так:

<A HREF="URL"><IMG SRC="имя_файла_изображения"></A>

Здесь "URL" – это просто гиперссылка.

В качестве ссылки можно использовать и текст, и изображение, как показано в следующем примере:

<A HREF=Moreinfo.html> <IMG SRC="имя файла изображения"> текст </A>

Ещё посмотрите лекцию "3.2 Характеристика инструментальных средств" по этой теме.

Еще один полезный атрибут дескриптора IMG, особенно для изображений-ссылок, - это BORDER. По умолчанию изображения-ссылки заключаются в раму шириной два пикселя. Если увеличить рамку, то станет более очевидно, что изображение является ссылкой. Если присвоить данному атрибуту значение "0", то рамка вокруг изображения будет удалена.

Альтернативы изображениям-ссылкам

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

<IMG SRC="file.gif" ALT="Описание рисунка">

Практическое задание

В созданные на предыдущем уроке страницы добавьте изображения. Поэкспериментируйте с выравниванием текста относительно изображений.