Как создать свой сайт - Форматирование текста в HTML

Создание абзацев

В языке HTML имеется специальный тег, указывающий броузеру на то, что в данном месте текста (там, где находится этот тег) должен начинаться новый абзац. Этот тег обо­значается следующим образом: <P>. Пример использования абзаца:

<HTML> 
<HEAD>
  <TITLE>Создание абзацев</TITLE> 
</HEAD> 
<BODY>
  <P>Это первый абзац. Он очень маленький, но все же 
     кое-какая информация в нем отображена.
  <P>А это второй. 
</BODY> 
</HTML>

Если необходимо вставить в документ несколько пустых строк в доку­мент необходимо использовать тег <BR>, поскольку броузер игнорирует все последующие теги <Р>, расположенные подряд и находящиеся после первого. Для тегов абзаца закрывающие теги </P> не являются обязательными, поскольку тег, указывающий на начало нового абзаца, одновременно указывает на конец предыдущего.

Создание заголовков

Заголовки обозначают начала разделов документа. В языке HTML определено 6 уровней заголовков: от H1 до Н6. Текст, окруженный тегами <Н1>...</Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>...</Н2>, то он выгля­дит несколько меньше (подзаголовок); текст внутри <НЗ>...</НЗ> еще меньше и так далее до <Н6>...</Н6>. Наглядно примеры заголовков Вы можете посмотреть на этом примере. Исходный код приведен на следующем листинге:

<HEAD>
  <TITLE>Создание заголовков</TITLE>
</HEAD>
<BODY>
  <H1>Самый большой заголовок</H1> 
  <H2>Заголовок второго уровня</H2> 
  <H3>Заголовок третьего уровня</H3> 
  <H4>Заголовок четвертого уровня</H4> 
  <H5>Заголовок пятого уровня</H5> 
  <H6>Самый маленький заголовок</H6>
</BODY> 
</HTML>

Выравнивание текста

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

Кроме того, для центрирования текста или графики можно использовать тег <CENTER>, который цен­трирует любые объекты. В данном примере проилюстрированы способы выравнивания теста:
<HEAD>
  <TITLE>Выравнивание текста</TITLE> 
</HEAD> 
<BODY>
 <P align="left"> Данный текст выровнен по левому краю 
 <P align="right"> Данный текст выровнен по правому краю.
 <P align="center"> Данный текст выровнен по центру.
 <BR>
 <BR>
 <CENTER>
 Текст также центрирован, однако в данном 
 случае был использован тег центрирования
 </CENTER>
</BODY> 
</HTML>

Стили форматирования

Для выделения текста в HTML - документах могут быть использованы различные стили шрифтов. С помощью контейнера <В>...</В> можно установить жирный шрифт, теги <I>, </I> устанавливает наклонный шрифт, контейнер <U>...</U>задает подчеркнутое написание символов, а теги <TT>...</TT> - шрифт фиксированной ширины.

Допускается также использование в тексте верхних и нижних индексов соответственно с помощью контейнеров <SUP>... </SUP> и <SUB>...</SUB>. Результатом форматирования будет уменьшенный и сдвинутый вверх или вниз текст. Контейнер тегов <STRIKE>...</STRIKE> перечеркивает текст горизонтальной линией. Контейнер тегов <BIG>...</BIG> позволяет вывести текст шрифтом большего размера. Контейнер тегов <SMALL>...</SMALL> позволяет вывести текст шрифтом меньшего размера.

Использование различных стилей форматирования текста наглядно иллюстрирует следующий пример:

<HEAD>
  <TITLE>Форматирование текста в HTML</TITLE>
</HEAD> 
<BODY> 
  <B>Это полужирное начертание текста.</B>
  <I>Это курсив.</I>
  <TT>Моноширинный шрифт, или, как его еще называют, 
  телетайп.</TT>
  Гориэонтальная линия получается при использовании тега <HR>
  <HR>
  Допускается также использование в тексте <SUP>вepxнux</SUP>
  и <SUB>нижних</SUB> индексов соответственно.
  <STRIKE>
  Этот текст перечеркнут горизонтальной линией.
  </STRIKE> 
  Этот текст напечатан шрифтом <BIG>большего размера.</BIG>
  Этот текст выведен <SMALL>меньшего размера</SMALL>.
  <U>А этот текст подчеркнут.</U> 
</BODY> 
</HTML>

Тег предварительного форматирования

Как можно было убедиться, броузеры сами разбивают текст на строки в соответствии с текущей шириной окна. Несомненно, это очень удобно, однако иногда возникают ситуации, когда такое разбиение нежелательно, в частности, при иллюстрации какого-либо программного кода. В таких случаях можно использовать контейнер <PRE>...</PRE>. Заключенный в эти теги текст будет отображаться в броузере точно так же, как он был записан в исходном коде Web-страницы.
<HTML>
<HEAD>
  <TITLE>Пример использования тэга предварительного
               форматирования</TITLE> 
</HEAD> 
<BODY>
  Ниже будет приведен исходный код на языке
  Java, предназначенный для создания
  простейшего фреймового окна
  <PRE>
// Пример иллюстрирует использование 
// пакета AWT для создания простейшего
// фреймового окна
import Java.awt.* ;
public class window 
{
     public static void main (String[] args)
             { 
             Frame myWindow = new Frame("Окно");
                   myWindow.setSize(400,200);
                   myWindow.show();
             } 
}
  </PRE> 
</BODY> 
</HTML>

Как видно из примера, при отображении данного текста соблюдаются все разрывы строк и расстояния.

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

Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег <FONT> с атрибутом size="...", его можно переопределить Используются как относительные размеры шрифтов, так и абсолютные. Следующий пример иллюстрирует установку размера шрифта:


<HTML>
<HEAD>
  <TITLE>Изменение размера шрифта.</TITLE> 
</HEAD>
<BODY>
  <FONT size=7>Paзмер шрифта равен 7.
  </FONT>
  <BR> 
  <FONT size=6>Paзмер шрифта равен 6.
  </FONT>
  <BR> 
  <FONT size=5>Paзмер шрифта равен 5.
  </FONT>
  <BR> 
  <FONT size=4>Paзмер шрифта равен 4.
  </FONT>
  <BR> 
  <FONT size=3>Paзмер шрифта равен 3.
  </FONT>
  <BR> 
  <FONT size=2>Paзмер шрифта равен 2.
  </FONT>
  <BR> 
  <FONT size=1>Paзмер шрифта равен 1.
  </FONT>
</BODY> 
</HTML>

Кроме абсолютных значений размеров шрифта в HTML можно использовать и относительные размеры. Если в теге <BASEFONT> установить параметр size равным какому-либо числу, то броузер будет использовать указанный размер как базовый. По умолчанию базовый размер равен трем. Относительно этого базового размера можно указывать размер шрифта текста, который заключен в контейнере тегов <FONT>. Для этого достаточно присвоить атрибуту size одно из следующих значений:

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

<HTML>
<HEAD>
  <TITLE>Изменение относительного размера шрифта</TITLE> 
</HEAD> 
<BODY>
 Обычный текст. Его абсолютный размер равен 3.
 <BR>
 <BASEFONT SIZE=5>
 Установка базового размера 5.
 <BR> 
 <FONT size=+7>Увеличение до абсолютного размера, равного 12.
 </FONT>
 <BR> 
 <FONT size=-2>Уменьшение до абсолютного размера, равного 3.
 </FONT>
</BODY> 
</HTML>

Тег <BASEFONT> предназначен для описания исходных параметров шрифта Web-страницы. Его действие распространяется до следующего тега этого типа. Он имеет следующие атрибуты:

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



Хостинг от uCoz