Материалы представленные на сайте исключительно с целью ознакомления пользователям Интернета и не преследуют коммерческих целей или нарушение авторских прав.
© 2018 - 2024
Для того чтобы способы помещения иллюстраций на web-страницы были более понятны, эта часть была оформлена в html-формате (см. файлы Graphics\Graphics.html и Graphics\Graphics2.html).
Управление видом документа в целом
Здесь мы рассмотрим возможности тега <BODY> для настройки цветов, используемых в документе, а также фоновых изображений. Всё это задаётся с помощью различных атрибутов тега.
1. Атрибут TEXT задаёт цвет для всего текста документа, используемый по умолчанию. Цвет, как уже говорилось, может задаваться как названием (red, yellow, teal и т. п.), так и числовым кодом «#RRGGBB».
2. Атрибут LINK позволяет установить цвет для текстовых гиперссылок.
3. VLINK — цвет просмотренных текстовых гиперссылок.
4. BGCOLOR — цвет фона всей страницы.
5. В атрибуте BACKGROUND указывается URL графического файла, который будет использован в качестве фонового изображения. Если размеры рисунка меньше размеров страницы, то он будет автоматически размножен браузером.
Таблицы
Основные теги
Иногда на web-странице требуется отображать какие-либо данные в виде таблиц. Как нам уже известно, для вставки объектов, более сложных чем обычный текст, требуется использовать специальные теги (например: <IMG>, <OL> и т. п.). Это правило касается также и таблиц: всё то, что должно быть показано в виде таблицы, помещается в контейнер TABLE.
Рассмотрим подробнее содержимое контейнера TABLE:
1. У таблицы может быть название, которое располагается ниже или выше самой таблицы. Для вставки названия сразу после тега <TABLE> записывают контейнер <CAPTION>, внутри которого пишут название таблицы. Расположение названия (выше или ниже таблицы) указывается с помощью атрибута ALIGN тега CAPTION, значениями которого могут быть TOP (сверху) или BOTTOM (снизу). Пример:
<TABLE>
<CAPTION ALIGN=BOTTOM>Таблица 1</caption>
. . . . . . . . . . . . . . .
</table>
2. Данные для самой таблицы записываются после <CAPTION>, если таковой имеется. Таблица состоит из строк, а каждая строка состоит из отдельных ячеек, поэтому данные записываются в следующем виде:
<TR> {Содержимое первой строки} </tr>
<TR> {Содержимое второй строки} </tr>
<TR> {Содержимое третьей строки} </tr>
. . .
Контейнер TR (table row — строка таблицы) содержит данные для одной строки, а именно:
<TD> Ячейка 1 </td><TD> Ячейка 2 </td><TD> Ячейка 3 </td> . . .
Контейнер TD (table data — данные таблицы) содержит тест, графику или другие объекты, которые нужно поместить в конкретную ячейку. Если ячейка содержит текст, который является заголовком столбцы, то его можно выделить особо, используя вместо TD контейнер TH (table header — заголовок таблицы). Если какая-то ячейка должна выглядеть пустой, то в неё нужно записать хотя бы пробел, в противном случае браузер автоматически удалит её со страницы.
Простейший пример таблицы можно найти в файле Tables\T1.html.
Настройка размеров таблицы
В примере T1.html, как нетрудно заметить, таблица выглядит непривычно, поскольку у неё отсутствуют линии сетки. Для того чтобы их добавить, нужно указать атрибут BORDER в теге <TABLE>. Если дать этому атрибуту значение (натуральное число), то таким способом будет установлена толщина внешней границы в точках, например: <TABLE BORDER=12>.
Для установки ширины таблицы имеется атрибут WIDTH тега <TABLE>, в котором можно указать ширину двумя способами:
1. Абсолютный — в точках, размер таблицы не зависит от размеров окна браузера или настроек экрана. Пример: <TABLE WIDTH=600>.
2. Относительный — в процентах от ширины окна, например: <TABLE WIDTH=80%>.
Кроме ширины всей таблицы можно настраивать ширину отдельных ячеек, используя атрибут WIDTH тегов <TD> и <TH>. Ширина указывается либо в точках, либо в процентах (от ширины таблицы).
В теге <TABLE> можно настроить толщину внутренних линий сетки, используя атрибут CELLSPACING, значением которого является толщина в точках. Кроме того, возможна настройка размера отступов от линий сетки до содержимого ячейки (также в точках), для этого используется атрибут CELLPADDING тега <TABLE>.
Пример таблицы с настройками различных размеров находится в файле Tables\T2.html.
Дата: 2019-05-29, просмотров: 155.