Как вставить ссылку на сайт

Как вставить ссылку на сайт

Здравствуйте! В этой статье  я расскажу о том что такое ссылка и как ее ссылку вставить на сайт.  Ссылки являются неотъемлемой частью Интернета и они позволяют переходить с сайта на сайт.  Причем сама ссылка может вести не только на веб-страницу а на документ любого типа то есть это может быть рисунок, видео, вордовский файл, презентация.

Самое главное, чтобы документ на который ведет ссылка существовал и к нему был открыт доступ иначе ничего не получится.

Как вставить ссылку на сайт

Как создать ссылку.

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

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

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

Пример создания ссылок

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Как добавить ссылку на страницу</title>
 </head>
 <body>
  <p><a href="pesiki.html">Песики</a></p>
  <p><a href="kiski.html">Киски</a></p>
 </body>
</html>

Просмотреть  пример

В  примере создаются 2 ссылки с разными текстами. При щелчке по тексту «Песики» в окне браузера откроется документ pesiki.html, а при щелчке на «Киски» — файл kiski.html.

Текст ссылки

 

Вид ссылок на странице

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

Так, при щелчке по ссылке в браузере Safari  откроется окно с предупреждением.

Демонстрация битой ссылки

 

Результат при открытии битой ссылки

Конечно сообщение о недоступности страницы, которая должна открываться по ссылке разное будет в каждом браузере, но суть от этого не меняется. Старайтесь исправлять такие ссылки на своем сайте.

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

 

Окно с предупреждением

Окно для выбора действия с файлом в браузере Firefox

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

У ссылок могут быть заданы как абсолютные, так и относительные адреса. Абсолютные адреса это такие адреса, которые начинаются с (http://), например http://google.com. Относительные адреса — это адреса, которые указываются относительно текущего документа, например (images/pic1.jpg).

Пример использование абсолютных ссылок.

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Абсолютный адрес ссылки</title>
 </head>
 <body>
  <p><a href="http://webdiz.com.ua">Изучение HTML с нуля</a></p>
 </body>
</html>
Просмотреть  пример

В примере ссылка вида <a href=»http://webdiz.com.ua»>Изучение HTML с нуля</a> будет  абсолютной  и соответственно будет вести на главную страницу сайта webdiz.com.ua

Как правило абсолютные ссылки используются для обращения к файлам на другом сайте. Для обращения к файлам на своем сайте надо использовать относительные ссылки.

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке.

 

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Ссылка</a>

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

2. Файлы размещаются в разных папках.

 

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

<a href="../Ссылаемый документ.html">Ссылка</a>

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках.

 

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

<a href="../../Ссылаемый документ.html">Ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках.

 

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.

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

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

 Правила вложений для тега <a>

Любая ссылка является встроенным элементом, поэтому для нее действуют те же правила, что и для встроенных элементов. А именно, нельзя размещать внутри тега <a> блочные элементы, но допустимо делать наоборот, и вкладывать ссылку в блочный контейнер. В примере 8.3 показано ошибочное и правильное использование тегов.

Вложение тегов

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Ошибки при использовании ссылок</title>
 </head>
 <body>
  <a href="lion.html"><h1>Охота на льва</h1></a>
  <h1><a href="lion.html">Как поймать льва в пустыне</a></h1>
 </body>
</html>

Просмотреть  пример

В строке 8 данного примера содержится типичная ошибка — тег <h1> располагается внутри контейнера <a>. Поскольку <h1> это блочный элемент, то его недопустимо вкладывать внутрь ссылки. В строке 9 этого же примера показан корректный вариант.
Атрибуты ссылок

Основной атрибут href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. Синтаксис следующий.

<a target="имя окна">...</a>

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.

  • _blank — загружает страницу в новое окно браузера.
  • _self — загружает страницу в текущее окно (это значение задается по умолчанию).
  • _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Открытие ссылки в новом окне

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Ссылка в новом окне</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть
      в новом окне</a></p>
 </body>
</html>

Просмотреть  пример

Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис следующий.

<a title="текст">...</a>

В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В примере 8.5 показано, как использовать атрибут title для ссылок.

Создание всплывающей подсказки

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Подсказка к ссылке</title>
 </head>
 <body>
  <p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
 </body>
</html>

Просмотреть  пример

Ссылка на адрес электронной почты

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты.

Ссылка на адрес электронной почты

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Адрес почты</title>
 </head>
 <body>
  <p><a href="mailto:vlad@htmlbook.ru">Задавайте вопросы по электронной почте</a></p>
 </body>
</html>

Просмотреть  пример

В атрибуте href тега <a> вначале пишется ключевое слово mailto, затем через двоеточие желаемый почтовый адрес. Подобная ссылка ничем не отличается от ссылки на веб-страницу, но при нажатии на нее запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки следует указывать, что она имеет отношение к электронной почте, чтобы читатели понимали, к чему приведет нажатие на нее.

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject=тема сообщения.

Задание темы сообщения

<!DOCTYPE HTML> 
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Тема письма</title>
 </head>
 <body>
 <p><a href="mailto:vlad@htmlbook.ru?subject=Вопрос по HTML">Задавайте
  вопросы по электронной почте</a></p>
 </body>
</html>

Просмотреть  пример

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Якоря

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Создание якоря

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Быстрый переход внутри документа</title>
 </head>
 <body>
  <p><a name="top"></a></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>
 </body>
</html>

Просмотреть  пример

Между тегами <a name=»top»> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).

С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега <a> надо указать адрес документа и в конце добавить символ решетки # и имя закладки.

Ссылка на закладку из другой веб-страницы

<!DOCTYPE HTML>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Якорь в другом документе</title>
 </head>
 <body>
  <p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
  </body>
</html>

Просмотреть  пример

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom. Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: