HTML. Хочу знать ВСЕ!

Здравствуйте уважаемые коллеги!

Сегодня в выпуске:

• Элемент P
• Введение в таблицы стилей

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

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

Для разделения текста на абзацы (параграфы) используется элемент P.

Итак текст размещенный между тегами <P> и </P> будет представлен как абзац, отделенный от другого текста пустыми строками. Причем конечный тег можно опускать, он является необязательным.

Атрибуты элемента P:

ALIGN - используется для указания способа выравнивания текста, может принимать четыре значения: LEFT, RIGHT, CENTER и JUSTIFY (выравнивание по левому краю, по правому краю, по центру и по ширине соответственно).

Например абзац вида:

<p align="left">Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.</p>

будет представлен так:

Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.

Если

<p align="right">Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.</p>

то будет выглядеь так:

Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.

Если использовать значение CENTER, то текст будет выровнен так:

Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.

А если значение JUSTIFY, то текст будет равномерно распределен по ширине:

Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево. Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево. Авторы традиционно разделяют свои тексты на последовательности абзацев. Организация информации в абзацы не влияет на представление абзаца: абзацы с двойным выравниванием содержат те же мысли, что и абзацы с выравниванием влево.

lang - информация о языке, используется для указания языка текста, может принимать значения ru (русский), en (британский английский), fr (французский), en-us (американский английский) и др.

dir - этот атрибут используется для указания направления текста. Используются значения RTL (справа налево) и LTR (слева направо).

title - заголовок элемента.

style - встроенная информация о стиле.

id, class - идентификаторы в пределах документа.

Как я говорил ранее, многие элементы и атрибуты широко использующиеся в старых версиях языка HTML являются нежелательными в HTML версии 4.0. В частности для выравнивая текста вместо атрибута ALIGN рекомендуется использовать таблицы стилей.

Введение в таблицы стилей

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

Для того, чтобы таблица стилей влияла на вид документа, агент пользователя (например Web-броузер) должен знать о ее существовании. Существует четыре способа объединения стиля с HTML. Например в следующем примере:

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool">
    <STYLE TYPE="text/css">
    @import url( http://style.com/basic );
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P style="color: green">While the paragraph is green.
  </BODY>
</HTML>

объединение стиля с HTML происходит: используя элемент LINK для связи с внешней таблицей стилей, используя элемент STYLE внутри элемента HEAD, импортируя таблицу стилей с помощью нотации CSS '@import' и используя атрибут STYLE в элементе внутри секции BODY.

Проще говоря, в большинстве случаев таблицы стилей размещаются в отдельных файлах с расширением .CSS и связываются с HTML-страницей с помощью элемента LINK. Местанахождение таблицы стилей в таком случае указывает атрибут HREF элемента LINK.

Также информацию о стиле можно размещать внутри самого документа HTML в разделе заголовков (между тегами <HEAD> и </HEAD>). Для этого служит элемент STYLE.

Для отдельных элементов можно использовать атрибут style для указания информации о стиле.

Например, следующая таблица стилей CSS (хранящаяся в файле "style.css") устанавливает зеленым цвет текста абзаца и окружает его сплошной красной рамкой:

P { color : green; border: solid red; }

Таблица связана с документом с помощью элемента LINK:

<HTML>
  <HEAD>
    <LINK href="style.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
    <P>В этом абзаце текст должен быть зеленым.
  </BODY>
</HTML>

Такого же эффекта можно достичь используя элемент STYLE:

<HTML>
  <HEAD>
   <STYLE type="text/css">
 P { color : green; border: solid red; }
   <STYLE/>
  </HEAD>
  <BODY>
    <P>В этом абзаце текст должен быть зеленым.
  </BODY>
</HTML>

Размещать таблицы стилей в отдельном файле хорошо тогда, когда например автор указывает много информации о стиле документа. А если указывается стиль только для одного или нескольких элементов лучше использовать элемент STYLE. Как например в нашем примере, указана информация о стиле только для элемента P.

Для описания таблиц стилей используется много свойств и значений. Сейчас их все мы рассматривать не будем. Главной задачей для вас сейчас понять сам принцип описания таблиц стилей, а подробно все свойства мы рассмотрим в других выпусках рассылки.

Итак, что же мы с вами уяснили. Для описания таблиц стилей используются простые правила, вида:

СЕЛЕКТОР { ОПРЕДЕЛЕНИЕ }

В свою очередь ОПРЕДЕЛЕНИЕ состоит из двух частей:

СВОЙСТВО : ЗНАЧЕНИЕ

Определения отделяются друг от друга точкой с запятой.

Например следующее правило

H1 { color: blue }

состоит из: селектора (H1) и определения (color: blue). Определение в свою очередь состоит из: свойства (color) и значения (blue).

Хотя этот пример будет влиять только на одно свойство одного элемента, он уже является таблицей стилей. Эту таблицу стилей можно связать с документом HTML либо с помощью элемента LINK разместив ее в отдельном файле с расширением .CSS либо включить в документ с помощью элемента STYLE.

Теперь вернемся как говорится к нашим баранам, вернее к элементу P. Как я уже говорил, вместо атрибута ALIGN элемента P для выравнивая текста лучше использовать таблицы стилей. Для того чтобы указать способ выравнивания текста в абзацах (определяемых элементом P) например по центру с помощью таблиц стилей достаточно указать:

P { text-align: center }

Аналогично для выравнивания текста по левому краю, правому краю или по ширине, вместо значения center нужно указать left, right или justify соответственно.

На сегодня это все.

До скорых встреч!

С уважением,
Виталий Прохоренко

Если есть вопросы, или затруднения, пишите: n_biz@mail.ru.

Copyright © Виталий Прохоренко, 2005.