Основы HTML. Разработка WEB – сайта.

st2-7st2-7

---

---

 5[1]ãë4[1]€9&[1]ˆ3[1]€‡3[1]@UéHcþ€cþ

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

Основы HTML. Разработка WEB – сайта.

1.      ФИО: Красильникова Светлана Фёдоровна.

2.      Место работы:  МОУ Личадеевская СОШ, Ардатовского района, Нижегородской области

3.      Должность: Учитель информатики и ИКТ

4.      Предмет: Информатика и ИКТ

5.      Класс: 8 класс

6.      Тема и номер урока в теме:  Основы HTML. Разработка WEB – сайта. №8.

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

8.      Цель и задачи урока:

Цель:  разработать эскиз и приступить к созданию титульной страницы сайта.

Научиться:

o        создавать HTML-файлы;

o        оформлять заголовки;

o        управлять размером, гарнитурой и цветом шрифта;

o        выделять и выравнивать абзацы;

o        размещать графику на web-странице.

Задачи:

обучающая– закрепление теоретических знаний, формирование практических умений по созданию сайта

развивающая – развитие приемов умственной деятельности (анализ, синтез, сравнение, обобщение), памяти, логического мышления.

воспитательная – развитие познавательного интереса учащихся, основ коммуникационного общения, уверенности в собственных силах;

9.                 Тип урока: Комбинированный (Урок – введение нового материала с использованием ЭОР НП и самостоятельной деятельности учащихся).

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

11.             Необходимое техническое оборудование:

1.                 компьютер,

2.                 мультимедийный проектор,

3.                 экран.

12.             Структура и ход  урока

Таблица 1.

СТРУКТУРА И ХОД УРОКА

№	Этап урока	Название используемых ЭОР (с указанием  порядкового номера из Таблицы 2)	Деятельность учителя (с указанием действий с ЭОР, например, демонстрация)	Деятельность ученика	Время (в мин.)
1	2	3	5	6	7
1	Организационный момент урока.		Приветствие, проверка отсутствующих.	Учащиеся приветствуют учителя, дежурные говорят  отсутствующих.	2 мин
2	Актуализация знаний. Постановка сообщение темы и целей урока.	Ресурсы №1, №2 (Презентация)	На прошлом уроке мы приступили к знакомству с языком разметки гипертекстовых документов HTML, ввели понятия: “тег”, “атрибуты тега”, рассмотрели структуру HTML-файла и главные теги: “HTML”, “HEAD”, “TITLE”, “BODY” (учитель обращает внимание учащихся на таблицу “Структура HTML-документа”). Мы разработали проект нашего учебного сайта “Компьютер”. Решили, что наш сайт будет содержать 4 страницы.	Учащиеся слушают,  записывают тему урока и слушают цели урока.	3 мин
			Вопросы учителя к учащимся: Перечислите, пожалуйста, названия страниц нашего сайта. Поясните их содержание.	Учащиеся  перечисляют названия страниц сайта  и поясняют их содержание.
			Сегодня на уроке мы приступим к созданию первой страницы учебного сайта “Компьютер”.
3	Разработка  титульной страницы с помощью языка разметки гипертекста.		Смотрим на эскиз титульной страницы сайта “Компьютер” В результате обсуждения с учащимся  решили, что титульная страница обязательно должна содержать “заголовок”, “поясняющий текст”, “иллюстрацию”. (Учитель показывает на демонстрационном компьютере предполагаемый внешний вид титульной страницы.)	Учащиеся смотрят на эскиз титульной страницы сайта «Компьютер».	2 мин
4	Изучение нового материала.	Презентация к уроку, разработанная учителем №5	Внешний вид страницы задается с помощью управляющих символов языка HTML – тегов. Рассмотрим теги, которые позволят нам реализовать задуманный проект титульной страницы. Учитель объясняет и демонстрирует работу тэгов	Учащиеся смотрят как работает тэг и записывают в тетради формат каждого тэга.	10 мин
			Заголовки: HTML поддерживает 6 уровней внутренних заголовков. <H1>…</H1> самый крупный <H2>…</H2> <H3>…</H3> <H4>…</H4> <H5>…</H5> <H6>…</H6> самый мелкий Атрибуты: align="значение" (определяет способ выравнивания заголовка по горизонтали). Значения: center (по центру), right (по правому краю), left (по левому краю). Таким образом наш заголовок будет, <H1 align="center"> Компьютер</H1> (заголовок первого уровня, выравнивание по центру).	Учащиеся набирают тэг в блокноте и смотрят, что получится в браузере.
			Форматирование текста 1) Выделение текста: <B>…</B> - выделение полужирным <I>…</I> - выделение курсивом <U>…</U> - выделение подчёркиванием Например: <B>МОУ Личадеевская СОШ, Ардатовского района, Нижегородской области</B> 2) Стиль шрифта (гарнитура, размер, цвет): <FONT>…</FONT> Тег <FONT> должен иметь хотя бы один из трёх возможных атрибутов: Размер шрифта size="значение" (значения целые числа от 1 до 7) Цвет шрифта color="значение" Значение – название цвета или его 16-й код, например <FONT color="red"> привет</FONT> <FONT color=#cc0000> привет</FONT> Гарнитура (вид шрифта) FACE="значение", например <FONT FACE="Arial"> привет</FONT> Пример <FONT size="7" color="red" face="Arial"> привет</FONT> (слово привет имеет размер 7, красного цвета, вид шрифта Arial).
			Тег абзаца: <P>…</P> Атрибут: align="значение" left (по левому краю), right (по правому краю), center (по центру), justify (по ширине). Перевод строки: <BR> Вставка графического изображения http://images.yandex.ru/yandsearch?ed=1&text=%D1%81%D0%B0%D0%B9%D1%82%20%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80&p=1&img_url=zarmarka.narod.ru%2Fdoes%2Fbaynew.jpg&rpt=simage В web-страницах могут использоваться три графических формата - GIF, JPG, RNG. Ваш рисунок должен быть размещён в папке сайта, лучше все рисунки размещать в отдельной папке, например, images.
			Тег вставки изображения: <IMG src="имя графического файла"> Например: <IMG src="images\comp.gif" alt="Компьютер" align="right"> Изображение переносится с сохранением размера. Атрибуты: alt="текст" выводит поясняющий текст в случае, если рисунок не может быть отображен браузером. align="значение" расположение рисунка относительно текста. Значения: top (вверх), middle (середина), bottom (низ), left (слева), right (справа). height и width – определяют высоту и ширину изображения соответственно. Если указанные размеры не совпадают с реальным размером изображения, то изображение масштабируется (порой с заметной потерей качества).
5	Практическая работа		Выполнение практической работы в программе Блокнот. Во время практической работы учитель консультирует учащихся.	Учащиеся выполняют практическую работу в программе Блокнот и просматривают результат в браузере.	12 мин
6	Физкультминутка	Презентация №6	Учитель предлагает учащимся  выполнить физкультминутку. Приложение	Учащиеся делают вместе с учителем физкультминутку.	3 мин
7	Самостоятельная работа	Ресурс №3 (Тест)	Закрепление знаний учащихся.	Учащиеся выполняют тест.	5 мин
8	Итог урока		Фронтальная беседа: что сегодня узнали на уроке, чему научились?	Учащиеся отвечают на вопросы учителя.	3 мин
9	Постановка задач на следующий урок		На следующем уроке мы продолжим работу по оформлению титульной страницы: "Компьютер". Мы научимся задавать цвет фона, вставлять фоновое изображение, создавать простые таблицы.	Учащиеся слушают.	2 мин
10	Домашнее задание	Ресурс №4 (Тест)	Учитель диктует домашнее задание.	Учащиеся записывают домашнее задание в дневники.	2 мин
11	Выставление оценок.		Учитель выставляет оценки в дневники детей.	Учащиеся подают дневники на оценку.	1 мин

Приложение к плану-конспекту урока

Тема урока: Основы HTML. Разработка WEB – сайта.

                                                                                                                                   Таблица 2.

ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ НА ДАННОМ УРОКЕ ЭОР

№	Название ресурса	Тип, вид ресурса	Форма предъявления информации (иллюстрация, презентация, видеофрагменты, тест, модель и т.д.)	Гиперссылка на ресурс, обеспечивающий доступ к ЭОР
1	Шаги разработки WEB-сайта. Использование редакторов для создания сайта.	Учебный модуль. Шаги разработки WEB-сайта. Использование редакторов для создания сайта (И)	Презентация (Этапы создания сайта)	http://fcior.edu.ru/card/12113/shagi-razrabotki-web-sayta-ispolzovanie-redaktorov-dlya-sozdaniya-sayta-i.html http://www.baxtop.ru/sozdanie-saita-s-pomoshhyu-html.htm
2	Основные определения и понятия языка HTML. Структура и логика языка разметки HTML. Понятие тега тег, язык HTML, язык гипертекстовой разметки	Информационный модуль предназначен для получения знаний по основным определениям и понятиям языка HTML, структуре и логике языка разметки HTML, понятию тега	Презентация	http://fcior.edu.ru/card/27618/osnovnye-opredeleniya-i-ponyatiya-yazyka-html-struktura-i-logika-yazyka-razmetki-html-ponyatie-tega.html
3	язык HTML, язык гипертекстовой разметки	Практическая работа	Тест	http://fcior.edu.ru/card/27471/osnovnye-opredeleniya-i-ponyatiya-yazyka-html-struktura-i-logika-yazyka-razmetki-html.html
4	Основные определения и понятия языка	Самостоятельная работа Контроль знаний по основным понятиям и определениям языка HTML.	Тест	http://fcior.edu.ru/card/16858/osnovnye-opredeleniya-i-ponyatiya-yazyka-html.html
5	Презентация по теме: «Создание Web - страницы средствами языка HTML»		Презентация
6	Презентация «Физкультминутка»		Презентация

