Обучение языку HTML

Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа

Описание

Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.

Скачать (533.41 Кб) Сколько стоит заказать работу?

Работа состоит из 1 файл

введение.docx

— 552.75 Кб (Скачать документ)

. . .

Здесь для заголовков глав определяются метки с именами Chapter1, Chapter2, Chapter3 и Chapter4.

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

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

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

<A HREF="book.htm#Chapter3">Третья глава</A>

<A HREF="book.htm#Chapter4">Четвертая глава</A>

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

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

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

Листинг 40. Файл chap5\local.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Локальные ссылки в документе HTML</TITLE>

</HEAD>

<P><A HREF="local.htm#tab1_1">Таблица с двойным заголовком</A>

<P><A HREF="local.htm#tab1_2">Таблица с двойным заголовком и подписью</A>

<H2><A NAME="tab1_1">Таблица с двойным заголовком</A></H2>

<CAPTION VALIGN=TOP ALIGN=RIGHT>Табл. 1.1. Таблица с двойным заголовком</CAPTION>

<TR><TH COLSPAN=3>Заголовок для всех столбцов</TH></TR>

<TR><TH COLSPAN=2>Стобец 1 и 2</TH><TH>Столбец 3</TH></TR>

</TABLE>

<H2><A NAME="tab1_2">Таблица с двойным заголовком и подписью</A></H2>

<CAPTION ALIGN=BOTTOM>Табл. 1.2. Таблица с двойным заголовком</CAPTION>

<TR><TH COLSPAN=3>Заголовок для всех столбцов</TH></TR>

<TR><TH COLSPAN=2>Стобец 1 и 2</TH><TH>Столбец 3</TH></TR>

</TABLE>

</BODY>

</HTML>

4.3 Использование графики в ссылках

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

Для выполнения такого оформления у вас есть две возможности.

Во-первых, вы можете вставить между операторами <A> и </A> графическое изображение небольшого размера. При этом оно будет использовано как чувствительная область. Если сделать щелчок левой клавишей мыши по этой области, произойдет загрузка объекта, указанного в ссылке.

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

Рассмотрим обе эти возможности.

Вставка графического изображения в ссылку

Это очень просто. Вы вставляете изображение между операторами <A> и </A> с помощью оператора <IMG>, например:

<A HREF="http://www.dials.ccas.ru/frolov/home.htm" <IMG>SRC="homepage.gif" BORDER=0></A>

Здесь на месте ссылки в документе появляется графическое изображение, записанное в файле homepage.gif. Если сделать щелчок левой клавишей мыши по этому изображению, в окно навигатора будет загружен документ, имеющий адрес http://www.dials.ccas.ru/frolov/home.htm. Обратите также внимание на то, что мы убрали рамку вокруг графического изображения, указав значение параметра BORDER, равное нулю.

Графические изображения можно разместить в ячейках таблицы. Вы можете расположить в такой ячейке и ссылку, выполненную с использованием графики. Вот, например, как оформлена на нашем сервере WWW ссылка на архив исходных текстов к 14 тому нашей серии книг “Библиотека системного программиста”:

<HTML>

<H2>Графический интерфейс GDI в Microsoft Windows</H2>

<P><ADDRESS>© Александр Фролов, Григорий Фролов<BR>

Том 14, М.: Диалог-МИФИ, 1994, 288 стр.</ADDRESS>

<HR>

<TABLE>

<TR>

<TD>

<P><A HREF="http://www.dials.ccas.ru/frolov/bin/dbsp14.lzh"

<IMG>SRC="disk.gif" BORDER=0></A>

<BR>

</TD>

<TD>Дискета с исходными текстами программ, 208 Кбайт</TD>

</TABLE>

. . .

</BODY>

</HTML>

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

Сегментированная графика

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

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

Теперь вам нужно подготовить описание этих областей (карту областей), воспользовавшись для этого операторами <MAP> и </MAP>.

