Работа с изображениями

Графические форматы

В WWW стандартизированы всего два формата, а именно GIF и JPEG. Формат GIF (GraphicInterchangeFormat) занимает в WWW исключительное положение. Все графические броузеры поддерживают этот формат и без проблем выводят внутри HTML-страницы изображения, представленные в этом формате.

Формат JPEG (JointPhotographicExpertsGroup) становится в последнее время все более популярным. Главное достоинство JPEG-файлов состоит в том, что они короче GIF-файлов и на их загрузку требуется меньше времени. К сожалению, встроенные изображения в формате JPEG поддерживают только некоторые броузеры, например Netscape и Mosaic.

Графический тег <img>

Кодом HTML, который заставляет броузер выводить изображения, является тег <IMG> со следующим общим форматом:

<IMGSRC='имя_файла'>

Здесь SRC означает источник (Source), а имя файла представляет собой имя выводимого графического файла. Предположим, к примеру, что у Вас есть изображение picture.gif. Для добавления его на страницу HTML применяется такая строка:

<IMGSRC=picture.gif>

Выравнивание изображений

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

<IMGSRC='имя_файла' ALIGN=TOP MIDDLE BOTTOM LEFT RIGHT >

Здесь вертикальная черта показывает возможность выбора указания между TOP (верх), MIDDLE (середина) или BOTTOM (низ) для нужного выравнивания.

Графика в текстовых броузерах

Некоторые броузеры работают только с текстом и не могут выводить графические файлы. Поэтому в том месте, где имеется тег <IMG>, они выводят только [IMAGE]. В итоге страница получается некрасивой, поэтому тег <IMG> имеет дополнительный атрибут, который можно использовать для вывода некоторого альтернативного текста, появляющегося вместо изображения. Общий формат тега выглядит следующим образом:

<IMGSRC='имя_файла' ALT="[альтернативный текст]">

здесь альтернативный текст означает тот текст, который появляется вместо графики. Применима и такая конструкция:

<IMGSRC='имя_файла' ALT=" ">

Изображения в качестве гипертекстовых связей

Изображения на HTML-страницах можно использовать не только для просмотра, но и в качестве гипертекстовых связей, как и обычный текст.

Обозначение изображения в качестве гипертекстовой связи не отличается от текста. Для этого применяется тот же тег <A>, но между <A> и </A> вставляется тег <IMG>:

<AHREF="URL"><IMGSRC='имя_файла'></A>

При этом броузер выводит вокруг изображения рамку, чтобы идентифицировать ее как связь. Чтобы подавить вывод рамки можно добавить BORDER=0 в тег <IMG>:

<IMGSRC=myhome.gifBORDER=0>

Таблицы на HTML-страницах

Создание таблицы

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

Все таблицы обрамляются тегами

<TABLE>
</TABLE>

остальные теги таблицы находятся между этими тегами. Чтобы показать в таблице рамку, вместо тега <TABLE> применяется тег <TABLEBORDER> , однако закрывается таблица тегом </TABLE>.

Для добавления строки между тегами <TABLE> и </TABLE> вставляется тег <TR> и соответствующий тег </TR>:

<TABLE>
 <TR>
 </TR>
</TABLE>

После этого строка разделяется на столбцы, для чего между тегами <TR> и </TR> вставляются теги <TD> и </TD>. Каждая комбинация <TD> и </TD> представляет собой один столбец (точнее, отдельную клетку в строке), поэтому для трехстолбцовой таблицы HTML-текст выглядит следующим образом:

<TABLE>
 <TR>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 </TR>
</TABLE>

Для того, чтобы ввести данные в клетку таблицы, надо ввести текст между тегами <TD> и </TD>:

<TABLE>
 <TR>
 <TD>One</TD>
 <TD>Two</TD>
 <TD>Three</TD>
 </TR>
</TABLE>

При этом, между тегами <TD> и </TD> можно помещать не только текст, но и теги для форматирования текста (например, <B> или <I>), списки и даже изображения. Обратите внимание, что в таблицах допускается смешивать текст и графику.

