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

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

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

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

§3.2 Формы обучения.

Форма обучения - это организованное взаимодействие преподавателя и ученика. Формы обучения могут быть: дневная, заочная, вечерняя, самостоятельная работа учеников (под контролем преподавателя и без), индивидуальная, фронтальная и т.д. [2].

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

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

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

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

Групповая форма работы учащихся на уроке наиболее применима и целесообразна при проведении практических работ, лабораторных и работ-практикумов по естественнонаучным предметам; при отработке навыков разговорной речи на уроках иностранного языка (работа в парах), на уроках трудового обучения при решении конструктивно-технических задач, при изучении текстов, копий исторических документов и т.п

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

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

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

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

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

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

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

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

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

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

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

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

Самостоятельная работа

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

• Большую роль в развитии самостоятельного мышления ученика играет систематически проводимая и правильно организованная письменная самостоятельная работа.

По своему назначению самостоятельные работы можно разделить на два вида:

• обучающие (цель - выяснить, насколько прочно усвоены основные понятия, как они связаны между собой, как учащиеся осознают иерархию этих понятий, выделяют их существенные и несущественные свойства);

• контролирующие (цель - проверить умение учащихся применять на практике полученные знания);

Контрольная работа

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

1. проверочные контрольные работы - предназначены для проверки усвоения отдельного фрагмента курса в период изучения темы;

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

• Контрольная работа является составной частью процесса обучения и несет на себе образовательную, воспитательную и развивающую функции.

§3.3 Пояснительная записка

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

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

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

Курс «Создание Web-страниц» дает возможность учащимся самим создавать продукты, которые можно применять в сети Интернет.

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

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

Место курса в образовательном процессе

Цель курса

1. Формирование навыков языка гипертекстовой разметки документов и получение навыков работы учащимися в web-страниц.

Задачи данного курса:

1. Сформировать у учащихся базовые представления о языке гипертекстовой разметки HTML.

2. Научить создавать Web-страниц в редакторе.

3. Выработать у учащихся навыки самостоятельной работы с компьютером.

4. Развивать у учащихся общепользовательские умения и навыки.

5. Познакомить с визуальном HTML-редактором: БЛОКНОТ.

Концепция курса

Курс состоит из лекций и практических работ учащихся. Лекционные занятия раскрывают основные проблемные вопросы по каждому разделу. Практические работы предназначены для приобретения практических навыков работы на ПК.

Образовательные результаты

Учащиеся должны знать:

-основные понятия web-страниц

Учащиеся должны уметь:

-пользоваться инструментальными средствами создания web-страниц

Учащиеся должны получить навыки:

-самостоятельной познавательной деятельности

Требования к знаниям учащихся

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

Предполагается, что ученики знакомы с основами работы в Windows и в простом текстовом редакторе Блокнот.

Данный курс состоит из трех блоков:

--знакомство с основами языка гипертекстовой разметки документов;

Формы и методы изучения данного курса: лекции и практические работы

Дидактическая и методическая поддержка

комплект практических работ;

Технической поддержкой курса служат персональные компьютеры с установленным программным обеспечением Блокнот.

Часть занятий представляет собой самостоятельное выполнение практических работ.

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

Во время выполнения учитель оказывает индивидуальную помощь, разъясняя принципиальные моменты работы.

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

§ 3.4 Программа

Введение в Hyper Text Markup Language(HTML) - 9 часов.

Структура HTML-документов. Форматирование текста. Создание списков в HTML- документе. Создание гиперссылок. Создание таблиц в HTML-документе. Вставка графики в HTML-документе. Фреймы. Формы.

§ 3.5 Основные знания и умения

Учащиеся должны знать:

Ш Основные теги и атрибуты языка html;

Ш Принципы работы с текстом;

Ш Основные теги для создания списков;

Ш Понятие гиперссылки, основные тэги их создания;

Ш Основные теги для создания таблиц в html- документе;

Ш Основные теги для вставки графики;

Ш Понятие фрейма, основные тэги его создания;

