Варианты стилизации ссылок в CSS. Оформляем гиперссылку, советы по оформлению ссылок

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

А теперь представьте, что вы создаете сайт, в котором десяток страниц и каждая страница должна иметь таблицу стилей, задающую ее оформление. Как мы уже говорили раньше, все страницы одного сайта зачастую выглядят одинаково, а значит, для их оформления применяются подобные таблицы стилей. Чаще всего сайт имеет всего одну таблицу стилей, описывающую все его элементы. Чтобы не дублировать всю эту таблицу между тегами на каждой 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 .

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

Эта строка подключает альтернативную таблицу стилей с более мелким размером шрифта, таблица хранится в файле small-font.css .

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

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

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

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

Существует еще один способ подключить к HTML-документу таблицу стилей, хранящуюся в отдельном файле. Делается это при помощи специальной директивы @import следующим образом.

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

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

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

Чтобы скрыть информацию о стиле от старых браузеров, не поддерживающих элемент STYLE (справедливости ради надо заметить, что их уже практически не осталось), можно использовать то же, что и при сокрытии кода сценария, - комментарии: Незнакомые теги браузером просто игнорируются, а описание стилей, помещенное внутрь комментария HTML, также не будет выведено на экран.

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

Вставка гиперссылки

В HTML для вставки гиперссылки используется дескриптор (тег) , который вставляется в нужное место. Обычно его располагают среди текста, так как гиперссылка сама по себе является текстовой структурой. Но ссылки бывают ещё графическими (иконки, кнопки, картинки); о них будет рассказано дальше. Их расположение на веб-странице не ограничивается текстом, а зависит от дизайнерского решения создателя сайта.

главная страница Google

Это пример того, как вставить гиперссылку в HTML-документ, что осуществляется посредством тега . Посетитель сайта увидит подчёркнутый текст, отличный от цвета окружающего текста (цвет HTML-ссылки может быть любым), «главная страница Google», нажав на который, он попадёт на главную страницу поисковой системы «Гугл». Следует отметить, что текст гиперссылки должен содержать информацию о том, куда будет осуществлён переход. Этого принципа следует придерживаться и принять за правило!

Структура тега ...

Можно заметить, что тег - парный: необходим закрывающий тег .

href—атрибут тега, указывает назначение ссылки.

https://google.com/ - значение атрибута , заключающее в себе URL-адрес ресурса, на который осуществится переход. Оно заключается в двойные или одинарные кавычки. Это зависит от структуры вложенности тегов по правилам HTML.

главная страница Гугл

вся эта конструкция называется элементом веб-документа.

По правилам HTML, одни элементы могут содержать другие элементы. Тег не исключение. Если программисту необходимо выделить жирным слово Google, то делается это с помощью тега по общим правилам форматирования текста, соблюдая последовательность вложенности тегов. Веб-мастер должен знать, как создать гиперссылку в HTML без ошибок, иначе они не будут работать. Неработающие ссылки на компьютерном слэнге называют «битыми».

главная страница Гугл

Здесь: элемент

главная страница Гугл

содержит вложенный элемент

Гугл

Абсолютные гиперссылки

протокол://название домена/путь к файлу

Пример адреса распространённого в Америке поисковика: https://aol.com — абсолютный, так как содержит имя домена.com.

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

• http и https — наиболее часто встречающиеся; по ним осуществляется переход между интернет-страницами разных сайтов;
• ftp — протокол для загрузки файлов на сервер или скачивания пользователем с сайта;
• mailto — почтовый протокол, по которому отправляется электронная почта непосредственно с сайта, не заходя в личную почту.

Существуют ещё несколько протоколов особого назначения (gopher, telnet), встречающихся довольно редко, использование которых требует специальных знаний в программировании или системном администрировании.

Относительные гиперссылки

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

Создавая интернет-словарь, программист в начале страницы располагает алфавит, и если бы не применение ссылок, то пользователю пришлось бы очень долго крутить колесо мыши, чтобы добраться до буквы «Я».

Перейти к букве Я

где ya называется якорем, а Перейти к букве Я - якорем назначения. Для правильного отображения якорей рекомендуется использование латинских букв и цифр, поэтому не стоит писать «Я», хотя так было бы понятнее.

Теперь, чтобы осуществлялся переход от алфавита в начале страницы к букве «Я», нужно сделать привязку якоря в том месте HTML-документа, в котором начинаются слова на букву «Я»:

буква Я

перед якорем стоит знак решётки, без которого переход к букве не будет работать.

Относительная адресация при создании сайта

Удобный и самый общепринятый алгоритм создания сайта программистом:

• создание папки в компьютере и расположение её в месте быстрого доступа для удобства;
• создание в этой папке главной ;
• создание второстепенных веб-страниц (index.html/page2);
• и размещение в ней графических файлов;
• создание папки и размещение в ней других объектов (файлы для скачивания, например);
• наполнение сайта контентом;
• размещение файлов сайта на хостинге.

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

Допустим, программист создал главную страницу сайта index.html, на которой имеется ссылка на другую страницу page2.html, украшенную картинкой img.png. Тогда относительный путь к этой картинке будет выглядеть так:

картинка

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

Способы переходов по гиперссылкам

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

Синтаксис применения атрибута target:

главная страница гугл

Главная страница «Гугл» откроется в новом окне.

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

Цвет гиперссылок

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

