Методические рекомендации по обучению создания простейших WEB-страниц на уроках информатики Для обучающихся 9-11 классов общеобразовательных школ

Министерство образования и науки Донецкой Народной Республики

Отдел образования администрации города Кировское

Муниципальное общеобразовательное учреждение школа I-III ступеней №1

Методические рекомендации

по обучению создания простейших WEB-страниц на уроках информатики

Для обучающихся 9-11 классов общеобразовательных школ

Учитель информатики МОУШ №1 Арзамасцева Ирина Анатольевна

Кировское, 2018

От составителя

     Современное общество часто называют информационным, так как количество информации, которое перемещается в нем так быстро непрестанно возрастает, а так же в людьми все больше используется технических средств для сохранения, обработки, распространения и использования всевозможной информации. Так как информационные технологии используются во всех сферах человеческой жизнедеятельности, перед учебными учреждениями ставится задача не только научить обучающихся учиться, но и сформировать у них информационную компетентность, а именно: умения и навыки проводить поиск, сохранение, обработку тестовой, графической, табличной информации, создания простейших WEB-страниц с помощью соответствующего программного обеспечения, правильно работать за ПК, подходить к решению проблем творчески.

      Сегодня везде можно услышать о всемирной паутине – World Wide Web (WWW), которую образуют компьютеры-серверы Интернета. Каждый Web-сервер является как бы узелком этой информационной паутины. Web- серверы хранят всевозможные информационные ресурсы (изображения, документы, программы, таблицы, справочную информацию), к которым можно получить доступ из любой точки нашей Земли. Доступ является интерактивным и позволяет пользователю самому решать, по каким адресам обращаться, что выбирать, как передвигаться в сети. Важной особенностью работы в Интернете является наличие гиперссылок, с помощью которых, переходя от одной к другой, можно найти любую интересующую информацию. Используя материал данного методического пособия, обучающиеся и педагоги ознакомятся с основными понятиями глобальной сети Интернет, усвоят навыки работы в среде Internet Explorer, изучат язык HTML и с его помощью смогут создавать собственные Web-документы.

     Данные методические рекомендации предназначены для отработки навыков создания простейших WEB-докуменьов обучающимися 9-11 классов общеобразовательных учебных учреждений при изучении курса «Информатики».

    Каждое практическое задание содержит основные понятия и определения, задания, выполняемые по определенному алгоритму и самостоятельно. Задания желательно выполнять последовательно, так как они построены в последовательности возрастающей сложности.

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

Тема: Создание Web- документа, содержащего теги форматирования символов, гиперссылок и графики.

Цели:

 Образовательные

·       знакомиться с элементами и структурой HTML документа;

·       осваивать приемов создания Web-страницы на языке HTML;

·       учиться выполнять форматирование полученных Web-страниц;

·       закреплять технологические навыки работы с компьютером;

Развивающие

·        способствовать развитию познавательного интереса у учащихся;

·        способствовать развитию творческой активности учащихся;

·        развивать наглядно-образное мышление, память и умение сравнивать и анализировать;

Воспитательные

·        способствовать культурному и интеллектуальному развитию учащихся;

·        воспитывать информационную культуру обучающихся, внимание, аккуратность.

Оборудование: ПК, мультимедийный проектор, экран.

Программное обеспечение: операционная система Windows, браузер Internet Explorer или Mozilla Firefox, стандартное приложение Блокнот, графические изображения.

Теоретические данные

Создание сайтов - составной процесс, состоящий из нескольких этапов:

1.                       разработка дизайна,

2.                       вёрстка,

3.                       программирование,

4.                       безопасность.

Сопровождение сайтов:

o             это техническая поддержка сайта;

o             помощь в обновлении контента;

o             внесение корректировок в работу ресурса.

Методы создания и сопровождения сайтов:

o             вручную на языкe HTML (в БЛОКНОТЕ);

o             c помощью редакторов сайтов (HEFS, DreamWeaver и др.);

o             c помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);

o             с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).

Этапы создания WEB-страницы:

1. Разработка проекта (Постановка задачи);

·                     Главная тема страницы.

·                     Текстовое содержание (грамотный язык).

·                     Планировка размещения информации на странице (верстка).

·                     Графика (набор рисунков, анимации).

·                     Стиль дизайна (сочетания цветов, фоны и т. п.)

2. Алгоритм заполнения страницы.

3. Программирование.

Программа для WEB-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот.

HTML- hypertext markup language – язык разметки гипертекста. Основными  элементами HTML являются теги (tags), с помощью которых проводится разметка текста. Теги служат для представления атрибутов и инструкций по форматированию, которые в браузерах превращаются на готовые фрагменты web- странички, готовой для просмотра пользователем.

Каждый тег имеет такой формат:

<tag>содержание тега</tag>, где <tag> открывающий тег, </tag> закрывающий тег.

Существуют так же теги, которые можно использовать без закрывающих тегов.

Чтобы лучше понять, как работают теги, приведем такую аналогию: если мы описываем форму какого- то предмета , то можем сказать, что он круглый, кубический, пирамидальный. Точно так же мы можем сказать, что какой- то элемент  в документе находится слева, справа или по центру. Именно такое форматирование происходит с помощью тегов.

HTML- документ имеет три основные области.

Наивысший порядок в документе имеет тег <HTML>, для которого данный документ является подчиненным. Следующими по старшинству являются теги <HEAD> (заголовок) и < BODY> (тело документа).

Метатеги  начинаются с ключевого слова meta, их действия отличаются по использованным атрибутам.

Атрибут name специфицирует информацию о странице (самоназвание документа). Атрибут content служит для описания атрибутов name и equiv.

Совершенно ясно, что обычная страничка не может обойтись без графических изображений, как в области оформления, так и в области фактической информации. Для web-дизайна используются три основных графических формата: .*gif, .*jpeg,.*png. Для вставки изображения используется тег < img src>.

Актуализация знаний

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

