3. Разработка структуры Web-страницы
Задание 3. Создать web-страницу с Вашей личной информацией (ФИО, где учитесь и т.д.), а также информацией о сайтах, где размещены документы, регламентирующие деятельность сотрудника органов внутренних дел.
Порядок выполнения 3.
3.1. Скопируйте из указанной преподавателем папки в свою папку три файла: vimvd.jpg, fon.jpg и index.html.
3.2. Теперь, используя программу «Проводник», откройте файл index.html. Загрузиться первоначальная структура Вашей web-страницы. Чтобы изменить что-либо в исходном коде страницы, необходимо выбрать команду Вид ► Просмотр HTML-кода. Откроется программа «Блокнот» с исходным HTML-кодом. Добавьте в заголовок окна Вашей web-страницы свою фамилию:
<TITLE> Справочник сотрудника ОВД Фамилия </TITLE>
и сохраните документ (Файл
► Сохранить).
Перейдите к окну своей web-страницы,
щёлкнув мышкой на панели задач по её
имени. Чтобы увидеть как изменилась
Ваша web-страница
нажмите кнопку
Обновить
(F5).
3
.3.
Используя теги из приложения
А,
приведём страницу к следующему виду
(см. рис. 1):
Рис. 1. Внешний вид web-страницы Сергеева С.А.
Для этого исходный HTML-код в редакторе «Блокнот» следует дополнить так (текст комментариев не вводить!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML> <! -- начало HTML-документа -->
<HEAD>
<TITLE> Справочник сотрудника ОВД Сергеева С.А. </TITLE>
</HEAD>
<!-- установка параметров web-страницы: в качестве фонового рисунка fon.jpg; цвет текста чёрный; цвет гиперссылки до просмотра синий, после просмотра – розовый; ширина верхнего и нижнего полей документа 30 пк, левого и правого 40 пк -->
<BODY BACKGROUND="fon.jpg" BGCOLOR="silver" TEXT="black"
LINK="blue" VLINK="fuchsia" TOPMARGIN="30" LEFTMARGIN="40">
<! -- вставка рисунка vimvd.jpg слева страницы; Воронежский институт ФСИН России - текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или переключен в текстовый режим; отступ рисунка по горизонтали от других объектов – 10 пк -->
<IMG src="vimvd.jpg" ALT="Воронежский институт ФСИН России "
HSPACE="10" ALIGN="left">
<! -- вставка заголовков с различным размером текста -->
<H2 ALIGN="center">Воронежский институт ФСИН России</H2>
<H3 ALIGN="center">Юридический факультет</H3>
<! -- вставка в текст горизонтальной разделительной линии, длина линии 100% от ширины окна браузера, способ закраски линии – сплошной -->
<HR NOSHADE WIDTH="100%">
<BR> <! -- формирование новой строки (пропуск строки) -->
<! -- установка параметров шрифта заголовка размером H4: гарнитура Times New Roman, цвет – синий, начертание – наклонный, выравнивание по центру -->
<FONT FACE="Times New Roman" COLOR="Blue">
<I>
<H4 ALIGN="center"> Личная страничка курсанта 15 уч. группы Сергеева С.А. </H4>
</I>
</FONT>
<BR> <! -- формирование новой строки -->
<! -- вставка таблицы 4x2, выравнивание таблицы – по центру; ширина первого столбца 70% от размера окна браузера, второго 40%; выравнивание текста в первом и втором столбцах по левому краю -->
<TABLE BORDER ALIGN="center">
<TR> <! -- открытие тэга строки таблицы -->
<TH WIDTH="70%">Название сайта</TH> <! -- тэги ячейки таблицы -->
<TH WIDTH="20%">Url-адрес</TH> <! -- тэги ячейки таблицы -->
</TR> <! -- закрытие тэга строки таблицы -->
<TR>
<TD ALIGN="left"> Конституция РФ </TD>
<! -- создание гиперссылки, информация по ссылке загружается в новом окне браузера -->
<TD><A HREF=" http://constitution.garant.ru/index.htm " TARGET="_blank"> http://constitution.garant.ru/index.htm </A></TD>
</TR>
<TR>
<TD ALIGN="left">Закон РФ «О милиции»</TD>
<TD><A HREF=" http://www.consultant.ru/popular/militia/ " TARGET="_blank"> http://www.consultant.ru/popular/militia </A></TD>
</TR>
<TR>
<TD ALIGN="left">Положение о службе в ОВД РФ</TD>
<TD><A HREF=" http://pogar.narod.ru/docum/polog.html " TARGET="_blank"> http://pogar.narod.ru/docum/polog.html </A></TD>
</TR>
</TABLE> <! -- закрытие тэга таблицы -->
</BODY> <! -- закрытие тэга «тело документа» -->
</HTML> <! -- конец HTML-документа -->
1.5. Сохраните итоговый файл в Блокноте (Файл ► Сохранить) и, перейдя к окну своей web-страницы, обновите её (F5).
1.6. Покажите результаты работы преподавателю.
1.7. Завершите сеанс работы с Windows. Для этого щёлкните по кнопке <Пуск>, выберите пункт «Завершение сеанса …». В появившемся диалоговом окне щёлкните по кнопке <Выход>.
Сделайте выводы по работе и оформите отчёт.
Письменный отчёт должен содержать:
наименование и цели занятия, учебные вопросы;
краткие теоретические сведения по отрабатываемым учебным вопросам;
HTML-код, созданной Вами web-страницы;
выводы о проделанной работе.