Форматирование текста и абзаца

Введение

Термин HTML (HyperText Markup Language) означает "язык разметки гипертекста". Для освоения языка HTML понадобятся две вещи:

1. Любой браузер, например, программа просмотра HTML-файлов (Internet Explorer).

2. Любой редактор неформатированных текстовых файлов (Notepad).

Редакторы HTML

В настоящее время широко используются два типа редакторов HTML:

- Редакторы типа "что видишь, то и получишь" (Microsoft Front Page или Microsoft Word).

- Редакторы собственно HTML-текстов (HomeSite, CuteHTML, HotDog). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML.

Первые HTML-документы

HTML-документ — это текстовый файл с расширением *.html или *.htm.

Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется тегом (по-английски — tag). Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением "/".

Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег.

Обязательные теги

<html>... </html>

Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.

<head>... </head>

Эта пара тегов указывает на начало и конец заголовка документа.

<title>... </title>

Все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Браузер показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body>... </body>

Эта пара тегов указывает на начало и конец тела HTML-документа.

<H1>... </H1> — <H6>... </H6>

Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P>... </P>

Такая пара тегов описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Пример 1

<html>

<head>

<title>

Пример 1

</title>

</head>

<body>

<H1>

Привет!

</H1>

<P>

Это простейший пример HTML-документа.

</P>

</body>

</html>

Для удобства чтения введены дополнительные отступы, однако в HTML это совсем не обязательно. Браузеры игнорируют символы конца строки и пробелы в HTML-файлах. Поэтому пример вполне мог бы выглядеть и вот так:

<html>

<head>

<title>Пример 1</title>

</head>

<body>

<H1>Привет!</H1>

<P>Это простейший пример HTML-документа.</P>

</body>

</html>

Теги <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или

<P ALIGN=RIGHT>Выравнивание по правому краю</P>

Пример 2

<html>

<head>

<title>Пример 2</title>

</head>

<body>

<H1 ALIGN=CENTER>Привет!</H1>

<H2>Это чуть более сложный пример HTML-документа</H2>

<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>

<P ALIGN=CENTER>но и по центру</P>

<P ALIGN=RIGHT>или по правому краю.</P>

</body>

</html>

Форматирование текста и абзаца

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

<BR>

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

<HR>

Тег <HR> описывает горизонтальную линию:

Тег может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселях) и/или WIDTH (определяет размах линии в процентах от ширины экрана).

Пример 3

<html>

<head>

<title>Пример 3</title>

</head>

<body>

<H1>Коллекция горизонтальных линий</H1>

</body>

</html>

Комментарии

Браузеры игнорируют любой текст, помещенный между . Это удобно для размещения комментариев.

&-последовательности

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

Браузер показывает на экране символ "<", когда встречает в тексте последовательность <. Знак ">" кодируется последовательностью >.

Символ "&" (амперсанд) кодируется последовательностью &

Двойные кавычки (") кодируются последовательностью "

Точка с запятой — обязательный элемент &-последовательности. Все буквы последовательности должны быть в нижнем регистре (т.е., маленькие). Использование тегов типа &QUOT; или &AMP; не допускается.

Форматирование шрифта

HTML допускает два подхода к шрифтовому выделению фрагментов текста.

можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста.

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

Физические стили

Все, что находится между тегами <B> и </B>, будет написано жирным шрифтом.

Текст между тегами <I> и </I> будет написан наклонным шрифтом.

Текст, размещенный между этими тегами <TT> и </TT>, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Логические стили

<EM>... </EM>

От английского emphasis — акцент.

<STRONG>... </STRONG>

От английского strong emphasis — сильный акцент.

<CODE>... </CODE>

Рекомендуется использовать для фрагментов исходных текстов.

<SAMP>... </SAMP>

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

<KBD>... </KBD>

От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

<VAR>... </VAR>

От английского variable — переменная. Рекомендуется использовать для написания имен переменных.

Форматированный текст: <PRE>... </PRE>

Браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.

Текст, заключенный между тегами <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки.

Текст с отступом: <BLOCKQUOTE>... </BLOCKQUOTE>

Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.

Пример 4

<html>

<head>

<title>Пример 4</title>

</head>

<body>

<H1>Шрифтовое выделение фрагментов текста</H1>

<P>Теперь мы знаем, что фрагменты текста можно выделять

<B>жирным</B> или <I>наклонным</I> шрифтом.

Кроме того, можно включать в текст фрагменты с фиксированной шириной символа

<TT>(имитация пишущей машинки)</TT></P>

<P>Кроме того, существует ряд логических стилей:</P>

<P><EM>EM - от английского emphasis - акцент </EM><BR>

<STRONG>STRONG - от английского strong emphasis -

сильный акцент </STRONG> <BR>

<CODE>CODE - для фрагментов исходных текстов </CODE> <BR>

<SAMP>SAMP - от английского sample - образец </SAMP> <BR>

<KBD>KBD - от английского keyboard -клавиатура</KBD> <BR>

<VAR>VAR - от английского variable - переменная </VAR> </P>

</body> </html>

Списки в тексте

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

Ненумерованные списки: <UL>... </UL>

Текст, расположенный между тегами <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с тега <LI>. У тега <LI> нет парной закрывающей метки.

Например, чтобы создать вот такой список:

· Иван;

· Петр;

· Никита

необходим такой HTML-текст:

<UL>

<LI>Иван;

<LI>Петр;

<LI>Никита

</UL>

Нумерованные списки: <OL>... </OL>

Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры.

<OL>

<LI>Иван;

<LI>Петр;

<LI>Никита

</OL>

определяет список:

1. Иван;

2. Петр;

3. Никита

Списки определений: <DL>... </DL>

Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения).

