На главную   |  

Ссылки



Ссылки

Простой генератор ссылок

Например, http://shpargalkablog.ru/ или Например, купить телевизор или http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif открыть ссылку в текущей вкладке открыть ссылку в новом окне/вкладке скачать файл

Атрибут ссылки 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> Результат: подробнее про относительные ссылки

Когда используется слеш (символ /) в конце 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 из адресной строки браузера. Как скопировать 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

В 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:"></a> Результат: Пример: <a href="mailto:,?subject=Вопрос по коду ссылки">служба поддержки</a> Результат: служба поддержки Пример: <a href="mailto:?subject=Код ссылки в html&body=&lt;a href='http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html'&gt;http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html&lt;/a&gt;">поделитесь ссылкой с друзьями</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 в адресной строке браузера.

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

  1. ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
  2. платные ссылки.
Тех, кто ослушается ждёт понижение в выдаче. Поэтому ссылки, оставленные посетителями (например, в комментариях) или требуют проверки, или автоматически закрываются 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.

<a href="URL"><img src="URL" alt="описание изображения"/></a> Пример: <a href="http://shpargalkablog.ru/2013/12/image-optimization.html"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a> Результат: смайлик

На одной картинке можно сделать несколько ссылок на разные страницы.

Ссылка в CSS коде

Пример: <style> a { color: gray; } a:link { color: blue; } a:visited { color: green; } a:hover { color: orange; } a:focus { color: red; } a:focus:hover { color: purple; } a:active { color: yellow; } </style> <a href="http://shpargalkablog.ru/2012/02/psevdoklassy-css.html">Что такое псевдоклассы в 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. Узнать код цвета: #ff0000

Подчёркивание ссылки

За подчёркивание текста отвечает свойство 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 { 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> Результат: трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам
Как сделать чтобы не выделялась ссылка 623
Ссылки 386
5-6 классы. Как составить схемы предложений в русском языке, примеры?
Ссылки 574
«Юдин и Новиков» - студия
Ссылки 712
Амулеты
Ссылки 30
Вяжем разные модели
Ссылки 80
Как
Ссылки 89
Ссылки 88
Ссылки 75
Ссылки 64
Ссылки 44
Ссылки 39
Ссылки 58
Ссылки 73
Ссылки 24
Ссылки 80


Теги:

Как сделать большой водоем на даче  Pioneer deh 2210ub схема подключения  Открытки с новорожденным деду  Рисунок поздравление коллеге мужчине  Схемы вышивки жемчужин бисером  Как сделать чтобы появилась адресная строка  Бумага от должника 8 букв  Крючки и спицы для вязания фото  Прически с начесом с бубликом  3 класс поделки из пуговиц  Схема для резьбы по дереву сова  Научиться делать причёски самой себе  Кованые светильники своими руками фото  Воздушка из велосипедного насоса своими руками  Как сложить из бумаги закладку сердечко  Оригами самолет ласточка схемы  Какой поставить дизель на уаз своими руками  Как сделать французский пучок пошагово  Отделка входных дверей изнутри своими руками  Афоризм книга лучший подарок  Дизайн садовых двориков фото  Слова поздравления при получении звания  Фруктовницы из фанеры своими руками  Сделать мозаичный стол своими руками  Схема электропроводки для камаз 5511  

 Рейтинг@Mail.ru
Закрыть ... [X]
Карта сайта