Грамотно разработанный сайт может стать хорошим методом распространения информации о предприятии.

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

Практическая часть

Перед началом работы повторим правила техники безопасности в кабинете информатики и при работе за ПК. (Приложение 1)

Задание 1. Создание простейшего HTML-файла.

1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2. Запустите программу Блокнот (Notepad).

 3. Наберите в окне программы простейший файл HTML. « Моя пробная страничка»

4. Сохраните файл под именем PROBNAYA.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

 5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу PROBNAYA.HTML откройте окно браузера.

При этом фрагмент документа будет иметь такой вид:

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

Добро пожаловать на мою пробную страничку.

Меня зовут Ирина Иванова

Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

Мне 17 лет

К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

Заходите на мою страничку еще!

</BODY>

</HTML>

Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

Задание 2. Расположение текста на странице. Теги управления расположением текста.

Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, cуществует команда, запрещающая программе браузера изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла. Тег перевода строки <BR> отделяет строку от последующего текста или графики. Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными, тег <P>

– двойной, т.е. требуется закрывающий тег </P>.

<BR> -теги переноса строки.

<I> - текст курсивом.

<PRE>-форматированный текст.

<HR>-рисование линии.

Тег	Комментарий
< P ALIGN= “LEFT”>	Абзац выравнивается по левому краю экрана
< P ALIGN= “RIGHT”>	Абзац выравнивается по правому краю экрана
< P ALIGN= “CENTER”>	Абзац выравнивается по центру экрана
< P ALIGN= “JUSTIFY”>	Абзац выравнивается по ширине экрана, но браузер выполняет это лучшим, возможным для себя способом. Абзац не всегда будет выглядеть так, как было бы после его обработки текстовым процессором

При этом фрагмент документа будет иметь такой вид:

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<H1>Добро пожаловать на мою пробную страничку.</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<HR>

<H2> Распорядок дня </H2>

<PRE>

<B> Время                                      Действие                       </B>         <BR>

_________________________________________________________ <BR>

08:00                                             Подъем                                               <BR>

08:30…13:30                                Школа                                                <BR>

15:00…18:00                                Домашнее задания                          <BR>

18:00…21:00                                Любимые увлечения                      <BR>

22:00                                             Отбой                                                 <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Сохраните текст с внесенными изменениями в файле PROBNAYA.HTML (меню Файл - Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка ОБНОВИТЬ). Изменилось ли отображение текста на экране?

Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

Задание 3. Изменение размеров символов на странице и установка текущего шрифта.

Существует два способа управления размером текста, отображаемого браузером:

1.     использование стилей заголовка, 

2.     задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тегов заголовков: от <H1> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

При этом фрагмент документа будет иметь такой вид:

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<H1>Добро пожаловать на мою пробную страничку.</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<HR>

<FONT SIZE =7> Распорядок дня </FONT>

<PRE>

<B> Время                                      Действие                       </B>         <BR>

_________________________________________________________ <BR>

08:00                                             Подъем                                               <BR>

08:30…13:30                                Школа                                                <BR>

15:00…18:00                                Домашнее задания                          <BR>

18:00…21:00                                Любимые увлечения                      <BR>

22:00                                             Отбой                                                 <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Задание 4. Создание документа, содержащего списки и таблицы

Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу.

 Таблица состоит из трех основных частей:

1.     названия таблицы;

2.     заголовков столбцов;

3.     ячеек таблицы.

Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).

<LI></LI>-теги для формирования списков;

<UL></UL>-теги для создания нумерованных списков;

<DL>,<DT>,<DD>- теги для создания ассоциативных списков из одного или нескольких элементов-терминов, сопровождаемого одним или более элементами.

Создадим файл «Увлечения.HTML» следующего содержания:

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY>

<H2> Увлечения</H2>

<UL><LI> Танцы

          <LI>Рисование

          <LI> Чтение

          <LI> Путешествия

</UL>

<DL> <DT> Танцы

           <DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.

<DT> Путешествия

            <DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.

<DT> Чтение

          <DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.

</DL>

</BODY>

</HTML>

Создадим файл «Оценки.HTML», в котором будут отображаться таблицы c данными:

<HTML>

<HEAD>

<TITLE> Оценки </TITLE>

</HEAD>

<BODY>

<H2>  Мои оценки </H2>

<TABLE>

<TR><TD>Предмет</TD>

          <TD> Оценка</TD></TR>

<TR><TD>Физическая культура</TD>

         <TD> 5</TD></TR>

<TR><TD> Математика </TD>

          <TD> 5</TD></TR>

<TR><TD>Физика</TD>

          <TD> 5</TD></TR>

<TR><TD>Биология </TD>

          <TD> 5</TD></TR>

</TABLE>

</BODY>

</HTML>

Задание 5. Задание цвета фона и текста, установка гарнитуры и цвета шрифта.

При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>.

Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).

Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для отображения текста шрифтом Times New Roman необходимо записать:

<FONT FACE=’ Times New Roman’>

Для изменения цвета шрифта можно использовать в теге<FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.

Приведем несколько примеров записей цвета, которые можно использовать для изменения цвета текста либо цвета страницы.

Тег	Комментарий
<FONT SIZE=””>…</FONT>	Устанавливает размер текста в пределах от 1 (наименьший) до 7 (наибольший). Замечание: если не определять размер текста, то браузер отобразит его размером: <FONT SIZE=”3”>…<FONT>
<FONT FASE =””>…</FONT>	Устанавливает шрифты различного начертания (гарнитура)
<FONT COLOR=””>…</FONT>	Устанавливает цвет текста

