Главная
База знаний "Allbest"
Педагогика
Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов
Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов
Особенности обучения учащихся с нарушением слуха. Специфика обучения школьников технологиям создания гипертекста. Разработка программы для обучения школьников 11-х классов с нарушением слуха технологиям создания Web–страниц с помощью языка HTML.
| Рубрика | Педагогика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 25.04.2011 |
| Размер файла | 3,9 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
<STRONG> Выделяет текст</STRONG>
Ш <VAR>…</VAR> - отмечает имена переменных программ.
Задайте значение переменной <VAR>n</VAR>
Отображение примеров, приведенных при описании тегов логического форматирования текста, показано на рисунке 1.
Рис.1. Примеры логического форматирования текста
Теги физического форматирования текста.
Ш <B>…</B> - отображает текст полужирным шрифтом.
Это <B>полужирный </B> шрифт.
Ш <I>…</I> - отображает текст курсивом.
Выделение<I>курсивом </I>.
Ш <TT>…</TT> - отображает текст моноширинным текстом.
Это <TT>моноширинный </TT> шрифт.
Ш <U>…</U> - отображает текст подчеркнутым.
Пример <U>подчеркивания </U> текста.
Ш <STRIKE>…</STRIKE> и <S>…</S> - отображает текст, перечеркнутый горизонтальной линией.
Пример<STRIKE>зачеркнутого </STRIKE>текста.
Ш <BIG>…</BIG> - выводит текст большего размера.
Шрифт <BIG>большего /BIG> размера.
Ш <SMALL>…</SMALL> - выводит текст шрифтом меньшего размера.
Шрифт<SMALL>меньшего </SMALL>размера.
Ш <SUB>…</SUB> - сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера.
Пример шрифта для<SUB>нижнего</SUB>индекса.
Ш <SUP>…</SUP> - сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера.
Пример шрифта для <SUP>верхнего</SUP>индекса.
Отображение примеров, проведенных при описании тегов физического
форматирования текста, показано на рисунке 2.
Рис.2.Примеры физического форматирования текста
Последний пример на рисунке 2 отображает использование вложенных
друг друга тегов.
А здесь текст <B><I>полужирный и курсивный </B></I>
Ш <FONT>…</FONT>- указывает параметры шрифта.
Параметры тега:
- FACE= Ѕтип шрифтаЅ - служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми.
<FONT FACE= “Verdana”, “Arial”, “Helvetica”>
Пример задания названия шрифта </FONT>
- SIZE= ЅчислоЅ- служит для указания размеров шрифта в условных
единицах от 1 до 7. Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+2).
<FONT SIZE =2> Шрифт размера 2 </ FONT >
- COLOR = ЅцветЅ - устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB.
<FONT COLOR= GREEN>текст зеленого цвета </FONT>или
<FONT COLOR= #FF0000>текст красного цвета</FONT>
Отображение примеров, проведенных при описании параметров тега <FONT>, показано на рисунке 3, а запись документа на языке HTML выглядит так:
<HTML>
<HEAD>
<TITLE>параметры тега FONT</TITLE>
</HEAD>
<BODY>
Текст, записанный шрифтом по умолчанию.<BR>
<FONT FACE= Verdana, Arial, Helverica> Пример задания названия шрифта
</ FONT> <BR>
<FONT SIZE=1> Шрифт размера 1 </ FONT >
<FONT SIZE =2> Шрифт размера 2 </ FONT >
<FONT SIZE =3> Шрифт размера 3 </ FONT >
<FONT SIZE =4>Это шрифт 4 </ FONT >
<FONT SIZE =5> Шрифт размера 5 </ FONT >
<FONT SIZE =6> Шрифт размера 6 </ FONT t>
<FONT SIZE =7> Шрифт размера 7 </ FONT >
<FONT FACE=Arial SIZE=5 COLOR=blue >Пример задания текста типа Arial, синего цвета, размера 5 </ FONT>
</BODY>
</HTML>
Рис.3. Применение параметров тега <FONT>
Ш <BASEFONT>…</BAZEFONT> - используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны для всего документа.
Любой документ необходимо форматировать. Документ HTML не исключение. Рассмотрим основные элементы форматирования HTML- документа.
§2.1.3 Форматирование HTML документа
Как и в Word, основной структуры текста в HTML является абзац.
Ш <P>…</P> - служит для выделения абзаца. Закрывающийся тег </P> не обязателен.
Параметры тега:
- LEFT- выравнивание текста по левой границе окна браузера.
- CENTER- выравнивание текста по центру окна браузера.
- RIGHT- выравнивание текста по правой границе окна браузера.
- JUSTIF - выравнивание текста по ширине окна браузера.
Ш <BR> - принудительный перевод строки.
Ш <NOBR> и <WBR>- запрещают перевод строки.
Ш <H1>…</H1>,…,<H6>…</H6>- заголовки. Заголовок с номером 1 - самый крупный, а с номером 6 - самый мелкий.
Параметр тега:
- ALIGN= ЅзначениеЅ- горизонтальное выравнивание. Имеет значения:
- LEFT- слева.
- CENTER- по центру.
- RIGHT- справа.
На рисунке 4 пример использования заголовков разного уровня с
различным выравниванием.
<HTML>
<HEAD>
<TITLE>Заголовки</TITLE>
</HEAD>
<BODY>
<H1> Заголовок размера 1 </H1>
<H2> Заголовок размера 2 </H2>
<H3 ALIGN= CENTER > Заголовок размера 3 </H3>
<H4 ALIGN= RIGHT > Заголовок размера 4 </H4>
<H5> Заголовок размера 5 </H5>
<H6> Заголовок размера 6 </H6>
Основной текст документа
</BODY>
</HTML>
Рис.4. Отображение заголовков различного размера
Ш <HR>…</HR> - позволяет провести рельефную горизонтальную линию.
Параметры тега:
- ALIGN= ЅзначениеЅ - выравнивает по краю или центру. Имеет
значения:
- LEFT- слева.
- CENTER- по центру.
- RIGHT- справа.
- WIDTH= ЅчислоЅ - устанавливает длину линии в пикселях или
процентах от ширины окна браузера.
- SIZE= ЅчислоЅ - устанавливает толщину линии в пикселях.
- NOSHADE - отменяет рельефность линии.
- COLOR= ЅцветЅ - указывает цвет линии.
<NR ALIGN= CENTER WIDTH= 50% NOSHADE >
Ш <PRE>…</PRE> - служит для включения в документ отформатированного текста. Такой текст будет отображаться, как он выглядит в обычном текстовом редакторе.
Ш <DIV>…</DIV> - служит для выделения фрагмента документа.
Ш <CENTER>…</CENTER> - предназначен для горизонтального выравнивания всех элементов окна браузера.
Ш <BLOCKQUOTE>…</ BLOCKQUOTE> - для выделения длинных цитат в тексте.
Ш <ADDRES>…</ADDRES> - применяется для идентификации автора документа и для указания адреса автора.
Специальные символы.
Некоторые специальные символы не входят в базовую часть таблицы
кодировок ACSII. Существуют символы непосредственно используемые в HTML-документах. Они будут интерпритированны не так, как задумал автор.
В таких случаях нужно вводить символ в HTML- документ при помощи специальных кодов:
- <- знак ЅменьшеЅ
- >- знак ЅбольшеЅ
-   - неразрывный пробел
- © - знак copyright
- & - амперсанд
- " - знак ЅкавычкиЅ
Одним из важнейших понятий для HTML- документа являются ссылки.
О них и пойдет речь в следующем параграфе.
§2.1.4 Гиперссылки
Гиперссылками (или просто ссылками) называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети.
Гиперссылка состоит из ЅвнутреннейЅ части, то есть, адреса документа, на которой она ссылается, и ЅвнешнейЅ части, видимой на экране и называемой якорем гиперссылки. Якорь гиперссылки может представлять из себя слово или группу слов, картинку или часть картинки. Если подвести указатель ЅмышиЅ к ссылке, он примет форму ладони с вытянутым указателем пальцем - и это самый надежный способ ее определить. При этом в строке состояния браузера можно будет прочитать адрес, на который указывает ссылка.
Кроме того, практически всегда текстовые ссылки выделены другим цветом и очень часто подчеркнуты. Графические ссылки часто заключены в рамку того же цвета, которым выделяются текстовые ссылки. По умолчанию это синий цвет, но каждая Web- страница может использовать свое собственное оформление. Цвет ссылок, которые уже выбрались пользователем, обычно отличается от цвета не посещенных ссылок и выглядит более ЅбледнымЅ (по умолчанию - фиолетовый).
Ш <A>…</A> - это служит для создания гиперссылки. В общем виде ссылку можно записать так:
<A HREF=Ѕ адресЅ TARGET= ЅокноЅ>текст ссылки</A>
Об адресах документов сказано ниже. Параметр TARGET может быть не указан, в этом случае документ открывается в текущем окне браузера, или указан в виде TARGET= Ѕ_BLANKЅ>, тогда документ открывается в новом окне. Текст ссылки внутри тега <A> может быть любым. Точно так же в тег <A> можно поместить и изображение.
Чтобы научиться создавать ссылки, нужно иметь представление о том, как адресуются документы в Сети.
Полный адрес документа в сети называется URL (Uniform Resource Locator; принято читать ЅурлЅ), URL может состоять из следующих частей:
Ш префикс протокола, то есть, указание на используемую сетевую службу. Основные протоколы, с которыми Вы столкнетесь:
- httr:// - основной протокол, обеспечивающий доступ к Web
страницам. Используется по умолчанию, потому часто не указывается в URL/
- ftr:// - протокол передачи файлов FTR, позволяющий при
помощи программы FTR- клиента обмениваться файлами с удаленным компьютером.
- mailto; - доступ к электронной почте. Вслед за mailto: указывается
адрес электронной почты, имеющий общий вид
имя_пользователя@адрес_почтового_домена.
- file:// - указывается вместо имени протокола при обращении к Web-странице, расположенной на локальной машине.
Ш доменное имя компьютера или его IP-адрес вместо доменного имени. Например, сервер МТУ-Интел имеет доменное имя www.intel.ru и IP-адрес 195.34.32.11;
Ш номер порта, через который происходит взаимодействие с сервером. Перед номером порта ставится двоеточие. С точки зрения пользователя указание порта бывает полезно, например, для ЅпринудительнойЅ перекодировки документа. Так. Адреса 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.
Ссылки бывают:
Ш абсолютная- ссылка, в которой указан полный 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>
Для создания закладки служит тег вида:
<A HREF =Ѕ закладка Ѕ>якорь закладки </A>.
Имена закладок должны быть уникальным в пределах документа.
При разработке собственного web-сайта для перехода между его страницами используются, как правило, относительные ссылки, что позволяет просматривать сайт на локальной машине, не внося в него изменений, а также при необходимости легко переместить сайт на другой сервер.
Далее рассмотрим одну из наиболее употребляемых форм представления данных.
обучение информатика гипертекст школьник
§2.1.5 Списки
HTML поддерживает нумерованный и маркированный списки.
Рассмотрим каждый из них.
Маркированный список.
Ш <UL>…<UL> - служит для создания маркированного списка. Внутри него располагаются все элементы списка.
Параметры тега:
- COMPACT - указывает браузеру, что список надо выводить в компактном виде.
- TYPE= ЅзначениеЅ - указывает вид маркера:
- circle - отображается закрашенными кружочками.
- disk - отображается не закрашенными кружочками.
- square - отображается закрашенными квадратами.
Ш <LI>…</LI> - заключает каждый элемент списка. Этот тег закрывать необязательно.
Отображение браузером маркированного списка показано на рисунке 5, а запись документа на языке HTML выглядит так:
<HTML>
<HEAD>
<TITLE>Маркированный список </TITLE>
</HEAD>
<BODY>
<UL TYPE="square">
<B>Знаки зодиака: </B>
<LI>Овен</LI>
<LI>Телец</LI>
<LI>Близнецы</LI>
<LI>Рак</LI>
<LI>Дева</LI>
<LI>Весы</LI>
<LI>Скорпион</LI>
<LI>Стрелец</LI>
<LI>Козерог</LI>
<LI>Водолей</LI>
<LI>Рыбы</LI>
</UL>
</BODY>
</HTML>
Рис.5. Отображение браузером маркированного списка
Нумерованный список.
Ш <OL>…<OL> - служит для создания нумерованного списка. Внутри него располагаются все элементы списка.
Ш Параметры тега:
- COMPACT - указывает браузеру, что список надо выводить в
компактном виде.
- TYPE= ЅзначениеЅ - указывает вид маркера:
- А - отображается в виде прописных латинских букв.
- а - отображается в виде строчных латинских букв.
- I - отображается в виде больших римских букв.
- i - отображается в виде маленьких римских букв.
- 1 - отображается в виде арабских цифр.
- START = ЅчислоЅ - позволяет начать нумерацию с цифры, отличной от 1 или буквы, отличной от A.
Ш <LI>…</LI> - заключает каждый элемент списка. Этот тег закрывать необязательно.
Для нумерованного списка можно изменить нумерацию, указав в теге
<LI> параметр VALUE= ЅчислоЅ.
Отображение браузером маркированного списка показано на рисунке 6, а запись документа на языке HTML выглядит так:
<HTML>
<HEAD>
<TITLE>Нумерованный список </TITLE>
</HEAD>
<BODY>
<OL>
<P><B>Знаки зодиака: </B></P>
<LI>Овен</LI>
<LI>Телец</LI>
<LI>Близнецы</LI>
<LI>Рак</LI>
<LI>Дева</LI>
<LI>Весы</LI>
<LI>Скорпион</LI>
<LI>Стрелец</LI>
<LI>Козерог</LI>
<LI>Водолей</LI>
<LI>Рыбы</LI>
</OL>
</BODY>
</HTML>
Рис.6. Отображение браузером нумерованного списка
Список определений.
Списки определений являются особым видом списков. Каждый элемент такого списка состоит из двух частей. В первой части элемента списка записывается определяемый термин, а во второй части - текст в форме словарной статьи, раскрывающий значение термина.
Ш <DL>…</DL> - задает списки определений.
Ш <DT>…</DT> - отмечает определяемый термин.
Ш <DD>…</DD> - отмечает абзац с его определением.
В общем список определений записывается следующим образом:
<DL>
<DT> Термин
<DD> Определение термина
</DL>
Параметр тега <DL>:
- COMPACT - указывает браузеру, что список надо выводить в компактном виде.
Отображение браузером списка определений показано на рисунке 7, а запись документа на языке HTML выглядит так:
<HTML>
<HEAD>
<TITLE> Список определений </TITLE>
</HEAD>
<BODY>
<DL>
<H1>Виды сетей </H1>
<DT> Локальные сети.
<DD> Объединяют несколько компьютеров, рассоложены в одном здании, дает возможность пользователям совместно использовать ресурсы компьютеров, а также подключенных к сети периферийных устройств(принтер, сканеров, модемов и др.) <BR><BR>
<DT> Региональные сети.
<DD> Объединяют множество компьютеров находящихся на большом расстоянии, в пределах одного региона, города. <BR><BR>
<DT> Корпоративные сети.
<DD>Сети организаций, которые хотят сохранять свою информацию в тайне <BR><BR>
<DT> Глобальные сети.
<DD> Объединяет компьютеры, находящиеся на огромном расстоянии, для общего пользования мировых информационных ресурсов.
</DL>
</BODY>
</HTML>
Рис.7. Отображение браузером списка определений
Комбинированные списки.
Для создания комбинированных списков теги нумерованных и маркированных списков можно вкладывать друг в друга. Простейший пример комбинированного списка показан на рисунке 8.
Рис.8. Отображение браузером комбинированного списка
Запись HTML кода выглядит так:
<HTML>
<HEAD>
<TITLE>Комбинированный список </TITLE>
</HEAD>
<BODY>
<UL>
<B>Спутники некоторых планет</B>
<LI>Земля
<OL>
<LI>Луна
</OL>
<LI>Марс
<OL>
<LI>Фобос
<LI>Деймос
</OL>
<LI>Уран
<OL>
<LI>Ариэль
<LI>Умбриль
<LI>Титания
<LI>Оберон
<LI>Миранда
</OL>
<LI>Нептун
<OL>
<LI>Тритон
<LI>Нереида
</OL>
</UL>
</BODY>
</HTML>
Наряду со списками существует еще одна очень распространенная форма представления данных - таблица. Поговорим о ней.
§2.1.6 Таблицы
Важным инструментом Web-дизайна являются таблицы, которые используются не только для вывода табличных данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа, цветовых эффектов и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончания ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа.
Описание таблиц должно располагаться в разделе документа <BODY>.
Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.
Ш <TABLE>…</TABLE> - служит для создания таблицы.
Параметры тега:
- ALIGH = ЅзначениеЅ - выравнивает всей таблицы относительно текста,
в котором она находится. Имеет значения:
- LEFT- слева.
- CENTER- по центру.
- RIGHT- справа.
- BORDER= ЅчислоЅ - ширина обрамления таблицы в пикселях.
- CELLSPACING= ЅчислоЅ - расстояние между ячейками в пикселях.
-CELLPADDING= ЅчислоЅ - размер свободного пространства между
границами ячейки и ее содержимым в пикселях.
- HSPACE= ЅчислоЅ - размер свободного пространства слева и справа от
таблицы, в пикселях.
VSPACE= ЅчислоЅ - размер свободного пространства сверху и снизу от
таблицы, в пикселях.
-WIDTH= ЅчислоЅ - требуемая ширина таблицы в пикселях или в процентах от ширины окна браузера.
- HEIGHT= ЅчислоЅ- требуемая высота таблицы в пикселях или в процентах от ширины окна браузера.
Ш <TR>…</TR> - строка таблицы.
Ш <TD>…</TD> - ячейка строки таблицы.
Ш <TH>…</TH> - ячейка заголовок таблицы.
Закрыть тег </TABLE> и теги строк и столбцов обязательно.
Параметры тегов <TR> и <TD>:
- ALIGN= ЅзначениеЅ - выравнивает объекты в ячейках. Имеет
значения:
- LEFT- слева.
- CENTER- по центру.
- RIGHT- справа.
- VALIGH= ЅзначениеЅ - выравнивает ячейки по вертикали. Имеет
значения:
- TOP- по верхнему краю.
- BOTTOM- по нижнему краю.
- MIDDLE- посередине.
- BAZELINE- по базовой линии.
- WIDTH= ЅчислоЅ - ширина ячейки.
- HOWRAP- запрещает браузеру распределять текст по всей ячейке.
- ROWSPAN= ЅчислоЅ - объединяет смежные ячейки по горизонтали.
- COLSPAN= ЅчислоЅ - объединяет смежные ячейки по вертикали.
Приведем пример простейшей таблицы, состоящей из двух строк и
двух столбцов, отображение которой показано на рисунке 9. А HTML код ниже.
<HTML>
<HEAD>
<TITLE>Пример простейшей таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>Ячейка 1 строки 1 </TD>
<TD> Ячейка 2 строки 1 </TD>
</TR>
<TR>
<TD> Ячейка 1 строки 2 </TD>
<TD> Ячейка 2 строки 2 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рис.9. Отображение браузером простейшей таблицы
Если ячейку следует оставить пустой, в нее обычно помещают ЅжесткийЅ символ пробела > 
Ш <CAPITON>…</CAPITON> - заголовок таблицы. Описание заголовка должно располагаться внутри тегов <TABLE>…</TABLE> до первого
тега <TR>.
Параметры тега:
- ALIGN= ЅзначениеЅ - выравнивает заголовок. Имеет значения:
- TOP - над таблицей.
- LEFT- слева.
- CENTER- по центру.
- RIGHT- справа.
Еще несколько параметров, позволяющих выбирать цвет рамок таблиц:
- BORDERCOLOR= ЅцветЅ - определяет цвет всех элементов рамок таблицы.
- BORDERCOLORLIGHT= ЅцветЅ - окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки.
- BORDERCOLORDARK= ЅцветЅ - задает цвета противоположных сторон.
Приведем пример таблицы с некоторыми заданными параметрами тега <TABLE>. Ее отображение показано на рисунке 10. А запись HTML кода представлена ниже.
<HTML>
<HEAD>
<TITLE>Пример </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=20 CELLSPACING=20 CELLPADDING=20 ALIGN=CENTER WIDTH=80% HEIGHT=80% BORDERCOLORLIGHT= blue BORDERCOLORDARK=red >
<CAPITON ALIGN=BOTTON><H1>Заголовок, располагаемый внизу таблицы </H1></CAPITON>
<TR>
<TD>Ячейка 1 строки 1 </TD>
<TD> Ячейка 2 строки 1 </TD>
</TR>
<TR>
<TD> Ячейка 1 строки 2 </TD>
<TD> Ячейка 2 строки 2 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рис.10.Отображение браузером таблицы с параметром тега <TABLE>
Далее приведем пример таблицы с некоторыми заданными параметрами тегов <TD> и <TR>. Ее отображение показано на рисунке 11. А запись HTML кода представлена ниже.
<HTML>
<HEAD>
<TITLE>Пример простейшей таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=100%
CELLSPACING=15 BORDERCOLOR=#000066>
<TR BORDERCOLOR RLIGHT= pink BORDERCOLORDARK=green >
<TH ALIGN=RIGHT>Ячейка 1 представлена как заголовок </TH>
<TD ALIGH =CENTER>Ячейка 2 </TD>
<TD >Ячейка 3 </TD>
</TR>
<TR>
<TD ALIGH =CENTER>Ячейка 4 </TD>
<TD >  </TD>
<TD ALIGN=RIGHT>Ячейка 6 </TD>
</TR>
<TR VALIGH=BOTTOM>
<TD ROWSPAN =2>Ячейка, захватывающая две строки </TD>
<TD COLSPAN=2> Ячейка, захватывающая две столбца </TD>
</TR>
<TR>
<TD>Ячейка 7</TD>
<TD>Ячейка 8</TD>
</TR>
<TR ALIGN=CENTER>
<TD>  </TD>
<TD>Ячейка 10</TD>
<TD WIDTH=40%>Ячейка шириной 40% от ширины окна браузера
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рис.11. Отображение браузером таблицы с параметром тегов <TD> и <TR>
Хочется отметить, что браузер Microsoft Internet Exporer позволяет использовать ряд новых тегов для структурирования таблиц и гибкого управления прорисовкой рамок и линий сетки.
Ш <THEAD> - используется для описания нижнего колонтитула таблицы.
Ш <TBODY> - используется для логического группирования данных.
Ш <TFOOT> - используется для описания нижнего колонтитула таблицы.
Управление прорисовкой линий и рамок вокруг таблицы
осуществляется параметрами тега<TABLE>:
-RULES= ЅзначениеЅ - прорисовка внутренних линий сетки таблицы.
Имеет значения:
-ALT- рисует все внутренние линии.
-GROUPS- рисует только линии, разделяющие группы.
- ROWS- рисует линии, разделяющие строки.
-COLS-рисует линии, разделяющие столбцы.
-NONE- внутренние линии не рисуются.
-FRAME= ЅзначениеЅ - прорисовка рамок вокруг таблицы. Имеет
значения:
-BOX или BORDER - рисует рамку со всех четырех сторон.
-ABOVE- рисует рамку только с верхней стороны.
-BELOW- рисует рамку только с нижней стороны.
-HSIDES- рисует нижнюю и верхнюю стороны.
-VSIDES- рисует левую и правую стороны.
-LHS- рисует только с левой стороны.
-RNS- рисует только с правой стороны.
-VOID- таблица без внешних рамок.
Приведем пример таблицы, созданной с использованием описанных возможностей. Ее отображение показано на рисунке 12, а ниже следует HTML код.
Рис.12. Отображение браузером таблицы с гибкой прорисовкой линий
<HTML>
<HEAD>
<TITLE>Дополнительные возможности</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=100% RULES=GROUP FRAME=HSIDES>
<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=CENTER>
<CAPTION><H1>Пример гибкого управления линиями <BR>сетки таблицы </H1><CAPTION>
<THEAD>
<TR>
<TH><H2>Заголовок столбца 1 </H2></TH>
<TH><H2>Заголовок столбца 2 </H2></TH>
<TH><H2>Заголовок столбца 3 </H2></TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Данные </TD>
<TD>Данные </TD>
<TD>Данные </TD>
</TR>
<TR>
<TD>Данные </TD>
<TD>Данные </TD>
<TD>Данные </TD>
</TR>
<TR>
<TD>Данные </TD>
<TD>Данные </TD>
<TD>Данные </TD>
</TR>
<TR>
<TD>Данные </TD>
<TD>Данные </TD>
<TD>Данные </TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TR>
<TD>Итог </TD>
<TD>Итог </TD>
<TD>Итог </TD>
</TR>
</TFOOT>
</TABLE>
<BODY>
</HTML>
Далее рассмотрим возможность использования графики при создании WEB-страниц.
§2.1.7 Графика
Возможность использования графики трудно переоценить в приложении к любому виду публикации, в том числе и для 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/ Это продемонстрировано на рисунке 13.
Рис.13. Отображение браузером использования фонового изображения
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY BGCOLOR= Ѕ#FFFFFFЅ BACKGROUND= Ѕ20.gifЅ>
<P>Пример использования фонового изображения </P>
</BODY>
</HTML>
Точно так же можно добавить фоновое изображение в таблицу, строку или ячейку таблицы - для этого достаточно указать параметр BACKGROUND= ЅURL рисункаЅ в теги <TABLE>, <TD>, <TR>.
Ш <IMG> - служит для встраивания изображения.
Параметры тега:
- SRC=ЅURL рисункаЅ- определяет URL-адрес файла с изображением.
Является обязательным параметром.
- WIDTH= ЅчислоЅ - ширина изображения в пикселях.
- HEIGHT= ЅчислоЅ - высота изображения в пикселях.
- BORDER= ЅчислоЅ - рамка вокруг изображения.
- HSPACE= ЅчислоЅ - отступ по горизонтали вокруг рисунка.
- VSPACE= ЅчислоЅ - отступ по вертикали вокруг рисунка.
- ALT= ЅтекстЅ - выводится вместо изображения.
- ALIGN= ЅзначениеЅ - выравнивает изображение. Имеет значения:
-TOP- верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
- TEXTTOP - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
- MIDDLE - выравнивание середины изображения по базовой линии текущей строки.
- ABSMIDDLE - выравнивание середины изображения посередине текущей строки.
- BASELINE или BOTTOM - выравнивание нижней границы изображения по базовой линии.
- ABSBOTTOM - выравнивание нижней границы изображения по нижней границе текущей строки.
- LEFT - изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны.
- RIGHT - изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.
Общая схема записи рисунка выглядит так:
<IMG SRC=ЅURL рисункаЅ WIDTH= ЅширинаЅ HEIGHT= ЅвысотаЅ BORDER= ЅрамкаЅ ALIGN= ЅвыравниваниеЅ HSPACE= Ѕ отступ по горизонтали Ѕ VSPACE= Ѕ отступ по вертикали Ѕ ALT= ЅтекстЅ>
Приведем пример использования некоторых параметров тега <IMG>. Отображение примера браузером показано на рисунке 14.
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<IMG SRC=AS.gif WIDTH= 260 BORDER= 10 ALIGN= right HSPACE= 20 VSPACE= 20>
<P ALIGN= JUSTIF > <B> Компьютерная сеть </B> - это система взаимосвязанных компьютеров и терминалов, предназначенных для передачи, хранения и обработки информации. </P>
<P>ВАРИАНТЫ ВЫРАВНИВАНИЯ ИЗОБРАЖЕНИЯ</P>
<IMG SRC=AМ.jpg WIDTH= 260 ALIGN= TOP HSPACE= 10 VSPACE= 10>
<IMG SRC=AМ.jpg WIDTH= 160 ALIGN= BASELINE HSPACE= 50 VSPACE= 50>
<IMG SRC=AМ.jpg WIDTH= 60 ALIGN= TEXTTOP HSPACE= 20 VSPACE= 20>
</BODY>
</HTML>
Рис.14. Отображение браузером использования параметров тега <IMG>
Графические изображения могут использоваться как ссылка на
другие ресурсы. Схема такой записи:
<A HREF= ЅадресЅ><IMG SRC=ЅURL рисункаЅ> текст ссылки </A>.
Важным элементом языка HTML являются фреймы. О них и пойдет речь дальше.
§2.1.8 Фреймы
Фреймами или кадрами называют независимые окна внутри окна браузера, в которых могут одновременно отображаться разные документы. Фреймы удобны при создании страниц, которые должны иметь как динамическое, так статическое содержимое. Например, узкий левый фрейм может содержать оглавление сайта, а широкий правый будет предназначен для вывода информации. Возможны также любые другие конфигурации.
Документ, использующий фреймы, содержит только описание внешнего вида фреймов.
Ш <FRAMESET>…</FRAMESET> - обрамляет каждый блок определений фрейма. Используется вместо тега <BODY>.
Параметры тега:
- ROWS= Ѕсписок величинЅ - описывает строки, таблицы фреймов.
- COLS= Ѕ список величинЅ - описывает столбцы, таблицы фреймов.
Строка Ѕсписок величинЅ представляет собой разделенный запятыми
перечень значений в пикселях, процентах или относительных величинах.
Примеры:
1. <FRAMESET ROWS = Ѕ100, 240, 140Ѕ> - создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселей соответственно
2. <FRAMESET COLS =Ѕ25%, 75%Ѕ> - создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера.
3. <FRAMESET COLS =Ѕ*,2*Ѕ> - создает 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.
4. <FRAMESET ROWS = Ѕ*,2*Ѕ COLS =Ѕ*,2*Ѕ> - создает сетку кадров.
- BORDER= ЅчислоЅ - указывает ширину обрамления всех рамок для
всех кадров, в пикселях;
- FRAMOBORDER= ЅзначениеЅ - включает или выключает
отображение обрамления кадров. Имеет значения yes или no (1 и 2). В случае yes рамка имеет трехмерную форму, иначе она невидима.
- FRAMESPACING= ЅчислоЅ - указывает ширину промежутка между
смежными кадрами в пикселях.
Ш <FRAME> - определяет одиночный фрейм. Располагается внутри тега
<FRAMESET>. Число тегов <FRAME> должно быть равно числу
кадров, определенных в теге <FRAMESET>, при этом считается, что
кадры описываются слева направо и сверху вниз.
Параметры тега:
- SRC= Ѕ URLЅ - указывает URL исходного документа для данного кадра.
- NAME= ЅстрокаЅ - указывает имя кадра. Это необходимо сделать,
если предполагается ссылаться из одних кадров на другие.
- SCROLLING= ЅзначениеЅ - управляет линейками прокрутки кадра.
Значение может быть задано в виде yes(линейки есть всегда), no (никогда) или auto(если необходимо).
- NORESIZE - запрещает изменяться размеры кадра. Опция
NORESIZE, указанная для данного кадра, влияет также и на все кадры, смежные с ним.
- FRAMEBORDER= ЅчислоЅ - включает или выключает отображение
обрамления кадров. Имеет значения yes или no (1 или 2). В случае yes рамка имеет трехмерную форму, иначе она невидима.
Указание этой опции в теге <FRAME> отменяет указание, сделанное в теге <FRAMESET> для данного кадра и всех, смежных с ним.
- MARGINHEIGHT= ЅчислоЅ - устанавливает ширину полей кадра.
- MARGINWIDTH= ЅчислоЅ - устанавливает ширину полей кадра.
Приведем пример самого простого HTML- кода с фреймами:
<HTML>
<HEAD>
<TITLE>Фреймы</TITLE>
</HEAD>
<FRAMESET COLS =Ѕ25%, 75%Ѕ>
<FRAME SRC= ЅA2.htmlЅ>
<FRAME SRC= ЅA3.htmlЅ>
</FRAMESET >
</HTML>
Отображение этого HTML- кода на экране браузера показано на рисунке 15.
Рис. 15. Отображение браузером HTML- документа с фреймами
Ш <NOFRAMES>…</NOFRAMES> - определяет содержимое, которое будет выводиться браузерами, не поддерживающими кадры.
А теперь рассмотрим полный HTML-код, создающий документ с
фреймами средней сложности:
<HTML>
<HEAD>
<TITLE>Фреймы</TITLE>
</HEAD>
<FRAMESET ROWS =Ѕ25%, 5O%, 25%Ѕ FRAMESPACING= 20>
<FRAME SRC= ЅA1.htmlЅ>
<FRAMESET COLS =Ѕ25%, 75%Ѕ>
<FRAME SRC= ЅA2.htmlЅ>
<FRAME SRC= ЅA3.htmlЅ>
</FRAMESET >
</HTML>
Этот пример создает страницу с фреймами, показанную на рисунке 16. Этот HTML- код определяет 3 фрейма.
Рис.16. Отображение браузером HTML- документа с фреймами
Ш <FRAME>…</FRAME> - реализует концепцию плавающих кадров.
Используется только для браузера Microsoft Internet Explorer. Для задания расположения и размеров плавающего фрейма в документе можно использовать дополнительные параметры: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и использование совпадает с соответствующими параметрами тега <IMG>.
Для создания ссылки из одного кадра в другой достаточно указать в
теге ссылки опцию вида TARGET= Ѕимя кадраЅ. Общую схему такой ссылки можно записать так:
<A HREF>= ЅURL нового документаЅ TARGET= Ѕимя кадраЅ>…</A>
Наряду с фреймами часто используют формы. Рассмотрим
возможность их использование при создании HTML- документов.
§2.1.9 Формы
Формы являются наиболее популярным способом "обратной связи" с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные формы для заказов или для того, чтобы получить от пользователей страницы какие- либо комментарии и пожелания.
Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую- то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.
Ш <FORM>…</FORM>- создаем формы.
Параметры тега:
Ш - ACTION= "URL" - указывает URL, который примет и обработает
данные формы. Если этот параметр не указан, данные отправляются по адресу страницы, на которой размещена форма.
- METHOD ="стиль" - указывает метод передачи данных программе- обработчику формы. "Стиль" может принимать одно из двух значений:
- get - предписывает посылать информацию формы вместе с URL,
- post - предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
- NAME = "имя " - указывает имя формы. Это необходимо, если требуется доступ к данным формы встроенного скрипта на JavaScript и Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.
- ENCTYPE = "кодирование" - задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде ENCTYPE= "text/plain"/
Приведем несколько примеров:
1. Заголовок формы, используемой на поисковой машине Яndex, имеет вид: <FORM NAME="web" METHOD= "get" ACTION="/yandscarch">
2. Заголовок формы, отправляющий информацию на адрес E-mail, может иметь вид:
<FORM ACTION= mailto@lvs.ru?subject=Internet-Test METHOD=ЅpostЅ ENCTYPE =Ѕtext/plainЅ NAME = "Q" ONSUMBIT=Ѕreturn Validate () Ѕ>
Внутри тега <FORM> находятся поля формы.
Ш <TEXTAREA>…<TEXTAREA> - задает многострочное поле ввода.
Параметры тега:
- NAME= ЅимяЅ - задает имя поля.
- COLS= ЅчислоЅ - указывает число столбцов.
- ROWS= ЅчислоЅ - указывает число строк.
- WRAP= ЅстильЅ - указывает на режим автоматического
распределения текста в ячейке. Она может принимать одно из значений: off(выключен), virtual(распределять текст по всей ячейке, но на сервер передавать как одну строку) или physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается).
Ш <SELECT>…</SELECT> - определяет в форме меню с одним или несколькими вариантами выбора или список с полосой прокрутки.
Параметры тега:
- NAME= ЅимяЅ
- SIZE= ЅчислоЅ - определяет размер списка. Если опция SIZE указана в виде SIZE=Ѕ1Ѕ, отображение элементов будет организованно в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов.
- MULTIPLE- разрешает выбирать из списка более одного значения.
Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.
Ш <OPTION>…</OPTION> - используется для написания текста, видимого в меню или списке на экране.
Параметры тега:
- VALUE= ЅзначениеЅ - указывает значение, возвращаемое программе обработки при выборе пользователем данного параметра.
- SELECTED - указывает на элемент списка, выбранный по умолчанию.
Ш <INPUT> - создает поле ввода. Предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы.
Параметры тега:
- TYPE= ЅзначениеЅ - указывает тип формы. Имеет значения:
- text - создает текстовое поле.
- password- создает текстовое поле с защитой вводимых символов.
- checkbox - создает «флажок».
- radio- создает радиокнопку.
- reset - создает кнопку для очистки формы.
- submit - создает кнопку для отправки данных формы приложению - обработчику.
- button - создает произвольную кнопку.
- NAME = ЅстрокаЅ - имя.
- MAXLENGTH= ЅчислоЅ - ограничивает максимальную длину вводимого текста.
- SIZE= ЅчислоЅ -показывает максимальное количество отображаемых
символов.
- VALUE= ЅстрокаЅ - указывает значение поля ввода или текст поля.
Пример разработки формы показан на рисунке 17.
Рис.17. Отображение браузером HTML- документа с использованием формы
Эта форма имеет следующий HTML-код:
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<FORM METHOD= ЅpostЅ
ACTION= Ѕmailto:kis@sibstrin.ru?subject=InformationЅ>
<PRE>Ваше имя:
<INPUT NAME= ЅnameЅ TYPE= ЅtextЅ MAXLENGTH= Ѕ40Ѕ
SIZE = Ѕ40Ѕ VALUE= ЅЅ>
Ваш пол:
<INPUT TYPE= ЅradioЅ NAME= ЅpolЅ
VALUE= ЅmaleЅ> Мужской
<INPUT TYPE= ЅradioЅ NAME= ЅpolЅ
VALUE= ЅfemaleЅ> Женский
На каком курсе Вы учитесь?
<SELECT NAME = ЅcursЅ SIZE= Ѕ1Ѕ>
<OPTION VALUE= Ѕ1Ѕ SELECTED>Первый </OPTION>
<OPTION VALUE= Ѕ2Ѕ>Второй </OPTION>
<OPTION VALUE=Ѕ3Ѕ>Третий </OPTION>
<OPTION VALUE=Ѕ4Ѕ>Четвертый </OPTION>
<OPTION VALUE=Ѕ5Ѕ> Пятый</OPTION>
</SELECT>
Какие языки программирования Вы знаете?
<INPUT TYPE= ЅcheckboxЅ NAME= ЅpascalЅ VALUE=ЅyesЅ
CHECKED>Паскаль
<INPUT TYPE= ЅcheckboxЅ NAME= ЅсЅ VALUE=ЅyesЅ >Си
<INPUT TYPE= ЅcheckboxЅ NAME= ЅasmЅ
VALUE=ЅyesЅ>Ассемблер
Напишите несколько слов о себе</PRE>
<TEXTAREA NAME= ЅaboutЅ ROWS=Ѕ6Ѕ COLS=Ѕ60Ѕ> WRAP=
ЅoffЅ><TEXTAREA>
<P> <INPUT TYPE= ЅsubmitЅ VALUE=ЅОтправить данныеЅ >
<INPUT TYPE= ЅresetЅ VALUE= ЅОчистить формуЅ>
</FORM>
</BODY>
</HTML>
Эта форма пытается отправить данные по указанному в заголовке адресу электронной почты, используя тему письма ЅInformationЅ. Дальнейшие события зависят от того, установлена ли на машине пользователя почтовая программа - клиент. Если да, то информация будет отправлена, причем данные из полей формы придет в виде строк текста NAME= VALUE, например, информация о курсе в виде curs=1. Если на машине нет программы электронной почты, Windows предупредит об этом.
Ш <PRE>…</PRE> - служит для лучшего выравнивания данных.
ГЛАВА III. РАЗРАБОТКА МЕТОДИКИ ОБУЧЕНИЯ РАЗДЕЛУ "СОЗДАНИЕ WEB - СТРАНИЦ С ПОМОЩЬЮ ЯЗЫКА HTML" ДЛЯ СЛАБОСЛЫШАЩИХ УЧАЩИХСЯ
§3.1 Методы обучения
Обучение информатики слабослышащих учащихся необходимо. И для полного понимания и глубокого изучения данного вопроса необходимы знания основных понятий по методам обучения. Существует много различных трактовок тех или иных понятий. В данной главе приведены лишь некоторые из них.
В педагогической практике методом обучения называют упорядоченный способ деятельности по достижению учебно-воспитательных целей. При этом отмечают, что способы учебной деятельности учителя (преподавание) и способы учебной деятельности учащихся (учение) находятся во взаимодействии. О методах обучения необходимо помнить, что это не сама деятельность, а способ её осуществления, который должен соотноситься с целью урока. Таким образом, методы обучения -- это способы совместной деятельности учителя и учащихся, направленные на решение задач обучения, воспитания и развития. Выбранный метод должен быть осознан, и отвечать возложенным на него задачам, тогда его применение будет эффективно. Методы реализуются в конкретных действиях, приемах, организационных формах с помощью различных средств обучения. Ни один метод в чистом виде не существует, а классификации построены на оценке не всех, а одного доминирующего свойства метода [8].
Н.В. Басова указывает, что существует более 200 определений понятия «метод». [2] Само слово метод в переводе с греческого означает исследование, способ, путь к достижению цели. Так, например в философском словаре отмечается: «метод - в самом общем значении - способ достижения цели, определенным образом упорядоченная деятельность» [21].
Герберт Нойнер и Ю.К. Бабанский под методом обучения понимают “последовательное чередование способов взаимодействи учителя и учащихся, цели посредством проработки учебного материала” [13].
М.Н. Скаткин дает следующее определение: «Метод обучения предполагает, прежде всего, цель учителя и его деятельности имеющимися у него средствами. В результате возникает цель ученика и его деятельности имеющимися у него средствами» [6].
Из всего вышесказанного можно сделать вывод, что метод - это сочетание способов и форм обучения, направленных на достижение определенной цели обучения. Таким образом метод содержит способ и характер организации познавательной деятельности учеников.
В отечественной дидактике существует несколько классификаций методов обучения.
1) По источникам получения информации: словесные, наглядные, практические.
а) Словесные методы (рассказ, объяснение, беседа, дискуссия, лекция, работа с текстом, инструктаж). Источником информации является слово. Данная деятельность осуществляется с использованием различных приемов (например, анализ, сравнение и т.д.).
б) Наглядные методы (иллюстрация и демонстрация). Метод иллюстрации предполагает показ ученикам иллюстративных пособий, плакатов, схем, таблиц, макетов, моделей, зарисовок на доске. Метод демонстрации связан с демонстрацией кинофильмов, слайдов, программ, опытов, работой устройств и пр Источником информации являются наблюдаемые объекты, процессы, явления.
в) Практические методы (упражнения, лабораторные и практические работы). Источником информации является практическая деятельность учащихся.
На уроках информатики используются все эти методы, поскольку невозможно представить себе эти уроки без единства словесных, наглядных и практических методов. Однако своеобразие состоит в том, что практическим методам уделяется больше времени, а из наглядных методов чаще используется демонстрация. При подготовке урока необходимо продумывать деятельность обучаемых, которая заключается в восприятии и осмыслении получаемой информации, в выполнении записей чертежей, схем, в работе с дидактическим материалом.
2) По характеру познавательной деятельности учащихся и участия учителя в учебном процессе: объяснительно-иллюстративный, репродуктивный, проблемный, частично-поисковый, исследовательский.
а) Объяснительно-иллюстративный метод. Учитель сообщает информацию разными средствами, используя различные методические приемы, а учащиеся воспринимают, осознают и запоминают ее. Без этого метода нельзя обеспечить целенаправленность учебно-воспитательного процесса.
б) Репродуктивный метод. Учитель с помощью системы заданий организует деятельность школьников по неоднократному воспроизведению ими знаний, тем самым формирует умения при решении аналогичных задач. Воспроизведение и повторение способа деятельности по заданиям учителя является главным признаком этого метода.
в) Проблемный метод. Учитель ставит проблему, сам ее решает, показывая путь ее решения в доступной учащимся форме. Учитель показывает образцы научного познания, научного решения проблем, а учащиеся следят за его логикой, усваивая этапы целостного решения проблем. Учитель может применить такой прием, как постановка заведомо нечеткой задачи, допускающей неоднозначное доопределение, коллективное обсуждение проблемы.
г) Частично-поисковый метод. Учитель расчленяет проблему на подпроблемы, намечает шаги поиска, а учащиеся осуществляют отдельные шаги поиска ее решения под руководством учителя, мотивируют свои действия, контролируют их выполнение.
д) Исследовательский метод. Ученик сам ставит перед собой проблему и ее решает. Этот метод обеспечивает творческое применение знаний на практике.
3) По используемым мыслительным операциям в процессе обучения: анализ, синтез, сравнение, обобщение, классификация, аналогия, абстракция.
а) Анализ. Следует учить разлагать объекты на составные части, выделять существенные свойства объекта. Анализ используется при постановке задачи (выделение аргументов и результатов), при выяснении причин ошибки в алгоритме.
б) Синтез. Необходимо уметь соединять отдельные части объекта в единое целое. Синтезом является решение задачи с использованием имеющихся средств, создание учащимися мысленной идеальной модели компьютерной среды, сборка алгоритма по технологии "снизу вверх". Анализ и синтез - это исходные операции мышления, которые не сводятся к каким-либо еще более простым операциям.
в) Сравнение. Сравнение используется для введения и освоения смысла понятия. Например, если учащийся в команде повторения с параметром перед завершением цикла увеличивает значение счетчика команд на единицу или в команде ветвления указывает тело цикла, то это говорит о том, что сравнение между различными командами было проведено некачественно.
г) Классификация связана с освоением большого объема материала и упорядочением знаний. Например, группировка команд в различных редакторах и процессорах по сходству и различию функций облегчает запоминание команд.
д) Аналогия и перенос позволяют повысить эффективность обучения. Например, если в текстовом процессоре имеется возможность редактировать и форматировать символы, то в электронной таблице возможны аналогичные действия над текстом.
Подобные документы
Специфика обучения курсу Adobe Photoshop школьников с нарушениями слуха. Анализ концепций обучения компьютерной графике в школьном курсе информатики. Назначение редактора растровой графики Adobe Photoshop. Формы, методы и средства проведения занятий.
дипломная работа [8,1 M], добавлен 16.06.2011Анализ адаптированной основной общеобразовательной программы начального общего образования для обучающихся с нарушениями слуха. Ознакомление с особенностями инклюзивного обучения. Выявление уровней навыков письма и чтения у школьников с нарушением слуха.
дипломная работа [1,8 M], добавлен 14.10.2017Научные основы развития фонематического слуха учащихся начальной школы в развивающей системе обучения. Педагогические условия применения, суть использования и роль звукового анализа слова в курсе русского языка. Сравнительный анализ систем обучения.
курсовая работа [1,5 M], добавлен 11.05.2009Системы обучения и воспитания детей с нарушением слуха: личностно-деятельная, интегрированная, билингвистическая, верботональная и Штайнеровская педагогика. Инклюзивное обучение детей и кохлеарная имплантация в реабилитации лиц с нарушением слуха.
курсовая работа [52,6 K], добавлен 04.05.2014Возможности включения ребенка с нарушением слуха в совместное обучение, особенности адекватной образовательной среды, методика требуемой коррекционной помощи. Положительные и отрицательные стороны образовательной интеграции детей с нарушением слуха.
курсовая работа [50,1 K], добавлен 09.12.2014Виды принципов обучения. Изучение иностранного языка. Принципы доступности и посильности. Особенности реализации принципов обучения младших школьников английскому зыку. Коммуникативность заданий. Билингвальные занятия школьников с учетом родного языка.
курсовая работа [38,1 K], добавлен 06.03.2014Теоретические основы использования тифлотехнических средств обучения математике младших школьников с нарушением зрения. Особенности обучения математике младших школьников с нарушениями зрения, исследование их познавательного интереса на уроках математики.
курсовая работа [1,1 M], добавлен 16.04.2019Теория и методика обучения информатике и информационно-коммуникационным технологиям в школе. Методы организационной формы обучения. Средства обучения информатики. Методика преподавания базового курса. Обучение языкам программирования, обучающие программы.
учебное пособие [2,1 M], добавлен 28.12.2013Психолого-педагогические особенности развития детей младшего школьного возраста с нарушением слуха. Условия формирования коммуникативных навыков младших школьников с нарушением слуха. Методы и приемы, используемые для формирования коммуникативных умений.
курсовая работа [51,0 K], добавлен 11.08.2014Особенности физического развития старшеклассников. Основные принципы игры в Дартс. Формы и методы обучения игре учащихся старших классов. Бросок - главный элемент в Дартсею, характеристика его фаз. Разработка методики обучения технике прицельного броска.
дипломная работа [1,1 M], добавлен 07.10.2016
