Содержание страницы
домикГлавная / Элементы html и css / Как сделать ссылку
Ссылка для сайтаПубликация посвящена ссылкам: как сделать ссылку на сайте, и какие необходимо внедрить параметры для ссылки.

Из данной статьи вы узнаете, какой код html способствует отображению любой ссылки на вашей странице, какие можно использовать атрибуты к ссылкам, и как их красиво оформить для показа на сайте.

Давайте каждую тему по ссылке рассмотрим подробно.

Содержание статьи

Как сделать ссылку на сайт html

Для того, чтобы сделать ссылку и отобразить её на странице, нужно прописать простой код html:
htmlCOPY
<a class="primer" href="http://vash-sait.ru">Переход по ссылке</a>

Разберём ссылку по фрагментам:

Описание элементов ссылки

  • <a>...</a> - парный тег, даёт понять браузеру, что мы используем на странице гиперссылку, то есть формируем ссылку - переход на иную страницу (другой источник);
  • href="..." - параметр указывает браузеру, на какой адрес в интернете ведёт данная ссылка;
  • http://vash-sait.ru - здесь прописывается нужный адрес вашей страницы ( любой адрес ), то есть куда будет вести ваша ссылка;
  • Переход по ссылке - называние или отображение вашей ссылки (прописываете любое).
Далее откройте Блокнот, или любой текстовый редактор, вставьте нижеуказанный код и сохраните на рабочем столе, как index.html ( обязательно в кодировке utf-8 и НЕ ставьте галочку BOM ).
html и cssCOPY
<style type="text/css"> .primer { ... } </style> <a class="primer" href="http://vash-sait.ru">Название ссылки</a>
Теперь этот файл index.html откройте в браузере и посмотрите результат.

Если у вас открылась страница (при переходе по ссылке) и отобразились не русские слова, то вам нужно проверить Кодировку и быстро исправить положение.

После того, как вы сделали ссылку ( прописали код ), удостоверились, что при нажатие на ссылку вам открывается правильная страничка (либо сайт), то вы можете смело приступать к параметрам для ссылки.
По необходимости следует прописать некоторые параметры для ссылки, как: target, title и class.

Наша ссылка с параметрами примет такой вид, привожу код ссылки:
htmlCOPY
<a class="lyuboy" href="http://vash-sait.ru" title="Моя ссылка" target="_blank">Название ссылки</a>
Теперь рассмотрим прописанные свойства ссылки и присвоенные им значения.

Параметры ссылки и значения

  • class - данный параметр для ссылки вам придётся применять частенько и он служит для оформления (внешнего вида), и об этом подробно я разберу ниже;
  • title - с помощью этого параметра укажем ссылке подсказку, которая начнёт появляться при наведение мышкой на ссылку;
  • target - это параметр указывает браузеру в каком окне следует открыть документ. Значение _blank - ссылка откроется в новом окне. Если этот параметр ссылки не прописывать, то документ откроется в этом же окне.
Вы будете разумеется добавлять только необходимые параметры для своей ссылки (они не обязательны).

Я советую всем прописывать последний параметр для ссылки обязательно в том случае, когда ваша ссылка открывает сторонний ресурс (другой вебсайт), тем самым вы оставляете своего посетителя у себя на сайте.

Ну и последнее, мы займёмся оформлением для нашей ссылки.
На html страницах всегда присутствует огромное число ссылок и для того, чтобы каждая группа (либо ссылка в отдельности) имела разновидность по виду, применяют стилевое CSS оформление. Если для вас это не знакомо, то посмотрите видео по основам html и css.

Чтобы это осуществить необходимо группе гипертекстовых ссылок (либо одной ссылке) задать свой class="" с определённым именем, где для него с помощью CSS ссылка приобрела нужный вид.

Имя для class="" прописывается любое, главное латиницей и без повторов.

К примеру код ссылки будет выглядеть так:
htmlCOPY
<a class="primer" href="http://vash-sait.ru">Название ссылки</a>
Далее нам нужно для class с именем primer прописать свойства и стилевые значения.
html и cssCOPY
<style type="text/css"> .primer { ... } </style> <a class="primer" href="http://vash-sait.ru">Название ссылки</a>
Теперь пришло время разобрать по полочкам 4 основных свойства со значениями для CSS оформления ссылки.

Основные свойства CSS ссылки

  • a:link - ссылка в спокойном состояние, не нажатая, не посещённая;
  • a:hover - ссылка, на которую навели мышкой, то есть при наведение указателем мыши;
  • a:visited - это посещённая ссылка (по ней перешли, она была нажата);
  • a:active - ссылка при нажатие указателем мыши.
Давайте пропишем этим основным свойствам некоторые значения, чтобы вам было всё понятно.
cssCOPY
<style type="text/css"> a.primer:link { color: red; } a.primer:hover { color: green; } </style>
Вот так эта CSS ссылка будет выглядеть в браузере (наведите):

Название ссылки

Думаю с этим разобрались и далее рассмотрим остальные свойства и значения для CSS ссылки, которые применяют чаще всего.

Остальные свойства для CSS ссылки

  • text-decoration - со значением underline подчёркнутая ссылка, со значением none - подчёркивание отменено;
  • cursor - выбрав одно из значений к этому параметру курсор при наведение на ссылку примет свой вид, к примеру значение help - отобразит вопросительный знак. По умолчанию значение pointer - отображается значок руки и его прописывать не нужно;
  • display - если указать значение inline, то последующие ссылки отобразятся в одну строку (например, как в горизонтальном меню), если указать значение block, то ссылка примет блочный элемент (например, как в вертикальном меню);
  • background-image - для ссылки добавляется картинка;
  • background-color - для ссылки добавляется цвет фона;
  • padding - отступы для ссылки, обязательны, если вы используете фон (цвет, картинка);
  • border - придаёт ссылке рамку (с любой стороны, либо со всех четырёх).
Для наглядного примера пропишу CSS ссылку с некоторыми свойствами для стилевого оформления.
cssCOPY
<style type="text/css"> .primer { margin: 40px auto; padding: 14px; color: #900000; text-decoration: none; background-color: #ccc; border-bottom: 1px solid #666; border-right: 1px solid #999; border-radius: 10px; display: block; width: 200px; } .primer:hover { color: #006000; text-decoration: underline; } .primer img { margin: -2px 0 0; padding: 0; vertical-align: middle; display: inline-block; } </style> <a class="primer" href="http://vash-sait.ru"><img src="many.gif" alt=""> Название ссылки</a>

Пример CCS ссылки прописанного выше кода:

Название ссылки

Применив сразу практически все параметры для ссылки у нас почти получилась готовая кнопка, осталось добавить только тень, и изменить цвет фона при наведение на ссылку.

Стоит удалить в стилевом оформление все свойства background и border с их значениями, как у нас получится обыкновенная ссылка, что мы пытались понять и разобрать с самого начала.

На этой ноте заканчиваю статью про ссылки, задавайте вопросы и делитесь статьёй с друзьями.
Дата публикации: 19.08.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!