Простая веб-страница. Текст, изображения и гиперссылки HTML

Создать в своей копии HTML-шаблона локальную веб-страницу с осмысленным текстом, изображением и гиперссылкой; сохранить файл и проверить собственный результат в браузере.

Только вымышленный книжный обмен, без настоящих имён, адресов, фотографий и регистрации. Используются подготовленные шаблон и собственное учебное SVG; внешний код и изображения не скачивают. Работа локальная, публикация в Интернете не требуется. Без техники бумажный прогноз не подтверждает создание своей страницы; цифровое действие завершают на ближайшей компьютерной практике.

Для основной цифровой практики нужна заранее подготовленная школьная среда из инструкции учителя. Прогноз и итог записывай на бумаге; при отсутствии техники цифровое действие проверяют на ближайшей компьютерной практике. Сохраняй первую попытку; исправления отмечай другим знаком.

Безопасное начало

Сухие руки, без напитков у техники. Провода и разъёмы не трогай, о неисправности сообщи учителю. Работай по правилам кабинета. Две полные минуты в середине урока — без экрана и заданий. Внешний ИИ, личные аккаунты и личные данные не требуются.

Что уже нужно знать

Файлы и расширения из7класса, адрес и путь из001, сервис и копия из005. Учитель заранее распаковывает комплект006-html-kit.zip в отдельные папки каждого ученика, открывает простой текстовый редактор с UTF-8 и браузер. Интернет после подготовки не нужен.

S0. HTML в нашем шаблоне задаёт заголовок, абзац, изображение и ссылку. Это разметка содержимого или программа вычисления суммы чисел? Назови её задачу.

Устная проба без отметки.

Элемент, атрибут и файл

HTML — язык разметки. В готовом шаблоне head содержит служебные сведения; title задаёт название вкладки, body — содержимое страницы. h1 обозначает основной заголовок, p — абзац. В <a href="about.html">О проекте</a> href — цель, а «О проекте» — подпись. В <img src="badge.svg" alt="Синяя раскрытая книга"> src — путь, alt — содержательное описание. img — пустой элемент, без </img>. Для остальных изученных парных элементов открытие и закрытие согласованы. Наши относительные пути ведут к файлам в одной папке; имена и расширения должны совпасть. Шаблон сохраняют простым текстом UTF-8 с расширением.html. После правки сначала сохраняют файл, затем обновляют нужную страницу и проверяют текст, изображение и переход. Локальное открытие не означает публикацию. Не нужно записывать всю заготовку с нуля. В нашей локальной странице rules.html — относительный путь к соседнему файлу, а https://example.org/ — полный адрес внешнего ресурса. example.org зарезервирован для примеров: эту внешнюю ссылку разбираем на бумаге и не открываем. Сравнивают адрес ресурса с адресом текущей страницы; полный адрес сам по себе не означает, что ресурс безопасен. Источник учебного SVG — MediaSchool, комплект урока6; это авторская подпись, а src — технический путь.

Точные имена файлов даны условием каждого случая. Схематические изображения презентации не являются входными файлами. Для B1 используется отдельная готовая папка с badge.svg, а не картинка со слайда.

Концептуальная иллюстрация. Точные данные определены условиями, таблицами и схемами; предметы на рисунке не являются входными данными.

Личная проба

C1. В head записано <title>Архив</title>, в body — <h1>Афиша</h1><p>Встреча клуба</p>. Какое название ожидается на вкладке браузера, какой основной заголовок — на странице? Изменится ли h1 от одной правки текста внутри title?

Две минуты лично, затем две на разбор. Памятка разрешена.

Путь и видимая подпись

Образец: <img src="club.svg" alt="Знак вымышленного клуба"> загружает club.svg. <a href="schedule.html">Расписание</a> ведёт к schedule.html; изменение одной подписи не выбирает другой файл. src/alt/href — имена атрибутов, значения находятся в кавычках.

A1. Рассматриваем локальную страницу. Дан фрагмент:

<img src="map.svg" alt="Схема вымышленного зала">
<a href="rules.html">Правила</a>
<a href="https://example.org/">Внешний пример</a>

Назови файл изображения, цель и подпись первой ссылки. Какая из двух ссылок относительная к соседнему файлу, какая ведёт к внешнему ресурсу из этой локальной страницы? Заменит ли изменение alt путь к изображению? Внешний адрес учебный, открывать его не нужно.

Сначала своя запись и основание, затем сверка.

Полная пауза

Две минуты без проекции, чтения, вычислений и обсуждения. Отведи взгляд и смени позу.

Сохранить, затем проверить

Образец: рядом лежат home.html и card.svg. Если src="card.png", сначала сверяют имя и расширение, затем меняют src на card.svg, сохраняют home.html и обновляют именно его. Новая подпись ссылки не исправит неправильный href. Вид прежнего абзаца — повод проверить сохранение и путь, а не заранее обвинить браузер.

A2. В одной папке лежат page.html, emblem.svg и rules.html. В page.html написано:

<img src="emblem.png" alt="Учебный знак">
<a href="rule.html">Правила</a>

Исправь два пути по списку файлов, не переименовывая файлы. Объясни каждую правку.

Три минуты лично, затем две на сверку двух путей.

Концептуальная иллюстрация. Точные данные определены условиями, таблицами и схемами; предметы на рисунке не являются входными данными.

Свой HTML и наблюдаемый результат

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

