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

2. Актуализация знаний.

Учитель: Прежде чем перейти к изучению новой темы, мы с вами повторим некоторые  понятия, изученные на прошлых уроках. Какие? Чтобы ответить на этот вопрос, я вам предлагаю разгадать несколько ребусов.

(Учащиеся за компьютерами выполняют тест в MS PowerPoint Приложение 1).

Проверка (Приложение 1слайд 2): адрес,  браузер, интернет, сервер.

2. Объявление темы урока. Итак, тема нашего урока «Структура HTML-кода Web-страницы» (Приложение 1 слайд 3). Перед вами на столах лежат модели яблок. Сформулируйте и напишите на них, чтобы вы хотели узнать сегодня на уроке? Отложите яблоки в сторону. Мы к ним обратимся в конце урока.

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

Рассказ учителя, сопровождающийся демонстрацией слайдов: Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Приложение 1 слайд 4).

Достоинством Web-страниц является возможность ее просмотра в различных операционных системах. Какова же история создания языка HTML? Давайте послушаем выступление нашего ученика, который нашел ответ на этот вопрос в Интернете.

Сообщение ученика, сопровождающееся демонстрацией слайдов (Приложение 3): «Язык разметки гипертекста -HTML (Hypertext Markup Language) - возник на стыке нескольких направлений исследований и разработок. Существуют три фактора, повлиявших на особенности и возможности HTML.

Во-первых, HTML предназначен в основном для создания гипертекстовых документов, и поэтому понимание того, что такое гипертекст, абсолютно необходимо для изучения языка HTML. Первые концепции и разработки, посвященные гипертексту, принадлежали Ванневару Бушу, предложившему концепцию системы Метех в сороковые годы, а также Дагласу Энгельбарту и Теодору Нельсону, работавшим над этой технологией в шестидесятые годы. Ванневар Буш (1890-1974), научный советник президента Ф. Д. Рузвельта, считается первым, кто дал описание гипертекста. Он сделал это в своей статье в 1945 г. "Как мы можем думать", в которой призвал не пожалеть в послевоенное время усилий для механизации поиска данных в научной литературе. Он описал браузер - диалоговую машину для просмотра обширной тексто-графической системы и пополнения ее записями. Эта система, получившая название Метех, включала в себя очень большую библиотеку, а также личные записи, фотографии, зарисовки. Она имела несколько экранов и позволяла вводить помеченную связь между любыми двумя точками библиотеки. Хотя Буш продемонстрировал замечательный дар предвидения, он не разглядел будущей силы компьютера - его Метех использует микрофильмы и фотоэлементы. Однако Буш верно предвидел информационный взрыв и в обоснование своих идей ссылался на потребность в более естественных типах указателей, обеспечивающих информационный поиск.

Термин "гипертекст" предложил Тед Нельсон в 1965 г. Вот как звучит определение гипертекста, которое дал Нельсон в 1987 г.: "...форма письма, которое ветвится или осуществляется по запросу". Иначе говоря, HTML - это "нелинейное письмо", которое "больше, чем текст" (hypertext).

Во-вторых,HTML - это язык разметки, построенный на принципах SGML. В 1986 г. Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный Standard Generalized Markup Language (SGML) - Стандартный обобщенный язык разметки. Стандарт в Интернет доступен по адресу: http://www.Webreference.com/dlab/books/html/3-O.html. Названный стандарт вводит SGML - обобщенный метаязык, позволяющий строить системы логической, структурной разметки текстов любых разновидностей. При этом управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, т.е. задают его логическую структуру. Вот до некоторой степени такой системой и является HTML.

Третьим фактором, определившим специфику HTML, было его применение в Интернете. В 1989 г., после экспериментов с собственными новыми сетевыми технологиями, Европейская лаборатория физики элементарных частиц (CERN) подсоединилась к Интернет. Этот исследовательский центр, расположенный в Женеве (Швейцария), сыграл существенную роль в разработке и принятии стандартов связи и распределенных вычислений, в частности, двух фундаментальных протоколов, которые являются базовыми для Интернет: Transmission Control Protocol (TCP) и Internet Protocol (IP).

В том же 1989 г. Тим Бернерс-Ли предложил глобальную гипертекстовую систему, основанную на более раннем проекте "Enquire" и позволившую соединять связями не только текст, но и графику, звуки, видео. Глобальность этой системы, в отличие, например, от системы Теда Нельсона, состояла в том, что данные распределены по всему миру, а ее основой стал Интернет.

Бернерс-Ли был по образованию физиком. В 1984 г. он пришел в CERN, где занимался разработкой многозадачных операционных систем и компьютерных приложений. Изначальная цель создания новой системы, как и всего Интернет, состояла в обеспечении ученых, прежде всего физиков, новыми, удобными средствами общения, обеспечивающими обмен результатами экспериментов и публикациями.

Через год Бернерс-Ли написал первое клиент-серверное программное обеспечение (гипертекстовую систему Enquire) для того, что теперь известно как World Wide Web (WWW или W3). Эта система была впервые задействована в декабре 1990 г. и дорабатывалась вплоть до 1993 г. За это время был предложен гипертекстовый протокол передачи данных (HTTP-Hypertext Transfer Protocol).

