Представленные дидактические материалы разработаны для проведения уровков по основам HTML, базовый уровень, рассчитанный на 2 часа в неделю, всего 70 часов. Именно тема «HTML5» позволяет комплексно подойти к развитию как этих умений, так и основных мыслительных операций, а также способствует развитию общего интеллекта за счет рассмотрения различных областей знаний. Таким образом, формируются и совершенствуются:
Умение осуществлять поиск и отбор нужной информации;
Умение использовать различные источники информации, в том числе ресурсы глобальной сети Интернет;
Механическая и логическая память;
Умение анализировать, выделять существенные признаки, обобщать, делать выводы;
Умение взаимодействовать и взаимовыгодно сотрудничать в группе при разработке проектов. Дидактические материалы представлены в компактном виде, удобном для распечатки и раздачи всем учащимся либо в виде карточек для этапа первичного закрепления нового материала, либо как материала для проверочной работы на оценку на этапе проверки знаний. Для слабоуспевающих учеников возможна работа в паре. В карточке представлены основные теги языка HTML5, коды некоторых специальных символов, а также приведен пример HTML-кода страницы, увидеть их можно в приложении.
ЗАКЛЮЧЕНИЕ
Современный период в развитии информационногообщества ознаменовалсясоромным влиянием на него все новых и новых компьютерных технологий, пронимающимабсолютно во все сферы жизни как отдельного человека, так и всего общества в целом. Данные технологии обеспечивают повсеместное распространение потоков информации, формируя всеобъемлющее глобальное пространство, или как сейчас говорят про некоторые части этого пространства — «облако».Технологии стали на нынешнем этапе не дополнительным аспектом процесса обучения, а огромной частью общего процесса обучения и погружения в профессию, при этом в огромной степени повышая качество самого обучения. Можно отметить, что, не смотря на широчайшее распространение технологии мультимедиа в школе еще не нашли должного в полной степени применения. В тех школах, где происходит процесс обучения на компьютерной технике, вероятнее всего не все его возможности реализуются в полном масштабе. Большая часть преподавателейкак правило не особо владеет на должном профессиональном уровне компьютерными технологиями и имеют необширные преставления о способах их применения в обучении. Уроки с использованием мультимедиа технологий в большем числе случаев ведут именно учителя информатики, из-за особенностей своей профессиональной подготовки. Подводя итог, можно декларировать следующие направления внедрения информационных технологий, в том числевизуализации, в рамках применения дидактических материалов в образовании: применение компьютерной техники как средства обучения через визуализацию, которое увеличивает качество процесса преподавания;
использование компьютерных технологий в качестве инструментов обучения, познания себя и действительности; рассмотрение информационных технологий и других современных средств информационных технологий в качестве объектов изучения; использование средств новых информационных технологий в качестве средства творческого развития обучаемого, повышения уровня его образного мышления; реализация компьютерных технологийкак определенного рода средств автоматизации процессов контроля, коррекции, тестирования и психодиагностики; графические — представление результатов деятельности в конкретной и наглядной форме (текстовой, звуковой, в виде рисунков и пр.).
СПИСОК ЛИТЕРАТУРЫ
.
http://html-5.ru/articles/istoriya-yazyka-html5.phpГорячев, А.В. О понятии Информационная грамотность: Информатика и образование / А. В. Горячев. — М., 2010. — 369 с. Иванов, В. Л. Электронный учебник: системы контроля знаний / В. Л. Иванов: Информатика и образование.
— М., 2002. — 375 с. Калягин, И. Н. Новые информационные технологии и учебная техника / И. Н. Калягин. — М.: Высшее образование в России, 2009. ;
289 с. Кан-Калик, В. А. Педагогическое творчество: учебное пособие / Кан-Калик В. А., Никандров Н.
Д. — М.: Педагогика, 2011. — 382 с. Караковский, В. А. Воспитание?
Воспитание! / Караковский В. А., Новикова Л. И., Селиванова Н.
Л. — М.: Новая школа, 2002. ;
160 с. Кларин, М. В. Технология обучения: идеал и реальность / М. В. Кларин. — Рига, «Эксперимент», 2011. ;
180 с. Клейман, Г. М. Школа будущего: компьютеры в процессе обучения: Пер. с англ. / Г. М. Клейман. — М.: Радио и связь, 2004. — 347 с. Коул, М.
Д. Новые информационные технологии, основные навыки и изнанка образования: что следует делать? / Социально-исторический подход в психологии обучения / Под ред. М. Коула. — М.: Педагогика, 2004.
— 179 с. Левитес, Д. Г. Практика обучения: образовательные технологии / Левитес Д. Г. — М., 2004. ;
258 с. Молоков, Ю. Г. Актуальные вопросы информатизации образования: Сборник научных трудов / Ю. Г. Молоков. — Новосибирск, 2012. — 376 с. Мясоед, Т. А. Интерактивные технологии обучения: Спец. семинар для учителей / Т. А. Мясоед.
— М., 2004. — 346 с. Пидкасистый П. И. Искусство преподавания / Пидкасистый П. И., Портнов М.
Л. — М.: Рос. пед. агентство&# 187; 2003. — 184 с. Полат, Е. С. Новые педагогические технологии: Пособие для учителей / Е. С. Полат.
— М., 2002. — 442 с. Роберт, И. В. Информационные технологии в науке и образовании / И. В. Роберт. — М.: Школа-Пресс, 2012. — 429 с. Роберт, И. В. Современные информационные технологии в образовании.
— М.:Школа-Пресс, 2005. — 367 с. Соколовой, Э. С. Педагогические мастерские: Франция-Россия / Под ред. Э. С.
Соколовой. — М.: Новая школа, 2002. ;
128 с. Столяренко, Л. Д. Педагогические технологии. — В 2 кн.: Педагогика и психология высшей школы// Столяренко Л. Д.- Ростов-на-Дону: Феникс, 2001. — с.
269.Цукерман, Г. А. Инновации в мировой педагогике / Цукерман Г. А.- Рига, «Эксперимент», 2005.
— 180 с. Щуркова, Н. Е. Новые технологии воспитательного процесса / Щуркова Н. Е. — М., 2005.
— 365 с. Щуркова, Н. Е. Практикум по педагогической технологии / Щуркова Н. Е.- М., 2004. — 250 с. ПРИЛОЖЕНИЕТаблица основных тегов HTML5Основные теги<html></html> Начало и конец HTML документа.<head></head> Описание страницы.<body></body> Тело документа.<title></title> Название документа, которое помещается в строку заголовка браузера. Атрибуты тела документа<bodybgcolor="?" > Цвет фона документа в виде #RRGGBB или названия цвета (red).<body background="полноеимяфайла" > Фоновое изображение.<bodytext="?" > Цвет текста документа.<bodylink="?" > Цвет гиперссылок.<bodyvlink="?" > Цвет посещенных гиперссылок.<bodyalink="?" > Цвет гиперссылок при нажатии.<body leftmargin="?" rightmargin="?" topmargin="?" bottommargin="?" > Границы в пикселях левого, правого, верхнего и нижнего поля документа. Форматирование текста<b></b>Жирный текст (физическое форматирование).<i></i>Наклонный текст (физическое форматирование).<u></u>Подчеркнутый текст (физическое форматирование).<tt></tt>Текст, имитирующий стиль печатной машинки (физическое форматирование). &.
lt;sub></sub>Нижний индекс (физическое форматирование).<sup></sup>Верхний индекс (физическое форматирование).<kbd></kbd>Текст, имитирующий стиль печатной машинки (логическое форматирование).<cite></cite>Выделение цитат курсивом (логическое форматирование).<em></em>Наклонный текст (логическое форматирование).<strong></strong>Жирный текст (логическое форматирование).<fontface="?" ></font>Гарнитура шрифта.<fontsize="?" ></font> Размер текста в пределах от 1 до 7.<fontcolor="?" ></font> Цвет текста. Форматирование абзацев<h1></h1>…<h6></h6>Заголовок (уровни от 1 до 6).<p></p>Новый абзац.<p align="?" ></p>Выравнивание абзаца, значения: left, right, justify или center.<nobr>Запрещает перевод строки.<wbr>Мягкий перевод строки.<br>Вставляет перевод строки.<pre></pre>Предварительно отформатированный текст.<blockquote></blockquote> Выделение цитат в отдельный абзац с отступом.<address></address>Адрес автора.<divalign="?" ></div>Выделение фрагмента документа для его форматирования.<center></center>Выравнивание блока документа по центру. Списки<dl></dl>Список определений.<dt>Термин определения.<dd>Определение термина.<ol></ol>Нумерованный список.<li>Определяет каждый элемент списка и присваивает номер.<ol type="?" ></ol>Тип нумерации, значения: A, a, I, i, 1.<ol start="?" ></ol>Первый номер списка.<ul></ul>Маркированный список.<li> Определяет каждый элемент списка и добавляет кружок или квадратик.<ultype="?" ></ul>Тип маркера, значения: disс, circle, square. Гиперссылки<a href="URL" ></a>Гиперссылка на другие сайты.<a target="?" ></a>Указывает, в каком окне открывать гиперссылку, значения: _Blank — в новое пустое окно; _Parent — в окно, занимаемое фреймом-родителем текущего фрейма; _Self — в текущее окно; _Top — в полное окно. При использовании фреймов и вложенных фреймов значением может выступать имя фрейма или вложенной сетки фреймов, при этом страница откроется в указанной части окна.<a href="полное имя файла" ></a>Гиперссылка на другую страницу сайта.<a href="mailto:EMAIL" ></a>Гиперссылка на адрес электронной почты.<a href="#имяметки" ></a>Гиперссылка на метку текущей страницы.<a name="имяметки" ></a>Определение метки.<ahref="полное имя файла#имя метки" ></a>Гиперссылка на метку другой страницы. Графические элементы<imgsrc="полное имя файла" >Вставка изображения.<imgsrc="имя файла" align="?" >Выравниваниеизображения, значения: left, right, center; bottom, top, middle.<imgsrc="имяфайла" width="?" >Ширина изображения.<imgsrc="имяфайла" height="?" >Высота изображения.<imgsrc="имяфайла" border="?" >Толщина рамки вокруг изображения.<imgsrc="имя файла" vspace="?" >Отступ текста от изображения сверху и снизу.<imgsrc="имя файла" hspace="?" >Отступ текста от изображения слева и справа.<imgsrc="имя файла" alt="?" >Всплывающая подсказка при наведении на изображение.<hr>Горизонтальная линия.<hralign="?" >Выравнивание горизонтальной линии.<hrsize="?" >Толщина линии.<hrwidth="?" >Ширина линии в пикселях или процентах.<hrnoshade>Линия без тени.<hrcolor="?" >Цвет линии. Таблицы<table></table>Начало и конец таблицы.<tr></tr>Строка таблицы.<td></td>Ячейка в строке таблицы.<th></th>Ячейка-заголовок.<captionalign="?" ></caption>Заголовок таблицы, значения выравнивания: top, bottom. Атрибуты таблицы<tableborder="?" >Толщина рамки.<tablecellspacing="?" >Расстояние между ячейками таблицы.<tablecellpadding="?" >Расстояние между содержимым ячейки и ее рамкой.<tablewidth="?" >Ширина таблицы в пикселях или процентах от ширины документа.<tableheight="?" >Высота таблицы в пикселях или процентах от высоты документа.<tr align="?" > или <td align="?" >Выравнивание текста в ячейках, значения: left, center, или right.<trvalign="?" > или <td valign="?" >Вертикальное выравнивание текста в ячейках, значения: top, middle, или bottom.<tdcolspan="?" >Объединение ячеек по горизонтали.<tdrowspan="?>Объединение ячеек по вертикали.<tdnowrap>Не позволяет программе просмотра делать перевод строки в ячейке таблицы.<tdwidth="?" >Ширина ячейки в пикселях или процентах от ширины таблицы.<tdheight="?" >Высота ячейки в пикселях или процентах от высоты таблицы.<table bgcolor="?" > или <trbgcolor="?" > или <td bgcolor="?" >Цвет фона.<table bordercolor="?" > или <trbordercolor="?" > или <td bordercolor="?" >Цвет рамки.<table background="имяфайла" > или <td background="имяфайла" >Фоновое изображение. Фреймы<frameset></frameset>Блок определений фрейма.<frameset rows="?,?" >Строки в таблице фреймов, высота которых определена количеством пикселей или в процентном соотношении к высоте таблицы фреймов.<framesetcols="?,?" >Столбцы в таблице фреймов, ширина которых определена количеством пикселей или в процентном соотношении к ширине таблицы фреймов.<frame>Единичный фрейм или область в таблице фреймов.<noframes></noframes>Определяет, что будет показано в окне браузера, если он не поддерживает фреймы. Атрибуты фреймов<framesrc="URL" >Определяет, какой из HTML документов будет показан во фрейме.<framename="имя фрейма" >Имя фрейма.<framemarginwidth="?" >Отступ по левому и правому краям внутри фрейма.<framemarginheight="?" >Отступ по верхнему и нижнему краям внутри фрейма.<framescrolling="?" >Полоса прокрутки, значение: yes, no, или auto. & lt;framenoresize>Препятствует изменению размеров фрейма пользователем. Формы<form></form>Начало и конец формы.<select multiple name="NAME" size="?" ></select>Меню с полосой прокрутки. S ize устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.<option>Отдельный элемент меню.<selectname="NAME" ></select> Раскрывающийся список. & lt;option> Отдельный элемент списка.<textarea name="NAME" cols=40 rows=8></textarea>Окно для ввода текста. C.
ols указывает ширину окна; rows — его высоту.<input type="checkbox" name="NAME" value="?" >Группа флажков выбора.<input type="radio" name="NAME" value="?" >Группа радио-кнопок.<input type="text" name="NAME" size=20>Строка для ввода текста. Параметром Size указывается длина в символах.<input type="submit" value="Отправить" >Создает кнопку «Отправить» <input type="reset" value="Очистить" >Создает кнопку «Очистить» Некоторые специальные символы.
ИмяКод.
ВидОписание" " «двойная кавычка неразрывный пробел § § § параграф © © © знак copyright„ « „левая двойная угловая скобка ® (r) ® знак зарегистрированной торговой марки ° ° ° градус ± ± ± плюс-минус “ » „правая двойная угловая скобка Пример HTML документа<html><head><title>Моя первая страница</title></head><body background="back.jpg“ link="blue“ alink="red» vlink="green" ><font face="verdana" size="3″ ><center><h2>Приветвсем!</h2></center><hr color="#0BB0FF" size="3″ ><imgsrc="comp.gif" align="right" alt="Это я!" hspace="20″ vspace="20″ > <p align="justify" >Менязовут.
Никита! Я учусь в лицее-интернате при СГТУ и очень люблю информатику.</p><palign="justify" >Еще я увлекаюсь автомобилями. Поэтому мой сайт посвящен им.</p><center><b><a href="index.htm" >[Главная]</a> <ahref="otech.htm" >[Отечественные автомобили]</a> <ahref="ino.htm" >[Иностранные автомобили]</a> <a href="foto.htm" >[Фотогалерея]</a> <a href="gost.htm" >[Гостевая]</a></b></center><address><p align="right" >(c)Романов.
Никита</p></address></font></body></html>Для примера дидактических материалов по изучению HTML 5 возможно привести дидактическую таблицу для сравнительного анализа браузеров, которые используют данный язык.ChromeOperaFirefoxЭлементы.
Интерактивные элементы.
МикроданныеВход.
Доступ к веб-камере.
ВидеоВидеоэлементDRMподдержка.
Поддержка субтитров.
Поддержка изображений.
Поддержка MPEG-4Поддержка H.264Поддержка OggTheoraПоддержка WebMс VP8Поддержка WebMс VP9Аудио.
АудиоэлементWebAudioAPIРаспознавание речи.
Поддержка AACПоддержка MP3OggVorbisподдержкаOggOpusподдержкаWebMс VorbisподдержкаWebMс Opus поддержка2D графикаCanvas3D графикаWebGLWebGL 2Проверка орфографии.
История и навигацияWeb-приложения.
Кэш приложений.