B1. В своей распакованной папке открой index.html простым текстовым редактором.1)Замени h1 на «Орбитальная библиотека».2)Первый текстовый абзац «Здесь будет цель проекта.» — на своё предложение из4–8слов о вымышленном обмене книгами.3)В alt точно опиши синюю раскрытую книгу; src оставь badge.svg.4)Подпись ссылки замени на «О проекте», href оставь about.html. 5)После изображения добавь абзац <p>Изображение: MediaSchool, учебный SVG из комплекта урока 6.</p> — укажи источник. Сохрани UTF-8 именно index.html, не index.html.txt. Обнови страницу в браузере, проверь свой заголовок/абзац и изображение. Перейди по «О проекте», проверь заголовок цели и вернись по её ссылке. Лично запиши папку/имя, свою фразу и результаты трёх проверок. У каждого своя копия и работа за клавиатурой; партнёр не выполняет действия вместо тебя. При сбое запиши фактическое наблюдение, позови учителя; успех не выдумывай.

Заготовка для своей записи:

Десять минут:1инструкция,4первый,4второй,1личная итоговая сверка. При30ПК самостоятельная работа параллельно; условия и папки готовы заранее.

Проверка вымышленного ответа ИИ

AI1. Вымышленный ИИ утверждает: «Чтобы изменить цель ссылки, достаточно поменять только надпись “Правила”. Сохранённый Word-документ DOCX можно назвать HTML-страницей, потому что текст похож». Найди две ошибки и назови правильные действия.

Это заранее составленный учебный пример. Самостоятельно проверь конкретный шаг; обращение к сервису не требуется.

Помощь и резерв

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

D1. Резерв. Страница открывается с диска в браузере ученика. Доказывает ли это, что любой человек в Интернете уже может открыть её? Какой результат мы на этом уроке подтвердили?

D1 — необязательный резерв на 3–4 минуты после основных попыток. При нехватке времени перенести. H1 и весь тест автоматически вместе не назначаются.

Индивидуальный итог

Четыре полные минуты лично. Условия заранее на бумаге. Памятка и разобранные модели разрешены; ключи и веб-разбор закрыты. Учитель не даёт учебных подсказок. Сбор после четырёх минут.

E1. Какой атрибут img задаёт путь к файлу изображения: src или alt? Для чего служит второй?

E2. Из локальной страницы даны два href: info.html и https://example.org/. Первый файл лежит рядом. Какая ссылка относительная, какая указывает внешний ресурс в этом контексте? Изменит ли цель одна смена видимой подписи ссылки? Адрес example.org учебный, его не открываем.

E3. Ты изменил HTML в текстовом редакторе, но браузер всё ещё показывает прежний абзац. Назови два первых шага проверки, не объявляя заранее причину.

Разбор после своей попытки

Показать ответ после выполнения

После исправления выбери один новый пример из самопроверки.

Файлы для собственной практики

• HTML-шаблон — файлы для собственной работы
• Посмотреть исходный HTML-шаблон

Для собственной правки распакуй весь ZIP в личную папку, сохрани соседство файлов. Просмотр шаблона по ссылке показывает исходное состояние и не заменяет редактирование/сохранение своей копии. Полная инструкция в README; готового ученического решения в ZIP нет.

Материалы и самопроверка

Презентация, самостоятельный план учителя, рабочий лист, выходной билет и бумажная самопроверка открываются отдельными карточками. DOCX можно смотреть на сайте и скачать. PDF для печати:

• Рабочий лист
• Выходной билет — два на А4
• Самопроверка на бумаге

Самопроверка на сайте: шесть вопросов с пояснениями, отдельно 6–8 минут. Бумажная версия с письменными основаниями и разбором — 8–12 минут. Все шесть новых письменных случаев — ещё 8–10 минут; выбирай прежде всего случай к своей ошибке. Эти модули не прибавляют к основным 45 минутам и не задаются целиком вместе с H1 автоматически. Пояснения и новые случаи для бумажного разбора есть в плане учителя.

Домашний перенос

H1. Дома5–7минут на бумаге. В одной папке лежат index.html, plan.svg и guide.html. Напиши два фрагмента: изображение plan.svg с содержательным alt для схемы вымышленного зала; ссылка на guide.html с подписью «Справка». Подчеркни значения путей и объясни, что проверишь в браузере. Входы и домашний компьютер не требуются.

Полное условие и памятка есть на листе. Решение запиши в тетради. Достаточно 5–7 минут с сохранённой опорой.

Источники

ФРП информатики7–9классов, базовый уровень: содержание9класса на печатныхс.10–12, результатыс.19–20, раздел1 «Цифровая грамотность», тема1.1 «Глобальная сеть Интернет и стратегии безопасного поведения в ней», с.38–39. На с.38–39 предусмотрено создание комплексного объекта в виде веб-страницы с графикой с помощью конструктора/шаблона. HTML — авторская конкретизация готового шаблона в часе006 общего шестичасового блока; отдельный курс CSS/JavaScript не вводится. Учебник школы не указан; номера параграфов не назначены.

• Федеральная рабочая программа информатики 7–9 классов, базовый уровень
• Информационно-методическое письмо по информатике на 2026/2027 год
• MDN — основы HTML и структура документа
• MDN — элемент изображения img
• MDN — гиперссылка a и атрибут href
• IANA — домены для примеров