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

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

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

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

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

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

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

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

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

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

   1. Цель работы

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

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

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

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

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

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

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

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

3. Оформить отчет по практической работе №2 и защитить его у преподавателя. Пример титульный листа отчета по практической работе приведен в приложении А.

1. Содержание отчета

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

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

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

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

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

Для размещения изображения в документе надо помнить, что в HTML используется только два графических формата. Первый формат – это формат обмена графикой Compuserve GIF (Graphics Interchange Format), включая прозрачные и анимированные; второй – JPEG (в том числе progressive jpeg).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметры 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 – доменное имя сервера,

port – номер TCP-порта, на котором ведет обслуживание сервер,

path – путь в корневом каталоге сервера к файлу ресурса,

some.html – файл ресурса,

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

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

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

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

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

<A HREF=”http://www.glasnet.ru/~frolov/index.html”> Домашняя страница</A>

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

<A HREF="carlson.html">

<IMG SRC="img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">

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

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

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

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

Пусть необходимо создать документ с именем book.htm, который состоит из нескольких глав. В начале документа желательно разместить оглавление, содержащее ссылки на отдельные главы.

Прежде всего определим в начале каждой главы локальные метки. Для этого необходимо использовать тэг <A> с параметром NAME, например:

<H2><A NAME=”Chap1”>Первая глава</A></H2>

. . . . .

Содержание главы

. . . . .

<H2><A NAME=”Chap2”>Вторая глава</A></H2>

. . . . .

Содержание главы

. . . . .

Ссылки на созданные таким образом локальные метки выполняются с помощью тэга <A>, имеющего параметр HREF:

<A HREF=”book.htm#Chap1”>Первая глава</A>

<A HREF=”book.htm#Chap2”>Вторая глава</A>

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