Литвинов Владимир Николаевич, учитель информатики лицея № 136 город Новосибирск
информатика, 11 класс
Практическая работа «Интернет: создание Web-страницы на языке HTML»
- знакомство с элементами и структурой HTML документа;
- освоение приемов создания Web-страницы на языке HTML;
- научиться выполнять форматирование созданных Web-страниц;
- закрепить технологические навыки работы с компьютером;
Развивающая:
- способствовать развитию познавательного интереса у учащихся;
- способствовать развитию творческой активности учащихся;
- развивать наглядно-образное мышление, память и умение сравнивать и анализировать;
- способствовать культурному и интеллектуальному развитию учащихся;
- воспитание информационной культуры учащихся, внимательности, аккуратности.
• мультимедийный проектор;
• 11 компьютеров с доступом в Интернет;
• интерактивная доска;
• презентация "Язык разметки гипертекста HTML" [1]
• тест по теме: «HTML» [2]
• операционная система Windows ХР, программа Блокнот,
• Браузер Internet Explorer
• заготовки для выполнения творческого задания в группах
• задание [3]
• домашнее задание [4]; дискуссия в блоге [5]
Комбинированный, урок-проект.
Организационный этап
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Приветствует учеников, отмечает отсутствующих |
Приветствуют учителя, сообщают об отсутствующих |
|
Постановка целей урока
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Запуск презентации |
Знакомиться с целями и задачами урока |
Мотивация учащихся
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Вопросы и задания на блоге |
Совместное обсуждение вопросов и заданий |
Обобщение
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Запуск слайдов 2-5 |
Отвечают на вопросы учителя Один из учеников решает кроссворд |
Выполнение проекта
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Разделить учащихся на 3 группы (по 4-5 человек). Задания для каждой группы на блоге. |
Распределяют роли в группе и приступают к выполнению проекта |
Защита проектов
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Результаты работы первой и второй групп выводятся на интерактивную доску |
Участники групп представляют свои web-страницы. Оценивают их работу участники 3-ей группы, они решают, чья страница и ее представление получились лучше. |
Интерактивная доска |
Давайте подведём итоги урока. Что мы сегодня узнали? Обучающиеся отвечают на вопрос учителя. Если ответы не полные, то учитель резюмирует.
На этом мы не заканчиваем знакомство с Интернетом. Нас ждут новые знания и открытия
Домашнее задание
|
деятельность учителя |
деятельность ученика |
компьютерный инструмент |
|
Учитель предлагает ученикам домашнее задание. Отвечает на возникающие вопросы по заданию. |
Работают с блогом |
Источники информации
1. Учебник: Семакин И.Г. Информатика и ИТ. п..29 с.160-163
2. Практикум: Семакин И.Г. Информатика и ИТ. Раздел 3. Работа 3.7. с.70-79
3. HTML - Это просто. Уроки по созданию сайтов.
Приложения к уроку
Приложение 1
Краткий справочник по гипертекстовой разметке HTML
|
Название тэга |
Обозначение тэга |
|
Структура Web-страницы |
|
|
Начало и конец страницы |
<html> </html> |
|
Описание страницы, в том числе ее имя |
<head> </head> |
|
Имя страницы |
<title> </title> |
|
Тело страницы |
<body> </body> |
|
Форматирование текста |
|
|
Размер текста (уровни от 1 до 6) |
<H?> </H?> |
|
Текст с выравниванием влево |
<H? Align=”LEFT”> </H?> |
|
Текст с выравниванием по центру |
<H? Align=”CENTER”> </H?> |
|
Текст с выравниванием вправо |
<H? Align=”RIGHT”> </H?> |
|
Абзац |
<P> </P> |
|
Перевод строки |
<BR> |
|
Горизонтальная линия |
<HR> |
|
Адрес автора |
<ADRESS> </ADRESS> |
|
|
|
|
Форматирование шрифта |
|
|
Жирный |
<B> </B> |
|
Курсив |
<I> </I> |
|
Подчеркивание |
<U> </U> |
|
Верхний индекс |
<SUB> </SUB> |
|
Нижний индекс |
<SUP> </SUP> |
|
Размер шрифта (от 1 до 7) |
<FONT SIZE=?> </FONT> |
|
Цвет шрифта (указывается в кавычках: Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal Yellow) |
<FONT COLOR=”RED”> </FONT> |
|
Выбор шрифта |
<FONT FACE=”***”> </FONT> |
|
Вставка изображений |
|
|
Фоновое изображение |
<BODY BACKGROUND=”URL”> |
|
Вставка изображения |
<IMG SRC=”URL”> |
|
Вставка гиперссылки |
|
|
Ссылка на другую страницу |
<A HREF=”URL” указатель ссылки</A> |
|
Ссылка на закладку в том же документе |
<A HREF=”#*” указатель ссылки</A> |
|
Определение закладки |
<A NAME=”*” </A> |
|
Оформление таблиц |
|
|
Объявление таблицы |
<ТABLE> </ТABLE> |
|
Тег строки |
<TR> </TR> |
|
Тег данных |
<TD> </TD> |
Приложение 2
Пример задания для работы в малой группе
Создать Web-страницу «Мой город». Материалы
для создания страницы находятся в папке Проект-1.
1. Страница должна содержать:
× заголовок
× два или более отформатированных абзаца
× фотографии (минимум одна на странице)
2. Требования к Web-странице
× заголовок страницы выровнять по центру
× для абзацев текста использовать выравнивание по ширине
× обязателен фоновый цвет Web-страницы
× для заголовка использовать шрифт Arial, для основного текста – Verdana (размеры подобрать самостоятельно)
× оформить красную строку для каждого абзаца
× между абзацами вставить по одной пустой строке
× после заголовка вставить бегущую строку, в которой разместить текст о вашем отношении к городу, указать ваше имя, фамилию и класс.
× вставить на вашу страницу фоновый звук (музыку подобрать самостоятельно)
3. Протестировать работоспособность страницы в двух различных браузерах.
4. Протестировать работоспособность страницы при выключенной графике.
5. Изменить в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедится, что это не повлияло на внешний вид вашей Web-страницы.
Профессия: Учитель информатики
В каталоге 6 688 курсов по разным направлениям