HTML поддерживает несколько видов списков
4.8. Построение таблиц
Цель работы научить студентов:
• использованию основных тегов по созданию таблиц,
• создавать таблицы в HTML-документах,
Таблица определяется тегами <TABLE> и </TABLE>, строки – <TR> и </TR>, а отдельные столбцы в строке – <TD> и </TD> или <ТН> и </ТН>. Теги заголовков таблицы, находящихся в объединенных столбцах <ТН> и </ТН> выполняют те же функции, что и теги ячеек <TD></TD>, но <ТН></ТН> предписывают броузеру назначить заключенному между ними тексту полужирное начертание.
Теги заглавия <CAPTION> </CAPTION> задают заголовок таблицы. Определение таблицы имеет следующий синтаксис:
<TABLE ALIGN="align" BGCOLOR="#rrggbb" BORDER="integer"
BORDERCOLOR="#rrggbb" CELLPADDING="integer"
CELLSPACING="integer" WIDTH="integer">
</TABLE>
ALIGN определяет выравнивание таблицы (по умолчанию – по левому краю). ALIGN может принимать одно из следующих значений: LEFT, CENTER, RIGHT.
BGCOLOR задает цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий цвета).
BORDER – целое число, задающее толщину рамки таблицы в пикселях. Если BORDER не определен, рамка не отображается.
BORDERCOLOR определяет цвет рамки (в шестнадцатеричном формате RGB или как одно из предопределенных названий); должен использоваться совместно с атрибутом BORDER.
CELLPADDING – целое число, задающее горизонтальное и вертикальное расстояние между данными в ячейке и рамкой ячейки. Задается в пикселях.
CELLSPACING – целое число, которое определяет горизонтальное и вертикальное расстояние между ячейками. Задается в пикселях.
WIDTH - целое число, определяющее ширину таблицы. Его значение может быть задано в пикселях или в процентах (%).
Заголовок определяется тегом <CAPTION> в соответствии со следующим синтаксисом:
147
<CAPTION ALIGN="align" VALIGN="valign"> </CAPTION>
Tэг <CAPTION> имеет следующие атрибуты.
ALIGN определяет выравнивание заголовка и принимает одно из следующих значений:
LEFT, CENTER (по умолчанию) или RIGHT.
VALIGN определяет вертикальное выравнивание заголовка и может принимать одно из следующих значений: ТОР, MIDDLE, BOTTOM (по умолчанию), BASELINE.
Строка таблицы определяется тегом <TR></TR>, который имеет свои атрибуты:
<TR ALIGN="align" BGCOLOR="#rrggbb"
BORDERCOLOR="#rrggbb"> Строка… </TR>
Атрибуты тега <TR>
ALIGN – выравнивание строки. Возможны следующие значения: LEFT (пo умолчанию), CENTER, RIGHT.
BGCOLOR определяет цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий).
BORDERCOLOR – цвет рамки строки (в шестнадцатеричном формате RGB или как одно из предопределенных названий). Этот атрибут будет использоваться только в том случае, если для атрибута BORDER тега <TABLE> определено значение, отличное от нуля.
Ячейки (столбцы) таблицы определяются тегами <TD></TD> и <ТН></ТН> в соот- ветствии со следующим синтаксисом:
<TD или ТН ALIGN="align" BACKGROUND="url"] BGCOLOR="#rrggbb"
BORDERCOLOR="#rrggbb"] > Столбец… </TD или /TН>
Теги <TD> и <ТН> имеют следующие атрибуты:
ALIGN – горизонтальное выравнивание текста. ALIGN может принимать одно из следующих значений: LEFT, CENTER (по умолчанию), RIGHT.
BGCOLOR – цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий).
BORDERCOLOR – цвет рамки ячейки (в шестнадцатеричном формате RGB или как одно из предопределенных названий цвета). Этот атрибут будет использоваться только в том случае, если для атрибута BORDER тега <TABLE> определено значение, отличное от нуля.
COLSPAN – целое число, определяющее количество столбцов, попадающих в данную ячейку, предназначенную для заголовка столбцов.
Теперь рассмотрим задания.
Задания
1.Набрать сл. пример, посмотреть результат и далее выполнить некоторые изменения:
<TABLE ALIGN=CENTER BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%"
BGCOLOR=YELLOW BORDERCOLOR=BLUE>
<CAPTION> <H2> Заголовок таблицы </H2> </CAPTION>
<TR> <TD> первая клетка таблицы </TD>
<TD> вторая клетка таблицы </TD> </TR>
<TR> <TD> первая клетка таблицы </TD>
<TD> вторая клетка таблицы </TD></TR>
</TABLE>
а) изменить цвет фона 1-строки (<TR BGCOLOR=SILVER>) серебристый, серый цвета.
б) изменить толщину рамок (бордюра), текст в клетках и т.д.
2) Набрать сл. пример, посмотреть результат и далее выполнить некоторые изменения:
<TABLE ALIGN="RIGHT" BORDER="3" BORDERCOLOR="Blue" WIDTH="80%">
<CAPTION ALIGN="RIGHT" > Заголовок появится справа и сверху от таблицы
</CAPTION>
148
<TR> <ТН COLSPAN="3"> Заголовок Столбца </TН> </TR>
<TR ALIGN="RIGHT" BGCOLOR="yellow">
<TH> Столбец 1 </ТН> <ТН> Столбец 2 </ТН> <ТН> Столбец 3 </TН>
</TR>
<TR> <TD> Данные для Столбца 1 </TD>
<TD> Данные для Столбца 2 </TD>
<TD> Данные для Столбца 3 </TD>
</TR>
</TABLE>
а) Добавить ещё один столбец к обеим строкам;
б) Добавить ещё две строки;
в) Изменить слова текстов в клетках, цвет фона строк и отдельных клеток;
г) Изменить цвет заголовка и т.д.
д) Провести перед таблицы, после заголовка таблицы и в конце горизонтальные линии разного цвета.
149 Контрольные вопросы
1. Почему для разработки Web-страниц используется специальный язык разметки гипертекста? Мы знаем, что с помощью текстового процессора Word вполне можно получать представительные документы. Почему нельзя использовать этот удобный и мощный текстовый процессор для разработки Web-документов?
2. Как вы понимаете, что такое тег HTML?
3. С помощью каких известных вам программ можно создавать Web-документы в коде HTML?
4. С помощью каких известных вам программ можно просматривать Web-документы?
5. В языке HTML нет тега, с помощью которого можно было бы создать абзац текста фиксированной ширины, например 800 пикселов. Почему нет таких тегов?
6. Несмотря на отсутствие тегов для создания текста фиксированной ширины, управлять шириной текста все-таки можно. С помощью какого средства можно создать текст, расположенный в трех (например) колонках заданной ширины?
7. Что такое альтернативный текст? Зачем он нужен и когда используется?
8. Чем отличаются текстовые и графические гиперссылки?
9. Предположим, что на Web-странице опубликован очень длинный документ (повесть).
Для удобства пользователя автор ввел в начало документа содержание, состоящее из 20 пунктов, соответствующих главам повести. Что он должен предусмотреть, чтобы читатель мог перейти к любой главе щелчком на соответствующем пункте в содержании?
10. Какие виды списков вы знаете? Какими средствами создают списки на Web- страницах? Что такое вложенные списки?
5.ДИСТАНЦИОННЫЕ ТЕХНОЛОГИИ
Основные характеристики современного мира – информатизация и глобализация.
Дистанционное обучение - универсальная форма обучения, базирующаяся на использовании широкого спектра традиционных, новых информационных и телекоммуникационных технологий, и технических средств, которые создают условия для обучаемого свободного выбора образовательных дисциплин, соответствующих стандартам, диалогового обмена с преподавателем, при этом процесс обучения не зависит от расположения обучаемого в пространстве и во времени.
Информационно-образовательная среда ДО представляет собой системно- организованную совокупность средств передачи данных, информационных ресурсов, протоколов взаимодействия, аппаратно-программного и организационно-методического обеспечения, и ориентируется на удовлетворение образовательных потребностей пользователей.