Первая HTML-страница: самостоятельная практическая работа

Индивидуальные задания

Для этой пары индивидуальные задания не опубликованы

Какой результат нужен сегодня

На первой паре веб-блока работайте самостоятельно. Результат покажете преподавателю на второй паре.

Сегодня собираем обычную страницу сверху вниз: заголовок, пояснение, описание и картинка. Ниже — схема общего учебного примера 00; у вас будут свои тексты и изображение.

Пример результата первой пары: текст и изображение расположены сверху вниз

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

Возьмите свои данные

Откройте свой вариант. Из таблицы «Содержание главной страницы» понадобятся:

Данные варианта	Элемент страницы
Название приложения	Вкладка `title` и главный заголовок `h1`
Короткое пояснение	Первый абзац `p`
Заголовок главной	Заголовок `h2`
Описание	Второй абзац `p`
Основное изображение	Изображение `img`

Ниже разобран учебный вариант 00 «Техника дома» этой пары. Во всех примерах заменяйте название, тексты, изображение и alt данными своего варианта; у вас остаётся папка VariantNN-web со своим номером. Проект App Inventor сохраните отдельно.

Учебный вариант 00

Вариант 00 хранится рядом со статьёй. Вариант 00 студентам не назначается; для своей работы используйте данные своего номера.

Подготовьте папку и редактор

В Проводнике создайте папку VariantNN-web в доступном месте для учебных работ. NN — ваш двухзначный номер, например 04.
Откройте папку в имеющемся редакторе кода, например VS Code: «Файл → Открыть папку». Создайте новый файл.
Если редактора кода нет, используйте Блокнот. Word не подходит.

Проверка: вы можете найти свою папку снова. Работайте в ней, не в папке App Inventor.

Вставьте каркас документа

Скопируйте в пустой файл весь каркас. В строке title замените название на своё:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Техника дома · V00</title>
</head>
<body>

</body>
</html>

Пока body пуст. В следующих шагах будем добавлять содержимое между <body> и </body>, не создавая второй каркас.

Сохраните именно HTML-файл

В VS Code: Ctrl+S → своя папка → имя index.html. Кодировка в строке состояния — UTF-8; при другой выберите «Сохранить с кодировкой → UTF-8».

В Блокноте: «Файл → Сохранить как» → своя папка → имя index.html → тип «Все файлы» → кодировка UTF-8 → «Сохранить».

Проверьте имя в Проводнике. Если расширение скрыто, покажите «Расширения имён файлов» через меню «Вид» (в Windows 11: «Вид → Показать»).

Проверка: имя — index.html, а не index.html.txt.

Откройте файл в браузере

В Проводнике: правая кнопка на index.html → «Открыть с помощью → Google Chrome». Редактор оставьте открытым.

Пока результат — пустая белая страница с вашим названием во вкладке. Это нормально.

Редактор: изменить → Ctrl+S
Chrome: обновить → Ctrl+R

Повторяйте эти два действия после каждого изменения. Файл на диске — ваш документ; браузер показывает прочитанный из него результат. Интернет для открытия не нужен.

Вкладка и страница — разные места

Название вкладки задаёт title, видимый заголовок страницы — h1

Часть каркаса	Назначение
`doctype`	Объявляет современный HTML
`html lang="ru"`	Весь документ; язык — русский
`head`	Служебные сведения о странице
`meta charset`	Кодировка; сохраните UTF-8 и в файле
`meta name="viewport"`	Начальное отображение на узком экране; оставьте строку целиком
`title`	Название вкладки
`body`	Видимое содержание

title уже заполнен. h1 сейчас добавим. Подписи и стрелки на схемах — пояснения, их создавать не нужно.

Как читать тег

<p>Выберите технику для повседневных дел</p>

<p> открывает абзац, </p> закрывает его. Между ними — текст, который вы заменяете своим. Вместе это элемент HTML.

<html lang="ru">

lang — атрибут, уточнение в открывающем теге. После = в прямых кавычках записано значение ru.

Вложенность закрывается изнутри наружу: содержимое body — перед </body>, затем закрывается html. Пробелы в начале строк помогают видеть вложенность.

Сделайте заголовок и пояснение

Крупный заголовок h1 и обычный абзац p под ним

