Практическая работа «Разработка сайта с использованием языка разметки гипертекстовых документов HTML»

Практическая работа «Разработка сайта с использованием языка разметки гипертекстовых документов HTML»

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

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

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

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

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

Часть 1

Создание страницы «Зима»

1. Скопировать папку «Времена года» в личную папку.

2. Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).

3. Разместить на странице теги, определяющие страницу в целом.

4. Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.

5. Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.

6. Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.

7. Просмотрите страницу в браузере.

8. Установите фоновый цвет страницы (голубой, bgcolor="ccccff").

9. Поместите рисунок, выравнивая его по правому краю документа.

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

11. Создайте панель навигации по сайту.

12. Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.

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

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