Metod_rekomendatsii_po_HTML

С помощью тега <BR> также можно вставлять пустые строки.

Предварительно форматированный текст

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

	Создание заголовков
Решение	Для создания заголовков существуют специальные теги <Hx>, где
	x – число от 1 до 6. Заключив текст между этими тегами, можно по-
	лучить заголовок соответствующего уровня.
	Пример

Выделение длинных цитат

Решение Для выделения длинных цитат внутри документа используется тег

<BLOCKQUOTE>. Текст будет выводиться с увеличенным левым полем. Пример

Создание нумерованных списков

Решение В нумерованном списке (ordered list) каждому элементу предшествует его порядковый номер. Для создания такого списка используются следующие теги: <OL> (для определения типа списка) и <LI> (для задания элементов списка). Тег <OL> имеет два параметра: start – задает число, с которого начинается нумерация (по умолчанию с 1); type – задает тип нумерации (по умолчанию арабская ну-

мерация 1,2,3,…):

type="i" – нумерация римскими малыми (i, ii, iii, …);

type="I" – нумерация римскими заглавными (I,II,III,…);

type="a" – нумерация английскими малыми (a, b, c, …);

type="A" – нумерация английскими заглавными (A, B, C,…).

21

Примеры нумерованных списков

	Создание маркированных списков
Решение	В маркированном списке (unordered list) каждому элементу спи-
	ска предшествует маркер. Для создания маркированного списка
	используются следующие теги: <UL> (для определения типа списка)
	и <LI> (для задания элементов списка). Тег <UL> имеет только пара-
	метр type, с помощью которого можно задавать вид маркера:

type="disc" – используется маркер ●;

type="circle" – используется маркер ○ (по умолчанию);type="square" - используется маркер ■.

Примеры маркированных списков

Создание многоуровневых списков

Решение Списки могут быть также многоуровневые. Например,

22

Создание бегущей строки

Решение Текст абзаца можно сделать движущимся, т. е. оформить его в виде бегущей строки. Для этого используется тег <MARQUEE>, который имеет следующие параметры: bgcolor – цвет фона; height – высоту фоновой полосы (в пикселях или процентах от высоты окна браузера); width – ширина полосы бегущей строки (в пикселях или процентах от ширины окна браузера); direction – направление бегущей строки (left – справа налево (по умолчанию), right – слева направо, up – снизу вверх, down – сверху вниз); behavior – управляет поведением бегущей строки (scroll – дойдя до края, строка уходит из поля зрения, затем появляется с противоположной стороны, slide – строка, достигнув края окна, останавливается, alternate – строка, достигнув противоположного края окна, меняет свое направление); hspace, vspace – горизонтальный и вертикальный соответственно отступы у бегущей строки (в пикселях); loop – количество переходов строки по экрану; scrollamount – скорость движения строки (в пикселях в секунду); scrolldelay – временной интервал (в миллисекундах) между шагами.

Пример

2.2. Графика в HTML-документе

Задача № 1	Вставка графического изображения
	Вставка рисунка
Решение	Для вставки рисунка используется непарный тег <IMG>, который
	имеет следующие параметры: src – обязательный параметр, указы-
	вающий путь к рисунку; width – ширина рисунка; height – высота ри-
	сунка; align – положение рисунка внутри абзаца (возможные значе-
	23

ния left, center, right, top – рисунок на уров-

не самого высокого элемента абзаца, middle – рисунок по центру строки абзаца, bottom – рисунок на уровне самого низкого элемента абзаца); alt – альтернативный текст рисунка; border – ширина рамки рисунка (при border=0 рисунок отображается без рамки); hspace – горизонтальный отступ текста от рисунка; vspace – вертикальный отступ текста от рисунка.

Пример описания рисунка с различными параметрами

Комментарий:

На веб-страницах используются в основном три формата графических изображений:

1.GIF используется для изображений, содержащих менее 256 цветов.

2.JPEG используется для изображений, содержащих более 256 цветов.

3.PNG может хранить практически неограниченное количество цветов в изображении.

Задача № 2

Решение

Создание горизонтальной линии

Добавление горизонтальной линии

Горизонтальная линия вставляется с помощью тега <HR>, который имеет следующие параметры: width – длина линии (задается в процентах от ширины окна браузера или пикселях); size – толщина линии; align – положение линии на странице (возможные значения left, right, center); color – цвет линии.

Пример вставки горизонтальных линий

24

2.3. Гиперссылки в HTML-документе

Задача № 1

Решение

Решение

Создание гиперссылки

Создание текстовой гиперссылки

Гиперссылка описывается парным тегом <A>, который имеет следующие параметры: href – обязательный параметр, указывающий путь к объекту; title – подсказка, всплывающая при наведении на гиперссылку; name – имя метки внутри документа; target – способ открытия гиперссылки (возможные значения _self – в текущем окне, _blank – в новом окне).

Пример описания текстовой гиперссылки

Создание графической гиперссылки

Для задания графической ссылки необходимо между тегами <A> и </A> вставить рисунок с помощью тега <IMG>.

Пример описания графической гиперссылки, ведущей на увеличенное изображение картинки

Комментарий:

Объектом гиперссылки может быть:

1.Локальный документ.

2.Веб-страница в сети Интернет.

3.Конкретное место (закладка, метка, якорь) документа.

4.Адрес электронной почты.

Заметка:

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

	Создание гиперссылки на адрес электронной почты
Решение	Ссылка на адрес электронный почты оформляется с помощью
	специального слова mailto:, указываемого в параметре href тега
	<A>.
	25

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

	Форматирование гиперссылки
