Тема: Гипертекстовые ссылки

 

Гипертекстовая ссылка (рисунок 1) является фрагментом текста и позволяет ссылаться на какой-нибудь другой файл, имеющий расширение.htm. Т.о, можно связывать на одной Web - странице несколько различных документов. Именно гиперссылки совместно с линиями связи и серверами участвуют в создании «паутины» WWW.

Гиперссылками (или просто ссылками) называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети.

Гиперссылка состоит из "внутренней" части, то есть, адреса документа, на который она ссылается, и "внешней" части, видимой на экране и называемой именем гиперссылки. Имя гиперссылки может представлять из себя слово или группу слов, картинку или часть картинки. Если подвести указатель “мыши” к ссылке, он примет форму ладони с вытянутым указательным пальцем – и это самый надежный способ ее определить. При этом, в строке состояния браузера можно будет прочитать адрес, на который указывает ссылка.

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

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

<A HREF="адрес"> текст ссылки </A>

Об адресах документов сказано ниже. Текст ссылки внутри тага <A> может быть любым. Точно так же в таг <A> можно поместить и изображение.

Рисунок 1 - Web-страница, содержащая гипертекстовую ссылку.

 

Для указания местоположения отдельного ресурса сети используется указатель, который называется URL (Uniform Resource Locator). URL — это универсальный указатель ресурсов, адрес, который указывает путь к кон­кретному документу. Он содержит информацию об используемом имени сервера, сведения о папке, в которой хранится файл, и имени файла.

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

Полный адрес документа в сети называется URL (Uniform Resource Locator; принято читать “урл”). URL может состоять из следующих частей:

префикс протокола, то есть, указание на используемую сетевую службу. Основные протоколы, с которыми Вы столкнетесь, приведены в таблице 3.

Протокол	Пояснение
http://	HTTP – основной протокол, обеспечивающий доступ к Web-страницам. Используется по умолчанию, поэтому часто не указывается в URL.
ftp://	Протокол передачи файлов FTP, позволяющий при помощи программы FTP-клиента обмениваться файлами с удаленным компьютером.
mailto:	Доступ к электронной почте. Вслед за mailto: указывается адрес электронной почты, имеющий общий вид имя_пользователя@адрес_почтового_домена.
file://	Указывается вместо имени протокола при обращении к Web-странице, расположенной на локальной машине.

Таблица 1 Основные префиксы протоколов в URL

доменное имя компьютера или его IP-адрес вместо доменного имени. Например, сервер НГАСУ имеет доменное имя http://www.sibstrin.ru/ и IP-адрес 62.76.97.33;

номер порта, через который происходит взаимодействие с сервером. Перед номером порта ставится двоеточие. С точки зрения пользователя указание порта бывает полезно, например, для “принудительной” перекодировки документа. Так, адреса http://www.newmail.ru:8100/ и http://www.newmail.ru:8100/ адресуют один и тот же сервер, но в первом случае документ читается в кодировке KOI-8, а во втором – в кодировке Windows. Вообще же, номер порта включается в URL только при нестандартных настройках сервера;

имя файла на сервере, которое может включать и путь от корневого каталога сервера. В записи пути по дереву каталогов сервера используется символ ‘/’, а не ‘\’, как принято в Dos и Windows. Корневой каталог на сервере – совсем не обязательно “головной каталог диска”, как на локальной машине, а при соединении с сервером мы получаем доступ не ко всем его папкам и файлам, а только к тем, которые на нем специальным образом “размещены” и открыты для просмотра через WWW.

закладка, позволяющая перейти в нужную часть документа. Имя закладки отделяется от имени файла символом '#'.

В целях совместимости имена файлов, размещаемых в Интернет, обычно строятся по правилам DOS - то есть, состоят из латинских букв, цифр и символа подчеркивания и имеют длину не более 8 символов. С другой стороны, web-страницам принято давать раширение *.html, а не *.htm.

Следует также помнить, что URL чувствителен к регистру символов, то есть, http://www.tht.ru/ и http://www.tnt.ru/ – это не один и тот же адрес.

Например, один из файлов страницы кафедры прикладной математики НГАСУ имеет полный URL http://www.sibstrin.ru/prikl/person.html, из чего можно заключить, что он находится на сервере НГАСУ в папке с именем prikl.

Если в URL не указано имя html-файла, это означает, что документ имеет имя по умолчанию, которое может назначаться при администрировании сервера. Чаще всего это имя index.html, так что URL http://www.host.ru/ может означать то же самое, что http://www.host.ru/index.html.

Ссылка, в которой указан полный URL документа, называется абсолютной. Абсолютные ссылки используются для связи с внешними ресурсами Интернет, URL которых известен нам и не меняется.

Относительная ссылка ссылается на документ, опуская общую адресную часть. Например, если из документа index.html нужно сослаться на документ test.html, находящийся в той же папке, это можно сделать ссылкой вида
<a href="test.html">документ test.html</a>

При использовании относительной ссылки можно ссылаться на папки, которые являются как вложенными, так и родительскими по отношению к папке, в которой расположен исходный документ. Например, ссылка на рисунок с именем my.jpg, находящийся во вложенной папке images может иметь вид
<a href="images/my.jpg">посмотрите рисунок</a>

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

Рассмотрим пример создания гиперссылки на страницу, расположен­ную на другом сервере по отношению к серверу, на котором расположен до­кумент:

<а href=" http://www.midi.ru"> Midi-музыка </а>

Действие этого фрагмента программы таково: на экране появится гиперссылка Midi-музыка, при щелчке по которой произойдет переход на Web-страницу, расположенную по адресу http://www.midi.ru.

