Задание: создать сайт, посвященный Петру I

Структура сайта

Петр Великий

Великий царь Петр Алексеевич Романов

(родился в 1672 - правил с 1689г.), первый российский

император (с 1721), младший сын Алексея Михайловича.

Провел реформы государственного управления (созданы

Сенат, коллегии, органы высшего государственного

контроля и политического сыска; церковь подчинена

государству; проведено деление страны на губернии,

построена новая столица - Санкт-Петербург). Петр

использовал опыт западноевропейских стран в развитии

промышленности, торговли, культуры. Проводил

политику меркантилизма (создание мануфактур,

металлургических, горных и других заводов, верфей,

пристаней, каналов).

Петр Возглавлял армию в Азовских походах 1695-

1696, Северной войне 1700-21, Персидском походе 1722-

23, при взятии Нотебурга (1702), в сражениях при д.

Лесная (1708) и под Полтавой (1709). Руководил

постройкой флота и созданием регулярной армии.

Способствовал упрочению экономического и

политического положения дворянства.

По инициативе Петра I открыты многие учебные

заведения, Академия наук, принята гражданская азбука и

т. д. Реформы Петра I проводились жестокими средствами,

путем крайнего напряжения материальных и людских сил,

угнетения народных масс (подушная подать и др.), что

влекло за собой восстания (Стрелецкое 1698,

Астраханское 1705-06, Булавинское 1707-09 и др.),

беспощадно подавлявшиеся правительством. Будучи

создателем могущественного абсолютистского

государства, добился признания за Россией странами Зап.

Европы авторитета великой державы.

ПОЛТАВСКАЯ БИТВА

Полтавской битвой называется сражение 27 июня (8 июля) 1709 года,

во время Северной войны 1700-1721 годов, в котором русская армия

под командованием Петра I разгромила шведскую армию короля Карла

XII.

Полтавское сражение привело к перелому в Северной войне в пользу

России. 30 апреля 1709 года шведские войска, вторгшиеся на

территорию Украины, начали осаду Полтавы. Ее гарнизон в составе 4,2

тысяч солдат и 2,6 тысяч вооруженных горожан под руководством

полковника А. С. Келина успешно отбил ряд штурмов. В конце мая к

Полтаве подошли главные силы русской армии во главе с Петром. Они

расположились на противоположном от Полтавы левом берегу реки

Ворсклы. После того как 16 июня на военном совете Петр решился на

генеральное сражение, в этот же день передовой отряд русских

форсировал Ворсклу севернее Полтавы, у деревни Петровка, обеспечив

возможность переправы всей армии

Страница находится в стадии разработки

На главную

Порядок выполнения работы:

1. Выяснить у преподавателя, с какой папкой на компьютере Вы будете работать.

2. Убедиться, что в этой папке находятся исходные файлы, необходимые для создания сайта: 1.txt, 2.txt,

poltava.jpg и petr1.jpg.

3. Открыть в Блокноте текстовый файл 1.txt, содержание которого должно стать стартовой страницей сайта.

4. В начале текста (Ctrl+Home) разместить обязательный тег Web - страницы<html>, а в конце текста

(Ctrl+End) закрывающий тег </html>

5. Создать заголовочную часть страницы, вставив после открывающего тега <html>, следующие теги:

<head>

</head>

Таким образом, текст в Блокноте примет следующий вид:

<html>

<head>

</head>

Великий царь Петр Алексеевич Романов (родился в 1682 - правил с 1689г.), первый …

…

….

добился признания за Россией странами Западной Европы авторитета великой державы.

</html>

6. Сохранить файл под именем indeх.htm в своей папке (меню Файл ->Сохранить как).

7. Посмотреть, как выглядит страница с заголовком ПЕТР I в броузере

7.1. Открыть папку, где сохранен файл index.htm

7.2. Двойным щелчком мыши по значку вызвать просмотр файла в Internet Explorer.

8. Продолжить редактирование файла index.htm, не закрывая Internet Explorer: через панель задач

переключиться на программу-блокнот, в которой открыт файл index.htm.

9. Изменить фон страницы и цвет шрифта.

