Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов
<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 символа. Кавычки обязательны.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17