Язык HTML постоянно развивался с момента его создания. Стандартизацией этого языка занимается консорциум World Wide Web, сокращенно W3C (http://www.w3.org/). 14 января 1997 г. W3C опубликовал спецификацию языка HTML версии 3.2. Менее чем через год, 18 декабря 1997 г., W3C опубликовал спецификацию HTML 4.0, в которой была окончательно рекомендована к применению концепция CSS».

Продолжение рассказа учителя: Создание Web-страниц очень трудоемкий процесс, который требует знания синтаксиса языка разметки гипертекстовых документов. Существуют специальные Web-редакторы, которые делают работу по созданию Web-страниц более простой, наглядной  и эффективной: Microsoft FrontPage, Macromedia Dreamweaver) (Приложение 1 слайд 5,6)

Для создания Web-страниц используются также  простейшие текстовые редакторы. Мы с вами будем учиться создавать Web-страницы, используя стандартное приложение Блокнот (Приложение 1 слайд 7).

С точки зрения HTML, весь объем информации представляется в виде страниц. Каждая страница – специально размеченный текст. Основным элементом разметки в языке HTML является тэг, т.е. указание, как обрабатывать часть текста (Приложение 1 слайд 8).

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

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

4. Работа с учебником.

Учитель: Откройте параграф 3.7.2. Прочитайте текст на стр. 114-115. И выполните задание в текстовом редакторе Блокнот (Приложение 4):

Используя текст параграфа, заполните пропуски:

HTML – код страницы помещается внутрь контейнера …

Web-страница разделяется на две логические чести: …

Заголовок Web-страницы заключается в контейнер … и содержит ….

Название страница помещается в контейнер …

Отображаемое в браузере содержание страницы помещается в контейнер …

Созданную Web-страницу необходимо сохранить в виде файла с расширением …

5. Проверка выполненного задания.

Учитель: Выполним вместе с вами, как успешно вы справились с этим заданием. ((Приложение 1 Слайд 9)

Хочу обратить ваше внимание, что все файлы разрабатываемого сайта необходимо сохранять в одной папке. Необходимо различать имя файла, например index.html, под которым web-страница хранится в файловой системе, и имя web-страницы, например, «Компьютер», которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами. Итак, общая структура Web-страницы выглядит так (Приложение 1 слайд 10).:

<HTML>

<HEAD>

<TITLE> Заголовок страницы</TITLE>

</HEAD>

<BODY>

…

</BODY>

</HTML>

(Учащиеся записывают в тетрадь структуру Web – страницы).

6. Закрепление изученного материала.

Учитель: Чтобы вы лучше запомнили материал нашего урока, выполним практическую работу.

Практическая работа.

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

Задание 1.

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

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

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

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

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат. (Приложение 1 слайд 11).

Физминутка.

К журавлю жук подлетел,

Зажужжал и запел «Ж-ж-ж…»

Вот он вправо полетел,

Каждый вправо посмотрел.

Вот он влево полетел,

Каждый влево посмотрел.

Жук на нос хочет сесть,

Не дадим ему присесть.

Жук наш приземлился,

Зажужжал и закружился «Ж-ж-ж…»

Жук, вот правая ладошка,

Посиди на ней немножко.

Жук, вот левая ладошка,

Посиди на ней немножко.

Жук наверх полетел

И на потолок присел

На носочки мы привстали,

Но жука мы не достали.

Хлопнем дружно

Хлоп-хлоп-хлоп,

Чтобы улететь он смог. «Ж-ж-ж…».

Задание 2.

1.      Спроектируйте страничку, отражающую ваши увлечения.

2.      Посмотрите страничку в браузере. Проанализируйте полученный результат.

7. Первичный контроль усвоения нового материала.

Выполнение теста в PowerPoint  (Приложение 5) с автоматической проверкой и выставлением оценки.

8. Рефлексия. Вернемся к нашим яблочкам, на которых были сформулированы цели к нашему уроку. Давайте посмотрим,  достигли ли мы их? Если цель достигнута,  вешаем яблочко на яблоню.

9. Выдача домашнего задания с комментариями.

стр. 113-115. прочитать, ответить письменно на вопросы стр. 114, стр. 115 (Приложение 1 слайд 12).

10. Подведение итогов урока. Оценки.

Источники:

1.      http://do.bti.secna.ru/lib/book/p_2.html

2.      http://www.metod-kopilka.ru/page-5-1-12.html

3.      Информатика и ИКТ: учебник для 8 класса/ Н.Д. Угринович. – 2-е изд., испр. – М.: БИНОМ. Лаборатория знаний, 2009. – 178 с.: ил.

4.      Педагогический опыт: Сборник методических разработок для учителей, классных руководителей, кураторов, педагогов образовательных учреждений, вып. 19 (Под ред. кандидата педагогических наук С.Ю. Цикунова) – Саратов: 2010. – 188 с.