Оформляем гиперссылку, советы по оформлению ссылок. Как вставить гиперссылку в HTML? Создание и использование гиперссылок в HTML

1. Чтобы создать ссылку на другой документ - используя атрибут href
2. Чтобы сделать закладку внутри документа - используя атрибут name

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

Пример

это отобразится браузером так:

HTML Ссылки - Атрибут Target

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

Пример ниже откроет залинкованный документ в новом окне браузера или на новой вкладке:

HTML Ссылки - Атрибут Name

Атрибут name используется для создания закладки ("якоря" / "анкера") внутри HTML документа.

Замечание:
Грядущий в обозримом будущем стандарт HTML5 предлагает использовать атрибут id вместо атрибута name для указания имени ссылки.
Использование атрибута id фактически работает и в HTML4 во всех современных браузерах.

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

Замечание: Всегда добавляйте замыкающий слэш к ссылкам на поддиретории. Если вы создаете ссылку так: href="http://сайт/html", то генерируется два запроса к серверу, сначала сервер добавляет слэш к адресу, и затем создает новый запрос: href="http://сайт/html/".

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

Совет: Если браузер не находит указанную именованную ссылку, он идет в начало документа. Никаких ошибок не возникает.

Внешние таблицы стилей

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

Преимущество внешних таблиц заключается в том, что, однажды загрузив ее, браузер кэширует информацию и при повторной загрузке берет ее не с Web-сервера, а с локального диска. Таким образом, при загрузке страниц Web-сайта с одной таблицей стилей мы экономим на времени загрузки внешней таблицы стилей, т.е. содержащего ее файла .css . Второе преимущество - опять же удобство редактирования таких страниц. Достаточно исправить стиль оформления элемента в одном месте - в файле, содержащем таблицу стилей, и на всех HTML-страницах, использующих эти стили, внешний вид элементов изменится.

Как вы уже знаете, для этих целей используется пустой элемент LINK, который располагается в секции head. Рассмотрим пример, когда нам нужно подключить к HTML-документу таблицу стилей, находящуюся в файле style.css .

Согласно спецификации HTML, авторы сайтов могут подключать к одному документу несколько внешних таблиц. Они могут взаимно дополнять друг друга, тогда для определения свойств объектов используется принцип каскадирования. Он начинает действовать в том случае, если в нескольких таблицах задано описание для одного и того же элемента.

Таблицы могут быть составлены так, что будут взаимно исключать друг друга, в этом случае они называются альтернативными, т.е. пользователь может выбирать, какой таблицей воспользоваться. Например, для вывода на устройства с ограниченной шириной можно пользоваться шрифтами поменьше. А для людей с ослабленным зрением можно, наоборот, увеличить размеры шрифта и оформить это в виде отдельной таблицы стилей. Автор при этом имеет возможность указать, какая из таблиц является предпочтительной. Описание и назначение каждой таблицы стилей задаются в атрибуте title. Это было бы удобно: заходишь на сайт, смотришь, какие таблицы стилей для него написаны, подбираешь наиболее подходящую для себя и пользуешься ею. Но для этого браузеры должны предоставлять возможность выбора предпочтительной таблицы стилей.

Такой выбор предоставляют только браузеры Netscape версии 6.x (и Mozilla соответственно), Opera 5 и старше. Они предоставляют возможность увеличения размера шрифта, даже если он задан в пикселях. Так что, по сути, альтернативные таблицы стилей и не нужны. Internet Explorer , хоть и самый распространенный браузер, но не предоставляет такой возможности. Размер шрифта он позволяет увеличить только в том случае, если шрифт задан при помощи ключевых слов или с помощью стандартных размеров языка HTML, т.е. чисел от 1 до 7. Наверное, поэтому разработчики и не пишут несколько альтернативных таблиц.

Теперь вернемся к элементу LINK. А

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

