Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Ссылки

Viktor | 24.02.2014 | нет комментариев

Наверняка Вы уже заметили, что путешествовать с одного сайта на другой (или по разным страницам одного сайта) можно с легкостью, просто нажав на ссылку. Текст ссылки, как правило, выделяется цветом (обычно ярко синего цвета) или оформляется подчеркиванием (но не всегда). Ссылки в HTML позволяют связать текст или картинку с другими гипертекстовыми документами и позволяют переходить с одной веб-страницы на другую.

Особенность ссылок состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, например на картинки, на музыкальные файлы, на видеофайлы и т.д. Причем этот файл может размещаться совсем в другой стране на другом сайте.

Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.

Общий синтаксис создания ссылок Вы видите в Листинге 9.1 (одинаков для создания ссылок на любые файлы) следующий:

Листинг 9.1.

<a href=”URL”>текст ссылки</a>

Где:

URL – это адрес сайта или имя файла и путь до этого файла, если файл лежит на этом же сервере. Тег <a href> говорит браузеру что это ссылка. Этот тег парный поэтому его необходимо закрыть </a>. Теги <a href=”URL”> и </a> посетитель страницы не видит, ему видна только надпись текст ссылки  эта надпись называется якорь ссылки естественно каждая ссылка имеет свой якорь.

Абсолютные и относительные ссылки

Различают два вида ссылок

  1. Абсолютные ссылки – это те, которые лежат на другом сервере. Такие ссылки должны начинаться с указания протокола (обычно http://) и содержать полное имя сайта и страницы, на который следует перейти. Например, ссылка вида:

Листинг 9.2.

<a href=”http://www.russnews.info”>Мониторинг новостей. Все – что произошло в мире за 24 часа.</a>

А вот что видит посетитель сайта:

Мониторинг новостей. Все – что произошло в мире за 24 часа.

Такая ссылка называется абсолютной – и приведет пользователя на новостной ресурс, расположенный совсем на другом сервере, при этом пользователь попадет на индексную (главную страницу сайта index.html – которая открывается по умолчанию).

А при нажатии, например на эту ссылку: AMD Puma: новая мобильная платформа AMD с Ultra-процессором

Листинг 9.3.

<a href=”http://www.russit.info/processors/news_2008-07-14-09-33-03-784.html”>AMD Puma: новая мобильная платформа AMD с Ultra-процессором</a>

Пользователь попадет на сайт RussIT.info посвященный компьютерным технологиям в раздел Процессоры и увидет статью про процессоры фирмы AMD.

2. Второй вид ссылок – это относительные ссылки. Эти ссылки ведут на файлы, которые расположенны на Вашем же сервере. Относительные ссылки ведут отсчет от корня сайта или текущего документа. Например, Ваш файл index.html, лежит в какой-либо папке на сервере. В этой же папке лежит другой файл с именем tex_opis.html. Что бы перейти на этот файл относительная ссылка будет иметь вот такой синтаксис:

Листинг 9.4.

<a href=”tex_opis.html”>Технические характеристики автомобиля</a>

Можно добавить в ссылку некоторые необязательные атрибуты, например:

target=”blank” загружает гиперссылку в новом окне Обозревателя

title=”Технические характеристики автомобиля – Текст подсказки, который будет появляться при наведении мышки на гиперссылку.

И окончательный синтаксис ссылки будет иметь вид:

Листинг 9.5.

<a href=”tex_opis.html” target=”blank” title=”Технические характеристики автомобиля>Технические характеристики автомобиля</a>

Естественно для того что бы страница на которую ведет ссылка открылась, она должна существовать, поэтому давайте создадим еще одну страничку (механизм точно такой же и при создании страницы index.html) и назовем этот файл tex_opis.html . Пускай в этом файле будут действительно технические характеристики автомобиля. Если у Вас есть вопросы по созданию этого файла, просмотрите преведущие уроки.

Примеры того что должно получиться лежит здесь.

Ссылка на другую страницу (о которой мы с Вами говорили выше) добавлена в самом конце страницы. Ссылка рабочая ведет на страницу tex_opis.html . Так как это у нас с Вами учебные файлы я не стал полностью оформлять эту страницу, добавил только заголовок и ссылку на главную страницу т.е. назад на index.html. Ну а Вы уж потренируйтесь.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB