Урок 8: Ссылки

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

Что необходимо для создания ссылки?

Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом — и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:

Пример 1:

будет выглядеть в браузере:

Элемент a обозначает «якорь/anchor». Атрибут href это сокращение от «hypertext reference/гипертекстовая ссылка», специфицирующий место, на которое выполняется переход по данной ссылке — обычно это internet-адрес и/или имя файла.

Как насчёт ссылок между моими собственными страницами?

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

Пример 2:

Если page 2 помещена в подпапку «subfolder», ссылка выглядит так:

Пример 3:

В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:

Пример 4:

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

Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).

А ссылки внутри страницы?

Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ «#».

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

Теперь можно создать ссылку на этот элемент с помощью знака «#» в атрибуте ссылки. Знак «#» сообщает браузеру, что это переход на той же самой странице. После «#» должен следовать id тэга, на который выполняется переход. Например:

Всё станет понятнее на примере:

Пример 5:

   
Ссылка на heading 1
 
Ссылка на heading 2
 
heading 1
 
Text text text text
 
heading 2
 
Text text text text
    

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

Heading 1

Heading 2

(Примечание: атрибут id должен начинаться с буквы)

Могу я перейти ещё куда-нибудь?

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:

Пример 6:

Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо адреса документа, вы записываете mailto: с последующим адресом электронной почты/e-mail. При щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса. Обратите внимание, что эта функция будет работать только в том случае, если e-mail программа установлена на вашем компьютере. Попробуйте!

Есть ещё какие-нибудь другие атрибуты, которые мне нужно знать?

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

Пример 7:

будет выглядеть в браузере:

Атрибут title используется для краткого описания ссылки. Если вы — не щёлкая мышью — поместите её указатель над ссылкой, вы увидите, как появится текст «Посещайте HTML.net и изучайте HTML».

Источник

Что такое ссылки и как их ставить. Тег a

Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.

В HTML ссылки создаются с помощью тега . Например:

href — это атрибут, в котором мы прописываем адрес для перехода.

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

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

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

Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь. В нашем случае это:

https:// — протокол, по которому мы обращаемся к сайту.

/blog/index.html — путь к файлу.

Если в адресе есть все эти части — это абсолютный адрес.

Относительные ссылки

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

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

Если в адресе нет имени сервера или протокола, то это относительный адрес.

Ссылки на файл

По ссылкам можно не только переходить на другие сайты, но и скачивать файлы. Для этого пропишите в атрибуте href ссылку на этот файл. А чтобы предотвратить открытие файлов прямо в браузере, добавьте атрибут download у тега .

Ссылки-якоря

Ссылка-якорь — это обычная ссылка, в адресе которой используется символ # , после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.

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

Больше про ссылки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Переходы

Перед чтением этой главы, пожалуйста, прочитайте Всё, что вам нужно знать о CSS-переходах, автор Алекс МакКоу. Это фантастический ресурс и он охватывает большую часть того, что мы бы хотели охватить.

Переходы

Переходы — это идеальное решение для перехода стилевого свойства (или набора свойств) от одного значения к другому согласно некоторого пути.

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

Примеры

Пример 1: Отдельные буквы случайно растворяются

В нашем распоряжении есть один чрезвычайно мощный инструмент под названием transition-delay . Задержки переходов позволяют отложить начало срабатывания перехода. В этом первом примере мы устанавливаем псевдослучайные задержки у opacity для каждой буквы, создавая изящный и привлекательный эффект.

.ex span < opacity: 0; transition: opacity 1300ms >.ex span:nth-child(1) < transition-delay: 200ms >.ex span:nth-child(2) < transition-delay: 1200ms >.ex span:nth-child(3) < transition-delay: 800ms >.ex span:nth-child(4) < transition-delay: 300ms >.ex span:nth-child(5) < transition-delay: 700ms >.ex span:nth-child(6) < transition-delay: 600ms >.ex span:nth-child(7) < transition-delay: 400ms >.ex span:nth-child(8) < transition-delay: 900ms >.ex span:nth-child(9) < transition-delay: 700ms >.ex span:nth-child(10) < transition-delay: 50ms >.ex:hover span

Пример 2: Несколько переходов с задержкой

Переходы CSS начинают по настоящему блистать, когда они комбинируются вместе. В этом примере мы указываем два перехода, один для -webkit-transform , а второй для opacity . Они написаны в рамках одной декларации transition , разделяясь запятой.

.ex .title span, .ex .author span < /* . */ transition: -webkit-transform 800ms, opacity 800ms >

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

.ex .title span:nth-child(1) < transition-delay: 360ms, 300ms >.ex .title span:nth-child(2) < transition-delay: 420ms, 300ms >.ex .title span:nth-child(3) < transition-delay: 480ms, 300ms >/* . */

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

