Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов
Далее приведем пример таблицы с некоторыми заданными параметрами тегов <TD> и <TR>. Ее отображение показано на рисунке 11. А запись HTML кода представлена ниже.
<HTML>
<HEAD>
<TITLE>Пример простейшей таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=100%
CELLSPACING=15 BORDERCOLOR=#000066>
<TR BORDERCOLOR RLIGHT= pink BORDERCOLORDARK=green >
<TH ALIGN=RIGHT>Ячейка 1 представлена как заголовок </TH>
<TD ALIGH =CENTER>Ячейка 2 </TD>
<TD >Ячейка 3 </TD>
</TR>
<TR>
<TD ALIGH =CENTER>Ячейка 4 </TD>
<TD >  </TD>
<TD ALIGN=RIGHT>Ячейка 6 </TD>
</TR>
<TR VALIGH=BOTTOM>
<TD ROWSPAN =2>Ячейка, захватывающая две строки </TD>
<TD COLSPAN=2> Ячейка, захватывающая две столбца </TD>
</TR>
<TR>
<TD>Ячейка 7</TD>
<TD>Ячейка 8</TD>
</TR>
<TR ALIGN=CENTER>
<TD>  </TD>
<TD>Ячейка 10</TD>
<TD WIDTH=40%>Ячейка шириной 40% от ширины окна браузера
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рис.11. Отображение браузером таблицы с параметром тегов <TD> и <TR>
Хочется отметить, что браузер Microsoft Internet Exporer позволяет использовать ряд новых тегов для структурирования таблиц и гибкого управления прорисовкой рамок и линий сетки.
Ø <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>
<TABLE BORDER=5 WIDTH=100% RULES=GROUP FRAME=HSIDES>
<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=CENTER>
<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>
<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>
</TBODY>
<TFOOT>
<TR>
<TR>
<TD>Итог </TD>
<TD>Итог </TD>
<TD>Итог </TD>
</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 конвертировать только окончательной вариант картинки.
Из доступных приложений эффективно управлять файлами в форматах GIF или JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw.
HTML позволяет легко добавить на страницу фоновое изображение.
Для этого достаточно указать параметр BACKGROUND= ˝URL рисунка˝ в тег <BODY>. Рисунок может быть в формате GIF или JPG/ Это продемонстрировано на рисунке 13.
Рис.13. Отображение браузером использования фонового изображения
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY BGCOLOR= ˝#FFFFFF˝ BACKGROUND= ˝20.gif˝>
<P>Пример использования фонового изображения </P>
</BODY>
</HTML>
Точно так же можно добавить фоновое изображение в таблицу, строку или ячейку таблицы – для этого достаточно указать параметр BACKGROUND= ˝URL рисунка˝ в теги <TABLE>, <TD>, <TR>.
Ø <IMG> - служит для встраивания изображения.
Параметры тега:
- SRC=˝URL рисунка˝- определяет URL–адрес файла с изображением.
Является обязательным параметром.
- WIDTH= ˝число˝ - ширина изображения в пикселях.
- HEIGHT= ˝число˝ - высота изображения в пикселях.
- BORDER= ˝число˝ - рамка вокруг изображения.
- HSPACE= ˝число˝ - отступ по горизонтали вокруг рисунка.
- VSPACE= ˝число˝ - отступ по вертикали вокруг рисунка.
- ALT= ˝текст˝ - выводится вместо изображения.
- ALIGN= ˝значение˝ - выравнивает изображение. Имеет значения:
-TOP- верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
- TEXTTOP – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
- MIDDLE – выравнивание середины изображения по базовой линии текущей строки.
- ABSMIDDLE – выравнивание середины изображения посередине текущей строки.
- BASELINE или BOTTOM – выравнивание нижней границы изображения по базовой линии.
- ABSBOTTOM – выравнивание нижней границы изображения по нижней границе текущей строки.
- LEFT – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны.
- RIGHT - изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.
Общая схема записи рисунка выглядит так:
<IMG SRC=˝URL рисунка˝ WIDTH= ˝ширина˝ HEIGHT= ˝высота˝ BORDER= ˝рамка˝ ALIGN= ˝выравнивание˝ HSPACE= ˝ отступ по горизонтали ˝ VSPACE= ˝ отступ по вертикали ˝ ALT= ˝текст˝>
Приведем пример использования некоторых параметров тега <IMG>. Отображение примера браузером показано на рисунке 14.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17
