Поехали дальше. В предыдущем уроке мы рассмотрели Абсолютные и Относительные ссылки и, чтобы завершить тему, мы рассмотрим еще два вида ссылок это якорные ссылки и ссылки на адрес Е-мэйл почты.
1. Якорные ссылки.
Первым делом рассмотрим якорную ссылку, Вы наверняка уже с ними сталкивались. Такая ссылка используется, если у Вас, например, длинный документ, и Вы в самом низу документа и хотите попасть сразу на верх страницы. Чтобы не крутить ролик мыши внизу создается якорная ссылка нажав на которую нас перебросит в начало страницы. Может так же быть такой случай, когда в статье Вам нужно попасть в определенное место на странице. Это также возможно с помощью якорной ссылки. Так же есть возможность перехода в выбранное место и на другой странице.
И так, как же такие ссылки создаются. В нужном месте создается якорь, куда после клика на ссылки мы и попадем.
1. С использованием якоря:
Для начала создадим якорь, дав ему имя с помощью атрибута name="top" тега <a>. Теперь в ссылке для перехода, в атрибуте href="", указывается значение, т.е. имя созданного ранее якоря #top. Перед именем должен находиться символ решетки (#).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
много произвольного текста.
Перейти в начало страницы
</body>
</html>
Текст в ссылке якоря <a name="top"> и <a> не обязателен, так как достаточно указать место перехода после клика по ссылке.
Таким же способом можно сделать и закладку на другую веб-страницу или на другой сайт. Разница в том, что в атрибут href="#top" тега <a> нужно добавить адрес веб-страницы, куда будет произведен переход. Как это выглядит, пример ниже:
много произвольного текста.
Перейти в начало страницы
В этом примере, после клика на ссылку, будет произведен переход в верхнюю часть страницы contact.html. Если такого якоря или страницы не найдено то никакой ошибки не произойдет.
2. С использованием идентификатора:
Во втором способе якорная ссылка создается с помощью идентификатора, который может располагаться в любом другом, ранее созданном, элементе. Например, у нас какая-то форма или заголовок, и к нему присвоен идентификатор id = "top_zagolovok", тогда, в ссылке, уже указываем имя идентификатора.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
Основной заголовок на странице
много произвольного текста.
Перейти к заголовку страницы
</body>
</html>
Теперь href="#top_zagolovok" будет обозначать, что на странице нужно найти элемент top_zagolovok и перейти к нему. В нашем случае, этот элемент находится в начале страницы и им является заголовк. Такой идентификатор можно задать любому элементу на странице. Точно также можно сделать и переход на другую страницу, так элементу задается идентификатор, а в ссылке указываем имя документа, куда перейти, и соответственно имя идентификатора.
3. Ссылки на Е-мэйл адреса.
И последний вид ссылок который рассмотрим - это ссылки на Е-мэйл адреса. В теге <a> </a> создается основной атрибут href="", в котором уже нужно указать ключевое слово mailto:, где mail - это почта и to - это направление. И затем указывать адрес электронной почты, после щелчка, на который пользователь будет, отправляется на страницу отправки письма, либо будет, запускается почтовая программа для создания письма, в строку получателя которой будет подставляется почтовый адрес, именно тот, что указан на сайте. Вот таким образом работает ссылка на Е-мэйл адрес.
Вот мы рассмотрели еще два вида ссылок, а в целом научились создавать четыре вида ссылок: это ссылка на страницу и файл, на якорь и на Е-мэйл. Как Вы уже скорей всего заметили, смысл у всех ссылок один и тот же, меняется только значение в атрибуте href=" ". На этом с ссылками все, переходим к следующему уроку.
CSS