<DL>

<DT>HTML

<DD>Термин означает 'язык разметки гипертекста'.

<DT>HTML-документ

<DD>Текстовый файл с расширением *.html.

</DL>

Этот фрагмент будет выведен на экран следующим образом:

HTML

Термин HTML означает ''язык разметки гипертекста'.

HTML-документ

Текстовый файл с расширением *.html.

Метки <DT> и <DD> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную метку <DL COMPACT>.

<DT>А

<DD>Первая буква алфавита

<DT>Б

<DD>Вторая буква алфавита

<DT>В

<DD>Третья буква алфавита

</DL>

будет выведен на экран примерно так:

А Первая буква алфавита

Б Вторая буква алфавита

В Третья буква алфавита

Элемент любого списка может содержать в себе целый список любого вида.

Пример 5

<html>

<head>

<title>Пример 5</title>

</head>

<body>

<H1>HTML поддерживает несколько видов списков </H1>

<DL>

<DT>Ненумерованные списки

<DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева:

<UL>

<LI>Элемент 1

<LI>Элемент 2

<LI>Элемент 3

</UL>

<DT>Нумерованные списки

<DD>Элементы нумерованного списка выделяются

отступом слева, а также нумерацией:

<OL>

<LI>Элемент 1

<LI>Элемент 2

<LI>Элемент 3

</OL>

<DT>Списки определений

<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

<P>Помните, что списки можно встраивать один в другой. </P>

<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. </P>

</DL>

</body>

</html>

Гиперссылки

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

В HTML гиперссылка задается с помощью тега вида:

<A HREF="адрес перехода"> текст</A>

В качестве параметра адрес перехода может использоваться несколько типов аргументов.

Самое простое — это задать имя другого HTML - документа, к которому нужно перейти. Например:

<A HREF="index.html">Перейти к оглавлению</A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента, при нажатии на который в текущее окно будет загружен документ index.html.

Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

Часто бывает необходимо дать ссылку на документ, находящийся на другом сервере.

<A HREF="http://www.yi.com/home/index.html">Практическое руководство по HTML</A>

При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер.

Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать анкер в файле 2.html:

<A NAME="AAA"> Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер:

<A HREF="2.html #AAA ">Переход к анкеру AAA</A>

Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2:

<A HREF=" #AAA ">Переход к анкеру AAA</A>

На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа.

<A HREF=" mailto:[email protected] ">Послать письмо</A>

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

В строке To: ("Куда") окна почтовой программы будет указано [email protected].

Пример 6

<HTML>

<HEAD>

<TITLE>Пример 6</TITLE>

</HEAD>

<BODY>

<H1>Связывание </H1>

<P>С помощью ссылок можно переходить к другим файлам

(например, к <A HREF="index.html">оглавлению этого

руководства</A>).</P>

<P>Можно дать пользователю возможность выгружать файлы (например, <A HREF="ftp://yi.com/home/ChuvakhinNikolai/html-pr.doc">это руководство в формате Microsoft Word 2.0</A>) на его локальный диск.</P>

<P>Можно дать пользователю возможность послать почту

(например, <A HREF="mailto:[email protected]">

автору этой странички </A>).</P>

</BODY>

</HTML>