Ссылки в 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.
