Разработка урока по информатике: "Создание Web-страницы"
план-конспект урока по информатике и икт (9 класс) по теме

ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ ГОРОДА МОСКВЫ

ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ СРЕДНЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

КОЛЛЕДЖ ЛАНДШАФТНОГО ДИЗАЙНА №18

Практическое занятие

на тему:

«Создание простой Web-страницы»

преподаватель: Колозян Элина Шаваршевна

Москва, 2013

Цели:

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

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

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

1. воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;
2. формировать элементы научного мировоззрения

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

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

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

Технические средства:        компьютеры 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-страницу – команда Файл – Открыть; выбрать нужный файл и щелкнуть по кнопке «Обзор…»

Замечание. Будете продолжать редактирование файла index.htm, не закрывая Internet Explorer: для этого через панель задач переключиться на программу Блокнот, в которой открыт файл index.htm.

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

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

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

<html>

<head>

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

</head>

<body>

…

   текст

…

</body>

</html>

Замечание. Сохранить редактируемый в Блокноте файл (Файл – Сохранить) и, переключившись через панель задач на Internet Explorer, выполнить в браузере команду Вид – Обновить (или щелкнуть по кнопке «Обновить»).

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">

bgcolor –цвет фона; text – цвет текста

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

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

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

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

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

<table bolder=0>

<tr>

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

<td width="80%">

Числа 10%, 80%, 10% можно изменить, но их сумма должна быть равна 100%

….

Заголовок

Текст

…

</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>

<marquee - открывающий тэг;

height=   высота (в пикселях) и width=   ширина (в пикселях или процентах) поля «бегущей строки»;

hspase= и vspase=   интервалы (в пикселях) по горизонтали и вертикали между текстом и краями её поля;

align=  расположение текста в поле «бегущей строки»: top – вверху, bottom – внизу, middle – посредине;

bgcolor=  позволяет установить цвет фона;

direction=  определяет направление движения «бегущей строки»: left – справа налево, right – слева направо

loop=infinite – «бегущая строка» присутствует все время, пока идёт просмотр страницы;

scrollamount= длина в пикселях, на которую текст перемещается за один такт;

scrolldelay= величина паузы между отдельными тактами перемещения текста (в долях се

кунды; 1000 – пауза в 1сек)

<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. Итог урока.

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