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


	Главная \| Карта сайта


	РАЗДЕЛЫ


	ПАРТНЕРЫ


	АЛФАВИТ

... А Б В Г Д Е Ж З И К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Э Ю Я


	ПОИСК

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

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

Листинг 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 можно добавлять в любой тэг для создания якоря.

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

Ход работы:

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

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

1.Файл index.html:

<html>

<head>

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

</head>

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

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

<br>

<a href="primer2.html">

</a>

</center>

</body>

</html>

2.Файл primer.html:

<html>

<head>

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

</head>

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

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

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

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

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

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

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

</font>

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

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

</font>

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

<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 - обязательный, значение- адрес изображения

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

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 – число и размер колонок;

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

Пример:

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

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

Атрибуты:

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

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

Тег <frame>

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

Атрибуты:

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

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

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

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

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

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

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

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

</frameset>

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

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

Пример:

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

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

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

Фамилия: <br>

Имя: <br>

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

<hr>

Пароль: <br>

<hr>

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

<option selected> Января

<option> Февраля

<option> Марта

<option> Апреля

<option> Мая

<option> Июня

<option> Июля

<option> Августа

<option> Сентября

<option> Октября

<option> Ноября

<option> Декабря

</select>

<hr>

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

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

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

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

<hr>

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

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

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

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

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

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

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

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

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

</select>

<hr>

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

</textarea>

<br>

<hr>

</form>

</BODY>

</HTML>

Страницы: 1, 2, 3, 4, 5, 6, 7


	НОВОСТИ


	ВХОД


	ТЕГИ

Рефераты бесплатно, реферат бесплатно, курсовые работы, реферат, доклады, рефераты, рефераты скачать, рефераты на тему, сочинения, курсовые, дипломы, научные работы и многое другое.
Copyright © 2012 г. При использовании материалов - ссылка на сайт обязательна.

Логин:
Пароль:

регистрация забыли пароль?