Гиперсвязь с документом, находящимся в той же файловой системе, с использованием протокола file
Для гиперсвязей с документами только в пределах данной локальной файловой системы можно воспользоваться специальным протоколом file.
Синтаксис:
<A HREF="file://путь_к_файлу">Якорь</A>.
Пример:
Предположим, что документ предназначен для пользователя IBM PC-совместимого компьютера под управлением Windows 95. Пусть HTML-документ с именем LocalTest.html находится на одном из локальных дисков, а документ index.html, на который сделана ссылка - на локальном диске C: в директории \DIMA\HOMEPAGE. Тогда гиперсвязь с файлом index.html в файле LocalTest.html кодируется на HTML так:
<A HREF="file:///C|/DIMA/HOMEPAGE/index.html"> Локальная версия домашней страницы</A>
Как видно из примера, имя дисковода обозначается соответствующей латинской буквой, за которой следует вертикальная черта | (а не двоеточие!). Сразу после двоеточия идут три косые черты подряд, при этом, самая правая из них обозначает корневую директорию.
Гиперсвязь с документом, находящимся на другом
WWW-сервере
В этом случае требуется указать URL полностью по правилам, описанным ранее.
Синтаксис:
<A HREF="http://адрес_сервера:номер_порта /имя _директории/имя_файла">Якорь</A>
Пример:
Гиперсвязь с документом http://bunny.cs.uiuc. edu: 8000/302/index.html:
Курс <A HREF= "http: //bunny.cs.uiuc.edu: 8000/302/ind-ex.html"> Software Engineering </A>, который ведет профессор Волков, в значительной степени посвящен работе над большими программными проектами.
На экране это будет выглядеть следующим образом:
Курс Software Engineering, который ведет профессор Волков, в значительной степени посвящен работе над большими программными проектами.
Гиперсвязь с сервером электронной почты
(Mail Server)
Большинство программ просмотра позволяет отправить электронное письмо по адресу, указываемому в просматриваемом HTML-документе. Для работы с сервером электронной почты программа просмотра читателя документа также должна быть предварительно настроена.
Синтаксис:
<A HREF="mailto:электронный_адрес">Якорь</A>.
Пример (адрес вымышленный!):
<A HREF="mailto:user@aaa.bbb.ccc.ru">Жду ваших писем!</A>
На экране это будет выглядеть следующим образом:
Жду ваших писем!
Включение графики в html-документы
Включение изображения из графического файла (Inline Image)
В HTML-документ можно включить изображения из графических файлов в форматах GIF, JPEG и некоторых других. Наиболее часто используемыми в WWW являются графические форматы GIF и JPEG.
Синтаксис:
<IMG SRC="местоположение_файла" ALIGN= left | right | top | texttop | middle | absmiddle | bottom | absbottom WIDTH=nnn HEIGHT=nnn HSPACE=nnn VSPACE=nnn ALT="альтернативный текст">.
Атрибут SRC служит для указания программе просмотра имени и местоположения графического файла. Чтобы программа просмотра смогла найти графический файл с изображением, включаемым в HTML-документ, необходимо указать имя и местоположение графического файла в WWW-пространстве. При этом, в зависимости от взаимного расположения HTML-файла с документом и графического файла, можно указывать либо абсолютный URL графического файла, либо его координаты относительно HTML-файла с документом. Ниже мы рассмотрим, в порядке возрастания сложности, следующие три ситуации:
1. графический файл находится на том же сервере и в той же директории, что и сам HTML-документ;
2. графический файл находится на том же сервере, что и сам HTML-документ, но в другой директории;
3. графический файл и HTML-документ находятся на разных серверах.
В любом случае допустимо указание полного, или, как говорят, абсолютного, URL графического файла. Абсолютный URL включает имя протокола, адрес сервера, номер порта (если он отличается от принимаемого по умолчанию номера 80), имя директории и имя файла. Однако, в первых двух из вышеперечисленных случаев указание абсолютного URL часто не только избыточно, но и нежелательно, поскольку значительно усложняет перенос документа с одного сервера на другой или даже из одной директории в другую.
Если файл с изображением находится на том же сервере (или на том же локальном диске) и в той же директории, что и сам HTML-документ, то достаточно указать только имя этого файла.
Атрибуты ALIGN, WIDTH, HEIGHT, HSPACE и VSPACE, задающие расположение рисунка на странице, являются необязательными, а ALT, задающий так называемый альтернативный текст, - обязательным, поскольку он используется неграфическими программами просмотра.
При помощи необязательного атрибута ALIGN флага <IMG ...> можно управлять расположением изображения на странице относительно текста и других изображений. Параметры атрибута выполняют следующие действия:
· bottom - нижняя сторона изображения выравнивается по базовой линии следующего за ним текста;
· absbottom - нижняя сторона изображения выравнивается по низу строки следующего за ним текста;
· absmiddle - горизонтальная линия, проходящая через центр строки следующего за рисунком текста выравнивается по центру изображения;
· middle - базовая линия следующего за рисунком текста выравнивается по центру изображения;
· top - изображение располагается на одной линии с самым высоким объектом (текстом или рисунком) в строке;
· texttop - изображение располагается на одной линии с самым высоким символом текста в строке;
· left - изображение выравнивается по левому краю окна, а следующий за ним текст обтекает его справа;
· right - изображение выравнивается по правому краю окна, а следующий за ним текст обтекает его слева.
Используя атрибут ALGIN= со значениями LEFT или RIGHT можно создать "плавающую" картинку, которую будет обтекать текст. В конце плавающего объекта обязательно должна присутствовать тэг <BR> с атрибутом CLEAR=, который прекращает обтекание картинки. После этой команды текст выводится ниже графического файла
При помощи атрибутов WIDTH и HEIGHT задают размеры изображения в пикселях, чтобы при загрузке HTML-документа программа просмотра сразу отвела под это изображение необходимое ему пространство на странице и загрузила основной текст, который можно читать, пока программа просмотра получает содержимое графического файла. Если истинный размер изображения, содержащегося в графическом файле, не совпадает с заданным при помощи атрибутов WIDTH и HEIGHT, то результат зависит от используемой программы просмотра. В частности, Netscape Navigator 3.0 соответствующим образом растягивает или сжимает картинку
Горизонтальный и вертикальный отступ между изображением и окружающим его текстом задается атрибутами HSPACE=nnn и VSPACE=nnn, где nnn - величина зазора, выраженная в пикселях.
Некоторые программы просмотра HTML-документов, ориентированные на использование текстовых терминалов, вообще не способны выводить изображения. Кроме того, при низкой скорости обмена информацией между WWW-сервером и клиентом пользователь может отключить загрузку изображений и просматривать только текст, чтобы избежать длительных задержек. Чтобы в этих случаях на месте изображений не было "пустого места", необходимо задать с помощью атрибута ALT для каждого рисунка так называемый альтернативный текст, который будет выводиться на его месте при невозможности вывода графики.
Задание движущегося текста
Тэг MARQUEE позволяет задать движущийся текст. Этот тэг работает, к сожалению, только в MS Internet Explorer.
Пример:
<B><FONT COLOR=GREEN>
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Движущийся текст. </MARQUEE>
</FONT></B>.
В этом примере текст Движущийся текст. двигается слева направо со скоростью 10 пикселей с задержкой 200 миллисекунд.
Существует несколько атрибутов этого тега:
· ALIGN=, размещающий текст в верхней (TOP), средней (MIDDLE) и нижней (BOTTOM) части бегущей строки;
· BEHAVIOR=, управляющий движением текста. Если его нет, то текст пробегает справа налево. Если задать BEHAVIOR=SCROLL, то текст будет просто пробегать по экрану. Это значение по умолчанию. Если указать BEHAVIOR=SLIDE, то текст выползает на экран и останавливается. Если использовать параметр ALTERNATE, то текст будет сначала выползать на экран, а потом, отскакивая от боковых стенок, прыгать;
· BGCOLOR= ,задает цвет фона бегущей строки;
· DIRECTION=, указывает направление движения текста (LEFT или RIGHT);
· HEIGHT= и WIDTH= задают толщину и ширину бегущей строки в пикселях или процентах от размера окна;
· HSPACE= и VSPACE= задают горизонтальные и вертикальные поля вокруг бегущей строки;
· LOOP= задает количество "пробегов" текста. Если вы хотите заставить бедный текст бегать вечно, то не используйте этот атрибут или задайте LOOP=INFINITE;
· SCROLLAMOUNT= определяет скорость "пробегания". Задается числами. 1 примерно равен скорости улитки, ползущей по монитору, а при SCROLLAMOUNT=8000 - вы просто ничего не увидите;
· для правильного задания скорости бегущей строки используйте вместе с предыдущем атрибутом атрибут SCROLLDELAY=, задающий скорость прорисовки текста в миллисекундах.
3. Задание на лабораторную работу
1. Создать html документ в соответствии с рис. 6.1.
Лабораторная работа № 6
студента гр. ИС 31 Матвеева Ивана Ивановича
Тема работы: Включение таблиц, связей и графики в HTML
документы
Содержание
1 Таблицы
2 Графика
3 Связи
Рис. 6.1. Заголовок и содержание разрабатываемого документа
2. Содержание документа (таблицы, графика, связи) должно быть выполнено в виде ссылок на соответствующие разделы документа.
3. Создать раздел документа Таблицы, в котором разместить две таблицы, выполненные в соответствии с рис. 6.2.
4. Скопировать в свой рабочий каталог файлы рисунков hardware.bmp и internet.gif.
5. Создать раздел документа Графика, в котором разместить бегущую строку, картинки и текст в соответствии с рис. 6.3. При этом обеспечить вывод на экран браузера альтернативного текста.
6. Создать из раздела Таблицы html - файл и присвоить ему имя Table.html.
7. Создать произвольный текстовый файл и присвоить ему имя lab6.doc.
8. Создать раздел документа Связи в соответствии с рис. 6.4, обеспечив ссылки на созданные файлы, на документ web.htm на WWW-сервере izone.com.ua в директории doc , и на сервер электронной почты.
Рис. 6.2. Раздел Таблицы