2. Просмотрите изменения вашей Web-страницы в браузере.
Задание № 12. Установка фонового изображения на Web-странице
Фоновое изображение –это графический файл с небольшим рисунком,который многократноповторяется, заполняя все окно браузера независимо от его размеров. Графика, используемая в качестве фоновой, задается в теге <BODY>.
1. Внесите изменения в файл RASP.HTML, предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка (FON.PNG).
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE> </HEAD>
<BODY BACKGROUND="FON.PNG" TEXT="#330066"> <P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>
<IMG SRC="CLOCK.PNG" ALIGN="MIDDLE"> </P>
</BODY>
</HTML>
На экране вы увидите то, что изображено на рисунке 6.
Рис. 6
Рисунок, который использовался в качестве фонового, имеет вид
Рис. 7
2. Поэкспериментируйте с фоновым рисунком Web-страницы и выберите оптимальный с вашей точки зрения.
Задание № 13. Создание таблицы
Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
· названия таблицы,
· заголовков столбцов,
· ячеек таблицы.
Таблица в Web-документе заполняется по строкам (слева направо по строке,затем переход нановую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).
1. Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.
<HTML>
<HEAD>
<TITLE>Расписание занятий
</TITLE> </HEAD>
<BODY BGCOLOR="FFFFFF">
<P ALIGN="CENTER">
<FONT COLOR="RED" SIZE="6" FACE="ARIAL"> <B>2 Курс ФНО</B></FONT><BR></P>
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"> <B>Понедельник</B></FONT><BR>
<TABLE BORDER="1" WIDTH=100% BGCOLOR="#99CCCC">
<TR BGCOLOR="#CCCCFF" ALIGN="CENTER">
<TD>Занятие</TD> <TD>Группа </TD> <TD>Группа</TD>
<TD>группа</TD>
</TR>
<TD>1</TD> <TD>Русский язык</TD>
<TD>Литература</TD> <TD>История</TD> </TR>
<TD>2</TD> <TD>Математика</TD>
<TD>Информатика</TD> <TD>Английский язык</TD> </TR>
<TD>3</TD> <TD>История</TD>
<TD>Математика</TD> <TD>Информатика</TD> </TR>
</TABLE>
</BODY>
</HTML>
2. Сохраните файл в личной рабочей папке под именем Infor.HTML
3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.
На экране вы увидите то, что показано на рисунке 8.
Задание № 14. Построение гипертекстовых связей
Важнейшим средством языка HTML является возможность включения в документ ссылок на
другие документы.
Возможны ссылки:
· на удаленный HTML-файл,
· на некоторую точку в текущем HTML-документе,
· на любой файл, не являющийся HTML-документом.
В качестве ссылки можно использовать любой текст или графику.
Ссылки в пределах одного документа
Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>.
Описание ссылки
<A HREF="#ПН">Понедельник</A>
Перед именем метки (ПН), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке.
Определим метку
<A NAME="ПН">Понедельник</A>
1. Дополните файл Infor.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы.
...
<TABLE WIDTH=100%>
<TR>
<TD>Понедельник</TD>
<TD>Вторник</TD>
<TD>Среда</TD>
<TD>Четверг</TD>
<TD>Пятница</TD>
<TD>Суббота</TD>
</TR>
</TABLE>
<BR>
...
2. Вставьте в файл Infor.HTML метку, указывающую на понедельник.
...
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B>
<A NAME="ПН">Понедельник</A></B></FONT><BR>
...
3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:
...
<TABLE WIDTH=100%>
<TR>
<TD><A HREF="#ПН">Понедельник</A></TD>
<TD>Вторник</TD>
<TD>Среда</TD>
...
4. Создайте таблицы расписаний для других дней недели.
5. Сохраните файл Infor.HTML в личной рабочей папке.
6. Просмотрите полученную Web-страницу.
Задание № 15. Создание ссылки на другой HTML-документ
Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.
Опишем ссылку:
<A HREF="Infor.HTML">2 Курс ФНО</A>
После имени файла (Infor.HTML) между символами «>» и «<» располагается текст («2 Курс ФНО »), на котором должен быть произведен щелчок для перехода к этому файлу.
1. Внесите изменения в файл RASP.HTML
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066"> <P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>
<IMG SRC="CLOCK.PNG" ALIGN="TOP">
</P>
<CENTER>
<TABLE WIDTH=60%>
<TR><TD><A HREF="Infor.HTML">2 курс ФНО</A></TD> <TD>3 курс ФНО</TD> </TR> <TR><TD>4 курс ФНО</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
2. Сохраните файл RASP.HTML
 |
Рис. 10
Задание № 16. Создание ссылки на другой HTML-документ
1. Внесите изменения в файл 5.HTML так, чтобы в конце страницы была ссылка на головную страницу Расписание занятий 5 классов (RASP.HTML). В качестве ссылки используйте графический файл (HOME.GIF) следующим образом:
...
</TABLE><BR>
<CENTER>
<A HREF="RASP.HTML"><IMG SRC="HOME.PNG" BORDER="0"></A> </CENTER>
...
В качестве ссылки выступает рисунок – стрелка
Рис. 11
Задание № 17. Самостоятельное итоговое задание
Разработайте Web-страницы, рассказывающие о группе. На головной странице разместите рассказ о группе, Кураторе. Рассказы о студентах разместите на отдельных Web-страницах. Укажите ссылки на страницы студентов с головной Web-страницы. Не забудьте разместить ссылки возврата на головную страницу.