InnoMarts logo
InnoMarts
Fast websites
← Back to course

Ссылки и Навигация

Ссылки и Навигация

С возвращением.

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

Теперь мы соединим страницы между собой.

Потому что одна HTML-страница — это хорошо.

А много соединённых HTML-страниц — это уже сайт.

И именно тогда всё начинает выглядеть по-настоящему.

Одинокая страница — это записка на холодильнике.

Соединённые страницы — это маленький цифровой город.

С меньшим количеством голубей.

Надеемся.

Что Ты Изучишь

В этом уроке ты узнаешь:

Элемент a

Ссылки создаются с помощью элемента a.

Пример:

<a href="about.html">Обо Мне</a>

Текст между открывающим и закрывающим тегами будет кликабельным.

Атрибут href говорит браузеру, куда должна вести ссылка.

То есть это:

<a href="about.html">Обо Мне</a>

означает:

Покажи текст “Обо Мне” и отправь пользователя на about.html, когда он кликнет.

Просто.

Мощно.

Слегка магично.

Ссылка на Другую Страницу

Создай два файла:

touch index.html about.html

В index.html напиши:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Главная Страница</title>
</head>
<body>
  <h1>Главная Страница</h1>
  <p>Добро пожаловать на мой сайт.</p>

  <a href="about.html">Перейти на Страницу Обо Мне</a>
</body>
</html>

В about.html напиши:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Обо Мне</title>
</head>
<body>
  <h1>Обо Мне</h1>
  <p>Это страница обо мне.</p>

  <a href="index.html">Назад на Главную</a>
</body>
</html>

Открой index.html в браузере и кликни ссылку.

Поздравляю.

Ты соединил две страницы.

Сайт начал дышать.

Очень тихо.

Но всё же.

Relative Links

Relative link указывает на файл в зависимости от места, где находится текущий файл.

Пример:

<a href="about.html">Обо Мне</a>

Это означает:

Ищи about.html в той же папке.

Relative links отлично подходят для страниц твоего сайта.

Пример структуры:

project/
  index.html
  about.html
  contact.html

Из index.html можно сослаться на contact.html так:

<a href="contact.html">Контакт</a>

Не нужно писать полный интернет-адрес.

Браузер понимает путь.

Браузеры умнее, чем выглядят.

Иногда.

Ссылки на Файлы в Папках

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

Пример:

project/
  index.html
  pages/
    about.html

Из index.html ссылайся на pages/about.html так:

<a href="pages/about.html">Обо Мне</a>

Если ты внутри pages/about.html и хочешь вернуться к index.html, используй:

<a href="../index.html">Главная</a>

.. означает “подняться на одну папку выше”.

Это важно.

И опасно, если писать это полусонным.

Пути маленькие, но кусаются.

Absolute Links

Absolute link использует полный URL.

Пример:

<a href="https://www.mozilla.org">Mozilla</a>

Используй absolute links для внешних сайтов.

Примеры:

<a href="https://developer.mozilla.org">MDN Web Docs</a>
<a href="https://www.wikipedia.org">Wikipedia</a>

Absolute links обычно начинаются с:

https://

Если забыть https://, браузер может подумать, что это локальный файл.

И тогда путаница входит в комнату в сапогах.

Открыть Ссылку в Новой Вкладке

Чтобы открыть ссылку в новой вкладке, используй target="_blank":

<a href="https://developer.mozilla.org" target="_blank">Открыть MDN</a>

Для безопасности также добавь rel="noopener noreferrer":

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Открыть MDN
</a>

Это хорошая привычка для внешних ссылок, которые открываются в новой вкладке.

Да, выглядит длиннее.

Хорошие привычки часто выглядят длиннее.

Потом они спасают тебя позже.

Email Links

Можно создать ссылку, которая открывает email-приложение:

<a href="mailto:hello@example.com">Отправить Email</a>

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

Пример:

<a href="mailto:contact@example.com">Написать мне</a>

Можно также добавить тему:

<a href="mailto:contact@example.com?subject=Вопрос%20с%20Сайта">Задать Вопрос</a>

Пробелы в URL часто пишутся как %20.

Не красиво.

Но работает.

Как многие вещи в интернете.

Phone Links

Для телефонных номеров используй tel::

<a href="tel:+390000000000">Позвонить</a>

Это полезно на мобильных устройствах.

На desktop может ничего не сделать или открыть программу для звонков.

HTML старается.

Устройство решает.

Очень демократично.

Ссылка на Секцию на Той же Странице

Можно сослаться на секцию с помощью id.

Пример:

<a href="#contact">Перейти к Контакту</a>

<h2 id="contact">Контакт</h2>
<p>Можно связаться со мной через email.</p>

href="#contact" указывает на элемент с:

id="contact"

Это полезно для длинных страниц.

Например, документации.

Или меню ресторана, которое требует кардио.

Простая Навигация

Навигация обычно является группой ссылок.

Пример:

<nav>
  <a href="index.html">Главная</a>
  <a href="about.html">Обо Мне</a>
  <a href="contact.html">Контакт</a>
</nav>

Элемент nav говорит браузеру:

Эта зона — навигация.

Это semantic HTML.

Он добавляет структуре значение.

А не просто кидает ссылки на страницу как носки на стул.

Навигация со Списком

Многие навигационные меню используют списки:

<nav>
  <ul>
    <li><a href="index.html">Главная</a></li>
    <li><a href="about.html">Обо Мне</a></li>
    <li><a href="contact.html">Контакт</a></li>
  </ul>
</nav>

Это чистая структура.

Меню навигации — это список ссылок.

Поэтому список имеет смысл.

HTML любит, когда структура имеет смысл.

Он становится спокойнее.

Разработчики тоже.

Иногда.

Создай Страницу для Практики

Создай три файла:

touch index.html about.html contact.html

Используй эту навигацию в каждом файле:

<nav>
  <ul>
    <li><a href="index.html">Главная</a></li>
    <li><a href="about.html">Обо Мне</a></li>
    <li><a href="contact.html">Контакт</a></li>
  </ul>
</nav>

Пример index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Главная</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Главная</a></li>
      <li><a href="about.html">Обо Мне</a></li>
      <li><a href="contact.html">Контакт</a></li>
    </ul>
  </nav>

  <h1>Главная</h1>
  <p>Добро пожаловать на мой маленький сайт.</p>
</body>
</html>

Теперь создай похожие страницы для about.html и contact.html.

Открой их в браузере и переходи между страницами.

Теперь у тебя есть маленький сайт.

Маленький.

Но настоящий.

Частые Ошибки

Забыть href

Это не полезная ссылка:

<a>Обо Мне</a>

Используй:

<a href="about.html">Обо Мне</a>

Без href нет направления.

Ссылка без href — как такси без колёс.

Неправильное Имя Файла

Если файл называется:

about.html

но ссылка говорит:

<a href="About.html">Обо Мне</a>

она может не работать на некоторых системах.

Имена файлов могут быть case-sensitive.

about.html и About.html могут быть разными.

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

target blank без rel

Это работает:

<a href="https://example.com" target="_blank">Example</a>

Лучше:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

Хорошие привычки сейчас.

Меньше боли потом.

Практика

Создай маленький сайт с:

Без CSS.

Без JavaScript.

Только HTML links і navigation.

Сайт будет выглядеть просто.

Это нормально.

Сегодня мы строим связи.

Украшения придут позже.

Мини-Задание

Создай файл:

resources.html

Построй страницу ресурсов с:

Пример:

<a href="#top">Наверх</a>

и наверху:

<h1 id="top">Полезные Ресурсы</h1>

Маленькая функция.

Очень полезная.

Очень профессиональная.

Почти подозрительно.

Итог

Сегодня ты узнал, что:

Ссылки превращают страницы в сайты.

Без ссылок страницы — острова.

Со ссылками они становятся картой.

Следующий Урок

В следующем уроке мы изучим изображения и медиа.

Потому что текст мощный.

Но иногда картинка спасает всех от чтения двенадцати абзацев про кота.