Разработка методики обучения по теме "Создание web-страниц с помощью языка гипертекстовой разметки HTML" в курсе информатики для старших школьников

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

• Департамент образования и науки Краснодарского края
• ГБОУ СПО ЕПК КК
• Студент И-41 группы
• Специальность Информатика
• Волошко Богдан Дмитриевич
• РАЗРАБОТКА МЕТОДИКИ ОБУЧЕНИЯ ТЕМЕ «СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ ЯЗЫКА ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML» В КУРСЕ ИНФОРМАТИКИ ДЛЯ СТАРШИХ ШКОЛЬНИКОВ
• Курсовая работа практического характера
• Научный руководитель:
• Преподаватель информатики
• Мушулова С.Б.
• Ейск, 2012
• ОГЛАВЛЕНИЕ
• ВВЕДЕНИЕ
• Глава I. Язык гипертекстовой разметки документов HTML
• 1.1 История возникновения и основная характеристика языка HTML
• 1.2 Структура документа HTML
• 1.3 Основные средства форматирования текста
• 1.4 Форматирование HTML документа
• 1.5 Гиперссылки
• 1.6 Списки
• 1.7 Таблицы
• 1.8 Графика
• 1.9 Фреймы
• 1.10 Формы
• Глава II. Методика преподавания темы «Создание Web-страниц с помощью языка гипертекстовой разметки HTML» в курсе информатики
• 2.1 Формы и методы обучения теме «Создание Web-страниц с помощью языка HTML» в курсе информатики
• 2.2 Примерный учебный план по теме «Создание Web-страниц с помощью языка HTML» в курсе информатики
• ЗАКЛЮЧЕНИЕ
• СПИСОК ЛИТЕРАТУРЫ
• Приложения
• ВВЕДЕНИЕ

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

Поскольку любая деятельность человека начинается с обучения, то и в эту сферу с полным правом широко вторгается компьютер. А обучение начинается в школе.

Нарастание потока информации, приводящее к ее удвоению каждые несколько лет, делает в ряде случаев, невозможным решение различных задач без широкого использования вычислительной техники. Над компьютеризацией надстраивается значительно более глубокий процесс - информационный, охватывающий все стороны общественной жизни. Это связано с непосредственным внедрением современных персональных компьютеров практики вовсе сферы науки, техники и экономики [16, с.472].

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

Поэтому в программе средней школы совершенно обоснованно был введен новый предмет, который получил название «Основы информатики и вычислительной техники» [16, с. 528].

Для обучения школьников решению задач на оптимизацию я выбрал HTML, потому что программа, во-первых, распространена повсеместно и имеет широкие возможности для решения таких задач.

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

В-третьих, я выбрал HTML , не только потому, что эта программа позволяет эффективно решать задачи на оптимизацию, но и потому, что она практически повышает интеллектуальную активность, формирует общие интеллектуальных способности, особенно понятийного теоретического мышления, совершенствует умения пользоваться ими, рассуждать логически и абстрактно, развивает практические умения и навыки, которые в будущем могут понадобиться для совершенствования профессиональных способностей [17, с. 200]. Этим обосновывается мой выбор темы курсовой работы.

Поняв важность HTML в школьном курсе информатики необходимо определить объект, предмет, цель и гипотезу данного исследования.

Цель исследования - разработать методику обучения разделу

«Создание Web-страниц с помощью языка HTML» курса информатики школьников старших классов общеобразовательной школы.

Задачи исследования:

1) проанализировать психолого-педагогическую литературу, посвященную особенностям обучения информатике;

2) выявить особенности использования языка гипертекстовой разметки HTML;

3) разработать программу для обучения разделу «Создание Web-страниц с помощью языка HTML» курса информатики в общеобразовательном учреждении;

4) предложить методы и формы обучения разделу «Создание Web-страниц с помощью языка HTML» курса информатики.

Гипотеза исследования состоит в том, что использование информационных технологий и специально разработанных методов обучения позволяет повысить эффективность обучения старших школьников технологии создания Web - страниц с помощью языка HTML.

Объект исследования - методика обучения информатике старших школьников в общеобразовательном учреждении.

Предмет исследования - процесс обучения старших школьников разделу «Создание Web-страниц с помощью языка HTML» курса информатики.

Новизна исследования состоит о том, что обоснована необходимость обучения информационным технологиям на уроке информатики в старшей школе.

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

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

Глава I. Язык гипертекстовой разметки документов HTML

1.1 История возникновения и основная характеристика языка HTML

В 1989 году был изобретен язык, ставший впоследствии основным языком Web-документов - это язык HTML (Hyper Text Markup Language). Автором языка HTML является Тим Бенрерс - Ли, выпускник Оксфордского университета, работавший в то время по контракту в Женеве, в европейской лаборатории физики элементарных частиц (CERN, Conceil Europeen pour la Recherche Nucleaire) консультантом по программному обеспечению. CERN- достаточно большая организация, и потому, чтобы лучше ориентироваться в ее структуре, не хранить в памяти данные о большом количестве проектов, должностных лиц и пр., Тим Бенрерс - Ли разработал для своего личного пользования программу Enquire, на основе которой через несколько лет для лаборатории было создано некоторое информационное пространство. Программа Enquire позволяла осуществлять так называемый «нелинейный» поиск документов, т.е. осуществлять переход от одного документа к другому без обращения к оглавлению или справочнику [10,с. 448].

