HTML. Шрифты

Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен – Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт – это самостоятельный файл в папке Windows/fonts/ *.ttf
Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)

Как в HTML придать шрифту тот или иной вид?
Тег, назначающий шрифт – <font>содержимое тега – то, на что повлияют параметры тега</font>
В это самое <font> мы сейчас и будем вставлять параметры… Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.
Итак:
размер шрифта – <font size=”число от 1 до 7″>

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 6
текст размера 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>:

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

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

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

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