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

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

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

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

правилом.

Изменение размеров таблицы. Изменяя размеры таблицы, вы

сможете точно разместить ее в ограниченном свободном пространстве

Web-страницы. Атрибут WIDTH позволяет указать новое значение

ширины таблицы в экранных пикселях или процентах относительно

текущих габаритов окна

Web-броузера. Задавая значение в пикселях, ограничьте его величиной

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

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

компьютера пользователя. Если вы хотите, чтобы ширина таблицы

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

значение, выраженное в процентах.

Атрибут HEIGHT дает возможность заменить высоту таблицы

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

относительно текущих габаритов окна броузера. Атрибут HEIGHT

дескриптора <TABLE> не входит в стандарт HTML и поэтому

Рис. 11-1. Применение атрибутов CELLSPACING и CELLPADDING.

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

Если задать чрезмерно малые значения ширины или высоты таблицы,

при которых становится невозможным нормальное воспроизведение ее

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

отобразить данные в приемлемом виде. Атрибут HEIGHT и WIDTH

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

их с дескриптором <TH> или <TD>

Ход работы:

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

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

Откройте ее в виде HTML.

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

лабораторной работе №10 рисунок 10.2., внесите ниже

приведенные изменения в дескриптор TABLE.

<html>

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

названия страницы-->

<head>

<I><B>ПРОБА - ШАБЛОН</B></I><!--тег заголовков

страницы-->

</head>

<BODY>

Align="RIGHT">

<strong>Таблица№1</strong> </font>

<Table border="4" CELLSPACING="10" CELLPADDING="5"

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>

Сохраните изменения в меню «файл → сохранить» и обновите

страницу.

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

(ранее Вы его создали в шаблоне к лабораторной работе

№10 «Калоев HTML. Лаб. 10»).

4. Внесите в него приведенные выше в примерах дескрипторы и

атрибуты (см. текст выше - пункты выравнивание данных и

изменение размеров) атрибуты HEIGHT, ALIGN="char"

CHAR=".", ALIGN="center", в графическом редакторе Блокнот.

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

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

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

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

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

например: Калоев HTML. Лаб. 11).

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

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

таблица в HTML » .

8. Студенту предлагается проанализировать набранный код

фрагмента программы, поэкспериментировать, изменяя

написание приведенных дескрипторов (тэгов) в редакторе

Блокнот (не забудьте сохранить изменения и обновить

страницу).

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

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

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

Внимание: При составлении записей в колонках следует стараться,

чтобы записи по структуре были как можно похожими.

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

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

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

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

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

Создайте собственную запись с четырьмя колонками. Вставьте

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

Измените атрибут ALIGN, чтобы посмотреть изменение написания

шрифта, например на Center.

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

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

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

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

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

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

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

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

Цель работы: изучение дескрипторов <TABLE>, <TH>, <TD> и

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

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

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

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

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

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

Отображение границ и разделительных линий таблицы. При воспро-

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

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

линиями ее соседние строки и столбцы. Атрибуты FRAME и RULES

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

следует отображать.

Атрибут FRAME служит для определения фрагментов внешнего

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

Например, иногда бывает достаточно отобразить верхнюю и нижнюю

линии границы либо отметить вертикальным отрезком ее правую часть.

Атрибут RULES предоставляет возможность указания набора внутрен-

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

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

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

группы столбцов или группы строк таблицы. Имейте в виду, что между

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

нии, которые имеют отношение к группам структурных столбцов. Более

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

выше, в одноименных разделах этой главы.

Применяя в пределах дескриптора <TABLE> одновременно оба

атрибута, FRAME и RULES, вы сможете добиться любопытных

эффектов. Так, например, легко построить таблицу, в которой будут ото-

бражаться только все вертикальные — внешние и внутренние — линии и

ни одной горизонтальной. Хотя атрибуты FRAME и RULES входят в

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

броузерами. С помощью атрибута BORDER определите, параметры

рамки таблицы в соответствии с инструкцией раздела "Обрамление

таблицы" этой главы.

В теле дескриптора <TABLE> таблицы, подлежащей форматированию,

введите FRAME="?" и замените "?" предопределенной константой,

описывающей способ формирования внешних границ таблицы (void,

above, below, rhs, Ihs, hsides, vsides или border).

Примечание: список допустимых значений атрибута FRAME с

соответствующими описаниями приведен ниже.

Внешнее обрамление таблицы. Ниже приведены допустимые

значения атрибута FRAME, позволяющие указать тип внешнего

обрамления таблицы.

Внутренние разделительные линии таблицы. Ниже приведены

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

внутренних разделительных линий таблицы.

Значение Результат

void Все линии внешней границы отсутствуют

above Линия над таблицей

below Линия под таблицей

rhs Линия справа от таблицы

lhs Линия слева от таблицы

hsides Линии над и под таблицей

vsides Линии слева и справа от таблицы

border Все линии внешней границы присутствуют

(значение, принятое по умолчанию)

Значение Результат

nоnе Все внутренние линии отсутствуют

cols Линии между столбцами

rows Линии между строками

groups Линии между группами столбцов и

группами строк

all Все внутренние линии присутствуют

(значение, принятое по умолчанию)

С помощью атрибута BORDER определите параметры рамки таблицы в

соответствии с инструкцией раздела "Обрамление таблицы" этой

работы.

В теле дескриптора <TABLE> таблицы, подлежащей форматированию,

введите RULES="?" и замените "?" предопределенной константой,

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

внутри таблицы (none, cols, rows, groups или all).

Примечание: список допустимых значений атрибута

RULES с соответствующими описаниями приведен выше.

Перенос слов внутри ячеек таблицы. Web-броузеры обычно

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

руководствуясь значениями ее размеров и принимая во внимание

текущие габариты собственного окна. Атрибут NOWRAP позволяет

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

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

Атрибут NOWRAP следует применять только по отношению к тем

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

как заголовки или названия товаров. Если в ячейке размещен

крупный "кусок" текста, использование атрибута NOWRAP может

повлечь за собой существенное увеличение размеров и ячейки, и

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

броузера.

Задавая атрибут NOWRAP, имейте в виду, что он не окажет воздействия

на текст ячейки, отформатированный с помощью дескрипторов <Р> или

<HR>. За информацией об указанных дескрипторах обращайтесь к

разделам "Создание абзаца" и "Переход к новой строке" лабораторной

работы № 3-4.

Хотя атрибут NOWRAP все еще поддерживается всеми популярными

Web-броузерами, в настоящее время более предпочтительным

считается применение листов стилей.

Построение вложенных таблиц. Средства создания таблиц, вложен-

ных одна в другую, позволяют осуществлять изощренную компоновку

данных Web-страницы.

Прежде всего, следует построить главную таблицу, оставив ее ячейки,

предназначенные для размещения вложенных таблиц, пустыми. Далее

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

соответствующих ячейках главной таблицы. Определяя таблицы (как

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

завершающие дескрипторы, содержащие символ косой черты (/), т.е.

</TH>, </TD>, </TR> и </TABLE>. Случайный пропуск любого из

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

неузнаваемости.

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

отдельно. Конечно, в этом случае гораздо проще проверить

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

итог удовлетворителен, вы можете затем, воспользовавшись

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

описание вложенной таблицы внутрь дескриптора соответствующей

ячейки главной таблицы.

Форматирование вложенных таблиц выполняется по общим правилам.

Скажем, легко снабдить подчиненную таблицу цветным фоном (более

подробные сведения по этому вопросу приведены выше, в

соответствующих лабораторных работах.

Избегайте чрезмерного усложнения структуры таблиц — в противном

случае вы существенно затрудните участь читателей и увеличите время

загрузки данных на их компьютеры.

Создайте таблицу, которая должна содержать в качестве элементов

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

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

подчиненную таблицу. Опишите вложенную таблицу, руководствуясь

общими правилами.

Примечание: вводя текст, используйте собственную систему отступов -

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

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

средствами текстового редактора или процессора, Web-броузерами

игнорируются.

Задание параметра обтекания таблицы текстом. Атрибут ALIGN

позволяет указать признак обтекания таблиц текстом. Используя

подобное средство, вы сможете придать своему творению

профессиональный внешний вид.

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

текстом, допускает задание любого из двух значений — left или right.

Значение left заставляет броузер поместить таблицу слева от текста, а

right — справа от него. Если необходимо, чтобы форматированию

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

дескриптор <BR> с атрибутом CLEAR, указывающими позицию в тексте,

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

отменяется. Значения “left”, “right” и “all” атрибута CLEAR позволяют

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

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

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

таблиц небольшого размера. Применение атрибута по отношению к

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

эффектов наложения текста на таблицы.

Хотя атрибуты ALIGN и CLEAR все еще поддерживаются всеми

популярными Web-броузерами, в настоящее время более

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

Чтобы таблица размещалась броузером слева от текста, в теле

дескриптора <TABLE> введите ALIGN="left".

Чтобы таблица размещалась броузером справа от текста, в теле

дескриптора <TABLE> введите ALIGN="right".

Присваивание атрибуту ALIGN значения “center” позволяет

центрировать таблицу на странице по горизонтали. Если таблица

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

действует.

Пример:

<TR>

<ТН>Продукт</Тн>

<ТН>Цена</ТН>

</TR>

<TR>

<Т0>микросхема</TD>

</TR>

<TR>

<Т0>радиатор</TD>

</TR>

</TABLE>

Отмена действия параметра обтекания таблиц текстом.

Щелкните в том месте текста, начиная с которого следует отменить

действие механизма обтекания таблиц.

Введите <BR CLEAR="?"> и замените "?" обозначением стороны

страницы (left, right или all), которая далее должна быть свободна от

таблиц.

Web-броузер прекращает действие параметра обтекания таблиц с

указанной вами позиции в тексте.

Ход работы.

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

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

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

11. Наберите в открывшемся блокноте код примера,

показанный на рисунке 11.1. теоретической части, внесите выше

приведенные изменения и в меню «файл → сохранить»

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

12. Внесите в него изменения в соответствии с заданием для

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

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

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

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

например: Калоев HTML. Лаб. 12).

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

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

таблица в HTML » .

15. Студенту предлагается проанализировать набранный код

фрагмента программы, поэкспериментировать, изменяя

написание приведенных атрибутов Frames и Pules в редакторе

Блокнот (не забудьте сохранить изменения и обновить

страницу).

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

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

допускается распечатка страницы на принтере).

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

дескриптор <Bordercolor> этого примера.

Измените размер отступов внутри таблицы.

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

второй столбец стал компактнее.

Вставьте в одну из ячеек еще одну таблицу с двумя колонками и

четырьмя строками.

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

Измените атрибут ALIGN="justify", чтобы посмотреть изменение

написания таблицы.

Введите в код любые текстовые строки и примените обтекание таблицы

текстом (справа, слева).

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

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

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

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

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

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