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

Введение

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

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

Среда была предварительно настроена с файлом index.html и файлом изображения с именем labex.svg в каталоге ~/project. Также запущен веб-сервер, поэтому вы можете просматривать изменения в режиме реального времени на вкладке "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, отображаемый на странице.

Добавьте атрибут 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".

Оберните 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-проектах.