Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов (стр. 8 из 16)

<OL>

<LI>Тритон

<LI>Нереида

</OL>

</UL>

</BODY>

</HTML>

Наряду со списками существует еще одна очень распространенная форма представления данных – таблица. Поговорим о ней.

§2.1.6 Таблицы

Важным инструментом Web-дизайна являются таблицы, которые используются не только для вывода табличных данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа, цветовых эффектов и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончания ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа.

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

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

- <TABLE>…</TABLE> - служит для создания таблицы.

Параметры тега:

- ALIGH = ˝значение˝ - выравнивает всей таблицы относительно текста,

в котором она находится. Имеет значения:

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

- BORDER= ˝число˝ - ширина обрамления таблицы в пикселях.

- CELLSPACING= ˝число˝ - расстояние между ячейками в пикселях.

-CELLPADDING= ˝число˝ - размер свободного пространства между

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

- HSPACE= ˝число˝ - размер свободного пространства слева и справа от

таблицы, в пикселях.

VSPACE= ˝число˝ - размер свободного пространства сверху и снизу от

таблицы, в пикселях.

-WIDTH= ˝число˝ - требуемая ширина таблицы в пикселях или в процентах от ширины окна браузера.

- HEIGHT= ˝число˝- требуемая высота таблицы в пикселях или в процентах от ширины окна браузера.

- <TR>…</TR> - строка таблицы.

- <TD>…</TD> - ячейка строки таблицы.

- <TH>…</TH> - ячейка заголовок таблицы.

Закрыть тег </TABLE> и теги строк и столбцов обязательно.

Параметры тегов <TR> и <TD>:

- ALIGN= ˝значение˝ - выравнивает объекты в ячейках. Имеет

значения:

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

- VALIGH= ˝значение˝ - выравнивает ячейки по вертикали. Имеет

значения:

- TOP- по верхнему краю.

- BOTTOM- по нижнему краю.

- MIDDLE- посередине.

- BAZELINE- по базовой линии.

- WIDTH= ˝число˝ - ширина ячейки.

- HOWRAP- запрещает браузеру распределять текст по всей ячейке.

- ROWSPAN= ˝число˝ - объединяет смежные ячейки по горизонтали.

- COLSPAN= ˝число˝ - объединяет смежные ячейки по вертикали.

Приведем пример простейшей таблицы, состоящей из двух строк и

двух столбцов, отображение которой показано на рисунке 9. А HTML код ниже.

<HTML>

<HEAD>

<TITLE>Пример простейшей таблицы</TITLE>

</HEAD>

<BODY>

<TR>

<TD>Ячейка 1 строки 1 </TD>

<TD> Ячейка 2 строки 1 </TD>

</TR>

<TR>

<TD> Ячейка 1 строки 2 </TD>

<TD> Ячейка 2 строки 2 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис.9. Отображение браузером простейшей таблицы

Если ячейку следует оставить пустой, в нее обычно помещают ˝жесткий˝ символ пробела >&nbsp

- <CAPITON>…</CAPITON> - заголовок таблицы. Описание заголовка должно располагаться внутри тегов <TABLE>…</TABLE> до первого

тега <TR>.

Параметры тега:

- ALIGN= ˝значение˝ - выравнивает заголовок. Имеет значения:

- TOP – над таблицей.

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

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

- BORDERCOLOR= ˝цвет˝ - определяет цвет всех элементов рамок таблицы.

- BORDERCOLORLIGHT= ˝цвет˝ - окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки.

- BORDERCOLORDARK= ˝цвет˝ - задает цвета противоположных сторон.

Приведем пример таблицы с некоторыми заданными параметрами тега <TABLE>. Ее отображение показано на рисунке 10. А запись HTML кода представлена ниже.

<HTML>

<HEAD>

<TITLE>Пример </TITLE>

</HEAD>

<BODY>

<CAPITON ALIGN=BOTTON><H1>Заголовок, располагаемыйвнизутаблицы </H1></CAPITON>

<TR>

<TD>Ячейка 1 строки 1 </TD>

<TD> Ячейка 2 строки 1 </TD>

