Оформление текстовой информации

Здесь мы рассмотрим использование тэга <font>, предложим некоторые способы для выбора шрифтов, покажем, как поступать, если компьютер, на котором Вы работаете, не имеет нужного шрифта, а также дадим ряд других советов.

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

<font size="size" face="typeface" color="text colour">

После этого тэга помещается текст, к которому должны быть применены характеристики шрифта. Текст должен завершиться закрывающим тэгом </font>.

Атрибут size имеет значение в диапазоне от 1 до 7 (значение по умолчанию ‑ 3).

Атрибут face дает возможность специфицировать название шрифта, например "Times New Roman" или "Helvetica". Вы можете специфицировать здесь альтернативные шрифты, разделяя их запятыми. Это делается для случая, когда некоторые шрифты отсутствуют на компьютере. Вы также можете предложить браузеру использовать шрифты типа serif (такой, как Times) или типа nonserif (такой, как Arial), в случае, если невозможно использовать ни один из специфицированных Вами шрифтов. Для этого используются ключевые слова serif и nonserif.

Атрибут color позволяет установить цвет текста. Например, color="0000FF" определяет синий цвет текста.

Цель этой части работы - получить основные навыки использования различных шрифтов на HTML-странице. Выполните нижеследующие задания:

1. Поместите на HTML-страницу следующий код:

<font size="3" face="Times, Palatino, serif"

color="#FF0000">Это пример № 1</font>

<br>

<font size="2" face="Arial, Helvetica, nonserif"

color="#008000">Это пример № 1</font>

<br>

<font size="5" face="Verdana, Arial, Courier, Times"

color="#FF8000">Это пример № 1</font>

2. Загрузите страницу в браузер и посмотрите, что получилось.

3. Как правило, шрифты типа serif используются для текстов, а шрифты типа nonserif используются для заголовков. Однако, если размер шрифта небольшой тексты serif могут оказаться неразборчивыми. Поэтому старайтесь не использовать минимальные размеры шрифтов. Для упражнения поместите на страницу текст с разными размерами шрифта serif и оцените возможность их легкого прочтения.

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

<font size="5">Д</font>обро пожаловать на мою страницу!

5. Для заголовков часто используют специальные тэги заголовков: <h1>, <h2>, …<h6>. Используйте следующие примеры для отображения заголовков:

<h1>Заголовок 1</h1>

<h2> Заголовок 2</h2>

<h6> Заголовок 6</h6>

Работа со списками

Имеется три основных типа списков, которые можно использовать на HTML-странице:

Неупорядоченный список имеет следующий вид:

- Яблоки зеленые

- Бананы желтые

- Апельсины оранжевые

Упорядоченный список выглядит так:

1. Запустите программу.

2. Введите имя файла.

3. Нажмите кнопку ОК.

А в списке определений каждый элемент имеет детальное описание. Например:

Париж, Франция

Столица Франции. Наиболее известные достопримечательности – Эйфелева башня и Собор Парижской богоматери.

Москва, Россия

Столица России. Наиболее известные достопримечательности – Кремль, Большой театр и Останкинская телебашня.

Лондон, Англия

Столица Англии. Наиболее известные достопримечательности – Тауэр и Биг Бен.

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

1. Создайте неупорядоченный список. Для того, чтобы сделать это, используйте тэги <ul></ul> для списка в целом и тэги <li></li> для элементов списка. Например,

<ul>

<li>Яблоки зеленые</li>

<li>Бананы желтые</li>

<li>Апельсины оранжевые</li>

</ul>

2. Загрузите страницу в браузер и посмотрите, что получилось.

3. Создайте неупорядоченный список. Он создается почти также, как и неупорядоченный, только для списка в целом используются тэги <ol></ol>, а для элементов списка - <ul></ul>. Например:

<ol>

<li>Запустите программу.</li>

<li>Введите имя файла.</li>

<li>Нажмите кнопку ОК.</li>

</ol>

4. Загрузите страницу в браузер и посмотрите, что получилось.

5. Создайте список определений. Список сам по себе создается тэгами <dl></dl>. Каждый элемент списка включает в себя терм (создается тэгами <dt></dt>) и определение терма (создается тэгами <dd></dd>). Список определений может быть закодирован следующим образом:

<dl>

<dt><strong>Париж, Франция</strong></dt>

<dd>Столица Франции. Наиболее известные достопримечательности – Эйфелева башня и Собор Парижской богоматери.</dd>

<dt><strong>Москва, Россия</strong></dt>

<dd>Столица России. Наиболее известные достопримечательности – Кремль, Большой театр и Останкинская телебашня.</dd>

<dt><strong>Лондон, Англия</strong></dt>

<dd>Столица Англии. Наиболее известные достопримечательности – Тауэр и Биг Бен.</dd>

</dl>

6. Загрузите страницу в браузер и посмотрите, что получилось.

7. Создайте вложенные списки. Например, список, который представляет собой содержание книги, может выглядеть следующим образом:

Глава 1

Раздел 1.1

Раздел 1.2

Глава 2

Раздел 2.1

Раздел 2.2

Раздел 2.3

А это код HTML, который создает подобный список:

<ol>

<li>Глава 1

<ol>

<li>Раздел 1.1</li>

<li>Раздел 1.2</li>

</ol>

</li>

<li>Глава 2

<ol>

<li>Раздел 2.1</li>

<li>Раздел 2.2</li>

<li>Раздел 2.3</li>

</ol>

</li>

</ol>

8. Загрузите страницу в браузер и посмотрите, что получилось.

9. Создайте список, который объединяет списки различных типов. В следующем примере упорядоченный и неупорядоченный списки включены в список определений. Например, так:

Цвета фруктов

- Яблоки зеленые

- Бананы желтые

- Апельсины оранжевые

Инструкция

1. Запустите программу.

2. Введите имя файла.

3. Нажмите кнопку ОК.

А это код HTML, который создает подобный список:

<dl>

<dt><strong>Types of Fruit</strong></dt>

<dd>

<ul>

<li>Яблоки зеленые</li>

<li>Бананы желтые</li>

<li>Апельсины оранжевые</li>

</ul>

</dd>

<dt><strong>Firework Instructions</strong></dt>

<dd>

<ol>

<li>Запустите программу.</li>

<li>Введите имя файла.</li>

<li>Нажмите кнопку ОК.</li>

</ol>

</dd>

</dl>

10. Загрузите страницу в браузер и посмотрите, что получилось.