.ex .title span, .ex .author span < display: inline-block; opacity: 0; transition: -webkit-transform 800ms, opacity 800ms >.ex .title span < -webkit-transform: translateZ(0) translateY(-6rem) >.ex .author span < -webkit-transform: translateZ(0) translateY(6rem) >.ex:hover .title span, .ex:hover .author span < opacity: 1; transition: -webkit-transform 800ms, opacity 1200ms; -webkit-transform: translateZ(0) translateY(0) >.ex .title span:nth-child(1) < transition-delay: 360ms, 300ms >.ex .title span:nth-child(2) < transition-delay: 420ms, 300ms >.ex .title span:nth-child(3) < transition-delay: 480ms, 300ms >.ex .title span:nth-child(4) < transition-delay: 540ms, 300ms >.ex .title span:nth-child(5) < transition-delay: 600ms, 300ms >.ex .title span:nth-child(6) < transition-delay: 660ms, 300ms >.ex .author span:nth-child(1) < transition-delay: 420ms, 0ms >.ex .author span:nth-child(2) < transition-delay: 390ms, 0ms >.ex .author span:nth-child(3) < transition-delay: 360ms, 0ms >.ex .author span:nth-child(4) < transition-delay: 330ms, 0ms >.ex .author span:nth-child(5) < transition-delay: 300ms, 0ms >.ex .author span:nth-child(6) < transition-delay: 270ms, 0ms >.ex .author span:nth-child(7) < transition-delay: 240ms, 0ms >.ex .author span:nth-child(8) < transition-delay: 210ms, 0ms >.ex .author span:nth-child(9) < transition-delay: 180ms, 0ms >.ex .author span:nth-child(10) < transition-delay: 150ms, 0ms >.ex .author span:nth-child(11) < transition-delay: 120ms, 0ms >.ex .author span:nth-child(12) < transition-delay: 90ms, 0ms >.ex .author span:nth-child(13) < transition-delay: 60ms, 0ms >.ex:hover .title span, .ex:hover .author span

Пример 3D

И тот случай, когда вы удивитесь: переходы также работают с трёхмерной трансформацией.

.ex .letter < -webkit-perspective: 20rem >.ex .front, .ex .back < -webkit-backface-visibility: hidden; transition: -webkit-transform 800ms >.ex .back < -webkit-transform: translateZ(0) rotateY(-180deg) >.ex:hover .back < -webkit-transform: translateZ(0) rotateY(0deg) >.ex:hover .front < -webkit-transform: translateZ(0) rotateY(180deg) >.ex .letter:nth-child(1) span < transition-delay: 200ms >.ex .letter:nth-child(2) span < transition-delay: 400ms >.ex .letter:nth-child(3) span < transition-delay: 600ms >.ex .letter:nth-child(4) span < transition-delay: 800ms >.ex .letter:nth-child(5) span

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

Аккордеон на переключателях

Сочетание состояний HTML с переходами в CSS можно применять для увлекательных взаимодействий. Здесь мы используем псевдоселектор :checked на переключателях для оформления элементов, которые следуют за ними. Этот метод часто называют «хак с чекбоксом», но он может работать почти с любым элементом, который фиксирует состояния через некоторые псевдоселекторы ( :checked , :focus и др.).

В этом примере содержится множество тонкостей, но основная идея заключается в следующем: каждый раздел аккордеона содержит элемент , у которого атрибут for совпадает с идентификатором радиокнопки. Итак, три раздела, три радиокнопки. Эти радиокнопки располагаются в документе перед содержимым раздела, так что мы можем использовать соседний селектор + для стилизации разделов, которые появляются после радиокнопок с :checked .

.accordion .baffle < height: 0 >.accordion input[type="radio"]:checked + .baffle

Щелчок по внутри раздела включает переключатель (и выключает все остальные переключатели), запуская тем самым открытие/закрытие соответствующего раздела.

И вуаля! Аккордеон только на HTML и CSS.

Аккордеон (от фр. accordéon) — язычковый клавишно-пневматический музыкальный инструмент с полным хроматическим звукорядом на правой клавиатуре, басами и готовым (аккордовым) или готово-выборным аккомпанементом на левой. Современная разновидность ручной гармоники. В 1829 году это название дал венский органный мастер К. Демиан усовершенствованной им гармони.

Аккордеон содержит три основные составные части:

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

В русской традиции аккордеоном принято называть только инструменты с правой клавиатурой фортепианного типа. В США, Европе и других странах принято называть аккордеонами все разновидности ручных гармоник, которые в свою очередь могут иметь собственные названия. Например — некоторые гармони, они называются диатоническими кнопочными аккордеонами. Баян является разновидностью кнопочного аккордеона и отличается от него особой конструкцией.

В конце XIX века аккордеоны в большом количестве изготавливались в Клингентале (Саксония). До сих пор, одними из самых распространённых в России являются аккордеоны немецкой фирмы Weltmeister различных марок, например, Diana, Stella, Amigo. Встречаются также другие фирмы-производители, как зарубежные, так и советские и российские.

Переходы для вдохновения

Если вы ищете дополнительное вдохновение насчёт того, что ещё можно получить с помощью CSS-переходов, посмотрите эти удивительные демонстрации из Codrops:

jQuery.Transit

Тем, кому нравится приправить свой CSS небольшим JS, посмотрите jquery.transit. Для простых, статических переходов (оксюморон?) это будет перебор. Но вы найдёте это чрезвычайно полезным, если делаете переходы, которые содержат динамические или сформированные пользователем значения свойств CSS.

Дальнейшее чтение

См. также

Источник