Цвет	RRGGBB	Цвет	RRGGBB	Цвет	RRGGBB
Черный Black	000000	Лазурный Cerulean	007BA7	Тёмно-коричневый Dark brown	654321
Карминово-красный Carmine	960018	Васильковый Cornflower blue	6495ED	Тёмно-зелёный Dark green	013220
Морковный Carrot	ED9121	Тёмно-синий цвет Dark blue	00008B	Тёмно-розовый Dark pink	E75480
Серый Gray	A0A0A0	Белый White	FFFFFF	Зеленый Green	00FF00
Баклажановый Eggplant	990066	Розовый Pink	FFC0CB	Сливовый Plum	660066
Красный Red	FF0000	Отборный жёлтый Selective yellow	FFBA00	Яблочно-зелёный Apple Green	8DB600
Фуксия Fuchsia	FF00FF	Индиго Indigo	4B0082	Зелёная мята (мятный) Mint Green	98FF98

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY  BGCOLOR = «007BA7» TEXT= «00008B»>

<P ALIGN = «CENTER»>

<FONT COLOR = «000000» SIZE= «7»>

<H2> Увлечения</H2>

<UL><LI> Танцы

          <LI>Рисование

          <LI> Чтение

          <LI> Путешествия

</UL>

<DL> <DT> Танцы

           <DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.

<DT> Путешествия

            <DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.

<DT> Чтение

          <DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.

</DL>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере.

Задание 6. Размещение графики на Web-странице

Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным. Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.

Лучше любые изображения на странице ограничивать размером 20 Кбайт. Такие изображения достаточно подробны и быстро загружаются. Ограничение в 20 Кбайт очень приблизительно. Если встретилось потрясающее изображение, занимающее больше 20 Кбайт, спокойно используйте его. Просто помните, что если вставляете слишком много больших изображений, время ожидания посетителей существенно возрастет.

Тег <IMG> имеет немало атрибутов. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG. Приведем несколько примеров, которые можно применять на практике и вы можете самостоятельно их опробовать.

Атрибут	Формат	Описание
ALT	<IMG SRS=”CLOCK.JPG” ALT= «КАРТИНКА»	Задает текст, заменяющий изображение в том случае, если браузер не воспринимает изображение
BORDER	<IMG SRS=”CLOCK.JPG” BORDER=”3”>	Задает толщину рамки вокруг изображения. Измеряется в пикселях
ALIGN	<IMG SRS=”CLOCK.JPG” ALIGN= “TOP”>	Задает выравнивание изображения относительно текста:  относительно текста выровнена верхняя часть изображения – "TOP",  относительно текста выровнена нижняя часть изображения – "BOTTOM",  относительно текста выровнена средняя часть изображения – "MIDDLE".
HEIGHT	<IMG SRS=”CLOCK.JPG” HEIGHT=”111”>	Задает вертикальный размер изображения внутри окна браузера
WIDTH	<IMG SRS=”CLOCK.JPG” WIDTH=”210”>	Задает горизонтальный размер изображения внутри окна браузера
VSPACE	<IMG SRS=”CLOCK.JPG” VSPACE=”8”>	Задает добавление верхнего и нижнего пустых полей
HSPACE	<IMG SRS=”CLOCK.JPG” HSPACE= “8”>	Задает добавление левого и правого пустых полей

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY  BGCOLOR = «007BA7» TEXT= «00008B»>

<P ALIGN = «CENTER»>

<FONT COLOR = «000000» SIZE= «7»>

<H2> Увлечения</H2>

<UL><LI> Танцы

          <LI>Рисование

          <LI> Чтение

          <LI> Путешествия

</UL>

<DL> <DT> Танцы

           <DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.

<DT> Путешествия

            <DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.

<DT> Чтение

          <DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.

</DL>

<IMG SRC=” CLOCK.PNG”>

</P>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере.

Задание 7. Установка фонового изображения на Web-странице

Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров. Графика, используемая в качестве фоновой, задается в теге<BODY>.Отвечает за вставку фонового рисунка на поле страницы  атрибут BACKGROUND

Возможности тега <FONT>

 1. Внесите изменения в файл Увлечения.HTML, предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка (FON.PNG).

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY BACKGROUND = FON.PNG  TEXT= «00008B»>

<P ALIGN = «CENTER»>

<FONT COLOR = «000000» SIZE= «7»>

<H2> Увлечения</H2>

<UL><LI> Танцы

          <LI>Рисование

          <LI> Чтение

          <LI> Путешествия

</UL>

<DL> <DT> Танцы

           <DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.

<DT> Путешествия

            <DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.

<DT> Чтение

          <DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.

</DL>

<IMG SRC=” CLOCK.PNG”>

</P>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере

Задание 8. Создание бегущей строки.

 В качестве бегущей строки  принимается заголовок текста или строка, требующая особого внимания от посетителей данной Web- страницы.

Тег	Комментарий
<MARQUEE>…</MARQUEE>	Создает бегущую строку
Атрибуты	Комментарии
ALIGN=” ”	Располагает бегущую строку по вертикали относительно текста, в котором она расположена. Принимает значения:  – TOP – по верхнему положению;  – MIDDLE – посередине; – BOTTOM – по нижнему положению.
BIHAVIOR=” ”	Задает стиль бегущей строки.  Принимает значения: – SCROLL –  бегущей строки пробегает полностью по окну браузера и действие повторяется (задается по умолчанию); – SLIDE – бегущей строки  выбегает и останавливается в левом углу окна браузера;  – ALTERNATE –  бегущей строки «болтается» между краями окна браузера
BGCOLOR=” ”	Задает цвет фона бегущей строки
DIRECTION=” ”	Задает направление пробега текста бегущей строки Принимает значения:  – LEFT – текст бегущей строки пробегает слева направо (задается по умолчанию);  – RIGHT – текст  бегущей строки пробегает справа налево;
LOOP=" "	Задает число повторов анимации бегущей строки. Принимает значения: – INFINITE – бесконечное значение (задается по умолчанию);  – любое целое число
HSPACE=" "	Размещает слева и справа от бегущей строки область свободного пространства заданного размера. Значение задается в пикселях.
VSPACE=" "	Размещает над и под от бегущей строки область свободного пространства заданного размера. Значение задается в пикселях
SCROLLAMOUNT=" "	Задает значение в пикселях области смещения текста при любой операции прокрутки бегущей строки
SCROLLDELAY=" "	Задает задержку в миллисекундах между последними смещениями текста бегущей строки. 1 с.=1000 млс
WIDTH=" "	Задает ширину области бегущей строки в пикселях

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<MARQUEE BIHAVIOR=”SCROLL ” DIRECTION=” LEFT” LOOP=" 10" WIDTH=" 15" BGCOLOR=” FF0000 ”> Очень рада знакомству!!! </MARQUEE>

