19

<TD>1 ячейка</TD> <TD>2 ячейка</TD>

<TD ROWSPAN="2">Объединенные строки</TD> </TR>

<TR>

<TD>3 ячейка</TD> <TD>4 ячейка</TD>

</TR>

</TABLE>

Полученная таблица представлена на рисунке 3.

Объединенные столбцы Второй столбец

Рисунок 3 – Представление таблицы с объединенными ячейками

1.5 Контрольные вопросы

1.Назначение языка разметки гипертекста HTML.

2.Что такое HTML-документ?

3.Какие группы тегов существуют в HTML?

4.Какие средства существуют для создания HTML-документов?

5.Принципы гипертекстовой разметки.

6.Процесс трансляции HTML-документа.

7.Назначение заголовка HTML-документа. Структура заголовка HTMLдокумента.

8.Теги создания таблиц.

20

2 Практическая работа №2. Графические изображения. Гипертекстовые ссылки

2.1Цель работы

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

2.Получить навыки использования всех выше перечисленных элементов гипертекстовой разметки при создании web-страниц.

2.2 Порядок выполнения работы

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

2.Создать следующую структуру web-страниц:

−первая web-страница должна содержать одну гипертекстовую ссылку на вторую web-страницу и вторую гипертекстовую ссылку в виде рисунка на любой сайт в сети Internet; фоном создаваемой web-страницы должен быть рисунок (одна из гипертекстовых ссылок должна быть абсолютной, другая относительной);

−вторая web-страница представляет собой html-документ, выполненный на практической работе №1, на который добавлены гипертекстовые ссылки: ссылки находятся в начале документа, первая ссылается на конец этого же документа (локальная гиперссылка), вторая на первую web-страницу (глобальная гиперссылка);

−вторую web-страницу следует изменить следующим образом: фоном ее должен быть любой цвет, а фоном таблицы должен быть рисунок.

3.Оформить отчет по практической работе №2 и защитить его у препода-

21

вателя. Пример титульный листа отчета по практической работе приведен в приложении А.

2.3Содержание отчета

1.Титульный лист.

2.Формулировка задания на практическую работу №2.

3.Гипертекстовая разметка созданных web-страниц (HTML-код), выполненный в соответствии с пунктом 2.2. Гипертекстовую разметку второй webстраницы можно представлять не полностью, а только те части HTML-кода, в которых были произведены изменения.

4.Ответы на контрольные вопросы.

2.4Методические указания

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

мена графикой Compuserve GIF (Graphics Interchange Format), включая про-

зрачные и анимированные; второй – JPEG (в том числе progressive jpeg).

Для того чтобы поместить изображение внутри текста, воспользуемся тэгом <IMG>. Элемент <IMG> не имеет конечного тэга. Ниже приведен список некоторых параметров, допустимых для данного тэга:

−SRC – обязательный параметр; указывает адрес (URL) файла с изображением.

−HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

−HSPACE и VSPACE – определяют отступ картинки (в пикселях) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

−ALIGN – обязательный параметр. Указывает способ выравнивания изо-

22

бражения в документе. Может принимать следующие значения:

−left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

−right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.

−top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

−middle – выравнивает базовую линию текущей текстовой строки с центром изображения.

−absmiddle – выравнивает центр текущей текстовой строки с центром изображения.

−bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

−absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

−NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

−ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

−BORDER – определяет ширину рамки вокруг изображения в пикселях. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

−LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

23

Параметры USEMAP и ISMAP тега <IMG> будут рассмотрены в практической работе №4 “Активные изображения (навигационные карты)”.

Пример использования тэга <IMG>:

<IMG SRC="img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left" BORDER=2> Этот текст обтекает кар-

тинку с рысью справа и находится от нее на расстоянии 10 пик-

селей.

Приведенный пример демонстрирует включение в текст графического изображения, которое находится в файле picture.ipg текущего каталога, ширина изображения 45 пикселей, высота – 53 пикселя, а также изобразить вокруг изображения рамку шириной 2 пикселя.

В документе HTML можно разместить фоновый рисунок, который будет виден под основным текстом. Как правило, фоновые изображения малы по размеру, но их копии как обои заполняют все окно просмотра. Для того чтобы разместить фоновое изображение необходимо воспользоваться параметром BACKGROUND тега <BODY> и некоторых других. Этот параметр указывает на URL – адрес изображения, которое используется в качестве фонового.

Пример использования параметра BACKGROUND:

<BODY BACKGROUND="img.gif">.

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

http:user:password@domain.ru:port/path/some.html?query,

где http – протокол обмена данными, user – идентификатор пользователя, password – пароль,

domain.ru – доменное имя сервера,

24

port – номер TCP-порта, на котором ведет обслуживание сервер, path – путь в корневом каталоге сервера к файлу ресурса, some.html – файл ресурса,

query – поисковое предписание.

Заданный в таком виде адрес ресурса называется абсолютным или полным адресом ресурса, а гипертекстовая ссылка, в которой задан такой адрес, абсолютной.

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

Ссылка создается с помощью тэга <A>, который используется в паре с тэгом </A>. Между ними располагается либо текст ссылки, либо рисунок (с помощью тега <IMG>), которые отображается в окне просмотра браузера.

Пример ссылки на другой документ:

<A HREF=”http://www.glasnet.ru/~frolov/index.html”>

Домашняя страница</A>

Использование рисунка в качестве гипертекстовой ссылки:

ALIGN="right" BORDER="0" ALT="Досье Карлсона">

</A> Для просмотра досье нажмите на кнопку справа.

Если имя домена и/или полный путь к документу в адресе URL опущены, то гипертекстовая ссылка называется частично определенной или относительной, например:

<A HREF=”../frolov/index.html”> Домашняя страница</A>

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