A href синтаксис. Основы HTML: работа со ссылками. Тег A и его атрибуты rel, target, name

Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

...
...

Параметры href Задает адрес документа, на который следует перейти. name Устанавливает имя якоря внутри документа. target Имя окна или фрейма, куда браузер будет загружать документ. title Добавляет всплывающую подсказку к тексту ссылки. Закрывающий тег

Обязателен.

Пример 1. Использование тега

Тег А

Посмотрите на мою фотографию!

Как сделать такое же фото?

Описание параметров тега Параметр HREF

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target .

Синтаксис

...

Обязательный параметр

Обязателен для ссылок.

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Пример 2. Использование параметра href

Тег А, параметр href

Относительная ссылка

Абсолютная ссылка

Параметр NAME

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Параметр name используется для определения якоря внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи параметра name тега . Имя ссылки на закладку начинается символом # , после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

Между тегами и текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.

Синтаксис

...

Обязательный параметр

Обязателен для якорей.

Аргументы

Любой текст с учетом регистра.

Значение по умолчанию

Пример 3. Создание якоря с помощью параметра name

Тег А, параметр name

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Наверх

Параметр TARGET Описание

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

Синтаксис

...

Обязательный параметр Аргументы

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

Blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self .

Значение по умолчанию

Тег А, параметр target

Открыть в новом окне

Параметр TITLE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание Синтаксис

...

Обязательный параметр Аргументы

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Пример 5. Создание всплывающей подсказки

Тег А, параметр title

Рисунки

Теги ссылок

является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

BASE определен внутри контейнера HEAD и инструктирует браузер относительно полного базового адреса текущего документа.

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

