Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
shpory_po_informatike.doc
Скачиваний:
0
Добавлен:
26.12.2019
Размер:
947.2 Кб
Скачать

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

  • Стандартные логические стили

  • Управление шрифтом

  • Цвет

  • Текст заданного формата

  • Списки

  • Разделительные полосы

  • Бегущая строка

  • Специальные и зарезервированные символы

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

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

При оформлении текстов используются специальные тэги. Рассмотрим некоторые из них. Тэг <BR> предписывает переход на новую строку. Тэг <Р> является тэгом конца абзаца. После него текст будет выводиться с новой строки и, кроме того, одна строка будет пропущена. Если не использовать эти тэги, то разбиение текста на строки будет определяться шириной окна браузера, так что вид текста может оказаться совсем не таким, каким вы его представляли. Если вы хотите, чтобы текст выравнивался по центру окна браузера, используйте тэг <CENTER>, который упоминался в предыдущей главе. Заметим, что тэги <BR> и <Р> действуют не только на тексты, но и на другие элементы страницы. Например, если вы хотите, чтобы рисунок размещался ниже текста, то поставьте между текстом и тэгом рисунка <BR> или <Р>.

Стандартные логические стили

Для выбора размера шрифта можно использовать тэги так называемых логических стилей. Их всего шесть и обычно они используются для определения заголовков различного уровня. При переходе от первого стиля к шестому постепенно уменьшаются размер и толщина букв шрифта. Тэги логических стилей записываются как <Н1>, <Н2>,..., <Н6>.Каждый из них имеет соответствующий закрывающий тэг. Например, тэгу <Н1> соответствует закрывающий тэг </Н1>. Например, запись

<Н1>Заголовок 1-го уровня </Н1>

задает вывод текста Заголовок 1-го уровня шрифтом, соответствующим первому логическому стилю.

Заметим, что логический стиль определяет стиль текста сообразно настройкам браузера. При этом текст со стилем <Н2> всегда будет «меньше», чем со стилем <Н1>, если, конечно, автор страницы не переопределил его по своему усмотрению. Дело в том, что вы имеете возможность переопределить установки по умолчанию. Для этого используются средства каскадных таблиц стилей (CSS).

Следующая программа демонстрирует использование тэгов логических стилей:

<HTML>

<HEAD> <TITLE> Основные элементы HTML </TITLE></HEAD>

<BODY>

<Н1>Заголовок 1-го уровня </Н1>

<Н2>Заголовок 2-го уровня </Н2>

<Н7>Заголовок 7-го уровня </Н7>

</BODY>

</HTML>

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

Заголовки различных уровней;

заголовок уровня i (1=1,2,..., 7) задается тегом <Hi>

Управление шрифтом

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

Полужирный (Bold) <В>

Курсив (Italic) <I>

Подчеркнутый (Underscore) <U>

Вычеркнутый (Strike ) <S>

Пишущая машинка (Typewriter) <TT>

Мерцающий (только для браузера Netscape Navigator) <BLINK>

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

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

Изменение стиля шрифта части заголовка

С помощью специального тэга <FONT> можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. Тэг основного шрифта имеет формат <BASEFONT SIZE=>. Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тэг, то размер основного шрифта по умолчанию устанавливается равным 3.

Тэг <FONTSIZE=размер_шрифта> устанавливает размер текущего шрифта для отдельных фрагментов текста. На стили этот тэг не влияет. Диапазон возможных значений — от 1 до 7. Данный тэг позволяет также управлять размером текущего шрифта относительно основного. Для этого используются символ + (чтобы увеличить) и символ - (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тэг <FONT SlZE=+2> устанавливает размер текущего шрифта равным 5.

Для задания гарнитуры шрифта используется тэг <FONT РАСЕ="имя_шрифта">. Например:<FONT FACE="Arial">

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

Вы можете в тэге <FONT> указать через запятую перечень шрифтов. В этом случае браузер будет использовать первый найденный шрифт. Например, можно записать тэг: FACE="Arial, Sans Serif, Courier">

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

С помощью атрибута COLOR в тэге <FONT> можно задать цвет шрифта: <FONT СОLOR="цвет">

Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей). Следующая программа демонстрирует управление шрифтом:

<HTML>

<НЕАD><ТIТLЕ>Установка шрифтов</ТIТLE/НЕАD>

<BODY>

<Р>Шрифт Aria <FONT FАСЕ="АRIАL">АБВГДЕЖЗИК </FONT>

<Р>Шрифт Courier<FONT FАСЕ="СOURIER">АБВГДЕЖЗИК </FONT>

<Р>Шрифт SYMBOL<FONT FACE="SYMBOL" SIZE=7 СОLОR="RЕD">АБВГДЕЖЗИК

</FONT>

</BODY>

</HTML>

Использование различных шрифтов

Заметим, что в тэге <FONT> можно использовать несколько или все его возможные атрибуты. Например:

<FONT FACE="Arial" SIZE=5 COLOR="BLUE">

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

<HTML>

<НЕАD><Т1ТLЕ>Индексы</ТIТLЕ> /НЕАD>

<BODY>

<НЗ>Пример использования индексов

