Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB