Задание 14. Таблицы.
Информация. Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой. Ячейки могут содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей: название таблицы, заголовки столбцов, ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Тэги оформления таблиц
|
Тэг |
Форма записи |
Примечание |
|
TABLE |
<TABLE>текст</TABLE> |
Объявление таблиц. |
|
TR |
<TR>текст</TR> |
Тэг строки. |
|
TD |
<TD>текст</TD> |
Тэг данных. |
Атрибуты тэга <TABLE>
|
Атрибут |
Форма записи |
Примечание |
|
BORDER |
<TABLE BORDER=X> |
Задает рамку вокруг таблицы. |
|
WIDTH |
<TABLE WIDTH=XX%> |
Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселей. |
|
BGCOLOR |
<TABLE BGCOLOR= "#RRGGBB"> |
Задает цвет фона таблицы. |
Атрибуты тэгов <TD> и <TR>
|
Атрибут |
Форма записи |
Примечание |
|
ALIGN |
<TD ALIGN=X> |
Устанавливает выравнивание по горизонтали (Right, Left, Center) |
|
VALIGN |
<TD VALIGN=X> |
Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline) |
|
BGCOLOR |
<TD BGCOLOR= "#RRGGBB"> |
Задает цвет фона ячейки. |
1. Запустите стандартную программу Блокнот (Notepad).
2. Наберите в окне редактора:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</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>
<TR> <TD>1</TD> <TD>Русский язык</TD> <TD>Литература</TD> <TD>История</TD> </TR>
<TR> <TD>2</TD> <TD>Алгебра</TD> <TD>Информатика</TD> <TD>Англ.язык</TD> </TR>
<TR> <TD>3</TD> <TD>История</TD> <TD>Информатика</TD> <TD> Алгебра </TD> </TR>
</TABLE>
</BODY>
</HTML>
3. Сохраните файл под именем 5.HTM.
4. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer. Задание 15.
Дополните полученную Web-страницу по аналогии расписанием на последующие дни: ВТОРНИК, СРЕДУ, ЧЕТВЕРГ, ПЯТНИЦУ, СУББОТУ.
Задание 16. Ссылки в пределах одного документа.
Информация. Такие ссылки требуют наличие двух частей: метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Для изменения цвета ссылки используется атрибуты LINK= и VLINK= тэга <BODY …>
|
Ссылка: <A HREF="#ПН">Понедельник</A> |
Метка: <A NAME="ПН">Понедельник</A> |
-
Дополните файл 5.HTM таблицей, содержащей название дней недели, поместив ее в начало Web-страницы:
…
<TABLE WIDTH=100%>
<TR >
<TD>Понедельник</TD>
<TD>Вторник</TD>
<TD>Среда</TD>
<TD>Четверг</TD>
<TD>Пятница</TD>
<TD>Суббота</TD>
</TR>
</TABLE>
<BR>
…
-
Вставьте в файл 5.HTM метку, указывающую ПОНЕДЕЛЬНИК:
…
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B>
<A NAME="ПН">Понедельник </A></B></FONT><BR>
…
-
Вставьте ссылку для выбранной метки:
…
<TABLE WIDTH=100%>
<TR >
<TD> <A HREF="#ПН">Понедельник</A> </TD>
<TD>Вторник</TD>
<TD>Среда</TD>
…
-
Сохраните файл.
-
Просмотрите полученную Web-страницу.
На экране вы должны увидеть:
