Форматирование текста.

Параграф <p>…</p>. Параграфы отделены друг от друга пустыми строками. Для каждого параграфа возможно задавать свои параметры форматирования при помощи атрибутов, которые указываются в открывающем теге <p «атрибуты»>

<br> – перенос текста на другую строку

<b> Полужирный текст </b>

<i> Наклонный текст (курсив) </i>

<tt> моноширинный шрифт </tt>

<u> Подчеркнутый текст </u>

<s> Перечеркнутый </s>

<small> Малый </small>

Нормальный текст

<big> Большой </big>

Верхний индекс ^{^sup}

Нижний индекс _{_sub}

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

<font>

<NOBR> </nobr>

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

<BLOCKQUOTE> </ BLOCKQUOTE >

Обозначение цитаты. Этот элемент требует наличия конечного тега. Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим элементом заключается только в отступе слева, поэтому элемент может быть использован в самых разных случаях.

Этот элемент имеет собственный нестандартный атрибут, который позволяет указать источник цитирования: cite=" Адрес документапервоисточника"

Предполагается, что адрес задается в виде URL.

<Q></ Q >

Элемент, похожий на предыдущий. Но если BLOCKQUOTE позволяет создать отдельный абзац с отступом, то Q используется для выделения цитаты внутри абзаца (или строки).

<CITE> </ CITE >

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

<ADDRESS> </ ADDRESS>

Этот элемент подобен элементу CITE и отличается только предусмотренным со держанием. Он также обеспечивает форматирование курсивом. В некоторых справочных руководствах можно встретить информацию о том, что данный элемент поддерживает атрибут align. Легко убедиться, что это не так.

Вообще, к подобным элементам надо относиться с определенной долей недоверия. Я имею в виду элементы, предназначенные для размещения определенной информации, а не для создания эффектов форматирования. Мы уже рассмотрели элементы ADDRESS и CITE, а элементы CODE, KBD, SAMP и VAR рассматриваются ниже. Дело в том, что они не относятся к основному направлению совершенствования HTML и пользовательских агентов. Поэтому браузеры интерпретируют их поразному и не в обязательном порядке. Другое дело, если стиль для этих элементов определен в самой Webстранице.

<STRONG> </ STRONG>

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

<CODE> </ CODE >, <SAMP> </ SAMP > и <VAR> </ VAR>

Элементы, предназначенные для вывода фрагментов программ. CODE использует ся для форматирования текста программы. SAMP предполагается задействовать при иллюстрации примеров (sample) вывода данных на экран. VAR был создан для выделения переменных (variable). Как правило, все эти элементы обеспечивают вывод моноширинного шрифта.

<KBD> </ KBD >

Этот элемент предназначен для выделения текста, который пользователь должен ввести с клавиатуры (keyboard). Можно рассчитывать, что текст, выделенный с помощью этого элемента, будет выведен моноширинным шрифтом в полужирном начертании.

<ABBRX/ ABBR>

Элемент для обозначения аббревиатур, например: MSIE, HTML, WWW.

< ACRONYM ></ ACRONYM >

Этот элемент можно использовать для выделения акронимов (сокращений, обра зованных несколькими словами), например: и т. д.; и т. п.

Обозначение цитаты. Этот элемент требует наличия конечного тега. Текст не пре терпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим эле ментом заключается только в отступе слева, поэтому элемент может быть исполь зован в самых разных случаях.

В таблице приведены коды некоторых, по большей части невидимых в обычном режиме просмотра, символов. Ряд символов (таких как «line feed» или «carriage return») используется в текстовых редакторах для форматирования текста, а пользователь их не видит.

Escape - последовательности представляют собой метод представления специальных символов. Например, escape - последовательность &lt; обозначает символ "меньше чем" (<). Некоторые символы, такие как <, используются в HTML в специальном значении, поэтому должен существовать способ их выражения, как символьных данных внутри самого документа. Некоторые escape - последовательности приведены в таблице.

