Ссылки и изображения

«HyperText» (гипертекст) в названии HTML означает текст со ссылками. Именно ссылки превращают отдельные страницы в паутину: один клик — и ты на другой странице, на другом сайте, даже в другой стране. В этом уроке ты свяжешь страницы ссылками и оживишь их картинками.

Ссылки: элемент `<a>`

Ссылку создают с помощью элемента <a> (anchor — якорь). В атрибуте href записан адрес, а текст между тегами — это то, на что нажимает пользователь. Хороший текст ссылки говорит, куда она ведёт: не «нажми здесь», а «Посмотреть расписание уроков».

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  a { color: #4f46e5; }
</style>

<p>Another site: <a href="https://example.com">Example website</a></p>
<p>New tab: <a href="https://example.com" target="_blank" rel="noopener">Open in a new tab</a></p>
<p>Email: <a href="mailto:info@example.com">Write to us</a></p>
<p>Same site: <a href="about.html">About us</a></p>

• target="_blank" открывает ссылку в новой вкладке. Добавляй к нему rel="noopener" — это не даёт новой странице влиять на твою.
• Адрес, начинающийся с mailto:, открывает почтовую программу с уже указанным получателем.
• Короткий адрес вроде about.html ведёт к файлу на том же сайте — это относительный путь.

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

Абсолютный URL — это полный адрес вместе с протоколом и доменом: https://example.com/images/cat.png. Его используют для ссылок на другие сайты. Относительный путь отсчитывается от текущего файла и применяется внутри твоего сайта. Допустим, папки сайта выглядят так:

my-site/
├── index.html
├── about.html
├── images/
│   └── logo.png
└── blog/
    └── post.html

Переход внутри страницы

Ссылка может вести и в определённое место той же страницы. Для этого дай целевому элементу атрибут id, а в href ссылки напиши этот id после знака #. Так строят оглавления длинных статей. А href="#top" возвращает в самый верх страницы.

<nav>
  <a href="#fruits">Fruits</a> |
  <a href="#drinks">Drinks</a>
</nav>

<h2 id="fruits">Fruits</h2>
<p>Apples, pears, pomegranates.</p>

<h2 id="drinks">Drinks</h2>
<p>Tea, ayran, juice.</p>
<a href="#top">Back to top</a>

Изображения

Изображение добавляют пустым элементом <img>. Атрибут src — путь к файлу изображения, а alt — альтернативный текст: скринридер зачитывает его вслух, он появляется вместо картинки, если та не загрузилась, и его используют поисковые системы. width и height задают размер: браузер заранее резервирует место под картинку, и страница не «прыгает» при загрузке.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  figcaption { color: #475569; font-size: 14px; }
</style>

<figure>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%2338bdf8'/%3E%3Ccircle cx='95' cy='20' r='12' fill='%23fde047'/%3E%3Cpath d='M0 80 40 35 70 65 90 45 120 80Z' fill='%2316a34a'/%3E%3C/svg%3E"
       alt="Green hills under a blue sky with a yellow sun"
       width="240" height="160">
  <figcaption>Figure 1. A picture made of three shapes.</figcaption>
</figure>

SVG и эмодзи

SVG (Scalable Vector Graphics) описывает картинку не пикселями, а фигурами: «здесь красный круг радиусом 28». Поэтому она остаётся чёткой при любом увеличении. SVG можно подключить отдельным файлом через <img> или написать прямо в HTML в виде элемента <svg>. А эмодзи — это просто текстовые символы, им вообще не нужен файл.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
</style>

<p>Emoji are just text: 🚦 🌞 🍎</p>

<svg width="220" height="110" viewBox="0 0 220 110" role="img" aria-label="A traffic light">
  <rect x="5" y="5" width="210" height="100" rx="20" fill="#1e293b"/>
  <circle cx="50" cy="55" r="28" fill="#ef4444"/>
  <circle cx="110" cy="55" r="28" fill="#facc15"/>
  <circle cx="170" cy="55" r="28" fill="#22c55e"/>
</svg>