Сборник лабораторных работ по дисциплине: Мировые Информационные Ресурсы - Html программирование. Создание Web-документа

Подождите немного. Документ загружается.

размеров ячеек, шрифта записей в ячейках таблицы, цвета элементов и

вида таблицы.

Таблица — весьма удобное средство представления данных,

обладающих четко выраженной внутренней структурой, — например,

финансовых отчетов или списков товаров. Язык HTML предлагает

несколько специальных дескрипторов для создания таблиц.

Группирование столбцов таблицы. Дескрипторы <COLGROUP> и

<Col> предоставляют возможность группирования столбцов таблицы.

Группы столбцов делят таблицу на множества вертикально

расположенных ячеек, признаки форматирова-ния которых могут

устанавливаться единовременно.

Дескриптор <COLGROUP> создает структурную группу столбцов,

которая выделяет множество логически однородных ячеек. Например,

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

а другая — ячейки, содержащие данные. Дескриптор <COL>

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

которые делят таблицу на разделы, не имеющие отношения к структуре.

Это средство полезно в тех случаях, когда не все столбцы содержат

информацию одного типа.

После создания групп столбцов естественно задаться целью их

форматирования. Например, атрибуты BGCOLOR дескрипторов

<COLGROUP> и <COL> позволяют определить цвет шрифта для текста

всех ячеек, принадлежащих группе. Более подробные сведения,

касающиеся вопроса задания цвета текста ячеек таблицы, приведены

ниже, в разделе "Изменение цвета элементов таблицы".

Хотя дескрипторы <COLGROUP> и <COL> служат частью стандарта

HTML, в данный момент они все еще не поддерживаются некоторыми

Web-броузерами.

1. Чтобы создать структурную группу столбцов, добавьте

<COLGROUP SPAN="? "> после дескриптора <TABLE>, заменяя

знак “?” количеством столбцов, которые подлежат включению в

группу.

Примечание: если таблица снабжена заголовком, определенным

с помощью дескриптора <CAPTION>, тэг задания группы

столбцов следует разместить после дескриптора заголовка.

2. Введите: </COLGROUP>. Примечание: дескриптор </COLGROUP>

необязателен.

3. Повторите действия, перечисленные в пп.1, 2 инструкции, для

каждой структурной группы столбцов, которую следует создать.

<Html>

<TITLE>Моя первая таблица в HTML</TITLE><!--тег названия

страницы-->

<head>

<I><B>ПРОБА - ШАБЛОН</B></I>

</head>

Align="RIGHT">

<font size="3" face="MS Sans Serif"> <strong>Таблица№1</strong>

</font>

<CAPTION><hl><font size="3" face="MS Sans

Serif"><strong>Основные элементы DFD

диаграмм</strong></font></CAPTION>

<TR>

<TH>Элемент</TH>

<TH>Описание</TH>

<TH>Обозначение</TH>

</TR>

<TR>

<TD>Внешняя сущность</TD>

<TD>Материальный объект или физическое лицо,

представляющее собой источник или приемник

информации</TD>

<TD>Имя внешнего объекта</TD>

</TR>

<TR>

<TD>Функция/процесс</TD>

<TD>Действие, выполняемое моделируемой

системой/процесс преобразования входных потоков

данных в выходные в соответствии с определенным

алгоритмом (обработки данных)</TD>

<TD>Имя функции/процесса</TD>

</TR>

<TR>

<TD>Поток данных</TD>

<TD>Объект, над которым выполняется действие, может

быть информационным (логическим) или управляющим.

(Управляющие потоки обозначаются пунктирной линией

со стрелкой) </TD>

<TD>Имя объекта</TD>

</TR>

<TR>

<TD>Хранилище данных</TD>

<TD>Абстрактное устройство для хранения информации,

которую можно в любой момент поместить в накопитель и

через некоторое время извлечь,

причем способы помещения и извлечения могут быть

любыми</TD>

<TD>Имя объекта</TD>

</TR>

</Table>

</body>

</html>

Так Web-броузер отображает таблицу с заданными группами столбцов.

Рис. 10.1. Пример таблицы с применением дескриптора <COLGROUP>.

Таблица поделена на структурные группы столбцов.

Таблица может содержать как структурные, так и не структурные группы

столбцов. Это позволяет, в частности, делить структурные группы

(<COLGROUP >) на разделы с помощью дескрипторов, определяющих

неструктурные группы (COL). Необязательно включать атрибут SPAN в

тело дескриптора <COLGROUP>, описывающего структурную группу,

поделенную на неструктурные, поскольку вложенные тэги <COL>

определяют количество столбцов в структурной группе.

Группирование строк таблицы. Дескрипторы <THEAD>, <TBODY> и

<TFOOT> позволяют группировать строки таблицы. Группы строк делят

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

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

Дескриптор <THEAD> предоставляет возможность создания группы

заголовков для столбцов таблицы. Это средство полезно в тех случаях,

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

форматирования, отличными от параметров остальной части

содержимого таблицы.

Дескриптор <THEAD> допускается использовать в пределах таблицы

только единожды.

Дескриптор <TBODY> применяется для создания одной или нескольких

групп строк таблицы, содержащих основные данные.

Тэг <TFOOT> позволяет создать группу строк для представления

информации о суммах или итогах, располагаемую в нижней части

таблицы. Дескриптор <TFOOT>, так же как и <THEAD>, разрешается

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

Cоздавать группы строк таблицы всех трех названных типов не

обязательно. Например, может оказаться достаточным построить

посредством дескриптора <TBODY> только одну группу строк,

Рис.10.2. Пример таблицы с применением дескрипторов <THEAD>,

<TBODY>, <TFOOT>.

содержащих основные данные.

Хотя дескрипторы <THEAD>, <TBODY> и <TFOOT> служат частью

стандарта HTML, в данный момент они все еще не поддерживаются

многими Web-броузерами.

1. Чтобы создать группу заголовков, введите <THEAD> перед

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

2. Наберите </THEAD> после завершающей строки, которая

должна войти в состав группы.

3. Чтобы сформировать группу строк с основными данными

таблицы, введите <TBODY> перед первой строкой, которую

следует включить в состав группы.

4. Наберите </TBODY> после завершающей строки, которая

должна войти в состав группы. Если необходимо построить

несколько групп строк с основными данными таблицы,

повторите действия, указанные в пунктах З и 4 приведенной

инструкции.

Код приведенной таблицы будет выглядеть следующим образом:

<html>

<TITLE>Моя первая таблица в HTML</TITLE><!--тег названия

страницы-->

<head>

<I><B>ПРОБА - ШАБЛОН</B></I>

</head>

<BODY>

<font size="3" face="MS Sans Serif"> <strong>Таблица№1</strong>

</font>

<Table border="4" bordercolor="green" BACKGROUND="C:\

WINDOWS\Сиреневый пух.bmp">

<!--в тег можно вставить графический фон всей таблицы,

например, взять графику по адресу www.nepthys.com/textures и

www.imagine.metanet.com-->

<CAPTION><hl><font size="3" face="MS Sans

Serif"><strong>Основные элементы DFD диаграмм</strong>

</font></CAPTION>

<THEAD>

<TH>Элемент</TH>

<TH>Описание</TH>

<TH>Обозначение</TH>

</TR>

</THEAD>

<TBODY>

<TD>Внешняя сущность</TD>

<TD>Материальный объект или физическое лицо,

представляющее собой источник или приемник информации</TD>

<TD>Имя внешнего объекта</TD>

</TR>

</TBODY>

<TBODY>

<TR>

<TD>Функция/процесс</TD>

<TD>Действие, выполняемое моделируемой системой/процесс

преобразования входных потоков данных в выходные

в соответствии с определенным алгоритмом (обработки данных)</

TD>

<TD>Имя функции/процесса</TD>

</TR>

</TBODY>

<TBODY>

<TR>

<TD>Поток данных</TD>

<TD>Объект, над которым выполняется действие, может быть

информационным (логическим) или управляющим.

(Управляющие потоки обозначаются пунктирной линией со

стрелкой) </TD>

<TD>Имя объекта</TD>

</TR>

</TBODY>

<TBODY>

<TR>

<TD>Хранилище данных</TD>

<TD>Абстрактное устройство для хранения информации, которую

можно в любой момент поместить в накопитель и

через некоторое время извлечь,

причем способы помещения и извлечения могут быть

любыми</TD>

<TD>Имя объекта</TD>

</TBODY>

<TD COLSPAN="3" ALIGN="CENTER">Примерный перечень

