как сделать ссылку в HTML
Рассмотрим как работают ссылки в HTML. Если вы уже успели изучить основы HTML, то вы знаете что HTML расшифровывается как язык гипертекстовой разметки. Важную роль в языке играют гиперссылки (гипертекстовые ссылки), или просто ссылки.
Ссылки создаются с помощью тега <a>. Ссылки бывают четырех видов:
- Ссылки на подключаемые ресурсы, (это ссылки, в которых не используется тег <a>) например тег <link>.
- Ссылки на web-страницы (абсолютные и относительные).
- Внутренние ссылки (якоря).
- Ссылки для скачивания.
Так же рассмотрим текстовые ссылки и ссылки-изображения. Ссылки на электронную почту и телефон. Как сделать кнопку-ссылку и как убрать подчеркивание ссылки.
Как сделать ссылку в HTML
Ссылка состоит из трех основных и четвертой (необязательной) частей.
- Тега ссылки
<a>. - Адреса ссылки
href. - Анкора.
<a href="адрес_ссылки" атрибуты>Анкор</a>
Стиль ссылки по умолчанию:
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
Атрибуты элемента <a>
| Атрибут | Описание | Возможные значения |
|---|---|---|
href | Целевой адрес ссылки. | URL. |
target | Окно в котором должна открыться ссылка. |
|
download | Указывает, что цель должна быть загружена, то есть скачана. | Нет. |
rel | Связь между страницей ссылки и целевым назначением ссылки. |
|
hreflang | Язык цели ссылки. Его следует использовать только тогда, когда также используется href | Код языка, например ru (Русский) или en (Английский). |
type | Тип MIME связанного ресурса. | Текст. |
HTML ссылки по видам
Ссылки на подключаемые ресурсы уже рассматривались ранее в материале «Основы HTML«. Эти ссылки создаются с помощью тегов <link> и <style>. Их задача — подключение внешних файлов.
Ссылки на web-страницы
Абсолютные
Абсолютные ссылки это такие ссылки в которых прописывается полный путь на ссылаемый документ. Например, сошлемся на Яндекс.
<a href="https://yandex.ru/" target="_blank">Яндекс</a>
Результат.
Яндекс
Не забываем, что атрибут target="_blank" говорит нам о том. что ссылка откроется в новом окне.
Относительные
Относительные ссылки это ссылки в которых прописывается относительный адрес на ссылаемый документ (относительно текущего домена). Например, в моем случае внутренней будет считаться ссылка вида:
<a href="/html-tekst/">Текст в HTML</a>
То есть, все что после / относиться к текущему домену abuzov.com. Если перевести эту ссылку в абсолютную, то она примет следующий вид.
<a href="https://abuzov.com/html-tekst/">Текст в HTML</a>
При этом результат на моем сайте будет одинаков — вы попадете на страницу «Текст в HTML».
Внутренние ссылки
Внутренние ссылки это ссылки внутри текущей веб-страницы. Они используются быстрого доступа к фрагменту текста на странице. Еще их называют якорями. Обычно содержание web-страницы оформляется в виде якорей.
Для создания якоря используется идентификатор id. Адрес ссылки на идентификатор начинается со знака #.
Пример.
<ul> <li><a href="#chast1">Часть 1</a></li> <li><a href="#chast2">Часть 2</a></li> <li><a href="#chast3">Часть 3</a></li> </ul> <h3>Часть 1</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <h3>Часть 2</h3> uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <h3>Часть 3</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
После клика по такой ссылке пользователь будет попадать в соответствующую часть HTML-документа.
Ссылки для скачивания
Что бы скачать какой-либо файл к ссылке добавляется атрибут download. Если этот атрибут отсутствует файл будет открываться (или пытаться открываться) в браузере. Например.
<a href="/file/html/html-1.html" target="_blank">Файл с примером откроется в браузере</a><br> <a href="/file/html/html-1.html" download>Файл с примером будет скачан</a>
Результат.
Файл с примером откроется в браузере
Файл с примером будет скачан
Ссылки-изображения
Ссылки-изображения отличаются от текстовых ссылок тем, что вместо текстового анкора (о нем я писал в начале) используется изображение.
Изображение вставляется с помощью тега <img> о котором я расскажу в следующем материале из серии самоучитель HTML.
Пример.
<a href="https://ru.
wikipedia.org/wiki/HTML" target="_blank"><img src="/img/html-logo-wiki.png"></a>Результат.
Об относительных путях
Вы уже второй раз сталкиваетесь с относительным путем. Давайте проясним ситуацию.
На рисунке я привожу простую структуру папок и файлов. таких папок и файлов может быть очень много, десятки, сотни, тысячи. Относительные пути позволяют сократить указание пути к файлу.
Обычно / — обозначает все, что идет после домена, то есть в моем случае abuzov.com = /.
Что бы задать путь текущей папки, то есть папки в которой находится документ, перед / ставиться ..
Для того, что бы подняться на одну папку вверх по дереву, например из папки html к папке file добавляют одну точку.
Итак:
/— корневая папка, домен сайта../— текущая папка, в которой находится файл.../— папка на уровень выше в дереве.
Ссылка на электронную почту, телефон и скайп
Ссылка на электронную почту — это такая ссылка при клике на которую у вас откроется почтовый клиент (установленный по умолчанию) и будет создано пустое письмо на указанный адрес электронной почты.
Пример.
<a href="mailto:[email protected]">[email protected]</a>
Результат.
Ссылка на номер телефона — это ссылка при клике на которую номер подставиться в приложение «Телефон» если вы находитесь на сайте с мобильного устройства. Если вы находитесь на сайте с компьютера то откроется программа для звонков по умолчанию.
Пример.
<a href="tel:+79507007070">+7 (950) 700-70-70</a>
Результат.
+7 (950) 700-70-70
Ссылка на скайп — это ссылка которая (если у вас установлен скайп) позволяет:
- Позвонить пользователю — call.
- Начать чат с пользователем- chat.
- Добавить пользователя в контакты — add.
- Отправить пользователю файл — sendfile.
Пример (name это логин пользователя в скайпе).
<a href="skype:name?call">Skype</a> <a href="skype:name?chat">Skype</a> <a href="skype:name?add">Skype</a> <a href="skype:name?sendfile">Skype</a>
Результат.
Skype
Skype
Skype
Skype
Кнопка-ссылка
Давайте разберемся, как сделать кнопку-ссылку. Тут нужно задействовать элементы формы. Как создаются и работают формы вы можете узнать на этом сайте. Итак, следующий код создает кнопку которая является ссылкой.
<form action="https://yandex.ru/">
<input type="submit" value="Перейти на Яндекс" />
</form>Результат.
action нужно ввести адрес ссылке. В атрибуте value нужно ввести текст кнопки.Как убрать подчеркивание ссылки в HTML
Одним HTML тут не обойтись. Необходимо использовать CSS.
В начале статьи я приводил стиль элемента <a> по умолчанию, напомню:
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
Так вот, свойствоtext-decoration: underline; (в переводе с англ.: оформление текста: подчеркивание) подчеркивает ссылку.
С помощью CSS нужно убрать его.
Пример.
<style>
a {text-decoration:none;}
</style>
<a href="https://abuzov.com/">Ссылка без подчеркивания</a>Результат.
Ссылка без подчеркивания
Итак, в этом материале мы научились создавать ссылки в HTML.
Ссылка html в WordPress | Главная %
Здравствуйте, читатели блога!
Данная статья предназначена для начинающих. В ней вы узнаете, какие могут быть ссылки в WordPress и как их сделать правильно.
В статье:
1. Что такое ссылка
2. Ссылка WordPress текстовая на страницах
3. Ссылка WordPress текстовая в записи
4. Ссылка html
5. Как сделать ссылку в комментариях
6. Ссылка картинка (изображение) и html img
7. Ссылка html в виджетах, сайдбаре, подвале сайта
8. Ссылки внутри страницы
9. В заключение
Что такое ссылка
Ссылки — это неотъемлемый атрибут Интернета. Без них его просто нет.
Начиная с того, что в строке браузера вы вводите адрес сайта в форме URL, вы идёте по этой первой ссылке. В ссылке указывается адрес URL сайта и дополнительная информация.
Ссылка может стоять в строке браузера, в заголовке (header) сайта, в сайд баре (виджетов), в подвале (footer) сайта, в записях и на страницах. Ссылка в WordPress может быть внешней (ссылка направляет на другой сайт) и внутренней (ссылка направляет на другие страницы этого же сайта).
Внешние ссылки следует проставлять в действительной необходимости. Так как они могут увести не только посетителей с вашего сайта, но и роботов — поисковиков.
Ссылку в WordPress можно сделать на слово, часть текста — фразу, на картинку-изображение.
Ссылка в WordPress может быть сделана через использование редактора WordPress, либо в файлы .php выбранной вами темы. Во втором случае надо воспользоваться редактором тем, который открывается в админке WordPress следущим образом : Нажимаем Внешний вид, Редактор.
Это для продвинутых сайтостроителей.
Каждая тема (шаблон WordPress) имеет своё внешнее оформление ссылок. Обратите внимание как это делается в вашей теме. Например, в некоторых темах wordpress все ссылки имеют красный цвет без подчёркивания, при подводе курсора, появляется рука, чёрный цвет и подчёркивание. Обычно заголовок сайта оформляется тоже в виде ссылки.
Это делается для того, чтобы с любой страницы посетитель мог попасть на главную страницу сайта, путём нажатия на заголовок. Все эти детали про ссылки нужны будут вам для того, чтобы продолжать дизайн вашей темы, а не ломать его.
Далее вы можете прочитать как сделать ссылку используя текст, картинку, или сделать ссылку в php шаблонах, в виджетах WordPress.
Ссылка WordPress текстовая на страницах
Заходим в админке WordPress в пункт меню Страницы.
Заранее подготовьте полный адрес ссылки ( http:// … ) , запишите его блокноте или скопируйте в буфер обмена.
Далее — Изменить, если страница существует, или Добавить, если страница только создаётся.
В открывшемся Редакторе WordPress пишем слова, на которые установим ссылку и выделяем их. Делайте это в режиме «визуально».
Находим на панели значок ссылки (цепи неразорванные, соответственно разорванные, если надо удалить ссылку), нажимаем.
В открывшемся маленьком окне вводим или копируем из буфера ссылку.
В последних версиях WordPress можно выбрать URL ссылки из списка.
Если вы хотите перенаправить посетителя временно по этой ссылке, то вы берите Цель — Новое окно.
Если вы хотите, чтобы посетитель ушёл по вашей ссылке с сайта, то введите Открыть в текущем окне. Если вы делаете внутреннюю ссылку на своём WordPress сайте, то вводите по смыслу контекста, нужно ли совсем перейти на другую страницу, или только даёте посмотреть её.
Нажмите Вставить.
Это всё. Перейдите на сайт и нажмите вашу сделанную ссылку. Вы перейдёте по ссылке.
Ссылка WordPress текстовая в записи
Заходим в админке WordPress в пункт меню Записи. Далее всё как для страницы.
Ссылка html
Начинающим пользователям wordpress рекомендую прочитать обязательно.
На странице или в записи можно сделать html ссылку в виде полного адреса URL (http:// …). После сохранения и перехода на сайт, можно убедиться, что ссылка html перенаправит вас по указанному адресу.
Напишите в Редакторе в режиме «визуально» ссылку, например, Переход на страницу
И перейдите в другой режим Редактора WordPress — HTML. В данном режиме вы видите свою страницу в виде документа на языке HTML . Найдите свою ссылку на странице в режиме HTML и просто запомните ЧТО в ней ЧТО означает. Потому что вам не раз придётся сталкиваться с этим тегом ссылки HTML.
<a href=»http://site.ru»>Переход на страницу</a>
<> — само тело тега (команда, директива на языке HTML)
a — тег означающий описание ссылки html
href= — полный адрес URL ссылки html
</> — закрытие тега, в данном случае тега a </a>
Между самим телом тега и его закрытием, находится ТО, что будет напечатано на веб-странице «Переход на сайт», то что увидят посетители сайта как ссылку.
Вернувшись к предыдущему абзацу про ссылки в виде слова или части текста, и переведя режим в «HTML» , вы увидете, что выделенные вами слова когда вы сделали ссылку, находятся между телом тега и его закрытием.
Поймите это и хорошо запомните. Именно этот момент будет ключевым в ваших отношениях с HTML и вашей способности самостоятельно поддерживать свой сайт.
Как сделать ссылку в комментариях
Зайдите в окно комментария.
Напишите полный с http:// URL адреса ссылки.
Нажмите Добавить комментарий. Нажав на ссылку, вы перейдёте по ней.
Ссылка картинка (изображение) и html img
В режиме Редактора WordPress «визуально» вставьте картинку (изображение).
Щёлкните на картинку (изображении). Оно выделится.
Затем нажмите на панели Редактора WordPress на значок ссылки (цепи).
Заполните в ссылке поле полного адреса URL куда вам надо перенаправить посетителя сайта.
Выберите в Цели ( Новое окно, если вы хотите, чтобы посетитель вернулся) или текущее.
Нажмите Вставить.
Это всё. Далее сохраните и перейдите на сайт. Убедитесь , что при клике на ссылку картинку (изображение) , вы попадаете на вставленный URL ссылки.
Разберёмся в тегах ссылки HTML в данном случае.
<a href=»http://site.com» target=»_blank»>
<img title=»визитка» src=»http://site.ru/wp-content/uploads/2010/07/cveti331-150×150.j..; alt=»подпись» width=»150″ height=»150″ >
</a>
Между телом html ссылки тега а и его завершением, стоит тег html img — тег описания изображения. То есть, ТО что стоит между телом тега a и его завершением высвечивается на веб-странице и является ссылкой. В данном случае — не слово, а ссылка в виде картинки (изображения) .
Параметры html ссылки — тег img :
title — имя заголовка, будет высвечиваться при наведении посетителем курсора на изображение
src — полный URL адрес файла содержащего изображение на сервере
alt — если браузер посетителя не может вывести изображение, то вместо него по этой html ссылкебудет показан вставленный в параметр текст
width и height соответственно ширина и высота изображения в пикселях, используемого в этой html ссылке .
Ссылка html в виджетах, сайдбаре, подвале сайта
Ссылки html можно сделать во всех этих частях сайта. Вы можете сами написать ссылку HTML, а если не уверены в себе, то сделайте следующим образом.
Заведите пробную запись или страницу в WordPress , всё равно. Потом вы её удалите.
В пробной записи сделайте ссылку html с помощью значка редактора WordPress в визуальном режиме, или как слово, или как изображение, такую, какую вам надо для размещения в виджете, сайдбаре, подвале. Перейдите на сайт, проверьте её работу.
Потом перейдите в Редакторе WordPress в режим «HTML», и аккуратно скопируйте в буфер получившуюся ссылку на языке HTML.
Далее, поставив курсор в нужное вам место в виджете (ТЕХТ) вставьте html ссылку из буфера. Сохраните. Проверьте её работу перейдя на сайт.
Удалите пробную запись.
Подобным образом , я имею ввиду через пробную запись, можно аккуратно cделать html ссылки в сайдбар, подвал и другие места вашей темы.
Ссылки внутри страницы
Чтобы сделать ссылку внутри страницы, то есть на фрагмент, раздел, абзац на этой же странице, надо поставить якорь (метку, имя) перед соответствующим фрагментом текста, и в ссылке использовать его со значком #.
Пример ссылки внутри страницы:
В HTML редакторе поставьте перед фрагментом текста якорь , используя любой произвольный текст или слово, я взял слово — portfolio. Так будет выглядеть конструкция которую вам надо поставить перед фрагментом текста, чтобы сделать ссылку на него внутри этой же страницы.
<a name=»portfolio»></a>
Замечание. Сайт работает, но Валидатор даёт ошибку на такую конструкцию, Поэтому, лучше использовать другую
<a id=»portfolio»></a>
И разместите в нужном месте внутри страницы ссылку на этот якорь. Это вы можете сделать в HTML редакторе или очень просто в Визуальном.
В HTML редакторе:
<a href=»#portfolio»>текст ссылки или картинка</a>
В визуальном редакторе в форме формирования ссылок в URL поставьте #портфолио
Это всё, по поводу как сделать ссылки внутри страницы. Если вам надо сделать ссылку на другую страницу в определённое место внутри, то прежде всего поставьте якорь внутри страницы, как описано выше.
А при формировании ссылки укажите полный URL страницы с добавленным /#портфолио на конце.
Например,
<a href=»http://site.com/statja/#portfolio»>текст ссылки или картинка</a>
Таким образом можно сделать ссылку наверх этой же страницы, указав
<a href=»#»>Наверх страницы</a>
Вместо текста может быть картинка
В заключение
На этом пожалуй все, что я хотел вам рассказать. Если что-то не понятно, пишите в комментариях, обсудим.
Для более подробного ознакомления смотрите видео урок:
_______________
Статью подготовил Андрей Ладыгин.
Ссылки без подчеркивания
Вы хотели избавиться от подчеркивания в ссылке? Хорошо! Его
очень просто с помощью CSS
стили. Научитесь делать ссылки без подчеркивания.
Если вы используете Dreamweaver в качестве редактора HTML, вам нужно перейти на палитра стилей, создайте новый стиль и примените его к своей ссылке. Вот шаги:
- Нажмите Windows>Стили
- Нажмите кнопку « Таблица стилей »
- Нажмите Новый
- Дайте своему стилю подходящее имя, например «без подчеркивания», и нажмите на ОК .
- Вот в чем хитрость — проверить поле рядом с Нет . Это означает, что в этом стиле нет украшение.
- Теперь вам нужно применить этот стиль ко всем ссылкам на вашей странице.
Код будет выглядеть так: