Анкоры и ссылки: как они работают в html
Содержание:
- Открытие ссылки в новом окне
- Добавляем ссылку в HTML-документ
- Рамка вокруг ссылки
- Как сделать ссылку в HTML
- Краткое руководство по URL-адресам и путям
- Создание ссылки изображения HTML
- Внутренние ссылки
- Как изменить цвет ссылки в html?
- Атрибуты¶
- Как подключить CSS файл к HTML странице?
- Никогда не говорите «Нажмите здесь»
- Рисунки возле внешних ссылок
- Значения target
- Абсолютные адреса
- Как сделать якорь на странице html?
Открытие ссылки в новом окне
По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target. В качестве значения используется зарезервированное слово _blank, тогда страница откроется в новом окне браузера (пример 2). Открывать в новой вкладке или новом окне — задавать через HTML мы не можем, это определяется настройками браузера и пользователя.
Пример 2. Создание различных ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
</head>
<body>
<p><a href=»page/1.html»>Ссылка откроется в текущем окне</a></p>
<p><a href=»page/2.html» target=»_blank»>Ссылка откроется в новом окне</а></p>
</body>
</html>
Добавляем ссылку в HTML-документ
Добавим ссылку которая будет ссылаться на страницу о полярном волке, саму ссылку разместим на странице о снежном барсе.
<a href="адрес страницы">Текст</a>
— открывающий тег ссылки, который указывает на то что здесь будет ссылка, — свойство тега , которое указывает на адрес страницы, — значение свойства , адрес страницы, — любой текст, — закрывающий тег ссылки.
Добавьте в HTML-документ файла (Страница о снежном барсе), перед закрывающим тегом , следующий код:
<a href="polyarnyi-volk.html">Полярный волк</a>
Так как файлы и находятся в одной папке Рабочий стол, то адресом страницы о полярном волке, будет просто имя его файла
В качестве можно написать всё что угодно, но обычно пишут текст описывающий страницу на которую ссылается ссылка, в нашем случае это .
В итоге, HTML-документ файла будет выглядеть следующим образом:
<html>
<head>
<title>Страница о снежном барсе</title>
<style>
h1 {
color: green;
font-family: Arial;
}
p {
color: blue;
font-size: 19px;
width: 60%;
}
</style>
</head>
<body>
<h1>Снежный барс</h1>
<img src="irbis.jpg">
<p>
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии,
Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом,
относительно короткими лапами, небольшой головой и очень длинным хвостом.
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными
пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по
приблизительным оценкам их количество варьируется в районе около 10 тысяч
особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
запрещена.</p>
<a href="polyarnyi-volk.html">Полярный волк</a>
</body>
</html>
Открыв файл с помощью браузера, вы должны увидеть следующее.
Внизу страницы находится ссылка, нажав на которую вы попадёте на страницу о полярном волке. Как вы можете заметить, на странице о полярном волке, нету ссылки. Давайте добавим туда ссылку, которая будет ссылаться на страницу о снежном барсе.
Добавьте в HTML-документ файла , перед закрывающим тегом , следующий код:
<a href="index.html">Снежный барс</a>
В итоге, HTML-документ файла будет выглядеть следующим образом:
<html>
<head>
<title>Страница о полярном волке</title>
<style>
h1 {
color: green;
font-family: Arial;
}
p {
color: blue;
font-size: 19px;
width: 60%;
}
</style>
</head>
<body>
<h1>Полярный волк</h1>
<img src="polyarnyi-volk.jpg">
<p>
Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
обширных пространствах северных регионов, которые пять месяцев в году,
погружены в темноту. Чтобы выжить, волк приспособился есть практически
любой корм, который только попадается ему на пути.</p>
<p>
Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
жить при минусовой температуре, месяцами не видеть солнечного света и
неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
леминги, зайцы, овцебыки, олени и птицы.</p>
<a href="index.html">Снежный барс</a>
</body>
</html>
Открыв файл с помощью браузера, вы должны увидеть следующее.
Внизу страницы находится ссылка, нажав на которую вы попадёте на страницу о снежном барсе.
Нажимая по ссылкам расположенным на страницах, вы будете переходить от снежного барса к полярному волку и наоборот.
Читать далее: Создаём сайт из трёх страниц
-
Category:
HTML
-
Tag:
html, ссылка a, учебник html
Рамка вокруг ссылки
При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.
В примере 6 показано, как изменять цвет рамки, используя свойство border. Подчёркивание текста через text-decoration можно убрать или оставить без изменения.
Пример 6. Изменение цвета рамки у ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
border: 1px solid blue; /* Синяя рамка вокруг ссылок */
padding: 2px; /* Поля вокруг текста */
text-decoration: none; /* Скрываем подчёркивание */
}
a:hover {
border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>
Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding. Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background.
Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover. Прозрачный цвет указывается с помощью ключевого слова transparent, в остальном стиль не поменяется.
Как сделать ссылку в HTML
Всем привет! Сегодняшний пост будет о создании ссылок HTML, без которых не может существовать ни один уважающий себя сайт либо блог. Это одна из первых вещей, которые вы узнаете в процессе изучения веб-дизайна и самостоятельного продвижения сайтов. Как и все в HTML, это достаточно просто, но вы будете удивлены, как часто народ задает вопросы, как правильно сделать ссылку HTML или ссылку-изображение на что-то другое. Это изображение может быть фото, значок или кнопка, это не имеет значения, код остается тем же самым.
Этот пост будет охватывать:
- Текстовые ссылки HTML — добавление текста, который связан с определенным URL
- Добавление изображения с помощью HTML
- Ссылка изображения HTML — добавление изображения, которое связано с конкретным URL
Создание ссылок с использованием HTML
Для того, чтобы размещать ссылки на другие страницы сайта (внутренняя перелинковка) или на внешние ресурсы, а так же создавать ссылки изображения HTML, вам нужно знать код HTML. Вот так выглядит простая текстовая ссылка:
<a href="URL"> Отображаемый текст </a>
А когда вы заполните свои данные, она будет выглядеть примерно так:
<a href="https://promotiger.ru"> SEO блог </a>
Ну а вот так (SEO блог) она будет выглядеть в записи блога, комментарии, форума и т.д.
Как это работает?
Рассмотрим ссылку <a href=»URL»>, она может быть разбита на три части:
- <A HREF = это для ссылки. Не имеет значения, текст это или изображение, это всегда код для ссылки. Следующим важным моментом является указание «URL» для ссылки, другими словами, куда браузер будет направлять нас, когда мы нажимаем на элемент (текст или картинка). При указании адреса ссылки вам следует всегда использовать абсолютный адрес — это означает, что URL начинается с http:// иначе вы увидите сообщение об ошибке. Не забывайте закрывать эту часть с помощью >.
- Второй раздел представляет собой отображаемый текст. Он будет виден в вашем блоге сайте или комментарии в виде ссылки, как только HTML преобразует его.
- И, наконец, третий раздел. В HTML, если вы открываете тег, такой как <a href=»URL»> необходимо закрыть его, поэтому мы добавляем </a> в самом конце.
Краткое руководство по URL-адресам и путям
Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.
URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу .
URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)
Корень структуры — каталог . При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — и . На настоящем веб-сайте был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).
В корне есть ещё два каталога — и . У каждого из них есть один файл внутри — и , соответственно
Обратите внимание на то, что вы можете довольно успешно иметь два файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй , возможно, будет главной лендинг-страницей для связанной с проектом информации
-
Тот же каталог: Если вы хотите подключить ссылку внутри (верхний уровень ), указывающую на , вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — :
-
Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри (верхний уровень , вам нужно спуститься ниже в директории перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете — :
-
Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри , указывающую на , вам нужно будет подняться на уровень каталога, затем спустится в каталог . «Подняться вверх на уровень каталога» обозначается двумя точками — — так, URL-адрес, который вы используете :
Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: .
Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:
Затем, чтобы связаться с этим конкретным , вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:
Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:
Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL
- Абсолютный URL
- Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница загружается в каталог, называемый , который находится внутри корня веб-сервера, а домен веб-сайта — , страница будет доступна по адресу (или даже просто ), так как большинство веб-серверов просто ищет целевую страницу, такую как , для загрузки, если он не указан в URL-адресе.).
Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.
- Относительный URL
- Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла — — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории внутри каталога , относительная ссылка будет (аналогичный абсолютный URL был бы .).
Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл из каталога в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL будет вести на , а не на .
Советуем вам основательно разобраться в этой теме!
Создание ссылки изображения HTML
Теперь, после того, как вы узнали, как создать ссылку HTML и как добавить изображение, очень просто объединить их. Создать изображение, которое будет вести на определенный URL при нажатии. Вот код ссылки изображения HTML, но на этот раз вместо текста мы добавляем код для изображения.
<a href="URL"> <img src="URL изображения" alt="Описание изображения"> </a>
Как это работает?
Иногда мы хотим, чтобы связанная со ссылкой страница открывалась в новой вкладке браузера. Для этого нужно добавить такой код в первой части: target перед . Это можно сделать и для ссылки изображения HTML и для текстовой ссылки.
<a href="URL" target="_blank"> Текст вашей ссылки </a>
<a href="URL" target="_blank"> <img src="URL изображения"> </a>
Вот и все, что касается того, как добавить текстовые ссылки, изображения и ссылки изображения в HTML. Я надеюсь, что это поможет вам прояснить некоторую путаницу и теперь вы понимаете, как создавать ссылки и, как они работают.
Внутренние ссылки
Если внешние ссылки ведут с одной страницы на другую, то внутренние обеспечивают быстрый переход к разным частям текущего документа. Их удобно использовать на страницах с большим количеством контента. Особенно часто с помощью внутренних ссылок создают оглавления.
Чтобы на разделы страницы ссылаться, их надо как-то идентифицировать. Для этой цели используется якорь — специальное имя раздела, которое нужно будет задать в качестве значения атрибуту href, чтобы на раздел сослаться. Идентификатор должен быть уникальным (то есть на одной странице не должно быть двух одинаковых якорей) и состоять из букв латинского алфавита.
Имя якоря указывается в атрибуте id любого HTML-тега.
Например, внизу HTML-документа вы хотите разместить ссылку «Вверх», которая будет вести к его началу — заголовку «Начало страницы». Для этого вам нужно поставить в начале страницы якорь, а внизу страницы — ссылку на него.
Пусть якорь будет называться begin. Тогда в тег, к содержимому которого будет вести ссылка, нужно добавить атрибут id со значением begin.
<h1 id=”begin”>Начало страницы</h1>
Якорь установлен, и теперь остаётся только добавить ведущую на него ссылку. В нашем случае она будет выглядеть так:
<a href=”#begin”>Наверх</a>
Обратите внимание: перед названием якоря стоит решётка — это отличительная черта внутренних ссылок
Как изменить цвет ссылки в html?
Как правило, ссылки выделены синим цветом и подчеркиванием. Для того, что бы это изменить цвет ссылки в html вам нужно в файле стилей CSS задать для ссылки следующие свойства:
PHP
.link a{
color:#444; /* Задаем цвет. Можно задать шестнадцатеричным значением, в RGB и.т.д.*/
text-decoration: none; /* отменяем подчеркивание*/
}
|
1 |
.linka{ color#444; /* Задаем цвет. Можно задать шестнадцатеричным значением, в RGB и.т.д.*/ text-decorationnone;/* отменяем подчеркивание*/ } |
Так же, кроме этого, ссылка, как правило имеет эффект при наведении и для того, что бы эти эффекты изменить, нужно дописать стили для ссылки с псевдоклассом :hover. Например:
PHP
.link a:hover{
color:#444; /* Задаем цвет при наведении указателя мышки */
text-decoration: none; /*Добавляем подчеркивание при наведении указателя мышки*/
}
|
1 |
.linkahover{ color#444; /* Задаем цвет при наведении указателя мышки */ text-decorationnone;/*Добавляем подчеркивание при наведении указателя мышки*/ } |
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
download
Синтаксис
Значения
Если атрибут пишется без значения, то файл скачивается и сохраняется под своим исходным именем, как оно написано на сервере. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя. При этом файл будет скачан и сохранён с именем, указанным в значении . Расширение файла при этом останется исходным.
Значение по умолчанию
По умолчанию этот атрибут выключен.
Синтаксис
Значение по умолчанию
Нет.
Атрибут (от англ. hypertext reference language — язык гипертекстовой ссылки) указывает язык документа, на который ведёт ссылка.
Синтаксис
Значения
Код языка
Значение по умолчанию
Нет.
Примечание
Атрибут можно использовать для стилизации ссылок, ведущих на иностранные ресурсы.
referrerpolicy
Синтаксис
Значения
- не отправляет заголовок .
- не отправляет заголовок ресурсу без (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
- отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
- отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
- отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
Значение по умолчанию
rel
Атрибут (от англ. relation — связь, отношение) определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом . Несмотря на то, что большинство браузеров не поддерживают атрибут , на сайтах часто можно встретить код , предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.
Синтаксис
Значения
Значение по умолчанию
Нет.
target
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом . Если установлено несуществующее имя, то будет открыта новая вкладка браузера. В качестве зарезервированных имен используются следующие.
- Загружает страницу в новую вкладку браузера.
- Загружает страницу в текущую вкладку.
- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как .
- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как .
Значение по умолчанию
type
Атрибут (от англ. type — тип) устанавливает MIME-тип документа, на который указывает ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут должен добавляться только при наличии атрибута .
Синтаксис
Значения
MIME-тип
Значение по умолчанию
Нет.
Как подключить CSS файл к HTML странице?
Пока стили CSS не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.
Для тех, кто любит смотреть в формате видео.
Для тех, кто любит читать, инструкция ниже.
Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.
Задача стилей CSS, которые будут подключаться, сделать элемент абзаца <p> красным цветом.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.
1 вариант. Внутри открывающего тега с помощью атрибута style.
Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.
Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента <p>.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен
2 вариант. Внутри элемента style.
Еще один способ подключения стилей CSS, это воспользоваться элементом <style> с атрибутом type=»text/css». Указание этого атрибута обязательно.
Давайте посмотрим, как это выглядит на конкретном примере.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<p>Абзац</p>
</body>
</html>
3 вариант. Подключение внешнего файла стилей.
И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.
Обратите внимание на атрибуты, которые указываются у этого элемента
<link rel="stylesheet" href="style.css" type="text/css"/>
Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Файл style.css содержит следующих код:
p {color:red;}
Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Никогда не говорите «Нажмите здесь»
Конечно, вы видели и ссылки, которые выглядят примерно так:
Чтобы узнать больше <a href="http://example.com">нажмите здесь</a>!
Но лучше не использовать такие анкоры. Для этого существует несколько причин:
- Пользователям потребуется несколько секунд, чтобы исследовать текст вокруг ссылки и получить представление о том, куда она ведет.
- Поисковые роботы связывают текст анкора с URL-адресом ссылки. Правильно подобранный анкор помогает поисковым системам определять релевантность веб-страницы ключевикам.
Текст анкора должен быть кратким и идентифицировать ключевые слова, относящиеся к веб-странице. Два примера правильно выбранного текста ссылки:
Если хотите, чтобы ваш сайт получал больше трафика из <a href="http://www.google.com/" target="_blank" rel="noopener"> поисковых систем</a>, ознакомьтесь с нашим <a href="/seo/">руководством по SEO</a>, в котором вы найдете советы по улучшению ранжирования сайта.
Первая ссылка сообщает поисковым роботам и пользователям, что сайт http://www.google.com имеет отношение к ключевому слову «поисковые системы». Вторая ссылка сообщает, что страница, расположенная по относительному URL-адресу /seo/, связана с ключевым словом «руководство по SEO».
Рисунки возле внешних ссылок
Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).
Рис. 3. Выделение ссылки с помощью рисунка
Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] {…}, как показано в примере 7.
Пример 7. Рисунок возле ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a[href^=»http://»] {
background: url(/example/image/blank.png) 100% 5px no-repeat; /* Рисунок */
padding-right: 18px; /* Отступ справа */
}
</style>
</head>
<body>
<p><a href=»1.html»>Обычная ссылка</a></p>
<p><a href=»http://htmlbook.ru»>Ссылка на сайт htmlbook.ru</a></p>
</body>
</html>
Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right. Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left.
Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»], он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.
ссылки
Значения target
Четыре наиболее распространенных значения атрибута target:
_self
Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.
Единственная ситуация, в которой это может произойти, если в HTML использован тег <base>, который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами <head> добавлен следующий код <base href=»http://www.ltconsulting.co.uk» target=»_blank»/>, нужно использовать target=»_self», чтобы ссылка открывалась в том же окне.
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript, а не HTML.
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы. Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5. Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.
_top
Как и _parent, значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.
framename
Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target. Например, <a href=»http://ltconsulting.co.uk» target=»frame1″> открывается во фрейме с именем frame1, то есть <frame src=»https://www.internet-technologies.ru/wp-content/uploads/sidebar» name=»frame1″>. iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.
Символ подчёркивания
Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank», то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:
<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>
Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank:
Код второй ссылки:
<a href="http://ltconsulting.co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>
Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой (собственной вкладке).
Это связано со значением framename, которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank” интерпретируется как значение типа framename. В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank”.
Чтобы избежать этой проблемы, для ключевых слов значений было добавлено нижнее подчеркивание. Вот откуда взялось _blank.
Абсолютные адреса
Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.
Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.
Этот URL может быть разбит на три части:
- протокол http://
- домен ireallylovecats.com
- путь к файлу gallery.html
Этот абсолютный адрес является самодостаточным: независимо от того, где вы используете ссылку, она содержит всю информацию, необходимую для поиска нужного файла на правильном домене с правильным протоколом.
Вы обычно используете абсолютные адреса для определения ссылки со своего сайта на другой сайт.
В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:
Как сделать якорь на странице html?
Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.
Давайте рассмотрим как сделать якорь на странице html на примере создания кнопки для быстрого перехода наверх сайта.
В начале страницы, после открытия тега <body> делаем ссылку с атрибутом name, которая будет являться якорем, а в конце документа поставим ссылку с переходом на этот якорь.
HTML-код ссылки:
PHP
<body>
<div><a name=»to-top»></a></div>
<p>…</p>
<div><a href=»# to-top»>К началу страницы</a></div>
</body>
|
1 |
<body> <div><aname=»to-top»><a><div> <p>…<p> <div><ahref=»# to-top»>Кначалустраницы<a><div> <body> |