<TABLE>
 <TR>
 <TD>One</TD>
 <TD><IMGSRC="picture.jpg" ALT=" "></TD>
 <TD><FONTSIZE=5>W</FONT><FONTSIZE=3>Three</FONT></TD>
 </TR>
</TABLE>

Добавление новых строк в таблицу

Процедуру создания первой строки нужно повторить для создания следующих строк таблицы:

<TABLE>
 <TR>
 <TD>One</TD><TD>Two</TD><TD>Three</TD>
 </TR>
 <TR>
 <TD>Red</TD><TD>Green</TD><TD>Blue</TD>
 </TR>
 <TR>
 <TD>1990</TD><TD>1995</TD><TD>2000</TD>
 </TR>
</TABLE>

Создание строки надписей

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

<TR>
 <TH>Надпись первого столбца</TH>
 <TH>Надпись второго столбца</TH>
 <TH>Надпись третьего столбца</TH>
</TR>

Включение названия

Базовым элементом таблицы является ее название, то есть короткое описание (одно - два предложения), показывающее читателю назначение таблицы. Для определения названия используется тег <CAPTION>:

<CAPTIONALIGN=TOP BOTTOM>Название (верх низ)</CAPTION>

где TOP - название вверху таблицы, BOTTOM - название внизу таблицы.

Выравнивание внутри таблицы

Стандартным выравниванием для клеток таблицы является выравнивание влево для клеток с данными и центрирование для клеток надписей.

Кроме этого, внутри тегов <TD> и <TH> можно осуществлять выравнивание с помощью атрибута ALIGN. При этом, можно выравнивать текст влево (LEFT), вправо (RIGHT) или центрировать (CENTER). Формат записи этих атрибутов выглядит следующим образом:

<TDALIGN=LEFT RIGHT CENTER>
<THALIGN=LEFT RIGHT CENTER>

Кроме горизонтального выравнивания в клетках таблиц можно применять и вертикальное выравнивание текста. В этом случае в тегах <TD> и <TH> применяется атрибут VALIGN. Выравнивание по вертикали может быть выравниванием по верху (TOP), выравниванием по низу (BOTTOM) и выравниванием по середине (MIDDLE):

<TDBOTTOM MIDDLE>
<THBOTTOM MIDDLE>

Перекрытие текстом строк и столбцов

Для перекрытия текстом нескольких строк или столбцов внутри тегов <TD> и <TH> используются специальные атрибуты: COLSPAN=m для перекрытия нескольких колонок (где m - число колонок), и ROWSPAN=n для перекрытия нескольких столбцов (где n - число столбцов).

<TDCOLSPAN=2>Перекрытие двух колонок(столбцов)</TD>
<TDROWSPAN=3>Перекрытие трех строк</TD>

Перекрыть можно и надпись столбца. Вот как это делается:

<THROWSPAN=2>Перекрытие надписи столбца</TH>

Задание для самостоятельной работы

Для самостоятельной проработки материала первого урока слушателям предлагается сначала подготовить в любом текстовом редакторе три HTML-страницы.

На первой странице предлагается попробовать возможности выделения текста (italic, bold, underline), написания нескольких уровней заголовков, различные виды списков.

На второй странице предлагается представить несколько графических изображений, одно из которых будет являться ссылкой к некоторому отдельному изображению. Кроме этого, предлагается вставить в страницу видеоизображение (файл *.avi), опробовав различные параметры тега <IMG> для видеоизображений.

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

Таблица 1.1. Доля отдельных развитых стран в ВВП мира (%)

Страна	1970	1980	1995
США	23,7	21,4	20,9
Япония	6,2	7,6	8,6
Германия	5,6	5,0	4,6
Франция	3,8	3,7	3,4
Великобритания	4,3	3,5	3,2
Италия	3,9	3,6	3,3

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

Примерные тексты первой, второй и третьей страниц приведены ниже:

