Сайты созданные с помощью гипертекста HTML

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

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

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

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

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

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

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

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

1. Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).
2. Разместить на странице теги, определяющие страницу в целом.
3. Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.
4. Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.
5. Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.
6. Просмотрите страницу в браузере.
7. Установите фоновый цвет страницы (голубой, bgcolor="ccccff").
8. Поместите рисунок, выравнивая его по правому краю документа.
9. Поместите стихотворение, выравнивая его по левому краю страницы. Каждую строку оформите отдельным абзацем, строфы отделите пустой строкой.
10. Создайте панель навигации по сайту.
11. Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.

Часть 2 Создание страницы «Весна»

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

Часть 3 Создание страницы «Лето»

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

Часть 4 Создание страницы «Осень»

Запустить приложение Блокнот. Создать html-код страницы «Осень».

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

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

Запустить приложение Блокнот. Создать html-код титульной страницы.

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