9.1. Вставить после заголовочной части html-кода (т.е. после тега </head>) тег <body> с атрибутами bgcolor,

который определяет фон страницы и color, который определяет цвет текста:

9.2. Перед закрывающим тегом </html> поставить закрывающий тег </body>.

9.3. Сохранить редактируемый файл и, переключившись через панель задач на Internet Explorer, нажать в

броузере на кнопку «Обновить».

9.4. Если цвет текста и фона не принесли удовлетворения, попросить у преподавателя таблицу с именами и

числовыми значениями цвета и в блокноте изменить значения атрибутов bgcolor и text (см. п.9.1.). Для

того чтобы увидеть изменения, не забывайте о п.9.3.

10. Вставить перед текстом стандартный заголовок:

10.1. После открывающего тега <body> ввести теги стандартного заголовка:

<h2>Петр Великий</h2>

10.2. Для того чтобы заголовок был выровнен по центру, в открывающий тег<h2> добавить атрибут

выравнивания по центру: <h2 align="center">

10.3. Посмотреть, как заголовок будет выглядеть в броузере (см.п.9.3.) и, если он покажется мелковатым,

теги <h2>…</h2> заменить на <h1>….</h1>.

11. Выровнять текст страницы по ширине: после тегов стандартного заголовка вставить тег абзаца с атрибутом

выравнивания по ширине и закрыть его перед тегом </body>:

<h2>Петр Великий</h2>

Великий царь Петр Алексеевич Романов …

…….

добился признания за Россией странами Западной Европы авторитета великой державы.

</p>

</body>

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

символы пробелов (огромное количество пробелов, введенных с клавиатуры броузер интерпретирует как один).

12.1. Перед текстом Петр возглавлял армию в Азовских походах вставить одиночный тег <br> и

несколько символов пробелов &nbsp:

<br>      Петр возглавлял армию в Азовских походах…..

12.2. Если «красная строка» после просмотра в броузере (п.9.3.) покажется не достаточной, увеличить

количество символов пробела.

12.3. Вставить <br>  …   перед текстом По инициативе Петра I

12.4. Вставить   …   перед Великий царь Петр Алексеевич Романов…(в начале текста переход на

новую строку не обязателен)

13. Редактируемая страница при просмотре в броузере имеет недостаток: слишком широкий текст, который

неудобно читать. Чтобы «сузить» текст можно использовать для разметки страницу таблицу с невидимыми

границами (атрибут bolder).

13.1. После тега <body …>вставить теги таблицы<table>, состоящей из одной строки <tr>и трех ячеек <td>

в этой строке:

<tr>

<h2>Петр Великий</h2>

  …   Великий царь Петр Алексеевич Романов …

…

<br>  …   По инициативе Петра I…..

</p>

</td>

</tr>

</table>

</body>

13.2. Теги <td width="10%"></td> означают, что в броузере будет отображаться пустая ячейка таблицы,

занимающая 10% ширины экрана. Изменяя значения процентов, можно регулировать ширину текста.

14. Открыть в новом Блокноте еще один текстовый файл 2.txt, который содержит дополнительную информацию

о деятельности Петра I (на панели задач остаётся Блокнот с файлом index.htm и Internet Explorer).

15. По аналогии с первой страницей вставить в файл 2.txt теги <html>и теги, определяющие заголовочную часть

страницы (см п.4-5).

<html>

<head>

<title>Полтавская битва</title>

</head>

Полтавской битвой называется сражение 27 июня (8 июля) 1709 года, …

….

….в Северной войне произошел перелом в пользу России.

</html>

16. Ввести стандартный заголовок <h1> или <h2>, который будет содержать текст ПОЛТАВСКАЯ БИТВА (п. 10).

17. Сохранить страницу под именем poltava.htm и посмотреть, как она отображается в броузере (п.6-7).

18. В качестве повторения задайте фон страницы, цвет шрифта, измените выравнивание текста.

19. Разделить текст на два настоящих абзаца: перед словами Полтавское сражение вставить закрывающий тег

</p> для первого абзаца и открывающий <p align="justify"> для второго:

…короля Карла XII

</p>

Полтавское сражение привело к перелому в Северной войне в пользу России…

….