<Р> (5+x<SUP>2</SUP>)<SUP>x+3</SUP>

<P>a<SUB>1</SUB> + a<SUB>2</SUB>+ a<SUB>3</SUB>

<Р>Подстрочные примечания <SUP>2</SUP>

</H3>

</BODY>

</HTML>

Использование верхних и нижних индексов

Кроме рассмотренных выше, имеются дополнительные тэги форматирования текстов:

<ADDRES> — выделение адресов электронной почты, почтовых адресов и

номеров телефонов;

<СIТЕ> — выделение цитат;

<CODE>, <SAMP> — запись текстов программ, символьных констант;

<KBD> — ввод текстов с клавиатуры.

В последних трех стилях используется моноширинный шрифт (обычно Courier). Например, буквы I и Ж моноширинного шрифта занимают одинаковое место. Использование моноширинных шрифтов обусловлено простой возможностью выравнивания текста с помощью символов «пробел».

Отметим еще один момент. В тэги управления шрифтом, как и в тэги логических стилей, можно вставлять атрибут ТITLE= "строка", что позволяет привязать к тексту внутри этого тэга всплывающую подсказку. Аргументом атрибута TITLE является строка подсказки. При остановке указателя мыши на выделенном слове или фразе около указателя появится подсказка. С помощью этого приема можно расшифровывать аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.

Цвет

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

Цвет фона определяется атрибутом BGCOLOR тэга <BODY>. Например, тэг, задающий цвет фона #FF1230, имеет вид:<BODY BGCOLOR="#FF1230">

Тэг, задающий желтый цвет фона, имеет вид:<BODY BGCOLOR="YELLOW">

Можно задать и цвет текста. Этой цели служит атрибут TEXT тэга <BODY>. Тэг, приведенный ниже, задает зеленый цвет фона и синий цвет текста:<BODY BGCOLOR="GREEN" TEXT="BLUE">

Как уже было сказано, цвет можно указывать по имени и шестнадцатеричным кодом. Ниже приводится таблица соответствий некоторых имен цветов и их шестнадцатеричных представлений:

Цвет Имя цвета Шестнадцатеричное представление

Черный BLACK #000000

NAVY #000089

SILVER #COCOCO

Синий BLUE #OOOOF

MAROON #800000

Пурпурный PURPLE #800080

Красный RED #FFOOOO

FUCHSIA #FFOOF

Зеленый GREEN #008000

TEAL #008080

LIME #OOFFOO

AQUA #OOFFF

OLIVE #808000

Серый GRAY #808080

Желтый YELLOW #FFFFOO

Белый WHITE #FFFFFF

Текст заданного формата

Браузер обычно преобразует текст HTML-файла при выводе его на экран, т. е. игнорирует лишние пробелы, символы табуляции и символы конца строки. Если вы хотите, чтобы текст на экране выглядел так, как вы его ввели в документ HTML, то воспользуйтесь тэгом предварительного форматирования <PRE>. Текст должен находиться между тэгами <PRE> и</РRЕ>.

СпискиДовольно часто требуется разместить на странице списки (перечни элементов). Списки бывают упорядоченными (по алфавиту или по возрастанию/убыванию номера) и неупорядоченными. При отображении списков браузер выделяет их отступом от края страницы. Кроме того, списки могут быть вложенными.

Упорядоченные списки задаются тэгом <OL>, а неупорядоченные — тэгом <UL>. Оба эти тэга парные, т. е. контейнерные.

Для упорядоченных списков можно выбрать способ индексации. Это делается с помощью атрибута TYPE с аргументами: 1 (арабские цифры), А (прописные буквы), а (строчные буквы), i (римские цифры). Можно задать номер, с которого начинается нумерация элементов списка. Для этого служит атрибут START внутри тэга <OL>.

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

Бегущая строка

Internet Explorer поддерживает тэг <MARQUEE>, который позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:

WIDTH — ширина поля бегущей строки в пикселах или процентах от ширины окна;

HEIGHT — высота поля бегущей строки (в пикселах);

HSPACE, VSPACE — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах);

ALIGN —положение текста бегущей строки в ее поле; возможные аргументы:

ТОР (вверху);

BOTTOM (внизу);

MIDDLE (посередине);

DIRECTION — определяет направление движения; возможные аргументы:

LEFT (справа налево);

RIGHT (слева направо);

BEHAVIOR — характер движения строки; возможные аргументы:

SCROLL — текст появляется от одного края и скрывается за другим;

SLIDE — строка вытягивается из одного края поля и останавливается у другого края;

ALTERNATE — задаетпеременноенаправлениедвижения, отодного края к другому, а затем обратно;

LOOP — количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова INFINITY.

Атрибут LOOP не влияет на поведение бегущей строки, если для атрибута BEHAVIOR заданы аргументы ALTERNATE или SLIDE;

SCROLLAMOUNT — устанавливает длину (в пикселах) «прыжка» те кета за один такт; при большом значении этого параметра текст движется рывками, а при малом — замедленно;

SCROLLDELAY — определяет величину паузы между тактами перемещения текста в миллисекундах;

BGCOLOR — устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]