ЛАБ11_HTML_1

Лабораторная работа №4 Построение таблиц

Цель работы научить студентов:

использованию основных тегов по созданию таблиц,

создавать таблицы в 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> в соответствии со следующим синтаксисом:

<CAPTION ALIGN="align" VALIGN="valign"> </CAPTION> Tег <CAPTION> имеет следующие атрибуты.

41

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 — целое число, определяющее количество столбцов, попадающих в данную ячейку, предназначенную для объединенного заголовка столбцов.

ROWSPAN — целое число, определяющее количество строк, попадающих в данную ячейку, предназначенную для их объединения.

Таким образом, инструмент для «растягивания» ячеек в таблице представляет собой два атрибута тегов <th> и <td>: colspan и rowspan. Один из них по-

42

зляет расширять диапазон охвата по горизонтали (по строке), другой — по вертикали (по столбцу). Рассмотрим пример:

<table border="1l">

<сарtion>Спецификации компьютеров</сарtion> <tr><th>&nbsр;</th><th>модель 100</1И><th>модель 200</th></tr> <tr><th>npoцeccop</th><td>G9-l.6</td><td>G9-l.7</td></tr> <tr><th>Винчестер</th><td>78 T6</td><td>90 T6</td></tr> <tr><th>Видеокарта</th><td colspan="2">Rageous 428p</td></tr> <tr><th>A/B Bыходl</th><td rowspan="2">Heт</td><td>EcTb</td> </tr> <th>Порт сменного дисковода</th><td>Опционально</td></tr>

</table>

Итак, colspan растягивает ячейку с надписью Rageous 428p на две колонки — назначение этого атрибута вполне понятно. Что касается rowspan, то он растягивает вторую колонку на две строки. Таким образом, хотя надпись, казалось бы, должна появиться во второй колонке (потому что она описана сразу после <th>), она появится в третьей. Важно не запутаться в этом, а для этого нужно как можно чаще проверять себя, просматривая страницу в браузере. А выглядит таблица в браузере так, как показано на рис.

Цвета ячеек и строк

Во время работы с таблицами может понадобиться изменить цвет фона некоторых строк или даже отдельных ячеек. Любой элемент может иметь атрибут bgcolor, который применяется как раз для таких целей. Значением атрибута bgcolor должно быть имя или номер цвета. Применение атрибута bgcolor пока-

зано па примере:

<table>

<trxth>Регион</ th><th=Июнь</th><th>Июль</th><th>Август</th></tr> <tr bgcolor="yellow"><th>Ceвep</th><td>600 000</td>

43

<td>400 000</td><td>800 000</td></tr> <tr><th>Юг</th><td>300 000</td><td>200 000</td><td>400 000</td></tr>

<tr bgcolor-"yellow"><th>Bocток</th><td>230 000</td><td>=490 OO0</td>

<td>980 000</td></tr>

<tr><th>3aпад</th><td>320 000</td><td>120 000</td> <td>490 000</td></tr>

</table>

Можно использовать не только имя цвета в качестве значения атрибута bgcolor, но и тройку двухразрядных шестнадцатиричных чисел в формате RGB (красный, зеленый, синий). Например, bgcolor="#ff00ff" задает задний фон фиолетового цвета.

Из рисунка видно, что различные цвета фона имеет смысл использовать для того, чтобы выделять строки, содержащие разные данные. Специалистам известно, что гораздо легче воспринимать таблицы, если их строки выделены цветом.

По умолчанию большинство браузеров создают таблицы без линий, ограничивающих их периметр и ячейки. При помощи атрибута border можно изменить эту ситуацию таким образом, чтобы у таблицы эти линии присутствовали. Кроме того, можно задавать их толщину в пикселах. Например:

<table border="8">.

Атрибут align применяется для выравнивания таблицы по центру либо для того, чтобы сделать ее «плавающей», то есть выравнять ее по левому или правому краю с обтеканием текстом.

Далее показан пример использования обоих атрибутов. Результат — на рис.

<table border=8 align=center width="50%">

44

<caption>Уровень продаж конфет разных типов среди студентов </сарtion> <tr><th>Tип</th><th>Melissa</th><th>Brian</th><th>Roger</th></tr> <tr><th> Шоколадные плитки</th><td>50</td><td>25</td><td>50</td></tr> <tr><th>Фруктовые тянучки</th><td>50</td><td>45</td><td>30</td> </tr> <tr><th> Лeденцы </th><td>15</td><td>25</td><td>40</td></tr>

</table>

Атрибуты cellpadding и cellspacing

Хотя с помощью border и можно задать ширину линий, ограничивающих ячейки таблицы, атрибуты cellpadding и cellspacing дают возможность управлять пространством, отводимым под другие элементы. Конкретно cellspacing определяет расстояние между ячейками в пикселах. Как видно из рис. , это увеличивает также размер самих границ ячеек, даже если атрибут border имеет ма-

лое значение. Например:

<table border ="1" ce11spacing="10">

Тем не менее, сellspacing работает не менее эффективно и при отсутствии

атрибута border:

<table cellspacing="10">

Что касается атрибута cellpadding, то он используется для определения количества пространства, которое должно быть отведено под расстояние между границей ячейки и ее содержимым. (Значения, как и прежде, задаются в пикселах). По умолчанию значением этого атрибута является 1. Можно поставить и нулевой cell padding, но это приведет к тому, что содержимое ячеек будет на-