Ш Понятие форм, основные тэги для их создания.

Учащиеся должны уметь:

Ш Создавать Web- страницу с использованием структуры html- документа;

Ш Пользоваться тегами форматирования текста;

Ш Создавать Web- страницу с использованием списков;

Ш Создавать Web- страницу с использованием гиперссылок;

Ш Пользоваться основными атрибутами для форматирования таблиц;

Ш Создавать Web- страницу с использованием графических изображений;

Ш Создавать Web- страницу с использованием фреймов;

Ш Пользоваться управляющими элементами разных типов форм.

§ 3.6 Учебно-тематический план

№ п.п.	Темы уроков	Кол-во часов на тему
1	Структура HTML-документов.	1
2	Форматирование теста	2
3	Создание списков в HTML- документе.	1
4	Создание гиперссылок.	1
5	Создание таблиц в HTML-документе.	1
6	Вставка графики в HTML-документе.	1
7	Фреймы.	1
8	Формы.	1
ВСЕГО:	9

§ 3.7 Контроль знаний и умений учащихся

Ш Структура html- документа.

Ш Создание списков в html-документе.

Ш Создание гиперссылок в html-документе.

Ш Создание таблиц в html-документе.

Ш Графическое оформление Web- страниц.

Ш Принципы работы с Web-редакторами (текстом).

Ш Создание фреймов в html-документе.

Ш Создание форм в html-документе.

§3.8 Темы уроков по информатике для 11классов

Тема 1. Структура HTML- документа

В этой теме учащиеся познакомятся со структурой html-документа на основе создать свою страницу с использованием структуры html-документа. Для закрепления материала выполнят практическую работу (приложение 1).

Тема 2. Форматирование текста

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

Тема 3. Создание списков в html- документе

В этой теме учащиеся познакомятся с определением списков, маркированных (неупорядоченных), нумерованных (упорядоченных)и списков определений; формировать навыки и умения работы с тегами HTML, создавать Web-страницу с использованием списков. Для усвоения материала выполнят практическую работу (приложение 3).

Тема 4. Создание гиперссылок

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

Тема 5. Создание таблиц в html-документа

В этой теме учащиеся научатся создавать таблицы в html-документе и использовать основные атрибуты для ее форматирования. Для усвоения материала выполняют практическую работу (приложение 5).

Тема 6. Вставка графики в html-документе

В этой теме учащиеся познакомятся учеников с тегом вставки графики; научить создавать Web-страницы с использованием графики. Для закрепления материала учащиеся выполняют практическую работу (приложение 6).

Тема 7. Фреймы

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

Тема 8. Формы

В этой теме учащиеся научатся создавать формы в html-документе. Познакомятся с основными тэгами для создания форм, на практической работе создадут форму «Анкета» (приложение 8).

§3.9 Экспериментальное исследование эффективности предлагаемой методики

Экспериментальное исследование эффективности предлагаемой методики раздела «Создание web- страниц с помощью языка HTML» проводилось в Центре Образования № 1406, по 2 часа в неделю в течение полугодие изучалась тема «Создание web-страниц».

Темы изучались согласно планированию, представленному в главе III. На еженедельных занятиях, сначала проводились лекции, если требовалось объяснить теоретический материал, которым учащимся предстояло запомнить (например, темы связанные с изучением определенных тегов языка HTML). Если теоретический материал требовал не запоминания, а обсуждения, чтобы у учащихся выработалась определенная позиция (например, темы связанные с изучением основ языка HTML или удобства организации информации на сайте). После изучения теоретического материала проводились практические занятия, посвященные закреплению изученного материала. Регулярно проводились занятия, направленные на проверку достижений учащихся. Проверки проводились в виде опросов по основным понятиям и практических работ (для выставления оценок).

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

В ходе дипломного исследования были получены следующие основные результаты:

1) выявлены особенности обучения информатике детей с нарушением слуха;

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

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

4) определены методы и формы обучения детей с нарушением слуха технологиям «Создания Web-страниц».

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

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