Заметим, что здесь имя тега «а», имя атрибута — «hreft», а значение ар­гумента — это адрес в сети (URL).

С помощью гиперссылки можно ссылать и на любое место внутри самой страницы. Это делается при помощи так называемого якоря. Якорь задается парным тегом <A>, использующим обязательный атрибут NAME=. Значением этого атрибута является имя якоря - любая последовательность латинских букв и цифр. Т.о, якорь указывает на то место страницы, на которое произойдет ссылка. Например, в самом начале Web-страницы отметим какое-то место якорем Jakor:

<A NAME="Jakor"> на это место страницы указывает якорь Jakor</A>.

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

 

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

< A HREF="С:\Мои документы\link.htm # Jakor">.

В рассматриваемом примере произойдет быстрое «листание» документа и пользователь мгновенно окажется в начале просматриваемого документа. Браузер будет искать указанную метку на данном сервере и на текущей странице.

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

 

Тема: WEB-графика.

Выбор различных цветов для оформления Web-страницы может значительно улучшить внешний вид и "читабельность" документа.

Основной цветовой набор HTML-документа указывается через опции тага <BODY>. Это следующие опции: BGCOLOR="цвет" TEXT="цвет" LINK="цвет" ALINK="цвет" VLINK="цвет". Они обозначают, соответственно, цвет фона документа, цвет текста, цвет непосещенных ссылок, цвет активной (нажатой в данный момент) ссылки, цвет посещенных пользователем ссылок. Цвета можно указывать через их имена, либо через шестнадцатиричные коды. В первом случае имена цветов такие же, как в большинстве языков программирования. Все браузеры поддерживают стандартный цветовой набор Windows:

Aqua	Black	Blue	Fuchsia	Gray	Green	Lime
Navy	Olive	Purple	Red	Silver	Teal	Yellow

Таблица 6. Некоторые цвета Windows, поддерживаемые браузерами

Кроме того, цвета можно вводить, указывая информацию о яркости красной, зеленой и синей компонент в шестнадцатиричном коде. В этом случае перед кодом цвета ставится символ #. Коды компонет могут принимать значения от 00 до FF включительно. Так, белому цвету соответствует код #FFFFFF, черному - #000000, красному - #FF0000, зеленому - #00FF00, синему - #0000FF и т.д. Для того, чтобы цвета документа корректно отображались различными браузерами и при 256-цветном режиме монитора, следует использовать только интенсивности компонент, равные 00, 33, 66, 99, CC и FF - всего насчитывается 216 таких цветов. Впрочем, 256-цветных мониторов остается все меньше и это требование постепенно теряет актуальность. Используя документ по адресу http://pers.narod.ru/study/inet/colors.html, Вы можете поэкспериментировать с цветами.

Пример указания цветов в таге <body>:
<body bgcolor="white" text="black" link="#009900" alink="#006600" vlink="#003300">

Указывая код цвета любым из перечисленных способов, можно изменять цвет любой части текста, заключая ее в таг вида <FONT COLOR="цвет">часть текста</FONT>, например, этот текст заключен в таг <font color="#ffcc00">...</font>

Кроме того, HTML позволяет изменить фоновый цвет таблицы, а также отдельной строки или ячейки таблицы. Для этого достаточно в таге <TABLE>, <TR> или <TD> указать опцию вида BGCOLOR="цвет". Цвет обрамления таблицы, строки или ячейки можно изменить с помощью опции BORDERCOLOR="цвет".

 

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

Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.

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

Формат JPG используется для хранения полноцветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16.7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web-страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательный вариант картинки.

Из доступных приложений эффективно управлять файлами в форматах GIF и JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw. Для подготовки изображений можно использовать любой графический редактор, позволяющий сохранять файлы в этих форматах (например, графический редактор Paint).

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

Например, <IMG SRC="picture1.gif">.

При отображении рисунка браузер использует его реальные размеры. Если же рисунок нужно отмасштабировать, применяют атрибуты WIDTH= и HEIGHT=, задающие ширину и высоту рисунка в пикселах.

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

Например,

<IMG SRC="picture1.gif" WIDTH="120" HEIGHT="50">.

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

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

Таблица1 - Атрибуты изображения рисунка

Название атрибута	Значения атрибута	Назначение атрибута
ALIGN= атрибут взаимодействия с текстом	BOTTOM   MIDDLE   TOP   LEFT     RIGHT	Нижняя граница изображения совмещается с основанием строки. Середина изображения совмещается с серединой текстовой строки. Верхняя граница изображения совмещается с верхним краем строки. Изображение размещается у левого края страницы, а последующий текст размещается справа от него. Изображение размещается у правого края страницы, а последующий текст размещается слева от него.
HSPACE=	Любое число	Величина промежутка между изображением и текстом (в пикселах) по горизонтали.
VSPACE=	Любое число	Величина промежутка между изображением и текстом (в пикселах) по вертикали.
ALT=	Нужный текст	Отображение альтернативного текста для изображения. Атрибут используется для тех случаев, если картинка не может быть загружена, т.е. нет средства для ее просмотра. Альтернативный текст отображается в виде всплывающей подсказки, появляющейся при наведении на картинку указателя мыши.

 

Еще один способ применения изображений на Web-страницах состоит в использовании их в качестве фонового рисунка.

Фоновый рисунок задается с помощью атрибута BACKGRAUND= в теге <BODY>. Значением этого атрибута является адрес файла с изображением.

Например,

<BODY BACKGRAUND= "aaa.gif" TEXT="YELLOW"> - фоном Web-страницы является файл aaa.gif, текст на этом фоне выводится желтым цветом.