Первая страница <html>
<head>
<title>Общие сведения</title>
</head>
<body>
<h1 align="center">Язык гипертекстовой маркировки HTML</h1>
<h2>Общие сведения</h2>
<p>Среди общедоступных средств Internet для предоставления информации <b>система WWW</b> занимает особое место.
<p>Система WWW была разработана несколько лет назад в одном из крупнейших европейских центров ядерных исследований CERN (<i>EuropeanCenterforNuclearResearch, Швейцария</i>), и предназначена для объединения документов и файлов по всей сети Internet с помощью гипертекстовых связей.
<p><b><u>Язык гипертекстовой маркировки HTML</u></b> является одним из составных компонентов WWW. Он был основан на стандарте <b><i> ISO 8879-1986 SGML</i></b>.
<p>HTML позволяет определять структуру электронного документа с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные элементы: иллюстрации, аудио- и видео- фрагменты и так далее. Язык включает в свой состав развитые средства для специфицирования нескольких уровней заголовков, шрифтовых выделений, различных групп объектов, например, словари, каталоги или меню для размещения иллюстраций и других фрагментов, а также множество других возможностей.
<p>В основу гипертекстовой разметки была положена теговая модель описания документа, позволяющая представить документ в виде совокупности элементов, каждый из которых окружен тегом (управляющим HTML-кодом). По своему значению теги близки к понятию операторных скобок begin/end в универсальных языках программирования и задают области действия имен локальных переменных, определяют область действия правил интерпретации текстовых элементов документа и т.п.
<p>Документ HTML представляет собой не что иное, как обычный ASCII-файл, с добавленными в него управляющими HTML-кодами (тегами). Каждый тег начинается с левой угловой скобки ''&lt;'' и заканчивается правой угловой скобкой ''&gt;''. Между скобками записывается идентификатор тега и, если необходимо, дополнительные аргументы. Все теги по их назначению и области действия можно разделить на пять основных групп:
<ol>
<li>общего назначения; </li>
<li>определения структуры текста;</li>
<li>определения атрибутов текста;</li>
<li>навигации и гипертекстовых ссылок;</li>
<li>задания специальных эффектов и форматов данных.</li>
</ol>
</body>
</html>

Вторая страница

<html>
<head>
<title>Животные</title>
</head>
<body>
<h2 align="center"><u>Животные, обитающие в России</u></h2>
<p>Тигр: <ahref="Tigers.jpg"><imgsrc="Tiger.jpg" width="40" heght="40"></a>
Данная картинка является ссылкой! Щелкните по ней мышью и увидите...
<p>Зубр: <imgsrc="Zubr.gif" border=0 align="middle" width="307" height="220">
Песец: <imgsrc="Pesec.gif" border=0 align="middle" width="408" height="160">
</body>
</html>

Третья страница

<html>
<head>
<title>Экономика</title>
</head>
<body>
<p>
<tableborder="1" width="50%">
<captionalign="top"><i>Таблица </i>
<b>Доля отдельных развитых стран в ВВП мира (%)</b></caption>
 <tr>
 <thwidth="40%">Страны</th>
 <thwidth="15%">1970</th>
 <thwidth="15%">1980</th>
 <thwidth="15%">1995</th>
 </tr>
 <tr>
 <td>США</td>
 <td>23,7</td>
 <td>21,4</td>
 <td>20,9</td>
 </tr>
 <tr>
 <td>Япония</td>
 <td>6,2</td>
 <td>7,6</td>
 <td>8,6</td>
 </tr>
 <tr>
 <td>Германия</td>
 <td>5,6</td>
 <td>5,0</td>
 <td>4,6</td>
 </tr>
 <tr>
 <td>Франция</td>
 <td>3,8</td>
 <td>3,7</td>
 <td>3,4</td>
 </tr>
 <tr>
 <td>Великобритания</td>
 <td>4,3</td>
 <td>3,5</td>
 <td>3,2</td>
 </tr>
 <tr>
 <td>Италия</td>
 <td>3,9</td>
 <td>3,6</td>
 <td>3,3</td>
 </tr>
 </table>
 </td>
 </tr>
</table>
<p><imgsrc="Diagram.gif" border=0 width="528" height="268">
</body>
</html>

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

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

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

Назад | Содержание | Вперед