Язык HTML составляет основу технологии гипертекста. Гипертекстовый документ содержит гиперссылки. Под гипертекстом же в простейшем случае понимается текст, позволяющий не только последовательное прочтение, то есть, указателями- ссылками связанный с другими документами.

«Всемирная паутина» World Wide Web на сегодня является ведущим сервисом Интернет, постепенно вытесняющим или включающим в себя большинство других сетевых служб. Документы, составляющие содержание WWW, называются Web- страницами [16, с. 664].

Язык HTML предназначен для формирования и оформления страниц текста, который может быть просмотрен в сети Internet специальными программами - браузерами. Основными из этих программ являются Netscape Navigator (фирмы Netscape) и Internet Explorer (фирмы Microsoft).

HTML представляет собой достаточно простой набор команд, которые описывают структуру документа. HTML не задает конкретные и точные атрибуты форматирования документа, как, например, Microsoft Word. Конкретный вид документа окончательно определяет только программа- браузер на конкретном компьютере. Необходимость именно такого подхода связана с разнородностью аппаратного и программного обеспечения компьютеров, подключенных к Интернету.[16, с. 526]

HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы и списки и т.д.), поместить на Web - страницу отдельно подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами. Кроме того, могут присутствовать ссылки на файлы с графическими изображениями, которые просмотре будут отображены вместе с текстом. Для форматирования файла HTML не требуется мощного текстового процессора - вполне возможно (а в большинстве случаев и более удобно) использование, например, текстовый редактор Notepad (Блокнот). Не допустимо применение элементов оформления текста специальными средствами программы-редактора (например, Word).

С точки зрения пользователя Windows, Web- страница - это просто файл типа *.htm или *.html, находящийся на сервере Интернет, в локальной сети или на жестком диске компьютера [10, с. 432].

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

Стандартный документ Интернет представляет собой текстовый файл, размеченный средствами формата HTML. Управляющие конструкции языка HTML, называются тегами и вставляются непосредственно в текст документа. Теги HTML бывают парные и непарные. Парные теги должны закрываться: <ТЕГ>…</ТЕГ>. Они воздействуют на часть документа заключенную в них. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в месте своего появления. Их не нужно закрывать. Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <ТЕГ1><ТЕГ2></ТЕГ2></ТЕГ1>, но не <ТЕГ1><ТЕГ2></ТЕГ1></ТЕГ2>.

HTML довольно ЅдемократиченЅ, неправильный тег или неправильное вложение тегов обычно не приводит к ЅзависаниямЅ браузера или каким-либо сообщениями об ошибках, хотя, разумеется, могут вызвать неправильное форматирование документа. [2, с. 752].

Независимо от того, как будет выглядеть ваша Web- страница, и какую информацию вы хотите отобразить, существует три тега, которые в соответствии со стандартом HTML и WWW должны присутствовать на каждой Web- странице (См. приложение 1).[2, с. 754].

Обязательным является только открывающий тег <HTML>.

Следует оговорить, что эффект применения тега может видоизмениться путем добавления параметров. В парных тегах параметры добавляются только к открывающему тегу. Параметры представляют собой дополнительные ключевые слова и размещаются после тега через пробел до закрывающегося элемента «>». Способ применения некоторых параметров требует указания значения параметра.

Раздел документа HEAD.

В теге <HEAD> помещается заголовочная информация.

- HREF= ЅадресЅ - указывает на URL- адрес другого документа.

- REL - определяет отношение между текущим и другим документом.

- REV - определяет отношение между другим документом и текущим.

- TYPE= ЅстильЅ - указывает тип и параметры присоединенной таблицы

стилей.

Раздел документов BODY.

В этом разделе документа располагается его содержательная часть.

Большинство тегов рассматриваемых далее должны располагаться в данном разделе документа.

Тег <BODY> имеет множество параметров.

Следует оговорить, что в данном исследовании мы рассматриваем только небольшую часть тегов.

Документ HTML состоит из нескольких составляющих. Одной

такой составляющей является текст. Поэтому далее мы рассмотрим основные средства форматирования текста.

1.3 Основные средства форматирования текста

Для форматирования текста HTML - документов предусмотрена целая группа тегов, которую можно условно разделить на теги логического и физического форматирования. Теги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов. Теги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера. [6, с. 504].

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



Рис.1. Примеры логического форматирования текста

Отображение примеров, проведенных при описании тегов физического

форматирования текста, показано на рисунке 2.

Рис.2. Примеры физического форматирования текста

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

Любой документ необходимо форматировать. Документ HTML не исключение. Рассмотрим основные элементы форматирования HTML- документа.

1.4 Форматирование HTML документа

Как и в Word, основной структуры текста в HTML является абзац.

Специальные символы.

Некоторые специальные символы не входят в базовую часть таблицы кодировок ACSII. Существуют символы непосредственно используемые в HTML-документах. Они будут интерпритированны не так, как задумал автор.

В таких случаях нужно вводить символ в HTML- документ при помощи специальных кодов.

Одним из важнейших понятий для HTML- документа являются ссылки.

О них и пойдет речь в следующем параграфе.

1.5 Гиперссылки

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

Гиперссылка состоит из ЅвнутреннейЅ части, то есть, адреса документа, на которой она ссылается, и ЅвнешнейЅ части, видимой на экране и называемой якорем гиперссылки. Якорь гиперссылки может представлять из себя слово или группу слов, картинку или часть картинки. Если подвести указатель ЅмышиЅ к ссылке, он примет форму ладони с вытянутым указателем пальцем - и это самый надежный способ ее определить. При этом в строке состояния браузера можно будет прочитать адрес, на который указывает ссылка [1, с. 672].

Кроме того, практически всегда текстовые ссылки выделены другим цветом и очень часто подчеркнуты. Графические ссылки часто заключены в рамку того же цвета, которым выделяются текстовые ссылки. По умолчанию это синий цвет, но каждая Web- страница может использовать свое собственное оформление. Цвет ссылок, которые уже выбрались пользователем, обычно отличается от цвета не посещенных ссылок и выглядит более ЅбледнымЅ (по умолчанию - фиолетовый).

Ш <A>…</A> - это служит для создания гиперссылки. В общем виде ссылку можно записать так:

<A HREF=Ѕ адресЅ TARGET= ЅокноЅ>текст ссылки</A>

Об адресах документов сказано ниже. Параметр TARGET может быть не указан, в этом случае документ открывается в текущем окне браузера, или указан в виде TARGET= Ѕ_BLANKЅ>, тогда документ открывается в новом окне. Текст ссылки внутри тега <A> может быть любым. Точно так же в тег <A> можно поместить и изображение.

Чтобы научиться создавать ссылки, нужно иметь представление о том, как адресуются документы в Сети.

Полный адрес документа в сети называется URL (Uniform Resource Locator; принято читать ЅурлЅ), URL может состоять из следующих частей:

Ш префикс протокола, то есть, указание на используемую сетевую службу. Основные протоколы, с которыми Вы столкнетесь (См. приложение 2).

Ш доменное имя компьютера или его IP-адрес вместо доменного имени. Например, сервер МТУ-Интел имеет доменное имя www.intel.ru и IP-адрес 195.34.32.11; [18, с. 624].

Ш номер порта, через который происходит взаимодействие с сервером. Перед номером порта ставится двоеточие. С точки зрения пользователя указание порта бывает полезно, например, для ЅпринудительнойЅ перекодировки документа. Так. Адреса http://www.newmail.ru:8100 и http://www.newmail.ru:8101 адресуют один и тот же сервер, но в первом случае документ читается в кодировке KOI-8, а во втором - в кодировке Windows. Вообще же, номер порта включается в URL только при нестандартных настройках сервера;

Ш имя файла на сервере, которое может включать и путь от корневого каталога сервера. В записи пути по дереву каталогов сервера используется символ `/' , а не `\', как принять в Dos и Windows. Корневой каталог на сервере - совсем не обязательно Ѕ головной Ѕ каталог ЅдискаЅ, как на локальной машине, а при соединении с сервером мы получаем доступ не ко всем его папкам и файлам, а только к тем, которые на нем специальным образом ЅразмещеныЅ и открыты для просмотра через WWW.

Ш закладка, позволяющая перейти в нужную часть документа. Имя закладки отделяется от имени файла символом Ѕ#Ѕ.

В целях совместимости имена файлов, размещаемых в Интернет, обычно строятся по правилам DOS- то есть, состоят из латинских букв, цифр и символа подчеркивания и имеют длину не более 8 символов. С другой стороны, web-страницы принято давать расширение *.html, а не *.hml.

Следует помнить, что URL чувствителен к регистру символов, то есть, http://www.TNT.ru и http://www.tnt.ru - это не один и тот же адрес.

Если в URL не указано имя html- файла, это означает, что документ имеет имя по умолчанию, которое может назначаться при администрировании сервера. Чаще всего это имя index.html, так что URL http://www.host.ru может означить то же самое, что http://www.host.ru/ index.html [2, с. 752].

Ссылки бывают:

Ш абсолютная- ссылка, в которой указан полный URL документа.

Абсолютные ссылки используются для связи с внешним ресурсами

Интернет, URL которых известен нам и не меняется.

Ш относительная - ссылка, которая ссылается на документ, опуская общую адресную часть. Например, если из документа index.html нужно сослаться на документ test.html, находящийся в той же папке, это можно сделать ссылкой вида:

<A HREF =Ѕtest.htmlЅ>документ test.html </A>

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

Например, ссылка на рисунок с именем my.jpg, находящийся во вложенной папке images может иметь вид:

<A HREF =Ѕ images/ my.jpg Ѕ>посмотрите рисунок </A>

Ш внутренняя - ссылка предназначена для навигации в пределах документа. Они имеют вид:

<A HREF =Ѕ #закладкаЅ>якорь ссылки </A> [7,336].

Для создания закладки служит тег вида:

<A HREF =Ѕ закладка Ѕ>якорь закладки </A>.

Имена закладок должны быть уникальным в пределах документа.

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

Далее рассмотрим одну из наиболее употребляемых форм представления данных.

1.6 Списки

HTML поддерживает нумерованный и маркированный списки.

Рассмотрим каждый из них.

Маркированный список.

Ш <UL>…<UL> - служит для создания маркированного списка. Внутри него располагаются все элементы списка.

