Сегодня, в век интернета, умение создавать web-страницы и сайты становится элементом общей культуры человека информационного общества. По этой причине разделу web-программирования отводится значительное место в программе изучения информатики и информационных технологий. В данном разделе интегрируются разные технологии – работы с текстом, графикой, звуком и с видеоинформацией, работы с файловой системой, что позволяет активизировать знания из разных разделов информатики. Изучение основ web-дизайна развивает художественный вкус.
Вместе с технологическими навыками, в этом курсе учащиеся сталкиваются и с понятиями объектно-ориентированного программирования при использовании скриптов на языке Java Script.
Знание языка HTML, а также умелое применение каскадных таблиц стилей (CSS) и скриптов позволяет создавать не только личные сайты, но и эффектные локальные приложения-презентации, проекты и другие учебные материалы.
Большим подспорьем в работе учителя по этой теме стали электронные учебники, созданные А.А.Дувановым (Роботландский сетевой университет): HTML-конструирование, HTML-конструирование 2 и JavaScript-конструирование.
Учебники созданы в виде гипертекстовых документов и с помощью изучаемых технологий, что позволяет изучать предмет не только снаружи, но и изнутри, т.е. сами по себе учебники можно рассматривать как наглядное пособие по изучаемым технологиям.
Учебники содержат подробный теоретический материал, большое количество примеров и практических упражнений в виде разнообразных испытателей, средства тестирования и творческие задания. В учебниках содержится также обширный справочный материал, к которому очень легко обращаться.
Все это позволяет использовать их для разных форм работы: как обучающее средство при индивидуальной или домашней работе, для проверки знаний, для отработки навыков и как справочное средство при творческой работе.
Рассмотрим работу с электронными учебниками на примере планов нескольких уроков.
Блок начального изучения HTMLПри изучении начальных сведений о языке HTML (структура HTML-документа, основные теги) нет необходимости в подробном чтении учебника.
На первом уроке объясняются понятия:
языка разметки и его отличие от языка программирования;
HTML-документа, его основных разделов, контейнера (обозначаемого открывающим и закрывающим тегами);
дается текст простейшего HTML-документа, который ученики сразу же создают на компьютере.
Акцентируется внимание на важности тега <TITLE>, вспоминаются понятия папки, пути к файлу, имени и расширения файла, навыки работы в простом текстовом редакторе (Блокнот), объясняются правила сохранения файла с новым расширением.
Обычно, преодолев трудности работы с латинской раскладкой клавиатуры и увидев набранное крупным шрифтом “Личная страничка Миши Кузнецова” в незнакомой программе со страшным названием “браузер”, дети испытывают легкий восторг и сожалеют о прозвеневшем звонке.
На втором уроке вводится понятие цвета фона и текста и способ его задания в теге <BODY> (атрибуты text, bgcolor). На первом этапе используются основные цвета и их словесные обозначения, хорошо (или не очень) известные из уроков английского языка.
Говорится о сочетаемости цветов, о влиянии цветового сочетания на читаемость текста и немного о психологическом значении цвета. Цвет – не самоцель, а средство повышения выразительности текста, улучшения его зрительного восприятия. Таким образом, закладываются элементы эстетического отношения к документу.
Как правило, у учеников сразу же возникает потребность узнать, а как выделить цветом отдельные слова, другие фрагменты текста. И здесь мы им рассказываем о теге <FONT> с атрибутом color, вводим тег <P> - абзац, с помощью которых дети с удовольствием занимаются раскраской своего небольшого текста во все цвета радуги.
На следующем уроке можно проконтролировать усвоение материала с помощью тестовых заданий 1 и 2 главы электронного учебника “HTML-конструирование”. Остальная часть урока отводится практическому закреплению знаний в ходе продолжения написания и редактирования текста и отработке навыкам редактирования документа в блокноте, его сохранению и обновлению содержимого в браузере – стандартным приемам написания web-cтраниц. Дополнительно вводится атрибут align, который применим к разным тегам и позволяет выравнивать текст по сторонам страницы.
На четвертом уроке вводится понятие списка и его разновидностей – маркированного и нумерованного, и даются правила задания списков с помощью тегов <UL>, <OL> и <LI>.
Для закрепления знаний учащиеся создают оглавление своего будущего сайта из нескольких пунктов в виде списка. Можно предложить детям посмотреть, как меняется вид списка, если заменить <UL> на <OL> и обратно. Если позволяет время, можно ввести атрибут type и посмотреть разновидности маркированного и нумерованного списков. Все эти манипуляции позволяют надежно закрепить навык HTML-мастера: “изменить – сохранить – обновить”.
Как видно из содержания уроков, на этом этапе, за исключением вопросов текущего контроля, большой необходимости использовать электронный учебник не возникает. Это относится и к следующему уроку, посвященному созданию гипертекста. Наряду с освоением этого нового понятия дети отрабатывают чисто технологические вопросы работы с файлами: создание, именование, копирование, сохранение, а также работы с фрагментами текста.
Новые страницы своего личного сайта создаются путем копирования и переименования головного файла с последующей корректировкой их содержимого. После создания новых страниц пункты оглавления превращаются в гипертекстовые ссылки с помощью тега <A> (здесь говорим о новозеландском масле ANCHOR и пытаемся вспомнить, какой предмет, относящийся к морю, изображен на его обертке; мало кто может вспомнить о якоре, а ведь именно от этого слова образовано обозначение тега гиперссылки).
Важно в этом месте акцентировать внимание на строгости правил написания тега и его атрибутов: недопустимость лишних пробелов, не забывать правильно писать расширение, приучаться использовать в именах только маленькие латинские буквы – в соответствии с требованиями интернета).
Более активное использование электронного учебника требуется при изучении тем, связанных с размещением на страницах графики и таблиц, для чего используются теги с большим количеством разнообразных атрибутов. Освоить все эти атрибуты позволяют встроенные в учебник разнообразные испытатели.
На уроке, посвященном вставке изображений, прежде всего, говорим о графических форматах, используемых в интернете, и подробно – об особенностях двух основных форматов: gif и jpeg. Вводится тег <IMG> с основным атрибутом src и атрибутами задания размера, рамки, выравнивания и альтернативной надписи. Отмечаются важные аспекты их использования, после чего дети пытаются создать изображение на своей страничке. Здесь хочется еще раз поблагодарить А.А. Дуванова за замечательную подборку забавных анимированных картинок с изображениями разных зверушек, которая содержится в учебнике.
После того, как на страничках запрыгают лошадки и кролики, заходят тигры и замурлыкают коты, возникает потребность привести в порядок их пропорции и размеры, расположение на странице. И здесь приходят напомощь испытатели, с помощью которых дети учатся осознанно задавать размеры своих картинок с учетом размера и разрешения экрана, решать композиционные задачи.
Рисунок 1.
Довольно непростая задача добиться нужного взаиморасположения картинки и текста, получает одно из решений с помощью таблиц. Уроки, посвященные таблицам, имеют главной целью научить, с их помощью, располагать материал на странице.
Материал довольно сложный и объемный, что обусловлено большим количеством различных атрибутов и способов их задания. И здесь так же на помощь приходят испытатели в еще большем количестве сообразно сложности материала. Здесь важно не напугать детей сложностью вопросов, а аккуратно провести их по всей цепочке вопросов, опираясь на практические надобности детей (создать которые можно искусственно).
Дополнив материал уроков вопросами структуры сайта, правилами пунктуации компьютерных текстов, вставки специальных символов, можно дать ученикам достаточный для самостоятельной работы материал. Сформированный навык обращения к учебнику, будет помогать им самостоятельно искать ответы на возникающие вопросы, как в тексте учебника, так и в специальных справочных приложениях.
Особо следует отметить такое приложение к учебнику, как “Кухня Сидорова”, где приводятся практические рецепты приготовления web-сайтов.
Динамический HTML
В старших классах разбираются вопросы создания динамических страниц с использованием технологий каскадных таблиц стилей (CSS) и языка программирования Java Script. При изучении этих вопросов используются учебники “HTML-конструирование 2” и “JavaScript-конструирование”. Учебники выполнены в таком же стиле: изложение материала – испытатели – тесты – творческие задания.
Учебник “HTML-конструирование 2” содержит большое количество практически необходимых примеров, разбор которых ведет к пониманию теоретических положений динамического HTML. Например, изучение вопросов, связанных с формами, наряду с практическими навыками по разработке разного рода тестов, дает освоение понятий объектно-ориентированного программирования. Учебник “JavaScript-конструирование” предназначен для углубленного изучения языка объектно-ориентированного программирования.
Все примеры учебников имеют открытый код, который учащиеся могут использовать для создания собственных стилей и скриптов. Очень полезны справочные приложения и та же “Кухня Сидорова”.
Можно долго перечислять примеры использования электронных учебников на уроке и во внеурочной деятельности. Важно то, что они дают преподавателю огромный учебно-методический и справочный материал, и большой простор в выборе средств и форм использования этого материала для обучения.