3

ВВЕДЕНИЕ

Данная методическая разработка посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является базовым при разработке электронных документов для Интернета. Вследствие постоянного развития HTML-технологии, возникновения новых свойств и параметров, а также появления новых версий популярных браузеров, возможности HTML приобретают все большее значение в ходе создания web-сайтов различной сложности и тематики. Знание основ языка HTML становится обязательным и неотъемлемым атрибутом многих специалистов в области интернет-технологий, превращается в систему, необходимую практически каждому пользователю Всемирной сети. Предлагаемое пособие ориентировано на широкий круг читателей, желающих научиться создавать web-сайты с помощью языка гипертекстовой разметки HTML, а также интерактивных технологий Dynamic HTML и CSS. В третьей части методических указаний рассмотрены вопросы использования графики в HTML-документах и разработка web-сайтов с использованием фреймов.

1. ИСПОЛЬЗОВАНИЕ ГРАФИКИ В HTML-ДОКУМЕНТАХ

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

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

1.1. ХАРАКТЕРИСТИКА ГРАФИЧЕСКИХ СТАНДАРТОВ

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

4

можность для работы с фотографическими изображениями. Примером файлов векторного формата могут служить CDR (CorelDRAW), AI (Adobe Illustrator), FH (FreeHand), SVG (Scalable Vector Graphics) и др. Векторный формат распространен, в основном, в полиграфии, предпечатной подготовке высококачественных документов и т. д.

Отображение файла растрового формата основано на обработке минимальной единицы рабочей области экрана – точки (пиксела). Изменение размеров растровых изображений может существенно повлиять на их качество, т. к. масштабирование осуществляется без вмешательства какихлибо сложных математических операций. Наиболее распространенными растровыми форматами являются PSD (Photoshop Document), BMP (Bitmap Image) и др.

Форматом, избранным для демонстрации web-графики в Интернете, стал растровый формат, поскольку относительно малый размер мониторов пользователей не позволяет выводить на экран изображения больших размеров.

На сегодняшний день для создания графических изображений, предназначенных для размещения в электронных документах, используются три основных стандарта: GIF, JPEG и PNG. Рассмотрим каждый из них немного подробнее.

Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета).

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

Две последние характеристики стандарта GIF сегодня являются основополагающими и повсеместно используемыми – от создания навигационных меню до интернет-рекламы.

Стандарт JPEG был создан специальной группой экспертов в области фотографии и предназначался для хранения графических изображений с большой глубиной цвета.

Профиль деятельности разработчиков JPEG внес свой вклад в позиционирование стандарта – в основном он использовался (и по сей день используется) для передачи фотографических изображений. В стандарте применен специальный алгоритм компрессии данных – при повышении степени сжатия качество изображения ухудшается за счет изъятия «ненужной» информации (в отличие от алгоритма сжатия GIF, который позволяет производить подобную процедуру практически без потерь).

5

На сегодняшний день стандарт JPEG занимает второе место по популярности после GIF и используется для создания изображений, в композицию которых входят фотографии, сложные коллажи (компьютерный монтаж нескольких разнородных графических объектов), объекты, подвергнутые действию различных графических эффектов и фильтров.

Стандарт PNG разрабатывался с учетом особенностей Интернета. PNG является попыткой объединить в себе наиболее сильные стороны двух предыдущих стандартов и исключить их недостатки.

В стандарте реализованы следующие средства:

•прозрачный фон;

•построчное чередование;

•сжатие без потерь и др.

Однако PNG, несмотря на свои преимущества, не получил такого признания пользователями Интернета, как стандарты GIF и JPEG (одна из возможных причин – отсутствие поддержки анимации). В Сети можно встретить графические файлы с расширением png, но достаточно редко и только в специфических направлениях интернет-отрасли (например, работа программного модуля GD::Graph, автоматически генерирующего графики и диаграммы для систем статистики, рейтинга и пр.).

1.2. ВСТАВКА ГРАФИКИ В HTML-ДОКУМЕНТ

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

<BODY BACKGROUND="bg.gif"> <TABLE>

