Как добавить ссылки в браузере сверху
Главной отличительной особенностью HTML-документов является создание специальных активных ссылок на другие документы, которые именуются гиперссылками.
При наведении мыши на них курсор принимает форму руки, а при клике в окне браузера открывается другая веб-страница или определённый документ. Гиперссылки могут представлять собой как текст, так и изображение.
Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега (от английского слова Anchor — якорь). Параметр href тега содержит адрес документа.
В HTML теги гиперссылки представлены в виде и , а ссылкой считается вся информация, которую и содержат:
Перед тем, как создать гиперссылку в HTML, следует знать, что её адрес может быть относительным и абсолютным. Относительный указывает расположение документа относительно текущей страницы.
Сработает он в том случае, если конечный документ располагается в той же директории, что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа « / ».
Абсолютный адрес представляет собой ссылку в полном виде на документ, расположенный в сети интернет.
Создание гиперссылок в HTML — процесс несложный. По умолчанию они подчёркиваются и выделяются синим цветом, а посещённые — фиолетовым.
Изменить цвет гиперссылки в HTML можно в параметрах тега :
- link – цвет ссылок веб-страницы;
- vlink – цвет посещённых гиперссылок веб-страницы;
- alink – цвет активных ссылок веб-страницы.
Указанные атрибуты определяют цвета ссылок всего HTML-документа. Если вставить такой код в тег , каждый раз задавать цвет шрифту не придётся.
Перед тем, как делать гиперссылки в HTML, имейте в виду, что их цвета должны гармонично вписываться в общий дизайн и оформление вашего веб-сайта и в то же время важно сделать их заметными для пользователя.
Основные атрибуты гиперссылок
В рамках HTML гиперссылки могут иметь следующие параметры:
1. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку.
2. target – указывает браузеру в каком окне следует открыть ссылку.
Он может принимать следующие значения:
- _blank – ссылку необходимо открыть в новой вкладке;
- _self – гиперссылка в HTML должна быть открыта в текущей вкладке. Значение по умолчанию;
- _parent – браузер должен загрузить ссылку в родительском окне;
- _top – гиперссылка загружается по всему пространству окна браузера (разбиение на фреймы в данном случае исчезает).
Таким образом, ответ на часто задаваемый начинающими веб-мастерами вопрос « как вставить гиперссылку в HTML » получен.
Иногда страница сайта может быть очень длинной. Например, если вы захотите выложить очень много текста. Для возвращения вверх можно воспользоваться колесом прокрутки, или бегунком. Но на многих сайтах для возвращения назад существует соответствующая ссылка или кнопка, нажав на которую, вы даёте команду браузеру и он быстро возвращает страницу в исходное положение.
Подобную ссылку можно прописать минимум четырьмя способами. рассмотрим их преимущества и недостатки.
Пропишем ссылку подобно тому, как прописываются "якоря" для страницы, о которых шла речь в Уроке 16 Выглядеть это будет так:
Вверху страницы вы ставите "якорь". Например, я поставила в него часть заглавия страницы: "В этом разделе. "
Внизу страницы вы помещаете ссылку "НАВЕРХ":
У этого способа есть один недостаток. Браузеры не всегда адекватно себя ведут с подобными ссылками. Например, если вы наведёте курсор мыши на надпись вверху страницы "В этом разделе" - то скорее всего вы увидите, что помещённая в "якорь" часть фразы начинает отображаться, как ссылка.
Для того, чтобы ничего такого не происходило и не нужно было искать, что бы поместить в "якорь", можно поступить по способу 2.
Можно попробовать просто разместить внизу станицы ссылку вида:
Теоретически, ни один браузер не должен возражать против такого способа и по клику возвращать страницу в исходное положение. Но более надёжно поступить следующим образом, который мы рассмотрим в способе 3.
Разместим внизу страницы ссылку вида:
При данном способе мы задействуем указание на прокрутку-возвращение по клику, где значения (0,0) - это перемотка страницы на указанное количество пикселей по горизонтали и вертикали. Если мы обнулим эти значения, то любой браузер воспримет нашу ссылку как указание вернуться в исходное положение, то есть, на начало страницы. И наконец, чуть отличающийся четвёртый способ.
Этот способ основан на JavaScript и так же, как предыдущий, однозначно работает в любом браузере. В низу страницы, под вашим текстом или картинками вы размещаете следующую конструкцию:
Здесь, как видите, тоже есть указание на то, чтобы прокрутить страницу на указанные пикселы (0,0), которые мы обнуляем и в результате, когда мы нажимаем на данную ссылку, браузер возвращает страницу в первоначальное положение.
Само собой, во всех указанных способах можно вместо слова "НАВЕРХ" расположить картинку, обозначающую возвращение к началу страницы.
Примечание: вместо надписи "НАВЕРХ" (Вернуться к началу, Вверх, К оглавлению и т.п.) вы можете поставить картинку, вписав её код вида
Гиперссылки создаются с помощью элемента . Внутрь помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.
Ссылка состоит из двух частей — указателя и адресной части. Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
ftp осуществляет запрос к FTP-серверу на получение файла:
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Рис. 1. Пример структуры папок
2.1. Абсолютный путь
Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
Существует два вида записи абсолютного пути — с указанием протокола (полный) и без него:
Когда вы ссылаетесь на страницу на другом сайте, вы можете использовать только полный абсолютный путь.
Если файл находится в корневой папке, то путь к файлу будет следующим:
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.
2.2. Относительный путь
Относительный путь содержит следующие компоненты:
- папка (имя папки, указывающей путь к файлу);
- файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
- / указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
- ./ указывает на текущую папку
- ../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:
Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:
4. Как сделать изображение-ссылку
Рис. 2. Изображение-ссылка
5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
Ссылки представляют связь между двумя ресурсами, одним из которых является текущий документ. Ссылки создаются элементами , , и . В HTML есть два вида ссылок:
Ссылки на внешние ресурсы — это ссылки на ресурсы, которые должны использоваться для дополнения текущего документа (метаданные), обычно автоматически обрабатываемые браузером.
Гиперссылки — это ссылки на другие ресурсы, которые пользователь может посещать в браузере или загружать.
Ссылки в HTML-документах
1. Ссылки, созданные элементами иАтрибут href задает URL-адрес ссылки.
Атрибут target задает название контекста просмотра, который будет использоваться при переходе по гиперссылкам.
Контекст просмотра — это окружение, в котором браузер отображает документ (обычно это вкладки, однако, возможно окно или фрейм внутри страницы).
Атрибут download указывает, что гиперссылка используется для скачивания файла. Если атрибут имеет значение — имя файла, это позволяет переименовать файл при скачивании.
Атрибут ping задает URL-адреса ресурсов, которые получат уведомления, если пользователь перейдет по гиперссылке.
Атрибут rel дополняет атрибут href информацией об отношении между текущим и связанным документом.
Атрибут hreflang определяет язык связанного веб-документа, который задается аббревиатурой, состоящей из пары букв, обозначающих код языка.
Атрибут type указывает MIME-тип связанного ресурса.
2. Типы ссылок
Атрибут rel определяет, какие типы ссылок создают элементы, устанавливая отношения между связанным ресурсом и текущим документом. Значением атрибута должен быть набор разделенных пробелами ключевых слов. Атрибут не имеет значения по умолчанию.
Ключевые слова dns-prefetch , modulepreload , pingback , preconnect , prefetch , preload , prerender и stylesheet , указанные для элемента , разрешены внутри .
CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.
Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .
Оформление гипертекстовых ссылок
1. Псевдоклассы состояний гипертекстовых ссылок
Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:
- Непосещенная — a:link
- Посещенная — по которой уже выполнялся переход — a:visited
- Не нажатая — над которой находится указатель мыши — a:hover
- Нажатая — которая удерживается мышью — a:active
Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:
Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).
2. Выборка отдельных ссылок
Для стилизации отдельных ссылок нужно задать им стилевой класс, после чего можно будет менять внешний вид выбранных ссылок:
3. Подчеркивание ссылок
Добавление подчеркивания только при наведении на ссылку:
Внешний вид нижней границы ссылки:
4. Изображения для ссылок
Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .
Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить отступ с помощью свойства padding-left . Этот прием может пригодиться в случае, когда на странице есть ссылки для загрузки каких-либо документов различных форматов, и вы можете добавить значок-изображение типа файла для большей наглядности.
Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:
Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.
5. Использование фонового изображения
Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:
6. Ссылки-кнопки
Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.
7. Примеры оформления ссылок
Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .
Читайте также: