Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).
Пример 1. Использование абсолютных ссылок
Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
Примеры относительных адресов
/ /demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.
/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.
manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).
Элемент станет гиперссылкой, если тег a будет содержать атрибут href . В качестве значения href принимается адрес веб-страницы. Его называют . Он показан в адресной строке браузера.
Подробнее о том, что такое ссылка и где находится адресная строка браузера
В теге a URL можно сокращать согласно установленным правилам. Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.
Пример:
/2013/01/absolute-relative-links.html«> подробнее про относительные ссылки
Результат:
подробнее про относительные ссылки Установленная на 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/2010/ . С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel=»canonical» . Если ссылка будет иметь вид то посетитель или, в случае rel=»canonical» только поисковый робот, сначала попадёт на http://shpargalkablog.ru , а потом его перебросит на http://shpargalkablog.ru/ .
Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера.
Веб-документы, имеющие окончание, скажем, .html , .png , .css , считаются конечным файлом и косую черту после них писать не желательно. То есть
Ссылка к заданному месту текста
На странице каждое значение идентификатора ( id ) должно употребляться только один раз. В CSS селектор id распознаётся благодаря хэшу (символ # ) перед значением идентификатора.
анкор
Пример:
Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным.
href=»URL#имя_закладки»> анкор
Пример:
href=»http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut»> ссылка к закладке №1
Результат:
ссылка к закладке №1
Пример:
href=»#tut»> относительная ссылка к закладке №1
Результат:
относительная ссылка к закладке №1
Пример:
href=»http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#ul»> ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»
Результат:
ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»
В CSS есть псевдокласс :target , который отвечает за внешний вид элемента, чей селектор присутствует в URL.
Пример:
Если нужно, чтобы страница перематывалась несколько выше якоря-закладки, то тегу, к которому следует перенестись, можно прописать следующий стиль
Пример:
Если в атрибуте href оставить только символ решётки, то при нажатии на ссылку человек попадёт к началу страницы. Сей элемент с помощью CSS стилей можно зафиксировать на экране и благодаря JavaScript показывать не сразу, а только после прохождения первого экрана (см. подробнее как это сделать).
href=»#»> анкор
Пример:
href=»#»> наверх
Результат:
наверх
Поисковые системы не рассматривают дубликатами друг друга URL вида
Ссылка для отправки почты
В качестве URL следует указать mailto:адрес_электронной_почты . Несколько адресов можно перечислить через запятую. Параметры cc=копия , bcc=скрытая_копия , subject=тема , body=письмо не являются обязательными и объединены с помощью & .
mailto:n.mitra@yandex.ru,n.mitra@yandex.ru?subject=Вопрос по коду ссылки«> служба поддержки
Результат:
служба поддержки
Пример:
href=»mailto:?subject=Код ссылки в html&body=http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html»> поделитесь ссылкой с друзьями
Результат:
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html»>поделитесь ссылкой с друзьями
Звонок по телефону
Если нажать на ссылку, происходит набор номера на мобильных устройствах.
href=»tel:номер»> анкор
Пример:
href=»tel:+79030000000″> Позвонить
Результат:
Позвонить
Ссылка на скачивание файла
Открыть ссылку в новом окне, новой вкладке, фрейме
* на странице есть указанный код ссылки
* на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки
target=»_self»> анкор
target=»_self»> показать смайлик в текущей вкладке или текущем iframe
показать смайлик в текущей вкладке или текущем iframe
target=»_parent»> анкор
target=»_parent»> показать смайлик в текущей вкладке или во фрейме-родителе
показать смайлик в текущей вкладке или во фрейме-родителе
target=»_top»> анкор
target=»_top»> показать смайлик в текущей вкладке
показать смайлик в текущей вкладке
target=»_blank»> анкор
target=»_blank»> показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)
показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)
target=»name»> анкор
target=»raz»> показать смайлик в iframe с указанным name
показать смайлик в 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].
rel=»sidebar»> анкор
rel=»sidebar»> добавить страницу в закладках браузера
добавить страницу в закладках браузера
rel=»noreferrer»> анкор
rel=»noreferrer»> не будет показан URL, с которого пришёл пользователь
не будет показан URL, с которого пришёл пользователь
Закрыть ссылку в nofollow
Поисковые системы рекомендуют закрывать в nofollow
ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
платные ссылки.
Тех, кто ослушается ждёт понижение в выдаче. Поэтому ссылки, оставленные посетителями (например, в комментариях) или требуют проверки, или автоматически закрываются nofollow .
Не нужно закрывать в nofollow абсолютно все внешние ссылки. Не нужно закрывать в nofollow внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше скрыть от поисковиков с помощью Ajax.
rel=»nofollow»> анкор
Пример:
rel=»nofollow»> не передает ни PageRank, ни текст ссылки
Результат:
не передает ни PageRank, ни текст ссылки
Поясняющий текст к ссылке при наведении курсора мышки
Можно сделать свою всплывающую подсказку вместо той, что создаётся с помощью атрибута title .
HTML анкор ссылки
Ссылка может содержать как блочные, так и строчные элементы.
Пример:
Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?
В качестве анкора нужно использовать HTML код картинки. Предварительно изображение нужно загрузить на хостинг сайта или в социальную сеть (ВКонтакте, Google+ и т.п.), чтобы у рисунка появился свой адрес в интернете — URL.
Пример:
Результат:
Ссылка в CSS коде
Как изменить цвет ссылки
В атрибуте style нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id (для одной ссылки) или class (для нескольких) и прописать стиль либо в отдельном файле .css либо в теге style .
Пример:
class=»raz3″> ссылка коричневого цвета, при наведении зелёного
Результат:
ссылка коричневого цвета, при наведении зелёного
Значение свойства color может быть указано ключевым словом, например, red , green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000
Подчёркивание ссылки
За подчёркивание текста отвечает свойство text-decoration , элемента — border-bottom .
Tulyka Делаю всё также, как написано здесь. Вроде бы всё правильно: и якорь с латинским именем находится в нужном месте и ссылка на него сделана в соответствии с требованиями. Публикую сообщение и пытаюсь посмотреть что же у меня в итоге вышло? В итоге, ничего не вышло. Для проверки результата, жму на ссылку, в надежде оказаться в нужном месте текста (или блога), а меня, с просматриваемой страницы блога, выкидывает назад, в редактор сообщений. Почему так? NMitra Да, вспомнила об особенности Blogger. Зайдите снова в редактируемое сообщение, но на вкладку «Изменить HTML» (или «HTML» для нового редактора), там подчистите хэш-ссылку до знака #. И не заходя на вкладку «Создать» сохраните.
Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.
Я редко пользуюсь вкладкой «Создать», поэтому уж подзабыла. Tulyka Я об этом тоже подумала, но уже после того, как написала Вам. Так оно и есть: если делаешь хэш-ссылку, то в визуальный редактор «Создать» нельзя даже и на секундочку заглянуть, до тех пор, пока не сохранишь сообщение с уже готовыми ссылками. Наконец-то, получилось. ) Спасибо! LVE NMitra, подскажите, пожалуйста: 1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?
2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.? NMitra 1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html NMitra stas_dayan, это не URL, а анкор. Мне такую красоту не нужно в комментариях не нужно )) scooter kak sozdati fon NMitra С помощью стилей CSS. Например, так
анкор NMitra В комментариях стили не пропускаются. Анонимный Здравствуйте NMitra!
Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна. У меня в самом верху меню закреплено с помощью position:fixed; и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно. То есть посетитель теряется и не понимает куда его привела хэш-ссылка.
Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как бы отматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).
А если бы еще этот якорь как-нибудь при переходе подсвечивался. ну там бекграунд#FF0000 это было бы круто:)
С уважением, Владимир NMitra Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ NMitra Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/ Анонимный NMitra, спасибо!
Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)
