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

Заголовок страницы целесообразно выделить самым крупным шрифтом: <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”);

Например, <BODYBGCOLOR = “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. <ahref=“2.html”>Перейти на вторую станицу</a> переход к документу, расположенному в той же папке, что и документ-источник.

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

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

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

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

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

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

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

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

<ahref=“адрес ссылки“><imgsrc=“адрес картинки“></a>

Ход работы:

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>