Разработка сайта с использованием языка разметки гипертекстовых документов НТМl. Практическая работа для учащихся 8-го класса

Никитина Валентина Васильевна, учитель информатики и ИКТ

Цель работы: формирование навыков использования основных тэгов языка HTML при создании Web-сайта в текстовом редакторе Блокнот.

Программное обеспечение: стандартное приложение Windows Блокнот.

Предварительная подготовка:

Создать на рабочем диске папку “Времена года” с подготовленными иллюстрациями. Приложение 1.
Подготовить тексты заданий (если необходимо – с HTML-кодами страниц). Приложение 2.

Подготовить текст стихов, размещаемых на страницах. Приложение 3.

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

Описание сайта

Web-сайт состоит из 5 связанных гиперссылками страниц:

Титульная страница “Времена года” – файл index.htm;
“Зима” – файл winter.htm;
“Весна” – файл spring.htm;
“Лето” – файл summer.htm;
“Осень” – файл autumn.htm.

Описание работы

Часть 1

Создание страницы “Зима”

Скопировать папку “Времена года” в личную папку.
Запустить приложение Блокнот. Создать html-код страницы “Зима”, опираясь на изученный ранее материал (конспект, текст параграфа).
Разместить на странице теги, определяющие страницу в целом.
Введите заголовок первого уровня “Времена года” и заголовок второго уровня “Зима”. Отцентрируйте заголовки.
Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.
Сохранить файл в папке “Времена года”:
установите тип файлов – “Все файлы”, укажите имя файла – winter.htm.
Просмотрите страницу в браузере.
Установите фоновый цвет страницы (голубой, bgcolor="ccccff").
Поместите рисунок, выравнивая его по правому краю документа.
Поместите стихотворение, выравнивая его по левому краю страницы. Каждую строку оформите отдельным абзацем, строфы отделите пустой строкой.
Создайте панель навигации по сайту.
Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.

Код страницы:

<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor="ccccff">
<H1 ALIGN="center"> Времена года </H1>
<HR>

<H2 ALIGN="center"> Зима </H2>

<HR>
<IMG SRC="zima.jpg" ALT="Зима" ALIGN="right">
 Чудная картина, 
 Как ты мне родна: 
 Белая равнина, 
 Полная луна, 
 
 Свет небес высоких, 
 И блестящий снег, 
 И саней далеких 
 Одинокий бег. 
 

[<A href="winter.htm"> Зима</A>] &nbsp
[<A href="spring.htm"> Весна </A>] &nbsp
[<A href="summer.htm"> Лето </A>] &nbsp
[<A href="autumn.htm"> Осень </A>] &nbsp

</body>
</HTML>

Часть 2

Создание страницы “Весна”

Запустить приложение Блокнот. Создать html-код страницы “Весна”.
Заголовки и их отбивку выполнить аналогично странице “Зима”, цвет второго заголовка – зеленый.
Цвет фона – бирюзовый (bgcolor="00ffcc").
Стихи разместить аналогично странице “Зима”, начертание символов определить как полужирный курсив.
Рисунок разместить аналогично странице “Зима”, установив размеры изображения по вертикали и горизонтали: 450 на 600 пикселей.
Сохранить файл в папке “Времена года”. Указать тип файлов – “Все файлы”. Указать имя файла – spring.htm
Открыть файл spring.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Код страницы:

<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor="00ffcc">
<H1 ALIGN="center"> Времена года </H1>
<HR>

<H2 ALIGN="center"> Весна </H2>

<HR>
<IMG SRC="vesna.jpg" haight="450" width="600" ALT="Весна" ALIGN="right">

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

[<A href="winter.htm"> Зима</A>] &nbsp
[<A href="spring.htm"> Весна </A>] &nbsp
[<A href="summer.htm"> Лето </A>] &nbsp
[<A href="autumn.htm"> Осень </A>] &nbsp