На пустой строке между <body> и </body> добавьте:

<h1>Техника дома · V00</h1>
<p>Выберите технику для повседневных дел</p>

Замените: в h1 — название приложения, в p — короткое пояснение из своего листа.

h1 — главный заголовок, p — абзац. Сохраните файл и обновите Chrome.

Проверка: появились две части, как на схеме. Название нужно поменять и в title, и в h1: одно не меняет другое.

Добавьте заголовок содержания и описание

Заголовок второго уровня и абзац описания

После первого </p>, перед </body> добавьте:

<h2>Бытовая техника для дома</h2>
<p>Три прибора для кухни и дома. Сравните характеристики и выберите нужный товар.</p>

Замените: в h2 — «Заголовок главной», в новом p — «Описание» своего варианта. Короткое пояснение в первом абзаце сохраните.

h2 — заголовок следующего уровня после h1. Сохраните и обновите.

Проверка: сверху вниз видны название, пояснение, заголовок содержания и описание.

Скопируйте отдельную картинку

В строке «Основное изображение» своего варианта найдите имя файла. В общем примере 00 это fridge.svg; в вашей работе возьмите файл из своего листа.

В своей папке проекта создайте подпапку images.
Скопируйте туда нужное изображение из набора варианта: Ctrl+C → открыть свою images → Ctrl+V.
Если читаете лист на сайте, найдите отдельную иллюстрацию внизу листа: правая кнопка → «Сохранить изображение как» → своя images. Сохраните под именем из задания: например, скачанный 010-00-fridge.svg назовите fridge.svg. Расширение сохраняется.

Variant00-web/
  index.html
  images/
    fridge.svg

Копируем готовый файл. Рисовать его самостоятельно не требуется. Берите отдельную тематическую иллюстрацию, а не снимок всей страницы.

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

Выведите картинку через img

Готовое изображение на странице: элемент img с шириной 240

После абзаца с описанием, перед </body> добавьте:

<img src="images/fridge.svg" alt="Холодильник" width="240">

Часть	Что сделать
`src`	После `images/` указать точное имя своего файла
`alt`	Кратко описать содержимое изображения своими словами
`width="240"`	Оставить ширину 240; высота подстроится автоматически

У img нет закрывающего тега. Сохраните и обновите.

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

Почему нужна папка images

src="images/fridge.svg" означает: рядом с index.html открыть папку images, найти файл fridge.svg.

Это относительный путь. Используйте /, точное имя и расширение. Полный путь с диском компьютера не нужен.

HTML ссылается на картинку, но не помещает её внутрь себя. Сохраняйте и переносите всю папку проекта.

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

Сверьте итоговый код

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Техника дома · V00</title>
</head>
<body>
  <h1>Техника дома · V00</h1>
  <p>Выберите технику для повседневных дел</p>
  <h2>Бытовая техника для дома</h2>
  <p>Три прибора для кухни и дома. Сравните характеристики и выберите нужный товар.</p>
  <img src="images/fridge.svg" alt="Холодильник" width="240">
</body>
</html>

Результат первой пары соответствует первой схеме статьи: одна вертикальная страница без цветного оформления и сложной раскладки.

Если не получилось

Проблема	Первая проверка
В Chrome виден код	Имя файла точно `index.html`, без `.txt`; открыть через Chrome
Пустая или старая страница	Текст внутри `body`; `Ctrl+S` в редакторе, `Ctrl+R` в Chrome; одна и та же папка
Чужой заголовок	Заменены обе записи: `title` и `h1`
Непонятные русские буквы	Файл сохранён в UTF-8; в каркасе сохранён `meta charset`
Картинка не появилась	Файл есть в своей `images`; имя, расширение и путь совпадают с `src`

Если всё ещё не работает, запишите шаг и симптом. Исправляйте одну причину за раз, затем сохраняйте и проверяйте.

Что показать на второй паре

Папку проекта, HTML-файл и изображение в images.
Страницу своего варианта: четыре текстовые части и картинку.
В коде — head, body, title, h1, p, h2, img.
Одно изменение абзаца: изменить → сохранить → обновить.

Перед завершением закройте вкладку с результатом и снова откройте index.html из своей папки. Текст и картинка должны остаться. Незавершённые шаги отметьте явно.