Ш <LI>…</LI> - заключает каждый элемент списка. Этот тег закрывать необязательно.

Нумерованный список.

Ш <OL>…<OL> - служит для создания нумерованного списка. Внутри него располагаются все элементы списка.

Ш <LI>…</LI> - заключает каждый элемент списка. Этот тег закрывать необязательно.

Для нумерованного списка можно изменить нумерацию, указав в теге

<LI> параметр VALUE= ЅчислоЅ.

Отображение браузером маркированного списка показано на рисунке 6, а запись документа на языке HTML выглядит так:

Рис.3. Отображение браузером нумерованного списка

Список определений.

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

Ш <DL>…</DL> - задает списки определений.

Ш <DT>…</DT> - отмечает определяемый термин.

Ш <DD>…</DD> - отмечает абзац с его определением.

Комбинированные списки.

Для создания комбинированных списков теги нумерованных и маркированных списков можно вкладывать друг в друга.

Наряду со списками существует еще одна очень распространенная форма представления данных - таблица. Поговорим о ней [7, с. 342].

1.7 Таблицы

Важным инструментом Web-дизайна являются таблицы, которые используются не только для вывода табличных данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа, цветовых эффектов и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончания ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа.

Описание таблиц должно располагаться в разделе документа <BODY>.

Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.

Ш <TABLE>…</TABLE> - служит для создания таблицы.

Если ячейку следует оставить пустой, в нее обычно помещают ЅжесткийЅ символ пробела >&nbsp

Приведем пример таблицы с некоторыми заданными параметрами тега <TABLE>. Ее отображение показано на рисунке 4.



Рис.4.

Далее приведем пример таблицы с некоторыми заданными параметрами тегов <TD> и <TR>. Ее отображение показано на рисунке 11. А запись HTML кода представлена ниже.

Хочется отметить, что браузер Microsoft Internet Exporer позволяет использовать ряд новых тегов для структурирования таблиц и гибкого управления прорисовкой рамок и линий сетки.

Далее рассмотрим возможность использования графики при создании WEB-страниц [12, с. 256].

1.8 Графика

документ форматирование текст страница

Возможность использования графики трудно переоценить в приложении к любому виду публикации, в том числе и для WEB- документов. Без иллюстрации документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещения в документе графика делает его визуально привлекательным.

Существует много способов описания графической информации, соответственно имеется большое количество форматов хранения графических файлов.

Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.

Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации (ЅмультипликацияЅ на Web- страницах, графические кнопки, ЅукрашенияЅ).

Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект - возможность чересстрочной загрузки изображения GIF - то есть, изображение может постепенно ЅпроявлятьсяЅ по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.

Формат JPG используется для хранения полно-цветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16,7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web- страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательной вариант картинки.

Из доступных приложений эффективно управлять файлами в форматах GIF или JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw.

HTML позволяет легко добавить на страницу фоновое изображение.

Для этого достаточно указать параметр BACKGROUND= ЅURL рисункаЅ в тег <BODY>. Рисунок может быть в формате GIF или JPG/ Это продемонстрировано на рисунке 5.



Рис.5.

Приведем пример использования некоторых параметров тега <IMG>. Отображение примера браузером показано на рисунке 6.

Рис.6.

Графические изображения могут использоваться как ссылка на

другие ресурсы. Схема такой записи:

<A HREF= ЅадресЅ><IMG SRC=ЅURL рисункаЅ> текст ссылки </A>.

Важным элементом языка HTML являются фреймы. О них и пойдет речь дальше [12, с. 263].

1.9 Фреймы

Фреймами или кадрами называют независимые окна внутри окна браузера, в которых могут одновременно отображаться разные документы. Фреймы удобны при создании страниц, которые должны иметь как динамическое, так статическое содержимое. Например, узкий левый фрейм может содержать оглавление сайта, а широкий правый будет предназначен для вывода информации. Возможны также любые другие конфигурации.

Документ, использующий фреймы, содержит только описание внешнего вида фреймов.

Приведем пример самого простого HTML- кода с фреймами на рисунке 7:

Рис.7.

Ш <NOFRAMES>…</NOFRAMES> - определяет содержимое, которое будет выводиться браузерами, не поддерживающими кадры.

Ш <FRAME>…</FRAME> - реализует концепцию плавающих кадров.

Используется только для браузера Microsoft Internet Explorer. Для задания расположения и размеров плавающего фрейма в документе можно использовать дополнительные параметры: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и использование совпадает с соответствующими параметрами тега <IMG>.

Для создания ссылки из одного кадра в другой достаточно указать в

теге ссылки опцию вида TARGET= Ѕимя кадраЅ. Общую схему такой ссылки можно записать так:

<A HREF>= ЅURL нового документаЅ TARGET= Ѕимя кадраЅ>…</A>

Наряду с фреймами часто используют формы. Рассмотрим

возможность их использование при создании HTML- документов [14,с. 512].

1.10 Формы

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

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую- то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.

Ш <FORM>…</FORM>- создаем формы.

Пример разработки формы показан на рисунке 8.



Рис.8.