БИБЛИОГРАФИЯ

1. Александров, А. В. Создание web-страниц и сайтов. Современный самоучитель [Текст] / А. В. Александров, Г. Г. Сергеев, С. П. Костин. - М.: Триумф, 2008. - 288 с.: ил. + CD-ROM.

2. Басова, Н.В. Педагогика и практическая психология [Текст] : учебн. пособие / Н.В. Басова. - Ростов на Дону. - М.: Феникс, 2000. - 416 с.

3. Вербицкий, А.А. Активное обучение в высшей школе [Текст] : контекстный подход / А.А. Вербицкий. - М.: Высшая школа, 1991. - 207 с.

4. Видеосамоучитель. Создание Web-страниц [Текст] / под ред. И.В. Панфилова. - М.: 100 книг : Триумф, 2008. - 320 с. : ил. + CD-ROM.

5. Горшков, А.В. Развитие словесной речи глухих учащихся на уроках географии в условиях билингвистического обучения [Текст]: дефектология / А.В. Горшков. - М.: Просвещение, 1999. - 86 с.

6. Дидактика средней школы. Некоторые проблемы современной дидактики [Текст] / под ред. М.Н. Скаткина. - 2-е изд., перераб и доп. - М.: Просвещение, 1982. - 319 с.

7. Зайцева, Г.Л. Жестовая речь. Дактилология [Текст] : учебник для студентов вузов. Серия : Коррекционная педагогика / Г.Л. Зайцева. - М.: Владос, 2004. - 192 с.

8. Левченко, И.В. Общие вопросы методики обучения информатике в средней школе [Текст] : учебное пособие для студентов пед. вузов и ун-тов / И.В. Левченко, Н.Н. Самылкина. - М.: МГПУ, 2003. - 160 с.

9. Левченко, И.В. Частные вопросы методики обучения теоретическим основам информатики в средней школе [Текст] : учебное пособие для студентов пед. вузов и ун-тов / И.В. Левченко. - М.: МГПУ, 2007. -

10. 160 с.

11. Методика преподавания русского языка в школе глухих [Текст] : учебник для вузов / Л. М. Быкова, Е. А. Горбунова, Т. С. Зыкова, Л. П. Носкова; под ред. Л. М. Быковой. - М.: ВЛАДОС, 2002. - 396 с. - (Коррекционная педагогика).

12. Нудельман, М. М. Об элементарных формах творческого воображения у глухих школьников [Текст] / М. М. Нудельман. - М.: Педагогика, 1971. - 142 с.

13. Панфилов, И.В. Самоучитель. Создание Web-сайтов + 2 видеокурса на двух CD [Текст] / И.В. Панфилов, А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2008. - 464 с. : ил. + 2 CD-ROM.

14. Педагогика [Текст] / под ред. Г. Нойнера, Ю.К. Бабанского. - М.: Педагогика, 1984. - 368 с.

15. Психология и педагогика [Текст] / под ред. К.А. Абульхамовой, Н.В. Васиной, Л.Г. Лаптева, и др. - М.: Совершенство, 1998. - 300 с.

16. Речицкая, Е.Г. Развитие творческого воображения младших школьников в условиях нормального и нарушенного слуха [Текст]: Учебно-методическое пособие / Е.Г. Речицкая, Е.А. Сошина. - М.: Гуманит. изд. центр ВЛАДОС, 1999. - 128 c.

17. Синяк, В.А. Особенности психического развития глухого ребенка [Текст]

/ В.А. Синяк, М.М. Нудельман. - М.: Просвещение, 1975. - 110 с.

