Поделиться
Конспект урока по информатике для 8 класса Введение в HTML. Создание простейшей веб-страницы.pdf
Конспект урока по информатике для 8 класса
Тема: «Введение в HTML. Создание простейшей веб-страницы».
Цель урока: познакомить учащихся с понятием языка гипертекстовой разметки HTML; изучить структуру HTML-документа и основные теги для форматирования текста; научить создавать и просматривать простейшую вебстраницу.
Оборудование: компьютеры с установленным текстовым редактором (Блокнот, Notepad++) и любым веб-браузером, проектор, презентация, рабочие листы.
Ход урока
1. Организационный момент (2 мин).Приветствие, проверка готовности к уроку.
2. Актуализация знаний и мотивация (5 мин).
o Вопрос классу: как вы думаете, из чего состоят веб-сайты, которые вы видите в браузере? o Обсуждение: за красивыми картинками и кнопками стоит обычный текстовый файл с особым кодом.
o Вывод: HTML (HyperText Markup Language) — это язык разметки, который говорит браузеру, как отображать страницу.
3. Изучение нового материала (15 мин).
o Что такое тег? Тег — это команда для браузера, заключенная в угловые скобки < >.
o Структура HTML-документа:
1. <!DOCTYPE html>: сообщает браузеру, что это современный HTML-документ.
2. <html> ... </html>: главный контейнер всей страницы.
3. <head> ... </head>: «голова» документа. Здесь находится техническая информация (заголовок, кодировка).
4. <title> ... </title>: заголовок страницы (отображается на вкладке браузера).
5. `<body> ... </body>**: «тело» документа. Здесь находится всё, что мы видим на экране.
o Основные теги форматирования текста:
▪ <h1>, <h2>, ... <h6>: заголовки разных уровней (от самого крупного <h1> до самого мелкого <h6>).
▪ <p> ... </p>: абзац текста.
▪ <br>: перенос строки (одинарный тег).
▪ <hr>: горизонтальная линия-разделитель.
4. Практическая работа (20 мин).Учащиеся выполняют задания на рабочих листах: пишут код в текстовом редакторе, сохраняют файл с расширением .html и открывают его в браузере.
5. Подведение итогов (5 мин).
o Обсуждение: что произойдет, если забыть закрыть тег </p>?
o Ответы на вопросы: чем расширение .html отличается от .txt?
6. Домашнее задание (3 мин).Создать простую веб-страницу о себе или своем домашнем питомце, используя изученные теги.
Рабочий лист к уроку
Фамилия, имя: ______________________ Класс: 8 ___
Тема: Моя первая веб-страница
Задание 1. Теоретическая разминка.Заполните пропуски:
1. HTML расшифровывается как HyperText Markup Language.
2. Тег — это специальная команда для браузера, которая пишется в угловых скобках < >.
3. У большинства тегов есть открывающая часть (например, <p>) и закрывающая часть (например, </p>).
4. Весь видимый контент страницы находится внутри тегов <body> ... </body>.
Задание 2. Анализ кода.Посмотрите на фрагмент кода. Что будет выведено на экран? html
Копировать
<h1>Добро пожаловать!</h1>
<p>Это мой первый <br> сайт.</p>
<hr>
<p>Я учусь создавать <b>веб-страницы</b>.</p>
Ответ:На экране появится крупный заголовок «Добро пожаловать!», затем строка «Это мой первый», после чего текст перенесется на новую строку словом «сайт». Затем появится горизонтальная линия, и под ней будет абзац «Я учусь создавать веб-страницы». (Примечание: тег <b> не изучался, но браузер его поймет как "полужирный").
Задание 3. Практическая работа.
1. Откройте текстовый редактор (Блокнот).
2. Введите следующий код:
html
Копировать
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Я написал(а) свой первый HTML-код.</p>
</body>
</html>
3. Сохраните файл на Рабочий стол под именем index.html. Важно: в поле «Тип файла» выберите «Все файлы», чтобы не было лишнего расширения .txt.
4. Найдите сохраненный файл на Рабочем столе и дважды щелкните по нему. Что произошло?
Задание 4. Создание своей страницы.Дополните ваш файл index.html, чтобы он выглядел так:
html
Копировать
<!DOCTYPE html>
<html>
<head>
<title>Мои увлечения</title>
</head>
<body>
<h1>Мои увлечения</h1>
<h2>Спорт</h2>
<p>Я люблю играть в футбол и кататься на велосипеде.</p>
<h2>Книги</h2>
<p>Мои любимые жанры — фантастика и приключения.</p>
<hr>
<p><i>Конец страницы.</i></p>
</body>
</html>
Сохраните изменения и обновите страницу в браузере.
Задание 5. Найдите ошибку.Ученик сохранил свой HTML-файл как moy_sait.txt. Когда он открыл файл, он увидел свой код в виде обычного текста, а не веб-страницы.В чем ошибка ученика?
Ответ:Ошибка в том, что файл был сохранен с расширением .txt (текстовый документ), а не .html. Браузер не знает, что этот текстовый файл нужно обрабатывать как веб-страницу. Чтобы исправить ошибку, нужно пересохранить файл с правильным расширением: moy_sait.html.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
