Тег link определяет цвет. Мужской флирт - бессмысленный и беспощадный. Что такое псевдокласс

Ссылки можно поделить на две категории:
ссылки на внешние ресурсы — создаются с помощью тега и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки — ссылки на другие ресурсы, которые пользователь может посетить или загрузить.

Как сделать гиперссылки на сайте

1. Структура ссылки

Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

Обязательным параметром тега является атрибут href , который задает URl-адрес веб-страницы.

указатель ссылки

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

Метод доступа://имя сервера:порт/путь

Метод доступа , или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

file обеспечивает чтение файла с локального диска:

File:/gallery/pictures/summer.html

http предоставляет доступ к веб-странице по протоколу HTTP:

Http://site.ru/

https - специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)

Https://site.ru/

ftp осуществляет запрос к FTP-серверу на получение файла:

Ftp://pgu/directory/library

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

Mailto: [email protected]

Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

Номер порта ТСР , на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP

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

2. Абсолютный и относительный путь

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

Рис. 1. Пример структуры папок

2.1. Абсолютный путь

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).

Существует два вида записи абсолютного пути — с указанием протокола и без него:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

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

Http://site.ru/index.html

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

Http://site.ru/

Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

2.2. Относительный путь

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

Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).

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

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

3. Якоря

Якоря , или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь , а не URl-адрес. Перед именем указателя всегда ставится знак # .

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.

Что такое псевдокласс?

Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.

a:link { color: blue; } a:visited { color: red; }

Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active , и a:hover , когда указатель - над ссылкой.

Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.

Псевдокласс: link

Псевдокласс:link используется для ссылок на страницы, которые пользователь ещё не посещал.