18. Соловьев, И.М. Психология детей с нарушением слуха [Электронный документ] / И.М. Соловьев. - (http://www.deafworld.ru). 14.04.2010.

19. Угринович, Н.Д. Информатика и информационные технологии [Текст]: учебное пособие для 10-11 кл. / Н.Д. Угринович. - М.: Лаборатория Базовых Знаний: Московские учебники, 2001. - 464 с.: ил.

20. Угринович, Н.Д. Практикум по информатике и информационным технологиям [Текст]: учебное пособие для общеобразоват. учреждений

21. / Н.Д. Угринович. Л.Л. Босова, Н.И. Михайлова. - М.: Лаб. базовых знаний, 2002. - 394 с.: ил.

22. Угринович, Н.Д. Преподавание курса «Информатика и ИКТ» в основной и старшей школе. 8-11 классы [Текст]: методические пособие / Н.Д. Угринович. - М.: БИНОМ. Лаборатория знаний, 2008. - 180 с.: ил.

23. Философский словарь [Текст] / Под ред. И.Т. Фролова. - М.: Политиздат, 1987. - 590 с.

Приложение 1

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

Тема: «Структура HTML-документа».

Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу с использованием структуры html-документа.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Структура html-документа:

HTML-код страницы помещается внутрь контейнера <HTML> ... </HTML>, заголовок страницы в контейнер <HEAD> Заголовок </HEAD>.

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE> (имя страницы).

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <BODY> содержание </BODY> (содержание страницы).

<HTML> {начало страницы}

<HEAD> {описание страницы, заголовка}

<TITLE> название </TITLE> {имя страницы}

</HEAD> {закрытый тэг описания заголовка}

<BODY> {содержание страницы}

текст

</BODY> {закрытый тэг описания страницы}

</HTML> {конец страницы}

Ход работы:

1. Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .html в папке HTML. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

Листинг html-программы:

<HTML>

<HEAD>

<TITLE> Компьютер </TITLE>

</HEAD>

<BODY>

Все о компьютере

</BODY>

</HTML>

Приложение 2

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

Тема: «Форматирование текста».

Цель работы: изучить основные теги форматирования текста и использовать их при создании страницы.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Основные теги форматирования html-документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом: <H1> заголовок страницы </H1> (например, <H1> Все о компьютере </H1>)

</H1> заголовок страницы </H6> - в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: <H1 ALIGN = “RIGHT”> Все о компьютере </H1>

<ALIGN = “RIGHT”> {выравнивание текста по правому краю}

<ALIGN = “CENTER”> {выравнивание текста по центру}

<ALIGN = “LEFT”> {выравнивание текста по левому краю}

Для задания параметров форматирования используется контейнер <FONT>...</FONT>, при этом используя различные атрибуты:

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE - размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR - цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));

Например, <FONT SIZE = “7” FACE = “Arial” COLOR = “Blue> ... </FONT> (шрифт размера 7, тип шрифта - Arial, цвет - голубой);

Также можно задавать начертание текста или фрагмента текста:

<B> текст </B> - полужирный шрифт;

<I> текст </I> - начало текста курсивом;

<U> текст </U> - подчёркивание;

Комбинированное выделение осуществляется следующим образом:

<Тег-1><Тег-2> фрагмент текста </Тег-2></Тег-1>

Например, <B><U> фрагмент текста </U></B> (текст полужирный и подчеркнутый);

При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);

Например, <BODY BGCOLOR = “blue” TEXT = “red”> - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)

Ход работы:

1. Заголовок страницы должен быть выровнен по центру, начертание - полужирный шрифт, тип шрифта - Comic Sans MS, размер - 1, цвет шрифта - голубой, подчеркивание;

2. Задать цвет фона страницы - бирюзовый цвет;

3. Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй - по центру, а третий - по правому краю;

4. Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер - 7;

5. Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер - 6;

6. Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер - 5;

7. В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;

Листинг html-программы:

<HTML>

<HEAD>

<TITLE> Компьютер </TITLE>

</HEAD>

<BODY bgcolor='orange'>

<font face='Comic Sans Ms' color='red'>

<H1 ALIGN = 'CENTER'> <u> Все о компьютере </u> </H1>

</font>

<p align='left'> <font face='Monotype Corsiva' color='white' size=7> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </font></p>

<p align='center'> <font face='Arial' color='lime' size=6> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font> </p>

