Быстрый поиск

Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов

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>

<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>

</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. Создать различные списки: