Как сделать кликабельную ссылку на сайт

Добавлено: 30.09.2018, 23:15 / Просмотров: 75343

Закрыть ... [X]

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

Например, 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> Результат: трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам
Источник: http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html

Похожие новости


Как без плойки сделать прямые волосы
Вязание прямоугольного коврика крючком пошаговая фотоинструкция
Как тефтели сделать для супа
Резиновое покрытие для площадок своими руками
Координатный стол с чпу своими руками
Танк из спичек инструкция пошагово
Как сделать такое задание по английскому языку
Убрать бока в домашних условиях смотреть



ШОКИРУЮЩИЕ НОВОСТИ


Back to Top