Задаются цвета ссылок в теге с помощью атрибутов и их значений, в которых выступает цвет HTML в системе rgb (#00FF00) или с прямым указанием имени цвета («green»). Существует три вида атрибутов для ссылок:

• link — задаёт цвет непосещённой ссылки;
• vlink — задаёт цвет ссылки, по которой пользователь уже переходил;
• alink — задаёт цвет ссылки в момент перехода на другую страницу. Это происходит быстро, поэтому не всегда можно уловить этот эффект.

Пример разметки:

Если применить эти атрибуты в теге , ссылки данного веб-документа будут тёмно-синими, посещённые - лилового, а активные - оранжево-красного цвета.

Графические гиперссылки

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

Широко применяется способ замены статичных кнопок () на красивые графические, созданные веб-дизайнером в редакторах графики (GIMP, Photoshop).

Для вставки графики в качестве гиперссылок на страницы сайта используется тот же синтаксис, только вместо текста используется тег вставки изображения по правилам HTML:

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

Звонки с сайта

Стандарт html5 расширил функциональные возможности использования Интернета, и теперь совершать звонки можно не только с телефона, но непосредственно с сайта. Для этой цели также можно использовать гиперссылки в HTML документе, и они имеют такой синтаксис:

...абонент ...

Вместо слова «абонент» прописывается понятный звонящему контакт, как в телефонной книге. Также можно разместить графический файл (фотографию абонента).

Чтобы звонки совершались с сайта, необходимо наличие не только ссылки на номер телефона абонента, но и гарнитуры (микрофон, наушники), установленной на компьютере VoIP-программа, скорость интернета должна превышать 0,5 Мб/сек. Оплата за звонки осуществляется расходом траффика. Поэтому, если Интернет безлимитный, то звонки бесплатные.

Этика создания гиперссылок

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

• Гиперссылка должна быть хорошо видна, отличаться от окружающего её текста. Пользователь должен знать, что это - гиперссылка.
• Пользователю должно быть понятно, куда он попадёт, нажав на ссылку. Для этого целесообразно использовать ещё атрибут title, который лаконично описывает страницу перехода. Синтаксис применения атрибута такой:

Yandex

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

Попав не на ожидаемую страницу или скачав не тот файл, пользователь в 99% случаев тут же покинет сайт и в будущем никогда на него не зайдёт.

Анти-Seo при создании гиперссылок

Кроме технической стороны вопроса о том, как вставить гиперссылку в HTML, следует осветить ещё и нравственный аспект. Существует много сайтов, доступ к которым пользователям блокируется программами безопасности (антивирусом) или даже государством. Это те сайты, которые были созданы нечистыми на руку веб-программистами.

Одна из уловок, к которой они прибегают, - это вставка «невидимых» гиперссылок на веб-страницу. Мошенники знают, как создать гиперссылку в HTML, а при помощи атрибутов убрать подчёркивание ссылки и назначить ей цвет окружающего текста с тем, чтобы рядовой пользователь не увидел её. А при помощи других инструментов веб-технологий (CSS, JavaScript, PHP) можно запрограммировать их поведение. К примеру, событие OnMouseOver языка JavaScript активирует действие элемента веб-страницы. Когда пользователь проводит курсором по невидимой ссылке, он попадает на рекламную страницу другого сайта. Или ещё хуже, когда присутствует невидимая ссылка на файл и на его компьютер начинает скачиваться и устанавливаться ненужное программное обеспечение. Обычно это вирусы, которые меняют домашнюю страницу браузера, захламляют жёсткий диск массой программ и прочее.

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

Зачастую эта ссылка не слишком заметна. Специально ее искать будет лишь тот, кто сообразит, что статья не закончилась на втором-третьем абзаце, и есть там что-то еще. Чтобы как-то выделить данную ссыль, нужно ее соответствующим образом оформить. Но как это грамотно сделать? Ведь если заглянуть в код большинства шаблонов WordPress, то можно обнаружить, что текст данной ссылки как бы «зашит» в php-код вывода статьи. Вот в таком, например, виде:

Оформление тэга more в WordPress. Способ 1

Во-первых, у движка WordPress уже есть на сей счет заготовка в виде класса more-link . То есть, как бы вы не извращались с шаблоном, но сам движок в любом случае подставит к данной ссылке class="more-link" . И это очень полезная штуковина. Она говорит о том, что мы преспокойно можем использовать данный класс, просто добавив для него некоторый набор правил в лист стилей css нашей темы. По сути, нам остается лишь дописать в файле style.css шаблона что-то вроде:

More-link {
background: #ffc;
}

Но! Здесь есть небольшая засада. Дело в том, что слишком вольно с данной ссылкой мы обращаться не можем по одной простой причине: ссылка эта наследует все те правила, которые уже предопределены для ссылок в посте. Фон изменить можно, размер шрифта тоже можно. Но цвет ссылок уже не поменяешь. Кроме того, заменить текстовую ссылку картинкой - тоже задачка не из простых. Поэтому читаем другой способ.

Оформление тэга more в WordPress. Способ 2

Во-вторых, можно эту ссылку вынести вообще в отдельный блок, которому задать какие угодно правила отображения. Как это сделать? Леххко и непринужденно! Для начала в файле index.php немного исправим то место, где говорится о выводе содержимого статьи. Это все та же часть:

Здесь мы просто удалим все, что находится между одинарными кавычками и оставим вот такую запись:

Если за вывод текста отвечал какой-либо класс типа entry, то самое время здесь закрыть данный блок (ставим