Содержание

Как вставить ссылку в HTML и оформить ее в CSS?

Неотъемлемой и очень важной частью любого сайта являются ссылки, и несмотря на то, где ссылка расположена, и какие функции она выполняет ее необходимо оформить в соответствующем стиле.

В сегодняшней статье я хотела бы вам рассказать, как вставить ссылку в HTML, и показать, как можно ее оформить.

Навигация по статье:

Как вставить ссылку в HTML?

Итак, для создания простейшей ссылки нам необходимо воспользоваться атрибутом <a> и указать адрес, куда будет осуществляться переход при нажатии на ссылку.

HTML-код ссылки:

<a href=»//impuls-web.ru» >Как сделать ссылку на сайт?</a>

<a href=»//impuls-web.ru» >Как сделать ссылку на сайт?</a>

Кроме атрибута href, который задает адрес перехода, тегу <a> можно задавать следующие атрибуты:

  • download – указывает на файл для скачивания.
  • name – якорь.
  • title — всплывающая подсказка при наведении.
  • accesskey — активация ссылки с помощью комбинации клавиш.
  • coords – задает координаты расположение активной области.
  • hreflang – определяет язык текста по ссылке.
  • rel — отношения между ссылаемым и текущим документами.
  • rev — отношения между текущим и ссылаемым документами.
  • shape — указывает форму области ссылки для изображений.
  • tabindex — последовательность переключения между ссылками при нажатии на клавишу Tab.
  • target — имя окна или фрейма, куда браузер будет загружать документ.
  • type — тип документа, на который осуществляется переход.

Большинство из данных атрибутов используются достаточно редко. Наиболее часто используемыми атрибутами являются href, download, target и name.

Как открыть ссылку в новой вкладке HTML?

Для открытия новой вкладке мы можем использовать атрибут target с атрибутом _blank.

HTML-код ссылки:

<a href=»//impuls-web.ru» target=»_blank»>Как сделать ссылку на сайт?</a>

<a href=»//impuls-web.ru»  target=»_blank»>Как сделать ссылку на сайт?</a>

Как делается картинка-ссылка HTML?

Если вам нужно сделать картинку-ссылку в HTML, то для этого вам нужно просто поместить тег <img> с адресом картинки в тег <a>.

HTML-код ссылки:

<a href=»//impuls-web.ru/ » target=»_blank»><img src=» //impuls-web.ru/s2.jpg» alt=»Текст» «/></a>

<a href=»//impuls-web.ru/ » target=»_blank»><img src=» //impuls-web.ru/s2.jpg» alt=»Текст» «/></a>

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

Как сделать ссылку на скачивание файла HTML?

Если вы хотите сделать на своем сайте ссылку для скачивания какого либо файла, то можете использовать HTML-код ссылки:

<a href=» //impuls-web.ru/wp-content/uploads/Примеры текстов для политики конфиденциальности.rar» target=»_blank» download=»»>Скачать </a>

<a href=» //impuls-web.ru/wp-content/uploads/Примеры текстов для политики конфиденциальности.rar» target=»_blank» download=»»>Скачать </a>

При клике по такой ссылке будет появляться всплывающее окошко с предложением сохранить файл на компьютере:

Как сделать якорь на странице html?

Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.

Давайте рассмотрим как сделать якорь на странице html на примере создания кнопки для быстрого перехода наверх сайта.

В начале страницы, после открытия тега <body> делаем ссылку с атрибутом name, которая будет являться якорем, а в конце документа поставим ссылку с переходом на этот якорь.

HTML-код ссылки:

<body> <div><a name=»to-top»></a></div> <p>…</p> <div><a href=»# to-top»>К началу страницы</a></div> </body>

<body>

<div><a name=»to-top»></a></div>

  <p>…</p>

  <div><a href=»# to-top»>К началу страницы</a></div>

</body>

Как изменить цвет ссылки в html?

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

