Добавить материал

и получить 10 документов
и свидетельство автора

Мекшун Светлана Анатольевна

Задание по созданию веб-страницы с простыми тегами html

docx
31.03.2026

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Добавить материал

Задание по созданию веб- страницы с классической музыкой.docx

Задание по информатике: создаём простую веб‑страницу (для коррекционной школы)

Тема: «10 известных классических музыкальных произведений»

Picture background

Цель: научиться создавать простую веб‑страницу с помощью HTML‑тегов.

Что понадобится:

компьютер с любым текстовым редактором (Блокнот / Notepad++);
файл с картинкой оркестра в папке Изображения под именем orchestra.jpg).

Пошаговая инструкция

Шаг 1. Откройте текстовый редактор

1. Нажмите кнопку «Пуск».

2. Найдите и откройте программу «Блокнот» (Notepad++).

Шаг 2. Напишите код страницы
Аккуратно наберите следующий код. Внимательно следите за знаками и словами — они должны быть точь‑в‑точь как в примере.

<html>

<head>

<title>Мои любимые классические произведения</title>

</head>

<h1 align="center">10 известных классических произведений</h1>

<p>Вот список знаменитых музыкальных произведений, которые знают во всём мире:</p>

<ul>

<li>Людвиг ван Бетховен — «Симфония № 5»</li>

<li>Иоганн Себастьян Бах — «Бранденбургские концерты»</li>

<li>Вольфганг Амадей Моцарт — «Реквием»</li>

<li>Пётр Ильич Чайковский — «Лебединое озеро»</li>

<li>Антонио Вивальди — «Времена года»</li>

<li>Фредерик Шопен — «Вальс № 2»</li>

<li>Джордж Гершвин — «Рапсодия в стиле блюз»</li>

<li>Клод Дебюсси — «Лунный свет»</li>

<li>Сергей Рахманинов — «Концерт № 2 для фортепиано»</li>

<li>Эдвард Григ — «Пер Гюнт»</li>

</ul>

</body>

</html>

Важные пояснения к коду:

<html> и </html> — начало и конец страницы.
<head> и </head> — блок с «заголовком» страницы (то, что видно в названии вкладки браузера).
<title> и </title> — название страницы.
<body> и </body> — основная часть страницы, где находится весь видимый контент.
bgcolor="#F5F5DC" — цвет фона страницы (бежевый).
text="#8B4513" — цвет текста (коричневый).
background="orchestra.jpg" — картинка на фоне (должна лежать на рабочем столе).
<h1> и </h1> — большой заголовок, выровненный по центру (align="center").
<p> и </p> — абзац текста.
<ul> и </ul> — начало и конец маркированного списка.
<li> и </li> — каждый пункт списка.

Шаг 3. Сохраните файл

1. В «Блокноте» выберите «Файл» → «Сохранить как…».

2. В поле «Имя файла» напишите: music.html.

3. В поле «Тип файла» выберите соответствующее расширение.

4. Сохраните файл в свою папку.

5. Нажмите «Сохранить».

Шаг 4. Откройте страницу в браузере

1. Перейдите на Рабочий стол.

2. Найдите файл music.html и дважды щёлкните по нему мышкой.

3. Страница откроется в браузере. Вы увидите:

бежевый фон;
коричневый текст;
картинку оркестра на фоне;
заголовок по центру;
список из 10 произведений.

Проверка результата

Сверьтесь с чек‑листом — всё ли получилось:

✅ Заголовок «10 известных классических произведений» виден и находится по центру.
✅ Под заголовком есть текст: «Вот список знаменитых музыкальных произведений, которые знают во всём мире:».
✅ Ниже — маркированный список из 10 пунктов.
✅ Текст коричневого цвета.
✅ Фон страницы бежевый.
✅ На фоне видна картинка оркестра.

Если что‑то не получилось, попросите помощи у учителя. Он поможет найти ошибку и исправить её.

Дополнительное задание (по желанию)

Добавьте в список ещё 2–3 классических произведения на ваш вкус. Для этого:

1. Откройте файл music.html в «Блокноте».

2. Между тегами <ul> и </ul> добавьте новые строки вида:

<li>Композитор — Название произведения</li>

3. Сохраните файл (Файл → Сохранить).

4. Обновите страницу в браузере (клавиша F5).

Критерии оценки:

работа выполнена полностью и без ошибок — «5»;
есть 1–2 небольшие ошибки, но общий вид страницы сохранён — «4»;
работа начата, но не доведена до конца — «3»;
задание не выполнено — «2».

Задание по информатике: создаём простую веб‑страницу (для коррекционной школы)

F5F5DC" text="#8B4513" background="orchestra

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

Посмотрите также