Создайте свою первую HTML-страницу с изображением

Введение

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

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

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

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

Структура проекта уже была настроена для вас при настройке виртуальной машины (VM). Проверьте директорию my-first-webpage:

ls my-first-webpage

Эта структура позволяет вам разделять разные типы файлов:

images/ будет хранить ваши ресурсы изображений
css/ можно использовать для файлов стилей (хотя мы не будем использовать его в этом лабораторном занятии)

Давайте проверим структуру директорий:

tree

Пример вывода:

.
├── css
└── images

Отлично! Теперь вы настроили чистую и организованную структуру проекта, которая облегчит управление вашими файлами веб-разработки.

Загрузка и организация ресурса изображения

На этом этапе вы загрузите изображение для использования на своей первой HTML-странице. Мы будем использовать простое, свободно доступное изображение из интернета и сохранить его в директории images, которую вы создали ранее.

Сначала перейдите в директорию проекта:

cd ~/project/my-first-webpage

Давайте проверим, было ли изображение загружено правильно:

ls images

Пример вывода:

landscape.jpg

Если вы не видите файл изображения, вам, возможно, придется загрузить его, следуя командам ниже. Пропустите этот шаг, если вы видите файл изображения в директории images.

wget -O images/landscape.jpg "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"

Проверьте детали файла изображения:

file images/landscape.jpg

Пример вывода:

images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3

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

Создание базового HTML-документа

На этом этапе вы создадите базовый HTML-документ, который станет основой для вашей первой веб-страницы. HTML (HyperText Markup Language, язык гипертекстовой разметки) является стандартным языком разметки для создания веб-страниц.

Перейдите в директорию проекта:

cd ~/project/my-first-webpage

Откройте WebIDE и создайте новый файл с именем index.html:

touch index.html

Теперь давайте добавим базовую структуру HTML. Откройте файл index.html в WebIDE и введите следующий код:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>
  </body>
</html>

Давайте разберем основные компоненты этого HTML-документа:

<!DOCTYPE html> объявляет, что это документ HTML5
<html> является корневым элементом HTML-страницы
<head> содержит метаданные о документе
<body> содержит видимое содержимое страницы
<h1> - это основной заголовок
<p> - это параграф

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

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

Откройте файл index.html в WebIDE и измените его содержимое, чтобы включить изображение:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>

    <h2>Beautiful Landscape</h2>
    <img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
  </body>
</html>

Давайте разберем атрибуты тега изображения:

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

Предварительный просмотр и понимание отображения изображения

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

Для предварительного просмотра вашей веб-страницы найдите кнопку "Go Live" в WebIDE.

Нажмите на папку my-first-webpage на странице, и автоматически откроется файл index.html в режиме предварительного просмотра.

Предварительный просмотр HTML-страницы в WebIDE

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

Живой предварительный просмотр HTML-страницы

Давайте рассмотрим некоторые ключевые концепции отображения изображений в HTML:

Путь к изображению

Атрибут src указывает относительный путь к вашему изображению:

<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />

Относительные пути основаны на расположении HTML-файла
Всегда используйте косые черты (/) в путях к веб-файлам

Атрибуты изображения

width: Управляет размером отображения изображения (в пикселях)
alt: Предоставляет текстовое описание для обеспечения доступности
Вы также можете использовать height для установки размеров изображения

Адаптивные изображения

Для создания адаптивных изображений вы можете использовать CSS или настроить атрибуты HTML:

<img
  src="images/landscape.jpg"
  alt="Scenic Landscape"
  style="max-width: 100%; height: auto;"
/>

Атрибут style используется для установки размера отображения изображения. Это свойство CSS, которое позволяет вам контролировать ширину и высоту изображения.

max-width: 100%; гарантирует, что изображение не превышает ширину контейнера
height: auto; сохраняет пропорции изображения

Не беспокойтесь о CSS сейчас, мы рассмотрим его в последующих лабораторных работах.

Проверьте, что ваше изображение корректно отображается в предварительном просмотре WebIDE. Вы должны увидеть:

Пейзажное изображение
Ширину 500 пикселей
Ясный, читаемый альтернативный текст

Резюме

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

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