Дата проведения: 13.04.15

Класс: 10

Тема урока: Основы языка разметки гипертекста. Компьютерный практикум №13 «Разработка сайта с использованием Web – редактора ».

Тип урока: практическая работа.

Оборудование: класс, основанный на базе ПК, проектор, презентация.

Формы работы: фронтальная, групповая, индивидуальная.

Приемы работы: кольца «Вена», лестница успеха, проблемная ситуация, прием «домысливание».

Цели урока: сформировать представление о структуре web-страниц, познакомить с основными тегами,  научиться создавать простейшие WEB-страницы.

Методы обучения: объяснительно-иллюстративный, частично-поисковый.

Задачи урока:

1. Знакомство с определениями «тег», «атрибут», «веб – сайт», «HTML», «гипертекст», «веб - редактор».
2. Знакомство с веб – редактором Блокнот.
3. Знакомство с языком разметки гипертекста.
4. Практическая работа.

План урока:

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

     2.        Актуализация знаний, умений и навыков.

    - Мотивация

    - Проблема

     3.        Объяснение нового материала.

    - Подготовка к основному этапу занятия

     4.        Первичное закрепление изученного материала.  Практическая работа.

     5.        Подведение итога урока.

    - Рефлексия

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

Ход урока

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

Приветствие. Пожелание ученикам творческих успехов и хорошего настроения. Настрой детей на ситуацию успеха.

2. Актуализация знаний, умений и навыков.

Наша жизнь и наши уроки информатики тесно связаны. К какому обществу относимся мы и Россия в том числе? (к информационному). И это мы сейчас с вами пронаблюдаем.

Я предлагаю вам решить жизненную ситуацию. У нас есть 3 внешние группы. Возле каждого из вас на парте лежит стикер определенного цвета.

Группа №1 (оранжевые стикеры). Вам необходимо попасть на прием к врачу. Как это можно сделать? Опишите всевозможные способы. Каждый ответ предлагаю записывать на отдельном стикере.

Группа №2 (салатовые стикеры). Вам необходимо узнать результаты ЕГЭ. Опишите всевозможные пути.

Группа №3 (голубые стикеры). Вам необходимо узнать текущие оценки по школьным предметам. Опишите всевозможные пути.

От группы два ученика выходят. Один ученик зачитывает результаты, второй прикалывает их на ватман на доске.

        Посмотрите, сколько различных способов достижения своей цели все вы предложили.  Но у всех трех групп можно выделить  самый актуальный ответ в современном обществе. Какой?

- с помощью Интернет.

Куда мы заходим, выходя в Интернет?  (на сайт).

Объясните, почему этот способ на сегодняшний день является удобным и практичным?

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

Чьими услугами мы пользуемся, работая с информацией сайт ( частных  лиц или организаций) 

Таким образом, мы с вами можем сэкономить время, которое могли бы потратить на ходьбу по учреждениям, на звонки и т.д. Заказать талон к врачу мы можем, зайдя на сайт поликлиники, узнать результаты ЕГЭ на сайте, введя свои персональные данные, узнать текущие оценки на сайте «Виртуальная школа».

        Постановка проблемы

Что должна сделать любая организация, чтобы предоставить вам такую услугу? (создать свой сайт)

Специалисты по созданию сайтов очень востребованы. В современном мире разразился настоящий бум сайтостроения. Свои странички в Интернете имеют все: государственные учреждения, большие компании, мелкие предприниматели, магазины, библиотеки, школы, сады.

Любую информацию мы можем найти на различных сайтах. Но одни сайты насыщены информацией, а другие нет.

Попробуем себя в роли программистов!

Итак, тема практической работы «Проектирование макета…» Чего?

Проектирование макета сайта!?????? Частично я с вами согласна. Позвольте мне поставить пока вопрос. Позже вы проследите и догадаетесь почему.

3. Объяснение нового материала.

А что такое веб – сайт? Предлагаю поработать с определением, которое записано на слайде.

И обращаемся к вашим словарям из рабочего листа.

Сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — система электронных документов частного лица или организации в компьютерной сети под общим доменным именем или IP-адресом.

Распределим эту информацию от центра к периферии.

Давайте выберем то, что нам знакомо? Поместим это в центральное кольцо.

Ребята, а что из определения нам менее знакомо?

Расширяем определение. Сайт может быть чьим?

А что нам с вами совсем не знакомо?

