Задание фактического размера шрифта

Тег <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>

На рисунке 52 показана Web-страница, соответствующая приведенному выше примеру создания таблицы на языке HTML.

Рисунок 49

Для явного указания ширины ячейки в теге <TD> также можно использовать атрибут WIDTH, а атрибут NOWRAP запрещает браузеру распределять текст по всей ячейке, так, что на экране отображается лишь та часть текста, которая умещается по длине.

Для того чтобы растянуть ячейку таблицы на несколько строк или столбцов, в теге ячейки <TD> используются атрибуты ROWSPAN="число" и COLSPAN="число", указывающие, сколько строк и сколько столбцов таблицы охватывает данная ячейка.

Ниже приведены основные атрибуты тега <TABLE>

Атрибут	Назначение
ALIGN="выравнивание"	Выравнивание всей таблицы относительно текста, в котором она находится (left, center или right)
BORDER="число"	Ширина обрамления таблицы в пикселях
CELLSPACING="число"	Расстояние между ячейками в пикселях
CELLPADDING="число"	Размер свободного пространства между границами ячейки и ее содержимым в пикселях
HSPACE="число"	Размер свободного пространства слева и справа от таблицы, в пикселях
VSPACE="число"	Размер свободного пространства сверху и снизу от таблицы, в пикселях
WIDTH="ширина"	Требуемая ширина таблицы в пикселях или в процентах от ширины окна браузера

На рисунке 53 приведен пример таблицы, созданной с помощью следующего 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>

	Характеристики
Средний рост, см	Средний вес, кг
Пол	Мужской
Женский

Рисунок 50

Следующая таблица (рис. 54) использует 90% ширины окна браузера и различные способы выравнивания данных в ячейках:

Заголовок
Данные, выровненные по левому краю ячейки	Данные, выровненные по правому краю ячейки
25% ширины таблицы	75% ширины таблицы

Рисунок 51

<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> внешней таблицы.

Графика

Вставка рисунка

IMG – сокращение от «image» (изображение). Для вставки рисунка используется тег <IMG> с атрибутом SRC= для указания, какую графику загрузить. Изображения можно помещать в любом месте Web-страницы: заголовке, таблице, списке или тексте. При этом тег <IMG> должен располагаться между тегами <BODY> и </BODY>.

Например, требуется на пустую страницу графическое изображение из файла face.jpg: <IMG SRC=face.jpg>

Этот тег сообщает браузеру, что необходимо вывести на экран изображение с именем исходного файла face.jpg. Ввод этого тега подразумевает, что файл face.jpg находится в той же директории, что и HTML-файл. Если это не так, браузер не сможет найти изображение, на которое идет ссылка. Если же файл находится в другой директории, то необходимо в теге указать путь к ней, например:

<IMG SRC=C:\images\face.jpg>

Атрибуты WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселях (точках). Если ширина и высота не указаны, загрузка страницы замедляется и часто приводит к некрасивому эффекту «скачущего» текста на экране. Если указанные ширина и высота не соответствуют действительным размерам рисунка, при выводе он будет отмасштабирован, что также существенно замедляет загрузку (единственное допустимое исключение - уменьшение или увеличение при загрузке в 2 раза).

Значение атрибута BORDER также указывается в пикселях и определяет ширину рамки вокруг рисунка, являющегося гиперссылкой. Если рамка не нужна, значением этой опции следует сделать 0, а если рисунок не является ссылкой, опцию можно не указывать.

Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения - LEFT (слева) и RIGHT (справа). Опции HSPACE и VSPACE, указываемые в пикселях, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Рисунок не выглядит сливающимся с текстом при их значениях в пределах 5-15.

Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении мышки на рисунок. Обычно этот текст содержит название рисунка.

Например, <img src="http://www.sibstrin.ru/prikl/head.gif" width="267" height="106" align="left" alt="Заставка">

Фон страницы

Одна из интересных возможностей HTML – это задание фона документа. Для этого применяется ключевое слово BGCOLOR. Существует возможность выбора из 16 «именных» цветов, приведенных ранее в разделе «Стилевое оформление текста».

Ключевое слово BGCOLOR является частью стандартного тега HTML <BODY>, охватывающего большую часть текста Web-страницы. Например, если пишется <BODY BGCOLOR=RED>, цвет фона становится красным. Подобным же образом задается любой из 16 цветов.

Фоновые изображения

Помимо стандартных цветов, можно создавать и фоновые рисунки, используя в сочетании с тегом <BODY> ключевое слово BACKGROUND. При правильном применении эта графика дает интересный эффект. Фоновые узоры состоят из крошечных изображений в формате GIF, покрывающих весь фон (это похоже на наклеивание обоев). Текст и изображения, естественно, располагаются поверх фона.

Допустим, требуется разместить фоном файл OBOI.JPG, который выглядит следующим образом:

Для этого пишется тег:

<BODY BACKGROUND=«OBOI.JPG»>

А сама страница выглядит так (рис. 55):

Рисунок 52

Гипертекстовые ссылки на Web-cтраницах

Гипертекстовые ссылки - это фрагменты текста, подчеркнутые и выведенные синим шрифтом. Отображенный таким образом текст называется текстом ссылки. Если по нему щелкнуть мышью, он автоматически осуществляет ссылку на другую Web-страницу.

Гипертекстовые ссылки часто используются, поскольку могут легко связать два документа, расположенные на противоположных концах мира. Каждый документ и файл в Интернете имеют уникальный адрес, называемый универсальным указателем ресурсов (uniform resource locator – URL).

Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорным тегом) – это тег <A>. Затем задается файл, на который ссылаются, а также текст ссылки. Все это завершается закрывающим тегом </A>.

Вот так, например, выглядит HTML-код ссылки на главную страницу сайта Приморье-он-лайн:

Рисунок 53

Создание ссылки

1. Ссылка на местные документы

Местный документ – это документ, который хранится в том же месте в Интернете, что и создаваемая страница. На местные документы легко ссылаться, поскольку в этом случае не обязательно знать полный URL – задать нужно только путь и имя файла.

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

Тег при ссылке на документ будет выглядеть следующим образом:

<A HREF=«имя файла»>текст ссылки</A>

Например,

<A HREF=«table.htm»>пример таблицы</A>

2. Ссылка на иные документы

Если же необходимо сослаться на страницу или сайт, расположенный на другом конце света, например в Америке, понадобится ввести полный адрес сайта:

<A HREF=полный адрес сайта>текст ссылки</A>

Например,

<A HREF=http://www.yahoo.com>поисковая система Yahoo!</A>.