Наиболее часто используемые escape – последовательности

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

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

<DIV></DIV>

Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Как и при использовании других блочных элементов, содержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.

При использовании DIV используется задание стилей в CSS – каскадные таблицы стилей.

Тегом с аналогичным назначением является <SPAN></SPAN>

шаблон для использования элемента DIV:

<HEAD>

<STYLE type="text/css">

DIV Имя { Свойство: значение', . . . }

</STYLE >

</HEAD >

<BODY>

<DIV с1аss="Имя">

Тело документа

</DIV>

</ BODY >

Элемент SPAN, наоборот, предназначен для включения в состав других элементов:

<HEAD>

<STYLE type="text/css">

SPAN Имя { Свойство: значение; . . . }

</ STYLE >

</ HEAD >

<BODY>

Тело документа

<P> <SPAN сlаss="Имя">Текст 1</SPAN > Текст 2 </P>

</ BODY >

position - устанавливает или определяет позицию элемента.

Значения:

· static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.

· absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body.relative - Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.

left/top - Устанавливает или определяет позицию элемента относительно левого/верхнего края.

Значения:

· x – число в процентах или пикселях.

· auto - значение по умолчанию.

<div style="position:relative; top:350px; left:200px; width:300px;">Любое содержимое блока!!!</div>

margin – величина отступа от нашего блока до соседних объектов с четырех сторон.

Значения:

· margin-top - Задает величину верхнего отступа объекта

· margin-left - Задает величину левого отступа объекта

· margin-right - Задает величину правого отступа объекта

· margin-bottom - Задает величину нижнего отступа объекта

<div style="margin-top:30px; margin-left:30px; margin-bottom:30px; margin-right:30px;"> Любое содержимое блока!!!</div>

padding – свойство задает величину пространтства, вставляемого между объектом и его границами.

Значения:

• padding-bottom - Задает величину пространтства, вставляемого между объектом его нижней границей.
• padding-left - Задает величину пространтства, вставляемого между объектом его левой границей.
• padding-right - Задает величину пространтства, вставляемого между объектом его правой границей.
• padding-top - Задает величину пространтства, вставляемого между объектом его верхней границей.

<div style="padding-bottom:30px; padding-left:30px; padding-right:30px; padding-top:30px;"> Любое содержимое блока!!!</div>

Пример использования тегов DIV и SYLE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">

<!—Определение типа документа-->

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<!--Определение типа используемой кодировки -->

<title>Тег DIV</title>

<!—Определение стилей для двух блоков (данный раздел можно вынести в отдельный файл с расширением css, что во многом облегчит структуру документа)-->

<style type="text/css">

.block1 {

width: 200px;

background: #ccc;

padding: 5px;

padding-right: 20px;

border: solid 1px black;

float: left;

}

.block2 {

width: 200px;

background: #fc0;

padding: 5px;

border: solid 1px black;

float: left;

position: relative;

top: 40px;

left: -70px;

}

</style>

</head>

<body>

<div class="block1">Текст 1.</div>

<div class="block2">Текст 2.</div>

<!—Форматирование двух блоков теста по указанным параметрам-->

</body>

</html>

H1, H2, H3, H4, H5, H6- заголовки.Теги определяют заголовок. Существует шесть уровней от H1 (наиболее важный) до H6 (наименее важный). Более важные заголовки обычно отображаются большими шрифтами, чем менее важные.

Основной синтаксис: <Hn>заголовок текста</Hn>,

где n принимает значения 1, 2, 3, 4, 5 или 6.

HR - горизонтальная линия.Тег задает горизонтальную линию. Возможные параметры указаны в таблице.

Параметры тега <HR>

FONT - размер и цвет шрифта. Тег позволяет специфицировать размеры шрифта (относительно к другим размерам), его цвет и начертание. Возможные параметры приведены в таблице.

Параметры тега <FONT>

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