.link a{ color:#444; /* Задаем цвет. Можно задать шестнадцатеричным значением, в RGB и.т.д.*/ text-decoration: none; /* отменяем подчеркивание*/ }

.link a{

color:#444; /* Задаем цвет. Можно задать шестнадцатеричным значением, в RGB и.т.д.*/

text-decoration: none; /* отменяем подчеркивание*/

}

Так же, кроме этого, ссылка, как правило имеет эффект при наведении и для того, что бы эти эффекты изменить, нужно дописать стили для ссылки с псевдоклассом :hover. Например:

.link a:hover{ color:#444; /* Задаем цвет при наведении указателя мышки */ text-decoration: none; /*Добавляем подчеркивание при наведении указателя мышки*/ }

.link a:hover{

color:#444; /* Задаем цвет при наведении указателя мышки */

text-decoration: none; /*Добавляем подчеркивание при наведении указателя мышки*/

}

Как сделать из ссылки кнопку?

Одним из наиболее привлекательных вариантов оформления ссылки является ее стилизация под кнопку. Оформить ссылку в виде кнопки можно двумя простыми способами.

  1. 1.Вы можете стилизовать ссылку под кнопку при помощи CSS-стилей. Для примера я оформила для вас кнопку «Подпобнее»:

    HTML-код ссылки:

    <div> <a href=» //impuls-web.ru » target=»_blank» >Подробнее </a> </div>

    <div>

    <a href=» //impuls-web.ru » target=»_blank» >Подробнее </a>

    </div>

    CSS-код ссылки:

    .link a { display:block; width:100px; margin:auto; padding:10px 20px; background:#58B159; color:#fff!important; text-decoration:none; font-size:18px; } .link a:hover { color:#fff!important; text-decoration:none!important; }

    .link a {

    display:block;

    width:100px;

    margin:auto;

    padding:10px 20px;

    background:#58B159;

    color:#fff!important;

    text-decoration:none;

    font-size:18px;

    }

     

    .link a:hover {

    color:#fff!important;

    text-decoration:none!important;

    }

    Вот что у нас получится в результате:

    Данный способ позволяет сделать очень привлекательную кнопку, и довить для нее различные эффекты при наведении и нажатии, благодаря использованию обширного количества css-свойств.

  2. 2.Так же вы можете пойти другим путем и сделать кнопку-картинку, то есть в качестве кнопки у вас будет картинка в виде кнопки. Большое количество готовых кнопок картинок вы можете найти в Яндексе по запросу «кнопка».

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

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

В данной статье я попыталась рассказать вам об основных вариантах использования тега <a> для создания ссылок и стилизации их под различные задачи. Надеюсь, данный материал будет для полезен для вас при создании ваших будущих проектов.

Если данная статья вам понравилась, не забудьте оставить комментарий и сделать репост в социальные сети. До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Как с помощью css сделать ссылку красивой

3.4K

В css, ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предоставляют широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:

Появление каскадных таблиц стилей (CSS) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.

В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.

Сравните объем кода с использованием каскадных таблиц стилей и без них:


А вот, насколько уменьшается код после включения в него CSS:
Даже визуально заметно, что объем уменьшился в несколько раз. При этом одно стилевое описание CSS ссылки применено ко всем остальным.

CSS включает в себя большой набор средств для установки стилевых характеристик ссылок. Доступ к тегу <a href> может быть реализован несколькими способами:

  • С помощью селектора элемента – при этом стиль ссылки задается селектором элемента а. Пример:
<style type="text/css">
a{font-size:24px;
  font-background-color:#33CC99;
}
</style>

Описанный стиль будет применен ко всем ссылкам внутри страницы:

  • Через селектор идентификатора – он задается внутри тега <a href>. А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:
<style type="text/css">
#a1{font-size:24px;
  font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>

</body>

Результат аналогичен предыдущему.

  • Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:
<style type="text/css">
.a1{font-size:24px;
  font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>

</body>

С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:

<style type="text/css">
a{font-size:24px;
  font-background-color:#33CC99;
  background-color:#FFCCCC;
}
#a2
{background-color:#FF0033;
}
.a3
{background-color:#339999;
}

</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>

</body>

Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс a3 и идентификатор a2, доминируют над цветом, установленным через селектор элемента a.

Таким же образом можно убрать подчеркивание ссылок. Для этого внутри селектора свойству text-decoration присваивается значение none. Пример:

<style type="text/css">
a{
font-size:24px;
text-decoration: none;
}

</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
</body>

Ссылка является не совсем обычным элементом html. Да и в css отношение к тегу <a href> тоже особенное. Для установки характеристик внешнего вида ссылки в каскадных таблицах стилей применяются встроенные псевдо классы.

Псевдо классом называется класс CSS, применяемый к стилю элемента в зависимости от его состояния (активный, неактивный, при нажатии).

В CSS различают несколько псевдо классов ссылок:

  • A:link – задает стиль ссылки до посещения;
  • A:visited – стиль после посещения;
  • A:active – устанавливает, как будет выглядеть активная ссылка;
  • A:hover – вид ссылки при наведении на нее курсора мыши.

A:link по своему действию аналогичен селектору элемента a (оба задают внешний вид не посещенной ссылки).

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

<style type="text/css">

    A:link { text-decoration: none; font-size:24px; }
    A:visited { text-decoration: overline; }
    A:hover { 
     text-decoration: underline overline; font-size:30px;
     color: #FF00FF; 
   }
   A:active { text-decoration: underline; color: #00FF00; font-size:40px; } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>

</body>

С помощью псевдо классов можно легко установить фоновое изображение ссылки, которое меняется в зависимости от действий пользователя. Пример:
<style type="text/css">

    A:link {
	display: block;
    width: 200px;
    height: 70px;
    background: url(im/1.gif)no-repeat; 
	}
    A:visited {
	display: block;
    width: 200px;
    height: 70px;
    background: url(im/2.gif)no-repeat; 
	}
    A:hover { 
    display: block;
    width: 200px;
    height: 70px;
    background: url(im/3.gif)no-repeat;  
   }
   A:active {
    display: block;
    width: 200px;
    height: 70px;
    background: url(im/4.gif)no-repeat; 
   } 
  </style>
 </head>
 <body>
  <p><a href="4.html"></a></p>

</body>

Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html. Да и писанины c CSS намного меньше.

www.internet-technologies.ru

CSS стиль ссылки — свойства и оформление анкора

О том, что представляют собой ссылки в HTML, я уже подробно рассказал. С точки зрения CSS работать с тегом <a> можно, как и с любым другим HTML-тегом. Для ссылок в таблицах стилей предусмотрено четыре специальных псевдокласса. От классов псевдоклассы отличаются тем, что по факту они прикреплены не к тегам, а к событиям или правилам. Изменить рамку поля, в которое сейчас вводится текст, подчеркнуть красным неправильно заполненные поля формы, задать отдельное оформление тексту, написанному на другом языке — всё это и многое другое могут псевдоклассы. От прочих типов селекторов они отличаются двоеточием в начале: :read-only.

Так вот, для оформления ссылок используется четыре псевдокласса:

  • :link — ссылка, по которой ещё не переходили.
  • :hover — ссылка, над которой сейчас находится курсор мыши.
  • :active — ссылка, которую в данный момент нажимает пользователь.
  • :visited — посещённая ссылка, то есть та, по которой уже переходили.

Всё остальное — уже изученный и ещё не пройденный материал, имеющий к ссылкам такое же отношение, как и к другим элементам HTML.

Код ниже демонстрирует оформление ссылок в зависимости от перечисленных выше четырёх событий.

<!DOCTYPE html>
<html>
<head>
    <title>Ссылки</title>
    <style type="text/css">
	a:link {
	 color: #DC143C;
	}
	a:hover {
	 color: #FF00FF;
	 text-decoration: none;
	 font-size: 18px;
	}
	a:active {
	 color: #FFFF00;
	 text-decoration: overline;
	}
	a:visited{
	 color: #228B22;
	 text-decoration: none;
	}
	</style>
</head>
<body>
<a href="#">Ссылка, ведущая сама на себя. Подведите к ней курсор, подержите нажатой кнопку мыши, отпустите. Всё это время наблюдайте за изменениями.</a>
</body>
</html>

Разберём стилевое оформление.

color: цвет — меняет цвет ссылки в зависимости от того, нажали её или нет, только подвели к ней курсор или уже по ней перешли.

text-decoration: none; — убирает заданное ссылкам по умолчанию подчёркивание текста.

font-size: 18px; — меняет размер шрифта ссылки в момент, когда к ней подводится курсор. В момент нажатия ссылки размер шрифта не меняется и остаётся равным 18px, так как пользователь, нажимая ссылку, по-прежнему не убирает с неё курсор мыши, а псевдоклассу :active другой размер шрифта не задан.

text-decoration: overline; — зато свойству :active задано отличное от псевдокласса :hover правило декорирования текста. Именно поэтому в момент нажатия ссылки появляется надчёркивание, тогда как при наведении курсора без щелчка ничего нет.

Полезные ссылки:

www.seostop.ru

Коллекция из 7 анимированных ссылок на CSS

Существует сотни способов для создания красивых ссылок на чистом CSS. Сегодня хотелось бы поделиться оригинальными способами их оформления. В этой коллекции я постарался собрать такие эффекты для ссылок, которые подходят для сплошных текстов, а не отдельных кнопок-ссылок. Кроме того, были отобраны варианты для ссылок стандартного вывода: <a href="url">Текст ссылки</a>, без добавления дополнительных тегов. Это позволит вам производить изменения в существующие сайты без дополнительного вмешательства в html разметку. Для работы со ссылками в спецификации CSS существует 4 псевдокласса:

  • :link — ссылка, по которой ещё не переходили.
  • :hover — ссылка, над которой сейчас находится курсор мыши.
  • :active — ссылка, которую в данный момент нажимает пользователь.
  • :visited — посещённая ссылка, то есть та, по которой уже переходили.

Underline Hover

    Анимация основана на плавном увеличении подчеркивания.
  • Демо
  • Скачать

Animate Underline Wavy

    Необычное волнистое подчеркивание, которое анимируется при наведении курсора. Для корректной работы, у ссылки должен присутствовать атрибут data-text. Этот вариант не очень подходит, если у вас уже существует множество ссылок.
  • Демо
  • Скачать

Follow Along Links

    При наведении курсором, ссылка оформляется фоновой заливкой. При переходе от ссылки к ссылке, фон также плавно переходит.
  • Демо
  • Скачать

Anchor Hover Effects

    Из этой коллекции, эта ссылка мне больше всего понравилась. Основана на использовании псевдоэлементов :after и :before
  • Демо
  • Скачать

Progress Link

    Эффект основан на планом изменении цвета текста.
  • Демо
  • Скачать

Ссылки которые открываются в новом окне

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

Link hover effect

    Простой эффект, основанный на плавном появлении верхнего и нижнего подчеркивания.
  • Демо
  • Скачать

codyshop.ru

CSS для ссылок на файлы или e-mail — учебник CSS

Некоторые виды ссылок порой хочется визуально выделить. Но при этом присваивать каждой из них определенный класс будет неудобно и долго. Используя селекторы атрибутов, можно делать выборку ссылок, исходя из того, на какой тип документа она ссылается, на какой домен ведет и т. д.

На позапрошлом уроке мы показывали, как можно обозначить ссылку, которая открывается в новой вкладке (или новом окне). Там мы воспользовались селектором, который выбирает все ссылки, у которых есть атрибут target со значением _blank. Сегодня мы углубимся в тему селекторов атрибутов и покажем, в каких еще ситуациях они могут стать полезными.

Ссылки на e-mail и телефон

При клике по ссылке, содержащей адрес электронной почты или номер телефона, обычно запускается почтовый клиент / набор номера. О таком поведении желательно предупредить пользователей, добавив для таких ссылок специальное обозначение. Каким образом выбрать все ссылки на сайте, которые начинаются с приставки mailto:? Легко — с помощью селектора атрибута:


a[href^="mailto:"] { /* ваш стиль для ссылок на электронную почту */ }

Символ ^, указанный перед символом равенства, можно перевести как «начинается с». Иными словами, мы выбираем все теги <a>, у которых есть атрибут href со значением, начинающимся на mailto:, и пишем для этой группы элементов свой стиль CSS.

Аналогично можно поступить и со ссылками, содержащими номера телефонов. Обычно перед номером телефона указывается ключевое слово tel:, поэтому мы можем сделать выборку по нему:


a[href^="tel:"] { ... }

Если вам нужно добавить специальный стиль для ссылок с номерами телефонов определенной страны (например, обозначить их небольшим флажком), вы можете без проблем сделать и это. Достаточно добавить к предыдущему селектору код страны (для примера пусть это будет +44):


a[href^="tel:+44"] { ... }

То же самое можно проделать и с мобильными операторами:


a[href^="tel:+38067"] { ... }

А также можно выбрать ссылки, которые ведут на определенный сайт:


a[href^="https://www.facebook.com"] { ... }

Ссылки на файлы

Вы можете определять не только, как начинается ссылка, но и как она заканчивается. Это весьма полезно, когда нужно стилизовать ссылки, которые ведут к определенным файлам. Например, чтобы выбрать ссылки на ZIP-архив, запишите:


a[href$=".zip"] { ... }

Символ $, указанный перед символом равенства, можно перевести как «заканчивается на». То есть, мы выбираем элементы <a>, у которых есть атрибут href со значением, заканчивающимся на .zip.

Безусловно, аналогичным способом вы можете находить и стилизовать ссылки на другие файлы, например, .png, .pdf, .mp3, .xlsx и так далее.

Ссылки с data- атрибутами

В HTML5 есть возможность добавлять пользовательские атрибуты к любому тегу. Эти атрибуты используются для хранения различных значений. Атрибут, который добавляется, обязательно должен начинаться с приставки data-, после чего может идти произвольное имя. Одним из практических вариантов применения таких атрибутов является создание всплывающих подсказок с текстом, который как раз и хранится в значении пользовательского атрибута.

Позже в книге мы рассмотрим способ использования таких атрибутов, а пока что покажем, как можно выбрать ссылки с data- атрибутом через соответствующий селектор. Допустим, что у некоторых ссылок есть пользовательский атрибут data-description. Обратиться к ним можно следующим образом:


a[data-description] { ... }

Как вы догадываетесь, можно делать подобные выборки не только на основе data- атрибутов, а и на основе любых других — rel, title, target, class и т. д.

В следующем уроке мы разберем популярную современную технику хранения и использования фоновых изображений, которая помогает повысить производительность сайта — спрайты CSS.

idg.net.ua

Абсолютные и относительные ссылки | htmlbook.ru

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

В примере 8.2 показано создание абсолютной ссылки на другой сайт.

Пример 8.2. Использование абсолютных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Абсолютный адрес</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru">Изучение HTML</a></p>
 </body>
</html>

В данном примере ссылка вида <a href=»http://htmlbook.ru»>Изучение HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 8.4).

Рис. 8.4

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Ссылка</a>

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

2. Файлы размещаются в разных папках (рис. 8.5).

Рис. 8.5

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

<a href="../Ссылаемый документ.html">Ссылка</a>

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 8.6).

Рис. 8.6

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

<a href="../../Ссылаемый документ.html">Ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 8.7).

Рис. 8.7

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

htmlbook.ru

HTML Ссылки

Ссылки находятся почти всех веб страниц. Ссылки позволяют пользователям пройти путь от страницы к странице.

Ссылки — Гиперссылки HTML

HTML-ссылки представляют собой гиперссылки.

Вы можете нажать на ссылку и перейти на другой документ.

При наведении на ссылку, курсор мыши превратится в руку.

Примечание: Ссылка не должна быть только текстом. Ссылка может быть изображением или любым другим элементом HTML.

Синтаксис ссылки HTML

В HTML, ссылка определяется тегом <a>:

<a href=»url-адрес«>Текст ссылки</a>

Атрибут href указывает адрес назначения (https://schoolsw3.com/html/) ссылки.

Текст ссылки это видимая часть (посетите наш HTML учебник).

Нажав на текстовую ссылку, Вы перейдете на указанный адрес.

Примечание: Без косой черты с адресом папки, вы можете создать два запроса к серверу. Многие сервера автоматически добавляют слеши к адресу, а затем создают новый запрос.

Локальные Ссылки

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

Локальная ссылка (ссылка на тот же веб-сайт), указан относительный URL-адрес (без http://..).

Цвет Ссылок HTML

По умолчанию, ссылка будет выглядеть так же, как (во всех браузерах):

  • Непросмотренная ссылка — подчеркнута и синяя
  • Посещенная ссылка — подчеркнута и фиолетовая
  • Активная ссылка — подчеркнута и красная

Вы можете изменить цвета по умолчанию, с помощью стилей CSS:

Пример


a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

Редактор кода »

Ссылки HTML — атрибут target

Атрибут target определяет, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

  • _blank — Открывает связанный документ в новом окне или вкладке
  • _self — Открывает связанный документ в том же окне/вкладке, где она была нажата (по умолчанию)
  • _parent — Открывает связанный документ в родительском фрейме
  • _top — Открывает связанный документ в полном окне
  • framename — Открывает связанный документ в указанном фрейме

Этот пример открывает связанный документ в новой вкладке окна браузера:

Совет: Если Ваша Веб-страница заблокирована в рамке (frame), вы можете использовать target=»_top», чтобы выйти из рамки:

Ссылки HTML — Изображение как ссылка

Изображение является общим для использования в качестве ссылки:

Пример

<a href=»../index.php»>
  <img src=»smiley.gif» alt=»Учебник HTML»>
</a>

Редактор кода »

Примечание: border:0; добавляется для предотвращения IE9 (и ранее) отображать границы вокруг изображения (если изображение является ссылкой).

Ссылки HTML — Создать Закладку

Закладки HTML позволяют читателям, перейти к определенной части веб-страницы.

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

Чтобы сделать закладку, нужно сначала создать закладку, а затем добавить ссылку на нее.

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

Пример

Во-первых, создать закладку с помощью атрибута id :

<h3>Глава 4</h3>

Затем добавьте ссылку на закладку («Перейти к Главе 4»), на той же странице:

<a href=»#C4″>Перейти к Главе 4</a>

Или добавьте ссылку в закладки («Перейти к Главе 4»), на другую страницу:

Внешний Путь

Внешние страницы могут быть указаны полный адрес или относительный путь к текущей веб-странице.

В этом примере используется полный URL-адрес, ссылки на веб-страницу:

Это пример ссылки на страницу, расположенние в папке php на текущем веб-сайта:

Это пример ссылки на страницу, расположенние в той же папке, что и текущая страница:

Краткое содержание

  • Используйте HTML элемент <a> для определения ссылки
  • Используйте HTML атрибут href для определения адреса ссылки
  • Используйте HTML атрибут target для определения, где открыть связанный документ
  • Используйте HTML элемент <img> (внутри тега <a>) для определения изображение в качестве ссылки
  • Используйте HTML атрибут id (id=»value«) для определения закладки на странице
  • Используйте HTML атрибут href (href=»#value«) для ссылки на закладку страницы

HTML Упражнения

Тег Ссылки HTML

ТегОписание
<a>Определяет гиперссылку

schoolsw3.com

No related posts.