1473

•перевода текста на новую строку в нутрии абзаца;

•создание разделительных линий.

Для обозначения обычных абзацев используется парный тэг <P>. Язык HTML не содержит средства для создания абзацного отступа (красной строки), поэтому тэг <P> предписывает браузеру ввод пустой строкой до и после обозначенного абзаца. Закрывающий тэг </P> не обязателен.

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

Перенос строки может осуществляться только по символам – разделители слов (например, пробелам).

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

Для разделения документа на части используют тэг проведения горизонтальных линий <HR>. Они визуально подчеркивают законченность той или иной области страницы. Тэг не является парным. До и после линии автоматически вставляется пустая строка. Параметры тега <HR> следующие:

ALIGN –выравнивает по краю или центру, имеет значения: LEFT,CENTER,RIGHT;

WIDTH – устанавливает длину линии в пикселях или процентах от ширины экрана;

SIZE – устанавливает толщину линии в пикселях;

NOSHADE – отменяет рельефность линии (закрашивает линию в черный цвет);

COLOR - указывает цвет линии, записывается как стандартным именем, так и в шестнадцатеричном формате.

Пример:

<HR ALIGN=CENTER WIDTH=50% NOSHADE>

В этом примере задается горизонтальная линия, которая занимает половину ширины окна просмотра и располагается посередине окна. Параметр выравнивания имеет смысл только в том случае, когда линия занимает не всю ширину окна.

10

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

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

Текст внутри контейнера <PRE> может содержать элементы форматирования уровня текста, кроме следующих: <IMG>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>, <BASEFONT>. Недопустимо внутри форматированного текста задавать элементы форматирования уровня блока, например, тэги заголовков. Тэг абзаца по логике вещей также не должен встречаться, однако если встречается, то будет реализовывать переход на новую строку, без образования пустой.

ЗАДАНИЕ 1.

1.В существующем документе 1.htm установить линию отделяющую первый заголовок и закрасить ее красным цветом;

2.Установить её длину на половину экрана и выровнять по

центру;

3.Изменить размер второго заголовка на больший;

4.Изменить начертание заголовка на курсив;

5.Добавить текс в документ (2-3 предложения);

6.Разделить текст на два абзаца с выравниванием по ширине.

Теги форматирования шрифта

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

Таблица 1

11

	Теги	Описание	Пример
	<B>...</B>	Выделение полужирным	Полужирный
		шрифтом	шрифт
	<I>...</I>	Выделение курсивом	Курсивный
			шрифт
	<TT>...</TT>	Выделение телетайпным	Телетайпный
		шрифтом	шрифт
	<U>...</U>	Выделение подчеркиванием	Подчеркнутый
			шрифт
	<STRIKE>...</STRIKE>	Выделение	Зачеркнутый
		перечеркиванием	шрифт
	<SUP>...</SUP>	Шрифт в верхнем индексе	Верхний индекс
	<SUB>...</SUB>	Шрифт в нижнем индексе	Нижний индекс
	<SMALL>...</SMALL>	Мелкий шрифт	Мелкий
			шрифт
	<BIG>...</BIG>	Крупный шрифт	Крупный
			шрифт

Для задания размера и цвета шрифта служит парный тэг <FONT>, он должен иметь хотя бы один из трех возможных параметров FACE, SIZE и COLOR.

Параметр FACE служит для указания типа шрифта, которым браузер будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющегося у пользователя на компьютере. Если такого шрифта не будет найдено, то будет использоваться шрифт, установленный по умолчанию. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и так далее.

Пример:

<FONT FACE="Arial Black","Helvetica","Arial">

Пример задания названия шрифта. </FONT>

В примере в качестве предпочитаемого указывается шрифт

12

Arial Black, при его отсутствии будет использован шрифт

Helvetica и так далее.

Параметр SIZE служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра.

Пример:

<FONT SIZE=6> Размер шрифта абсолютной величины

</FONT>

<FONT SIZE=5> Размер шрифта </FONT>

Параметр COLOR устанавливает цвет шрифта, который может задаваться с помощью стандартных имен, например – aqua, crimson, gold и т.д. или в шестнадцатеричном формате.

Пример:

<FONT COLOR=green SIZE=6> Текст зеленого цвета </FONT>

