2. Ввод и форматирование текста
2.1. Разметка документа
Разметка документа предполагает разбиение текста на абзацы и страницы, позиционирование абзацев и выравнивание текста в абзацах, формирование заголовков разных уровней.
Заголовки внутри документа
В языке HTML заголовки подразделяются на шесть различных уровней и представляют собой фрагменты текста, которые выделяются на экране при отображении страницы браузером. Для разметки заголовков используется тег
<hn [параметры]> , где
n =1,…,6 – параметр, задающий уровень заголовка и определяющий размер шрифта (n=1 задает самый крупный шрифт).
При использовании тега заголовка до и после текста заголовка вставляется пустая строка. В качестве параметра используется, чаще всего, параметр выравнивания заголовка:
.
Фигурные скобки означают, что в конкретном случае должно быть выбрано одно из перечисленных значений. Например, заголовок
<h1 align=center> Глава 1. Основы HTML </h1>
будет выполнен самым крупным полужирным шрифтом и разместится по центру страницы.
Выравнивание и отступы
Документ можно разбить на отдельные абзацы с помощью тега
<P [параметры]>,
где в качестве параметра можно указать параметр align, принимающий одно из вышеуказанных значений или значение iustify – выравнивание по ширине (абзац будет иметь ровные правый и левый край). По умолчанию текст выравнивается по левому краю. Браузеры обычно отделяют абзацы друг от друга пустой строкой.
Если для какого-либо абзаца требуется увеличить отступ слева, можно применить тег
<blockquote> текст абзаца </blockquote>
Горизонтальные линии
Горизонтальные линии позволяют разделить документ, визуально выделяя различные его части. Тег, позволяющий провести рельефную горизонтальную линию, имеет вид:
<hr [параметры]>,
где в качестве параметров используются:
align – выравнивание на странице (значения указаны выше),
size = "толщина линии в пикселях",
width = "ширина на экране, в пикселях или в процентах от ширины экрана",
noshade – отказ от объемного вида линии.
Тег <hr> не требует закрывающего элемента, т.к. выполняет самостоятельную задачу, не воздействуя на какой-либо фрагмент документа.
Пример разбиения текста на абзацы, выравнивания абзацев и создания горизонтальной линии приведен на рис. 2-1.
Первый абзац примера выравнивается по умолчанию – влево. Горизонтальная линия толщиной 5 пикселей и шириной треть экрана выравнивается по центру. Второй абзац выровнен по ширине. Для третьего абзаца создан дополнительный отступ слева.
2.2. Форматирование шрифта
В языке HTML предусмотрены различные возможности задания цветового и шрифтового оформления, как для всего документа, так и для отдельных фрагментов текста документа. Тег <body> , определяющий тело документа, позволяет задать цвет текста и фон3 для всего документа:
<body text="цвет текста" bgcolor="цвет фона">
Тег <basefont> задает тип, размер и цвет шрифта для всего документа:
<basefont face = "тип шрифта" size = "размер шрифта" color = "цвет шрифта>
Установленные этими тегами параметры являются параметрами, действующими на весь документ. При необходимости внутри тела документа они могут быть изменены применением тега – контейнера
<font [параметры]> фрагмент текста </font>.
Действие тега распространяется на тот текстовый фрагмент, который охватывается открывающим и закрывающим элементами тега, поэтому ни в коем случае не следует пропускать закрывающий элемент. Его отсутствие приведет к тому, что действие тега распространится на последующий текст.
Параметры тегов форматирования шрифта.
face = "тип шрифта" - параметр служит для указания типа шрифта (гарнитуры), которым браузер пользователя будет выводить текст, если такой шрифт имеется на компьютере. Значением данного параметра служит название шрифта. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Список шрифтов просматривается слева направо. Если шрифта из списка не будет найдено, то будет использован шрифт, установленный обозревателем по умолчанию. Пример использование различных типов шрифта приведен на рис. 2-2.
HTML – код |
<body> Этот текст записан шрифтом по умолчанию.<br> <font face="arial"> Этот текст записан шрифтом Arial.<br>. </font> <font face="verdana"> Этот текст записан шрифтом Verdana.<br> </font> <font face="time roman"> Этот текст записан шрифтом Time Roman.<br> </font> <font face="arial","verdana","time roman"> Этот текст записан либо первым подошедшим шрифтом, либо шрифтом по умолчанию.<BR> </font> </body> |
Вид на экране обозревателя |
Текст, записанный шрифтом по умолчанию. Этот текст записан шрифтом Arial. Этот текст записан шрифтом Verdana. Этот текст записан шрифтом Time Roman. Этот текст записан либо первым подошедшим шрифтом, либо шрифтом по умолчанию |
Рис. 2-2. Вывод текста различными шрифтами
HTML – код |
<body bgcolor="f1f1f1" text="black"> <h4>Примеры задание размеров шрифта абсолютным значением</h4> <font size=1>размер шрифта 1</font><br> <font size=2>размер шрифта 2</font><br> <font size=3>размер шрифта 3</font><br> <font size=4>размер шрифта 4</font><br> <font size=5>размер шрифта 5</font><br> <font size=6>размер шрифта 6</font><br> <font size=7>размер шрифта 7</font><br> </body> |
Вид на экране обозревателя |
|
Рис. 2-3. Вывод текста разными размерами шрифта |
Размер шрифта указывается как абсолютной величиной, так и относительной. Пример HTML- кода, в котором размер шрифта задается в относительных единицах, приведен на рис. 2‑4.
HTML – код |
<body bgcolor="#f1f1f1"> <basefont size="5" color="black" > <h3>Задание размера шрифта по отношению к базовому</h3> <font size= -4>Размер шрифта 1</font><br> <font size= -3>Размер шрифта 2</font><br> <font size= -2>Размер шрифта 3</font><br> <font size= -1>Размер шрифта 4</font><br> <font size= -0>Размер шрифта 5</font><br> <font size= +1>Размер шрифта 6</font><br> <font size= +2>Размер шрифта 7</font><br> <font size= +3>Размер шрифта 7</font><br> </body> |
Вид на экране обозревателя |
|
Рис. 2-4. Использование относительных размеров |
<basefont size="5" color="black" > определяет текущий размер и цвет шрифта. Относительно установленного размера далее локально изменяется размер шрифта для каждой строки текста. Следует отметить, что в последней строке кода размер оказывается больше 7 (5+3 = 8), что приводит к выводу последней строки таким же шрифтом, как в предыдущей строке.
Опытные дизайнеры не рекомендуют использовать в документе большое число различных "экзотических" шрифтов. Во-первых, некоторые шрифты могут отсутствовать на компьютере пользователя, что приведет к нарушению логики построения и вида страницы. Кроме того, документ, содержащий множество шрифтов, трудно воспринимается визуально. Считается, что на странице должно быть не более 2-4 шрифтов – этого вполне достаточно для основного текста, заголовков, подписей к рисункам и т.д.
color = "цвет " – параметр, задающий цвет шрифта, одним из следующих способов:
Первый вариант предусматривает задание названия цвета (предопределенные имена в стандарте языка HTML), например: "red", "yellow" и т.д.
Второй вариант использует шестиразрядный шестнадцатеричный код цвета, перед которым указывается символ #. В качестве цветовой модели используется модель RGB, в основе которой лежат три цвета: Red - красный, Green - зеленый, Blue – синий. Для задания интенсивности каждой из составляющих отводится два разряда кода, что позволяет задать значения от 00 до FF (в десятичной системе от 0 до 255). Например, код #FF0000 означает, что красная составляющая цвета имеет максимальное значение (в десятичной системе равное 255), т.е. максимальную яркость. Остальные составляющие цвета отсутствуют. Следовательно, данный код соответствует ярко-красному цвету. Изменяя значения интенсивности отдельных составляющих цвета можно получить более 16 миллионов различных оттенков цвета. Например: #0000FF – ярко-синий, #00FF00 – ярко-зеленый, #00FFFF - голубой, #000000 – черный, #FFFFFF – белый.
2.3. Создание списков
В языке HTML предусмотрен специальный набор тегов для представления информации в виде списков: можно создать маркированный, нумерованный списки и список определений. В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров определяется браузером. На базе перечисленных типов списков могут создаваться многоуровневые списки.
Структура кода для двух основных видов списка практически одинакова, отличия состоят только в параметрах тегов, реализующих эти виды списков. Теги создания маркированного и нумерованного списка представлены в таблице на рис. 2-5.
Нумерованный список |
Маркированный список |
<ol [параметры] > <li [параметры]> элемент1 <li [параметры]> элемент2 …. </ol> |
<ul [параметры] > <li [параметры]> элемент1 <li [параметры]> элемент2 … </ul> |
Рис. 2-5. Коды формирования списков |
|
Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя, таким образом, список от остальных элементов документа.
Нумерованный список |
Маркированный список |
Start = обозначение первого элемента |
|
Рис. 2-6. Параметры тегов формирования списков |
|
Каждый элемент списка должен начинаться тегом <LI> (закрывающий элемент может отсутствовать). Браузеры обычно каждый новый элемент списка начинают с новой строки. Параметры нумерованного и маркированного списков представлены в таблице на рис. 2-6.
Параметр Type в обоих видах списка задает тип обозначений элементов, причем вид маркера в маркированном списке может отличаться для различных обозревателей.
Параметр Start в нумерованном списке всегда имеет числовое значение, которое задает порядковый номер обозначения для первого элемента. Параметр Type может использоваться в теге <LI>, изменяя обозначение текущего элемента списка. Параметр Value может использоваться в теге <LI> нумерованного списка, изменяя вид номера текущего элемента с изменением нумерации следующих элементов:
Value = "номер обозначения текущего элемента"
Примеры действия параметров в различных видах списка приведены в таблице на рис. 2-7.
<ul type="square"> <li>элемент 1</li> <li type="circle">элемент 2</li> <li>элемент 3</li> </ul> |
|
<ol type="1" start="3"> <li >элемент 1</li> <li >элемент 2</li> <li >элемент 3 </li> <li value="7" >элемент 4 </li> <li >элемент 5 </li> </ol> |
|
Рис. 2-7. Действие параметров на вид списка |
|
В нумерованном списке первый элемент имеет номер 3 за счет параметра Start = 3. Начиная с четвертого элемента списка, нумерация меняется за счет применения параметра Value. Комбинируя приведенные виды списков, можно реализовать многоуровневые структуры списков, когда один список вкладывается в другой независимо от типа. Список долее низкого уровня вложения будет отображаться в обозревателе смещенным вправо относительно списка предыдущего уровня.
Язык HTML позволяет создать особый вид списка – список определений. Списки определений задаются с помощью тега-контейнера <DL> и состоят из определяемого термина, перед которым ставится тег <dt> и абзаца с его определением, которому предшествует тег <dd>. Как правило, текст определяемого термина, должен располагаться на одной строке. Текст, являющийся определением термина, выводится с новой строки с отступом вправо.
Описываемая структура имеет вид:
<dl>
<dt> термин
<dd> определение
…
</dl>
Примеры создание вложенного списка и списка определений приведены на рис 2-8.
Вложенный список |
|
<ol> <li>элемент 1 <ul> <li>элемент 1-1</li> <li>элемент 1-2</li> <li>элемент 1-3</li> </ul> <li>элемент 2 <ul type="square"> <li>элемент 2-1</li> <li>элемент 2-2</li> <li>элемент 2-3 </li> </ul> </ol> |
|
Список определений |
|
<body> <dl> <dt>Квадрат</dt> <dd>Прямоугольник, имеющий равные стороны</dd> <dt>Ромб</dt> <dd>Параллелограм с равными сторонами </dd> </dl> </body> |
|
Рис. 2-8. Код вложенного списка и списка определений |
|
Если же требуется построить список с графическими маркерами4, то можно обойтись без тега <LI>. Достаточно перед каждым элементом списка вставить необходимый графический маркер. Для того чтобы отделить элементы списка друг от друга можно использовать принудительный перевод строки <BR>.
<ul> ♣Элемент 1<br> ♥Элемент 2<br> ♠Элемент 3<br> </ul> |
|
Рис. 2-9. Графические маркеры списка |
|
В примере на рис. 2-9 в качестве маркеров используются специальные символы, имеющие предопределенные имена.