• пустые элементы — , ,
  , , , , , ,
  Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

  Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов.

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

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

  В теге есть важный и главный атрибут href. Его значением выступает путь к объекту или сайту, на который ссылается наша ссылка в виде URL-адреса. В качестве анкора (тела ссылки) может выступать как текст (текстовая ссылка), так и изображение (графическая ссылка). Если тебе надо создать графическую ссылку, надо в качестве анкора использовать тег IMG между тегами . Приведу простой пример HTML-код ссылки:

  текст ссылки (анкор)

  Приведу еще один пример, чтобы ты лучше усвоил. За основу возьму мой сайт:

  На html-странице в браузере это будет такой вид:

  Цвет текста ссылок задается атрибутами в теге BODY. Если говорить проще, то к ссылкам подходят те же атрибуты для изменения, что и к тексту на странице. Это и выделить жирным, и курсивом, и использовать заголовки и т.п.

  

  На html-странице появится следующее:

  

  Получим результат без рамки:

  Главная страница 1seo

  Как ты заметил, переход на другую страницу осуществляется в этом же окне. Если ты хочешь чтобы ссылка открывалась в другом окне или родительском (по умолчанию стоит в этом же окне), можно применять слудующие атрибут target тега A:

  • _blank — открывает страницу в новом окне;
  • _parent — загружает ссылку в родительском окне;
  • _self — по умолчанию. Открывает ссылку в этом же окне.

  Главная страница сайта 1seo

  Существует еще атрибут title, для создания всплывающей подсказки у ссылки:

  Главная страница сайта 1seo

  текст

  Кстати, если указать в URL-адресе ваш почтовый ящик, и указать протокол mailto:, то при нажатии по твоей ссылки откроется почтовая программа, где в поле Кому уже будет вписан твой адрес почтового ящика. На примере HTML-код будет вот такой:

  Написать мне сообщение

  Я постарался написать основное, что тебе необходимо для создания ссылки в HTML. Кстати, если ты прочитал предыдущие статьи Учебника HTML, то я могу с увереностью сказать, что ты уже знаешь минимум, чтобы создать свою первую полноценную html-страницу. После того, как создашь страничку, ты можешь выложить её на бесплатный хостинг и увидеть плоды своего труда. Поверь, после того как ты это сделаешь, у тебя будет еще больший прилив творческой энергии. Далее я расскажу тебе, как создать таблицу в HTML. Это тоже очень важная информация, постарайся её полностью поглотить и переварить.

  Дата публикации: 15 мая, 2012

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

  Как сделать гиперссылки на сайте 1. Структура ссылки

  Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

  Обязательным параметром тега является атрибут href , который задает URl-адрес веб-страницы.

  указатель ссылки

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

  Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

  Метод доступа://имя сервера:порт/путь

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

  file обеспечивает чтение файла с локального диска:

  File:/gallery/pictures/summer.html

  http предоставляет доступ к веб-странице по протоколу HTTP:

  Http://site.ru/

  https - специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)

  Https://site.ru/

  ftp осуществляет запрос к FTP-серверу на получение файла:

  Ftp://pgu/directory/library

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

  Mailto: [email protected]

  Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

  Номер порта ТСР , на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
  21 — FTP
  23 — Telnet
  70 — Gopher
  80 — HTTP

  Путь содержит имя папки, в которой находится файл.

  2. Абсолютный и относительный путь

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

  Рис. 1. Пример структуры папок 2.1. Абсолютный путь

  Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
  1) протокол, например, http (опционально);
  2) домен (доменное имя или IP-адрес компьютера);
  3) папка (имя папки, указывающей путь к файлу);
  4) файл (имя файла).

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

  Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

  Если файл находится в корневой папке, то путь к файлу будет следующим:

  Http://site.ru/index.html

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

  Http://site.ru/

  Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

  2.2. Относительный путь

  Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http:// , он выполняет поиск указанного документа на том же сервере.

  Относительный путь содержит следующие компоненты:
  1) папка (имя папки, указывающей путь к файлу);
  2) файл (имя файла).

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

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

  3. Якоря

  Якоря , или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь , а не URl-адрес. Перед именем указателя всегда ставится знак # .

  

  Тег

  Тег используется для создания ссылок и якорей («анкоров») в HTML-документе.

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

  Якорь («анкор») - предназначен для установки закладки в определенном месте веб-страницы, для последующего перехода к ней по ссылке. Причем, якорь может быть как внутри текущей, так и внутри другой, открываемой по ссылке на якорь, страницы. Для установки якоря используется атрибут name с именем якоря. Также, в качестве якоря можно использовать любой тег имеющий атрибут id , в том числе и тег .

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

  Атрибуты

  Личные атрибуты:

  • href - Обязателен для ссылок. Указывает адрес документа или якоря на который будет переход по ссылке.
  • name - Обязателен для якорей. Задает имя якоря.
  • rel - Описывает прямую связь между текущим документом и документом открываемым по ссылке.
  • rev - Описывает обратную связь между текущим документом и документом открываемым по ссылке.
  • target - Задает имя окна или фрейма, в котором будет открыт документ.
  • accesskey - устанавливает клавишу быстрого доступа для фокусировки на элементе.
  • class - задает имя класса или классов HTML-тега, используемых в CSS (Каскадные таблицы стилей).
  • dir - указывает направление текста внутри элемента.
  • - задает имя идентификатора тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang - указывает язык, на котором написан текст внутри HTML-элемента.
  • style - необходим для применения встроенных стилей CSS к элементу.
  • tabindex - устанавливает порядок табуляции между элементами (клавиша Tab).
  • title - выводит всплывающую подсказку при наведении курсора мыши на элемент.
  Тип тега

  Назначение: ссылки .

  Модель тега: inline (встроенный, уровня строки).

  Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

  Не может содержать: другие теги на любом уровне вложенности.

  Открывающий тег: необходим. Закрывающий тег: необходим.

  Синтаксис ...текст или ссылка на изображение... ...необязательный текст...

  Пример HTML: применение тега A

  seodon.ru - Применение тега A

  

  Поддержка версиями HTML

  Тег для создания таблицы.
  	Определяет тело таблицы.
  		Создает ячейку таблицы.
  	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
  	Создает большие поля для ввода текста.
  	Определяет нижний колонтитул таблицы.
  	Создает заголовок ячейки таблицы.
  	Определяет заголовок таблицы.
  	Определяет дату/время.
  	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
  Создает строку таблицы.
  	Добавляет субтитры для элементов и .
  	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
  	Создает маркированный список.
  	Выделяет переменные из программ, отображая их курсивом.
  	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
  	Указывает браузеру возможное место разрыва длинной строки.

  Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
  Поддержка:	Да	Да	Да	Да

  Поддержка браузерами

  Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
  Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
  Поддержка:	Да	Да	Да	Да	Да