Главная » Мастерская » Статьи » Web-сайт своими руками » Шаг 6
Шаг 1 - Шаг первый - создание простейшего документа HTML
Шаг 2 - Рассмотрим теги нашего документа
Шаг 3 - Рассмотрим создание таблиц в документах HTML
Шаг 4 - Вставка графических изображений в документах HTML
Шаг 5 - Создание карт-изображений
Шаг 6 - Форматирование текста HTML
Шаг 7 - Создадим простейшую страничку HTML
Шаг 8 - Как разместить свою HTML страницу в интернете
Шаг 9 - Как разместить на HTML-странице счетчик посещений
Шаг 10 - Создание фрэймов в документах HTML
Шаг 11 - Бегущая строка в HTML документе
Шаг 12 - Где взять и как сделать гостевую книгу
Шаг 13 - Создание форм
Шаг 14 -Изменение дизайна Гостевой книги
Шаг 15 - Немного о JavaScript
Шаг 16 - Примеры фотоальбомов с использованием JavaScript
Шаг 17 - Еще раз о фреймах
Шаг 18 - Изменение информации в двух разных фреймах, нажатием на одну ссылку
Шаг 19 - Анимация и JavaScript
Шаг 20 - Изменение картинки при наведении курсора мыши
Шаг 21 - Как адаптировать сайт под различные видеорежимы

Шаг 6 - Создание абзацев

В языке 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, который позволяет выровнять текст по левому или правому краю и по центру.

  • align="left" - Выравнивание по левому краю.
  • align="right" - Выравнивание по правому краю.
  • align="center" - Выравнивание по центру.
Кроме того, для центрирования текста или графики можно использовать тег <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 одно из следующих значений:

  • +1...+7 - увеличение шрифта на указанное количество единиц относительно базового размера;
  • -1...-7 - уменьшение шрифта на указанное количество единиц относительно базового размера.

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

<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-страницы. Его действие распространяется до следующего тега этого типа. Он имеет следующие атрибуты:
  • face="..." - задает имя шрифта или несколько возможных шрифтов, которые броузер использует для отображения текста. Поскольку шрифт берется из набора установленных на компьютере клиента шрифтов, рекомендуется перечислять, через запятую, несколько близких по начертанию гарнитур, так как нет никакой гарантии, что выбранный шрифт будет присутствовать на компьютере пользователя. В противном случае броузер выберет установленный по умолчанию шрифт и, возможно, текст будет отображаться не так, как хотелось.
  • size="..." - задает размер шрифта от 1 до 7. Базовый размер шрифта равен 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, ...; +7, -7.
  • color="..." - задает цвет шрифта. Значения данного параметра рассматривались ранее. Следует отметить, что все рассмотренные атрибуты присущи и тегу <FONT>.

Copyright ByWeb©
Hosted by uCoz