Задание 1: Создание простой web-страницы с текстом и изображениями

1. В своей папке создайте папку, в которой будете хранить все web-страницы, образующие ваш web-сайт.

2. Скопируйте в вашу папку целиком папку Picts.Так же скопируйте в вашу папку файл subd.doc – он пригодится для выполнения последнего задания.

3. Запустите HTML-редактор NVU.

4. Скопируйте в рабочую область следующий текст:

Иерархическая модель данных

Все элементы базы данных вместе со связями между собой образуют иерархическую (древовидную) структуру. Каждый элемент может быть связан с несколькими элементами более низкого уровня и только с одним элементом более высокого уровня.

5. Выделите первую строку. Обратите внимание, что над рабочей областью появилась линейка, показывающая, какую часть от окна будет занимать данная строка. Растяните эту область на всю ширину рабочей области.

6. На панели инструментов из раскрывающегося списка стилей текста выберите Заголовок 1.

7. Используя панель инструментов, выровняйте первую строку по центру.

8. Выделите остальной текст, установите для него стиль Абзац и выравнивание по ширине.

9. Сохраним текущую страницу – выполните Файл/Сохранить.

10. При первом сохранении страницы вам будет предложено задать её заголовок – этот заголовок будет отображаться в подписи окна, когда web-страница открыта в браузере. Задайте заголовок страницы – Иерархическая модель данных. Нажмите ОК и после этого сохраните страницу обычным образом под именем ierarhiya в вашу папку для сайта (обратите внимание, что файл будет сохранён с расширением html).

11. В рабочей области перейдите на строчку ниже.

12. Щёлкните на панели инструментов значок Изображение.

13. В открывшемся диалоговом окне укажите путь к вашей папке Изображения, файл ierarhiya.jpg.

14. В этом же диалоговом окне в разделе Альтернативный текст укажите Иерархическая модель данных – данный текст будет появляться на странице в случае, если просмотр изображений в браузере будет отключён. Нажмите ОК.

15. Сохраните сделанные изменения: Файл/Сохранить.

16. Просмотрите, как выглядит ваша страница в различных режимах просмотра.

17. Запустите Мой Компьютер и откройте созданную страницу в любом браузере, чтобы увидеть, как страница будет выглядеть после публикации в Интернет.

18. Создадим ещё одну аналогичную web-страницу: выполните Файл/Создать.

19. В открывшемся диалоговом окне укажите, что нужно создать пустой документ в новой вкладке. Нажмите ОК.

20. На новую вкладку добавьте следующий текст:

Сетевая модель данных

Сетевая модель похожа на иерархическую, но в данном случае каждый элемент базы данных может быть связан с несколькими элементами более высокого уровня.

21. Оформите этот текст так же, как и на предыдущей странице. Добавьте после текста изображение из файла Set.jpg.

22. Сохраните файл под именем Set.html, задав странице заголовок Сетевая модель данных.