Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Создание гиперссылок. Виды гиперссылок
Цель: Изучить понятие гиперссылки и их виды
Содержание:
Учебная задача 1
Учебная задача 2
Учебная задача 3
Практика
Учебная задача 1: Изучи понятие гиперссылки в HTML-документах.
Важнейшей особенностью web-страниц являются гиперссылки. Они позволяет из данного места документа перейти к определенному месту того же документа, на другие web-сайты или на документы, которые не являются частью сайта, организовать доступ к удаленному файлу, запустить программу электронной почты или что-либо еще. Текст на странице, который является гиперссылкой, как правило, выделяется цветом и подчеркивается.
Для задания перехода по гиперссылке в HTML используется блок <A>…</A>:
<A href=адрес> текст ссылки </A>
Здесь адрес – имя (или адрес в Интернете) файла, на который необходимо сослаться. Блоки <A>…</A> не могут вкладываться друг в друга.
Пример
<html>
<head>
<meta content="text/html; http-equiv="content-type">
charset=windows-1251"
<title>Использование ссылок</title>
</head>
<body>
<a href="http://www. *****">Ссылка на сайт *****</a>
</body>
</html>
К содержанию
Учебная задача 2: Изучи понятие типовых форм записи ссылок
Самое простое – это задать имя другого HTML-документа, к которому нужно перейти:
<A href ="Help. htm">Справка </A> |
Такая ссылка приведет к появлению в окне браузера выделенного слова Справка, при нажатии курсором мыши в окно будет загружен документ Help. htm. Адрес ссылки должен быть заключен в кавычки, так как некоторые браузеры могут не понять его без кавычек.
Замечание. Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если не указан сервер, переход будет выполнен на текущем сервере. Из этого следует, что если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге, то вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или в Интернет. Таким образом, появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
На практике, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере для его возможной загрузки. В этом случае придется вставить в HTML-документ примерно такую ссылку:
<A href="http: //www. /home/ChuvakhinNikolai/pr. htm"> |
Замечание. Имя конкретного файла может быть и не указано (например http: //www. ). Тем не менее в окне браузера все же появляется нужная страничка. В этом случае предполагается, что загружается файл index. html или index. htm.
Такая ссылка
<A href ="ftp: //server/directory/file. ext">Выгрузить файл</A> |
запустит протокол передачи файлов и начнет выгрузку файла file. ext, находящегося в каталоге directory на сервере server (если имя файла не указано, то будет открыт соответствующий каталог, в котором файл можно выбрать вручную).
<A href ="mailto: *****@***box"> Послать письмо </A> |
Если сделать переход по такой ссылке, то на экране откроется окно почтовой программы. В строке To: ("Куда") уже будет указано *****@***box.
К содержанию
Учебная задача 3: Изучи создание гиперссылок.
Ссылка в пределах документа (якорь)
С помощью ссылок можно перейти на определенное место достаточно длинной страницы. Для этого нужно, используя атрибут name тега <A>, расставить в тексте метки, называемые также якорями.
<body>
<a name="top"></a>
...
<a href="#top">Наверх</a>
</body>
Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Ссылка на якорь начинается символом #, после чего идет идентификатор якоря (выбирается произвольно).
Типичное использование таких внутренних ссылок – переход к началу страницы в больших документах или оглавление в виде гиперссылок на соответствующий раздел текста. Рассмотрим эту технологию на другом примере:
Пример: Оглавление
<HTML> <HEAD> <TITLE>Локальные ссылки</TITLE> </HEAD> <BODY> <H1 align=”center”>Оглавление:</H1> <OL> <A href=#first><LI>Часть первая</LI></A> <A href=#second><LI>Часть вторая</LI></A> <A href=#third><LI>Часть третья</LI></A> </OL> <A name=first><H1>Часть первая</H1></A> <!-- … --> <A name=second><H1>Часть вторая</H1></A> <!-- … --> <A name=third><H1>Часть третья</H1></A> </BODY> </HTML> |
Здесь теги <OL>, <LI> служит для создания нумерованного списка
Замечание. Можно указать ссылку на якорь, который располагается в пределах другого документа. Например:
<A href ="document. htm#chapter_1"> Глава 1 </A> |
<A name= chapter_1><H1> Глава 1 </H1></A> |
Цвет гиперссылок
По стандарту ссылка обозначена синим и подчеркнута, но можно произвольно задать цвет ее выделения. Для этого предназначены атрибуты link, alink и vlink. Пример:
<BODY bgcolor=white text=black link=blue alink=red vlink=purple> |
синий – цвет гиперссылок документа
красный – цвет гиперссылки, на которой установлен указатель мыши, нажата левая кнопка мыши
пурпурный – цвет для тех гиперссылок, которые уже были выбраны в ходе работы
Карта изображения
Рисунок может представлять собой ссылку. Однако возможно, что части одного изображения служат ссылками на разные страницы. Такое изображение называется графической картой. Карта по внешнему виду ничем не отличается от обычного рисунка, но при этом он имеет невидимые зоны разной формы, где каждая из них является ссылкой.
Тег <img> в этом случае имеет атрибут usemap, значение которого является именем карты, которая размещается в файле документа. Описание карты не обязательно должно следовать за тегом <img>, часто его располагают в конце документа.
Карта подготавливается при помощи двух тегов – <map> и <area>. Описание карты располагается в блоке тега <map>, а активные фрагменты-ссылки рисунка (они задают переходы по ссылкам) перечисляются в тегах <area>.
Какой путь следует указывать при создании ссылок
При создании локальных ссылок надо понимать, какой путь (URL) следует указывать, поскольку это зависит от расположения файлов. Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 7.2).
Рис. 7.2.
Необходимо сделать ссылку из исходного документа на ссылаемый. В этом случае код будет таким:
<a href="Ссылаемый документ. html">Локальная ссылка</a>
Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 7.3).
Рис. 7.3.
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже:
<a href="../Ссылаемый документ. html">Локальная ссылка</a>
3. Файлы размещаются в разных папках (рис. 7.4).
Рис. 7.4.
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
<a href="../../Ссылаемый документ. html">Локальная ссылка</a>
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 7.5).
Рис. 7.5.
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку – в папке. В этом случае путь к файлу будет следующий.
<a href="Папка/Ссылаемый документ. html">Локальная ссылка</a>
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
<a href="Папка 1/Папка 2/Ссылаемый документ. html">
Локальная ссылка</a>
К содержанию
Практика
Создайте гипертекстовый справочник. Спланируйте работу по следующей схеме:
a. Выберите тему справочника и подберите материал. Можно получить интересные и полезные справочники по отдельным разделам географии, информатике, другим школьным дисциплинам. Не пытайтесь охватить справочником большой материал – это задание учебное, ограниченное по времени и не все тонкости HTML известны к этому уроку.
b. Нарисуйте иерархическую схему справочника на листе бумаги. Внутри каждого блока, изображающего документ на схеме, запишите название раздела справочника и имя HTML-файла. В системе имен файлов с программами настоятельно рекомендуется использовать иерархический порядок. Основной файл может иметь имя 0.htm. Файлы следующего уровня имена 01.htm, 02.htm, ... (или 001.htm, 002.htm, ...). Файлы, непосредственно подчиненные файлу 03.htm, имена – 031.htm, 032.htm, ... И так далее. Программисту легко запутаться в многочисленных файлах справочника, если не пользоваться такой системой.
c. Разработайте единый стиль оформления документов. Подберите:
· цветовую заливку или фоновую иллюстрацию;
· основной цвет текста;
· дополнительный цвет для выделения отдельных элементов;
· иллюстративный графический материал.
Зафиксируйте типографские приёмы оформления отдельных частей текста и используйте их единообразно во всех документах приложения.
d. Тщательно продумайте навигационные элементы справочника и их расположение на экране пользователя.
e. Напишите программы и проведите авторское тестирование.
f. Передайте продукт в опытную эксплуатацию и исправьте недочёты, замеченные пользователями-тестерами.
