Конспект урока "HTML. Тэги, форматирование текста" 11 класс


урок по информатике 11 класс
Тема:«HTML. Тэги, форматирование текста»
Цели: Применение знаний основных принципов построения web-сайта и основ HTML.
Задачи:
Развивающие: способствовать развитию познавательного интереса, творческой
активности обучающихся.
Образовательные: научить использовать коды при создании веб- страниц.
Воспитательные: воспитать уважение к сопернику, умения работать в команде.
Оборудование: презентация, мультимедийный проектор, раздаточный материал.
Форма проведения: Игра - соревнование двух команд.
Структура урока:
Организационная часть.
Актуализация знаний.
Новая тема.
Закрепление материала.
Итог урока. Дом.задание.
Ход урока: Орг.момент (приветствие, проверка отсутствующих и готовность к уроку,
объявление темы и цели урока). Сегодня у нас две команды: "Компьютерные гении и
Процессоры".
Актуализация знаний. Ребята, давайте ответим на несколько вопросов:
Переведите на английский язык слово «вычислять» (КОМПЬЮТЕР)
«Мозг» компьютера (ПРОЦЕССОР)
Какая связь между городом в Англии, ружьем калибра 30х30 и одним из элементов
компьютера? (все они связаны словом «Винчестер»)
Взломщик компьютерных программ (ХАКЕР)
Всемирная глобальная сеть (ИНТЕРНЕТ)
Word это текстовый редактор или текстовый процессор (ТЕКСТОВЫЙ
ПРОЦЕССОР)
Какие текстовые редакторы вы знаете?(блокнот,word pad-это стандартные редакторы,) и
нам этого будет достаточно для построения своей веб- странички. На прошлом уроке мы
создавали страницы, но на бумаге, т.е каждый из вас создавал свою личную веб-страницу.
На этом уроке познакомимся с кодами и несколькими тегами для построения страниц. Для
этого нам понадобится браузер и блокнот- вот всё, что вам необходимо для работы .Раз вы
просматриваете эту страничку – значит браузер у вас уже есть , ну а блокнот я думаю
найти не составит труда ( Пуск – Программы - Стандартные - Блокнот).
Объяснение темы: Презентация.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен
начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно
выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
В данном случае мы говорим браузеру, что HTML соответствует международной
спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы
должны знать, что она необходима. Ведь именно она помогает сделать сайт, который
будет одинаково смотреться во всех браузерах(обычно это три основных Internet
Explorer,Opera, Firefox) .
Далее обозначается начало и конец документа тегами <html> и </html> соответственно.
Внутри этих тегов должны находиться теги головы (<head></head>) и тела
документа(<body></body>) .
Обычно основой головы документа является элемент TITLE - заголовок документа. Также
там содержится вся техническая информация, различные таблицы стилей и.т.п. А
основное содержимое: текст,таблицы,картинки, - находится в теле документа.
На этой смешной картинке я попытался схематически изобразить структуру:
Как вы видите голова находится над телом, поэтому никогда не размещайте голову
документа в теле документа (или наоборот) . Сначала закрываем голову документа
</HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно
тело, и не стоит пытаться создавать их большее количество.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Сайт о себе </title>
</head>
<!-- начнем работать с телом документа -->
<body>
<!--вставляем таблицу с перечнем данных-->
. . .
</body>
<!--закончили с телом документа-->
</html>
Учитель объясняя записывает на доске коды хтмл для учеников.
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет всем!
<br>
</body>
</html>
Откройте программу Блокнот: Пуск => Программы => Стандартные => Блокнот
Напечатайте сами следующий код:
Тег оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так
далее. Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются
знаком ">".Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что