a:link { color: #6699CC; }

Псевдокласс:visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.

a:visited { color: #660099; }

Псевдокласс: active

Псевдокласс:active используется для активных ссылок.

a:active { background-color: #FFFF00; }

Псевдокласс: hover

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

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

a:hover { color: orange; font-style: italic; }

Пример 1: Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса:hover .

Пример 1a: Расстояние между буквами

Как вы помните из Урока 5 , расстояние между символами можно установить свойством letter-spacing . Это можно применить для ссылки:

a:hover { letter-spacing: 10px; font-weight:bold; color:red; }

Пример 1b: UPPERCASE и lowercase

В Уроке 5 мы рассмотрели свойство text-transform , которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

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

Пример 2: Удаление подчёркивания ссылок

Обычный вопрос - как удалить подчёркивание ссылок?

Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5 , свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

A { text-decoration:none; }

Альтернативно можно также установить text-decoration , наряду с другими свойствами, для всех четырёх псевдоклассов.

A:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

Резюме

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

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

02.10.16 730
link HTML применяется для ссылки на другие ресурсы, используемые в документе.

Типы ссылок

Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения (rel ). Они должны использоваться в разделе как метаданные:

• alternate ;
• author ;
• help ;
• icon ;
• license ;
• next ;
• prefetch ;
• prev ;
• search ;
• stylesheet .

Тег в HTML размещается в и , хотя чаще он встречается в в качестве метаданных. Тег может ссылаться на традиционную гиперссылку, используемую для навигации или присоединения к документу внешних ресурсов, таких как CSS и Javascript .

Alternate

Используется для альтернативного представления HTML документа .

В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1 :

<link rel="alternate" hreflang="fr" type="text/html" href="http://www.site.com/lang/fr/html/this-doc.html"/>

Еще один пример использования HTML link rel предлагает три различных текстовых документа на английском, французском и испанском языках:

Author

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

В завершении можно добавить метатег author :

Help

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

Icon

Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:

License

Next

Указывает на следующую страницу в HTML-документе . Для поисковых систем весьма полезно знать, какая страница является следующей:

Prefetch

Это значение HTML link rel дает подсказку пользовательскому агенту о том, что он должен кэшировать ресурс для ускорения загрузки и обработки. Это делается, когда разработчик точно знает, что ресурсы, используемые на странице, будут запрашиваться:

Prev

Определяет предыдущую страницу в HTML-документе . Полезно для навигации по страницам.

Урок №8
Внедряем CSS-код, с помощью тега

Рассмотрим третий способ внедрения CSS-кода в HTML-документ: Внедрение с помощью тега

Итак, мы узнали что с помощью тегов можно изменять внешний вид тегов на одной странице , с помощью глобального атрибута style=" " , можно изменить внешний вид конкретного тега .

Но что делать, если нужно изменить внешний вид тегов на всех страницах сайта одновременно? Для этого, нам понадобится тег , его нужно поместить в голову каждого HTML-документа. Тег должен ссылаться на , для этого у него имеется атрибут href=" " .

Создайте на рабочем столе папку Мой сайт , в папке создайте три HTML-файла:
index.html
polyarnyi-volk.html
polyarnaya-sova.html
и один CSS-файл:
style.css

В HTML-файлах, разместите следующий HTML-код:
index.html

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

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

Снежный барс Полярный волк Полярная сова

polyarnyi-volk.html

Полярный волк

Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на обширных пространствах северных регионов, которые пять месяцев в году, погружены в темноту. Чтобы выжить, волк приспособился есть практически любой корм, который только попадается ему на пути.

Полярные волки хорошо усвоились к жизни в Арктике: они могут годами жить при минусовой температуре, месяцами не видеть солнечного света и неделями оставаться без пищи. Длина волка составляет 100-150 см, высота в холке может достигать 100 см, а масса у самцов переваливает за 100 кг. Продолжительность жизни полярного волка около 7 лет. В его рацион входят: леминги, зайцы, овцебыки, олени и птицы.

Снежный барс Полярный волк Полярная сова

polyarnaya-sova.html

Полярная сова

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия.

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

Снежный барс Полярный волк Полярная сова

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

Давайте сделаем текст в абзацах p всех страниц, зелёным. Для этого в style.css , вместо значения blue , впишем значение green

P { color: green; }

Теперь цвет текста в абзацах, всех страниц сайта , между тегами стал зелёным.

Задание: сделайте цвет ссылок а, оранжевым orange

Атрибут rel=" " и его значение stylesheet

Aтрибут rel=" " тега link указывает браузеру на то, какой тип файла будет загружаться в HTML-страницу, значение stylesheet указывает на то, что будет загружаться CSS-файл.

За три предыдущих урока, мы изучили три способа внедрения CSS-кода в HTML-документ:

1. Внедрение с помощью атрибута style=" " , влияет на один тег, данный способ также еще называют встроенным
2. Внедрение с помощью тегов , влияет на целую страницу, данный способ также еще называют внутренним
3. Внедрение с помощью тега , влияет на весь сайт, данный способ также еще называют внешним

Вам понравились уроки? Поддержите проект "Учебники для вебмастера" !
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Статья обновлена: 5 Фев 2016

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

Известно достаточно много методов для того, но какой из них самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? Не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере — всеми любимом ослике — Internet Explorer. Появившуюся седьмую версию этого браузера можно называть уже посолидней — осёл. Но эта тема для отдельной статьи.

Итак, начнём с Якоба Нильсена — признанного эксперта по удобству и простоте. Краткое изложение его статьи по визуализации ссылок (Guidelines for Visualizing Links):

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

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

Примерно 74% всех сайтов используют цветовое определение посещённых и не посещённых ссылок. Это хорошая дизайнерская традиция, к которой все привыкли.

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

Метод Симона Коллисона был признан как один из самых практичных и оригинальных методов. Идея достаточно проста и хорошо подходит для списков со ссылками. На картинке можно увидеть галочку, которая появляется напротив той ссылки, по которой посетитель уже щёлкал мышью или раньше был на странице, куда ведёт адрес ссылки. Весь эффект полностью создается при помощи CSS, т.е. HTML-код страницы остается нетронутым. Если внести некоторые изменения в CSS-код Симона, то этот метод можно применять к обычным ссылкам, которые не находятся в списках. CSS-код этого метода:

Ul { list-style-type:none; padding:3px; } li a { display:block; line-height:150%; width:239px; background:URL(ticks_grey.gif); text-decoration:none; } li a:link, a:active { color:#666; } li a:hover { color:#F33; background-position: 0 -20px; } li a:visited { background-position: 0 -40px; }

В написанном выше коде роль галочки играет картинка (ticks_grety.gif), которая поднимается вверх (на 20 или 40 пикселей) в зависимости от действия посетителя (в обычном состоянии не посещённой ссылки картинка невидна).

При этом HTML-код страницы выглядит очень просто:

Посещённые ссылки и CSS-элементы before и after

Internet Explorer тормозит широкое использование уже давно появившихся псевдо-элементов:before и:after , которые идеально выполняют необходимую функцию определения посещённых ссылок. Почти все современные браузеры поддерживают эти элементы.

Для псевдо-элементов:before и:after Майк Дэйвидсон (и несколько людей до него) предложил вместо текста использовать знак корня (радикал) — своеобразная галочка. Но эта галочка является не картинкой, а unicode-символом (\221A), который появляется после ссылки, по адресу которой уже был определенный посетитель. Весь код также находиться в CSS-файле и выглядит следующим образом.