для каких целей может использоваться тег a

Ссылки. Тег

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

Пара тегов . обрамляет текст ссылки или картинку, которая служит ссылкой.

Атрибуты тега

Адреса ссылок

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

Абсолютный адрес ссылки

Абсолютный адрес состоит из трех частей:

Пример

Абсолютная ссылки на страницу другого сайта:

Относительный адрес ссылки

Относительный адрес состоит из полного имени файла целевого документа (включая папки) относительно корня сайта или относительно файла исходного документа.

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

Если вместо имени файла задать имя папки, то будет отображен индексный файл. Это может быть index.html, index.htm или index.php из этой папки.

Примеры

1. Относительная ссылка на целевой документ в той же папке, что и исходный документ:

2. Относительная ссылка на документ в папке, которая находится на одном уровне с исходным документом:

3. Относительная ссылка на документ, который находится на уровень выше исходного документа:

4. Относительная ссылка на документ, который находится в корне сайта:

Ссылка на конкретное место Web-страницы

Для создания ссылки на определенное место Web-страницы надо сначала поставить закладку-метку в соответствующее место и дать ей имя:

В адресе ссылки на метку в текущем документе перед именем метки ставится знак «решетка» ( # ):

В адресе ссылки на метку в другом документе указывается ее адрес и в конце добавляется знак «решетка» ( # ) и имя метки:

Данные в адресной строке браузера, которые идут после знака «решетка» ( # ), называют hash-данными (хэш-данными) или просто hash (хэш).

Отправка e-mail

Ссылка на адрес электронной почты (E-Mail):

Связь с FTP

FTP (File Transfer Protocol, протокол передачи файлов) позволяет пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким методом компании часто распространяют свои новые программные продукты. Если не указывать имя файла, браузер выведет перечень всех файлов в каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил доступ к нескольким файлам сразу, например, в случае больших файлов, разбитых на части для удобства передачи.

Звонок и СМС с браузера мобильного телефона

Позвонить по номеру с браузера мобильного телефона:

Отправить СМС с браузера мобильного телефона:

Источник

Тег A (гиперссылка)

Содержание

Глобальное значение ссылок

Значение ссылок в SEO

Поисковые алгоритмы берут в расчет следующие факторы:

Синтаксис тега

Атрибут Href

Атрибут Rel

Атрибут Target

_self Ссылка срабатывает в текущей вкладке браузера (применяется по умолчанию, если атрибут не прописан): _blank Страница загружается в новой вкладке браузера (принято применять для внешних исходящих ссылок):

Классификация ссылок

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

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

В зависимости от представления URL в атрибуте href ссылки делятся на:.

Относительные ссылки могут ссылаться только на страницы домена, на которых они указаны.

Внешние и внутренние

Относительно сайта, на котором указаны ссылки, они делятся на:

Внутренние Ссылки между внутренними страницами сайта. Внешние Ссылки между страницами разных сайтов.

Входящие и исходящие ссылки

Относительно рассматриваемой веб-страницы ссылки делятся на:

Анкорные и безанкорные ссылки

В зависимости от текста в анкоре ссылки делятся на:

Анкорные Когда анкор описывает контент акцептора: Безанкорные Когда анкор не описывает контент акцептора. В качестве анкора безанкорных ссылок может применяться URL ( Uniform Resource Locator — унифицированный адрес ресурса ; URL-адрес ) — адрес идентификации, присвоенный веб-странице в Интернете. URL-адреса отображаются в адресной строке браузеров.

Анкоры ссылок учитываются алгоритмами ранжирования:

Навигационные, контекстные и рекламные ссылки

В зависимости от назначения ссылки делятся на:

Навигационные Размещаются в элементах навигации сайта (меню, карте сайта, оглавлениях страниц и т. д.). Контекстные Размещаются в контексте контента. Имеют наибольшую значимость в алгоритмах ранжирования. Рекламные Размещаются в рекламных блоках. Имеют наименьшую значимость в алгоритмах ранжирования.

Якорные ссылки

Якорная ссылка ссылается на элемент внутри страницы через указание идентификатора этого элемента (якорь ссылки) в атрибуте href после символа # :

Якорные ссылки чаще всего применяются в интерактивных оглавлениях страниц, облегчающих навигацию по разделам этих страниц.

Сквозные ссылки

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

Источник

HTML тег a

Тег используется для создания гипертекстовой ссылки. Гиперссылка может быть на другую веб-страницу, на какое-либо место внутри веб-страницы, на любой документ, на электронный адрес или вообще на любое место или объект в сети.

По умолчанию все браузеры отображают ссылки следующим образом:

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

Наиболее важным атрибутом является атрибут href, который определяет адрес ссылка.

Атрибуты download, hreflang, media, rel, target и type использовать нельзя, если не определен атрибут href.

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

Чтобы определить элемент внутри страницы, к которому будет осуществлён переход по ссылке, нужно использовать глобальный атрибут id, указав его у соответствующего элемента:

После этого, чтобы перейти к нему, в значении атрибута href тега необходимо указать значение атрибута id (идентификатор) с символом решетки (#) перед ним. Если элемент к которому будет сделан переход находится на той же самой странице, то адрес страницы в атрибуте href можно опустить, написав только идентификатор.

Разница между HTML 4.01 и HTML5

В HTML 4.01 тег может быть либо анкором, либо гиперссылкой. В HTML5 тег — всегда гиперссылка, однако, если у него не определен атрибут href, то он считается всего лишь «заполнителем» для гиперссылки.

В HTML5 были добавлены новые атрибуты и некоторые атрибуты, допустимые в HTML 4.01, удалены.

Источник

HTML ссылки

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

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

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

В HTML гиперссылки (или просто «ссылки») определяются тегом (HTML Anchor Element).

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Относительные и абсолютные пути ссылок

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

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

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

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

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

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

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

Пример подключения файлов:

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

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

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

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

Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой. Мы не будем использовать эти программные среды для практических занятий (можете установить после обучения HTML / CSS).

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

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

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

Достаточно указать в адресе один прямой слэш, чтобы с любой страницы сайта перейти на главную страницу сайта ( href = «/» ).

Атрибут target

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

Ниже представлены все значения этого атрибута:

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Атрибут mailto

Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:

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

В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:

Допустимо указывать несколько адресов (либо не указывать вовсе):

Изображение как ссылка

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

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Размещение файлов на сайте для скачивания

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

Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
download	14.0	20.0	15.0	Нет	Нет	13.0

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

Вопросы и задачи по теме

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

Практическое задание № 4.

Первая ссылка «Информация о примере» должна вести на родительскую страницу (на уровень выше), т.е. при клике вы должны перейти на эту страницу:

Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css). Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images.

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

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

Источник

Урок 4. Ссылки в html

Что такое ссылка html?

Для обозначения ссылки использует тег a. Для обозначения адреса, по которому направляет ссылка, используется атрибут href.

Рассмотри пример конструкции ссылки:

В результате получаем

Перейти на Яндекс
Как Вы видите ссылка состоит из Слов (Перейти на Яндекс), которые вставлены между открывающим и закрывающим тегами a и Адреса ( http://www.yandex.ru ), который прописывается в атрибуте href в кавычках.

Тег a обозначает ссылку. У него обязательно должна быть закрывающая часть. У тега a есть несколько атрибутов.

Атрибут href и адреса ссылок

В абсолютном прописывается полный URL адрес, например http://tradebenefit.ru/index.html (используется при ссылке на другой сайт или файл другого сайта).

Для понимания вышесказанного рассмотрим пример кода

С первой ссылкой я думаю всё понятно, дан адрес целиком.
Во втором случае прописывается укороченный адрес, так как файлы находятся на одной машине (сервере). Если файл будет находиться на папку глубже, допустим у нас есть файл index.html и папка data, в которой есть файл info.html, то ссылка будет выглядеть так

Если файл, на который ссылаемся, находится наоборот, на папку выше, то делаем так

Атрибут target

При использовании атрибута target чаще всего используются три значения: _self, _new, _blank.

_self страница по ссылке открывается в этом же окне (также происходит по умолчанию, если атрибут не использован).
_new страница по ссылке откроется в новом окне. Данное значение не всегда отрабатывается как надо, поэтому в некоторых браузерах может открыть новое окно
_blank страница по ссылке открывается в новой вкладке. Чаще всего атрибут target используют именно с этим значением.

Теперь рассмотрим пример кода

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

Атрибут title

Атрибут title служит для того, чтобы при наведении на ссылку выплывала подсказка. В атрибуте title соответственно прописывается текст подсказки или пояснения

При наведении на ссылку высветится сообщение ‘Ссылка на Яндекс’.

Атрибут charset

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

Источник