- Код ссылки (тег ) | HTML
- Всегда ли URL в ссылке начинаются с http://?
- Когда используется слеш (символ /) в конце URL
- Ссылка к заданному месту текста
- Ссылка для отправки почты
- Звонок по телефону
- Ссылка на скачивание файла
- Открыть ссылку в новом окне, новой вкладке, фрейме
- Ссылка «Сохранить в закладки браузера» (HTML)
- Закрыть ссылку в nofollow
- Поясняющий текст к ссылке при наведении курсора мышки
- HTML анкор ссылки
- Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?
- Ссылка в CSS коде
- Как изменить цвет ссылки
- Подчёркивание ссылки
- 20 комментариев:
- HTML Ссылки
- HTML Ссылки — Гиперссылки
- HTML Ссылки — синтаксис
- Пример
- HTML Ссылки — атрибут target
- Пример
- Абсолютные и относительные ссылки
- Пример
- Абсолютные URLы
- Относительные URLы
- HTML Ссылки — использование изображения в качестве ссылки
- Пример
- Ссылка на адрес электронной почты
- Пример
- Кнопка как ссылка
- Пример
- Названия ссылок
- Пример
- Подробнее об абсолютных и относительных URL-адресах
- Пример
- Пример
- Пример
- Краткое содержание главы
- HTML Упражнения
- HTML Ссылки теги
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
- Как создать гиперссылку в HTML
- Дополнительные статьи
- Об этой статье
- Была ли эта статья полезной?
Код ссылки (тег ) | HTML
Элемент станет гиперссылкой, если тег a будет содержать атрибут href . В качестве значения href принимается адрес веб-страницы. Его называют . Он показан в адресной строке браузера.
Всегда ли URL в ссылке начинаются с http://?
Когда используется слеш (символ /) в конце URL
Эти страницы для поискового робота являются разными. Они содержание друг друга (подробнее).
http://shpargalkablog.ru http://shpargalkablog.ru/
Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/ ), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/ . С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel=»canonical» . Если ссылка будет иметь вид
Главная страница Шпаргалки блоггера
то посетитель или, в случае rel=»canonical» только поисковый робот, сначала попадёт на http://shpargalkablog.ru , а потом его перебросит на http://shpargalkablog.ru/ .
Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера.
Веб-документы, имеющие окончание, скажем, .html , .png , .css , считаются конечным файлом и косую черту после них писать не желательно. То есть
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html
Ссылка к заданному месту текста
Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным.
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut
Поисковые системы не рассматривают дубликатами друг друга 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
Ссылка для отправки почты
Звонок по телефону
Ссылка на скачивание файла
Открыть ссылку в новом окне, новой вкладке, фрейме
Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.
Игнорируя желания пользователя, с помощью JavaScript можно открыть ссылку в новом окне любого размера, а не в новой вкладке. Но в таком окне нельзя будет поменять URL в адресной строке браузера.
Ссылка «Сохранить в закладки браузера» (HTML)
Закрыть ссылку в nofollow
- ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
- платные ссылки.
Поясняющий текст к ссылке при наведении курсора мышки
Можно сделать свою всплывающую подсказку вместо той, что создаётся с помощью атрибута title .
HTML анкор ссылки
Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?
Ссылка в CSS коде
Как изменить цвет ссылки
Значение свойства color может быть указано ключевым словом, например, red , green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000
Подчёркивание ссылки
20 комментариев:
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 — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)
С уважением, Владимир NMitra Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background Alex Fialka Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы? NMitra Здравствуйте, вместо смайлика свою картинку
Использовала id из http://fialkaa.blogspot.ru/ То есть id элемента, который находится как можно ближе к низу страницы. Анонимный Привет. Подскажите пожалуйста, есть кнопка размером 220×58, сделанная в css, и в её центре надпись, которая является ссылкой. Но сам элемент ссылки распространяется только всю ширину блока, то бишь на 100%, так как заключён в тег «center», но без него никак. А нужно чтобы ссылка была такой же, как и размер фона за текстом — 220х58, при этом должна оставаться в теге «center». NMitra Привет. Без кода что-то трудно сказать
HTML Ссылки
Ссылки встречаются почти на всех веб страницах. Ссылки позволяют пользователям переходить со страницы на страницу.
HTML Ссылки — Гиперссылки
HTML ссылки — это гиперссылки.
Вы можете нажать на ссылку и перейти к другому документу.
Когда вы наведете курсор мыши на ссылку, стрелка мыши превратится в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим HTML элементом!
HTML Ссылки — синтаксис
Текст ссылки это та часть, которая будет видна читателю.
Нажав на текст ссылки, читатель отправится на указанный URL-адрес.
Пример
В этом примере показано, как создать ссылку на Schoolsw3.com:
По индексу ссылки будут отображаться следующим образом во всех браузерах:
- Не посещенная ссылка подчеркнута синим цветом
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута красным цветом
Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой вид!
HTML Ссылки — атрибут target
По индексу связанная страница будет отображаться в текущем окне браузера. Чтобы изменить это, необходимо указать другой целевой объект для ссылки.
Атрибут target указывает, где открыть связанный документ.
Атрибут target может иметь одно из следующих значений:
- _self — По умолчанию. Открывает документ в том же окне / вкладке, в котором он был нажат
- _blank — Открывает документ в новом окне или вкладке
- _parent — Открывает документ в родительском фрейме
- _top — Открывает документ во всем теле окна
Пример
Используйте target=»_blank» , чтобы открыть связанный документ в новом окне браузера или на новой вкладке:
Абсолютные и относительные ссылки
В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href .
Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без «https://www») :
Пример
Абсолютные URLы
sw3C
Относительные URLы
HTML Изображения
CSS Учебник
HTML Ссылки — использование изображения в качестве ссылки
Чтобы использовать изображение в качестве ссылки, просто поместите тег внутри тега :
Пример
Ссылка на адрес электронной почты
Используйте mailto: внутри атрибута href , чтобы создать ссылку, которая открывает пользователя программы электронной почты (чтобы позволить им отправить новое сообщение электронной почты):
Пример
Кнопка как ссылка
Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.
JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:
Пример
Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.
Названия ссылок
Атрибут title задает дополнительную информацию об элементе. Эта информация чаще всего отображается в виде текста всплывающей подсказки при наведении курсора мыши на элемент.
Пример
Подробнее об абсолютных и относительных URL-адресах
Пример
Используйте полный URL-адрес для ссылки на веб страницу:
Пример
Ссылка на страницу, расположенную в папке html на текущем веб сайте:
Пример
Ссылка на страницу, расположенную в той же папке, что и текущая страница:
Подробнее о путях к файлам вы можете прочитать в этой главе HTML Пути к файлам.
Краткое содержание главы
HTML Упражнения
HTML Ссылки теги
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.
Мы только что запустили
SchoolsW3 видео
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Как создать гиперссылку в HTML
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 18 человек(а).
Количество просмотров этой статьи: 44 709.
В этой статье мы расскажем вам, как создать гиперссылку в HTML. Это можно сделать довольно быстро.
Создайте новый документ в простом текстовом редакторе. Например, в Блокноте или Notepad++ (Windows), или в TextEdit (macOS). В этих программах в HTML-код можно добавить ссылку.
- Вводите следующие теги с новой строки. Так вы создадите каркас HTML-кода, который характерен для любой веб-страницы.
Введите URL-адрес ссылки между кавычками. Используйте адрес, который указан в адресной строке браузера.
- Когда-то существовала программа Microsoft Office FrontPage, с помощью которой HTML-файл можно было просмотреть в браузере без необходимости сохранять файл. Такой программы больше нет, поэтому HTML-файл нужно сначала сохранить, а потом открыть в браузере (не совсем удобно, но нужно сделать всего пару дополнительных действий).
- Убедитесь, что сохранили файл в формате HTML.
- Раньше можно было сделать такую ссылку, чтобы читатель попал в определенный раздел страницы. Сегодня такие ссылки используются крайне редко, потому что сайты содержат больше картинок и меньше текста.
- Чтобы улучшить внешний вид своей гиперссылки, отформатируйте ее с помощью языка CSS.
Дополнительные статьи
Об этой статье
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 18 человек(а). Количество просмотров этой статьи: 44 709.
Была ли эта статья полезной?
Куки помогают сделать WikiHow лучше. Продолжая использовать наш сайт, вы соглашаетесь с нашими куки правилами.