Эта форма пытается отправить данные по указанному в заголовке адресу электронной почты, используя тему письма ЅInformationЅ. Дальнейшие события зависят от того, установлена ли на машине пользователя почтовая программа - клиент. Если да, то информация будет отправлена, причем данные из полей формы придет в виде строк текста NAME= VALUE, например, информация о курсе в виде curs=1. Если на машине нет программы электронной почты, Windows предупредит об этом.

Ш <PRE>…</PRE> - служит для лучшего выравнивания данных [5, с. 320].

Глава II. Методика преподавания темы «Создание Web-страниц с помощью языка гипертекстовой разметки HTML» в курсе информатики

2.1 Формы и методы обучения теме «Создание Web-страниц с помощью языка HTML» в курсе информатики

Основной формой организации учебно-воспитательной работы с учащимися по всем предметам в средней школе является урок. Школьный урок образует основу классно-урочной системы обучения, характерными признаками которой являются:

* постоянный состав учебных групп учащихся;

* строгое определение содержания обучения в каждом класс

* определенное расписание учебных занятий;

* сочетание индивидуальной и коллективной форм работы учащихся;

* ведущая роль учителя;

* систематическая проверка и оценка знаний учащихся.

Классно-урочная система организации учебного процесса, восходящая от выдающегося чешского педагога Я.А.Коменского (1592--1670), является основой структурной организации отечественной школы на протяжении почти всей истории ее существования. Как показывает весь (пока незначительный) опыт, который накопила наша школа после введения курса ОИВТ, преподавание основ создания Web-страниц с помощью языка HTML, без сомнения, наследует все дидактическое богатство отечественной школы -- урочную систему, домашние задания, лабораторную форму занятий, контрольные работы и т.п. Все это приемлемо и на уроках по информатике. Вместе с тем следует заметить, что со времен Я.А. Коменскского до наших дней взгляды на формы организации учебного процесса в мировой практике не оставались неизменными. Зарубежный педагогический опыт от начала XIX в. до современного периода накопил целый ряд подходов, получивших широкую известность. Среди них белль-ланкастерская форма организации занятий, мангеймская система, дальтон-план, план Трампа. В условиях внедрения в учебный процесс школы кабинетов вычислительной техники (КВТ) и поисков новых эффективных форм организации обучения на основе информационных и коммуникационных технологий (ИКТ) весь известный опыт должен быть подвергнут критическому анализу, с тем чтобы все прогрессивное стало достоянием нашей практики Применение ИКТ может существенно изменять характер школьного урока, что делает еще более актуальным поиск новых организационных форм обучения, которые должны наилучшим образом обеспечивать образовательный и воспитательный процесс. Классификацию типов уроков (или фрагментов уроков) но проводить, используя различные критерии. Главный принцип урока -- это его дидактическая цель, показывающая, к чему стремиться учитель. Исходя из этого признака, в дидактике выделяются следующие виды уроков:

1) уроки сообщения новой информации (урок-объяснение)

2) уроки развития и закрепления умений и навыков (тренировочные уроки);

3) уроки проверки знаний умений и навыков.