<H1>Добро пожаловать на мою пробную страничку</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<HR>

<FONT SIZE =7> Распорядок дня </FONT>

<PRE>

<B> Время                                      Действие                       </B>         <BR>

_________________________________________________________ <BR>

08:00                                             Подъем                                               <BR>

08:30…13:30                                Школа                                                <BR>

15:00…18:00                                Домашнее задания                          <BR>

18:00…21:00                                Любимые увлечения                      <BR>

22:00                                             Отбой                                                 <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере.

Задание 9. Фоновое звуковое сопровождение.

Тег <BGSOUND> определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере <HEAD>. Тег <BGSOUND> не входит в спецификацию HTML и при его использовании код не пройдет валидацию. К тому же пользователи, как правило, отрицательно относятся к музыке, которая играет на сайте, поэтому используйте эту возможность с осторожностью и по необходимости.

Тег	Комментарий
<BGSOUND>	Задает фоновое звуковое сопровождение
Атрибуты	Комментарий
SRC="URL"	Задает URL аудиофайла для воспроизведения
LOOP=" "	Задает число повторов. Принимает значения: – INFINITE – бесконечное значение (задается по умолчанию);  – любое целое число.

Задание 10. Гипертекстовые ссылки на WEB-страницах.

Гиперссылки на Web-странице – одно из основных свойств WWW. Любой документ может содержать ссылку на другой WWW-документ, заданную с помощью специального тега . Гипертекстовые ссылки – это фрагменты текста, подчеркнутые и выделенные чаще всего синим цветом. Отображенный таким образом текст называется текстом ссылки. Если на нем щелкнуть мышью, он автоматически осуществляет ссылку на другую Web-страницу. В каждом URL-адресе есть три части: протокол, узел Интернета и имя файла (включая путь к нему, если необходимо). Напомним, что протокол – это правила, в соответствии с которыми два компьютера общаются друг с другом. Будем говорить в основном о HTTP – стандартном протоколе WWW. Необходимо также указать узел Интернета и имя файла, например: http://www.symbol.ru/dk/articles/color.htm. Если перевести это на русский язык, получится, что браузер должен с помощью определенного способа связи (HTTP) связаться по Интернету с указанным адресом symbol.ru, затем найти Web-страницу color.htm в поддиректориях dk/articles. Гипертекстовые ссылки на Web-страницах очень часто используются, поскольку могут легко связать два документа, расположенные на противоположных концах мира. Каждый документ и файл в Интернете имеют уникальный адрес, называемый универсальным указателем ресурсов (Uniform Resource Locator – URL). Чтобы связать два документа, разработчики домашних страниц помещают на одной из них URL другой. URL напоминают адреса электронной почты.

Возможны ссылки:  на удаленный HTML-файл,

·  на некоторую точку в текущем HTML-документе,

·  на любой файл, не являющийся HTML-документом.

В качестве ссылки можно использовать любой текст или графику. Ссылки в пределах одного документа Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>

Описание ссылки:

<A HREF=””>…</A>

Приведем пример:

HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<MARQUEE BIHAVIOR=”SCROLL ” DIRECTION=” LEFT” LOOP=" 10" WIDTH=" 15" BGCOLOR=” FF0000 ”> Очень рада знакомству!!! </MARQUEE>

<H1>Добро пожаловать на мою пробную страничку</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<A HREF=”HOME/Увлечения .HTML”>Увлечения</A>

<HR>

<FONT SIZE =7> Распорядок дня </FONT>

<PRE>

<B> Время                                      Действие                       </B>         <BR>

_________________________________________________________ <BR>

08:00                                             Подъем                                               <BR>

08:30…13:30                                Школа                                                <BR>

15:00…18:00                                Домашнее задания                          <BR>

18:00…21:00                                Любимые увлечения                      <BR>

22:00                                             Отбой                                                 <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Полезные советы по созданию гиперссылок

 Совет первый: ограничьте количество гиперссылок на одной Web- странице. Поскольку текст ссылки выводится подчеркнутым шрифтом, слишком большое число ссылок делает страницу абсолютно нечитаемой, и вряд ли это понравится посетителям. Если есть необходимость ввести множество ссылок, необходимо создать простой (но хорошо организованный) список в конце страницы.

Совет второй: текст гиперссылок должен быть понятным. Необходимо сделать так, чтобы смысл ссылок был понятен. Ссылки лучше выделить жирным шрифтом. Ссылки не должны нарушать плавности повествования.

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

 Совет четвертый: поддерживайте ссылки в действующем состоянии. Большинство ссылок со временем устаревают. Web-страницу, на которую делается ссылка, могут удалить или перенести на другой узел. Периодически проверяйте ссылки на Web-cтранице, чтобы точно знать, что они актуальны. Иначе их лучше не использовать.

Как подготовить хорошую Web-страницу

 1. Следует обратить внимание на простоту и логичность расположения информации на ваших страницах. Один из способов сделать информацию более легкой для восприятия – оставить на странице достаточно свободного места, не содержащего ни текста, ни рисунков. Страница, содержащая много информации, только отпугнет посетителя.

2. Постарайтесь представить информацию в виде списков или таблиц так, чтобы можно было достаточно легко найти важные сведения.

3. Не размещайте одно изображение сразу за другим. Попробуйте распределить их по документу, оставив достаточно свободного пространства.

 4. Информация должна размещаться частями, легкими для восприятия. Обратите внимание на длину абзацев. Если абзац слишком длинный, разбейте его на несколько небольших абзацев.

