Показать Меню
falbar Основы HTML

Урок 15. Гиперссылки в HTML, завершаем изучать

Основы HTML

В этой статье мы завершаем разбираться с HTML ссылками и начнем с таких понятий как относительный и абсолютный путь.

Относительный путь указывается, как не банально звучит относительно месторасположения файла. Здесь нет нечего сложного просто указываем путь до файла, к которому ссылаемся, если файл лежит во внешней папке используем абстрактную операцию (../)на уровень вверх. Данное представление пути не особо удобно, поэтому указывать путь лучше всегда от корня сайта.

Пример путей относительно файла:

href="network/index.html";
href="test.html";
href="../block/index.html";
href="../../network/index.html";

Пример путей относительно корня сайта:

"/" - Корень сайта
href="/test.html";
href="/block/index.html";
href="/network/index.html";

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

протокол://имя_сервера:порт/путь
<!-- Ссылка на HTML файл по протоколу HTTP -->
<a href="http://сайт/страница">Пример ссылки</a>

<!-- Ссылка на RAR файл по протоколу HTTP -->
<a href="http://сайт/файл.rar">Пример ссылки</a>

<!-- Ссылка на EXE файл по протоколу FTP -->
<a href="ftp://сайт/файл.exe">Пример ссылки</a>

<!-- Ссылка на e-mail, при помощи протокола mailto-->
<a href="mailto:mail@mail.ru">Пример ссылки</a>

Примеры часто используемых протоколов:

  • Протокол http - открытая передача текста;
  • Протокол https – шифрование при помощи сертификатов(SLL подтверждаться организациями);
  • Протокол ftp – передача файлов для файловых менеджеров.

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

Теперь давайте рассмотрим служебный элемент base, который ещё можно встретить на сайтах хоть и редко. Используется в основном для удобства формирования ссылок на сайте. Прописать его необходимо в шапке сайта, после этого все ссылки на страницы будут работать относительно его адреса.

Например, установим:

<base href="http://falbar.ru/">

Далее указываем нам необходимые ссылки:

<a href="article/id/31">Пример ссылки</a>
<a href="article/id/4">Пример ссылки</a>
<a href="article/id/2">Пример ссылки</a>

В итоге, когда мы будем кликать по этим ссылкам, адреса будут выглядеть так:

<a href="http://falbar.ru/article/id/31">Пример ссылки</a>
<a href="http://falbar.ru/article/id/4">Пример ссылки</a>
<a href="http://falbar.ru/article/id/2">Пример ссылки</a>

У элемента base как и у элемента a есть, очень полезный атрибут target, который позволяет контролировать открытие ссылки. По умолчанию значение атрибута стоит в режиме _ self, а принимать он может значения:

  • _blank – открывает страницу в новом окне;
  • _self – открывает в том же;
  • _parent – открывает в окне родителя;
  • _top – открывает в окне браузера при этом отменяет все окна.

Все основные возможности ссылок мы разобрали, осталось только упомянуть о оформительной части. Всего три основных состояния может иметь ссылка, которые можно оформить визуально:

  • Цвет не отработанной ссылки(blue или #0000ff);
  • Цвет ссылки после клика(red или #ff0000);
  • Цвет при отработанной ссылки(purple или #800080).

Цвета можно изменять при помощи атрибутов: link(не отработанная ссылка), alink(активная ссылка), vlink(отработанная ссылка) и только для элемента body.

<body link="blue" alink="red" vlink="purple">

Спасибо за внимание.

Подписаться на обновления

Комментариев еще не оставлено