Создание основы сайта: Гиперссылки
Меню навигации оформлено, осталась самая малость - заставить его работать, то есть при выборе пункта меню должен осуществляться і іереход на страницу, указанную в меню. Это свойство гипертекста и превращает простую совокупность обычных текстовых страниц в гипертекстовый документ.
Преобразование текстового или графического объекта в гиперссылку возможно с помощью парного тега </а>, его обязательным атрибутом href является документ, на который и указывает ссылка, дополнительный атрибут title отображает текст подсказки, появляющейся при наведении указателя мыши на область гиперссылки.
Применим полученные знания, оформив надлежащим образом пункты нашего меню.
<a href=index.html title="Переход на главную страницу сайта компании Проктел">Главная страница</a> - в этой строке переход осуществляется на страницу с именем index. html, всплывающая подсказка показывает текст Переход на главную страницу сайта компании Проктел, а гиперссылкой является надпись Главная страница.
<a href=str2.html title="Предоставляемые компанией Проктел услуги">Услуги компании</а> - здесь переход осуществляется на страницу с именем str2 .html, всплывающая подсказка показывает текст Предоставляемые компанией Проктел услуги, а гиперссылкой является надпись Услуги компании.
<a href=str3.html title="Часто задаваемые вопросы по услугам компании Проктел">Вопросы и ответы</a> - в этой строке переход осуществляется на страницу с именем str3 .html, а всплывающая подсказка показывает текст Часто задаваемые вопросы по услугам компании Проктел, гиперссылкой является надпись Вопросы и ответы.
Рассмотрим на примере применение тегов для оформления гиперссылок.
Осталась последняя задача - скопировать созданную таблицу с навигационным меню на все три страницы нашего сайта. Для этого выделяем текстовый фрагмент, начиная с тега <table> и заканчивая тегом </table>, выбираем пункт меню Правка => Копировать, копируя выделенный фрагмент в буфер памяти. Открываем в текстовом редакторе страницы str2.html и str3.html и, установив курсор после тега заголовка <h1>, выбираем пункт меню Правка => Вставить, тем самым вставляя текстовый фрагмент из буфера памяти в тело страницы.
Несмотря на то что структура страницы str3.html не оформлена, меню навигации страницы работает. В этом можно убедиться, сохранив все три файла и вызвав их в окне браузера, а затем использовав для перехода между страницами созданное навигационное меню.
Продолжим работать со страницей str3.html и для начала все-таки структурируем ее согласно правилам, введя в ее содержимое необходимые теги.
Поскольку страница посвящена часто задаваемым вопросам и на ней будут размещены достаточно объемные ответы, которые явно не поместятся в окне браузера, оформим ее с помощью полностью отображаемого на экране списка вопросов. Эти вопросы будут гиперссылками на ответы к ним. Выбирая необходимый вопрос, пользователь щелкает на нем кнопкой мыши, активизируя гиперссылку. Ссылка перемещает его к ответу, который может находиться в любом месте страницы.
Для реализации данной задачи сначала определяются так называемые якоря - точки, с которых начинаются ответы. Они представляют собой такие места в тексте страницы, на которые необходимо перенести пользователя при активизации им гиперссылки. Это выполняется с помощью все того же тега <а></а>, только записанного без атрибута href. Вместо этого атрибутом name явно задается имя якоря, на который и будет указывать гиперссылка. В нашем случае для первого вопроса это будет выглядеть так: <а name=vopros> </a>. Затем обычным способом прописываем гиперссылку с указывающего объекта с помощью атрибута href, обязательно поместив в параметрах префикс #, говорящий о том, что ссылка действует внутри документа. В нашем случае она будет выглядеть следующим образом: <а href ="#vopros">Вопрос 1.</a>.
Кроме того, с помощью гиперссылок можно организовать и автоматический запуск почтового клиента, если пользователь решит задать вопрос письменно. Для этого в теге организации гиперссылки используется значение mailto атрибута href, в котором явно задается адрес электронной почты получателя, в нашем случае компании «Проктел». С помощью дополнительного атрибута ?subject можно задать тему письма, а атрибут body позволит оформить его шаблон. Рассмотрим это на примере.
- <а href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript . ru - строка задает вызов почтовой программы, установленной по умолчанию, с явным указанием почтового адреса Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript в поле Кому.
- ?subject=Bonpoc%20в%20компанию%20Проктел - строка, явно заполняющая поле Тема текстом Вопрос в компанию Проктел, а совокупность символов %20 обозначает пробел.
- &body=Здравствуйте%20уважаемые%2сотрудники%20обраща-юсь%20к%20вам%20со%20следующим%20вопросом:"> - строка, явно прописывающая начало письма следующим текстом: Здравствуйте, уважаемые сотрудники, обращаюсь к вам со следующим вопросом:.
- активировав данную ссылку. </а>Спасибо. - строка, определяющая гиперссылку с текстом активировав данную ссылку.
В результате выполнения всех манипуляций страница str3.html в окне браузера будет выглядеть следующим образом.
При активизации гиперссылки откроется почтовая программа, в которой будет заполнено поле с текстом письма.
| ← Создание основы сайта: Графические объекты | Создание основы сайта: Таблицы → |
|---|