<p align='right'> <font face='Calibri' color='yellow' size=5> На этом сайте вы можете узнать много новой и полезной информации для вас.</p>

<font color='aqua'>

<ul type=circle>

</font>

</BODY>

</HTML>

Приложение 3

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

Тема: «Создание списков в html- документе».

Цель работы: познакомить с определением списков, маркированных (неупорядоченных), нумерованных (упорядоченных)и списков определений; формировать навыки и умения работы с тегами HTML, создавать Web-страницу с использованием списков.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

В языке HTML предусмотрены основные типы списков:

• маркированный ( неупорядоченный)

• нумерованный ( упорядоченный)

• список определений

Маркированный список задаётся тегом <ul></ul>. Любой список состоит из элементов, "пунктов", каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам "пункта". Тег <li> не требует закрывающего тега.

Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль.

Может иметь одно и трёх значений:

• disk - кружок, диск

• circle - полый круг

• square - квадрат

Нумерованный список задаётся тегом <ol></ol>, так же как и в маркированном (неупорядоченном) списке элемент списка присуждается тегом <li>.

Со списком определений дело обстоит немного иначе нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом <dl></dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>.

Ход работы:

1. Создать различные списки:

Листинг html-программы:

<ul>

<li> Пункт первый..

<li> Пункт второй..

<li> Пункт третий..

</ul>

<ol>

<li> Кока-кола

<li> Спрайт

<li> Фанта

</ol>

<dl>

<dt>Термин 1</dt>

<dd>Определение 1</dd>

<dt>Термин 2</dt>

<dd>Определение 2</dd>

</dl>

Приложение 4

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

Тема: «Создание гиперссылок».

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

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Гиперссылки

Фундаментальное свойство гипертекста состоит в том, что он позволяет связывать документы гиперссылками.

С помощью гиперссылок можно указать:

• На другой HTML-документ;

• На любой другой документ;

• На определенное место внутри текущего или какого-либо другого документа;

Документы превращаются в точки пересечения нитей информационной паутины и становиться понятным название «Всемирная паутина»

Тэг <a>

Атрибуты:

href=“URL” - адрес перехода.

Как задавать адрес?

1. <a href=“2.html”>Перейти на вторую станицу</a> переход к документу, расположенному в той же папке, что и документ-источник.

2. <a href=“http://uchinfo.com.ua/lessons.php”>

Уроки по информатике </a>

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

3. <a href=“mailto:ivanov_i_i@ukr.net”>

Пишите мне </a>

Щелчок на такой гиперссылке вызывает загрузку почтовой программы с уже заполненным полем адреса электронной почты.

4. <a href=“#chapter1”>Перейти к разделу 1 </a>

Ссылка на определенное место в текущем документе.

5. <a href=“2.html#glava1”>Глава 1</a>

Ссылка на определенное место в документе 2.html .

Гиперссылки внутри одного документа

Создание гиперссылки внутри текущего документа или к определенному фрагменту какого-либо другого документа распадается на 2 части:

1. Создание метки (якоря), которая является целью гиперссылки.

2. Создание самой гиперссылки.

Создание метки

1 способ: использование атрибута name тэга <a>

name=“Строка символов”

<h3><a name=“glava1”>Глава 1</a></h3>

2 способ: использования атрибута id в любом тэге

id =“Строка символов”

<h3 id=“glava1”>Глава 1</h3>

Атрибут id можно добавлять в любой тэг для создания якоря.

<p id=“label_1”> <address id=“label_8”>

Использование рисунков в качестве гиперссылки

<a href=“адрес ссылки“><img src=“адрес картинки“></a>

<a href=“2.html“><img src=“foto.jpeg“ ></a>

Ход работы:

1. Создайте гиперссылку следующего вида:

Листинг html-программы:

1.Файл index.html:

<html>

<head>

<title>Радуга</title>

</head>

<body link="#008000" alink="# ff0000 " vlink="# ffff00">

<center>

<h3>Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге</h3>

<br>

<a href="primer2.html">

<font size="+1" color=#ff0000>Р</font>

<font size="+2" color=#ff8c40>А</font>

<font size="+3" color=#ffff00>Д</font>

<font size="+3" color=#008000>У</font>

<font size="+2" color=#0000ff>Г</font>

<font size="+1" color=#800080>А</font>

</a>

</center>

</body>

</html>

2.Файл primer.html:

<html>

<head>

<title>Радуга</title>

</head>

<body link="#008000" alink="# ff0000 " vlink="# ffff00">

<center>

<font size="+3">

<font color=#ff0000>Каждый</font>

<font color=#ff8c40>охотник</font>

<font color=#ffff00>желает</font>

<font color=#008000>знать</font>

<font color=#40caff>где</font>

<font color=#0000ff>сидит</font>

<font color=#800080>фазан</font>

</font>

<br><br><br>

<a href="index.html">вернуться на главную</a>

</center>

</body>

</html>

Приложение 5

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

Тема: «Создание таблиц в html-документа».

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

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

<TABLE>...</TABLE> {создание таблицы}

<ТR>создание строк таблицы</ТR>

<ТD> создание ячеек таблицы</ТD>

<ТН> текст, содержащийся в ячейке </ТН> - Заголовки столбцов таблицы

<САРТIОN> - Использование заголовков таблицы

width = "..." - ширина таблицы

align = "..." (горизонтальное положение)

align = "left " - прижать влево

align = "right" - прижать вправо

align = "center" - разместить по центру

valign = "..." (вертикальное положение)

valign = "top" - прижать вверх

valign = "bottom" - прижать вниз

valign = "middle" - разместить по центру

cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

border="..." - рисует рамку вокруг таблицы и каждой ячейки

colspan="..." и rowspan="..." - позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Ход работы:

1. Создайте таблицу следующего вида:

2. Создайте таблицу следующего вида:

Листинг html-программы:

<HTML>

<HEAD>

<TITLE> Таблица </TITLE>

</HEAD>

<BODY bgcolor='pink'>

<H1 ALIGN = 'CENTER'> <B> Таблицы в html-документе </B> </H1>

<font FACE = 'Comic Sans MS' color='blue'>

</font>

<table border=2 cols=2 bgcolor=yellow align=center>

<TR>

<TH>Заголовок столбца 1</TH>

<TH>Заголовок столбца 2</TH>

</TR>

<TR>

<TD>Ячейка столбца 1, ряд 1</TD>

<TD>Ячейка столбца 2, ряд 1</TD>

</TR>

<TR>

<TD>Ячейка столбца 1, ряд 2</TD>

<TD>Ячейка столбца 2, ряд 2</TD>

</TR>

</table>

<table border>

<tr> <th colspan='5'> Список сотрудников </th> </tr>

<tr> <th> Фамилия </th> <th> Имя </th> <th> Отчество </th> <th> Дата рождения </th> <th> Отдел </th> </tr>

<tr> <td> Гончаров </td> <td> Александр </td> <td> Петрович </td> <td> 13.10.75 </td> <td rowspan='4'> Технический </td> </tr>

<tr> <td> Савчук </td> <td> Юрий </td> <td> Олегович </td> <td> 02.05.79 </td> </tr>

<tr> <td> Тарасов </td> <td> Алексей </td> <td> Сергеевич </td> <td> 27.02.72</td> <td> </td> <td> </td></tr>

<tr> <td> Данилов </td> <td> Петр </td> <td> Андреевич </td> <td> 17.10.77 </td> </tr>

</TABLE>

</BODY>

</HTML>

Приложение 6

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

Тема: «Вставка графики в html-документе»

Цель работы: познакомить учеников с тегом вставки графики; научить создавать Web-страницы с использованием графики.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Тэг <IMG> - вставка изображений

Атрибуты:

Src - обязательный, значение- адрес изображения

<img src = “shkola.gif(jpg)”>

Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:

<img src = “pict/shkola.gif(jpg)”>

alt - определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt - строка текста, длиной до 1024 символа. Кавычки обязательны.