5. Если Web-страница имеет большой объем, то, возможно, вам следует вставить ссылки, позволяющие пользователю быстро перемещаться между частями одного документа. Иногда имеет смысл вместо одного длинного документа подготовить одну страницу, содержащую перечень тем, каждую из которых раскрыть на отдельной Web-странице, и установить ссылки на соответствующие Web-страницы.

6. Использование графики может дополнительно привлечь пользователей. Но необходимо помнить о времени загрузки вашей страницы, которое определяется количеством и объемом графической информации. Красивая картинка не произведет никакого впечатления, ели для того, чтобы ее увидеть, придется долго ждать, пока она загрузится.

Индивидуальные задания:

1.     Разработайте макет своей «веб-визитки». Найдите необходимые слоганы и их графическое сопровождение. В вашей визитке обязательно расскажите о себе  стараясь избежать публикации личных персональных данных (личный телефон, домашний адрес, сведения о родителях), допустимо рассказать о своих увлечениях, домашних животных, экскурсиях.

2.     Разработайте макет логотипа своей школы (класса) в формате jpg или gif. и представьте его в цветном и черно-белом вариантах. Логотип должен быть хорошо узнаваемым даже не в цветном изображении ЛОГОТИП (от греч. logos — слово и typos — отпечаток) — оригинальное начертание, изображение полного или сокращенного наименования школы или школьного сообщества.

3.     Изготовьте два баннера размером 120x60 — анимированный и статичный. Цель баннеров — воздействовать на эмоциональную сферу потенциального зрителя. Тематика школьная,  о вашем классе, о любимом  учебном предмете, о ваших увлечениях, о любимой спортивной команде, музыкальной группе.

4.     Придумайте графическую иллюстрацию для раздела юмористического сайта на школьную тематику. Иллюстрация необходима смешная, занимательная, оригинальная. Размер иллюстрации 130x190 пикселей. Формат файла jpg или gif.

5.     Разработайте титульную веб-страницу на одну из тем: «Наш класс», «Наша школа»,   «Школьная Интернет-газета», «Млекопитающие нашего края, занесенные в Красную Книгу», «Мои любимые животные», «Моя будущая профессия»

Контрольные вопросы

1. Что такое Интернет, гипертекст, Web-страница, Web-файл, сайт, Web-браузер, провайдер, URL, протокол HTTP?

2. Как используется технология «клиент-сервер» в Web?

3. Какую информацию можно расположить на Web-странице?

4. Что такое HTML, HTML-файл, тег?

5. Перечислите и дайте характеристику структурным тегам.

6. Перечислите и дайте характеристику тегам управления внешним видом Web-страниц.

7. Перечислите и дайте характеристику тегам форматирования символов.

 8. Перечислите основные шаги по созданию Web-страницы.

9. Как можно расположить текст относительно экрана браузера?

10. Перечислите возможности тега <FJNT> .

11. Какой размер шрифта у данного текста: <FONT SIZE =+4>Возможности Интернета<FONT>?

12. Каким образом браузер отобразит текст, заданный шрифтами различного начертания? Что произойдет с текстом, если такие шрифты на персональном компьютере посетителя не установлены?

13. Какие теги относятся к стилевому оформлению текста?

14. Какие специальные символы предусмотрены в HTML?

15. Как можно изменить цвет текста и фона с помощью тега<BODY> ?

16. Какие способы задания цвета существуют в HTML?

17. Чем отличается тег<FONT> от тега <BODY> при задании цвета текста?

18. Как создать бегущую строку на Web-странице? Перечислите и дайте характеристику атрибутам бегущей строки.

19.Как создать фоновое звуковое сопровождение на Web-странице?

20.Для чего необходимы списки на Web-странице?

21. Как оформить маркированный список в Web-документе?

22. Как оформить нумерованный список в Web-документе?

24. Как оформить список определений в Web-документе?

25. Каким образом определяется тип списка?

26. Каким образом задается нумерация списка?

27. Для чего необходимы таблицы на Web-страницах?

28. Какие теги отображают заголовок таблицы?

29. Какие теги определяют строку таблицы?

30. Какие теги определяют текст каждой ячейки таблицы?

31. Что задает ключевое слово BORDER в теге <TABLE>?

32. Какое ключевое слово служит для объединения нескольких строк в таблице?

33. Какое ключевое слово служит для объединения нескольких столбцов в таблице?

34. Каким образом задается фон в таблице?

35. Чем отличаются форматы GIF и JPEG? Перечислите и дайте характеристику тегам выравнивания изображения.

36. Каким образом можно задать рамку изображения?

37. Каким образом используется альтернативный текст?

38. Каким образом задается ширина и высота изображения?

39. Каким образом задаются отступы от изображения?

40. Как расположить текст рядом с изображением?

41. Что такое пиктограммы, их назначение и виды?

42. Как создаются фоновые изображения на Web-странице?

43. Где можно найти необходимые изображения?

44. Что такое гиперссылка и какова ее роль на Web-страницах?

45. Перечислите и охарактеризуйте основные теги гиперссылок?

46. Каким образом осуществляется ссылка на местные Web-страницы?

47. Каким образом осуществляется ссылка на любое место в WWW?

48. Как можно изменить цвет гиперссылки?

49. Как используется графика в качестве гиперссылки?

50. Как осуществляется переход по метке внутри одного HTML- документа?

51. Как осуществляется переход по метке, созданной в другом HTML- документе?

52. Перечислите советы по созданию гиперссылок.

 ПРИЛОЖЕНИЕ 1

Правила техники безопасности и поведения в кабинете информатики и при работе за ПК

При эксплуатации оборудования необходимо остерегаться:

- поражения электрическим током; 
- механических повреждений, травм.

Требования безопасности перед началом работы:

