- Генератор
- href (адрес куда перейти)
- download (чтобы скачать файл, а не открыть его)
- target (где открыть страницу)
- rel (сохранить в закладки, запретить переходить по ссылке поисковому роботу)
- title (всплывающая подсказка)
- Что может быть анкором ссылки (в т.ч. изображение)
- Внешний вид ссылки с CSS
- Как запретить переход по ссылке
- Оптимизация URL адресов сайта
Простой генератор ссылок
Атрибут ссылки href
Элемент станет гиперссылкой, если тег a
будет содержать атрибут href
. В качестве значения href
принимается адрес веб-страницы. Его называют URL. Он показан в адресной строке браузера.
Подробнее о том, что такое ссылка и где находится адресная строка браузера
<a href="URL"> анкор</a>
| |
Пример: | <a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-a-element"> стандарт w3.org</a>
|
---|---|
Результат: | стандарт w3.org |
Всегда ли URL в ссылке начинаются с http://?
В теге a
URL можно сокращать согласно установленным правилам. Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.
Пример: | <a href="/2013/01/absolute-relative-links.html"> подробнее про относительные ссылки</a>
|
---|---|
Результат: | подробнее про относительные ссылки Установленная на http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html приведёт на http://shpargalkablog.ru/2013/01/absolute-relative-links.html Установленная на https://ru.wikipedia.org/wiki/Ссылка приведёт на /2013/01/absolute-relative-links.html |
Когда используется слеш (символ /) в конце URL
Эти страницы для поискового робота являются разными. Они дублируют содержание друг друга (подробнее).
http://shpargalkablog.ru http://shpargalkablog.ru/
Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/
), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/
. С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel="canonical"
. Если ссылка будет иметь вид
то посетитель или, в случае<a href="http://shpargalkablog.ru">
Главная страница Шпаргалки блоггера</a>
rel="canonical"
только поисковый робот, сначала попадёт на http://shpargalkablog.ru
, а потом его перебросит на http://shpargalkablog.ru/
.
Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера.
Веб-документы, имеющие окончание, скажем, .html
, .png
, .css
, считаются конечным файлом и косую черту после них писать не желательно. То есть
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html
Ссылка к заданному месту текста
На странице каждое значение идентификатора (id
) должно употребляться только один раз. В CSS селектор id
распознаётся благодаря хэшу (символ #
) перед значением идентификатора.
<тег id="имя_закладки"> анкор</тег>
| |
Пример: | <style>
#tut {
background: yellow;
}
</style>
<div id="tut"> закладка №1</div>
|
---|---|
Результат: | закладка №1
|
Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным.
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut
<a href="URL#имя_закладки"> анкор</a>
| |
Пример: | <a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut"> ссылка к закладке №1</a>
|
---|---|
Результат: | ссылка к закладке №1 |
Пример: | <a href="#tut"> относительная ссылка к закладке №1</a>
|
Результат: | относительная ссылка к закладке №1 |
Пример: | <a href="http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#ul"> ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»</a>
|
Результат: | ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ» |
В CSS есть псевдокласс :target
, который отвечает за внешний вид элемента, чей селектор присутствует в URL.
Пример: | <style>
#zdes:target {
background: red;
}
</style>
<div id="zdes"> закладка №2</div>
<a href="#zdes"> ссылка к закладке №2, которая (закладка) поменяет свой фон</a>
|
---|---|
Результат: | закладка №2 ссылка к закладке №2, которая (закладка) поменяет свой фон
|
Если нужно, чтобы страница перематывалась несколько выше якоря-закладки, то тегу, к которому следует перенестись, можно прописать следующий стиль
Пример: | <style>
.hash:target:before {
content: "";
display: block;
height: 14em;
margin-top: -14em;
visibility: hidden;
}
</style>
<div id="tam" class="hash"> закладка №3</div>
<a href="#tam"> ссылка перенесёт на 14em над закладкой №3</a>
|
---|---|
Результат: | закладка №3 ссылка перенесёт на 14em над закладкой №3
|
Если в атрибуте href
оставить только символ решётки, то при нажатии на ссылку человек попадёт к началу страницы. Сей элемент с помощью CSS стилей можно зафиксировать на экране и благодаря JavaScript показывать не сразу, а только после прохождения первого экрана (см. подробнее как это сделать).
<a href="#"> анкор</a>
| |
Пример: | <a href="#"> наверх</a>
|
---|---|
Результат: | наверх |
Поисковые системы не рассматривают дубликатами друг друга URL вида
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes
Ссылка для отправки почты
В качестве URL следует указать mailto:адрес_электронной_почты
. Несколько адресов можно перечислить через запятую. Параметры cc=копия
, bcc=скрытая_копия
, subject=тема
, body=письмо
не являются обязательными и объединены с помощью &
.
<a href="mailto:email?cc=копия&bcc=скрытая_копия&subject=тема&body=письмо"> анкор</a>
| |
Пример: | <a href="mailto:n.mitra@yandex.ru"> n.mitra@yandex.ru</a>
|
---|---|
Результат: | n.mitra@yandex.ru |
Пример: | <a href="mailto:n.mitra@yandex.ru,n.mitra@yandex.ru?subject=Вопрос по коду ссылки"> служба поддержки</a>
|
Результат: | служба поддержки |
Пример: | <a href="mailto:?subject=Код ссылки в html&body=<a href='http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html'>http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html</a>"> поделитесь ссылкой с друзьями</a>
|
Результат: | поделитесь ссылкой с друзьями |
Звонок по телефону
Если нажать на ссылку, происходит набор номера на мобильных устройствах.
<a href="tel:номер"> анкор</a>
| |
Пример: | <a href="tel:+79030000000"> Позвонить</a>
|
---|---|
Результат: | Позвонить |
Ссылка на скачивание файла
<a href="URL" download="имя_файла"> анкор</a>
| |
Пример: | <a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download> скачать иконку смайлика</a>
|
---|---|
Результат: | скачать иконку смайлика |
Пример: | <a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download="smaylik"> скачать иконку смайлика с именем файла «smaylik»</a>
|
Результат: | скачать иконку смайлика с именем файла «smaylik» |
Открыть ссылку в новом окне, новой вкладке, фрейме
* на странице есть указанный код ссылки | * на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки |
<a href="URL" target="_self"> анкор</a>
| |
---|---|
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_self"> показать смайлик в текущей вкладке или текущем iframe</a>
| |
показать смайлик в текущей вкладке или текущем iframe | |
<a href="URL" target="_parent"> анкор</a>
| |
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_parent"> показать смайлик в текущей вкладке или во фрейме-родителе</a>
| |
показать смайлик в текущей вкладке или во фрейме-родителе | |
<a href="URL" target="_top"> анкор</a>
| |
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_top"> показать смайлик в текущей вкладке</a>
| |
показать смайлик в текущей вкладке | |
<a href="URL" target="_blank"> анкор</a>
| |
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_blank"> показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)</a>
| |
показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя) | |
<a href="URL" target="name"> анкор</a>
| |
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="raz"> показать смайлик в iframe с указанным name</a>
<iframe name="raz" src=""></iframe>
| |
показать смайлик в iframe с указанным name |
Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.
Игнорируя желания пользователя, с помощью JavaScript можно открыть ссылку в новом окне любого размера, а не в новой вкладке. Но в таком окне нельзя будет поменять URL в адресной строке браузера.
Ссылка «Сохранить в закладки браузера» (HTML)
rel
может иметь несколько значений, разделённых пробелом, например, rel="nofollow noreferrer"
. У whatwg.org список значений несколько больше. В таблице указаны только те, которые имеют практическое применение, так как часто устройства учитывают лишь тег link
: rel="prefetch"
в Mozilla Firefox [developer.mozilla.org] и Google Chrome [developers.google.com], rel="next"
и rel="prev"
для Google [support.google.com].
<a href="URL" rel="sidebar"> анкор</a>
| |
---|---|
<a href="#" rel="sidebar"> добавить страницу в закладках браузера</a>
| |
добавить страницу в закладках браузера | |
<a href="URL" rel="noreferrer"> анкор</a>
| |
<a href="http://shpargalkablog.ru/" rel="noreferrer"> не будет показан URL, с которого пришёл пользователь</a>
| |
не будет показан URL, с которого пришёл пользователь |
Закрыть ссылку в nofollow
Поисковые системы рекомендуют закрывать в nofollow
- ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
- платные ссылки.
nofollow
.
Не нужно закрывать в nofollow
абсолютно все внешние ссылки. Не нужно закрывать в nofollow
внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше скрыть от поисковиков с помощью Ajax.
<a href="URL" rel="nofollow"> анкор</a>
| |
Пример: | <a href="https://support.google.com/webmasters/answer/96569?hl=ru" rel="nofollow"> не передает ни PageRank, ни текст ссылки</a>
|
---|---|
Результат: | не передает ни PageRank, ни текст ссылки |
Поясняющий текст к ссылке при наведении курсора мышки
<a href="URL" title="всплывающая_подсказка_с_поясняющим_текстом"> анкор</a>
| |
Пример: | <a href="http://shpargalkablog.ru/2013/12/title.html" title="про атрибут title: можно ли поменять его внешний вид, учитывается ли он поисковыми системами"> наведи на меня</a>
|
---|---|
Результат: | наведи на меня |
Можно сделать свою всплывающую подсказку вместо той, что создаётся с помощью атрибута title
.
HTML анкор ссылки
Ссылка может содержать как блочные, так и строчные элементы.
Пример: | <a href="#"><div> блочный: ссылкой является вся строка</div></a>
|
---|---|
Результат: | блочный: ссылкой является вся строка
|
Пример: | <a href="#"><span> строчный: ссылкой является только текст</span></a>
|
Результат: | строчный: ссылкой является только текст |
Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?
В качестве анкора нужно использовать HTML код картинки. Предварительно изображение нужно загрузить на хостинг сайта или в социальную сеть (ВКонтакте, Google+ и т.п.), чтобы у рисунка появился свой адрес в интернете — URL.
На одной картинке можно сделать несколько ссылок на разные страницы.
Ссылка в CSS коде
Пример: | <style>
a { /* селектор ссылки */
color: gray;
}
/* псевдоклассы, которые применимы только для ссылок */
a:link { /* не посещённые ссылки */
color: blue;
}
a:visited { /* посещённые ссылки */
color: green;
}
/* псевдоклассы, которые применимы для любых элементов */
a:hover { /* при наведении */
color: orange;
}
a:focus { /* при фокусе, для его работы в некоторых браузерах нужно указать атрибут Что такое псевдоклассы в CSS</a>
|
---|---|
Результат: | Что такое псевдоклассы в CSS |
С помощью стилей CSS из ссылки можно сделать кнопку, из нескольких ссылок — меню.
Как изменить цвет ссылки
Пример: | <a href="#" style="color: #ff0000;"> ссылка красного цвета</a>
|
---|---|
Результат: | ссылка красного цвета |
В атрибуте style
нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id
(для одной ссылки) или class
(для нескольких) и прописать стиль либо в отдельном файле .css
либо в теге style
.
Пример: | <style>
.raz3 {
color: saddlebrown;
}
.raz3:hover {
color: green;
}
</style>
<a href="#" class="raz3"> ссылка коричневого цвета, при наведении зелёного</a>
|
---|---|
Результат: | ссылка коричневого цвета, при наведении зелёного |
Значение свойства color
может быть указано ключевым словом, например, red
, green
(список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета:
Подчёркивание ссылки
За подчёркивание текста отвечает свойство text-decoration
, элемента — border-bottom
.
Пример: | <a href="#" style="text-decoration: none; border-bottom: 1px dashed;"> подчеркивание ссылки пунктиром</a>
|
---|---|
Результат: | подчеркивание ссылки пунктиром |
Пример: | <style>
.raz5 {
text-decoration: none; /* убрать подчёркивание */
}
.raz5:hover {
text-decoration: underline; /* добавить подчёркивание при наведении на ссылку курсора мышки */
}
</style>
<a href="#" class="raz5"> подчеркивание ссылки появляется только после наведения на неё</a>
|
Результат: | подчеркивание ссылки появляется только после наведения на неё |
Пример: | <style>
.raz4,
.raz4:hover {
/* display: inline-block; для длинных ссылок, которые размещаются на нескольких строчках */
position: relative;
margin: 3px; /* отступ от ссылки, особенно актуально для адаптированных под сенсорные устройства сайтов, где нажать по коротким рядомстоящим ссылкам проблематично */
padding: 3px;
text-decoration: none; /* убрать подчёркивание */
color: blue;
}
.raz4:active { /* вид для активной ссылки */
background: #ccc;
color: #fff;
}
.raz4:after, .raz4:before { /* появляющаяся при наведении рамка */
content: "";
position: absolute; /* выравнять по центру */
left: -1px;
right: 0;
top: -1px;
bottom: 0;
z-index: -1;
width: 0;
height: 0;
margin: auto;
border: 0px solid #808991;
}
.raz4:after,
.raz4:hover:before {
height: 100%;
}
.raz4:before,
.raz4:hover:after {
width: 100%;
}
.raz4:hover:before {
height: calc(100% + 2px);
border-width: 0 1px;
transition: .7s;
}
.raz4:hover:after {
width: calc(100% + 2px);
border-width: 1px 0;
transition: .7s;
}
</style>
<a href="#" class="raz4"> красивые текстовые ссылки</a>
|
Результат: | трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам |
20 комментариев:
Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.
Я редко пользуюсь вкладкой "Создать", поэтому уж подзабыла.
Наконец-то, получилось. ) Спасибо!
1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?
2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.?
2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html
<a href="URL" style="background: green;">анкор</a>
Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно...
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.
Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как бы
отматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).
А если бы еще этот якорь как-нибудь при переходе подсвечивался... ну там бекграунд#FF0000 это было бы круто:)
С уважением, Владимир
Отличное решение. Простой css, и всё работает (кроме background - ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)
С уважением, Владимир
<a href="#footer-1"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a>
Использовала id из http://fialkaa.blogspot.ru/ То есть id элемента, который находится как можно ближе к низу страницы.
Пример http://jsfiddle.net/NMitra/q49o7st6/
<style>
.raz {
display: block;
width: 220px;
height: 58px;
margin: 0 auto;
background: green;
}
</style>
<a href="#" class="raz"></a>
Возможно вам вот это поможет http://shpargalkablog.ru/2015/02/h1-seo.html#img (Утверждение 2)