Alt= “Школа “ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.

align - выравнивание. Положение изображения лучше всегда указывать явно.

Значения:

left, right - по левому или по правому краю.

top - верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.

middle - середина изображения выравнивается с серединой строки.

bottom - (по умолчанию) нижний край изображения выравнивается с базовой линией текста.

border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения

border= толщина рамки в пикселях

border=0 - убрать рамку

height, width - высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну.

width = “100%” height= 20 - полоса на все окно шириной 20 пикселей.

Если указать только width = “30%”, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width.

hspace, vspace - задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.

Ход работы:

1. Создать 3 WEB-странички о следующим шаблонам:

2. 3. 4.

Приложение 7

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

Тема: «Фреймы».

Цель работы: сформулировать основные принципы использования фреймов в HTML-документе; познакомить учеников с тегами создания фреймов в HTML; продемонстрировать их на конкретных примерах и научить создавать Web-страницы с использованием фреймов.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Тэг <frameset>

Позволяет определять набор фреймов и управлять их размерами и обрамлением. Он допускает вложения.

Атрибуты:

Rows - число и размер строк;

Cols - число и размер колонок;

Значения - список величин, определяющий в пикселях или в % значения для строк и (или) колонок.

Пример:

<frameset rows=“100,25%,*” cols=“30%,*”>

* обозначает оставшееся пространство.

Заполнение фреймов содержимым происходит по строкам.

Атрибуты:

Border - толщина рамки в пикселях;

Bordercolor - цвет рамки.

Тег <frame>

Может появляться только в теге <frameset> и определяет содержимое одиночного фрейма.

Атрибуты:

src=“URL” - обязательный атрибут, указывает имя файла, который должен изображаться в нем.

Этот файл может сам быть фреймом.

name=«метка» - связывает с фреймом метку, которая может использоваться для ссылок на фрейм в атрибуте target тега <a>, таким образом можно изменить содержимое фрейма, используя гиперссылку в другом фрейме.

noresize - запрещает изменение размеров фрейма.

scrolling = yes или no - разрешает или запрещает появление полос прокрутки.

Вложение тегов <frameset>

В тег <frameset> … </frameset> можно поместить еще один или несколько тегов <frameset>.

Это позволяет организовать области с разным количеством строк и столбцов.

<frameset rows=“30%,*”>

<frame src=“1.html” name=“f1”>

<frameset cols=“45%,*”>

<frame src=“2.html” name=“f2”>

<frame src=“3.html” name=“f3”>

</frameset>

</frameset>

Атрибут name в целевом теге <frame>

Атрибут target в теге <a>

Пример:

<frameset cols=“25%,*”>

<frame src=“menu.html” name=“menu”>

<frame src=“1.html” name=“view-frame”>

</frameset>

______________________________________________

Файл menu.html:

<html>

…

<body>

…

<a href=“1.html” target=“view-frame”>Ссылка 1</a>

<a href=“2.html” target=“view-frame”>Ссылка 2</a>

<a href=“3.html” target=“view-frame”>Ссылка 3</a>

<a href=“4.html” target=“view-frame”>Ссылка 4</a>

…

</body>

</html>

Ход работы:

1. Создать фрейм следующего вида:

Листинг html-программы:

<HTML>

<HEAD>

<TITLE>Содержание</TITLE>

</HEAD>

<BODY BACKGROUND="fon.jpg" >

<OL TYPE=I>

<LI><A HREF="mikky.html" TARGET="frame2">Микки Маус</A></LI>

<LI><A HREF="disney.html" TARGET="frame2">Уолт Дисней</A></LI>

<UL>

<LI><A HREF="disney.html#детство" TARGET="frame2">Детство и юность</A></LI>

<LI><A HREF="disney.html#Голливуд" TARGET="frame2">Покорение Голливуда</A></LI>

<LI><A HREF="disney.html#смерть" TARGET="frame2">Смерть</A></LI>

</UL>

<LI><A HREF="Photo.html" TARGET="frame2">Мои друзья</A></LI>

