Цели:

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

-       приобрести начальные навыки создания простейших Internet-документов;

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

Воспитательная:      

-       воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;

-       формировать элементы научного мировоззрения

Развивающая:    

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

Тип занятия:                         комбинированный

Технические средства:         компьютеры IBM/PC

Программное обеспечение: операционная система WINDOWS 7/Vista,

программа Блокнот, Браузер Internet Explorer

Замечание. Для выполнения задания должна быть приготовлена папка КРЕМЛЬ    с рабочим материалом, в который включить файлы:

1)    текстовый файл для веб-страницы.txt (создан в программе Блокнот)

2)    рисунок cvetok.jpg

3)    музыкальный файл mtv-1.mp3

4)    Краткая справка по тэгам  Приложение 1

5)    Таблица цветов Приложение 2

План урока:
I. Орг. момент.
II. Актуализация знаний.
III. Выполнение лабораторно-практической работы по теме.
IV. Домашнее задание
V. Итог урока.

Ход урока:
I. Орг. момент.
Приветствие, проверка присутствующих. Объяснение хода занятия.

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

Web - это средство представления информации в Интернете. Информация может быть представлена в виде текстов, рисунков, аудио и видеоклипов. В то же время, Web - это технология доступа к информационным ресурсам Интернета, размещенным на множестве Web-серверов. В целом, Web - это гипертекстовая информационная среда, использующая принятый язык разметки гипертекста и поддерживающая различные протоколы Интернета для доступа к его информационным ресурсам. Любой протокол - это набор правил, которые используются компьютерами для обмена информацией. Среди протоколов Интернета самый распространенный - HTTP (Hyper Text Transfer Protoсol). Используются FTP (для присоединения и загрузки файлов), FILE (для доступа к файлам на локальных дисках), протокол для электронной почты и некоторые другие.

Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Web-страницы могут быть созданы с помощью

1)  обычного текстового редактора;

2)  редактора, способного сохранять в формате HTML;

3)  специализированного редактора;

4)  специализированной системы.

HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .HTM (для Windows 3.1) или .HTML (для Windows 95/98/NT/XP, Macintosh и Unix).

Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов — тэги.

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

III. Выполнение лабораторно-практической работы.

1. Исходные файлы: находятся в папке Цветы

Перед выполнением задания скопируйте все файлы из папки ЦВЕТЫ в свою рабочую папку.

2. Загрузить программу Блокнот (ПУСК – Программы – Стандартные)

3. Открыть готовый текстовый файл «для веб-страницы.txt »

Замечание. На каждом шаге будете добавлять новый тэг – он выделен жирным шрифтом. Остальные тэги остаются без изменения.

4. В начале текста разместить тэг, указывающий, что данный документ является HTML-текстом (т.е. обязательный тэг для Web-страницы):

<html>

…

   текст

…

</html>

5. Создание заголовка Web-страницы:

<html>

<head>

<title>Любимые цветы</title>      (заголовок страницы)

</head>

…

   текст

…

</html>

6. Сохраните документ в своей рабочей папке под именем indeх.htm – для этого выполните команду Файл – Сохранить как

7. Открыть программу Internet Explorer (ПУСК – Программы). Работать будем автономно !

Открыть Web-страницу – команда Файл – Открыть; выбрать нужный файл и щелкнуть по кнопке «Обзор…»

8. Определение тела документа:

для этого необходимо вставить тэги <body> … </body>

Страница получит вид:

<html>

<head>

<title>Любимые цветы</title>

</head>

<body>

…

   текст

…

</body>

</html>

9. Разбить текст на несколько абзацев (сделаем 6 абзацев):

для этого имеется тэг <br> (его действие аналогично нажатию клавиши Enter в процессоре Word). Поставить тэг <br> перед словами:

1)    «Цветок представляет собой …»

2)    «Исключительная роль цветка …»

3)    «Цветок, будучи уникальным …»

4)    «Самые мелкие цветки …»

10. Оформить красную строку: для этого нужно вставить несколько символов пробела &nbsp; (вставьте 4 пробела) – после каждого тэга <br> и перед началом всего текста - т.е.

<br>&nbsp;&nbsp;&nbsp;&nbsp;

