Ссылки

Сайт как правило состоит из нескольких страниц. Главная страница обычно – index.html.

Представим, что у нас на сайте есть также страничка «Контакты».



Создадим ее аналогично главной страничке

<html>
<head>
<title>Контакты</title>
</head>
<body>
Мои контакты
<br>
тел. 111-22-33
<br>
сайт: maryko.ru
</body>
</html>

Сохраним страничку под именем contact.html в той же папке (директории), что и index.html.

Теперь вернемся к «Главной» страничке index.html, в ней разместим следующий код:

<html>
<head>
<title>Главная</title>
</head>
<body>
основной текст страницы
<br>
Мои контакты
</body>
</html>

Сохраняем файл под именем index.html.

Сейчас фраза «мои контакты» является просто текстом на нашей страничке. Для того чтобы превратить ее в ссылку используем тег <a>:

<a href="contact.html">Мои контакты</a>

Сохраняем и смотрим, что получилось. Теперь это не просто текст, а самая настоящая ссылка!

Идем дальше. В коде страницы contact.html меняем строку:

сайт: maryko.ru

на строку

сайт: <a href="http://www.maryko.ru/blog">maryko.ru</a>

Таким образом, Вы со своей странички попадете ко мне на сайт:)

У тега <a> есть вспомогательный атрибут target. Если мы в коде странички index.html заменим

<a href="contact.html">Мои контакты</a>

на:

<a href="contact.html" target="_blank">Мои контакты</a>

То наша страничка «Контакты» будет открываться в новом окне.
Также для тега <a> есть атрибут title:

<a href="contact.html" target="_blank" title="Контакты">Мои контакты</a>

При наведении мышкой на фразу «Мои контакты», появится название ссылки – Контакты. Это так называемая всплывающая подсказка.

Ссылка на адрес электронной почты.

<a href="mailto:name@post_name.ru">Адрес электронной почты</a>

Где name@post_name.ru – это собственно адрес Вашей электронной почты.
При нажатии на такую ссылку запускается почтовая программа, установленная по умолчанию (например Outlook). Если программа не установлена, то ссылка не откроется, но пользователь увидит e-mail.

Чтобы пользователь не ломал голову над тем, что написать в теме сообщения, мы можем сделать это за него:

<a href="mailto:name@post_name.ru ?subject=Вопрос с сайта «Название_сайта»">Адрес электронной почты</a>

Ссылка на документ.

Создадим документ «1.doc» в папке, где лежит файл index.html.

В файле index.html добавим строку:

<a href="1.doc">Текстовый файл</a>

При нажатии на данную ссылку, откроется наш файл «1.doc».

Ссылки внутри одной страницы — якоря.

Иногда возникает необходимость сделать ссылку не на другую страницу, а на элемент, находящийся внутри той же страницы. Для этого используют так называемые якоря.

Например, Вам необходимо в конце страницы поместить ссылку “Вернуться в начало страницы”. Для этого можно использовать атрибут id:

<H3 id="top">Заголовок страницы</H3>
<br>
основное содержание страницы
<a href="#top">Вернуться в начало страницы</a>

Таким образом, при нажатии на ссылку «Вернуться в начало страницы», браузер перемещает Вас к заголовку.

Готовые шаблоны

Понравилась статья?

Поделитесь ей с друзьями:

Есть вопросы? Задайте их через форму комментариев.
 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *