Главнаяhtml и cssКак сделать ссылку

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

Ссылка для сайта

Публикация посвящена ссылкам: как сделать ссылку на сайте, и какие необходимо внедрить параметры для ссылки.

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

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


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

Для того, чтобы сделать ссылку и отобразить её на странице, нужно прописать простой код html.


<a href="vash-sait.ru/stranica.html">Переход по ссылке</a>

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

Описание элементов ссылки
  • <a>...</a> - парный тег, даёт понять браузеру, что мы используем на странице гиперссылку, то есть формируем ссылку - переход на иную страницу (другой источник);
  • href="..." - параметр указывает браузеру, на какой адрес в интернете ведёт данная ссылка;
  • vash-sait.ru/stranica.html - здесь прописывается нужный адрес вашей страницы (любой адрес), то есть куда будет вести ваша ссылка;
  • Переход по ссылке - называние или отображение вашей ссылки (прописываете любое).

Далее откройте Блокнот, или любой текстовый редактор, вставьте нижеуказанный код и сохраните на рабочем столе, как index.html (обязательно в кодировке utf-8 и НЕ ставьте галочку BOM).


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
  <body>
   <a href="vash-sait.ru/stranica.html">Переход по ссылке</a>
  </body>
</html>

Теперь этот файл index.html откройте в браузере и посмотрите результат.

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

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


Параметры ссылки

По необходимости следует прописать некоторые параметры для ссылки, как: target, title и class.

Наша ссылка с параметрами примет такой вид, привожу код ссылки:


<a class="lyuboy" href="vash-sait.ru" title="Откроется в новом окне" target="_blank">Название ссылки</a>

Теперь рассмотрим прописанные свойства ссылки и присвоенные им значения.

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

Вы будете разумеется добавлять только необходимые параметры для своей ссылки (они не обязательны).

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

Ну и последнее, мы займёмся оформлением для нашей ссылки.


CSS ссылка: стилевое оформление / вид ссылок

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

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

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

К примеру код ссылки будет выглядеть так:


<a class="primer" href="vash-sait.ru">Название ссылки</a>

Далее нам нужно для class с именем primer прописать свойства и стилевые значения.

Пример html кода CSS ссылки в стилевом оформление.


<style type="text/css">
  .primer {
     ...
   }
</style>

<a class="primer" href="vash-sait.ru">Название ссылки</a>

Теперь пришло время разобрать по полочкам 4 основных свойства со значениями для CSS оформления ссылки.

Основные свойства CSS ссылки
  • a:link - ссылка в спокойном состояние, не нажатая, не посещённая;
  • a:hover - ссылка, на которую навели мышкой, то есть при наведение указателем мыши;
  • a:visited - это посещённая ссылка (по ней перешли, она была нажата);
  • a:active - ссылка при нажатие указателем мыши.

Давайте пропишем этим основным свойствам некоторые значения, чтобы вам было всё понятно.


<style type="text/css">
 a.primer:link {
     color: red;      <!-- Цвет при спокойном состояние ссылки -->
   }
 a.primer:hover {
     color: green;    <!-- Цвет при наведение ссылки -->
   }
</style>

<a class="primer" href="vash-sait.ru" title="Пример ссылки">Название ссылки</a>

Вот так эта CSS ссылка будет выглядеть в браузере (наведите):

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

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

Остальные свойства для CSS ссылки
  • text-decoration - со значением underline подчёркнутая ссылка, со значением none - подчёркивание отменено;
  • cursor - выбрав одно из значений к этому параметру курсор при наведение на ссылку примет свой вид, к примеру значение help - отобразит вопросительный знак. По умолчанию значение pointer - отображается значок руки и его прописывать не нужно;
  • display - если указать значение inline, то последующие ссылки отобразятся в одну строку (например, как в горизонтальном меню), если указать значение block, то ссылка примет блочный элемент (например, как в вертикальном меню);
  • background-image - для ссылки добавляется картинка;
  • background-color - для ссылки добавляется цвет фона;
  • padding - отступы для ссылки, обязательны, если вы используете фон (цвет, картинка);
  • border - придаёт ссылке рамку (с любой стороны, либо со всех четырёх).

Для наглядного примера пропишу CSS ссылку с некоторыми свойствами для стилевого оформления.


<style type="text/css">
 .primer { 
     color: #900000; 
     padding: 14px 14px 14px 20px;
     text-decoration: none;
     background-color: #ccc;
     background-image: url("img/many.gif");
     background-position: left center;
     background-repeat: no-repeat;
     border-bottom: 1px solid #666;
     border-right: 1px solid #999;
     border-radius: 10px;
   } 
 .primer:hover {
     color: #006000;
     text-decoration: underline;
   }
</style>

<a class="primer" href="vash-sait.ru" title="Пример ссылки">Название ссылки</a>

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

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


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

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

На этой ноте заканчиваю статью про ссылки, задавайте вопросы и делитесь статьёй с друзьями.

Рейтинг: 4.4/5     Оценили: 19

Похожие публикации

Комментарии к статье 0