Что такое ссылки и как их ставить. Тег a
Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.
В HTML ссылки создаются с помощью тега . Например:
href — это атрибут, в котором мы прописываем адрес для перехода.
В ссылке без href лучше оставить подсказку о том, почему мы это сделали. Подсказку можно добавить с помощью атрибута title . Подсказка появится, когда курсор задержится над ссылкой некоторое время.
Абсолютные ссылки
Если нужно сделать ссылку на другой сайт в интернете, используйте полный адрес сайта — он называется абсолютным. Выглядит он, например, так:
https://site.ru/blog/index.html Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь. В нашем случае это:
https:// — протокол, по которому мы обращаемся к сайту.
site.ru/ — имя сервера.
/blog/index.html — путь к файлу.
Если в адресе есть все эти части — это абсолютный адрес.
Относительные ссылки
Когда файл по ссылке лежит на вашем компьютере, используются относительные адреса. В отличие от «обычных» адресов, в них нет адреса сайта. Например:
day-2.html Относительные адреса иногда используют и для страниц в интернете. Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать.
Если в адресе нет имени сервера или протокола, то это относительный адрес.
Ссылки на файл
По ссылкам можно не только переходить на другие сайты, но и скачивать файлы. Для этого пропишите в атрибуте href ссылку на этот файл. А чтобы предотвратить открытие файлов прямо в браузере, добавьте атрибут download у тега .
Браузер скачает меня lt;/a> Ссылки-якоря
Ссылка-якорь — это обычная ссылка, в адресе которой используется символ # , после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.
Ссылка-якорь используется для прокрутки к заданной части страницы, в том числе используется и в абсолютных адресах.
Больше про ссылки
- Абсолютные и относительные ссылки
- Как ставить пустые ссылки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Ссылка-якорь
Мы нашли отличную статью, для размещения в блоге. Но статья длинная, и чтобы работать с ней было удобно, хорошо бы добавить к ней навигацию. Эта навигация не должна уводить читателя на другие страницы, а должна работать в пределах страницы со статьёй.
Для создания такой навигации используются ссылки-якоря. Ссылка-якорь — это обычная ссылка, в адресе которой используется символ # , после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке. Причём сам тег может быть любым: , ,
и так далее.
Вот так выглядит адрес, состоящий из одного якоря:
При щелчке по такой ссылке браузер найдёт на странице элемент с соответствующим атрибутом id и прокрутит окно страницы к нему.
Содержание первой главы При этом перезагрузки страницы не произойдёт.
Интересно, что якорь также можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу по аналогии произойдёт прокрутка к заданной части этой страницы.
Якоря отлично подойдут для создания оглавления для статьи в этом посте.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
2.7. CSS-ссылки
CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.
Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .
Оформление гипертекстовых ссылок
- Содержание:
- 1. Псевдоклассы состояний гипертекстовых ссылок
- 2. Выборка отдельных ссылок
- 3. Подчеркивание ссылок
- 4. Изображения для ссылок
- 5. Использование фонового изображения
- 6. Ссылки-кнопки
- 7. Примеры оформления ссылок
1. Псевдоклассы состояний гипертекстовых ссылок
Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:
- Непосещенная — a:link
- Посещенная — по которой уже выполнялся переход — a:visited
- Не нажатая — над которой находится указатель мыши — a:hover
- Нажатая — которая удерживается мышью — a:active
Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:
a:link < color: #497DDD; border-bottom: 1px dashed; >a:visited < color: #EF7D55; >a:hover < color: #154088; border-bottom: .07em solid; >a:active
Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).
2. Выборка отдельных ссылок
Для стилизации отдельных ссылок нужно задать им стилевой класс, после чего можно будет менять внешний вид выбранных ссылок:
3. Подчеркивание ссылок
Добавление подчеркивания только при наведении на ссылку:
a < text-decoration: none; >a:hover
Внешний вид нижней границы ссылки:
4. Изображения для ссылок
Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .
Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить отступ с помощью свойства padding-left . Этот прием может пригодиться в случае, когда на странице есть ссылки для загрузки каких-либо документов различных форматов, и вы можете добавить значок-изображение типа файла для большей наглядности.
Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:
a[href$=".pdf"] < background-image: url(images/pdf.png); >Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.
5. Использование фонового изображения
Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:
6. Ссылки-кнопки
Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.
/*общие стили для всех кнопок*/ a < display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; margin: 15px 25px; padding: 15px 20px; font-size: 20px; font-weight: bold; font-family: 'Montserrat', sans-serif; transition: 0.4s ease-in-out; >/*кнопка 1*/ .one a < border-radius: 10px; color: #EC4D3C; background-color: white; background-image: -webkit-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px); background-image: -o-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px); background-image: radial-gradient(#FCD2D1 2px, transparent 2px); background-size: 12px 12px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.one a:hover < background-size: 16px 16px; >/*кнопка 2*/ .two a < border-radius: 10px; color: #F17434; background-color: white; background-image: -webkit-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -webkit-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: -o-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -o-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px), repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.two a:hover < background-image: -webkit-repeating-linear-gradient(left, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: -o-repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px); >/*кнопка 3*/ .three a < border-radius: 10px; color: #36454A; background: -webkit-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: -o-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: linear-gradient(to top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); box-shadow: 2px 2px 3px black; >.three a:hover < background: -webkit-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: -o-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: linear-gradient(to bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); >/*кнопка 4*/ .four a < border-radius: 10px; color: #598428; background: -webkit-linear-gradient(70deg, #C3D600, #C3D600 50%, #A5B400 50%); background: -o-linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%); background: linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.four a:hover < background: -webkit-linear-gradient(-110deg, #C3D600, #C3D600 50%, #A5B400 50%); background: -o-linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%); background: linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%); >/*кнопка 5*/ .five a < border-radius: 10px; color: #40382D; box-shadow: inset 0 -5px 0 #40382D; >.five a:hover < box-shadow: inset 0 -60px 0 #40382D, 2px 2px 3px rgba(0, 0, 0, 0.3); color: #DECDA5; >/*кнопка 6*/ .six a < border-radius: 10px; color: #CEA640; background: #FFF79A; border-bottom: 5px solid #E1B442; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); >.six a:hover < box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); >/*кнопка 7*/ .seven a < color: #45A0A4; background: -webkit-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background: -o-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background: linear-gradient(to right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background-size: 70% 5px; >.seven a:hover < background-size: 100% 5px; >/*кнопка 8*/ .eight a < border-radius: 10px; background: #E8CCB5; color: #B05151; padding: 15px 30px; position: relative; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.eight a:before, .eight a:after < content: ""; display: inline-block; position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #F58262; box-shadow: inset 0 -2px 0 #B05151; opacity: 0; transition: .5s ease-in-out; >.eight a:before < left: 13px; >.eight a:after < right: 13px; >.eight a:hover:before, .eight a:hover:after < opacity: 1; >/*кнопка 9*/ .nine a < color: #E7E5DD; text-shadow: 1px 1px black; background: url(https://html5book.ru/wp-content/uploads/2015/01/borger-grey.png) repeat-x; border-bottom: 1px solid #bfc1ad; border-left: 1px solid #bfc1ad; border-right: 1px solid #bfc1ad; >.nine a:hover < background-position: 300px 0; >/*кнопка 10*/ .ten a < color: #E7E5DD; border-radius: 25px; border: 3px solid #E7E5DD; >.ten a:hover < color: #BDB9AB; background: #E7E5DD; >.ten a span < opacity: 0; padding-left: 5px; padding-right: 5px; font-weight: bold; transition: 0.4s ease-in-out; >.ten a:hover span < opacity: 1; padding-left: 10px; padding-right: 10px; color: #BDB9AB; >/*кнопка 11*/ .eleven a < box-sizing: border-box; border: 1px solid white; color: white; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 1.2px; line-height: 1; padding: 15px 40px; position: relative; >.eleven a:after
7. Примеры оформления ссылок
Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .
/*общие стили для всех ссылок*/ a < text-decoration: none; display: inline-block; padding: 5px 10px; letter-spacing: 1px; margin: 0 20px; font-size: 24px; font-family: 'Fredoka One', cursive; transition: .3s ease-in-out; >/*первая ссылка*/ .s1 < color: #FFD201; letter-spacing: 1px; border-bottom: 1px solid transparent; border-top: 1px solid transparent; >.s1:hover < border-bottom: 1px solid #FFD201; border-top: 1px solid #FFD201; >/*вторая ссылка*/ .s2 < color: #969696; text-shadow: 1px 1px black; letter-spacing: 1px; border-bottom: 2px solid transparent; >.s2:hover < color: #F54318; border-bottom: 2px solid #F54318; box-shadow: 0 1px 0 white, 0 2px 0 #969696; >/*третья ссылка*/ .s3 < color: #BA7D67; border: 2px solid transparent; >.s3:hover < border: 2px solid #BA7D67; >/*четвертая ссылка*/ .s4 < color: #2AABBA; font-style: italic; padding-left: 35px; background: url(https://html5book.ru/wp-content/uploads/2019/04/pdf-icon.png) no-repeat left; text-decoration: underline; >.s4:hover < color: #C9D414; >/*пятая ссылка*/ .s5 < color: #CBB8AA; position: relative; >.s5 < text-shadow: 1px 1px white, 2px 2px #6A5F55; >.s5:hover < text-shadow: 1px 1px 1px #6A5F55; >/*шестая ссылка*/ .s6 < color: #E7805E; border-bottom: 1px dashed; >.s6:hover < border-bottom: 1px solid #9B8381; >/*седьмая ссылка*/ .s7 < color: #D5A39C; >.s7:hover < transform: scaleX(1.1); >/*восьмая ссылка*/ .s8 < color: #92B8C5; text-shadow: 1px 1px 1px #555555; >.s8:hover < position: relative; top: 2px; left: 2px; >/*девятая ссылка*/ .s9 < color: #B2BBC0; text-shadow: 1px 0 #4D575D; >.s9:hover < transform: rotate(-5deg); >/*десятая ссылка*/ .s10 < color: #B79DCC; position: relative; >.s10:after < content: ""; display: block; position: relative; width: 100%; margin: auto; border-bottom: 3px dashed #C1CF00; bottom: -5px; transition: .5s ease-in-out; >.s10:hover:after < width: 0; >/*одиннадцатая ссылка*/ .s11 < background-image: linear-gradient(#FE5568 50%, #FE5568 50%), linear-gradient(silver 50%, silver 50%); background-position: center bottom; background-repeat: no-repeat; background-size: 0 2px, 100% 2px; color: #1E3A52; padding-bottom: 3px; transition: .5s ease-in-out; >.s11:hover < background-size: 100% 2px, 100% 2px; color: #FE5568; >/*двенадцатая ссылка*/ .s12 < background-image: linear-gradient(#EE5E4F 50%, #EE5E4F 50%), linear-gradient(silver 50%, silver 50%); background-position: center bottom; background-repeat: no-repeat; background-size: 0 .063em, 100% .063em; color: #607584; padding-bottom: .188em; transition: background-size .5s; >.s12:hover < background-size: 100% .063em, 100% .063em; background-position: left bottom; >/*тринадцатая ссылка*/ .s13 < color: #34495e; line-height: 1.2; position: relative; padding: 0 14px; text-transform: uppercase; >.s13:after < content: ""; height: 100%; min-width: 4px; background: #34495e; position: absolute; left: 0; bottom: 0; transition: .5s; >.s13:hover:after < min-width: 100%; background: #95a5a6; opacity: .35; >/*четырнадцатая ссылка*/ .s14 < border-bottom: 2px solid #5be; color: #555; background-image: linear-gradient(180deg, transparent 65%, #5bf 65%); background-position: 0% 100%; background-repeat: no-repeat; background-size: 100% 0%; >.s14:hover
Ссылки в HTML
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя ��
Ссылки бывают разные, но чаще всего встречаются такие:
- с одного сайта на другой
- с одной страницы на другую в рамках того же сайта
- в пределах одной страницы — с одной её части на другую
- ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.
Ссылка создаётся с помощью тега (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».
При клике на любое из слов, помещенных внутри элемента пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.
Абсолютные и относительные ссылки
Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.
Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса , т.е. содержат протокол передачи данных (например http:// ), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.
Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки ��
Ссылка на документ в той же папке
Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html
Поскольку они соседи, то ссылка со страницы index.html может быть очень короткой и содержать просто название страницы : about.html