Решение	По умолчанию текстовая гиперссылка задается синим цветом и
	подчеркивается, но возможно цвет гиперссылки задавать самостоя-
	тельно с помощью специальных параметров тега <BODY>: link –
	цвет гиперссылки, еще не посещенной; alink – цвет гиперссылки в
	момент нажатия на нее; vlink – цвет гиперссылки, уже посещенной.
	Пример задания цветов гиперссылок на странице
	В этом примере синий цвет задан еще не посещенным гипер-
	ссылкам, зеленый – активным, красный – тем гиперссылкам, кото-
	рые уже были посещены.

Решение

Задача № 2

Решение

Задание способа открытия гиперссылки

По умолчанию любая гиперссылка открывается в текущем окне. Для открытия гиперссылки в новом окне (вкладке) используется параметр target со значением _blank.

Пример задания открытия гиперссылки в новом окне

Создание гиперссылки на конкретное место документа

Создание метки в документе

Обычно при открытии страницы с помощью гиперссылки пользователь автоматически перемещается в начало этой страницы. Для перемещения по гиперссылкам в конкретную часть HTML-до- кумента используются метки (закладки, якоря). Место, в которое пользователь будет перемещаться, щелкнув по гиперссылке, отмечается с помощью параметра name тега <A>. Имя метки может быть любое: числа и буквы.

Пример тега для создания метки в HTML-документе, которая будет находиться в конце HTML-документа и будет указывать на его окончание

Метку можно вставлять в любое место HTML-документа.

26

Создание гиперссылки на метку документа

Решение	Пример оформления гиперссылки на метку		Заметка:
	в документе:		Если гиперссылка ведет
			на место в текущем
			HTML-документе,	то
			имя документа в пара-
			метре href можно	не
			указывать.

2.4. Таблицы в HTML-документе

Задача № 1		Создание простых таблиц
	Создание таблицы
Решение	Таблица	описывается	парными тегом	Комментарий:
	<TABLE>, который имеет следующие пара-
				В основном таблицы ис-
	метры: border – ширина границы таблицы
				пользуются в двух случа-
	(при border=0 таблица отображается без			ях:
	границы);	bordercolor –	цвет границы таб-	1. Размещение		части
	лицы; width – ширина всей таблицы (в пик-			данных	(абзацы,	списки,
				рисунки и т. п.) в таблич-
	селях или процентах от ширины окна про-
				ном виде.
	смотра); height – высота всей таблицы (в
				2. Табличное размещение
	пикселях или процентах от высоты окна
				всего	содержимого
	просмотра); bgcolor – цвет фона таблицы;			веб-страницы.
	background – фоновый рисунок таблицы;
	align – расположение таблицы на странице (значения left,					center,

right); cellpadding – отступ текста от границ ячеек; cellspacing – отступ табличных объектов (ячейки, строки) друг от друга.

Пример описания таблицы с различными параметрами

27

	На изображении таблицы видно, что ее содержимое находится
	вне границ самой таблицы. Так получилось потому, что в коде нет
	еще двух обязательных тегов, необходимых для создания таблицы:
	тега создания строки и тега создания ячеек.
	Формирование строк и ячеек
Решение	Любая таблица имеет определенное количество строк и одну или
	более ячеек внутри каждой из них. Для того чтобы сформировать
	строки, необходимо использовать тег <TR>, который имеет 4 пара-
	метра: align – выравнивание внутри строки (значения: left, right,
	center); valign – вертикальное выравнивание внутри строки (воз-
	можные значения: top, bottom, middle); bgcolor – цвет фона внутри
	строки; background – задает фоновый рисунок строки.
	Для формирования ячеек внутри строки служит тег <TD> с пара-
	метрами: align – задает выравнивание внутри ячейки (left, right,
	center); valign – задает вертикальное выравнивание внутри ячейки (top,
	bottom, middle); colspan – растягивание ячейки на несколько столб-
	цов; rowspan – растягивание ячейки на несколько строк; height – за-
	дает высоту ячейки (в пикселях либо в процентах от высоты таблицы);
	width – ширина ячейки (в пикселях либо в процентах от ширины
	таблицы); bgcolor – задает цвет фона ячейки; background – задает
	фоновый рисунок ячейки; nowrap – наличие или отсутствие этого
	параметра обозначает запрет или разрешение на перенос строк
	внутри ячейки.
	Пример таблицы с двумя строками, в каждой из которых по две
	ячейки. В ячейке «Строка 2 Ячейка 1» содержимое выровнено по
	центру

28

Задача № 2

Решение

Решение

Создание сложных таблиц

Объединение ячеек в пределах одной строки

Для объединения группы ячеек в пределах одной строки используется параметр colspan тега <TD>. Данный параметр растягивает ячейку таблицы на указанное количество столбцов вправо (напри-

мер, colspan=2).

Образец объединения двух ячеек первой строки на примере предыдущей таблицы

Объединение ячеек нескольких строк

Для растягивания ячейки на указанное количество строк используется параметр rowspan тега <TD>. Пример

29

Объединение строк и столбцов

Решение

В таблицах можно объединять строки и столбцы одновременно

2.5. Формы в HTML-документе

Задача № 1		Создание форм
	Создание формы
Решение	Все формы создаются тегом <FORM>, в
	рамках которого	помещаются различные

элементы формы: поле ввода, поле со списком, переключатели и т. д. Тег <FORM> имеет следующие параметры: action, где указываются адрес (URL) и имя программы, которая будет обрабатывать данные формы на сервере; method определяет, каким

Комментарий:

1. Формы – это объекты в HTML-документе для сбора информации от пользователей.

2. В одном документе может быть определено несколько форм. Одна форма не должна содержать в себе другую.

30