Изображения в HTML: встраивание и настройка с помощью src, alt и размеров

Введение

Изображения являются неотъемлемой частью современных веб-страниц, делая контент более привлекательным и наглядным. В HTML изображения встраиваются в документ с помощью тега <img>. Этот мощный тег обладает рядом атрибутов, позволяющих управлять источником изображения, его размером и доступностью.

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

Среда уже предварительно настроена: в директории ~/project находятся файл index.html и файл изображения labex.svg. Также запущен веб-сервер, поэтому вы можете просматривать свои изменения в режиме реального времени на вкладке "Web 8080".

Вставка тега img с атрибутом src для указания источника изображения

На этом этапе вы узнаете, как добавить изображение на свою HTML-страницу. Тег <img> используется для встраивания изображений. Это пустой тег, что означает, что у него нет закрывающего тега. Самым важным атрибутом тега <img> является src, который указывает путь к изображению, которое вы хотите отобразить.

Сначала откройте файл index.html, расположенный в директории ~/project, используя файловый менеджер слева.

Теперь добавьте тег <img> внутри раздела <body>, сразу под комментарием . Установите атрибут src равным labex.svg — это файл изображения, предоставленный в директории вашего проекта.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

После добавления кода сохраните файл. Чтобы увидеть результат, переключитесь на вкладку Web 8080 в верхней панели лабораторной среды. Вы должны увидеть логотип LabEx на странице.

img tag

Добавление атрибута alt для описания изображения

На этом этапе вы добавите атрибут alt к вашему тегу <img>. Атрибут alt предоставляет альтернативный текст для изображения. Этот текст отображается, если изображение по какой-либо причине не может быть загружено. Что еще важнее, он используется программами чтения с экрана (скринридерами) для описания изображения пользователям с нарушениями зрения, что делает ваш сайт более доступным.

Измените тег <img> в файле index.html, добавив атрибут alt. Хороший текст alt должен быть кратким описанием изображения.

<img src="labex.svg" alt="LabEx Logo" />

Ваш полный файл index.html теперь должен выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

Сохраните файл. Вы не увидите визуальных изменений на вкладке Web 8080, так как изображение загружается корректно. Однако добавление атрибута alt является важной передовой практикой веб-разработки.

Установка атрибутов width и height для размера изображения

На этом этапе вы научитесь управлять размером изображения с помощью атрибутов width и height. По умолчанию браузер отображает изображение в его исходных размерах. Указание width и height позволяет изменить размер изображения и помогает браузеру зарезервировать правильное количество места для него до загрузки, предотвращая смещение макета страницы.

Давайте установим ширину нашего изображения 200 пикселей, а высоту — 50 пикселей. Добавьте атрибуты width и height к вашему тегу <img> в файле index.html.

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

Полный файл index.html теперь будет выглядеть так:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

Сохраните файл и переключитесь на вкладку Web 8080. Вы заметите, что размер изображения изменился в соответствии с указанными вами параметрами.

Использование атрибута title для всплывающей подсказки

На этом этапе вы добавите атрибут title к тегу <img>. Атрибут title предоставляет дополнительную информацию об элементе. Для изображений эта информация обычно отображается в виде всплывающей подсказки, когда пользователь наводит курсор мыши на изображение.

Давайте добавим заголовок к нашему изображению, чтобы дать пользователям подсказку о том, что произойдет, если они нажмут на него (это мы реализуем на следующем этапе). Добавьте атрибут title к вашему тегу <img> в index.html.

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

Ваш файл index.html теперь должен содержать следующий код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

Сохраните файл и обновите вкладку Web 8080. Теперь наведите курсор мыши на изображение. Должно появиться небольшое окно с текстом "Go to LabEx Homepage".

title attribute

Обертывание img в тег a для создания кликабельной ссылки

На этом заключительном этапе вы сделаете изображение кликабельной ссылкой. Для этого нужно обернуть тег <img> в тег ссылки <a>. Тег <a> определяет гиперссылку, а его атрибут href указывает URL страницы, на которую ведет ссылка.

Оберните существующий тег <img> в тег <a>. Установите атрибут href тега <a> на https://labex.io.

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

Ваш итоговый файл index.html будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

Сохраните файл и перейдите на вкладку Web 8080. Вы заметите, что курсор мыши меняется на указатель при наведении на изображение, что означает, что это ссылка. Нажатие на изображение приведет к переходу на домашнюю страницу LabEx.

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно научились работать с изображениями в HTML.

В этой работе вы освоили следующие ключевые концепции:

Встраивание изображения с помощью тега <img>.
Указание источника изображения с помощью атрибута src.
Предоставление альтернативного текста для доступности с помощью атрибута alt.
Управление размерами изображения с помощью атрибутов width и height.
Добавление всплывающей подсказки с помощью атрибута title.
Превращение изображения в кликабельную ссылку путем обертывания его в тег <a>.

Это базовые навыки, необходимые для создания насыщенных и интерактивных веб-страниц. Теперь вы можете уверенно добавлять изображения и управлять ими в своих будущих HTML-проектах.