В большинстве случаев учитель имеет дело не с одной из выше названных дидактических целей, а с несколькими (и даже со всеми сразу), поэтому на практике широко распространены так называемые комбинированные уроки. Комбинированный урок может иметь разнообразную структуру и обладать в связи с этим рядом достоинств: обеспечивая многократную смену видов деятельности, они создают условия для быстрого применения новых знаний, обеспечивают обратную связь и управление педагогическим процессом, накопление отметок, возможность реализации индивидуального подхода в обучении. Важнейшая особенность постановки курса создания Web-страниц с помощью языка HTML на базе КВТ -- это систематическая работа школьников с ЭВМ. Поэтому учебные фрагменты на уроках информатики можно классифицировать также по объему и характеру использования ЭВМ [11,с. 218]. Так, например, уже самая первая программа машинного варианта курса ОИВТ предусматривала три основных вида организационного использования кабинета вычислительной техники на уроках -- демонстрация, фронтальная лабораторная работа и практикум. Демонстрация. Используя демонстрационный экран, учитель показывает различные учебные элементы содержания курса (новые объекты языка, фрагменты Web-страниц, и т.п.). При этом учитель сам работает за пультом ПЭВМ, а учащиеся наблюдают за его действиями или воспроизводят эти действия на экране своего компьютера. В некоторых случаях учитель пересылает специальные демонстрационные программы на ученические компьютеры, а учащиеся работают с ними самостоятельно. Возрастание роли и дидактических возможностей демонстраций с помощью компьютера объясняется возрастанием общих графических возможностей современных компьютеров. Очевидно, что основная дидактическая функция демонстрации -- сообщение школьникам новой учебной информации. Лабораторная работа (фронтальная). Все учащиеся одновременно работают на своих рабочих местах с программными средствами, переданными им учителем. Дидактическое назначение этих средств может быть различным: либо освоение нового материала (например, с помощью обучающей программы), либо закрепление нового материала, объясненного учителем (например, с помощью программы-тренажера), либо проверка усвоения полученных знаний или операционных навыков (например, с помощью контролирующей программы). В одних случаях действия школьников могут быть синхронными (например, при работе с одинаковыми педагогическими программными средствами), но не исключаются и ситуации, когда различные школьники занимаются в различном темпе или даже с различными программными средствами. Роль учителя во время фронтальной лабораторной работы -- наблюдение за работой учащихся (в том числе и через локальную сеть КВТ), а также оказание им оперативной помощи. Практикум (или учебно-исследовательская практика). Учащиеся получают индивидуальные задания учителя для протяженной самостоятельной работы (в течение одного-двух или более уроков, включая выполнение части задания вне уроков, в частности дома). Как правило, такое задание выдается для отработки знаний и умений по целому разделу (теме) курса. Учащиеся сами решают, когда им воспользоваться компьютером (в том числе и для поиска в сети), а когда поработать с книгой или сделать необходимые записи в тетради. Учитывая гигиенические требования к организации работы учащихся в КВТ, учитель должен следить за тем, чтобы время непрерывной работы учащих, компьютером не превышало рекомендуемых норм (см. об этом дальше). В ходе практикума учитель наблюдает за успехами учащихся, оказывает им помощь. При необходимости приглашает всех учащихся к обсуждению общих вопросов, обращая внимание на характерные ошибки. С распространением технологий компьютерного обучения пользующих интерактивные педагогические средства, которые берут на себя все больше и больше педагогических функций, становится актуальным вопрос о возможных изменениях роли и обязанностей учителя. Не вдаваясь здесь в детали дискуссии, которые ведут специалисты, отметим, что равнодействующая всех мнений вполне устойчиво сводится к главному тезису: ведущая роль учителя сохраняется и в условиях компьютерного обучения, а роль компьютера во всех случаях остается в том, чтобы быть надежным и дружественным помощником учителя и ученика. Компьютер вооруженный хорошими педагогическими программными средствами, помогает учителю совершенствовать стиль работы, перенимая на себя многие рутинные функции и оставляя учителю наиболее творческие, истинно человеческие задачи обучения питания и развития. К тому же, например, такие важные компоненты учебно-воспитательного процесса, как ведение дискуссий, поощрение рассуждений, поддержание дисциплины, выбор необходимого уровня детализации при объяснении материала для различных учащихся, учитель должен еще долго (если не всегда) делать значительно лучше компьютера. Не говоря уже о том, что компьютер никогда не заменит личностного общения учителя с учеником и родителями. Остановимся сейчас на некоторых дидактических особенностях уроков по информатике, вытекающих из специфического характера учебного материала предмета информатики. Эти особенности были подмечены Ю.А.Первиным уже в ходе экспериментальной работы по преподаванию программирования школьникам в период, предшествующий введению курса создания Web-страниц с помощью языка HTML школу. Обучение школьников в условиях постоянного доступа обычно проходит при повышенном эмоциональном состоянии учащихся. Объясняется это, в частности, тем, что при правильном формулировании заданий для ПЭВМ школьник обнаруживает состояние власти над «умной машиной». Это дает ему уверенности, у школьника возникает естественное стремление поделиться своими знаниями с теми, кто ими не обладает. Возникает благодатная почва для воссоздания на уроках по информатике такой организации обучения и контроля знаний, при которой определяемые учителем наиболее успешно работающие учащиеся начинают выполнять роль помощников учителя (в белль-ланкастерской системе взаимного обучения этих учеников -- помощников учителя -- называют мониторами). Элементы такой организации обучения, при которой руководить занятием малой группы может не только учитель, но и некоторые из наиболее сильных в знаниях по данной теме учеников, являются составной частью имеющей распространение в школе США педагогической системы, именуемой планом Трампа. Творческое применение этого подхода демонстрирует и передовой опыт учителей-практиков по разным школьным предметам. Причины явно проявляющегося феномена передачи знаний, обусловленные, очевидно, спецификой самого предмета информатики, требуют более глубокого и детального осмысления. При этом отмечается важное обстоятельство: наиболее благоприятной сферой для проявления этого феномена являются различные формы внеклассных занятий по информатике со школьниками (летние школы юных программистов, олимпиады, компьютерные клубы и т.п.), для которых характерна большая, чем на обычных уроках, свобода общения и перемещения школьников. В этих условиях широко наблюдается развитие межвозрастных контактов учащихся, при этом нередко возникают ситуации, когда младший школьник консультирует старшего, ученик консультирует студента, а студент консультирует преподавателя. Возникающая при этом демократическая система отношений сплачивает коллектив в достижении общей учебной цели, а фактор обмена знаниями, передачи знаний от более компетентных к менее компетентным начинает выступать как мощное средство повышения эффективности учебно-воспитательного процесса и интеллектуального развития учащихся. Важный обучающий прием, который может быть особенно успешно реализован в преподавании раздела создания Web-страниц с помощью языка HTML -- копирование учащимися действий педагога. Принцип «Делай как я!», известный со времен средневековых ремесленников, при увеличении масштабов подготовки потерял свое значение, ибо, вмещая в себя установки индивидуального обучения, стал требовать значительных затрат временных, материальных и кадровых ресурсов. Возможности локальной сети КВТ, наличие демонстрационного экрана позволяет во многих случаях эффективно использовать идею копирования в обучении, причем учитель получает возможность одновременно работать со всеми учащимися при кажущемся сохранении принципа индивидуальности. Специфические особенности учебного продукта в разделе создания Web-страниц с помощью языка HTML -- программы для ЭВМ -- позволяют эффективно использовать тот же программный модуль, изготовленный квалифицированным программистом, для всевозможных обучающих экспериментов. Например:

