Шрифты

Шрифт – это таблицы замены кода видимым изображением.

То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).

Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт – это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт – означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой – это:

Arial
Courier New
Comic Sans
Times New Roman
Verdana
Tahoma


Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен – Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт – это самостоятельный файл в папке Windows/fonts/ *.ttf

Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150–300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)
Как в HTML придать шрифту тот или иной вид?

Тег, назначающий шрифт – <font>содержимое тега – то, на что повлияют параметры тега</font>

В это самое <font> мы сейчас и будем вставлять параметры... Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.

Итак:
размер шрифта – <font size="число от 1 до 7">

В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места, трудно читается и вообще некрасиво. Правда, и большим размерам найдется применение. Например, седьмым размером можно писать буквицу (первую букву начала главы)

Если правильно подобрать размеры, смотрится вполне приятно.

Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это тегом face="название шрифта" (пример: face="Comic Sans MS")

Эти два тега – размер и вид шрифта, – можно расположить в любой последовательности в теге <font> – что 

<font size="1" face="Comic Sans MS">текст</font>

что 

<font face="Comic Sans MS" size="1">текст</font>

Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >

Теперь, для лучшего понимания таких терминов, как «контейнер», «вложеный тег» и «наследование», рассмотрим ниже следующий пример:



Как видим из примера, вовсе необязательно каждый раз писать цвет, размер и имя шрифта. Все эти параметры «наследуются» младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: задали имя шрифта; оно сохранится во всем пространстве, ограниченном тегами с именем.

Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.

Так же в работе с текстом помогает и тег, обозначающий абзацы – это <p></p> – все, помещенное в них, отделяется сверху и снизу пробелом и может иметь собственные параметры абзаца,, прописываемые прямо в теге – <p align="center">текст</p>.

Пробелы между выделением абзаца, являющиеся скорее недостатком, чем полезностью, можно убрать при помощи CSS, о котором будет отдельная глава.

Шрифт так же может быть наклонный, выделеннный, и жирный наклонный.

Достигается это тегами

<i>текст</i>
<b>текст</b>
и их сочетанием – <b><i> текст </i></b>

Сочетание вида м – <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других – «заорут». Поэтому советую писать правильно.

Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong> – (аналог <b></b>)
<i>наклонный шрифт</i> – (курсив)
<em>наклонный шрифт</em> – (аналог <i></i>)
<u>подчёркнутый шрифт</u>
<s>перечёркнутый шрифт</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
_{нижний индекс} и ^{верхний индекс}

<code>текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>текст отображается моноширинным жирным шрифтом</kbd>
<var>отображение переменных (как правило – курсив)</var>
<cite>отображение цитат (как правило – курсив)</cite>
<address>так обозначается адрес (как правило, курсив) </address>
<blockquote>
Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева – нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)
</blockquote>

Попробуйте использовать и такое:

<blockquote><blockquote>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
</blockquote></blockquote>

И собственно, тег <br> – эта фича закрытия не требует.
Для тех, кто в танке: </br> не пишем!
Это просто переход к следующей строке, чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж... тогда хоть полизать... ;0)

Кроме прочего, стоило бы упомянуть такие теги, как <H1></H>, но, будучи вставлены в текст, «по умолчанию» они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной «доводки» при помощи стилей теги эти неудобоваримы и бесполезны.

Списки.

Вместо того, чтобы нумеровать все вручную, вместо запарок с выделениями разного рода и калибра, намного проще воспользоваться малоизвестными, но поддерживаемыми всеми бродилками, тегами <UL> и <LI>:

Как это выглядит:

• строка 1
• строка 2
• строка 3

Код:


Списки могут быть и вложенными:

Как это выглядит:

• тема 1
  • подтема 1
  • подтема 2
    • подподтема
  • подтема 3
• тема 2

Код:


Какой тег что означает?
UL – начало списка, /UL – закрытие списка
LI – тег, означающий строку списка. Если величина не задана (параметром value="число"), то по умолчанию имеет вид точки, если задано число – отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному.
OL – тег начала нумерованного списка. Может принимать значение не с единицы, а с заданной величины: делается введением параметра start="число, с которого начать отсчет"

Декорировать списки можно разными значками. Делается это при помощи параметра type:

Код	Как выглядит
<UL>	по умолчанию
<UL type="circle">	кружок
<UL type="square">	квадратик
<UL type="disc">	диск (по умолчанию)
<OL type="i" >	римские малые
<OL type="I" >	римские заглавные
<OL type="a" >	английские малые
<OL type="A" >	английские заглавные
<OL type="1" >	арабские цифры

Но вышеопиcанные премудрости с точками, кружочками и квадратиками сработают и если просто установить тег в двойном экземпяре – то есть <ul><ul><li> содержимое </ul></ul></li> тогда вместо точки отобразится кружок. А если <ul> написать три раза, то квадратик.