Kodokon kodokon.com

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

Создавай ссылки на другие страницы и показывай изображения с помощью тегов a и img.

7 мин · 3 вопросов

Открыть этот урок в Kodokon

"HyperText" в названии HTML - это как раз возможность связывать страницы друг с другом с помощью ссылок. Ссылка создаётся тегом <a> (сокращение от anchor, якорь). Её адрес назначения задаётся атрибутом href (hypertext reference), в котором находится URL: адрес веб-страницы, например https://en.wikipedia.org. Текст, помещённый между <a> и </a>, становится кликабельным.

HTML
<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>
Ссылка на другой сайт, затем ссылка на страницу твоего собственного сайта.

Чтобы показать изображение, используется тег <img>. Это самозакрывающийся тег: у него нет содержимого и нет закрывающего тега - всё помещается внутри самого тега. Два атрибута обязательны. src (source, источник) указывает, где находится файл изображения. alt (alternative text, альтернативный текст) описывает изображение словами: этот текст показывается, если картинка не загрузилась, и его озвучивают программы чтения с экрана, которыми пользуются люди с нарушениями зрения.

HTML
<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">
Три изображения: src указывает файл, alt описывает его словами.

Эти два тега можно объединить: изображение внутри элемента <a> становится кликабельным. Именно так работают логотипы сайтов - при клике они возвращают тебя на главную страницу.

HTML
<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>
Кликабельное изображение: элемент img помещён внутрь элемента a.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

  1. Какой атрибут содержит адрес назначения ссылки?
    • src
    • href
    • alt
    • lang
  2. Для чего нужен атрибут alt у изображения?
    • Описывать изображение, если оно не отображается
    • Задавать размер изображения
    • Указывать адрес файла изображения
  3. Есть ли у тега <img> закрывающий тег?
    • Да, всегда нужно писать </img>
    • Нет, это самозакрывающийся тег
    • Только если изображение большое