Сайт без изображений и ссылок — это просто текстовый документ. Картинки делают страницу привлекательной и наглядной, а ссылки превращают набор страниц в связанный сайт и позволяют вести пользователя к цели: на другую страницу, к кнопке «Купить», в социальные сети. Это два элемента, без которых не обходится ни один реальный проект.

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

Что уже умеем / что добавим

Вы умеете размечать текст, заголовки и списки. Теперь добавим визуальные и интерактивные элементы. В сквозной проект-лендинг мы вставим изображение в титульный экран и добавим кнопку-ссылку «Записаться на курс».

Что вы узнаете в рамках статьи

• Как вставлять изображения тегом img.
• Зачем нужны атрибуты src и alt.
• Как создавать ссылки тегом a и атрибутом href.
• Как открывать ссылку в новой вкладке.
• Как сделать изображение кликабельным.

Ключевые термины

• img — одиночный тег для вставки изображения.
• src — атрибут с путём к файлу изображения (source, «источник»).
• alt — атрибут с текстовым описанием изображения (alternative text).
• a — тег ссылки (anchor, «якорь»).
• href — атрибут ссылки с адресом назначения (hypertext reference).
• Относительный путь — путь к файлу относительно текущей страницы.
• Абсолютный путь — полный адрес, начинающийся с https://.

Вставка изображений

Изображение добавляется одиночным тегом img. У него нет содержимого и закрывающего тега — всё задаётся атрибутами:

<img src="logo.png" alt="Логотип курса">

Атрибут src указывает путь к файлу. Если картинка лежит в той же папке, что и страница, достаточно имени файла — это относительный путь. Если изображение находится в интернете, указывают абсолютный путь целиком: src="https://example.com/photo.jpg".

Атрибут alt задаёт альтернативный текст — его показывает браузер, если картинка не загрузилась, и зачитывают программы для незрячих. Не пропускайте alt: он важен и для доступности, и для поисковых систем. Описывайте суть изображения коротко и по делу.

Пути к файлам

Чтобы браузер нашёл картинку, путь в src должен быть правильным. Есть два вида путей. Относительный отсчитывается от текущей страницы: img/photo.jpg означает «папка img рядом со страницей, а в ней файл photo.jpg». Абсолютный — это полный адрес в интернете, начинающийся с https://.

<img src="images/hero.jpg" alt="Студенты на занятии">
<img src="https://example.com/banner.jpg" alt="Рекламный баннер">

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

Ссылки

Ссылку создаёт тег a, а адрес назначения задаёт атрибут href. Текст между тегами — это то, что видит и нажимает пользователь:

<a href="https://stepik.org">Перейти на Stepik</a>

По умолчанию ссылка ведёт в пределах текущей вкладки. Чтобы она открывалась в новой вкладке, добавляют атрибут target="_blank":

<a href="https://stepik.org" target="_blank">Открыть в новой вкладке</a>

Ссылки бывают внешними (на другой сайт, абсолютный путь), внутренними (на другую страницу того же сайта, относительный путь, например about.html) и якорными (на блок этой же страницы). Пока нам достаточно внешних и внутренних.

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

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

<a href="https://stepik.org">
  <img src="logo.png" alt="Логотип курса">
</a>

Теперь по клику на логотип пользователь перейдёт по ссылке. Этот приём повсеместно используется в шапках сайтов: клик по логотипу почти всегда возвращает на главную страницу.

Применяем в проекте

Дополним лендинг. Вставим в титульный экран изображение, а под описанием добавим ссылку-кнопку «Записаться на курс», которая открывается в новой вкладке.

<div>
  <img src="images/hero.jpg" alt="Студент верстает свой первый сайт">
  <h1>Научитесь верстать сайты с нуля</h1>
  <p>Практический курс по HTML и CSS для начинающих. От первой страницы до готового лендинга.</p>
  <a href="https://stepik.org" target="_blank">Записаться на курс</a>
</div>

На странице появилось изображение над заголовком и ссылка под описанием. Пока ссылка выглядит как обычный подчёркнутый текст — превратим её в красивую кнопку позже, когда дойдём до стилей.

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

• Пропущенный alt.
  Без него страдают доступность и SEO; описывайте изображение коротким текстом.
• Неверный путь в src.
  Опечатка, не та папка или регистр — и картинка не загрузится. Проверяйте путь.
• Пустой или забытый href.
  Без адреса ссылка никуда не ведёт.
• Закрывающий тег у img.
  Он одиночный — писать </img> не нужно.

Итоги

Замечательно — ваша страница ожила! Теперь вы умеете вставлять изображения с правильными путями и подписями и создавать ссылки, ведущие на другие сайты, страницы и даже открывающиеся в новой вкладке. А ещё вы узнали красивый приём — кликабельный логотип, который встречается почти на каждом сайте. Ваш лендинг обзавёлся картинкой и первой кнопкой-ссылкой.

Отличный прогресс! На этом раздел про структуру и содержание почти завершён. В следующем уроке мы сделаем большой шаг — подключим CSS и научимся пользоваться инструментами разработчика в браузере.