Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов
Может иметь одно и трёх значений:
• 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>