Оператор <MAP> имеет один параметр - имя карты чувствительных областей сегментированного графического изображения. Между операторами <MAP> и </MAP> располагаются операторы <AREA…>, параметры которых описывают отдельные чувствительные области:

<AREA...>

</MAP>

Пусть, например, мы подготовили графическое изображение, показанное на рис. 61.

Рис. 61. Графическое изображение с тремя чувствительными областями buttons.gif

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

</MAP>

Параметр NAME оператора <MAP> имеет значение buttons. Это название карты чувствительных областей, которое будет использовано при вставке сегментированного графического изображения в документ HTML.

Оператор <AREA> имеет три параметра: SHAPE, COORDS и HREF.

Параметр SHAPE задает форму чувствительной области. Для этого параметра вы можете указывать следующие значения:

Значение параметра SHAPE Форма чувствительной области

RECT

Прямоугольная область. Параметр COORDS задает координаты верхнего левого и правого нижнего углов области

CIRC

Окружность. Через параметр COORDS передаются три значения: координата центра окружности по оси X, координата центра окружности по оси Y, и радиус окружности

POLY

Многоугольник. Параметр COORDS задает координаты вершин многоугольника в виде пар значений

Параметр HREF оператора MAP задает адрес URL объекта, который должен быть загружен, когда пользователь делает щелчок левой клавишей мыши по чувствительной области.

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

После того как вы создали карту чувствительных областей, можно вставлять сегментированное изображение в документ HTML. Эта процедура выполняется с помощью оператора <IMG>, для которого дополнительно указывается параметр USEMAP:

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

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

В листинге 41 мы привели исходный текст документа HTML, в котором используется сегментированная графика.

Листинг 41. Файл chap5\imgmap\imgmap.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Сегментированная графика для ссылок</TITLE>

</HEAD>

</MAP>

</BODY>

</HTML>

Этот документ ссылается на графический файл buttons.gif, показанный на рис. 61. Обратите внимание, что последний оператор <AREA> описывает всю поверхность изображения, как нечувствительную к щелчкам мыши. Тем не менее, области, описанные ранее другими операторами <AREA>, будут работать в качестве чувствительных областей. Это происходит потому, что если области перекрываются, то навигатор использует первое описание, которое встретилось в карте.

Для чего лучше всего использовать сегментированную графику?

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

Если все, что вы собираетесь сделать при помощи сегментированной графики - это размещение панели с кнопками, то имеет смысл рассмотреть вариант использования таблицы, в ячейках которой находятся изображения отдельных кнопок. Этот вариант хорош тем, что будет работать даже в таких навигаторах, которые не способны распознавать сегментированную графику (например, навигатор NSCA Mosaic).

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

Приложение Map This!

Описанная выше методика подготовки сегментированных графических изображений не слишком удобна, так как вам необходимо вручную создавать карту чувствительных областей. Между тем вы можете бесплатно загрузить из Internet приложение Map This!, созданное специально для работы с сегментированной графикой. Ниже мы привели адрес сервера WWW, где вы можете получить самую свежую версию приложения Map This!:

http://www.ecaetc.ohio-state.edu/tc/mt

Главное окно этого приложения показано на рис. 62.

Рис. 62. Главное окно приложения Map This!

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

Органы управления, расположенные на инструментальной линейке, позволяют вам выбрать нужную форму области - прямоугольную, круглую или многоугольную.

Помимо редактирования областей, приложение Map This! может автоматически создавать карту областей в одном из трех форматов, в частности, в формате, необходимом для включения карты в документ HTML.

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

Ниже мы привели сокращенный образец документа HTML, который был создан приложением Map This! для изображения, входящего в комплект этого приложения:

<BODY>

. . .

. . .

</MAP></BODY>

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

Ссылки на различные ресурсы Internet

Документы HTML могут содержать ссылки на такие ресурсы сети Internet, как электронные почтовые адреса, серверы FTP, электронные конференции и так далее. Ниже мы привели примеры указания значений параметра HREF оператора <A…> для некоторых наиболее важных ресурсов:

Информация о работе Обучение языку HTML