Бесплатное в сети!
» » Как сделать ссылку на сайт html

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

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

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

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

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

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


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

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

<a class="primer" href="http://vash-sait.ru">Переход по ссылке</a>

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

<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 - ссылка при нажатие указателем мыши.

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

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

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

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

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


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

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

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


Комментарии 0
Добавить комментарий