ПЛАН-КОНСПЕКТ УРОКА № 1.

«Разработка web-сайтов с использованием языка разметки гипертекста HTML»
(На изучение этой темы в учебном плане отводится четыре учебных часа (три теоретических урока и один урок — практическая работа). План-конспект является первым из трёх теоретических уроков по данной теме)

ФИО

Демидова Л.А.

Место работы

МБУ школа № 40

Должность

учитель информатики

Предмет

информатика

Класс

8

Тема урока

Разработка web-сайтов с использованием языка разметки гипертекста HTML.

7. Цель урока:  формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

8. Задачи

Обучающие:

• сформировать систему знаний по технологии создания Web-сайтов;

• обучить языку разметки гипертекста HTML для создания сайтов;

• познакомить с этапами проектной деятельности.

Развивающие:

• развить творческие способности к самовыражению, посредством создания сайтов;

• сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в

новую предметную область Web-технологий;

• развить навыки работы на компьютере

Воспитательные:

развивать:

• добросовестное отношение к работе;

• чувства товарищества и личной ответственности за созданный сайт;

• художественный и эстетический вкус;

• воспитывать грамотного и корректного пользователя сети Интернет.

9. Тип урока: ознакомление учащихся с новым материалом.

10. Формы работы учащихся: фронтальная работа, индивидуальная работа, ИКТ.

11. Необходимое техническое оборудование: доска, ПК по числу групп, тетради, канцелярские принадлежности.

12. Программное обеспечение: стандартное приложение Windows Блокнот, Интернет-браузер.

Ход урока.

I. Организационный момент.

II. Актуализация опорных знаний учащихся

Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме.

III. Изучение нового материала

Общие сведения о Web-сайтах и языке HTML:

Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют браузеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

Структура HTML-документа

Секция заголовка

Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

Тело документа

Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

Форматирование символов

Символы, заключенные между следующими тегами отображают:

…. - полужирный шрифт

…… - курсивный шрифт

…… - подчеркнутый шрифт

_… - нижний индекс

^… - верхний индекс

Параметры шрифта

Текст, заключенный между тегами  …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить   - символьный примитив.

Одиночный тег 
 разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

IV. Закрепление нового материала

Практические задания:

1. Работа у доски (формирование HTML-документа). Индивидуальная работа учащегося при поддержке класса.

2. Создание первого HTML-документа. Освоение технологии работы. Индивидуальная и парная работа учащихся на ПК.

V. Подведение итогов

- сегодня мы с вами научились создавать простейшую web-страницу;

• полученные сегодня знания пригодятся нам при создании своего сайта.

6. Домашнее задание

п. 3.7

Записать предложенные учителем темы сайтов и начать подбирать материал.

Литература для учителя

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2009 г.

2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2008г.

3. Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г.

4. Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г.

Литература для ученика

1. Н.Д. Угринович Информатиа и ИКТ: учебник для 8 класса, М: Бином. Лаборатория знаний, 2010г.

2. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2009 г.

3. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2008г.

Интернет ресурсы

1. Блог учителя информатики Демидовой Л.А. demidova68.blogspot.ru

2. Создание сайта с нуля http://ab-w.net

3. Курс видео уроков по HTML для начинающих http://projs.org/tutorials/free-course-html