Гиперссылки и их использование в сайтостроенииГипертекст – это нелинейный текст, содержащий внутри себя ссылки-переходымежду html-документами или переходы по тексту внутри одной страницы. Гиперссылки используются для навигации по сайту и формирования оглавлений. Следует отметить, что гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием, а курсор мыши на ссылке меняет свою форму. Для перехода по гиперссылке необходимо щелкнуть по ней мышкой, а для возврата из ссылки необходимо использовать навигационную кнопку браузера «Назад». За вставку гиперссылки отвечает конструкция < a> < /a>. В неё можно поместить текст, который будет являться ссылкой.У открывающего тега < a> есть обязательный атрибут href, отвечающий за адрес перехода в сети Интернет, или файла в вашем компьютере, или элемента в сложном, большом тексте html-страницы. Также у конструкции < a> < /a> есть необязательные параметры (см. табл. 2.4). Таблица 2.4 Атрибуты тега а
Как уже говорилось ранее, возможны два варианта использования конструкции < a> < /a>. Во-первых, её можно использовать, если вы хотите сослаться на другую html-страницу. Во-вторых, при помощи гиперссылок можно организовать что-то наподобие содержания (оглавления) для крупного текста, а также осуществить переходы по документу. Также возможен и третий вариант – установлениессылок на файлы, находящиеся на локальном компьютере. То есть осуществление операции загрузки. Формирование ссылки на Интернет-ресурс – самый простой вариант использования конструкции < a> < /a> и её атрибутов. Достаточно присвоить обязательному атрибуту href строку с полным адресом страницы (то есть, начиная с http: //) и поместить между тегами < a> и < /a> некоторый текст (см. рис. 2.9).На рис. 2.9. показано создание гиперссылки на страницу Интернет с примечанием.
< html> < head> < title> Гиперссылки< /title> < /head> < body bgcolor=" Aquamarine" >
< a href=" http: //uroki-html.ru" title=" Уроки HTML" > Перейтинасайтдляизученияязыка HTML < /a>
< /body> < /html> Рисунок 2.9. Ссылка на Интернет-ресурс
Заметьте, что текст гиперссылки немного отличается от обычного текста. Подчёркивание и цвет установлены по умолчанию. Ссылки на файлы, находящиеся в файловой системе вашего компьютера, организуются также с использованием обязательного атрибута href. Только на этот раз значение строки начинается ни с http: //, а с file: //. По умолчанию используется ссылка на файл текущего каталога. Это значит, что если файл, на который делается ссылка, находится в папке с проектом, можно не писать file: //, а лишь задать его имя (например, href=" file.html"). В противном случае, придётся писать полный путь, начиная с корневого каталога. Или использовать повышающие или понижающие конструкции, чтобы войти в определённую папку, относительно папки с проектом. Так, если в папку с проектом вложена другая папка (например, folder), а в ней находится необходимый файл (например, file.html), значение href будет выглядеть примерно следующим образом: href=" folder/file.html". И так далее, для каждой новой вложенной папки. Если папка с необходимым файлом находится на том же уровне вложения, что и папка с проектом, значение href будет выглядеть примерно следующим образом: href ="../folder/file.html". Если папка находится ещё выше, значит вновь необходимо использовать../ (../../ folder/file.html). Так можно сделать ссылку на любой файл, находящийся на вашем компьютере. Конечно, браузер попытается открыть файл самостоятельно. Однако если в нём нет поддержки соответствующего формата, файл не откроется и сработает загрузчик. Так произойдёт если, к примеру, сделать ссылку на текстовый файл с расширением.doc. Для организации переходов по html-тексту внутри одной веб-страницы недостаточно одной обычной ссылки с заданием параметра href. В случае, когда необходимо перемещаться по тексту, используют связку «ссылка + закладка (метка)». Закладка(метка) – это определенное значение атрибутов id и name. В случае, когда определяется переход по тексту, значение атрибута href начинается со знака #. Например, запись < ahref=" #Metka" > некоторый текст< /a> говорит о том, что необходимо найти в тексте элемент с id или name, значение которых равно " Metka" и прокрутить страницу так, чтобы этот элемент стал видимым. Теперь необходимо «пометить» тот текст или слово, к которому осуществляется переход. Возможны два варианта: использование атрибута id, либо использование атрибута name. Рассмотрим различие. Атрибут id можно использовать для любого html-элемента и переход состоится. То есть, вы можете написать, например, < h3 id=" my" > Параграф 1 < /h3> и сделать на него ссылку < a href=" #my" > Ссылка на первый параграф < /a>. Также возможна и такая запись: < a id=" my" > < h3> Параграф 1 < /h3> < /a> и даже такая запись < a id=" my" > < /a> < h3> Параграф 1 < /h3>. Во всех трёх примерах результат будет одинаковым. Атрибут name будет меткой только в том случае, если его задают для тега < a> < /a>. То есть запись < a name=" my" > < /a> подходит для осуществления перехода, в то время как запись < h3 name=" my" > Параграф 1 < /h3> к желаемому результату не приведёт. Конечно, атрибут id является наиболее функциональным. Его можно использовать как для конструкции < a> < /a>, так и в других тегах. Однако, старые браузеры могут не поддерживать переходы, осуществлённые подобным способом. Поэтому всегда проверяйте правильность отображения. Покажем использование ссылок внутри веб-страницы для создания оглавления книги (см. рис. 2.10) < html> < head> < title> Использование гиперссылок< /title> < /head> < body> < hr size=" 4px" color=" blue" > < h2 align=" center" id=" up" > Оглавление< /h2> < hr size=" 4px" color=" blue" > < a href=" #p1" > Перейтикпункту 1< /a> < br> < a href=" #p2" > Перейтикпункту 2< /a> < br> < a href=" #p3" > Перейтикпункту 3< /a> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < h3 id=" p1" > Пункт 1< /h3> < p> Здесь будет идти некоторый текст. < a href=" #s1" > это< /a> Cсылка на слово в другом параграфе < /p> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < a name=" p2" > < h3> Пункт 2< /h3> < /a> Здесь будет идти некоторый текст. < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < a name=" p3" > < /a> < h3> Пункт 3< /h3> < p> Здесь будет идти некоторый текст. А это < b id=" s1" > слово< /b> на которое была ссылка ранее. < /p> < a href=" #up" > Наверх< /a> < /body> < /html>
Рисунок 2.10. Оглавление из гиперссылок
Аналогично можно осуществлять переходы к конкретной части другой html-страницы. Только в этом случае перед знаком # необходимо указать адрес страницы, на которую осуществляется переход. Например, запись < a href=" my.html#my" > К параграфу my документа my.html < /a>, говорит о том, что необходимо открыть документ my.html (если такой существует), найти в тексте элемент с id или name, значение которых равно " my", и прокрутить страницу так, чтобы этот элемент стал видимым. В качестве гиперссылки может выступать не только текст, но и изображение < ahref= «my.html»> < imgsrc=1.jpg> < /a>. Чаще всего графические ссылки используются для создания меню(см. рис. 2.11) < html> < head> < title> Меню< /title> < /head> < body> < a href= " my1.html" > < img src=k1.jpg > < /a> < a href= " my2.html" > < img src=k2.jpg > < /a> < /body> < /html>
Рисунок 2.11. Меню графических ссылок
При создании фотогалерей в качестве адреса перехода используется имя самой увеличенной картинки. Покажем пример создания фото-галереи Л. Н. Толстого с использованием таблицы 4х2, где каждое фото специально уменьшено для более быстрой загрузки.В полном размере фото открываетсяс фотографиями, так чтобы сами уменьшенные фотографии служили ссылками на более крупные изображения (см. рис. 2.12). < html> < head> < title> < /title> < /head> < body> < table> < tr> < td> < a href=11.jpg> < img src=11.jpg width=" 100" > < /a> < /td> < td> < a href=12.jpg> < img src=12.jpg width=" 100" > < /a> < /td> < td> < a href=13.jpg> < img src=13.jpg width=" 100" > < /a> < /td> < td> < a href=14.jpg> < img src=14.jpg width=" 100" > < /a> < /td> < /tr> < tr> < td> < a href=21.jpg> < img src=21.jpg width=" 100" > < /a> < /td> < td> < a href=22.jpg> < img src=22.jpg width=" 100" > < /a> < /td> < td> < a href=23.jpg> < img src=23.jpg width=" 100" > < /a> < /td> < td> < a href=24.jpg> < img src=24.jpg width=" 100" > < /a> < /td> < /tr> < /table> < /body> < /html>
Рисунок 2.12. Меню графических ссылок
Кроме использования отдельных картинок в качестве гиперссылок, можно сделать создать интерактивную графическую карту, когда отдельные участки рисунка выступают в качестве ссылок. Таким образом, графическая карта – это изображение с несколькими активными областями, позволяющими осуществлять переходы по разным областям, в зависимости от того, в какую область картинки кликнет пользователь. Чтобы создать графическую карту следует: - вставить необходимое изображение с помощью тега < img>; - определить, какие отдельные участки изображения будут активными, то есть использоваться в качестве ссылок, а затем определите координаты этих участков в пикселях. - использовать теги < map> < /map> и < area> < /area >, чтобы назначить ссылку каждому из участков; - добавить специальный атрибут тэга < img>. Покажем, как можно создать графическую карту – переходы на страницы нужного цвета от рисунка палитры красок. Сначала необходимо создать страницы, на которые будет организован переход (см. табл.2.5) Таблица 2.5 Создание цветных страниц
Откроем рисунок в любом графическом редакторе и определим необходимые координаты интерактивных областей. При использовании окружностей в качестве интерактивных областей следует определить координаты точки центра области и ее радиус (см. рис. 2.13).
Рисунок 2.13. Определение координат После этого создается файл с интерактивной графической картой (см. рис. 2.14).
Рисунок 2.14. Создание графической карты Вопросы и задания для самостоятельной работы 1. Что такое гиперссылка, с помощью каких тегов и атрибутов она формируется? 2. Проведите классификацию гиперссылок с примерами использования(см. табл. 2.6)
3. В чём принципиальное отличие использование атрибутов id и name в качестве меток? Приведите пример использования обоих способов задания ссылки на элемент страницы. 4. Подробнее изучите вопрос организации ссылок на файлы, находящиеся в файловой системе компьютера. Есть ли принципиальные отличия в записи пути в разных операционных системах? 5. Что такое графическая карта, какие фигуры можно использовать в качестве активных областей. 6. Подберите несколько загадок о фруктах и овощах и разместите их на одной веб-странице. Создайте отдельные файлы веб-страниц, в которых разместите в виде изображений отгадки. Результатом вашей работы должно стать оглавление загадок с переходом к тексту загадок, а затем к отгадке (см. рис. 2.15)
Рис. 2.15. Меню загадок 7. Создайте оглавление-меню для перехода и прослушивания своих любимых песен (просмотра фильмов, посещения игр т.п.) 8. Создайте графическую карту с изображением компьютера и переходам к тексту по каждому из устройств. На странице перехода должна располагаться краткая теоретическая справка об устройстве и ссылка переход к соответствующей фотогалерее (таблица не менее, чем 3х3).
|