1. Запрещено входить в кабинет в верхней одежде, головных уборах, с громоздкими предметами и едой;
2. Запрещено входить в кабинет информатики в грязной обуви, без сменной обуви;
3. Запрещается шуметь, громко разговаривать и отвлекать других учащихся;
4. Запрещено бегать и прыгать, самовольно передвигаться по кабинету;
5. Перед началом занятий все личные мобильные устройства учащихся (телефон, плеер и т.п.) должны быть выключены;
6. Разрешается работать только на том компьютере, который выделен на занятие;
7. Перед началом работы учащийся обязан осмотреть рабочее место и свой компьютер на предмет отсутствия видимых повреждений оборудования;
8. Запрещается выключать или включать оборудование без разрешения учителя;
9. Напряжение в сети кабинета включается и выключается только учителем;

Требования безопасности во время работы:

1. С техникой обращаться бережно: не стучать по мониторам, не стучать мышкой о стол, не стучать по клавишам клавиатуры;
2. При возникновении неполадок: появлении изменений в функционировании аппаратуры, самопроизвольного её отключения необходимо немедленно прекратить работу и сообщить об этом учителю;
3. Не пытаться исправить неполадки в оборудовании самостоятельно;
4. Выполнять за компьютером только те действия, которые оговорены учителем;

5. Контролировать расстояние до экрана и правильную осанку;
6. Не допускать работы на максимальной яркости экрана дисплея;
7. В случае возникновения нештатных ситуаций сохранять спокойствие и чётко следовать указаниям учителя;

Запрещается:

1. Эксплуатировать неисправную технику;
2. При включённом напряжении сети отключать, подключать кабели, соединяющие различные устройства компьютера;
3. Работать с открытыми кожухами устройств компьютера;
4. Касаться экрана дисплея, тыльной стороны дисплея, разъёмов, соединительных кабелей, токоведущих частей аппаратуры;
5. Касаться автоматов защиты, пускателей, устройств сигнализации ;
6. Во время работы касаться труб, батарей ;
7. Самостоятельно устранять неисправность работы клавиатуры; 
8. Нажимать на клавиши с усилием или допускать резкие удары;
9. Пользоваться каким-либо предметом при нажатии на клавиши ;
10. Передвигать системный блок, дисплей или стол, на котором они стоят;
11. Загромождать проходы в кабинете сумками, портфелями, стульями;
12. Брать сумки, портфели за рабочее место у компьютера;
13. Брать с собой в класс верхнюю одежду и загромождать ею кабинет;
14.Быстро передвигаться по кабинету;
15. Класть какие-либо предметы на системный блок, дисплей, клавиатуру; 
16. Работать грязными, влажными руками, во влажной одежде;
17.Работать при недостаточном освещении;

18. Работать за дисплеем дольше положенного времени;

Запрещается без разрешения учителя:

1. Включать и выключать компьютер,  дисплей и другое оборудование;
2. Использовать различные носители информации (дискеты, диски, флешки);
3. Подключать кабели, разъёмы и другую аппаратуру к компьютеру;
4. Брать со стола учителя дискеты, аппаратуру, документацию и другие предметы;
5. Пользоваться учительским компьютером.

Требования безопасности по окончанию работы:

1. По окончании работы дождаться пока учитель подойдёт и проверит состояние оборудования, сдать работу, если она выполнялась;
2. Медленно встать, собрать свои вещи и тихо выйти из класса, чтобы не мешать другим учащимся;

Ответственность за нарушение правил техники безопасности:

1. При нарушении техники безопасности учащемуся будет объявлено порицание, вплоть до отстранения от работы за компьютером на данном уроке с выставлением соответствующей оценки в журнал успеваемости обучающихся;
2. При регулярных нарушениях техники безопасности обучающийся будет отстранён от занятий информатики  или  к нему будут применены другие санкции предусмотренные школой.

ПРИЛОЖЕНИЕ 2

Словарик основных используемых тегов и атрибутов языка HTML