</TR>

<TR>

<TD> Ячейка 1 строки 2 </TD>

<TD> Ячейка 2 строки 2 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис.10.Отображение браузером таблицы с параметром тега <TABLE>

Далее приведем пример таблицы с некоторыми заданными параметрами тегов <TD> и <TR>. Ее отображение показано на рисунке 11. А запись HTML кода представлена ниже.

<HTML>

<HEAD>

<TITLE>Пример простейшей таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=5 WIDTH=100%

CELLSPACING=15 BORDERCOLOR=#000066>

<THALIGN=RIGHT>Ячейка 1 представлена как заголовок </TH>

<TD ALIGH =CENTER>Ячейка 2 </TD>

<TD >Ячейка 3 </TD>

</TR>

<TR>

<TD ALIGH =CENTER>Ячейка 4 </TD>

<TD ALIGN=RIGHT>Ячейка 6 </TD>

</TR>

<TD ROWSPAN =2>Ячейка, захватывающаядвестроки </TD>

<TDCOLSPAN=2> Ячейка, захватывающая две столбца </TD>

</TR>

<TR>

<TD>Ячейка 7</TD>

<TD>Ячейка8</TD>

</TR>

<TD>Ячейка 10</TD>

<TDWIDTH=40%>Ячейка шириной 40% от ширины окна браузера

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис.11. Отображение браузером таблицы с параметром тегов <TD> и <TR>

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

- <THEAD> - используется для описания нижнего колонтитула таблицы.

- <TBODY> - используется для логического группирования данных.

- <TFOOT> - используется для описания нижнего колонтитула таблицы.

Управление прорисовкой линий и рамок вокруг таблицы

осуществляется параметрами тега<TABLE>:

-RULES= ˝значение˝ - прорисовка внутренних линий сетки таблицы.

Имеет значения:

-ALT- рисует все внутренние линии.

-GROUPS- рисует только линии, разделяющие группы.

- ROWS- рисует линии, разделяющие строки.

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

-NONE- внутренние линии не рисуются.

-FRAME= ˝значение˝ - прорисовка рамок вокруг таблицы. Имеет

значения:

-BOX или BORDER – рисует рамку со всех четырех сторон.

-ABOVE- рисует рамку только с верхней стороны.

-BELOW- рисует рамку только с нижней стороны.

-HSIDES- рисует нижнюю и верхнюю стороны.

-VSIDES- рисует левую и правую стороны.

-LHS- рисует только с левой стороны.

-RNS- рисует только с правой стороны.

-VOID- таблица без внешних рамок.

Приведем пример таблицы, созданной с использованием описанных возможностей. Ее отображение показано на рисунке 12, а ниже следует HTML код.

Рис.12. Отображение браузером таблицы с гибкой прорисовкой линий

<HTML>

<HEAD>

<TITLE>Дополнительные возможности</TITLE>

</HEAD>

<BODY>

<CAPTION><H1>Примергибкогоуправлениялиниями <BR>сеткитаблицы </H1><CAPTION>

<THEAD>

<TR>

<TH><H2>Заголовокстолбца 1 </H2></TH>

<TH><H2>Заголовок столбца 2 </H2></TH>

<TH><H2>Заголовок столбца 3 </H2></TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>Данные </TD>

</TR>

<TR>

<TD>Данные </TD>

</TR>

<TR>

<TD>Данные </TD>

</TR>

<TR>

<TD>Данные </TD>

</TR>

</TBODY>

<TFOOT>

<TR>

</TR>

</TFOOT>

</TABLE>

<BODY>

</HTML>

Далее рассмотрим возможность использования графики при создании WEB-страниц.

§2.1.7 Графика

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

Существует много способов описания графической информации, соответственно имеется большое количество форматов хранения графических файлов.

Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.

Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации (˝мультипликация˝ на Web- страницах, графические кнопки, ˝украшения˝).

Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект – возможность чересстрочной загрузки изображения GIF – то есть, изображение может постепенно ˝проявляться˝ по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.

Формат JPG используется для хранения полно-цветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16,7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web- страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательной вариант картинки.