Шаг 6 - Оформление документа (абзацы, заголовки и шрифты)

Над вопросом: "Как лучше оформить ?" бьются практически все вебматера каждый день. Да и вообще в грамотном и красивом оформлении заключается вся их работа , если конечно они являются только вебмастерами и не пишут научные трактаты.

Для этого язык html представляет просто неограниченные возможности и простоту выполнения.

Элемент <p>...</p>

Этот элемент используется чаще всего, и наверно только поэтому называется так коротко :-). P - это от слова paragraph (параграф или абзац). Все содержимое этого элемента, т.е. то что помещается внутри <p>...</p>, отделяется от другого содержимого страницы несколькими пустыми строками.

Пример:

<p>Абзац первый</p>
<p>Абзац второй
Надеюсь вы обратили внимание, на второй абзац, и нашли отличие от первого ? Если нет то задержите на этом примере свое внимание. Ну что теперь нашли ? Правильно, я не поставил закрывающую скобку </p>. А ее можно и не ставить, таким образом облегчая себе жизнь :-).

Абзацы, как и во всех нормальных редакторах текста можно выравнивать. Т.е. задавать выравнивание по левому или правому краю, а также естественно по центру.

За это отвечает атрибут align, который может принимать значения left, right и center.

Это выравнивание по левому краю.

Это по центру.

Ну и по правому.

Кроме этих выравниваний существует еще одно, которое поддерживает пока только Explorer, это justify - выравнивание по правому и левому краю. Когда вы размещаете большие тексты пользуйтесь этим параметром, т.к. таким образом выравненный текст выглядит намного красивее.

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

Заголовки

Заголовки как вы понимаете тоже имеют огромное значение, и поэтому их аж шесть типов. Различаются они размером букв и <h1> - самые большие, а <h6> - самые мелкие.

Пример:

 <h1>Это самый здоровый заголовок :-)</h1>
 ...
 <h6>А это самый мелкий </h6>

А вот как все это выглядит :

Это самый здоровый заголовок :-)

...
А это самый мелкий

Интересно, Вы там еще глаза не сломали от нижнего заголовка :-).

Заголовки, как и абзацы можно выравнивать таким же способом, через align.

Установка шрифта

Для использования разных шрифтов, цветов и размеров в языке html, есть тег <font>. У него есть следующие параметры:

face
Этот параметр задает название шрифта, которым требуется отобразить текст в документе.
<html>
<p>А это шрифт : <font face="Arial">Arial</font>
</html>
В этом примере слово Arial будет отображаться шрифтом Arial. Насчет этого параметра хочется сказать одно : старайтесь обходиться без него. Это конечно хороший параметр, так как он делает более оригинальной страничку, НО помните, что у посетителя вашей странички может и не оказаться этого шрифта, и кроме того, почему вы должны использовать шрифты Windows'а, если люди сидят в интернете и из под Unix'а и из под OS/2, и вообще (как это не парадоксально) еще сидят в DOS'е в текстровых режимах. Формат Html вообще свободный и не стоит его привызавать к определенной платформе.

size
Этот параметр задает высоту символов, которая может находиться в пределах от 1 до 7.
<html>
<font size=7>Size 7</font>
<font size=3>Size 3</font>
<font size=+2>Size +2</font>
<font size=-1>Size -1</font>
</html>
В этом примере отобразятся надписи различной высоты. Если вы обратите внимание на две предпоследние строчки, то вы увидите, что я использовал в размере знак. Таким образом указываются относительные размеры шрифта, т.е. если размер вашего шрифта был 5, то при записи +1 размер шрифта станет 6, и также с минусами. Но если у вас был шрифт 3, и вы указали +5 или -4, то размер у вас не будет 8 или -1, а максимальный и минимальный, т.е. 7 и 1. Но старайтесь не делать таких ошибок.

color
Этот параметр задает цвет отображаемых символов, ну Вы уже наверно догадались. Здесь я разговаривать о цветах не буду, т.к. везде в языке, если указывается цвет, то он задается в 16-ичном виде, описанном раньше.

Для установки базового шрифта на странице используется тег <basefont>. Параметры у него такие же как и у <font>.

<html>
<basefont size=4 color=red face="Arial">
.....
<p>
<font size=-1 color=black face="Times Roman">
А это другой шрифт !!!
</font>
.....
</html>

Небольшой комментарий. <basefont> не должен иметь закрывающую скобку. Его лучше располагать в начале документа, но если вам нужно действие на определенном участке текста, то можете использовать его внутри него. Так как этот тег определяет базовый шрифт, то в примере размер шрифта будет откладываться от 4, т.е. 4-1=3 - это будет размер шрифта для надписи "А это другой шрифт !!!". Как правило по умолчанию , т.е. если вы не используете <basefont>, базовый шрифт будет размером 3. И еще, цвет вы можете указывать просто в <body> для простоты.


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.