Стилевое оформление текста
Выравнивание текста по центру
Чтобы выровнять текст по центру, необходимо вставить тэги <CENTER> и </CENTER> в начале и в конце нужного фрагмента. С помощью этих тэгов также можно выравнивать заголовки, графику, абзацы текста и многое другое.
Полужирный шрифт
Тэги <B> и </B> позволяют отображать различные слова и фразы HTML-документа полужирным шрифтом. Текст между этими тэгами выглядит темнее и толще обычного текста, чем и выделяется.
Чтобы разметить текст как полужирный, необходимо вставить <B> и </B> в начале и в конце этого текста.
Курсив и подчеркивание
Отметить фрагмент текста, который должен быть выведен на экран курсивом или подчеркнутым, так же просто. Тэги <I> и </I> выводят текст курсивом, а тэги <U> и </U> - подчеркнутым. Вставлять их надо соответственно в начале и в конце нужного фрагмента.
Работа с тэгом <FONT>
Разработчикам web-страниц давно требовались дополнительные возможности изменения вида текста. Их не устраивало то, что они могут управлять только простыми атрибутами текста, но не могут с помощью основных тэгов, таких как <H1>, влиять на стиль и цвет.
Новые версии web-браузеров поддерживают тэг <FONT>, который позволяет управлять стилем, цветом, размером и видом шрифта в гораздо большей степени, чем стандартные тэги <B> и <I>.
Задание фактического размера шрифта
Тэг <FONT> дает такие же возможности для отображения на экране основного текста. Текст может быть выведен шрифтом семи различных размеров – от 1 (наименьший) до 7 (наибольший). Текст без использования тэга <FONT> выводится шрифтом размера 3. Это означает, что есть четыре варианта увеличения размера шрифта (4-7) и два варианта уменьшения (1-2). Все, что требуется сделать, - это поставить в начале и в конце фрагмента тэги <FONT>, причем в начало добавить ключевое слово SIZE=, как показано ниже:
<FONT SIZE=5>Фрагмент текста</FONT>
В приведенном примере тэг <FONT> устанавливает размер шрифта фрагмента равным 5 - на два номера больше, чем обычно.
Изменение цвета с помощью тэга <FONT>
Использование ключевого слова COLOR= тэга <FONT> дает возможность задавать один из нескольких цветов для отображения текста, например:
<FONT COLOR=RED>Красный текст</FONT>
Существует 16 стандартных цветов, имеющих легко запоминающиеся названия:
-
Black
Черный
Navy
Темно-синий
Silver
Светло-серый
Blue
Синий
Maroon
Малиновый
Purple
Сиреневый
Red
Красный
Fuchsia
Розовый
Green
Темно-зеленый
Teal
Голубой
Lime
Зеленый
Aqua
Бирюзовый
Olive
Оливковый
Gray
Темно-серый
Yellow
Желтый
White
Белый
Примечание. Ключевое слово COLOR можно применять в сочетании с описанным выше ключевым словом SIZE.
Таблицы
Таблицы содержат информацию, расположенную по строкам и столбцам, и играют большую роль в организации web-страницы. Они отображаются практически всеми web-браузерами.
Таблицы очень удобны для представления большого количества связанной между собой информации в формате, который легко воспринимается и хорошо располагается на странице. Все, что можно организовать в столбцы, стоит представить в виде таблицы. Компании часто используют таблицы для представления информации о товарах и ценах.
Таблица располагается между тэгами <TABLE> и </TABLE>, каждая новая строка задаётся тэгом <TR>, а каждая новая ячейка в строке - тэгом <TD>. Ниже приведено полное описание тэгов таблиц.
Тэги |
Описание |
<TABLE> и </TABLE> |
Эти тэги охватывают таблицу. Тэг <TABLE> сообщает браузерам, что далее следует описание таблицы. Если требуется, чтобы была видна сетка, разделяющая строки и столбцы, необходимо добавить ключевое слово BORDER (получится <TABLE BORDER>) |
<CAPTION> и </CAPTION> |
Текст, отмеченный этими тэгами, выводится в виде заголовка. Для задания заголовка можно также применять тэги <TC> и </TC> |
<TH> и </TH> |
Тэги отображают текст заголовка строки или столбца немного более крупным полужирным шрифтом |
<TR> и </TR> |
Тэги определяют каждую строку таблицы. Тэг </TR> необязателен, но он делает HTML-код более полным и понятным |
<TD> и </TD> |
Эта пара тэгов отделяет текст каждой ячейки таблицы |
Примечание. При добавлении к тэгу <TABLE BORDER> атрибута, например, <TABLE BORDER="1">, задаётся толщина рамки таблицы. Чем больше величина атрибута, тем толще рамка.
Для выравнивания таблицы служит атрибут ALIGN="", который работает точно так же, как при выравнивании абзаца. Для этого используется конструкция <TABLE ALIGN="...">. Таким же образом можно выровнять содержимое каждой ячейки <TD ALIGN="...">. Данные в ячейках можно выравнивать и по вертикали, для этого используется атрибут VALIGN="". В кавычках указывается, как выровнять данные (bottom, middle, top). При <TD VALIGN="BOTTOM"> данные будут выровнены по нижнему краю ячейки, при VALIGN="TOP" - по верхнему и при VALIGN="MIDDLE" - по центру. Естественно, можно совмещать атрибуты.
Пример
Первый шаг – ввод родового тэга <TABLE>:
<TABLE>
</TABLE>
Чтобы все ячейки таблицы были разделены тонкими линиями, в тэг <TABLE> добавляется атрибут BORDER=1. Без него ячейки будут автоматически выровнены, но сетки в таблице не будет.
Теперь создаются одна за другой ячейки таблицы. Сначала задается строка:
<TABLE>
<TR>
</TR>
</TABLE>
После этого задаются ячейки, которые будут заголовками столбцов. Браузеры отображают заголовки немного более жирным шрифтом, чем остальной текст.
<TABLE>
<TR>
<TH>Год</TH>
<TH>Модель</TH>
<TH>Марка</TH>
</TR>
</TABLE>
Сейчас таблица состоит из одной строки, причем каждая ячейка отмечена как заголовок столбца. Далее вводятся остальные строки. Необходимо помнить, что в каждой строке должно быть одинаковое число столбцов (в данном случае три).
<TABLE BORDER=1>
<TR>
<TH>Год</TH>
<TH>Модель</TH>
<TH>Марка</TH>
</TR>
<TR>
<TD>1986</TD>
<TD>Toyota</TD>
<TD>Corolla</TD>
</TR>
<TR>
<TD>1986</TD>
<TD>Chevrolet</TD>
<TD>Nova</TD>
</TR>
<TR>
<TD>1996</TD>
<TD>Plymouth</TD>
<TD>Neon</TD>
</TR>
</TABLE>
На рис. 49 показана web-страница, соответствующая приведенному выше примеру создания таблицы на языке HTML.
Рис. 49. Пример web-страницы
Для явного указания ширины ячейки в тэге <TD> также можно использовать атрибут WIDTH, а атрибут NOWRAP запрещает браузеру распределять текст по всей ячейке, так что на экране отображается лишь та часть текста, которая умещается по длине.
Для того чтобы растянуть ячейку таблицы на несколько строк или столбцов, в тэге ячейки <TD> используются атрибуты ROWSPAN="число" и COLSPAN="число", указывающие, сколько строк и сколько столбцов таблицы охватывает данная ячейка.
Ниже приведены основные атрибуты тэга <TABLE>
Атрибут |
Назначение |
ALIGN="выравнивание" |
Выравнивание всей таблицы относительно текста, в котором она находится (left, center или right) |
BORDER="число" |
Ширина обрамления таблицы в пикселях |
CELLSPACING="число" |
Расстояние между ячейками в пикселях |
CELLPADDING="число" |
Размер свободного пространства между границами ячейки и ее содержимым в пикселях |
HSPACE="число" |
Размер свободного пространства слева и справа от таблицы, в пикселях |
VSPACE="число" |
Размер свободного пространства сверху и снизу от таблицы, в пикселях |
WIDTH="ширина" |
Требуемая ширина таблицы в пикселях или в процентах от ширины окна браузера |
На рис. 50 приведен пример таблицы, созданной с помощью следующего HTML-кода:
<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0">
<TR>
<TD COLSPAN="2" ROWSPAN="2">&NBSP;</TD>
<TD COLSPAN="2">ХАРАКТЕРИСТИКИ</TD>
</TR>
<TR>
<TD>СРЕДНИЙ РОСТ, СМ</TD>
<TD>СРЕДНИЙ ВЕС, КГ</TD>
</TR>
<TR ALIGN="CENTER">
<TD ROWSPAN="2">ПОЛ</TD>
<TD>МУЖСКОЙ</TD>
<TD>177</TD>
<TD>73</TD>
</TR>
<TR ALIGN="CENTER">
<TD>ЖЕНСКИЙ</TD>
<TD>166</TD>
<TD>65</TD>
</TR>
</TABLE>
|
Характеристики |
||
Средний рост, см |
Средний вес, кг |
||
Пол |
Мужской |
177 |
73 |
Женский |
166 |
65 |
|
Рис. 50. Пример таблицы, созданной в HTML-коде
Следующая таблица (рис. 51) использует 90% ширины окна браузера и различные способы выравнивания данных в ячейках:
Заголовок |
|
Данные, выровненные по левому краю ячейки |
Данные, выровненные по правому краю ячейки |
25% ширины таблицы |
75% ширины таблицы |
Рис. 51. Масштабированная таблица, созданная в HTML-коде
<TABLE WIDTH="90%" ALIGN="CENTER" BORDER="5"
CELLPADDING="2" CELLSPACING="0">
<TR VALIGN="CENTER">
<TD ALIGN="CENTER" COLSPAN="2"><BIG>ЗАГОЛОВОК</BIG></TD>
</TR>
<TR VALIGN="TOP">
<TD ALIGN="LEFT">ДАННЫЕ, ВЫРОВНЕННЫЕ ПО<BR>ЛЕВОМУ КРАЮ ЯЧЕЙКИ</TD>
<TD ALIGN="RIGHT">ДАННЫЕ, ВЫРОВНЕННЫЕ
ПО<BR>ПРАВОМУ КРАЮ ЯЧЕЙКИ</TD>
</TR>
<TR>
<TD WIDTH="25%">25% ШИРИНЫ ТАБЛИЦЫ</TD>
<TD WIDTH="75%">75% ШИРИНЫ ТАБЛИЦЫ</TD>
</TR>
</TABLE>
Примечание. Сложные и красивые эффекты могут быть достигнуты вложением таблиц друг в друга - внутренняя таблица при этом должна быть целиком вложена в тэг <TD> внешней таблицы.