<FONT COLOR=#FF0000 SIZE=+1> Текст красного цвета </FONT>

Управлять цветом текста можно не только с помощью тэга <FONT>, но и используя один из параметров тэга <BODY> - TEXT. Этот тэг меняет цвет всего текста документа. Например, такая запись <BODY TEXT=Red> поменяет цвет всего текста на красный.

ЗАДАНИЕ 2.

1.Создайте документ под именем 2.htm (место расположения вашего документа папка вашей группы), содержащий текст, используя тэги принудительного перевода строки и разделения на абзацы. Выровняйте заголовок по центру, первый абзац по левому краю, второй абзац по правому краю, а остальные по ширине окна браузера;

2.Измените цвет и шрифт заголовка;

3.Добавьте в ваш документ две горизонтальные линии различной толщины с выравниванием по центру и по правому краю;

4.Установите длину горизонтальных линий: линии выровненной по центру - 50%, линии выровненной по правому краю - 75%, закрасьте одну из линий;

5.Зачеркните два любых слова;

6.Выделите два любых слова тэгами <B> и <I>;

13

7.Подчеркните несколько слов с помощью тэга форматирования;

8.Уменьшите шрифт текста первого абзаца с помощью тэга форматирования;

9.Измените шрифт второго абзаца с помощью тэга <FONT> на

Arial;

10.Измените размер третьего абзаца с помощью тэга <FONT> на

шестой;

11.Добавьте какое-либо стихотворение в конец вашего документа, используя тэг <PRE> ;

12.Результат показать преподавателю.

Списки

Списки - это элементы языка HTML, облегчающие представление информации в удобном формате. Списки используются для перечисления элементов по пунктам. В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений. Для реализации списков различных типов используются следующие тэги: <UL>, <OL>, <DL>. Любой список состоит из элементов.

Каждый элемент списка должен начинаться парным тэгом <LI> (LI - List Item, элемент списка). Тэг <LI> не нуждается в соответствующем закрывающем тэге, но его наличие возможно. Обычно браузеры при отображении документа каждый новый элемент списка начинают с новой строки.

Для создания маркированного списка используется парный тэг <UL> (UL - Unordered List неупорядоченный список) внутри которого располагаются все элементы списка. В маркированном списке для выделения его элементов используются специальные символы – маркеры списка. Вид маркеров списка определяется браузером. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, поэтому нет необходимости использовать тэги абзаца или принудительного перевода строки.

Пример:

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

<HR ALIGN=CENTER WIDTH=50% NOSHADE>

<UL type="square"> к языкам программирования высокого уровня относят :

14

<LI>Fortran</LI>

<LI>Cobol</LI>

<LI>Algol</LI> <LI>Pascal</LI> </UL>

Результат просмотра такого фрагмента HTML документа будет отображен браузером (Рисунк3).

Рисунок 3 – Пример оформления маркированного списка

Кроме элементов списка, отмечаемых тэгом <LI>, в тэге <UL> могут быть указан параметр: TYPE.

Параметр TYPE может принимать следующие значения: disc, circle, square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:

TYPE=disc – маркеры отображаются закрашенными кружками; TYPE=circle – маркеры отображаются не закрашенными кружками; TYPE=square–маркеры отображаются закрашенными квадратиками.

Для создания нумерованного списка используется парный тэг <OL> (OL - Ordered List упорядоченный список) внутри которого располагаются все элементы списка. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид

15

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

Пример:

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

<OL TYPE="A">Для создания программ нужны: <LI>текстовый редактор

<LI>компилятор <LI>редактор связей <LI>библиотека функций

</OL>

В тэге <OL> могут быть указаны параметры: TYPE и START. Параметр TYPE используется для задания вида нумерации списка

и может принимать, например, следующие значения:

TYPE=А - задает маркеры в виде прописных латинских букв; TYPE=а - задает маркеры в виде строчных латинских букв; TYPE=I - задает маркеры в виде больших римских цифр; TYPE=i - задает маркеры в виде маленьких римских цифр; TYPE=1 - задает маркеры в виде арабских цифр.

По умолчанию всегда используется значение TYPE=1, то есть нумерация при помощи арабских цифр.

Параметр START тэга <OL> позволяет начать нумерацию списка не с единицы. В качестве значения параметра всегда должно указываться натуральное число, вне зависимости от вида нумерации.