11. Между абзацами вставить по одной пустой строки – для этого добавить еще один тэг <br>

12. Выровнить абзацы по ширине: для этого перед текстом поставить тэг <p align="justify">, после текста – тэг </p>

13.Вставить к тексту заголовок: для этого после <body> поставить тэг <h1>Цветы</h1> и выровнять его по центру страницы – дополнить этот тэг, чтобы получилось<h1 align="center">Цветы</ h1>

Замечание. Изменяя цифру от 1 до 6, можно получить заголовки шести уровней. Попробуйте, не забывая при этом замечание п. 7.

14. Изменение фона страницы и цвета текста: для этого добавить в тэг <body>

<body bgcolor="#f0e68c" text="#191970">

Замечание.  Код цвета фона и текста можно подобрать другие. Запись цвета - в формате RGB

Более полный перечень цветов – см. файл Приложение 2.

Просматривайте Web-страницу после внесения изменений (не забывайте о замечании п.7)

15. Расположение текста на экране: редактируемая страница при просмотре в браузере имеет недостаток -  слишком широкий текст, который неудобно читать. Чтобы «сузить» текст можно использовать для разметки страницу таблицу с невидимыми границами (атрибут bolder).

После тэга <body …>вставить тэги таблицы<table>, состоящей из одной строки <tr>и трех ячеек <td> в этой строке:

<table bolder=0>

<tr>

<td width="10%"></td>

<td width="80%">

….

Заголовок

Текст

…

</td>

<td width="10%"></td>

</tr>

</table>

</body>

16. Изменение начертания шрифта (т.е. выделение фрагментов текста): выделить слова «Цветок» (1-й абзац) – полужирным, 3-й абзац – курсивом. Для этого в тексте поставить тэги

<B>Цветок</B> и <I> … </I>

Замечание. Способы выделения текста: <B> - полужирный, <I> -курсив, <U> - подчеркивание (парные тэги! Не забывайте ставить закрывающий тэг)

17. Изменение размера шрифта: <font size="5"> текст</font>

Замечание.         Цифру можно изменять от 1 до 7: 7 – самый крупный шрифт, 1 – самый мелкий

Сделайте для 1-го абзаца шрифт 5, для 4-го абзаца – шрифт 4

Вставка рисунка: после тэга <h1 align="center">ЦВЕТЫ</ h1> вставить тэг

<p align="center "><img src="kreml.jpg "></p> (рисунок вставляем по центру сразу после заголовка)

Внимание ! Рисунок cvetok.jpg должен находиться в той же рабочей папке, куда сохранили свою Web-страницу. Формат рисунка должен быть jpeg.

Для этого скопируйте рисунок cvetok.jpg из папки Цветы в свою рабочую папку.

18. Сохраните изменения в Блокноте и просмотрите Web-страницу в браузере Internet Explorer.

19. Вставка «бегущей строки»: после заголовка <h1 align="center">Цветы</h1> вставить тэги

<marquee

height=30 width=100%

hspase=5 vspase=5 align=middle

bgcolor=yellow

direction=left loop=infinite behavior=scroll

scrollamount=5 scrolldelay=100><font size="5">

Запишите Вашу фамилию, имя</font>

</marquee>

20. Вставка разделительных полос: тэг <hr>

перед вторым абзацем вставить тэг <hr size=5 widht=200 noshade> - толщина и длина полосы; noshade – чтобы полоса была темной

Убрать тэги <br><br> - две пустые строки перед вторым абзацем

21. Т.к. после вставки разделительной полосы нарушается выравнивание (все абзацы, кроме первого, будут выровнены по левому краю), то необходимо добавить после тэга <hr> тэг <p align="justify">

22. Вставка фонового звука: после тэга <body bgcolor="#f0e68c" text="#191970"> вставить тэг

<bgsound src="mtv-1.mp3" loop=infinite> - музыка будет звучать до тех пор, пока файл изображается на экране. Звуковой файл mtv-1.mp3 должен находиться в Вашей рабочей папке (скопируйте его из папки Цветы)

Не забудьте сохранить задание.

IV. Домашнее задание

Записи в тетради.

V. Итог урока.

Подведение итога занятия. Просмотреть выполненные задания. Ответить на вопросы обучающихся.