элементов для построения потоков данных</TD>

</TFOOT><!--Атрибут COLSPAN="3" ячейки TFOOT позволил

слить столбцы в строке, для того чтобы тоже самое

сделать по столбцу применяют атрибут ROWSPAN="3"-->

</TR>

</Table>

<BR>

</body>

</html>

Ход работы:

1. Ознакомьтесь с данной инструкцией, вызовите броузер

WEB щелчком «мыши» по иконке, откройте в нем «пустую»

страницу. Откройте ее в виде HTML.

2. Наберите в открывшемся блокноте пример показанный на

рисунке 10.1. теоретической части, сохраните изменения в меню

«файл → сохранить» и обновите страницу.

3. Затем в меню «файл →открыть» откройте файл созданный

в лабораторной работе № 9 (в созданном ранее шаблоне

лабораторной работы №9 «Калоев HTML. Лаб. 9»).

4. Внесите (скопируйте) в него выше приведенные изменения

(см. текст выше), в графическом редакторе Блокнот.

5. Документ, сохраните в меню «файл → сохранить» и вновь

обновите страницу.

6. Сохраните набранный текст под тем же расширением «.html» в

отдельной папке в корневом каталоге или в папке «Мои

документы» под названием включающем Вашу фамилию,

например: Калоев HTML.

7. Запустите полученный файл в броузере Internet Explorer и в

открывшемся окне Вы увидите набранную таблицу «Моя первая

таблица в HTML » .

8. Проанализируйте набранный код фрагмента программы,

поэкспериментируйте, изменяя написание приведенных

дескрипторов (тэгов) в редакторе Блокнот (не забудьте

сохранить изменения и обновить страницу).

9. Оформите лабораторную работу (преподавателю лабораторную

работу следует сдавать в электронном виде, допускается

распечатка страницы на принтере).

Задачи для самостоятельного решения.

Самостоятельно измените дескриптор <Bordercolor> этого примера.

Измените толщину рамки таблицы.

Измените в контейнере <TH> структуру записи таким образом, чтобы

оно выглядело курсивом.

Создайте собственную запись с разбивкой первой колонки на две, в

первой из которых проставьте нумерацию строк. Добавьте еще одну

строку с нумерацией колонок.

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

Какие тэги вы применили в выше приведенном фрагменте?

Как в HTML подбирать размер ячейки?

В HTML можно опустить некоторые закрывающие дескрипторы, можно

ли опустить закрывающий дескриптор </Table>?

В каком порядке располагаются атрибуты дескриптора <TD>?

ЛАБОРАТОРНАЯ РАБОТА № 11

HTML. СОЗДАНИЕ ТАБЛИЦ

Цель работы: изучение дескрипторов форматирования таблиц и

приобретение умения задания параметров обтекания таблицы текстом,

слияния ячеек таблицы, расположения и вида внутренних границ

таблицы.

Таблица — весьма удобное средство выравнивания текста и графики на

всей странице. Язык HTML предлагает для этого несколько специальных

дескрипторов.

Графический фон таблицы. Атрибут BACKGROUND позволяет

снабдить графическим фоном отдельную ячейку таблицы или всю ее

целиком (см. пример в лабораторной работе №10). Ячейка с

графическим фоном сразу привлекает к себе внимание - это удобный

способ выделения важной информации. Если расположить графическое

изображение на фоне целой таблицы, легко добиться любопытных

эффектов.

Убедитесь, что примененное в качестве фона графическое

изображение не ухудшает возможностей восприятия информации.

Следует также обратить внимание на то, чтобы изображение обладало

подходящим форматом. Если размеры изображения превышают

габариты ячейки или таблицы, для которых оно предназначено, Web-

броузер обрежет изображение таким образом, чтобы оно уместилось в

пределах соответствующего объекта. Намереваясь использовать

графическое изображение в качестве фона целой таблицы, имейте в

виду, что Web-броузеры могут интерпретировать подобную информацию

совершенно по-разному. Так, например, Microsoft Internet Explorer

попробует создать многочисленные копии изображения и расположить

их таким образом, чтобы заполнить пространство таблицы, а Netscape

Navigator предпримет попытку размножить изображение в каждой ячейке

таблицы. Хотя атрибут BACKGROUND поддерживается большинством

