Ссылки в HTML

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

Для создания ссылок используется тег <A></A> с обязательным атрибутом HREF.

Общий вид ссылок

<a href = «url»> текст ссылки </a>

Атрибут HREF определяет URL для ссылки, по другому он определяет адрес документа на который следует перейти, а само содержимое тега <a> является ссылкой которую видит посетитель сайта. Текст расположенный внутри контейнера <a></a> по умолчанию подчеркивается и выделяется синим цветом.

Например:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ссылки</title>
  </head>
  <body>
  <a href="MySite.html">Мой сайт</a>
  </body>
</html>

Данный пример выведет нам на страницу ссылку, которая при нажатии перенаправит нас на страницу которая имеет название на диске (или сервере) MySite и имеет формат .html.

Атрибуты тега <a>

NAME — атрибут позволяющий задать имя якоря на веб странице.

HREF — указывает адрес документа, на который необходимо перейти (или необходимо скачать).

TARGET — позволяет указать имя окна или фрейма, куда браузер будет загружать документ, может принимать следующие значения:

  •  _blank — загружает документ в новом окне браузера.
  • _self — загружает документ в текущее окно браузера.

Если на странице необходимо сделать так, чтобы все ссылки открывали документ в новом окне браузера , то можно задать в теге <HAED> базовое значение атрибута TARGET:

<head>
    <meta charset="utf-8">
    <base target=_blank>
  </head>

TITLE — атрибут позволяет задать пояснение (подсказку) для ссылки. Данная подсказка будет отображаться если пользователь задерживает курсор над ссылкой.

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

Якоря в html

С помощью тега <a> можно так же создавать якоря на веб странице и ссылаться на конкретное место в HTML документе. Часто якоря используют для быстрого возврата на начало страницы, а так же используют для быстрого перемещения по содержимому веб страницы.

Якорь задается тегом <a> с атрибутом NAME.

<a name = "top">

При создании якоря не нужно закрывать тег <a>. В данном случае он является одиночным.

Ссылка на якорь выглядит следующим образом:

<a href = #top > наверх </a>

При нажатии на ссылку «наверх» мы перейдем к месту на странице где установлен якорь с именем «top».

Абсолютная и относительная адресация в HTML

В языке HTML есть два способа адресации (написания пути к файлу), данные типы адресаций применимы не только к ссылкам но и к другим тегам использующие пути (например: вставка изображений, подключение скриптов JS, подключение стилей CSS и тп.). Каждый из данный способов адресации по своему уникален и их использование во многом отличается.

Абсолютная адресация

При абсолютной адресации путь к файлу должен быть прописан полностью. Например на локальном диске D: находится папка с изображениями Image и в данном каталоге находится необходимый вам документ с именем Galery.html, в данном случае путь к вашему файлу будет следующим: D:\Image\Galery.html.

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

Относительная адресация

При создании сайта всегда предпочтительно использовать относительную адресацию на веб страницах. При данном методе адресации у вас должна буть четко выстроенная физическая структура сайта, весь материал необходимый для работоспособности вашего ресурса должен находиться в одной папке. Для определения правильной физической структуры вашего сайта вы должны четко осознавать в какой папке какие данные хранятся и давать всем каталогам и файлам осмысленные имена (например: страница «Об авторе» можно назвать author.html, страница с контактами contact.html и тп.).

Плюсы относительной адресации в том, если вам необходимо перести свой сайт на другой компьютер или внешний носитель то вам нужно всего лишь скопировать папку с вашим сайтом, и при переносе на любой носитель ваш сайт будет полностью работоспособен.

Например ваш сайт имеет следующую физическую структуру:

В данной структуре четко видно что в основном каталоге сайта MySIite хранится только один файл index.html (главная страница) и три каталога (Page, Image, Css). Каждый каталог содержит определенные типы файлов, названия катологов помогают разобраться какие файлы в каталоге хранятся (то есть в папке Image располагаются файлы изображений, в папке  Page располагаются все страницы нашего сайта и тп.).

При данной структуре можно создать слудущие относительные пути:

  • если мы ходим на главную страницу (index.html) разместить ссылку на страницу с контактами, то она примет следующий вид :

<a href= page\contact.html >Контакты</a>

Путь к странице с контактной информацией пишется относительно того файла в котором располагается ссылка, в нашем случае относительно файла index.html  страница с контактами располагается в папке  PAGE, поэтому в пути указывается имя каталога page\.

  • если необходимо установить обратную ссылку со страницы контактов на главную страницу, то она примет следующий вид:

<a href = ..\index.html >На главную</a>

То есть путь указывает что нам необходимо переместиться на один каталог наверх с помощью ..\ и далее на файл index.html.

  • в случае если необходимо например, разместить изображение с логотипом на странице с контактами, путь к фалу изображения будет выглядеть следующим образом:

<img src = ..\image\logo.png >

То есть относительно страницы контакты нам необходимо подняться на один уровень каталога вверх (..\) и перейти в папку image (image\) и открыть файл logo.png.

 

Лабораторная работа 8. Ссылки в HTML

Заказать сайт

×
Заказать сайт для учебы

×