Основные теги
<html></html>	Указывает программе просмотра страниц, что это HTML документ.
<head></head>	Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body>	Определяет видимую часть документа
Теги оглавления
<title></title>	Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
<body bgcolor=?>	Устанавливает цвет фона документа, используя значение цвета в стандарте RGB - пример: FFFF00 - желтый цвет.
<body text=?>	Устанавливает цвет текста документа, используя значение цвета в стандарте RGB - пример: 00ff00 - зеленый цвет.
<body link=?>	Устанавливает цвет гиперссылок, используя значение цвета в стандарте RGB - пример: 00FF00 - зеленый цвет.
<body vlink=?>	Устанавливает цвет гиперссылок, на которыхх вы уже побывали, используя значение цвета в виде стандарте RGB - пример: 333333 - темно-серый цвет.
<body alink=?>	Устанавливает цвет гиперссылок при нажатии.
Теги форматирования текста
<pre></pre>	Обрамляет предварительно                                   отформатированный текст. (как есть!)
<h1></h1>	Создает САМЫЙ БОЛЬШОЙ заголовок (как отдельный абзац)
<h6></h6>	Создает САМЫЙ МАЛЕНЬКИЙ заголовок
<b></b>	Создает жирный текст
<i></i>	Создает наклонный текст
<tt></tt>	Создает текст - имитирующий стиль печатной машинки.
<cite></cite>	Используется для цитат, обычно наклонный текст.
<em></em>	Используется для выделения из текста слова (наклонный или жирный текст)
<font size=?></font>	Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font>	Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки
<a rel="nofollow ugc" target="_blank" href="URL">ТЕКСТ</a>	Создает гиперссылку на другие документы или часть текущего документа. Здесь URL адрес ссылки, ТЕКСТ - текст ссылки.
<a rel="nofollow ugc" target="_blank" href="URL">  < img src="imgURL" > </a>	Создает гиперссылку на рисунок, находящийся по адресу imgURL.
"URL" = "links/main.htm"	Адрес документа main.htm, находящегося в локальной папке links данного компьютера.
"URL" =  "http://www.rambler.ru"	Ссылка на ресурс, находящийся на удаленном компьютере. В адресе присутствуют: программа связи с удаленным компьютером http (HyperTextTransfer Protocol, разделители :// и интернет (IP) адрес искомого ресурса (в данном случае поискового сервера Rambler).
<a rel="nofollow ugc" target="_blank" href="mailto:EMAIL"> </a>	Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.
<a name="NAME"></a>	Отмечает часть текста как место перехода по гипперссылке в документе.
<a rel="nofollow ugc" target="_blank" href="#NAME"></a>	Создает гиперссылку на помечанную часть текущего документа.
Форматирование
<p>	Создает новый параграф
<p align=?>	Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center
<br>	Вставляет перевод  строки.
<blockquote> </blockquote>	Создает отступы с обеих сторон текста.
<dl></dl>	Создает список определений. Штанга <dt> Основной снаряд в тяжелой атлетике. Состоит из стального грифа (стержня) со втулками на концах и свободно надевающихся металлических дисков. <dd>
<dt>	Определяет каждый из терминов списка
<dd>	Описывает каждое определение
<ol></ol>	Создает нумерованный список
<li>	Определяет каждый элемент списка и присваивает номер
<ul></ul>	Создает ненумерованный список
<li>	Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?>	Тег, используемый для форматирования больших блоков текста HTML документа. Часто используется в таблицах стилей
Использование кодов символов и специальных знаков в документе HTML
Код в документе HTML	Выводится браузером на экран
&#32;  &#33;  &#34;  &#35;  &#36;  &#37;  &#38;  &#60;  &#61;  &#62;  &#169;  &#171;  &#177;  &#185;  &#187;  &#197;  &nbsp;  &lt;  &gt;  &quot;	пробел  !  "  #  $  %  &  <  =  >  ©  «  ±  ¹  »  Å  Неразрывный пробел  <  >  "
Графические элементы
<img src="name">	Добавляет изображение в HTML документ
<img src="name" align=?>	Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?>	Устанавливает толщину рамки вокруг изображения
<hr>	Добавляет в HTML документ горизонтальную линию.
<hr size=?>	Устанавливает высоту(толщину) линии
<hr width=?>	Устанавливает ширину линии, можно указать ширину в пикселях или процентах.
<hr noshade>	Создает линию без тени.
<hr color=?>	Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<table></table>	Создает таблицу.
<tr></tr>	Определяет строку в таблице.
<td></td>	Определяет отдельную ячейку в таблице.
<th></th>	Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#>	Задает толщину рамки таблицы. (здесь 5)
<table cellspacing=#>	Задает расстояние между ячейками таблицы.
<table cellpadding=#>	Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#>	Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?>	Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. (здесь right)
<tr valign=?> или <td valign=?>	Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#>	Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#>	Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap>	Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Фреймы
<frameset></frameset>	Предваряет тег <body> в документе, содержащем фреймы;
<frameset rows="value,value">	Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов.
<frameset cols="value,value">	Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов.
<frame>	Определяет единичный фрейм или область в таблице фреймов.
<noframes></noframes>	Определяет, что будет показано в окне браузера если он не поддерживает фреймы.
Атрибуты фреймов
<frame src="URL">	Определяет какой из HTML документов будет показан во фрейме.
<frame name="name">	Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм, или область из других фреймов.
<frame marginwidth=#>	Определяет величину отступов по левому и правому краям фрема; должно быть равно или больше 1.
<frame marginheight=#>	Определяет величину отступов по верхнему и нижнему краям фрейма; должно быть равно или больше 1.
<frame scrolling=VALUE>	Указывает будет ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize>	Препятствует изменению размеров фрейма.
Формы1
1 Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML создает только внешний интерфейс формы.
<form></form>	Создает формы
<select multiple name="NAME" size=?></select>	Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option>	Указывает каждый отдельный элемент меню
<select name="NAME"></select>	Создает ниспадающее меню
<option>	Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea>	Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME">	Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x">	Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20>	Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME">	Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif">	Создает кнопку "Принять" - для этого используется изображение
<input type="reset">	Создает кнопку "Отмена"

ПРИЛОЖЕНИЕ 3

Упражнения для снятия напряжения с глаз и уменьшения зрительной нагрузки у обучающихся разных возрастов.

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

Школьная перегрузка и долгое нахождение в статическом положении приводит к переутомлению учащихся. Ученые утверждают, что полностью избежать утомления от учебных перегрузок не удается, да и не нужно. Это противоречит не только педагогическим, но и гигиеническим принципам, так как только интенсивная деятельность служит залогом полноценного функционирования и развития растущего организма. Биологическое значение утомления двояко: охраняя, защищая организм от чрезмерного истощения физиологических систем, оно в то же время оказывается стимулятором последующего роста работоспособности. Гигиенисты считают, что необходимо такое дозирование деятельности, при котором возникающее утомление полностью исчезает в последующий за работой период отдыха. Если этого не происходит, утомление накапливается и переходит в переутомление. Усилия педагога должны быть направлены на то, чтобы утомление не наступало слишком быстро, чтобы оно не было чересчур глубоким, чтобы более эффективным был отдых.

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

Ученые считают, что продолжительность активного внимания, например, первоклассников составляет 15-20 минут. После 30-35 минут непрерывных занятий у них резко падает работоспособность: интенсивность работы снижается на 37 %, а качество её на 50 %. При этом около 50% учащихся начинают отвлекаться от работы.

Кратковременные физические упражнения и игры, вызывая возбуждение других участков мозга, усиливают кровообращение и создают возможность для отдыха участков, находившихся в раздраженном состоянии во время учебных занятий. После такого короткого активного отдыха внимание детей повышается, восприятие учебного материала улучшается, в целом активизируя организм детей.

 Для снятия утомления с глаз целесообразно применять специальные упражнения: игровые упражнения для зрительного утомления, гимнастику для глаз, которые помогают снять физическое, психическое и зрительное напряжение. Активизируют двигательные функции, формируют способы зрительного восприятия. Упражнения способствуют оздоровительному эффекту.

Вариант 1

1. Закрыть глаза, сильно напрягая глазные мышцы, на счет 1-4, затем раскрыть глаза, расслабив мышцы глаз, посмотреть вдаль на счет 1-6. Повторить 4-5 раз.
2. Посмотреть на переносицу и задержать взор на счет 1-4. До усталости глаза не доводить. Затем открыть глаза, посмотреть вдаль на счет 1-6. Повторить 4-5 раз.
3. Не поворачивая головы, посмотреть направо и зафиксировать взгляд на счет 1-4, затем посмотреть вдаль прямо на счет 1-6. Аналогичным образом проводятся упражнения, но с фиксацией взгляда влево, вверх и вниз. Повторить 3-4 раза.
4. Перенести взгляд быстро по диагонали: направо вверх - налево вниз, потом прямо вдаль на счет 1-6; затем налево вверх направо вниз и посмотреть вдаль на счет 1-6. Повторить 4-5 раз.

Вариант 2

1. Закрыть глаза, не напрягая глазные мышцы, на счет 1-4, широко раскрыть глаза и посмотреть вдаль на счет 1-6. Повторить 4-5 раз
2. Посмотреть на кончик носа на счет 1-4, а потом перевести взгляд вдаль на счет 1-6. Повторить 4-5 раз.
3. Не поворачивая головы (голова прямо), делать медленно круговые движения глазами вверх-вправо-вниз-влево и в обратную сторону: вверх-влево-вниз-вправо. Затем посмотреть вдаль на счет 1-6. Повторить 4-5 раз.
4. При неподвижной голове перевести взор с фиксацией его на счет 1-4 вверх, на счет 1-6 прямо; после чего аналогичным образом вниз-прямо) вправо-прямо, влево-прямо. Проделать движение по диагонали в одну и другую стороны с переводом глаз прямо на счет 1-6. Повторить 3-4 раза.

