alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Создание якорных ссылок и Е-мэйл ссылок в HTML документе.

Категория: Уроки HTML Просмотров: 830 Коментариев: 0 Дата: 2017-04-18 Добавил: admin

 Якорные и Е-мэйл ссылки

Поехали дальше. В предыдущем уроке мы рассмотрели Абсолютные и Относительные ссылки и, чтобы завершить тему, мы рассмотрим еще два вида ссылок это якорные ссылки и ссылки на адрес Е-мэйл почты.


1. Якорные ссылки.

Первым делом рассмотрим якорную ссылку, Вы наверняка уже с ними сталкивались. Такая ссылка используется, если у Вас, например, длинный документ, и Вы в самом низу документа и хотите попасть сразу на верх страницы. Чтобы не крутить ролик мыши внизу создается якорная ссылка нажав на которую нас перебросит в начало страницы. Может так же быть такой случай, когда в статье Вам нужно попасть в определенное место на странице. Это также возможно с помощью якорной ссылки. Так же есть возможность перехода в выбранное место и на другой странице.

И так, как же такие ссылки создаются. В нужном месте создается якорь, куда после клика на ссылки мы и попадем.

1. С использованием якоря:

Для начала создадим якорь, дав ему имя с помощью атрибута name="top" тега <a>. Теперь в ссылке для перехода, в атрибуте href="", указывается значение, т.е. имя созданного ранее якоря #top. Перед именем должен находиться символ решетки (#).

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    
    Первая HTML страница
</head>
<body>
        
        

много произвольного текста.

Перейти в начало страницы

</body> </html>

Текст в ссылке якоря <a name="top"> и <a> не обязателен, так как достаточно указать место перехода после клика по ссылке.

Таким же способом можно сделать и закладку на другую веб-страницу или на другой сайт. Разница в том, что в атрибут href="#top" тега <a> нужно добавить адрес веб-страницы, куда будет произведен переход. Как это выглядит, пример ниже:

HTML
        
        

много произвольного текста.

Перейти в начало страницы



В этом примере, после клика на ссылку, будет произведен переход в верхнюю часть страницы contact.html. Если такого якоря или страницы не найдено то никакой ошибки не произойдет.

2. С использованием идентификатора:

Во втором способе якорная ссылка создается с помощью идентификатора, который может располагаться в любом другом, ранее созданном, элементе. Например, у нас какая-то форма или заголовок, и к нему присвоен идентификатор id = "top_zagolovok", тогда, в ссылке, уже указываем имя идентификатора.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    
    Первая HTML страница
</head>
<body>        

        

Основной заголовок на странице

много произвольного текста.

Перейти к заголовку страницы

</body> </html>

Теперь href="#top_zagolovok" будет обозначать, что на странице нужно найти элемент top_zagolovok и перейти к нему. В нашем случае, этот элемент находится в начале страницы и им является заголовк. Такой идентификатор можно задать любому элементу на странице. Точно также можно сделать и переход на другую страницу, так элементу задается идентификатор, а в ссылке указываем имя документа, куда перейти, и соответственно имя идентификатора.


3. Ссылки на Е-мэйл адреса.

И последний вид ссылок который рассмотрим - это ссылки на Е-мэйл адреса. В теге <a> </a> создается основной атрибут href="", в котором уже нужно указать ключевое слово mailto:, где mail - это почта и to - это направление. И затем указывать адрес электронной почты, после щелчка, на который пользователь будет, отправляется на страницу отправки письма, либо будет, запускается почтовая программа для создания письма, в строку получателя которой будет подставляется почтовый адрес, именно тот, что указан на сайте. Вот таким образом работает ссылка на Е-мэйл адрес.

Вот мы рассмотрели еще два вида ссылок, а в целом научились создавать четыре вида ссылок: это ссылка на страницу и файл, на якорь и на Е-мэйл. Как Вы уже скорей всего заметили, смысл у всех ссылок один и тот же, меняется только значение в атрибуте href=" ". На этом с ссылками все, переходим к следующему уроку.


Просмотреть демо: Демо

Скачать исходник: Скачать



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


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов