Использование шрифтов в HTML-документе

При стандартном просмотре документа через броузер как правило используются два семейства графических шрифтов: это пропорциональный шрифт (обычно Times Roman) и равноширинный шрифт (обычно Courier). Броузеры могут использовать и другие шрифты, установленные в системе. Считается стандартным, использование в качестве дополнительного шрифта третьего семейства шрифтов, которое называется шрифт без надсечек (обычно Arial). Принципиально допускается использование любого семейства шрифтов, если вам известно его имя на пользовательской машине.

Команда <FONT>

Команда FONT задает цвет, размер и вид семейства шрифтов.

Цвет шрифта
Определяется атрибутом COLOR= согласно правилам задания цветов в HTML-документе.

Размер шрифта
Определяется атрибутом
SIZE=n. Размер может задаваться в абсолютным или относительным значением от базового размера шрифта в документе.

Абсолютный размер
Число n при абсолютном задании размера может принимать значения от 1 до 7.

Пример

size=1 size=2 size=3 size=4 size=5 size=6 size=7

Относительный размер
Число n при относительном задании размера может принимать значения от 1 до 7 со знаками плюс (+) - увеличение или минус (-) - уменьшение размера шрифта на n пунктов по отношению к базовому размеру шрифта в документе. По умолчанию базовый размер шрифта в документе считается равны 3 в абсолютных значения.

Пример
Относительное изменение размера шрифта при стандартном значении базового размера шрифта в документе (n=3).

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

Пример
Относительное изменение размера шрифта при значении базового размера шрифта в документе n=6.

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

Семейства шрифтов
Имя семейства шрифтов определяется атрибутом
FACE= команды FONT или атрибутом NAME= команды BASEFONT. (см. Базовое задание шрифта). Стандартные значения этого атрибута: "Times New Roman" (пропорциональный шрифт), "Courier New" (равноширинный шрифт) и "Arial" (шрифт без надсечек). Имена семейств шрифтов в настоящий момент пока не стандартизованы и в разных системах могут называться по разному. Например, семейство шрифтов, которое используется по умолчанию для пропорционального шрифта "Times New Roman", может называться "Times", "Times Roman", "Roman" и т.д.

Пример
Установка шрифта "Arial":
<FONT FACE="Arial">Welcome to WWW!</FONT>

Что даст: Welcome to WWW!

Установка шрифта "Courier New":
<FONT FACE="Courier New">Welcome to WWW!</FONT>

Что даст: Welcome to WWW!

Семейство шрифтов "Arial" может отсутствовать на конкретной машине пользователя, поэтому для задания шрифта без надсечек рекомендуется использовать несколько подходящих для этих целей имен, например, "Arial", "Lucida Sans", или "Helvetica". Кстати, если просмотрщик не находит нужного шрифта, то использует, заданный по умолчанию пропорциональный шрифт, как правило, "Times Roman".

Пример
Установка шрифта "Arial":
<FONT FACE="Arial,Lucida Sans,Helvetica">Данный текст выводится
либо шрифтом Arial, либо Lucida Sans, или Helvetica, или Times Roman,
в зависимости от наличия шрифтов, установленных в системе.</FONT>

Базовое задание шрифта

Команда BASEFONT определяет (или изменяет) базовый шрифт документа.

Атрибуты

<BASEFONT SIZE=3> This sets the base font size to 3.
<FONT SIZE="+4"> Now the font size is 7.
<FONT SIZE="-1"> Now the font size is 2.

Списки и перечисления

язык HTML имеет команды создания различных списков и перечислений: UL (Unodered List), OL (Odered List), MENU, DIR и DL (Definition List).