Вариант 3

1. Голову держать прямо. Поморгать, не напрягая глазные мышцы, на счет 10-15.
2. Не поворачивая головы (голова прямо) с закрытыми глазами, посмотреть направо на счет 1-4, затем налево на счет 1-4 и прямо на счет 1-6. Поднять глаза вверх на счет 1-4, опустить вниз на счет 1-4 и перевести взгляд прямо на счет 1-6.Повторить 4-5 раз.
3. Посмотреть на указательный палец, удаленный от глаз на расстояние 25-30 см, на счет 1-4, потом перевести взор вдаль на счет 1-6. Повторить 4-5 раз.
4. В среднем темпе проделать 3-4 круговых движения в правую сторону, столько же в левую сторону и, расслабив глазные мышцы, посмотреть вдаль на счет 1-6. Повторить 1-2 раза.

Вариант 4

1.     Сидя, откинувшись на спинку стула. Глубокий вдох. Наклонившись вперёд, к крышке стола - выдох. Повторить 5-6 раз.

2.     Сидя, откинувшись на спинку стула, прикрыть веки руками, крепко зажмурить глаза. При закрытых глазах открыть веки, затем открыть глаза. Повторить 4 раза.

3.     Сидя, руки на пояс. Повернуть голову вправо, посмотреть на локоть правой руки, повернуть голову влево, посмотреть на локоть левой руки.  Повторить 4-5 раз.

Вариант 5

1.     Сидя руки вперёд, посмотреть на кончики пальцев, поднять руки вверх (вдох), следить глазами за руками, не поднимать головы, руки опустить (выдох). Повторить 5-6 раз.

2.     Стоя или сидя расположить большой палец правой руки по средней линии лица на расстоянии 20-30 см от глаз, смотреть двумя глазами на конец пальца 3-5 секунд, прикрыть ладонью левой руки левый глаз на 3-5 секунд, убрать ладонь, смотреть двумя глазами на конец пальца 3-5 секунд. То же, поменяв руки.

3.     Выполняется стоя:

·        смотреть прямо перед собой 2-3 секунды;

·        поставить палец руки на расстоянии 25-30 см от глаз;

·        перевести взор на кончик пальца и смотреть на него 3-5 секунд;

·        опустить руку (Повторить 10-12 раз.)

ПРИЛОЖЕНИЕ 4

Библиографический список

1.Гончаров А. HTML в примерах. – СПб.:Питер, 1997. –192 с.

2.Веб-дизайн: книга Дмитрия Кирсанова/ Под ред. А. Галунова. – СПб.: Символ Плюс, 1999. – 360 с.

3.Леонтьев Б. Web-дизайн: Тонкости, хитрости и секреты. – М.: Познавательная книга плюс,1999. – 192 с. e-mail: [e-mail]

 4.Леонтьев Б. Web-дизайн: Руководство пользователя. – М.: Познавательная книга плюс, 2001. – 320 с.

5.Лилиан Хоббс. Домашние странички Internet. Серия "Enter". – Ростов н/Д: "Феникс", 1998. – 160 с.

 6.Холмогоров В. Основы Web-мастерства. – СПб.: Питер, 2002. – 352 с.

7.Шафран Э. Создание Web-страниц: самоучитель. – СПб.: Питер, 1999. – 320 с. email: [e-mail]

8.Дуванов А. А. HTML – конструирование //Информатика. Приложение к газете "Первое сентября". – 2000. – № 21, 22.

9.Байнов В.Д. Интернет: поиск информации и продвижение сайтов. – СПб.: БВХ- Петербург, 2000. – 288 с.

10.Современный самоучитель работы в сети Интернет. Самые популярные программы/ Под ред. Колягина. – 3-е изд., пераб. и доп. – М.: Триумф, 2000. – 486 с.

11. Внукова Л.А. Разработка Web-страниц: Основы языка HTML/ Л.А. Внукова, С.А. Зырянова: Учебно-методическое пособие. – Омск: Изд-во СибАДИ, 2003. – 116 с.