<TR>

<TD BACKGROUND="bg2.jpg">TЕKCT</TD> </TR>

</TABLE>

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

Параметр SRC. Единственный параметр, который является обязательным для указания, – это SRC, который выполняет важную роль в графическом изображении на странице – он задает путь (относительный или абсолютный) к рисунку. Формат указания следующий:

<IMG SRC="picture.gif">

6

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

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

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

Листинг 1.1. Пример использования рамок вокруг изображений

<HTML><HEAD>

<TITLE>Пример рамок вокруг изображения</TITLE></HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black"

LINK="#00FF00" ALINK="#00FF00" VLINK="blue"> <TABLE BORDER="0">

<TR ALIGN="CENTER">

</TR>

</TABLE>

</BODY></HTML>

Рис. 1. Пример рамки вокруг рисунка

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

7

<А HREF="watch.html"><IMG SRC="images/watch.jpg" BORDER="0"></A>

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

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

•во время загрузки изображения браузер сразу зарезервирует на странице столько места, сколько необходимо для отображения рисунка; многие разработчики пренебрегают этим правилом, в результате чего при загрузке под рисунок изначально отводится слишком мало места, а потом страница начинает «скакать», поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла;

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

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

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

бами:

•указать в теге <IMG> измененным только один из параметров (либо WIDTH, либо HEIGHT); браузер самостоятельно изменит второй параметр, сохраняя пропорцию;

•открыть рисунок в любом растровом редакторе (например, Adobe Photoshop) и изменить пропорции программным образом.

Что касается пропорционального увеличения графических изображений в HTML-документах, то такой подход не рекомендуется по причине особенностей самого растрового формата (ухудшение качества изображения при увеличении его размеров). Однако если степень увеличения незначительна (в среднем на 5–10 пикселов), как правило, визуально качество остается неизменным.

Взавершение разговора о параметрах WIDTH и HEIGHT следует сказать, что допустимо указание размеров графического изображения в процентах. Этот формат записи дает команду браузеру растянуть или сузить рисунок в соответствии с размерами окна страницы. Но такой подход не рекомендован и может применяться только в исключительных случаях и

8

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

Параметр ALIGN предназначен для определения типа выравнивания рисунка относительно текста и прочих элементов электронного документа. Существующие значения параметра ALIGN представлены в табл. 1.1.

Таблица 1.1.

Следует заметить, что некоторые популярные браузеры (например, Netscape) интерпретируют значения ABSMIDDLE и ABSBOTTOM как, соответственно, MIDDLE и BOTTOM. Internet Explorer корректно отображает все приведенные в табл. 1.1 значения.

Основное же различие между значениями нижнего края и базовой линии заключается в особенностях некоторых букв алфавита и прочих символов. Нижний край – это крайняя точка текстового блока, а базовая линия проходит по нижней части строки текста без учета фрагментов текста, выходящих за строку. Другими словами, при наличии в тексте букв «у», «р», «q», «g» и т. п. нижняя часть этих символов будет определяться значением ABSBOTTOM, а часть букв на уровне запятой в предложении – значением BOTTOM или BASELINE. Примеры выравнивания рисунков приведены соответственно в листинге 1.2 и на рис. 2.

9

ных – при повышении степени сжатия качество изображения ухудшается за счет изъятия "ненужной" информации (в отличие от алгоритма сжатия GIF, который позволяет производить подобную процедуру практически без потерь).

<BR> <B>Выравнивание этого предложения

<IMG SRC="images\watch125.jpg" ALIGN="top" BORDER="1" WIDTH="125"> по верхнему краю рисунка</В>

</BODY> </HTML>

Как видно из примеров, все типы выравнивания условно можно разделить на две группы:

•выравнивание относительно края окна документа (значения LEFT

иRIGHT);

•выравнивание относительно текущей строки текста (все остальные значения).

Параметры HSPACE и VSPACE определяют размер горизонтального

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

Листинг 1.3. Отступы между рисунком и текстом

<B>Отступов между текстом и рисунком нет</B><BR>

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

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

</BODY>

</HTML>

11