• 1 слайд

  Создание Web - страницы средствами языка HTML
  (HyperText Markup Language –
  язык разметки гипертекста)
  Автор: учитель информатики и ИКТ
  Красильникова Светлана Фёдоровна
  

• 2 слайд

  Компьютер
  МОУ Личадеевская СОШ, Ардатовского района, Нижегородской области
  На этом сайте вы можете найти сведения о компьютерах: историю
  возникновения, ремонт компьютеров, настройка компьютеров.
  Персональные компьютеры 1990—2000-х годов
  1990 год
  Фирма Microsoft выпустила Windows 3.0.
  Тим Бернерс-Ли разработал язык HTML (Hypertext Markup Language — язык разметки гипертекста;
  основной формат Web-документов) и прототип Всемирной паутины.
  Cray выпустил суперкомпьютер Cray Y-MP C90 с 16 процессорами и со скоростью 16 Гфлопс.
  
  

• 3 слайд

  Структура HTML - документа
  <HTML> начало HTML - кода
  <HEAD> начало заголовка
  заголовок содержит описательную и служебную информацию
  </HEAD> конец заголовка
  <BODY> начало тела
  содержание страницы
  </BODY> конец тела
  </HTML> конец HTML – кода
  

• 4 слайд

  Работа с текстом
  <H1> Заголовок первого уровня </H1>
  <H2> Заголовок второго уровня </H2>
  <H3> Заголовок третьего уровня </H3>
  <H4> Заголовок четвертого уровня </H4>
  <H5> Заголовок пятого уровня </H5>
  <H6> Заголовок шестого уровня </H6>
  
  

• 5 слайд

  <FONT FACE=“название шрифта” SIZE= “размер текста” COLOR=“цвет текста”>
  текст
  </FONT>
  
  

• 6 слайд

  Для управления начертанием текста используются следующие теги:
  
  

• 7 слайд

  Что можно сделать с картинкой?
  
  

• 8 слайд

  
  <IMG SRC=”имя файла.расширение”>
  
  
  
  Вставка рисунка
  в HTML - документ
  

• 9 слайд

  
  <IMG SRC=”имя файла” BORDER=4>
  
  
  Рамка к рисунку
  

• 10 слайд

  
  <IMG SRC=”имя файла” BORDER=4 ALT=“Текст к рисунку”>
  
  
  Текст к рисунку
  

• 11 слайд

  
  <IMG SRC=”имя файла” BORDER=4 ALT= “Текст к рисунку” WIDTH=“ширина” HEIGHT=“высота”>
  
  
  Масштаб рисунка
  

• 1 слайд

  Физкультминутка для школьников средних и старших классов
  

• 2 слайд

  1. Упражнения для улучшения мозгового кровообращения
  «Наклоны головы»
  
  Вперед – назад
  
  Вправо - влево
  

• 3 слайд

  2. Упражнение общего воздействия
  «Бокс»
  

• 4 слайд

  3. Упражнения для снятия утомления
  с плечевого пояса и рук
  «Рывки руками»
  «Сжимание
  кисти в кулак»
  

• 5 слайд

  4. Упражнение для снятия напряжения с мышц туловища
  «Наклоны в сторону»
  

• 6 слайд

  «Вращение глазами»
  
  по часовой стрелке
  против часовой стрелки
  
  5. Упражнения для глаз
  

• 7 слайд

  «Пальчик»
  Приближайте и
  
  отводите палец
  
  

• 8 слайд

  «Во все стороны»
  Двигайте глазами
  вверх-вниз
  вправо-влево
  

• 9 слайд

  «Кто там?»
  Зажмурьтесь посильнее
  
  Широко откройте глаза
  

• 10 слайд

  «Моргание»
  

• 11 слайд

  «Сон»
  Закройте глаза