Студопедия — Гиперссылки и их использование в сайтостроении
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Гиперссылки и их использование в сайтостроении






Гипертекст – это нелинейный текст, содержащий внутри себя ссылки-переходымежду html-документами или переходы по тексту внутри одной страницы. Гиперссылки используются для навигации по сайту и формирования оглавлений. Следует отметить, что гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием, а курсор мыши на ссылке меняет свою форму. Для перехода по гиперссылке необходимо щелкнуть по ней мышкой, а для возврата из ссылки необходимо использовать навигационную кнопку браузера «Назад».

За вставку гиперссылки отвечает конструкция < a> < /a>. В неё можно поместить текст, который будет являться ссылкой.У открывающего тега < a> есть обязательный атрибут href, отвечающий за адрес перехода в сети Интернет, или файла в вашем компьютере, или элемента в сложном, большом тексте html-страницы. Также у конструкции < a> < /a> есть необязательные параметры (см. табл. 2.4).

Таблица 2.4

Атрибуты тега а

Атрибут Характеристика
href Указание адреса документа, на который необходимо перейти
charset Указание кодировки текста, на который введёт ссылка
coords Установка координат активной области
hreflang Язык текста по ссылке
name Имя закладки (якоря) внутри документа. Используется для переходов по тексту одного html-документа
rel Отношение между документом, на котором расположена ссылка, и документом, на который эта ссылка ведёт. В качестве значения принимает строку
rev Отношение между документом, на который ведёт ссылка, и документом, на котором расположена ссылка. В качестве значения принимает строку
shape Задание формы активной области для изображения, которое является ссылкой. Может принимать значения: default (по умолчанию), rect (прямоугольная форма), circle (круглая форма), poly (полигон)
target Задание способа открытия ресурса. Может принимать значения: _blank (открытие в новом окне), _self (открытие в том же окне), _parent (открыть в родительском фрейме; работает как _self, если фреймов нет), _top (отменяет все фреймы и загружает страницу в полном окне). По умолчанию атрибут определяется, как _self
title Задание всплывающей подсказки, которая появляется при наведении на текст ссылки. В качестве значения принимает строку текста

 

Как уже говорилось ранее, возможны два варианта использования конструкции < 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

Создание цветных страниц

Синий Зеленый
< html> < body bgcolor=" blue" > < /body> < /html> < html> < body bgcolor=" green" > < /body> < /html>
Красный Желтый
< html> < body bgcolor=" red" > < /body> < /html> < html> < body bgcolor=" yellow" > < /body> < /html>

 

Откроем рисунок в любом графическом редакторе и определим необходимые координаты интерактивных областей. При использовании окружностей в качестве интерактивных областей следует определить координаты точки центра области и ее радиус (см. рис. 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).

 







Дата добавления: 2014-11-10; просмотров: 1585. Нарушение авторских прав; Мы поможем в написании вашей работы!



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

Расчетные и графические задания Равновесный объем - это объем, определяемый равенством спроса и предложения...

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

Обзор компонентов Multisim Компоненты – это основа любой схемы, это все элементы, из которых она состоит. Multisim оперирует с двумя категориями...

Классификация ИС по признаку структурированности задач Так как основное назначение ИС – автоматизировать информационные процессы для решения определенных задач, то одна из основных классификаций – это классификация ИС по степени структурированности задач...

Внешняя политика России 1894- 1917 гг. Внешнюю политику Николая II и первый период его царствования определяли, по меньшей мере три важных фактора...

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

Патристика и схоластика как этап в средневековой философии Основной задачей теологии является толкование Священного писания, доказательство существования Бога и формулировка догматов Церкви...

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

Вопрос 1. Коллективные средства защиты: вентиляция, освещение, защита от шума и вибрации Коллективные средства защиты: вентиляция, освещение, защита от шума и вибрации К коллективным средствам защиты относятся: вентиляция, отопление, освещение, защита от шума и вибрации...

Studopedia.info - Студопедия - 2014-2024 год . (0.013 сек.) русская версия | украинская версия