Создание Web-страницы

Разделы: Информатика


Цели :

  • Образовательные:
    • приобрести начальные навыки создания простейших Internet-документов;
    • научиться выполнять форматирование созданных Web-страниц.
  • Воспитательные:
    • воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;
    • формировать элементы научного мировоззрения
  • Развивающие:
    • развивать наглядно-образное мышление, память и умение сравнивать и анализировать

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

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

Программное обеспечение: операционная система WINDOWS ХР, программа Блокнот, Браузер Internet Explorer

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

План урока:

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-страницы могут быть созданы с помощью

  • обычного текстового редактора;
  • редактора, способного сохранять в формате HTML;
  • специализированного редактора;
  • специализированной системы.

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

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

1. Исходные файлы: находятся в папке КРЕМЛЬ
Перед выполнением задания скопируйте все файлы из папки КРЕМЛЬ в свою рабочую папку.

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

3. Открыть готовый текстовый файл «Приложение 1.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> перед словами:

  • «Укрепление было построено…»
  • «С тех пор …»
  • «Отсюда, из кремля…»
  • «Самое большое строительство…»
  • «К концу XV века…»

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>

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

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

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

Цвет #RRGGBB (код) Цвет #RRGGBB (код)
Black– черный #000000 Рurple – фиолетовый #FF00FF
White – белый #FFFFFF Yellow – желтый #FFFF00
Red– красный #FF0000 Вrown – коричневый #996633
Сreen – зеленый #00FF00 Оrangе – оранжевый #FF8000
Аzure – бирюзовый #00FFFF Violet – лиловый #8000FF
Вlue – синий #0000FF Gray – серый #А0А0А0

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

15. Расположение текста на экране: редактируемая страница при просмотре в браузере имеет недостаток –  слишком широкий текст, который неудобно читать. Чтобы «сузить» текст можно использовать для разметки страницу таблицу с невидимыми границами (атрибут bolder).
После тега <body …>вставить теги таблицы<table>, состоящей из одной строки <tr>и трех ячеек <td> в этой строке:

<table bolder=0>
<tr>
<td width="10%"></td>

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

 <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=" Рисунок 1.jpg "></p> (рисунок вставляем по центру сразу после заголовка)

Внимание ! Рисунок Рисунок 1.jpg должен находиться в той же рабочей папке, куда сохранили свою Web-страницу. Формат рисунка должен быть jpeg.
Для этого скопируйте рисунок Рисунок 1.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. Домашнее задание

Учебник: Угринович Н.Д. Информатика и ИТ. с.467-483.

Вопросы: стр. 474

V. Итог урока

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