Атрибут target | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. В XHTML применение этого атрибута запрещено.
Синтаксис
<a target="имя окна">...</a>Обязательный атрибут
Нет.
Значения
В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
- _blank
- Загружает страницу в новое окно браузера.
- _self
- Загружает страницу в текущее окно.
- _parent
- Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
- _top
- Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
Значение по умолчанию
_self
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег А, атрибут target</title>
</head>
<body>
<p><a href="new.html" target="_blank">Открыть в новом окне</a></p>
</body>
</html>Тег A (HTML-ссылка) | SEO-портал
Автор: Нотан Ройамов
Создано:
Обновлено:
Тег <a> (от anchor — якорь) — важнейший HTML-тег, с помощью которого реализуются ссылки между веб-страницами и обеспечивается навигация по всей сети Интернет.
Глобальное значение ссылок
Посредством тега <a> реализуются все виды ссылок:
- навигационные ссылки внутри сайта,
- внутренняя перелинковка между страницами сайта,
- ссылки-закладки по элементам внутри страницы,
- внешние входящие и исходящие ссылки.
Значение ссылок в SEO
Внешние и внутренние ссылки имеют большое значение в SEO и учитываются алгоритмами ранжирования поисковых систем.
Ссылочная SEO-оптимизация подразумевает работу с:
- ссылочной структурой сайта,
- перелинковкой страниц сайта,
- наращиванием внешней ссылочной массы.
Поисковые алгоритмы берут в расчет следующие факторы:
- значение анкоров для определения текстовой релевантности,
- значения атрибута
rel, - количество внутренних и внешних входящих и исходящих ссылок,
- качество доноров.
Синтаксис тега <a>
Атрибут Href
Тег <a> применяется для HTML-разметки ссылок в сочетании с атрибутом href (от Hyper REFerence — гиперссылка), в котором указывается URL-адрес. Между открывающим и закрывающим тегами <a> размещается
<a href="/[URL]">[Анкор]</a>
Атрибут Rel
В качестве значения атрибута rel (от relationship — отношение) тега <a> можно указывать семантическое значение ссылки, которое может приниматься во внимание поисковыми алгоритмами. В таблице ниже представлены самые распространённые значения атрибута rel.
| Значение | Описание | Примеры применения |
|---|---|---|
nofollow | Не доверительная ссылка. | Ссылки, оставляемые пользователями (в комментариях, подписях, на личных страницах и т. д.). |
sponsored | Платная ссылка. | Рекламный баннер. |
ugc | Ссылка на контент, созданный пользователями. | Ссылки на комментарии, посты на форумах и т. д. |
bookmark | Якорная ссылка. | Ссылки в оглавлении страницы. |
external | Указывает, что акцептор не является частью сайта-донора. | Любые внешние исходящие ссылки. |
opener | Ссылка создаёт вспомогательный контекст. | Модальные ссылки, интерактивные заголовки вкладок и аккордионов. |
author | Ссылка на страницу автора. | Имя автора в качестве анкора. |
help | Ссылка на справочную информацию. | Ссылки на контекстную справку. |
next | Указывает, что акцептор является следующим в наборе документов относительно донора. | Пагинация листингов товаров, статей и т. д. |
prev | Указывает, что акцептор является предыдущим в наборе документов относительно донора.. | Пагинация листингов товаров, статей и т. д. |
tag | Указывает, что анкор ссылки является меткой (тегом) относительно акцептора, которая иденцифицируется по указанному URL. | Метки (теги) в карточках товаров или статьях. |
Атрибут Target
Атрибут target (цель) тега <a> указывает браузеру, как обрабатывать действие по ссылке. Может принимать следующие значения:
- _self
- Ссылка срабатывает в текущей вкладке браузера (применяется по умолчанию, если атрибут не прописан):
<a href="/page" target="_self">Страница откроется в текущей вкладке</a>
- _blank
- Страница загружается в новой вкладке браузера (принято применять для внешних исходящих ссылок):
<a href="/page" target="_blank">Страница откроется в новой вкладке</a>
Классификация ссылок
В зависимости от применяемых значений анкоров и атрибутов тега <a> иссылки делятся на:
Абсолютные и относительные ссылки
В зависимости от представления URL в атрибуте href ссылки делятся на:.
- Абсолютная ссылка
- В атрибуте
hrefуказывается абсолютный URL акцептора:<a href="https://seoportal.net">SEO-портал</a>
Абсолютные ссылки могут ссылаться как на внутренние (в пределах домена), так и на внешние (принадлежащие другим доменам) страницы.
- Относительная ссылка
- В атрибуте
hrefуказывается относительный URL акцептора:<a href="/>SEO-портал</a>
Относительные ссылки могут ссылаться только на страницы домена, на которых они указаны.
Внешние и внутренние
Относительно сайта, на котором указаны ссылки, они делятся на:
- Внутренние
- Ссылки между внутренними страницами сайта.
- Внешние
- Ссылки между страницами разных сайтов.
Внутренние и внешние ссылки оказывают разное влияние на ранжирование страниц-акцепторов.
Входящие и исходящие ссылки
Относительно рассматриваемой веб-страницы ссылки делятся на:
- Входящие
- Ссылются на текущую страницу (акцептор).
- Исходящие
- Размещаются на текущей странице (доноре).
Анкорные и безанкорные ссылки
В зависимости от текста в анкоре ссылки делятся на:
- Анкорные
- Когда анкор описывает контент акцептора:
<a href="https://seoportal.net">SEO-портал</a>
- Безанкорные
- Когда анкор не описывает контент акцептора. В качестве анкора безанкорных ссылок может применяться URL-адрес или название домена, а также слова «тут», «здесь», «ссылка», «подробнее» и т. д.:
<a href="https://seoportal.net">seoportal.net</a>
Анкоры ссылок учитываются алгоритмами ранжирования:
- анкорные ссылки могут положительно влиять на релевантность акцептора запросу, которому соответствует анкор;
- нельзя допускать спама внешних входящих ссылок, в которых применяются ключевые слова, т. к. это может негативно отразиться на ранжировании акцептора;
- все внутренние ссылки можно смело делать анкорными.
Навигационные, контекстные и рекламные ссылки
В зависимости от назначения ссылки делятся на:
- Навигационные
- Размещаются в элементах навигации сайта (меню, карте сайта, оглавлениях страниц и т. д.).
- Контекстные
- Размещаются в контексте контента. Имеют наибольшую значимость в алгоритмах ранжирования.
- Рекламные
- Размещаются в рекламных блоках. Имеют наименьшую значимость в алгоритмах ранжирования.
Якорные ссылки
Якорная ссылка ссылается на элемент внутри страницы через указание идентификатора этого элемента (якорь ссылки) в атрибуте href после символа #:
<!-- Вариации якорных ссылок: --> <a href="#zakladka">Якорная ссылка внутри страницы </a> <a href="/page#zakladka">Относительная якорная ссылка</a> <a href="http://site.ru/page#zakladka">Абсолютная якорная ссылка</a> <!-- Элемент с якорем: --> <section>[Контент элемента]</section>
Якорные ссылки чаще всего применяются в интерактивных оглавлениях страниц, облегчающих навигацию по разделам этих страниц.
Сквозные ссылки
Размещаются на всех страницах сайта. Классическим примером внутренней сквозной ссылки является логотип в шапке сайта, ведущий на главную страницу. Также сквозными являются ссылки в главном меню, размещенном на всех страницах сайта.
Циклические ссылки
Циклическая ссылка ссылается на страницу, на которой размещена. Такие ссылки могут ухудшать юзабилити, «зацикливая» пользователей, поэтому их следует избегать в основном контенте страницы и в навигационной цепочке (хлебные крошки), а также в пунктах меню (при возможности).
Рекомендации
- Применяйте якорные ссылки для навигации внутри страницы.
- Внутренние ссылки рекомендуется делать анкорными и относительными.
- Исходящие внешние ссылки рекомендуется указывать с атрибутом
target="_blank". - Если ссылка не является доверительной, то рекомендуется указывать атрибут
rel="nofollow". - Автоматизируйте добавление атрибута
relс определёнными значениями для указания поисковым роботам на семантическое значение акцепторов.
Гиперссылки в HTML | HTML/xHTML
Главной отличительной особенностью HTML-документов является создание специальных активных ссылок на другие документы, которые именуются гиперссылками.
При наведении мыши на них курсор принимает форму руки, а при клике в окне браузера открывается другая веб-страница или определённый документ. Гиперссылки могут представлять собой как текст, так и изображение.
Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега <a> (от английского слова Anchor — якорь). Параметр href тега <a> содержит адрес документа.
В HTML теги гиперссылки представлены в виде <a> и </a>, а ссылкой считается вся информация, которую <a> и </a> содержат:
<a href=”адрес гиперссылки в html ”>текст ссылки</a>
Перед тем, как создать гиперссылку в HTML, следует знать, что её адрес может быть относительным и абсолютным. Относительный указывает расположение документа относительно текущей страницы.
Сработает он в том случае, если конечный документ располагается в той же директории, что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа «/».
Например:
<a href=”/example.html”>имя страницы</a>
Абсолютный адрес представляет собой ссылку в полном виде на документ, расположенный в сети интернет.
Например:
<a href=”http://sitename.com/sitepage.html”>имя страницы</a>
Создание гиперссылок в HTML — процесс несложный. По умолчанию они подчёркиваются и выделяются синим цветом, а посещённые — фиолетовым.
Изменить цвет гиперссылки в HTML можно в параметрах тега <body>:
- link – цвет ссылок веб-страницы;
- vlink – цвет посещённых гиперссылок веб-страницы;
- alink – цвет активных ссылок веб-страницы.
Например:
<body link=”black” vlink=” #8AA080” alink=”grey”>
Указанные атрибуты определяют цвета ссылок всего HTML-документа. Если вставить такой код в тег <body>, каждый раз задавать цвет шрифту не придётся.
Перед тем, как делать гиперссылки в HTML, имейте в виду, что их цвета должны гармонично вписываться в общий дизайн и оформление вашего веб-сайта и в то же время важно сделать их заметными для пользователя.
Основные атрибуты гиперссылок
В рамках HTML гиперссылки могут иметь следующие параметры:
1. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку.
Например:
<a href=”http://sitename.com/” title=”Текст_всплывающей_подсказки”>Имя ссылки</a>
2. target – указывает браузеру в каком окне следует открыть ссылку.
Он может принимать следующие значения:
- _blank – ссылку необходимо открыть в новой вкладке;
- _self – гиперссылка в HTML должна быть открыта в текущей вкладке. Значение по умолчанию;
- _parent – браузер должен загрузить ссылку в родительском окне;
- _top – гиперссылка загружается по всему пространству окна браузера (разбиение на фреймы в данном случае исчезает).
Например:
<a href=http://sitename.com/ target=”_blank”>Имя ссылки</a>
Таким образом, ответ на часто задаваемый начинающими веб-мастерами вопрос «как вставить гиперссылку в HTML» получен.
Желаем успехов в изучении веб-программирования!
Значения и использование атрибутов rel, href, target blank ссылок HTML тега a [АйТи бубен]
— Dmytro Yakovenko 2021/01/12
Гиперссылка (англ. hyperlink) — часть документа, ссылающаяся на элемент в этом документе (текст, изображение) или на другой объект (веб-страницу, файл (документ), каталог, приложение), расположенный на локальном диске или в Интернет. Текст, содержащий гиперссылки, называется гипертекстом или гипертекстовым документом.
Для определения ссылки в HTML используется тег <a>.
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
<a href="URL">...</a> <a name="идентификатор">...</a>
Обратные ссылки (backlinks) сайта имеют огромное влияние на их рейтинг ВНЕ зависимости от сегодняшних факторов ранжирования. Интернет по сути — это клоака ссылок. Но знать особенности современного ранжирования ссылок поисковыми системами — Вы должны.
В мире SEO конкурирующие сайты активно работают над созданием обратных ссылок как белыми, так и сомнительными способами. Недавно Google ввел новые атрибуты sponsored и ugc, которые частично заменяют старый и привычный нам rel=»nofollow».
Стандартные атрибуты
file://диск:\папка\...\папка\файл - Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере в формате file://\\хост\папка\...\папка\файл - Абсолютная сетевая ссылка. Указывает адрес ресурса на соседнем компьютере в сети в формате.
Здесь «хост» — имя компьютера или его IP адрес.
Относительная ссылка используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения:
/ - корневой каталог web-сервера или логического диска ./ - текущий каталог ../ - родительский каталог каталог/ - дочерний каталог
В частном случае, когда адресуемый ресурс находится в одном каталоге с документом, в качестве адреса достаточно указать имя файла. Относительные ссылки обычно используют для указания адресов «внутренних» ресурсов сайта. Такой подход позволяет сделать перенос сайта быстрым и легким процессом, без последствий в виде перенастройки ссылок.
http://... – создает ссылку на www-документ; ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:... – создает ссылку на конференцию сервера новостей; telnet://... – создает ссылку на telnet-сессию с удаленной машиной; wais://... – создает ссылку на WAIS – сервер; gopher://... – создает ссылку на Gopher – сервер;
Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
Вы можете использовать атрибуты в комбинации друг с другом, например допускается такой синтаксис rel=»nofollow sponsored» или даже так rel=»nofollow sponsored ugc».
Значение предназначено для поисковых систем: он указывает им на то, что рейтинг PageRank и ТИЦ со страницы, на которой ссылка размещена, не должен передаваться странице, на которую данная ссылка ведет. Атрибут со статусом rel=”nofollow” стандартизирован. Наиболее популярные поисковые системы, соблюдающие стандарты W3C, не учитывают ссылки с таким атрибутом при расчёте индекса цитирования веб-сайтов и поисковые роботы не следуют по ним. Данный атрибут можно использовать для всех ссылок, ведущих на другие сайты. Для ссылок, ведущих на собственные страницы, данный атрибут лучше не использовать.
Пример использования атрибута nofollow для ссылки на рекламу
<a href="http://www.example.com" rel="nofollow">Попытка рекламы</a>
Примеры SEO кода:
- Обычные ссылки, которую можно рекомендовать:
<a href="https://wiki.dieg.info"> Ссылка, которую можно рекомендовать </a>
- Рекламные ссылки:
<a href="wiki.dieg.info" rel="sponsored"> Рекламная ссылка </a>
- Пользовательский контент, например ссылка оставлена в комментариях сайта:
<a href="wiki.dieg.info" rel="ugc"> Ссылка пользователя </a>
- Не передавать вес ссылке:
<a href="wiki.dieg.info" rel="nofollow"> Ненадежная ссылка </a>
В HTML существует возможность ссылаться не только на другие html документы, но и возможность ссылаться на части одного документа. Такой механизм получил название «закладки» или якорь. Вы как бы отмечаете некоторый элемент в документе (ставите якорь), а потом ссылаетесь на него из этого же или из другого документа. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Чтобы пометить документ, используется атрибут id — уникальный идентификатор элемента:
<h3>Глава 5</р2> <span></span>
В качестве значений атрибута id допускается использовать любые символы, однако рекомендуется применять только буквы английского алфавита, цифры, дефисы (-) и знаки подчёркивания (_), причём начинать значение — с буквы.
Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href:
<a href="#chapter5">Перейти к 5й главе</a>
Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа, затем символ «#» и имя закладки:
<a href="htmldocs/book.html#chapter5">Перейти к 5й главе</a>
Часть адреса «#имя» получила название хэш.
Если вы укажете в качестве закладки только символ «#», то документ будет прокручен на самое начало. Таким образом, символ «#» тоже можно назвать корректной закладкой.
Чтобы перенаправить пользователя к началу страницы (такую ссылку называют «заглушкой»), нужно написать так:
<a href="#">Наверх</a>
В библиотеке jQuery реализованы псевдоклассы тега А чтобы применять к элементам разные процедуры форматирования.
В элемент a можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее, чем текстовые. Здесь, однако, нас подстерегает не очень приятный сюрприз — изображения, заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img:
<a href="/"><img src="/appfiles/img/image.svg" alt="Logo Mama" /></a>
При использовании изображений в качестве ссылок, не забудьте указать для них атрибут alt. В случае невозможности отображения рисунка, браузер сделает гиперссылкой его текстовое описание.
Сейчас на небольшом примере мы с вами поэтапно спроектируем и реализуем несложную графическую навигационную панель сайта. Выглядеть это будет так:
Кажется, что все просто: берем изображение, размещаем его на странице… Что может быть проще? Однако, различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом, мы приходим к необходимости разрезать рисунок на несколько частей.
Вот что получилось у меня:
В результате, у нас есть три «кнопки» — гиперссылки «Назад», «Содержание» и «Вперед». Разместим все это добро на странице:
Шаг 1 — Листинг навигационная панель.
<div>
<img src="navbar/navbar01.gif" alt="" />
<img src="navbar/navbar02.gif" alt="Назад" />
...
<img src="navbar/navbar09.gif" alt="" />
</div>Как говорится — «Первый блин комом»! Между изображениями появились зазоры, хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому, что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять, удалив пробельные символы (переводы строки, табуляции…) между элеменнами img.
Шаг 2 — Листинг навигационная панель.
...<img src="navbar/navbar01.gif" alt="" /><img src="navbar/navbar02.gif" alt="Назад" />...
Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, в качестве значения атрибута href используйте «#»:
Шаг 3 — Листинг навигационная панель.
...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" /></a>...
Полученный результат выглядит явно как то не так… Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border=»0″:
Шаг 4 — Листинг навигационная панель.
...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" border="0" /></a>...
Теперь вы можете связать несколько страниц несложной единой навигационной панелью, разместив ее код в начале каждой страницы и правильно настроив ссылки.
Ссылка в html. Работа с тегами a и link
Ссылки html — это некие конструкции которые определяются тегами a, area, link и предоставляют связь между двумя ресурсами, одним из которых является документ на котором размещена ссылка.
Различают два типа ссылок в html:
Ссылки на внешние ресурсы
Это ссылки на ресурсы, которые используются для расширения и дополнения страницы, их автоматически обрабатывает браузер при загрузке документа.
Гиперссылки
С данным типом ссылок напрямую взаимодействует пользователь. Они обычно связывают между собой страницы, к примеру навигация по сайту реализована с помощью гиперссылок. Текст или картинка может быть ссылкой.
Ссылка в html элемент <a>
Чтобы создать гиперссылку мы должны использовать тег a этот тег является парным и выглядит следующим образом.
<a href="webupblog.ru">Текст ссылки</a>
Атрибут href
Тег a имеет несколько атрибутов, самый основной, это атрибут href его значением является путь к файлу или странице на которую должна вести ссылка при клике.
Различают несколько видов путей:
Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.
<a href="/about.html">О сайте</a>
Абсолютный — наоборот указывает полный путь к странице. Такая страница может находится на другом сервере и относится к другому сайту. Обязательно указывать домен сайта.
<a href="http://webupblog.ru/ob-avtore/">Об авторе</a>
Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.
Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.
<a href="#top">Вверх</a>
Атрибут title
Используется для дополнительного описания ссылки. Заголовок мы можем увидеть когда наведем курсор на гиперссылку. Этот атрибут не обязательный, но иногда бывает полезным.
<a href="#top" title="После клика вы перейдете к шапке сайта.">Вверх</a>
Атрибут target
Этот атрибут управляет поведением при открытии ссылки, по умолчанию ссылка открывается в текущем окне. Рассмотрим его основные значения.
_blank — открывает ссылку html в новом окне
_self — открывает в текущем окне
Атрибут rel
Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.
rchives — Указывает на архив страниц или записей на сайте.
author — Указывает на страницу об авторе.
bookmark — Указывает на категории или записи.
first — Ссылка указывает на первую страницу сайта.
help — Указывает на страницу помощи.
index — Ссылка на содержание.
last — Ссылка указывает на последнюю страницу сайта.
license — Указывает на страницу с лицензией или с информацией об авторских правах.
me — Указывает на страницу автора статьи на другом сайте.
next — Указывает на следующую страницу или категорию.
nofollow — Запрещает поисковым роботам передавать вес по ссылке.
prev — Указывает на предыдущую страницу или категорию.
search — Ссылка на поиск.
sidebar — Добавить ссылку в избранное браузера.
up — Указывает что ссылка ведет на родительскую страницу.
<a href="http://webupblog.ru/ob-avtore/" rel="author" >Об авторе</a>
Ссылка html тег link
Этот тег относится к первому типу ссылок и устанавливает связь с внешним документом. К примеру это может быть файл стилей или файл со шрифтами. Тег link должен размещаться внутри тега head. Если есть необходимость можем использовать его неоднократно.
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
Основные атрибуты
charset — Кодировка документа.
href — Путь к файлу.
media — Задает устройство, для которого применять стили.
rel — Определяет отношения между документом и файлом, на который ведет ссылка.
type — Тип данных файла который подключается.
Статьи по теме:
Как сделать картинку ссылкой?
Как убрать подчеркивание ссылки?
Hover эффект ссылки с анимацией
Статья оказалась полезной? Поделись с друзьями, и подпишись на нашу группу в вк и канал на youtube.
HTML тег
Тег <a> используется для вставки ссылок, которые в HTML называются гиперссылками. В качестве гиперссылки можно использовать как текст, так и изображение.
В браузере гиперссылки отличаются своим видом и цветом. По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.
Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей․
Синтаксис тега <a> ¶
Тег <a> парный, закрывающий тег </a> обязателен.
<a href="https://ru.w3docs.com/">W3docs.com</a>Атрибуты тега <a> ¶
Вместе с тегом <a> используются атрибуты, дополнительные параметры, которые дают дополнительные возможности форматирования текста. Приведем некоторые из них.
Атрибут href¶
Обязательный атрибут тега <a> href указывает ссылку на веб-страницу либо определяет место на той же веб-странице, куда пользователь перейдет после нажатия на ссылку. Значением атрибута может быть как URL, так и якорь. Якорь указывает на ID (уникальный идентификатор) части веб-страницы, на который ведет ссылка. Перед ID ставится символ решетки (#).
Выглядит это так:
<a href="url">текст ссылки</a>
<a href="#a">текст ссылки</a>Пример использования тега <a> ¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<a href="https://ru.w3docs.com/">W3docs.com</a>
</body>
</html>Результат¶
W3docs.com
Нажав на ссылку, вы будете перенаправлены на домашнюю страницу нашего сайта.
Атрибут target ¶
Атрибут target указывает браузеру, в каком окне открывать документ (по умолчанию ссылки открываются в текущем окне).
Для атрибута target существуют следующие значения:
- _blank открывает ссылку в новом окне.
- _self открывает ссылку в текущем окне
- _parent открывает документ в родительском фрейме.
- _top cancels all frames, and opens in full browser window.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<a href="https://ru.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Результат¶
W3docs.com
Атрибут rel¶
Этот атрибут устанавливает отношения текущего документа к ссылке. Возможными значениями атрибута могут быть:
- alternate — указывает альтернативную версию документа.
- author — ссылка на автора документа или статьи
- bookmark — постоянная ссылка, которая используется для закладок.
- nofollow — сообщает поисковым системам, что не следует передавать по ссылке ТИЦ и PR
Тег <a> также поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <a> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <a>:
Цвет текста внутри тега <a>:
Стили форматирования текста для тега <a>:
Другие свойства для тега <a>:
Как сделать ссылку в HTML
- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этом уроке мы научимся делать гиперссылки. Без них невозможен ни один полноценный сайт. Гиперссылка- это ссылка, при нажатии на которую браузер переводит нас на другую страницу в сети, или на другой сайт, или на определенное место в документе, в общем, туда, куда мы назначим. Для этого урока нужно проделать определенную подготовительную работу: создайте новую страницу с названием third_page.html .
Создайте на странице такой список:
Меню
- Главная страница
- Первая страница
- Вторая страница
Код выглядит так:
<html> <head> <title>Third_page</title> </head> <body> <p>Меню</p> <ul> <li>Главная страница</li> <li>Вторая страница </li> <li>Третья страница </li> </ul> </body> </html>
Теперь мы из этого списка сделаем меню, каждая строка которого ведет на другую страницу. Это можно сделать с помощью гиперссылок. Тег гиперссылки выглядит так:
<a href=”страница”>текст ссылки</a>
Сделаем ссылку на главную страницу. Поменяем первый элемент списка на гиперссылку:
<li><a href=”index.html”> Главная страница </a></li>
Здесь внутри тега элемента списка (<li>) мы вставили тег гиперссылки (<a href=”index.html”>)
Теперь сделайте ссылку на вторую страницу(попробуйте сами). Код выглядит так:
<li><a href=”second_page.html”> Вторая страница </a></li>
Третьим элементом списка мы сделаем ссылку на страницу в интернете (напр. mail.ru)
Код будет выглядеть так:
<li><a href=”http://www.mail.ru/” > Третья страница </a></li>
Откройте страницу в браузере, пощелкайте по ссылкам, посмотрите, как работают переходы на страницы. Если у вас ссылки не открываются, то выполните следующие действия:
- Проверьте, чтобы все файлы (index.html , second_page.html) находились в одной папке со страницей third_page.html
- Удалите куки в браузере
- Перезагрузите браузер, потом перезагрузите страницу third_page.html
Таким образом, мы научились делать простейшие ссылки, без которых невозможно представить ни одну страницу в интернете. С помощью Dreamweaver можно сделать гиперссылки быстрее и легче.
Работа в Dreamweaver.
Создайте новую страницу под названием: third_page.html. Создайте список подобный тому, который мы описывали при работе в блокноте.
Для создания гиперссылок в Dreamweaver используется окно Link (цифра1). Выделите текст: Главная страница. Во вкладке Files (цифра 2) нажмите левой кнопкой на файле index.html (цифра 3) и не отпуская кнопки перетащите в поле Link. У вас в поле дизайна выделенный текст должен поменяться: цвет шрифта станет синим и появится нижнее подчеркивание. Вот мы и создали нашу первую гиперссылку.
Второй способ сделать ссылку: выделите текст «Вторая страница». Щелкните на папке рядом с полем Link (цифра 1). В открывшемся окне выберите second_page и нажмите ОК.
Все ссылка создана.
Выделите текст «Третья страница». В поле Link введите: http://www.mail.ru/
Мы создали ссылку на страничку mail.ru.
Посмотрите страницу в браузере.
В этой главе мы научились создавать простейшие гиперссылки. Эти навыки помогут нам в дальнейшем создавать красивые и удобные сайты. В следующей главе мы научимся создавать таблицы.
Как создавать ссылки на другие страницы в HTML
Из этого туториала Вы узнаете, как создавать ссылки на другие страницы в HTML.
Создание ссылок в HTML
Ссылка или гиперссылка — это соединение одного веб-ресурса с другим. Ссылки позволяют пользователям плавно переходить с одной страницы на другую на любом сервере в любой точке мира.
Ссылка имеет два конца, называемых якорями.Ссылка начинается с привязки источника и указывает на привязку назначения, которой может быть любой веб-ресурс, например изображение, аудио- или видеоклип, файл PDF, документ HTML или элемент в самом документе и т. Д. на.
По умолчанию в большинстве браузеров ссылки будут выглядеть следующим образом:
- Непосещенная ссылка подчеркнута синим цветом.
- Посещенная ссылка подчеркнута фиолетовым цветом.
- Активная ссылка подчеркнута красным.
Однако вы можете перезаписать это с помощью CSS. Подробнее о стилях ссылок.
Синтаксис ссылки HTML
Ссылки указываются в HTML с помощью тега .
Ссылка или гиперссылка может быть словом, группой слов или изображением.
Поиск в Google
Учебная республика
Атрибут href указывает цель ссылки.Его значение может быть абсолютным или относительным URL-адресом.
Абсолютный URL-адрес — это URL-адрес, который включает в себя все части формата URL-адреса, такие как протокол, имя хоста и путь к документу, например https://www.google.com/ , https: // www. .example.com / form.php и т. д. В то время как относительные URL-адреса — это пути, относящиеся к странице, например, contact.html , images / smiley.png и так далее. Относительный URL-адрес никогда не включает префикс http: // или https: // .
Установка целей для ссылок
Атрибут цели сообщает браузеру, где открыть связанный документ. Есть четыре определенных цели, и каждое имя цели начинается с символа подчеркивания ( _ ):
-
_blank— открывает связанный документ в новом окне или на новой вкладке. -
_parent— открывает связанный документ в родительском окне. -
_self— открывает связанный документ в том же окне или вкладке, что и исходный документ. Это значение по умолчанию, поэтому явно указывать это значение не требуется. -
_top— открывает связанный документ в полном окне браузера.
Попробуйте следующий пример, чтобы понять, как в основном работает цель ссылки:
О нас
Google
Совет: Если ваша веб-страница размещена внутри iframe, вы можете использовать target = "_ top" в ссылках, чтобы выйти из iframe и показать целевую страницу в полном окне браузера.
Создание якорей закладок
Вы также можете создавать привязки закладок, чтобы пользователи могли переходить к определенному разделу веб-страницы. Закладки особенно полезны, если у вас очень длинная веб-страница.
Создание закладок — это двухэтапный процесс: сначала добавьте атрибут id к элементу, к которому вы хотите перейти, затем используйте значение атрибута id , которому предшествует знак решетки ( # ), как значение href тега , как показано в следующем примере:
Перейти к разделу A
Раздел A
Lorem ipsum dolor sit amet, conctetur adipiscing elit...
Совет: Вы даже можете перейти к разделу другой веб-страницы, указав URL-адрес этой страницы вместе с привязкой (например, #elementId ) в атрибуте href , например Перейти к TopicA .
Создание ссылок для загрузки
Вы также можете создать ссылку для загрузки файла точно так же, как и размещение текстовых ссылок. Просто укажите целевой URL-адрес на файл, который должен быть доступен для загрузки.
В следующем примере мы создали ссылки для загрузки файлов ZIP, PDF и JPG.
Загрузить Zip-файл
Загрузить файл PDF
Загрузить файл изображения 
Примечание: Когда вы щелкаете ссылку, указывающую на файл PDF или изображение, файл не загружается напрямую на ваш жесткий диск.Он откроет файл только в вашем веб-браузере. В дальнейшем вы можете сохранить или загрузить его на жесткий диск на постоянной основе.
ссылок в документах HTML
ссылок в документах HTMLHTML предлагает многие стандартные идиомы публикации для форматированного текста и структурированные документы, но от большинства других языков разметки его отличает его возможности для гипертекста и интерактивных документов.В этом разделе вводится ссылка (или гиперссылка, или веб-ссылка), основная конструкция гипертекста. А ссылка — это соединение одного веб-ресурса с другим. Хотя простой концепция, связь была одной из основных движущих сил успеха Интернет.
А Ссылка имеет два конца — якоря — и направление. Ссылка начинается с привязки «источник» и указывает на якорь «назначения», которым может быть любой веб-ресурс (например, изображение, видео клип, звуковой фрагмент, программа, документ HTML, элемент в HTML документ и т. д.).
12.1.1 Посещение связанного ресурса
Поведение по умолчанию, связанное со ссылкой, — это получение еще один Интернет-ресурс. Такое поведение обычно и неявно полученный путем выбора ссылки (например, щелчком, вводом с клавиатуры, так далее.).
Следующий отрывок HTML содержит две ссылки, одна чьей целевой привязкой является HTML-документ с именем «chapter2.html», а другой, целевой якорем которого является изображение в формате GIF в файле «forest.gif»:
<ТЕЛО> ... какой-то текст ...Вы найдете гораздо больше в главе второй . См. Также эту карту заколдованного леса.