а) модуль запускается учащимися с различными исходными данными, а получаемые при этом результаты анализируются

б) учитель вводит в модуль ряд искусственных ошибок, предлагая ученику отыскать их и исправить;

в) в модуле «урезаются» некоторые из возможностей, которые ученик должен восстановить и сравнить затем результат своей работы с образцом. Можно привести немало других конкретных примеров учебного применения образцов готовых программ. Главное здесь в том, что ученик имеет возможность скопировать лучшие стороны готового программного продукта, который предъявляет ему учитель. Учителю же не составляет никакого труда преобразовать одно «учебное пособие» в другое, для этого лишь требуйте необходимым образом отредактировать предъявляемую учащимся программу-образец. Подобный материал концентрирует в себе методические находки учителя, может постепенно накапливаться в ходе работы. При этом не следует забывать, что конечный замысел образовательного процесса заключается в том, чтобы от принципа «Делай как я!» осуществлялся переход к установке «Делай сам!». Традиционные формы организации учебного процесса способствуют развитию коллективной учебной деятельности учащихся, при которой:

* цель осознается как единая, требующая объединения усилий всего коллектива;

* в процессе деятельности между членами коллектива образуются отношения взаимной ответственности;

* контроль за деятельностью частично (или полностью) осуществляется самими членами коллектива.

Как отмечал М.Н. Скаткин, «классно-урочную систему критикуют также и за то, что она в основном организует индивидуальную познавательную деятельность учеников и в ней почти совсем не находится места для подлинно коллективной работы». Между тем некоторые особенности содержания курса информатики, так же как и новые возможности организации учебного процесса, предоставляемые локальной сетью КВТ, позволяют придать коллективной познавательной деятельности учащихся новый импульс развития. Как отмечалось выше, вместе с введением курса создания Web-страниц с помощью языка HTML в школе стало возможным формирование у учащихся представлений об этапах решения задачи по примеру того, как это делается в реальной практике: от точной постановки задачи до анализа полученных результатов. Возможность рассмотрения таких задач обусловлена появлением на уроке ЭВМ, выступающей в качестве инструмента их решения. Однако введение в учебный процесс по курсу создания Web-страниц с помощью языка HTML «больших» задач обусловлено не только указанными выше целями курса создания Web-страниц с помощью языка HTML (в конце концов, рассмотрение полной совокупности этапов решения большой задачи является предметом лишь одной содержательной линии базового курса). Дело в том, что понятие «большой» учебной задачи может возникать даже на отдельном этапе ее решения, например на этапе разработки программы, если программа достаточно объемна и требует при разработке использования знаний и навыков, формируемых при изучении целого раздела (или темы) курса. Так или иначе, учитель может при организации соответствующих учебных ситуаций с успехом воспользоваться подходами, отработанными и испытанными в условиях производственного программирования: задачи разрабатываются на ряд подзадач, решение которых поручается отдельным учащимся (или группам учащихся). Такие задачи должны, следовательно, составлять целенаправленный компонент учебного обеспечения курса. Участие в коллективном решении задачи вовлекает школьника в отношения взаимной ответственности, заставляет их ставить перед собой и решать не только учебные, но и организационные проблемы. Все это чрезвычайно актуально с педагогической точки зрения, ибо современный школьный учебный процесс должен нацеливать на формирование не только образованной, но и социально активной личности, умеющей действовать, планировать и оптимально организовывать свои действия.

Выше рассмотрены лишь некоторые дидактические возможности, которые могут быть реализованы в ходе конструирования конкретной методической схемы преподавания учебного материала в условиях школьного урока. Но урок не является единственно целесообразной формой организации учебной работы по школьному курсу информатики. По большому счету поиск новых подходов и форм организации учебной работы с учащимися диктуется стремлением современной школы к развитию личности и интеллекта школьника в такой степени, чтобы выпускник школы был способен не только самостоятельно находить и усваивать ранее сгенерированную и обработанную информацию, но и сам генерировать новые идеи. Одним из направлений поиска решения этой проблемы является деятельностный подход к обучению, и в частности, так называемый метод проектов, который применяется к обучению теме создание Web-страниц с помощью языка HTML (говоря точнее -- обучению компьютерной технологии) может с успехом использоваться как на пропедевтическом этапе обучения, так и в старших звеньях средней школы. Учебный проект (УП) как педагогический феномен впервые появился в России в 20-х гг. прошлого века в сфере учебно-ремесленной» подготовки. Основанный на концепции «учения через деятельность» метод проектов успешно использовался для быстрого освоения (в основной своей массе неграмотными выходцами из деревень) рабочих профессий. Позднее метод УП был подвержен резкой критике за то, что он не обеспечивал системности образования. В настоящее время интерес к проектному методу организации учебного процесса вновь проявляется как на Западе, так и в России. Во многом этот феномен объясняется тем, что в условиях внедрения информационных и коммуникационных технологический учебный процесс, когда часть функций обучения передается средствам ИКТ или не может быть реализована без поддержки средства: ИКТ, деятельность учителя, организующего учебный процесс, целенаправленную и сложную по структуре работу ученика в получении, закреплении или контроле знаний, содержательно соответствует деятельности разработчика автоматизированных информационных систем, проектирующего новое рабочее место. Другими словами, учитель должен не только понимать, какие знания и в каком виде передаются ученику, как можно проверить полноту знаний, какую роль должны и могут сыграть эти знания в ИКТ, но и продумать и организовать сам процесс общения учеников со средствами ИКТ, сопоставить функции средств ИКТ, действия ученика, виды представления и способы подачи учебного материала с помощью средств ИКТ. В этом случае и идет речь о разработке учебного проекта, понимаемого как определенным образом организованная целенаправленная деятельность. Проектом может быть и компьютерный курс изучения определенной темы и логическая игра, и макет лабораторного оборудования, смоделированный на компьютере, и тематическое общение по электронной почте и многое другое. В простейшем случае (как, например, при использовании этого метода в начальной школе) в качестве «сюжетов» для изучения компьютерной графики привлекаются задачи проектирования рисунков животных, строений, симметричных узоров и т.п. В завершение укажем полученный на ОС конкретного опыта ряд условий, которые необходимо учить при использовании метода проектов:

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