ползать на границы. Приведенный далее пример показан на таблице рис.

<tаble border»"1" cellpadding="10">

45

Теперь рассмотрим задания.

Задания

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>) серебристый, серый цвета.

б) изменить толщину рамок (бордюра), текст в клетках и т.д.

46

2) Набрать сл. пример, посмотреть результат и далее выполнить некоторые изменения:

<TABLE ALIGN="RIGHT" BORDER="3" BORDERCOLOR="Blue" WIDTH="80%">

<CAPTION ALIGN="RIGHT" > Заголовок появится справа и сверху от

таблицы </CAPTION>

<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>

а) Добавить ещё один столбец к обеим строкам; б) Добавить ещё две строки;

в) Изменить слова текстов в клетках, цвет фона строк и отдельных клеток; г) Изменить цвет заголовка и т.д.

д) Провести перед таблицей, после заголовка таблицы и в конце таблицы горизонтальные линии разного цвета.

Контрольные вопросы

1.Почему для разработки Web-страниц используется специальный язык разметки гипертекста? Мы знаем, что с помощью текстового процессора Word вполне можно получать представительные документы. Почему нельзя использовать этот удобный и мощный текстовый процессор для разработки Web-документов?

2.Как вы понимаете, что такое тег HTML?

3.С помощью каких известных вам программ можно создавать Webдокументы в коде HTML?

4.С помощью каких известных вам программ можно просматривать Webдокументы?

5.В языке HTML нет тега, с помощью которого можно было бы создать абзац текста фиксированной ширины, например 800 пикселов. Почему нет таких тегов?

6.Несмотря на отсутствие тегов для создания текста фиксированной ширины, управлять шириной текста все-таки можно. С помощью какого средства можно создать текст, расположенный в трех (например) колонках заданной ширины?

7.Что такое альтернативный текст? Зачем он нужен и когда используется?

47

8.Чем отличаются текстовые и графические гиперссылки?

9.Предположим, что на Web-странице опубликован очень длинный документ (повесть). Для удобства пользователя автор ввел в начало документа содержание, состоящее из 20 пунктов, соответствующих главам повести. Что он должен предусмотреть, чтобы читатель мог перейти к любой главе щелчком на соответствующем пункте в содержании?

10. Какие виды списков вы знаете? Какими средствами создают списки на Web-страницах? Что такое вложенные списки?

48

Лабораторная работа №5 Организация фреймов

Цель работы научить студентов:

использованию основных тегов по созданию фреймов,

создавать фреймы в HTML-документах,

организовать гиперссылки между фреймами.

Мы можем создать документ, который разобьет одно окно просмотра на несколько прямоугольных областей, в каждой из которых будет отображаться один HTML-документ. Эти прямоугольные области, каждая из которых, по сути, отдельное окно просмотра, и называются фреймами или кадрами. В каждом фрейме показывается свой HTML-документ. Фреймы могут функционировать независимо или влиять друг на друга, используя ссылки, указывающие на другие фреймы. Каждый фрейм может иметь следующие свойства:

имеет свой URL, что позволяет загружать его независимо от других фреймов;

имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрейма;

размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра).

Данные свойства фреймов позволяют создавать продвинутые интерфейсные решения, такие как:

помещение в статическом фрейме оглавления всех или части WEBдокументов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию;

создавать окна результатов запросов, когда в одном фрейме находится собственно запрос, а в другом результаты запроса.

5.1. Способы создания фреймов

Фрейм определяется как некое выделенное в окне броузера поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного HTML-документа. Таким образом, можно, например, создать два фрейма. В первый такой фрейм можно загрузить “домашнюю страницу" фирмы Netscape, а во второй – фирмы Microsoft.

Формат документа, использующего фреймы, внешне очень напоминает формат обычного документа, только вместо тега BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, содержащий собственно информацию, размещаемую во фреймах.

<HTML> <HEAD>...</HEAD>

<FRAMESET>...</FRAMESET> </HTML>

Представим общий синтаксис фреймов:

<FRAMESET COLS="value" | ROWS="value">

49

<FRAME SRC="url1"> <FRAME ...>

...

</FRAMESET>

5.2 Тег FRAMESET

Общий контейнер FRAMESET описывает все фреймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фреймов. Тег FRAME описывает каждый фрейм в отдельности. Рассмотрим более детально каждый компонент.

<FRAMESET [COLS="value" | ROWS="value"]>

Тег <FRAMESET> имеет завершающий тег </FRAMESET>. Все, что может находиться между этими двумя тегами, это тег <FRAME>, вложенные теги <FRAMESET> и </FRAMESET>, а также контейнер из тегов <NOFRAME> и </NOFRAME>, который позволяет строить двойные документы для броузеров, поддерживающих фреймы и не поддерживающих фреймы.

Тег <FRAMESET> имеет два атрибута: ROWS и COLS.

ROWS="список-определений-горизонтальных-подокон"

Данный атрибут содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрейм, величиной во все окно броузера.

Синтаксис используемых видов описания величин подокон: value

Простое числовое значение определяет фиксированную высоту подокна в пикселах. Это далеко не самый лучший способ описания высоты подокна, поскольку различные броузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна броузера вашего пользователя.

value %

Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фреймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально увеличиваются.

value *

50