</body>
</HTML>

Часть 3

Создание страницы “Лето”

Запустить приложение Блокнот. Создать html-код страницы “Лето”.
Заголовки и их отбивку выполнить аналогично, цвет заголовков – черный.
Разместить объекты на странице, согласно образцу. Цвет фона – зеленый (bgcolor="00cc66").
Сохранить файл в папке “Времена года”. Указать тип файлов – “Все файлы”. Указать имя файла – summer.htm.
Открыть файл summer.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Код страницы:

<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor="00cc66">
<H1 ALIGN="center"> Времена года </H1>
<HR>

<H2 ALIGN="center"> Лето </H2>

<HR>
<IMG SRC="leto.jpg" haight="450" width="600" ALT="Лето" ALIGN="right">

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

[<A href="winter.htm"> Зима</A>] &nbsp
[<A href="spring.htm"> Весна </A>] &nbsp
[<A href="summer.htm"> Лето </A>] &nbsp
[<A href="autumn.htm"> Осень </A>] &nbsp

</body>
</HTML>

Часть 4

Создание страницы “Осень”

Запустить приложение Блокнот. Создать html-код страницы “Осень”.
Заголовки и их отбивку выполнить аналогично, цвет первого заголовка – черный, второго – коричневый оттенок #993300.
Разместить объекты на странице, согласно образцу. Цвет фона – желтый (bgcolor="ffcc66").
Сохранить файл в папке “Времена года”. Указать тип файлов – “Все файлы”. Указать имя файла – autumn.htm.
Открыть файл autumn.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Код страницы:

<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor="ffcc66">
<H1 ALIGN="center"> Времена года </H1>
<HR>

<H2 ALIGN="center"> Осень </H2>

<HR>
<IMG SRC="osen.jpg" ALT="Осень" ALIGN="right">

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

[<A href="winter.htm"> Зима</A>] &nbsp
[<A href="spring.htm"> Весна </A>] &nbsp
[<A href="summer.htm"> Лето </A>] &nbsp
[<A href="autumn.htm"> Осень </A>] &nbsp

</body>
</HTML>

Часть 5

Создание титульной страницы

Запустить приложение Блокнот. Создать html-код титульной страницы.
Поместить заголовок первого уровня “Времена года”, выравнивание – по центру, цвет заголовка – синий.
Выполнить отбивку заголовка прямой линией.
Поместить таблицу из 2 строк и двух столбцов. Задать ширину границ – 3 пункта, размер ячеек 300 на 200 пикселей.
Поместить в ячейки иллюстрации.
Добавить панель навигации.
Сохранить файл в папке “Времена года”. Указать тип файлов – “Все файлы”. Указать имя файла – index.htm.
Открыть файл index.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Код страницы:

<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body>

<H1 ALIGN="center"> Времена года </H1>

<HR>
<table align="center">
<tr>
<td Haight="200" width="300" border="3" >
<IMG SRC="zima.jpg" Haight="200" width="300" ALT="Зима" ALIGN="center"> </td>
<td Haight="200" width="300" border="3" >
<IMG SRC="vesna.jpg" Haight="200" width="300" ALT="Весна" ALIGN="center"> </td>
</tr>
<tr>
<td Haight="200" width="300" border="3" >
<IMG SRC="leto.jpg" Haight="200" width="300" ALT="Лето" ALIGN="center"> </td>
<td Haight="200" width="300" border="3" >
<IMG SRC="osen.jpg" Haight="200" width="300" ALT="Осень" ALIGN="center"> </td>
</tr>
</table>

[<A href="winter.htm"> Зима</A>] &nbsp
[<A href="spring.htm"> Весна </A>] &nbsp
[<A href="summer.htm"> Лето </A>] &nbsp
[<A href="autumn.htm"> Осень </A>] &nbsp

</body>
</HTML>

Приложение 1

Приложение 2

Приложение 3

5.06.2011