Под чем он находится в компьютерной сети?

Итак, система электронных документов может быть чья? Под чем она находится?

Продолжаем работу со словарем.

А что такое доменное имя  и IP- адрес?

Вам даны определения, необходимо выяснить о каком из этих понятий идет речь.

Домен – это название сайта в Интернете. 

IP-адрес - уникальный идентификатор (личный номер) в компьютерной сети.

        А теперь познакомимся с видами сайтов.  Предлагаю вам поработать с  заданием №2 рабочего листа. Сопоставьте виды сайтов с их особенностями.

Ответ:

Какой из этих видов сайта мы сегодня сможем реально спроектировать? (личный)

Возвращаемся к теме урока! Проектирование макета личного сайта.

Какова цель урока?

А так как это требует много времени, сегодня мы с вами разработаем титульную страницу сайта.

Тема: «Проектирование макета титульной страницы личного сайта».

Выстроим алгоритм наших действий. Обсуждаем. Один ученик у доски располагает.

На доске хаотично (1) открыть веб – редактор, 2) изучить основы языка HTML, 3) выполнить действия по алгоритму). Второй и третий шаг объединим.

Проходите за компьютеры со своими рабочими листами и ручками. Присаживайтесь за компьютеры по два человека. Работайте чередуясь.

Итак, первый шаг.

1. Открываем документ «сайт» в  веб – редакторе Блокнот. Папка на Рабочем столе «10 Б класс».
2. Вместо *** по ходу моего объяснения вам необходимо восстановить HTML – код. Работайте, чередуясь.

// определяет тип документа как web страницу

// определяет начало и конец заголовка документа

// определяет имя всего документа (название вкладки)

< BODY  background="…">  // BODY указывает начало и конец тела HTML-документа, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки содержатся внутри данного тега; background задает цвет фона страницы.

…="center">  Иванов Иван Иванович

<… src="…" align="right">  // вставляет изображение на страницу, форматирует положение на странице

// выравнивает текст по центру

…="index1.htm"> Моя биография           &nbsp // создает гиперссылку на другую страницу сайта

…F="index2.htm"> Хобби            

…="index3.htm"> Фотоальбом …

// р используется для разметки параграфов, выравнивает текст по левому краю

Ученик  10 «Б» класса Климовской КСОШ №3.

3. Сохраняем данный файл под именем index.htm
4. Откройте свой файл в браузере и посмотрите.
5. Отправьте папку на эл. почту boronko1992@mail.ru

Демонстрирую работающий сайт. Обращаю внимание на то, как документ сохранить.

А сейчас предлагаю пройти за компьютеры со своими маршрутными листами и ручками. Выполняем задание 2. Практика.

     4.        Первичное закрепление изученного материала.  Практическая работа.

Цель работы:  Научиться создавать, просматривать и редактировать HTML-документы;

ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Скачайте в Интернете картинку. Сохраните ее в эту папку.

3. Откройте текстовый редактор Блокнот (Пуск→ Программы→ Стандартные→ Блокнот).

4. Наберите следующий HTML-код:

1 СТРАНИЦА САЙТА

>

 Иванов Иван Иванович

Моя биография            

Хобби            

Фотоальбом

Ученик  10 «Б» класса Климовской КСОШ №3.

5. Сохраните под именем index.htm в папке Сайт.

6. Откройте в браузере index.

7. Отправьте свою работу на электронный адрес boronko1992@mail.ru

4. Подведение итога урока.

Демонстрирую получившиеся сайты. Обсуждаем. Выставление оценок.

Ребята, скажите, а мы можем в таком виде опубликовать свой сайт?

Его нужно дополнить информацией. В таком виде не публикуются сайты. Дома вы дополните свои сайты (д/з в рабочих листах). А на следующем уроке мы с вами будем знакомиться с хостигами. Хо́стинг (англ. hosting) — услуга по предоставлению вычислительных мощностей для размещения информации на сервере, постоянно находящемся в сети (обычно Интернет).

На данный момент существуют как платные хостинги, так и бесплатные. Мы узнаем, как правильно выбрать нужный хостинг, а также как с помощью хостинга поместить свой сайт в Интернет.

Предлагаю двум ученикам подготовить сообщения. На перемене подойдите за планом и рекомендациями.

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

Выучить определения. Доработать свой сайт, добавив две новые страницы (Режим дня, Моя семья).