Атрибут rel указывает, какое отношение имеет подключаемый файл к данному HTML-документу. Чтобы добавить основную таблицу стилей, используется значение stylesheet, при этом описание в атрибуте title задавать не нужно. Для того чтобы из множества альтернативных таблиц можно было выбрать предпочитаемую пользователем, укажите атрибут rel="stylesheet" и задайте ее описание в атрибуте title . Чтобы задать альтернативную таблицу стилей, задайте атрибут rel="alternate stylesheet" иописание в атрибуте title .

Вот несколько примеров:

С помощью этой строки подключается альтернативная таблица стилей с самым большим размером шрифта, таблица хранится в файле big-font.css .

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

Импорт таблиц стилей

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

Следует отметить, что директиву @import не поддерживает браузер Netscape Navigator 4.0 , но он установлен не более чем у 0,1% пользователей Сети, поэтому ими можно пренебречь.

Как скрыть информацию о стиле от браузера

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

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

Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.

Подчеркивание ссылок

По умолчанию ссылка в браузере имеет синий цвет и подчеркивание снизу. Но встретить этот классический, приевшийся дизайн в наше время - большая редкость, поскольку стиль ссылки в 99.9% случаев переделывается. Подчеркнутые ссылки чаще всего можно встретить в тексте, а вот в навигационных меню подчеркивание, как правило, убирается.

Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration:

A { text-decoration: none; }

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

Подчеркивание ссылок при наведении

A { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } Ссылка подчеркнута, когда наведен курсор

Подчеркивание с помощью border

Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:

A { text-decoration: none; /* отменяем стандартное подчеркивание, * иначе будет две полосы */ border-bottom: 3px solid pink; /* добавляем нижнюю границу */ padding-bottom: 1px; /* делаем небольшое расстояние между текстом и границей */ } Создание подчеркивания с помощью свойства border-bottom

Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса:hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS .

Ссылка с фоном

Ссылки позволяют добавлять к ним фон через уже изученное нами свойство background . И если обычный фоновый цвет для ссылки вряд ли удивит кого-либо, то с помощью фоновых рисунков можно добиться более интересных результатов. К примеру, можно сымитировать рукописное подчеркивание, а также разместить другую графику, задуманную в дизайне ссылки.

Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target="_blank" . Здесь нам на помощь придет селектор атрибутов:

A { background-image: url(open-in-new-tab.png); background-position: center right; background-repeat: no-repeat; padding-right: 13px; } Ссылка с иконкой открытия в новом окне

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

Ссылка-кнопка

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

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

Код CSS для данного примера:

A { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #ffffff; padding: 16px 26px; background: -moz-linear-gradient(top, #42aaff 0%, #003366); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); display: inline-block; text-decoration: none; } a:hover { background: -moz-linear-gradient(top, #42aaff 0%, #0d5aa7); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff), to(#0d5aa7)); } a:active { background: -moz-linear-gradient(top, #003366 0%, #42aaff); background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#42aaff)); }

Код CSS для данного примера:

A { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #fafafa; padding: 16px 26px; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0px 6px #27ae60; background: #2ecc71; } a:hover { background: #36d479; } a:active { position: relative; top: 6px; box-shadow: 0px 0px #23a33d; background: #23a33d; }

В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний:hover (наведение) и:active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.

Важно: чтобы иметь возможность подобным образом стилизовать ссылку, нужно заставить ее вести себя как блочный (block ) либо строчно-блочный элемент (inline-block ). Дело в том, что если вы будете добавлять отступы к строчному элементу (коим по умолчанию является ссылка), то не увидите никакого эффекта.

И . Также тут использована разметка .

HTML-теги для аббревиатуры (сокращённого слова) и определения (непонятного слова)

Пример

Более простой способ только на HTML .

1. id у элементов индивидуальный. Он не может иметь одинаковое значение у двух и более тегов. Ссылка с хэшем (#) не только откроет указанную страницу (если до # ничего нет, то текущую страницу), но и прокрутит её к запрашиваемому id элемента (то, что указывается после #). Подробнее можно узнать и .

Более простой способ только на HTML.