- •2.3.6. Связи между html-документами
- •2.3.8. Тело документа
- •2.4. Форматирование текста
- •2.4.1. Тэги уровня блока и последовательные тэги
- •2.4.2. Физические стили
- •2.4.3. Параметры шрифта
- •2.4.4. Разделение текста на абзацы
- •2.4.5. Логические стили
- •2.4.7. Комментарии
- •2.4.8. Специальные символы
- •2.5. Списки
- •2.5.1. Маркированные списки
- •2.5.2. Нумерованные списки
- •2.5.3. Списки определений
- •2.6. Организация гиперссылок
- •2.6.1. Относительные ссылки
- •2.6.2. Абсолютные ссылки
- •2.6.3. Внутренние ссылки (анкера)
- •2.6.4. Ссылки на другие виды ресурсов
- •2.7. Изображения
- •2.8. Цветовая гамма
- •2.9. Таблицы
- •2.10. Фреймы
- •2.11. Формы
- •2.11.1. Назначение форм
- •2.11.2. Синтаксис формы
- •2.11.3. Взаимодействие между браузером и web-сервером
- •2.11.4. Mime-типы
- •2.11.5. Url-кодирование
- •2.11.6. Методы передачи данных
- •2.11.7. Поля ввода формы
- •3.1. Таблицы стилей css
- •3.1.1. Логическое и физическое форматирование
- •3.1.2. Понятие стиля, таблицы стилей и css
- •3.1.3. Правила css
- •3.2. Связывание html с css
- •3.2.1. Встраивание css в html
- •3.2.2. Внедрение таблицы стилей
- •3.2.3. Связывание таблицы стилей
- •3.2.4. Импорт таблицы стилей
- •3.3. Приоритеты использования таблиц стилей
- •3.4. Группирование
- •3.5. Наследование
- •3.3. Селекторы
- •3.3.1. Селектор class
- •3.3.2. Селектор id
- •3.4. Функции таблиц стилей
- •3.5. Объектная модель документа
- •3.5.1. Структура документа
- •3.5.2. Функции объектной модели документа
- •3.6.1. Проблема http-соединения
- •3.6.2. Назначение cookie
- •3.6.3. Формат cookie
2.8. Цветовая гамма
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <body>:
bgcolor |
Определяет цвет фона документа. |
text |
Определяет цвет текста документа. |
link |
Определяет цвет непросмотренной гипертекстовой ссылки. |
vlink |
Определяет цвет просмотренной гипертекстовой ссылки |
alink |
Определяет цвет гиперссылки в момент, когда на нее указывает курсор мыши и нажата кнопка, то есть непосредственно перед переходом по ссылке. |
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Примеры:
bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.
text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.
2.9. Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы.
В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.
Описание таблиц должно располагаться внутри раздела документа <body>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <table> и завершаться тэгом </table>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом <tr> (Table Row) и завершается тэгом </tr>. Отдельная ячейка в строке обрамляется парой тэгов <td> и </td> (Table Data) или <th> и </th> (Table Header). Тэг <th> используется обычно для ячеек-заголовков таблицы, а <td> — для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <th> отображается полужирным шрифтом и располагается по центру (align=”center”, valign=”middle”). Ячейки, определенные тэгом <td> по умолчанию отображают данные, выровненные влево (align=”left”) и посередине ( valign=”middle”) в вертикальном направлении.
Пример:
<html>
<body>
<h1>Простейшая таблица </h1>
<table border="1">
<caption>Заголовок таблицы</caption>
<tr>
<td> Первая строка, первая колонка </td>
<td> Первая строка, вторая колонка </td>
</tr>
<tr>
<td> Вторая строка, первая колонка </td>
<td> Вторая строка, вторая колонка </td>
</tr>
</table>
</body>
</html>
Тэг <table> может включать несколько атрибутов (Таблица 5).
Таблица 5. Атрибуты тэга <table>
align |
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=”left”, align=”center”, align=”right”. |
width |
Ширина таблицы. Ее можно задать в пикселах (например, width=”400”) или в процентах от ширины страницы (например, width=”80%”). |
border |
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, border=”4”). Если атрибут не установлен, таблица показывается без рамки. |
cellspacing |
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, cellspacing=”2”). |
cellpadding |
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, cellpadding=”10”). |
Таблица может иметь заголовок (<caption> ... </caption>), хотя заголовок не является обязательным. Тэг <caption> может включать атрибут align.
Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>. Метка <tr> может включать следующие атрибуты (Таблица 6).
Таблица 6. Атрибуты тэга <tr>
align |
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=”left”, align=”center”, align=”right”. |
valign |
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign=”top”, valign=”middle”, valign=”bottom”. |
Каждая ячейка таблицы начинается с тэга <td> и заканчивается меткой </td>. Тэг <td> может включать следующие атрибуты (Таблица 7).
Таблица 7. Атрибуты тэга <td>
nowrap |
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. |
colspan |
Устанавливает размер ячейки по горизонтали. Например, colspan=”3” означает, что ячейка простирается на три колонки. |
rowspan |
Устанавливает размер ячейки по вертикали. Например, rowspan=”2” означает, что ячейка занимает две строки. |
align |
Устанавливает выравнивание текста в ячейке. Допустимые значения: align=”left”, align=”center”, align=”right”. |
valign |
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: valign=”top”, valign=”middle”, valign=”bottom”. |
width |
Устанавливает ширину ячейки в пикселах (например, width=”200”). |
heigth |
Устанавливает высоту ячейки в пикселах (например, heigth=”40”). |
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась в окне просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры width (ширина таблицы) и height (высота таблицы) тэга <table>. Аналогичные параметры могут задаваться и для отдельных ячеек.
Одной из особенностей представления таблиц различными браузерами является отображение пустых ячеек. Согласно описанию языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тэгов <td> и </td> не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код или код перевода строки <br>, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному.
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел).