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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70777{{"Встраивание изображений в HTML"}} html/head_elems -.-> lab-70777{{"Встраивание изображений в HTML"}} html/charset -.-> lab-70777{{"Встраивание изображений в HTML"}} html/layout -.-> lab-70777{{"Встраивание изображений в HTML"}} html/doc_flow -.-> lab-70777{{"Встраивание изображений в HTML"}} html/multimedia -.-> lab-70777{{"Встраивание изображений в HTML"}} html/img_maps -.-> lab-70777{{"Встраивание изображений в HTML"}} html/inter_elems -.-> lab-70777{{"Встраивание изображений в HTML"}} html/custom_attr -.-> lab-70777{{"Встраивание изображений в HTML"}} end

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

Первым шагом является создание новой директории с именем "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 - это изображение, на котором определены кликабельные области, или «горячие точки», которые ведут на разные назначения. Чтобы создать 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 и использовать изображение в качестве фона.