Поэкспериментируйте с фоновым рисунком Web-страницы и выберите оптимальный с вашей точки зрения.
Страница 10 из 16
Задание № 13. Создание таблицы
Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
названия таблицы,
заголовков столбцов,
ячеек таблицы.
Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).
Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.
<HTML>
<HEAD>
<TITLE>Расписание занятий 5 классов</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<P ALIGN="CENTER">
<FONT COLOR="RED" SIZE="6" FACE="ARIAL"> <B>5 класс</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>5 "А"</TD> <TD>5 "Б"</TD> <TD>5 "В"</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>
Сохраните файл в личной рабочей папке под именем 5.HTML
Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.
На экране вы увидите то, что показано на рисунке 8.
Страница 11 из 16
Рис. 8
Задание № 14. Построение гипертекстовых связей
Важнейшим средством языка HTML является возможность включения в документ ссылок на другие документы.
Возможны ссылки:
на удаленный HTML-файл,
на некоторую точку в текущем HTML-документе,
на любой файл, не являющийся HTML-документом.
качестве ссылки можно использовать любой текст или графику.
Ссылки в пределах одного документа
Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>.
Описание ссылки
<A HREF="#ПН">Понедельник</A>
Перед именем метки (ПН), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке.
Определим метку
<A NAME="ПН">Понедельник</A>
Дополните файл 5.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы.
Страница 12 из 16
...
<TABLE WIDTH=100%> <TR>
<TD>Понедельник</TD>
<TD>Вторник</TD> <TD>Среда</TD> <TD>Четверг</TD> <TD>Пятница</TD>
<TD>Суббота</TD> </TR>
</TABLE>
<BR>
...
2. Вставьте в файл 5.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>
...
Создайте таблицы расписаний для других дней недели.
Сохраните файл 5.HTML в личной рабочей папке.
Просмотрите полученную Web-страницу.
На экране вы увидите то, что изображено на рисунке 9.
Страница 13 из 16
Рис. 9
Задание № 15. Создание ссылки на другой HTML-документ
Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.
Опишем ссылку:
<A HREF="5.HTML">5 класс</A>
После имени файла (5.HTML) между символами «>» и «<» располагается текст («5 класс»), на котором должен быть произведен щелчок для перехода к этому файлу.