Вставка и стилизация изображений в HTML

Введение

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

В ходе практических упражнений вы изучите различные HTML - атрибуты, такие как src, alt, width, height и title, чтобы контролировать отображение и доступность изображений. Эти навыки являются фундаментальными для веб - разработчиков, которые стремятся создавать визуально привлекательные и отзывчивые веб - страницы с правильно интегрированными и стилизованными изображениями.

Добавление базового изображения с атрибутами src и alt

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

Сначала создадим HTML - файл для работы. Откройте WebIDE и создайте новый файл с именем images.html в директории ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- We'll add our images here -->
  </body>
</html>

Тег <img> является самозакрывающимся тегом, используемым для встраивания изображений в HTML - документ. Он имеет два важных атрибута:

src (источник): Указывает путь к файлу изображения
alt (альтернативный текст): Предоставляет текстовое описание изображения

Добавим изображение в наш HTML - файл:

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

Атрибут src указывает на URL - адрес изображения, а атрибут alt предоставляет описание, которое:

Отображается, если изображение не удалось загрузить
Помогает скринридерам описывать изображение для пользователей с нарушениями зрения
Улучшает SEO, предоставляя контекст для поисковых систем

Сохраните файл и откройте его в веб - браузере, чтобы увидеть изображение.

Примечание: Узнайте больше о Просмотре HTML - файлов в WebIDE.

LabEx logo dark version

Установка фиксированных размеров изображения с помощью атрибутов width и height

На этом этапе вы научитесь контролировать размер изображений с использованием атрибутов width и height в HTML. Эти атрибуты позволяют вам указать точные размеры изображения, что может помочь улучшить макет страницы и производительность загрузки.

Откройте файл images.html, который вы создали на предыдущем этапе. Мы изменим существующее изображение и добавим несколько новых, чтобы продемонстрировать различные методы настройки размеров.

HTML предоставляет два атрибута для установки размеров изображения:

width: Устанавливает ширину изображения в пикселях
height: Устанавливает высоту изображения в пикселях

Обновим наше предыдущее изображение и добавим несколько новых примеров:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- Original image with fixed dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- Another image with different dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- Image with only width specified -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

Основные моменты, связанные с размерами изображений:

Размеры задаются в пикселях
Вы можете установить ширину, высоту или оба параметра
Если указан только один размер, изображение масштабируется пропорционально
Установка размеров помогает избежать сдвига макета страницы при загрузке изображений

Пример вывода в веб - браузере покажет три изображения разного размера.

Выравнивание изображений с использованием устаревшего атрибута align

На этом этапе вы узнаете о устаревшем атрибуте align для позиционирования изображений в HTML. Хотя современный веб - дизайн использует CSS для создания макетов, важно понимать этот исторический метод выравнивания изображений.

Откройте файл images.html из предыдущих этапов и измените его, чтобы продемонстрировать различные варианты выравнивания изображений:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- Left-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      This text will flow around the left-aligned image.
    </p>

    <p>
      <!-- Right-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      This text will flow around the right-aligned image.
    </p>

    <p>
      <!-- Center-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      This text is aligned with the middle of the image.
    </p>
  </body>
</html>

Атрибут align поддерживает три основных значения:

left: Выравнивает изображение по левому краю, а текст обтекает его
right: Выравнивает изображение по правому краю, а текст обтекает его
middle: Выравнивает изображение по вертикали относительно базовой линии текста

Важные примечания:

Атрибут align устарел в HTML5
Современный веб - дизайн использует CSS - свойство float или flexbox для создания макетов
Этот атрибут сохраняется для исторического понимания

Пример вывода покажет изображения, расположенные по - разному внутри абзацев.

Примечание: Диалоговое окно Labby может перекрыть изображение, выровненное по правому краю.

Добавление информации в подсказку с использованием атрибута title

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

Откройте файл images.html из предыдущих этапов и измените его, чтобы продемонстрировать использование всплывающих подсказок:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- Image with a simple tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- Image with a more descriptive tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- Multiple images with different tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

Основные моменты, связанные с атрибутом title:

Предоставляет дополнительную информацию при наведении курсора на изображение
Работает с изображениями, текстом и большинством HTML - элементов
Помогает улучшить пользовательский опыт, предоставляя контекст
Отображается в небольшом всплывающем окне при наведении курсора на элемент

При наведении курсора на эти изображения в веб - браузере вы увидите текст всплывающей подсказки.

Резюме

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

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