Пример:

<OL TYPE=A START=5>,

такая запись определяет нумерацию списка с прописной латинской буквы "E". Изменение вида нумерации списка и значений номеров допустимо производить и для любого элемента списка.

Тэг <LI> разрешает использовать параметры TYPE и VALUE. Параметр TYPE может принимать такие же значения, как и для тэга

<OL>.

Значение параметра VALUE позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех

16

последующих элементов.

Пример:

оформление списка начинающего свою нумерацию с римской цифры пять.

<OL TYPE="I" START="5"> Наиболее распространены три структуры данных:

<LI>Иерархическая <LI>Сетевая <LI>Реляционная

</OL>

ЗАДАНИЕ 3.

1.Создайте документ 3.htl, содержащий маркированный список, в качестве маркеров используйте закрашенные квадратики, а у одного из элементов - не закрашенный кружок;

2.В элемент с не закрашенным кружком в качестве маркера добавьте нумерованный список с маркерами в виде строчных латинских букв;

3.Измените все маркеры в маркированном списке на одинаковые;

4.Создайте документ со списком, нумерация которого начинается с восьми, в качестве маркеров используйте большие римские цифры;

5.Создайте документ со списком определений, в котором каждому термину соответствует два или более определений;

6.Создайте документ, в котором будет содержаться список с пропуском некоторых элементов.

Таблицы

Описание таблиц может располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица начинается тэгом <TABLE> и заканчивается тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержания таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тэгом <TR> и завершается

17

закрывающим тэгом. Отдельная ячейка в строке обрамляется парой тэгов <TD> и </TD> или <TH> и </TH>. Первая пара обычно используется для ячеек-данных, а вторая пара - для ячеек-заголовков таблицы. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейке. Содержимое ячеек типа <TH> отображается полужирным шрифтом и располагается по центру.

Тэги <TD> и <TH> не могут появляться вне описания строки таблицы <TR>. Закрывающие тэги </TR>, </TD>, </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг </TABLE> таблицы не может быть опущен.

Количество строк в таблице определяется числом открывающих тэгов <TR>, а количество столбцов - максимальным количеством тэгов <TD> или <TH> среди всех строк. Часть ячеек могут не содержать данных, такие ячейки описываются парой следующих подряд тэгов <TD>, </TD>..

Таблица может иметь заголовок, который заключается в пару тэгов <CAPTION>, </CAPTION>. Описание заголовка таблицы должно располагаться внутри тэгов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тэгов <TR>, <TD>, <TH>. Согласно спецификации языка HTML расположение заголовка строго регламентировано: оно должно располагаться сразу же после тэга <TABLE> и до первого <TR>.

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

Перечисленные тэги могут иметь параметры, число и значения которых различны.

Этих сведений достаточно для построения элементарных таблиц.

Пример:

построение простейшей таблицы с использованием перечисленных тэгов, результат работы браузера см. рисунок 4

:

<HTML> <HEAD>

<TITLE>СТРУКТУРА ТАБЛИЦЫ</TITLE> </HEAD>

<BODY>

18

<TABLE>

<TR> <TD>Марка автомобиля</TD> <TD>Стоимость тех. осмотра </TD> </TR> <TR> <TD>Волга</TD>

<TD>1598 руб.</TD> </TR> <TR> <TD>BMV</TD> <TD>3569 руб.</TD> </TR> </TABLE> </BODY> </HTML>

Рисунок 4 – Пример оформления простейшей таблицы

Тэг заголовка <CAPTION> имеет единственный допустимый параметр ALIGN, принимающий значения TOP (заголовок над таблицей) или BOTTOM (заголовок под таблицей). Параметр ALIGN может быть опущен, что соответствует значению ALIGN=TOP. В горизонтальном направлении заголовок таблицы всегда располагается по ее центру. Таблица может не иметь заголовка. Между тэгами <CAPTION> и </CAPTION> допустимо записывать любые HTML-элементы, употребляемые в разделе <BODY>.

Браузер MS Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, CENTER и RIGHT для горизонтального выравнивания. Например, запись ALIGN=RIGHT обеспечит расположение заголовка, прижатого к правой стороне и размещенного над таблицей.

19