Лекция: Стили форматирования

Для выделения текста в HTML – документах могут быть использованы различные стили шрифтов. С помощью контейнера <В>...</В>можно установить жирный шрифт, теги , устанавливает наклонный шрифт, контейнер ...задает подчеркнутое написание символов, а теги <TT>...</TT> — шрифт фиксированной ширины. Допускается также использование в тексте верхних и нижних индексов соответственно с помощью контейнеров …  и .... Результатом форматирования будет уменьшенный и сдвинутый вверх или вниз текст. Контейнер тегов <STRIKE>...</STRIKE> перечеркивает текст горизонтальной линией. Контейнер тегов <BIG>...</BIG> позволяет вывести текст шрифтом большего размера. Контейнер тегов ... позволяет вывести текст шрифтом меньшего размера. Использование различных стилей форматирования текста наглядно иллюстрирует следующий пример:

<HEAD>
<TITLE>Форматирование текста в HTML</TITLE>

</HEAD>
<BODY>
Это полужирное начертание текста.

Это курсив.

<TT>Моноширинный шрифт, или, как его еще называют, телетайп.</TT>

Горизонтальная линия получается при использовании тега <HR>

<HR>
Допускается также использование в тексте вepxниx и нижних индексов соответственно.

<STRIKE>
Этот текст перечеркнут горизонтальной линией.

</STRIKE>
Этот текст напечатан шрифтом <BIG>большего размера.</BIG>

Этот текст выведен меньшего размера.

А этот текст подчеркнут.

</BODY>
</HTML>

Пример данного листинга представлен на рисунке 8.

Рисунок 8 – Форматирование текста шрифтов

Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег  с атрибутом size="...", его можно переопределить. Используются как относительные размеры шрифтов, так и абсолютные. Следующий пример иллюстрирует установку размера шрифта:

<HTML>
<HEAD>
<TITLE>Изменение размера шрифта.</TITLE>

</HEAD>
<BODY>
Paзмер шрифта равен 7.

Paзмер шрифта равен 6.

Paзмер шрифта равен 5.

Paзмер шрифта равен 4.

Paзмер шрифта равен 3.

Paзмер шрифта равен 2.

Paзмер шрифта равен 1.

</BODY>
</HTML>

Пример данного листинга представлен на рисунке 9.

Рисунок 9 – Установка шрифтов

Кроме абсолютных значений размеров шрифта в HTML можно использовать и относительные размеры. Если в теге <BASEFONT> установить параметр size равным какому-либо числу, то браузер будет использовать указанный размер как базовый. По умолчанию базовый размер равен трем. Относительно этого базового размера можно указывать размер шрифта текста, который заключен в контейнере тегов . Для этого достаточно присвоить атрибуту size одно из следующих значений:

— +1...+7 — увеличение шрифта на указанное количество единиц относительно базового размера;

— -1...-7 — уменьшение шрифта на указанное количество единиц относительно базового размера.

Следующий пример демонстрирует управление относительным размером шрифта:

<HTML>
<HEAD>
<TITLE>Изменение относительного размера шрифта</TITLE>

</HEAD>
<BODY>
Обычный текст. Его абсолютный размер равен 3.

Установка базового размера 5.

Увеличение до абсолютного размера, равного 12.

Уменьшение до абсолютного размера, равного 3.

</BODY>
</HTML>

Пример данного листинга представлен на рисунке 10.

Рисунок 10 – Абсолютный размер шрифта

Тег <BASEFONT> предназначен для описания исходных параметров шрифта Web-страницы. Его действие распространяется до следующего тега этого типа. Он имеет следующие атрибуты:

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

— size="..." — задает размер шрифта от 1 до 7. Базовый размер шрифта равен 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, ...; +7, -7.

— color="..." — задает цвет шрифта. Значения данного параметра рассматривались ранее. Следует отметить, что все рассмотренные атрибуты присущи и тегу .

Порядок выполнение работы

С помощью тестового редактора разработать три страницы с использованием HTML. Требования к работе:

1. Первая страница должна содержать основную информацию Web-сайта как в текстовом, так и в графическом виде в соответствии с номером варианта (номер варианта представлен в приложении А).

2. Вторая страница должна содержать прайс-лист по заданной теме, прайс-лист оформить в табличном виде.

3. Третья состоит из информации о разработчике сайта. Все три страницы необходимо связать с помощью гиперссылок.

4. Оформить страницы необходимо в едином стиле с использованием форматирования шрифтов и абзацев.

Содержание отчета

1. Титульный лист.

2. Цели и задачи лабораторной работы.

3. Задание на лабораторную работу.

4. Результаты выполненной работы.

Контрольные вопросы

1. Для создания каких приложений используется язык HTML?

2. Чем язык гипертекстовой разметки отличается от других языков программирования?

3. Какие программные средства используются для создания WEB-приложений?