Web-броузеров, он не входит в стандарт HTML.

Щелкните в пределах текста дескриптора, определяющего ячейку

таблицы (<ТН> или <TD>) либо целую таблицу (<TABLE>), которые

следует снабдить графическим фоном.

Введите BACKGROUND="?" и замените “?” строкой, содержащей

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

Примечание: сведения о приемах задания имени и местоположения

файла были приведены в предыдущих лабораторных работах.

Web-броузер отображает таблицу с фоном, в качестве которого ис

пользуется заданное вами графическое изображение (см. рис. 10.2.).

Выравнивание данных в таблице. Атрибуты ALIGN и VALIGN

позволяют устанавливать признаки горизонтального и вертикального

выравнивания данных в таблице.

Атрибут ALIGN предназначен для задания параметра выравнивания по

горизонтали. По умолчанию Web-броузер содержимое ячеек заголовков

(описываемых дескрипторами <ТН>) выравнивает по центру, а ячеек

данных (<TD>) — влево. Атрибут VALIGN обеспечивает возможность

выравнивания данных по вертикали. По умолчанию данные

отображаются броузерами посередине ячейки. Web-броузер

предоставляет средства выравнивания данных в отдельной ячейке

(описываемой дескрипторами <TH> или <TD>), строке (<TR>), группе

столбцов (<COLGROUP> или <COL>) либо группе строк (<TBEAD>,

<TBODY> или <TFOOT>). Информация о группах столбцов и строк в

предыдущей лабораторной работе №10.

Если вы ограничите расстояние между содержимым ячейки и ее

кромками специальным атрибутом (CELLPADDING), он окажет влияние

на результат выравнивания. Например, при присваивании атрибуту

CELLPADDING значения, равного 4, и задании признака выравнивания

top (кверху) данные будут размещены на расстоянии 4 пикселей от

верхней границы ячейки. Более подробные сведения о признаках

выравнивания данных в ячейке приведены ниже:

- щелкните в пределах текста дескриптора, определяющего ячейку

таблицы (<TH> или <TD>), ее строку (<TR>), группу столбцов

(<COLGROUP> или <COL>) либо группу строк (<THEAD>, <TBODY> или

<TFOOT>), которые содержат данные, подлежащие выравниванию по

горизонтали;

- введите ALIGN="?" и замените “?” одним из обозначений типа

выравнивания — left (влево), right (вправо) либо center (по центру).

Web-броузер отображает ячейку таблицы, ее строку, группу

столбцов или строк, выравнивая данные в соответствии с указанным

вами правилом. Однажды определив признаки выравнивания данных

для строки, группы столбцов или строк таблицы, позже вы сможете

задать другие параметры выравнивания для отдельных ячеек. Атрибуты

выравнивания данных в ячейках обладают более высоким приоритетом.

Пример:

<TR ALIGN="right"><ТР>Этот текст будет выровнен вправо.</TD>

<TD>Этот текст будет выровнен вправо.</TD> </TR>

Предопределенная константа baseline позволяет указать на то,

чтобы данные выравнивались по вертикали, относительно нижней

кромки первой строки текста в других ячейках. Значение baseline

поддерживается только Web-броузером Netscape Navigator.

Пример:

<TD VALIGN="baseline">Мне хочется выровнять эти данные.</ТD>

Стандарт HTML предусматривает специальное значение justify,

позволяющее выровнять данные по ширине относительно левой и

правой границ ячейки таблицы. Большинством броузеров эта константа

пока не поддерживается.

Пример:

Стандарт HTML также предлагает возможность взаимного

выравнивания определенных символов в ячейках таблицы,

обеспечиваемую значением char и атрибутом CHAR. Введите

ALIGN="char" CHAR="?", заменяя "?" символом, определяющим порядок

выравнивания. Большинством броузеров эти средства пока не

поддерживаются.

Пример:

Щелкните в пределах текста дескриптора, определяющего ячейку

таблицы (<TH> или <TD>), ее строку (<TR>), группу столбцов

(<COLGROUP> или <СОL>) либо группу строк (<THEAD>, <TBODY> или

<TFOOT>), которые содержат данные, подлежащие выравниванию по

вертикали.

Введите VALIGN="?" и замените "?" одним из обозначений типа

выравнивания - top (кверху), middle (посередине) или bottom (книзу).Так