….перелом в пользу России.

20. Просмотрев страницу «Полтавская битва» в броузере убедиться, что отдельные абзацы разделяются пустой

строкой. При желании можно продолжить разбиение текста на абзацы.

21. Самостоятельно создать в Блокноте Web-страницу:

21.1. Заголовок страницы «Этапы Полтавской битвы»

21.2. Текст «Страница находится в стадии разработки»

21.3. Сохранить новую страницу в файле etapi.htm

22. После того, как три страницы сайта готовы нужно создать

гиперссылки, обеспечивающие связь между ними:

22.1. Переключится на Блокнот с файлом index.htm и найти

в тексте слова под Полтавой. Эти слова должны стать гиперссылкой, обеспечивающей переход с файла

index.htm на файл poltava.htm.

22.2. Вставить теги гиперссылки: <a href="poltava.htm">под Полтавой </a>. Здесь использована

относительная адресация, т.к. все файлы находятся в одной папке.

22.3. Сохранив файл index.htm, в броузере можно порадовать себя функционированием первой

гиперссылки.

23. Чтобы, изучив подробности Полтавской битвы, снова вернуться на стартовую страницу сайта, в файле

poltava.htm нужно создать ссылку на файл index.htm:

23.1. Переключится на Блокнот с файлом poltava.htm и в конце текста вставить гиперссылку в отдельном

абзаце:

….перелом в пользу России.

</p>

<p>

<a href="index.htm">Назад</a>

</p>

</body>

24. Переключиться на Блокнот с файлом etapi.htm и организовать ссылку из файла etapi.htm на файл index.htm:

Страница находится в стадии разработки

<p>

<a href="index.htm">На главную </a>

</p>

</html>

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

необходимости использования иллюстраций к тексту.

<html>

<head>

<title> Этапы Полтавской битвы </title>

</head>

Страница находится в стадии разработки

</html>

26. В файле poltava.htm перед заголовком ПОЛТАВСКАЯ БИТВА вставить в отдельном абзаце заранее

подготовленную в Adobe Photoshop изображение, опять используя относительную адресацию:

<body….>

<h1>ПОЛТАВСКАЯ БИТВА</h1>

27. Аналогичные действия выполнить в файле index.htm, только вставить рисунок нужно в тот же абзац, что и

текст:

<img src="petr1.jpg">   Великий царь Петр Алексеевич…

28. Дополнить тег <img src="petr1.jpg"> атрибутами (после дополнения тега очередным атрибутом файл

index.htm сохранять и просматривать в броузере). Атрибуты отделять друг от друга пробелами.

28.1. Выровнять изображение относительно нижнего края строки (атрибут align="bottom"):

28.2. Добавить к изображению альтернативный текст (атрибут alt="Петр I в конце XVII века").

28.3. Пропорционально уменьшить ширину width и высоту height изображения:

29. Организовать ссылку на файл etapi.htm с использованием рисунка poltava.jpg: в файле poltava.htm добавить

теги гиперссылки:

30. Сохранить файл poltava.htm и проверить функционирование ссылки в броузере.

31. Если остались силы, попробуем создать список военных действий Петра I.

31.1. Переключиться на Блокнот с файлом index.htm.

31.2. Найти текст Петр возглавлял армию…

31.3. Вставить теги маркированного списка:

<ul>

<li>в Азовских походах 1695-1696,</li>

<li>Северной войне 1700-21, </li>

<li> Персидском походе 1722-23 </li>

…..

<li><a href="poltava.htm">под Полтавой </a>(1709).</li>

</ul>

32. Добавить в конце файла index.htm фрагмент текста (отдельный абзац), цвет и размер которого будет

отличаться от основного текста.

32.1. Перед закрывающим тегом второй ячейки таблицы ввести следующий фрагмент htm-кода:

</p>

<p align="right"><font size=2 color="pink">Дизайн имя, фамилия</font></p>

</td>

32.2. При желании изменить размер шрифта любого фрагмента текста.

33. Посмотреть на свою работу в браузере.

Скачать материал

Задание: создать сайт, посвященный Петру I

Информатика - еще материалы к урокам:

Предметы

Похожие материалы