2.Поскольку школьник не владеет проектным способом работы, он должен быть снабжен инструкцией по работе над проектом. При этом важно учитывать индивидуальные способности разных школьников (одни лучше усваивают материал, читая текст, другие - слушая объяснения, третьи - непосредственно пробуя, ошибаясь и находя решения в процессе практической деятельности).

3.Для ребенка важна практическая значимость полученного им результата и оценка со стороны окружающих. Поэтому УП должен предполагать для исполнителя законченность и целостность проделанной им работы, желательно в игровой или имитационной форме. Очень важно, чтобы завершенный проект был презентован и получил внимание взрослых и сверстников.

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

5. Метод проектов ориентируется главным образом на освоение приемов работы с компьютером (ИКТ). Обязательным компонентом процесса обучения является контроль, или проверка результатов обучения. Суть проверки результатов обучения состоит в выявлении уровня освоения знаний учащимися, который должен соответствовать образовательному стандарту по учебной дисциплине. Надо сказать, что введение образовательного стандарта по информатике вносит значительные изменения в методику проверки и оценки знаний и умений учащихся, которые направлены на повышение качества обучения. Исходя из того, что образовательным стандартом в соответствии с Законом РФ «Об образовании» «...нормируется лишь минимально необходимый уровень образованности, а именно тот, без которого невозможно развитие личности, продолжение образования», в нем реализуются как бы четыре ступени, постепенно приближающие к тем результатам обучения, которыми должен овладеть учащийся:

* общая характеристика образовательной области или учебной дисциплины;

* описание содержания курса на уровне предъявления его учебного материала школьнику;

* описание самих требований к минимально необходимому уровню учебной подготовки школьников;

* «измерители» уровня обязательной подготовки учащихся, т. е. проверочные работы и отдельные задания, включенные в них, по выполнению которых можно судить о достижении учащимися необходимого уровня требований.

Принципиальным новшеством предусматриваемой проектом стандарта по информатике процедуры оценивания уровня обязательной подготовки учащихся является то, что в основу процедуры оценки кладется критериально-ориентированная система, основанная на использовании дихотомической шкалы («зачет» -- «незачет»). В то же время для оценки достижений школьника на уровне, превышающем минимальные требования стандарта, целесообразно использовать аналог традиционной (нормированной) системы. В соответствии с этим проверка и оценка знаний и умений школьников должна вестись на двух уровнях подготовки: обязательном и повышенном. При этом возможны различные теологии такого контроля: включение в текущую проверку заданий обоих уровней, разделения этих видов контроля в процессе обучения и на экзамене [17, с. 136].

2.2 Примерный учебный план по теме «Создание Web-страниц с помощью языка HTML» в курсе информатики

№ п/п	Тема	Кол-во часов
1.	Язык гипертекстовой разметки документов HTML. История возникновения.	1
2.	Структура документа HTML	1
3.	Основные средства форматирования текста	1
4.	Создание гиперссылок	1
5.	Создание списков	1
6.	Создание таблиц	1
7.	Использование графики	1
8.	Создание фреймов	1
9.	Создание форм	1
10.	Лабораторная работа. Создание Web-сайта	1
ИТОГО	10

ЗАКЛЮЧЕНИЕ

Итак, нет никаких сомнений, что ускорение научно-технического прогресса, внедрение компьютеров в жизнь общества неотъемлемо отражаются на содержании образования. Такой предмет как информационные технологии становится наиболее популярным и востребованным в школе, да и вообще в обществе. Практически все поколения взаимодействуют с компьютерами и стремятся научиться пользоваться ими. А обучение, как уже говорилось, начинается в школе!

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

Первый аспект - системно-информационная картина мира, общие информационные закономерности строения и функционирования самоуправляемых систем (биологические системы общество, автоматизированные технические системы). Специфической особенностью этих систем является свойство их целесообразного функционирования, определяемое наличием в них органов, управляющих их поведением на основе получения, преобразования и целенаправленного использования информации.

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

Второй аспект данной области - методы и средства получения, обработки, хранения, использования и передачи информации, решения задач с помощью компьютера и других средств новых информационных технологий. Этот аспект связан прежде всего с подготовкой учащихся к практической деятельности, продолжению образования [9, с. 364].

...