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

Введение

Термин 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>

<HR SIZE=2 WIDTH=100%><BR>

<HR SIZE=4 WIDTH=50%><BR>

<HR SIZE=8 WIDTH=25%><BR>

<HR SIZE=16 WIDTH=12%><BR>

</body>

</html>

Комментарии

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

<!-- Это комментарий -->

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

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

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

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

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

Точка с запятой — обязательный элемент &-последовательности. Все буквы последовательности должны быть в нижнем регистре (т.е., маленькие). Использование тегов типа &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>.

<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:user@mail.box">Послать письмо</A>

 

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

В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.

Пример 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:nc@iname.com">

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

</BODY>

</HTML>