Элементы списка (item's) отмечаются командой LI (List Item). Допускаются вложенные списки любой глубины.

Ненумерованный список

В качестве примера, задания ненумерованного списка (unodered list or bulleted list) и использования команд UL и LI, рассмотрим:

<UL>
  <LI>Ненумерованный список (Bulleted Lists)
  <LI>Нумерованный (упорядоченный) список (Ordered Lists)
  <LI>Список описаний (Directory Lists)
  <LI>Список обозначений (Itemized Lists)
  <LI>Список определений (Definition Lists)
</UL>

даст:

Для ненумерованного списка дополнительно может использоваться атрибут TYPE=:

TYPE=disc - темный кружок
TYPE=circle - светлый кружок
TYPE=square - темный квадратик

Нумерованный список

Используя OL и LI получим нумерованный список:

<OL>
  <LI>Шаг первый.
  <LI>Шаг второй.
  <LI>Шаг третий.
</OL>

который даст:

  1. Шаг первый.
  2. Шаг второй.
  3. Шаг третий.

По умолчанию нумерация дается арабскими цифрами, начиная с единицы.

Используя атрибуты команды OL можно изменить стиль оформления списка. Атрибут TYPE= определяет стиль нумерации (буквы или цифры):

TYPE=order-type

order-type=A - использовать большие буквы (латинские);
order-type=a - использовать маленькие буквы;
order-type=I - использовать большие римские цифры;
order-type=i - использовать маленькие римские цифры;
order-type=1 - использовать арабские цифры;
Атрибут START= определяет начальное значение списка (десятичное число)
START=n

Пример вложенного списка

Рассмотрим следующий вложенный список:

<OL>
<LI>Шаг первый.
 <UL>
 <LI>Второй список раз
   <UL>
   <LI>Третий список раз
   <LI>Третий список два
   <LI>Третий список три
   </UL>
 <LI>Второй список два
   <OL TYPE=i START=3>
   <LI>Третий список римский раз
   <LI>Третий список римский два
   <LI>Третий список римский три
   </OL>
 <LI>Второй список три
 </UL>
<LI>Шаг второй.
<LI>Шаг третий.
</OL>

что даст:

  1. Шаг первый.
  2. Шаг второй.
  3. Шаг третий.


Список определений

Список определений задается командами DL, DT и DD.

Следующий пример показывает использование списка определений:

<DL>
<DT>Кошка
<DD>Маленькое хищное животное.
<DT>Крокодил
<DD>Большая рептилия.
</DL>

Что даст:

Кошка
Маленькое хищное животное.
Крокодил
Большая рептилия.

Гиперссылки

Связь между документами и отдельными частями документов осуществляется через соответствующие гиперссылки. Команда <A> (anchor - якорь) задает гиперссылку на другой документ или на определенное место в документе. Когда браузер выводит на экран текст, содержащийся между тегами <A> и </A>, он обычно выделяет его другим цветом. Если же гиперссылкой является графический файл, то на экране вокруг картинки может быть изображена цветная рамка (если атрибут border не равен 0).

Атрибуты команды BODY позволяют определить цвет, которым обозначаются непосещенные (LINK), непосещенные (VLINK) и активные (ALINK) гиперссылки в документе.

Пример использования атрибутов:
<BODY BACKGROUND="bgpicture.gif" BGCOLOR="white"
      TEXT="gray" LINK="blue" VLINK="yellow" ALINK="red">

Здесь
BACKGROUND - название файла, используемого в качестве фонового рисунка
BGCOLOR - цвет фона (белый)
TEXT - цвет текста (серый)
LINK - цвет непосещенной гиперссылки (синий)
VLINK - цвет посещенной гиперссылки (желтый)
ALINK - цвет активной гиперссылки (красный)

Примеры

<A HREF="http://www.company.com">Это адрес компании.</A>

<A HREF="home.html">На главную страницу</A>
- ссылка на файл home.html в той же директории.

<A NAME="info">Информация</A>
-  создание метки info.

Посмотрите в разделе <A HREF="#info">Информация</A>
- переход на место в файле с меткой info.

<A HREF="mailto:www@ict.nsc.ru">www@ict.nsc.ru</a>
- задание адреса электронной почты для автоматической отправки сообщения через броузер.

Адрес URL

Система адресации и собственно сами адреса в HTML документах называются URL. Что такое URL? URL - это аббревиатура от Uniform Resource Locator. Адрес URL является сетевым расширением понятия полного имени файла в операционной системе (пути к файлу).

http://www.ict.nsc.ru/win/docs/html/url.html
В этой адресации кроме имени файла "url.html" и директории, "/win/docs/html/" где он находится указывается сетевое имя машины "www.ict.nsc.ru", на которой этот файл расположен и метод доступа к файлу "http", который можно использовать для его просмотра или загрузки.

HTTP URL

HTTP - HyperText Transport Protocol (протокол передачи гипертекста). HTTP-сервера обычно используются для предоставления гипертекстовых документов. Такие документы, в отличие от обычных, имеют ссылки на другие документы (не обязательно расположенных на этом же сервере) и состоят из текста, графики, звуков, анимации.

Для вызова документа "url.html", который находится в директории /win/docs/html/ WWW сервера www.ict.nsc.ru необходим следующий URL адрес:

http://www.ict.nsc.ru/win/docs/html/url.html

По умолчанию все программы по протоколу HTTP ищут WWW сервер на 80 порту, но можно и явно указать порт (также как и в gopher'e).

http://www.weblab.com:1234/pub/files/foobar.html

Частичные URL

Частичные URL используются только протоколом передачи гипертекста (HTTP). Если вы внимательно посмотрите на исходники какого-нибудь гипертекстового документа и обратите внимание на то, как указаны ссылки на другие URL, то заметите, что встречаются два вида:

<A HREF="http://www.w3c.net/WWW/url.html">URL</A>

<A HREF="docs.html">Документация</A>

Первый пример - это полный URL, а второй - частичный. Частичный URL указывает на документ, который находится на том же сервере и в той же директории, где и документ, в котором встречается эта ссылка. Так, например, если документ, где вы нашли эти две строчки, имел URL http://www.w3c.net/WWW/foo.html, то полный URL у второго частичного должен выглядеть как http://www.w3c.net/WWW/docs.html.

Сокращенные URL адреса определяются по правилам, принятым в операционной системе UNIX:

адрес "my/file-1.html" означает переход в поддиректорию my относительно директории того файла, в котором стоит гиперссылка на файл file-1.html.

адрес "../win/file-2.html" означает переход на одну директорию вверх и выбор файла с именем file-2.html из поддиректории win.

адрес "/docs/ball.gif" - это переход в корневую директорию и выбор файла с полным именем www.w3c.net/docs/ball.gif.