Форматирование текста и изменение стилей

Заголовки

Создание документов в стандарте HTML

Выше мы рассмотрели на примере как создаются элементы страницы (титул, параграфы), ссылки на другие документы, адреса. Но этих знаний недостаточно, чтобы создать документ среднего уровня.

Ниже мы рассмотрим создание заголовков, форматирование и изменение стиля документа, а также списки на уже рассмотренном примере.

В примере для заголовка используются теги <H1></h1>.

Существует шесть уровней заголовков, которые обозначаются Н1...Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. относительных Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align=’’left’’

align=’’center’’

align=’’right’’

Элемент FONT может с успехом заменять элементы заголовка Н1...Н6. Для последних, например, не предусмотрена возможность указания цвета букв. Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, B, I, P и т. д.

Текст - единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные. Но для форматирования текста существует большое количество элементов.

<P></p>

Элемент абзаца (paragraph) - один из самых полезных. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает конец предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу необходимо обозначить конец абзаца. Вместе с элементом Р можно использовать атрибут выравнивания align.

<BR>

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

<NOBR></nobr>

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

<PRE></pre>

Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в каком он был подготовлен пользователем. Например, учитываются символы конца строки, появившееся при наборе текста в редакторе. Во всех других случаях броузер игнорирует эти символы. Этот элемент удобно использовать для демонстрации листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.

<BLOCKQUOTE></blockquote>

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

<CENTER></center>

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

<DIV></div>

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

align=’’left’’

align=’’center’’

align=’’right’’

<B></b>

Выделение текста полужирным шрифтом. Очень популярный элемент. Использование полужирного шрифта - прием, позаимствованный из текстовых редакторов.

<BIG></big>

Увеличенный размер шрифта

<SMALL></small>

Уменьшенны й размер шрифта

<I></i>

Выделение текста курсивом

<EM></em> и <DFN></dfn>

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

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

<TT></tt>

Элемент, обозначающий текст телетайпа. Его особенность заключается в использовании моноширинного шрифта.

<STRIKE></strike>

Элемент, создающий перечеркнутое начертание текста. В настоящее время его заменяют более простым: <S></S>

<U></u>

Подчеркнутое начертание текста.

<STRONG></strong>

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

<SUB></sub>

Элемент, создающий эффект нижнего индекса.

<SUP></sup>

Элемент, создающий эффект верхнего индекса.

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

Обычный текст и _{элемент SUB}

Обычный текст и ^{элемент SUP}

<PLAINTEXT></plaintext>

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

<CODE></code>, <SAMP></samp> и <VAR></var>

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

<KBD></kbd>

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

<CITE></cite>

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

<ADDRESS></address>

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

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

<BASEFONT>

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

size=Базовый размер шрифта

Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT (см. ниже),который позволяет задавать относительный размер шрифта.

<FONT></font>

Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов. Например, абсолютный размер шрифта задается при помощи size (размер):

size=Абсолютный размер шрифта

Размер шрифта может задаваться относительно базового:

size=+Число

size=-Число

При назначении величины для size необходимо учитывать величину базового размера. Обе они в сумме должны соответствовать одному из абсолютных размеров. Так для базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4. Если величина выходит за допустимый предел, то используется или шрифт размера 7, или шрифт размера 1.

Для элемента FONT можно использовать атрибут цвета:

color=’’цвет’’

Атрибут face (вид) позволяет задавать тип шрифта:

face=’’Название шрифта’’

Правда, есть одна проблема. Web-страницы просматривают множество людей, и нет гарантии, что у каждого из них окажется нужный шрифт. Если в системе не установлен шрифт точно с таким же названием, то броузер использует свой стандартный. Он имеет два назначенных по умолчанию шрифта: один пропорциональный, другой моноширинный.

За описание стиля некоторых элементов Web-страницы отвечает

<STYLE></style>

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

Интересно, как синтаксис в HTML отражает историю развития вычислительной техники. Например, старый, а теперь почти забытый элемент BLINK напоминает о тех временах, когда использовались дисплеи, имевшие только текстовый режим. При таком положении вещей мерцание текста (BLINK) было, пожалуй, единственным доступным визуальным эффектом. В противоположность этому, элемент STYLE, введенный недавно, вызывает ассоциации с программами для Windows, так как в них впервые появилось стилевое оформление текста, которое теперь невероятно популярно и без него уже немыслима работа в таких приложениях, как Word или Excel.