Мастерство в встраивании изображений в HTML

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Настройте ваш проект

Первым шагом является создание новой директории с именем "html-img-tag-lab", а внутри нее - файла с именем "index.html". Откройте файл в вашем редакторе кода и добавьте следующий код в раздел <head>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Добавьте изображение на вашу веб-страницу

Для добавления изображения на вашу веб-страницу вам понадобится файл изображения. Для примера предположим, что у вас есть изображение с именем "logo.png" в папке с именем "images" в корневой директории. Чтобы добавить это изображение на вашу веб-страницу с использованием тега <img>, добавьте следующий код в раздел <body>:

<img src="images/logo.png" alt="Logo" />

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

Добавьте дополнительные атрибуты к вашему изображению

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

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

В этом коде атрибуты width и height контролируют размер изображения. Атрибут title предоставляет подсказку, когда пользователь наведет на изображение курсор мыши.

Используйте карту изображений

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

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

В этом коде атрибут usemap задает имя карты, которое определяется с использованием тега <map>. Каждый тег <area> определяет горячую точку, указывая ее форму (например, "rect" для прямоугольной), координаты и URL-адрес, на который она ведет.

Добавьте изображение в качестве фона

Вы также можете использовать изображение в качестве фона HTML-элемента, например, тела вашей веб-страницы. Вот пример:

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

В этом коде свойство background-image задает путь к файлу изображения, а свойство background-repeat задает его не повторяться. Свойство background-size масштабирует изображение так, чтобы оно заполняло весь фон.

Резюме

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

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