</OL>

</BODY>

</HTML>

Пусть в левом окне откроется документ menu.htm, а в правом - Mikky.html:

<HTML>

<HEAD>

<TITLE>Страничка Микки </TITLE>

</HEAD>

<FRAMESET cols="*,72%">

<FRAME SRC="menu.html" NAME="frame1">

<FRAME SRC="Mikky.html" NAME="frame2">

</FRAMESET>

</HTML>

Приложение 8

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

Тема: «Формы».

Цель работы: изучить основные тэги для создания форм в html-документе.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

<FORM>…</FORM> {создание формы}

<INPUT> - для ввода одной строки текста или одного слова

<INPUT> TYPE=”text” - создает текстовое поле

Атрибут NAME служит для идентификации полученной информации

Атрибута SIZE задает длину поля ввода в символах

<INPUT> TYPE=”radio” - создает переключатели (радиокнопки)

Атрибут VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO

Атрибут CHECKED - задает выбор кнопки по умолчанию

<INPUT> TYPE=”checkbox” - создает флажки

<SELECT>…</SELECT> - реализует раскрывающийся список

<OPTION> - определяется каждый элемент раскрывающегося списка

TYPE = password - определяет окно для ввода пароля.

TYPE = reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.

Ход работы:

Используя теги форм создайте анкету(опросный лист) на произвольную тему.

1. В анкете должны быть отображены:

ь текстовые поля для ввода имени и фамилии;

ь поле пароля;

ь поле выбора из списка значений;

ь поле для ввода большого количества информации;

ь флажки;

ь переключатели;

ь кнопки сброса и подачи запроса;

Анкета
Фамилия: Имя: Отчество:
Введите пароль:
Введите дату рождения:
Укажите самый удобный способ для связи с вами: Домашний телефон Рабочий телефон Электронная почта
Укажите ваше образование:
Немного о себе:

3. Сохранить этот документ под любым именем с расширением .html в папке HTML.

Листинг html-программы:

<HTML>

<HEAD>

<TITLE> Анкета </TITLE>

</HEAD>

<BODY>

<font>

<h1><Align='center'> <u><b> Анкета </b></u> </h1>

</font>

<form>

<font color='blue'>

Фамилия: <br>

<input type='text' name='name' size=30><br>

Имя: <br>

<input type='text' name='name' size=30><br>

Отчество: <br>

<input type='text' name='name' size=30><br>

<hr>

Пароль: <br>

<input type='text' name='password' size=30>

<hr>

Введите дату рождения:<br>

<input type='text' name='name' size=2>

<select name='mounth'>

<option selected> Января

<option> Февраля

<option> Марта

<option> Апреля

<option> Мая

<option> Июня

<option> Июля

<option> Августа

<option> Сентября

<option> Октября

<option> Ноября

<option> Декабря

</select>

<input type='text' name='year' size=4>

<hr>

Укажите самый удобный способ для связи с вами:<br>

<input type='radio' name='group' Value='domtel'> <input type='text' name='name' size=30> <font color='green'> Домашний телефон </font><br>

<input type='radio' name='group' Value='rabtel'> <input type='text' name='name' size=30> <font color='green'>

Рабочий телефон </font><br>

<input type='radio' name='e-mail' Value='elpost'> <input type='text' name='name' size=30> <font color='green'> Электронная почта </font><br>

<hr>

Укажите ваше образование:<br>

<select name='education'>

<option selected> Нигде не учился

<option> Среднее общее образование

<option> Среднее полное образование

<option> Среднее специальное образование

<option> Среднее профессиональное образование

<option> Незаконченное высшее образование

<option> Высшее образование

<option> Два высших образования

</select>

<hr>

Немного о себе:</font> <br>

<textarea name='o sebe' rows=4 cols=30>

</textarea>

<br>

<hr>

<input type='reset' Value='Сброс'>

<input type='submit' Value='Послать'>

</form>

</BODY>

</HTML>

Размещено на Allbest.ru