Урок 2.5 — Ссылки и изображения: a, img

В уроке 5 разделов. Изучайте по порядку.

Тег <a> (от anchor — «якорь») создаёт гиперссылку. Это один из самых важных тегов в HTML — именно ссылки делают веб «паутиной» (web), связывая страницы между собой. Без ссылок интернет был бы просто набором изолированных документов.

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

<a href="https://www.google.com">Перейти на Google</a>

<a href="https://ru.wikipedia.org/wiki/HTML">Статья про HTML</a>

<a href="page2.html">Следующая страница</a>

<a href="/catalog/phones.html">Каталог телефонов</a>

href может вести на разные виды адресов. Самое важное — понять разницу между абсолютными и относительными путями.

Абсолютный путь — это полный URL (веб-адрес), который начинается с http:// или https://. Он указывает на ресурс в интернете, независимо от того, где находится ваша страница. Пример: https://example.com/image.jpg. Используется, когда ссылка ведёт на другой сайт.

Относительный путь — это адрес относительно текущей страницы. Он не содержит домена. Примеры: page2.html (файл в той же папке), images/photo.jpg (файл в подпапке images), ../index.html (файл в родительской папке). Используется, когда ссылка ведёт на другой файл вашего сайта.

Символ ../ означает «подняться на уровень выше». Если у вас структура папок: site/about/team.html и site/index.html, то из team.html ссылка на index.html будет: <a href="../index.html">Главная</a>. Это как команда «вернуться в предыдущую папку».

<!-- Абсолютные (на другой сайт) -->
<a href="https://yandex.ru">Яндекс</a>
<a href="https://github.com">GitHub</a>

<!-- Относительные (на свой сайт) -->
<a href="about.html">О компании</a>
<a href="catalog/phones.html">Телефоны</a>
<a href="../index.html">На главную</a>

Ссылка может вести не только на другую страницу, но и на файл, изображение, архив, PDF-документ. Браузер либо откроет файл (если умеет его показывать, как PDF или изображение), либо предложит скачать. Также ссылка может вести на email — для этого используется специальный протокол mailto:.

<!-- Ссылка на email (открывает почтовый клиент) -->
<a href="mailto:info@example.com">Написать нам</a>

<!-- Ссылка на скачивание файла -->
<a href="files/catalog.pdf">Скачать каталог (PDF)</a>

<!-- Ссылка на телефон (на мобильных — звонит) -->
<a href="tel:+79161234567">+7 (916) 123-45-67</a>

Ещё один полезный вид ссылок — якорные ссылки. Они ведут не на другую страницу, а на определённое место внутри текущей страницы. Для этого нужно: 1) дать элементу атрибут id, 2) в href указать этот id через решётку (#).

<!-- Содержание — ссылки ведут на разделы ниже -->
<a href="#section1">Раздел 1</a>
<a href="#section2">Раздел 2</a>
<a href="#section3">Раздел 3</a>

<!-- Раздел 1 (к нему ведёт ссылка) -->
<h2 id="section1">Раздел 1</h2>
<p>Текст раздела 1...</p>

При клике на якорную ссылку браузер плавно (или мгновенно) прокручивает страницу к элементу с указанным id. Это очень удобно для длинных страниц с оглавлением. Кстати, мы используем якорные ссылки в содержании каждого урока этого курса!

По умолчанию ссылки в браузере выглядят как синий подчёркнутый текст. После посещения ссылка становится фиолетовой. Эти стили можно менять через CSS, но сейчас мы не проходим CSS — просто запомните, как выглядят ссылки «из коробки».

Атрибут target (от target — «цель») указывает браузеру, где открывать ссылку. Значение _blank означает «в новой вкладке (или новом окне)». По умолчанию (если не указывать target) ссылка открывается в той же вкладке — это эквивалент target="_self".

<!-- Откроется в этой же вкладке (по умолчанию) -->
<a href="https://example.com">Example.com</a>

<!-- Откроется в новой вкладке -->
<a href="https://example.com" target="_blank">Example.com (новая вкладка)</a>

<!-- Все внешние ссылки открываются в новом окне -->
<a href="https://google.com" target="_blank">Google</a>
<a href="https://yandex.ru" target="_blank">Яндекс</a>

Когда использовать target="_blank"? В основном для ссылок на внешние сайты. Если вы ссылаетесь на другую страницу своего сайта — оставьте обычную ссылку (без target). Если ссылка ведёт на другой сайт — добавьте target="_blank", чтобы пользователь не ушёл с вашего сайта. Особенно это важно для интернет-магазинов, блогов и сайтов с длинным чтением — вы не хотите, чтобы пользователь закрыл вкладку и потерял ваш сайт.

Есть и другие значения target: _self (в той же вкладке, по умолчанию), _parent (в родительском фрейме), _top (на весь экран, выходя из фреймов). Но на практике вам понадобится только _blank. Остальные используются редко и в специфических ситуациях (например, с iframe).

При target="_blank" рекомендуется добавлять rel="noopener noreferrer" для безопасности. Это предотвращает доступ новой вкладки к вашей странице через JavaScript. Современные браузеры безопасны по умолчанию, но хорошая практика — всегда писать target="_blank" rel="noopener noreferrer".

<!-- Безопасный способ открывать внешние ссылки -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Внешний сайт (безопасно)
</a>

Тег <img> (от image — «изображение») вставляет картинку на страницу. Это одиночный (самозакрывающийся) тег — у него нет закрывающего тега. Главный атрибут — src (от source — «источник»), в котором указывается путь к изображению.

Как и в случае со ссылками, пути к изображениям бывают абсолютными (полный URL) и относительными (путь относительно текущей страницы). Для картинок на собственном сайте обычно используются относительные пути. Для картинок из интернета — абсолютные.

<!-- Изображение из интернета (абсолютный путь) -->
<img src="https://example.com/images/photo.jpg" alt="Описание">

<!-- Изображение из той же папки (относительный путь) -->
<img src="photo.jpg" alt="Моё фото">

<!-- Изображение из подпапки images -->
<img src="images/photo.jpg" alt="Фото из папки images">

<!-- Изображение из родительской папки -->
<img src="../photo.jpg" alt="Фото из родительской папки">

Если вы хотите использовать картинку из интернета, убедитесь, что у вас есть права на её использование. Не воруйте чужие изображения! Лучше используйте бесплатные фотостоки: Unsplash, Pexels, Pixabay. Или загрузите свою фотографию на сервер и укажите путь к ней.

Какие форматы изображений поддерживаются? Основные: JPEG (фотографии), PNG (графика с прозрачностью), GIF (анимации), WebP (современный формат, меньше размер), SVG (векторная графика). Браузеры поддерживают все эти форматы. Для фотографий используйте JPEG или WebP, для иконок и логотипов — PNG или SVG, для анимаций — GIF (или лучше видео, но это мы пройдём позже).

Внутри <img> можно (и нужно) указывать атрибуты width и height — ширину и высоту изображения в пикселях. Это помогает браузеру зарезервировать место на странице до загрузки картинки. Без этих атрибутов страница может «прыгать» во время загрузки — текст уже загрузился, а картинка ещё нет, и когда она появляется, контент сдвигается.

Важно: <img> — это строчный элемент, но он ведёт себя как строчно-блочный. Он не переносит строку (строчный), но у него можно задать ширину и высоту (как у блочного). По умолчанию изображение отображается в исходном размере, если не указаны width/height.

<!-- Картинка 800x600 пикселей -->
<img src="photo.jpg" alt="Описание" width="800" height="600">

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

Три атрибута, которые должны быть у каждого <img>: src (обязательный), alt (обязательный по стандартам доступности), width и height (настоятельно рекомендуемые). Давайте разберём каждый подробнее.

alt (от alternative — «альтернатива») — это текст, который отображается, если изображение не загрузилось. Он также используется скринридерами для описания картинки незрячим пользователям. Поисковые системы (Google, Яндекс) тоже читают alt — это влияет на SEO ваших изображений в поиске картинок.

Как писать alt? Несколько простых правил: опишите, что изображено на картинке, за 5-15 слов. Не начинайте со слов «Изображение», «Картинка», «Фото» — скринридер и так скажет, что это изображение. Если картинка содержит текст — продублируйте этот текст в alt. Если картинка декоративная (просто линия, иконка, фон) — оставьте alt пустым: alt="". Пустой alt — это сигнал скринридеру пропустить картинку.

<!-- Хороший alt: описывает содержание -->
<img src="cat.jpg" alt="Рыжий кот спит на подоконнике">

<!-- Плохой alt: неинформативно -->
<img src="cat.jpg" alt="Кот">

<!-- Плохой alt: слова-паразиты -->
<img src="cat.jpg" alt="Изображение кота на подоконнике">

<!-- Декоративная картинка: пустой alt -->
<img src="divider.png" alt="">

<!-- Картинка с текстом: дублируем текст -->
<img src="sale-banner.jpg" alt="Скидка 50% на всё до 31 июля">

width и height задают размеры изображения в пикселях. width — ширина, height — высота. Эти атрибуты не обязательны, но очень полезны. Они помогают браузеру зарезервировать место под картинку до её загрузки, предотвращая «прыжки» контента. Это называется CLS (Cumulative Layout Shift) — показатель, который измеряет, насколько «дёргается» страница при загрузке.

Совет: указывайте width и height в точном соответствии с реальными размерами изображения. Если картинка 1200x800 пикселей, пишите width="1200" height="800". Не пытайтесь уменьшить изображение через HTML — для этого есть CSS. Если указать меньшие размеры, чем исходное изображение, картинка всё равно загрузится полного размера (просто отобразится меньше) — это замедлит загрузку страницы.

Есть ещё один полезный атрибут — title. Он создаёт всплывающую подсказку при наведении на изображение. Но это не замена alt! Alt — для доступности, title — для дополнительной информации. Используйте title редко, только когда это действительно нужно.

<!-- Полный набор атрибутов -->
<img src="photo.jpg" alt="Закат на море" width="800" height="500" title="Фото сделано в Сочи">

<!-- Минимальный, но достаточный набор -->
<img src="photo.jpg" alt="Закат на море" width="800" height="500">

<!-- Совсем плохо (но технически работает) -->
<img src="photo.jpg">

Последний пример (без alt, width, height) — плохая практика. Так делать не стоит. Скринридер прочитает название файла (photo.jpg) вместо описания. Браузер не зарезервирует место — контент «прыгнет», когда картинка загрузится. Всегда добавляйте хотя бы alt и width/height.

Теперь применим всё, что узнали. Создайте страницу про вашего любимого кота (или любой фильм). Используйте только <a> и <img> — других тегов из этого урока не требуется, хотя можно использовать изученные ранее (strong, em, списки).

Задание: страница «Мой любимый кот»

Создайте страницу со следующей структурой:

— Заголовок: название породы или кличка кота

— Изображение кота (из интернета, через абсолютный URL)

— Краткое описание: 2-3 абзаца о коте

— Ссылка на страницу с информацией о породе (внешний сайт, открывается в новой вкладке)

— Ссылка «Написать автору» (mailto)

<h1>Мой кот — Барсик</h1>

<img src="https://placekitten.com/600/400"
     alt="Рыжий кот Барсик сидит на диване"
     width="600" height="400">

<p>Барсик — <strong>трёхлетний</strong> рыжий кот породы мейн-кун.
Он очень <em>ласковый</em> и любит спать на коленях.</p>

<p>Каждое утро Барсик <strong>громко мяукает</strong>,
требуя завтрак. Его любимые блюда — рыба и курица.</p>

<h2>Любимые занятия</h2>
<ul>
    <li>Спать на солнышке</li>
    <li>Играть с мячиком</li>
    <li>Наблюдать за птицами в окно</li>
</ul>

<hr>

<p>
  <a href="https://ru.wikipedia.org/wiki/Мейн-кун"
     target="_blank" rel="noopener noreferrer">
     Подробнее о породе мейн-кун (Википедия)
  </a>
</p>

<p>
  <a href="mailto:barsik@example.com">Написать Барсику</a>
</p>

Изображение взято из placekitten.com — сервиса для placeholder-картинок котов. Картинка не является ссылкой (просто <img>), но её можно сделать кликабельной, обернув в <a>.

Задание 2: страница про любимый фильм (самостоятельно)

Сделайте страницу про любимый фильм по аналогии. Структура:

— Название фильма (заголовок)

— Постер фильма (изображение из интернета)

— Описание: год выпуска, режиссёр, главные актёры, краткий сюжет

— Ссылка на страницу фильма на Кинопоиске (в новой вкладке)

— Ссылка на трейлер на YouTube

Попробуйте использовать все изученные атрибуты: alt (описание постера), width/height (размеры), target="_blank" (для внешних ссылок), rel (безопасность), mailto: (если захотите добавить «написать автору»).

<h1>Мой любимый фильм: «Начало»</h1>

<img src="https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjJMl5BL.jpg"
     alt="Постер фильма Начало (Inception, 2010)"
     width="400" height="600">

<p><strong>Год:</strong> 2010</p>
<p><strong>Режиссёр:</strong> Кристофер Нолан</p>
<p><strong>В ролях:</strong> Леонардо Ди Каприо, Джозеф Гордон-Левитт,
Эллен Пейдж, Том Харди, Киллиан Мерфи</p>

<p>Дом Кобб — специалист по краже идей из снов. Ему предлагают
<em>невозможную</em> задачу: не украсть, а <em>внедрить</em> идею
в сознание человека. Фильм <strong>обязателен</strong> к просмотру!</p>

<hr>

<p>
  <a href="https://www.kinopoisk.ru/film/447301/"
     target="_blank" rel="noopener noreferrer">
     Страница фильма на Кинопоиске
  </a>
</p>

<p>
  <a href="https://www.youtube.com/watch?v=YoHD9XEInc0"
     target="_blank" rel="noopener noreferrer">
     Смотреть трейлер на YouTube
  </a>
</p>

Скопируйте любой из примеров в HTML-файл, откройте в браузере. Проверьте: кликается ли ссылка? Открывается ли в новой вкладке? Загружается ли картинка? Отображается ли alt, если убрать картинку (например, заменить src на несуществующий адрес)? Если всё работает — вы отлично усвоили урок!

Поздравляю! Вы завершили урок 2.5. Теперь вы умеете создавать ссылки всех видов и вставлять изображения на страницу. Это последний урок модуля о структуре HTML. В следующем модуле мы начнём изучать CSS и стилизацию страниц.