Тег

Тег используется для создания ссылок и якорей («анкоров») в 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

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

Версия:	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 и выше
Поддержка:	Да	Да	Да	Да	Да

Я считаю, что ни одна 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

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

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

Закрывающий тег обязателен.

Синтаксис

... ...

Параметры

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

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

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

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

Параметр HREF

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

Это обязательный параметр для ссылок.

Синтаксис

...

Аргументы

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

Пример использования параметра href:

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

Параметр NAME

Описание

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

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

Этот параметр обязателен для якорей

Синтаксис

...

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

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

Наверх

Параметр TARGET

Это не обязательный параметр.

Синтаксис

...

Аргументы

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

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

По умолчанию используется значение _self .

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

Параметр TITLE

Это необязательный параметр.

Синтаксис

...

Пример создания всплывающей подсказки :

Рисунки

Тег является одним из важных элементов 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

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

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

Параметр NAME

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

...

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

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

Аргументы

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

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

Пример 3. Создание якоря с помощью параметра 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 .

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

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

Параметр TITLE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Синтаксис

...

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

Аргументы

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

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

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

title="Рисунки различных животных и не только..." >Рисунки

Теги ссылок

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

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

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

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

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-адрес. Перед именем указателя всегда ставится знак # .