Элементы форматирования на уровне блоков

К тегам блочного уровня относят:

Тег абзаца (параграфа) разделяет два абзаца пустой строкой.

<P ALIGN=LEFT|CENTER|RIGHT|JUSTIFY NOWRAP> текст </P>

Может не иметь пары </P>.

Атрибут ALIGN задает выравнивание информации.

Применение атрибута NOWRAP дает возможность писать текст без переноса слов.

 

Для центрирования текста или графики можно использовать также контейнер <CENTER>... </CENTER>

Теги заголовков (от 1-го до 6-го уровней) используются для выделения структурных частей текста.

Каждый стиль заголовка имеет свой размер. Тег <H1> имеет наибольший размер.

<H1|H2|H3|H4|H5|H6 ALIGN=...> текст </H1|H2|H3|H4|H5|H6>

Тег горизонтальной линейки предназначен для вычерчивания горизонтальной линии.

<HR ALIGN=... SIZE=... WIDTH=... NOSHADE>,

где атрибут SIZE задает толщину линии в пикселах,

WIDTH —ширину в пикселах или процентах от ширины окна браузера,

NOSHADE позволяет представить линию без тени в виде простой темной полоски.

Тег конца строки вызывает переход не новую строчку без разрыва абзаца.

<BR>

Тег <WBR> — определяет место возможного (рекомендуемого) переноса (разрыва) строки.

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

Контейнер <PRE> … </PRE> используется для отображения на экране символов табуляции, возврата каретки, дополнительных пробелов, сохраняет предварительно выполненное форматирование текста. При отображении такого текста используется моноширинный шрифт. Внутри контейнера могут использоваться другие теги форматирования.

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

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

Таблица 1 - Операторы HTML для описания списка

Нумерованный список – Ordered List	Маркированный список – Unordered List	Вложенный список	Список терминов и определений
<ol> <li>пункт списка <li>пункт списка <li>пункт списка … </ol>	<ul> <li>пункт списка <li>пункт списка <li>пункт списка … </ul>	<ol> <li> пункт списка 1 … <ul> <li> пункт списка 2 … </ul> … <li> пункт списка 1 </ol>	<dl> <dt>Название термина <dd>определение термина <dt>Название термина <dd>определение термина … </dl>

Для маркированных, нумерованных и вложенных списков могут использоваться атрибуты:

TYPE - тип маркера

Для нумерованных		Для маркированных
A	Заглавные буквы		disс	Закрашенный кружок. По умолчанию
a	Строчные буквы		circle	Незакрашенный кружок
I	Заглавные римские цифры		square	Квадратик
i	Строчные римские цифры
	Арабские цифры (по умолчанию)

START - Начальное значение для нумерованного списка при использовании арабских цифр

TITLE - Всплывающая подсказка

<OL TYPE =A TITLE ="нумерованный список" >

…

</OL>

Теги, задающие шрифт

<FONT SIZE =… COLOR =... FACE =...> текст </FONT>

SIZE — устанавливает размер шрифта, который будет использоваться текстом, содержащимся в пределах элемента FONT. Можно задать абсолютный размер шрифта, указав целое число от 1 до 7. Для шрифта можно также указывать относительный размер, присваивая атрибуту целое число со знаком (например, это может быть SIZE="+1" или SIZE="-2").

COLOR — указывает цвет, которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается символьное значение одного из стандартных цветов.

FACE — задает гарнитуру шрифта, например FACE=ARIAL.

<TT> текст </TT> — телетайпный текст (моноширинный).

<I> текст </I> — стиль с наклонным шрифтом (курсив).

<B> текст </B> — стиль с жирным шрифтом.

<U> текст </ U> — стиль с подчеркиванием текста.

<BIG> текст </ BIG> — печать текста шрифтом увеличенного размера (большего, чем окружающий текст).

<SMALL> текст </ SMALL> — печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).

<SUB> текст </ SUB> — печать текста со сдвигом вниз (нижний индекс или подстрочный).

<SUP> текст </ SUP> — печать текста со сдвигом вверх (верхний индекс или надстрочный).

<STRIKE> текст </ STRIKE> или <S> …</S> — стиль с перечеркиванием текста.

 

Специальные теги HTML

Тег <ADDRESS> используется для выделения автора документа и его адреса (например, e-mail).

<ADDRESS> Адрес-автора </ADDRESS>

 

Некоторые символы являются управляющими символами в HTML и добавляются в текст только при помощи ESC-последовательностей:

· левая угловая скобка "<" - &lt;

· правая угловая скобка ">" - &gt;

· амперсанд "&" - &amp;

· двойные кавычки """ - &quot;

Существует большое количество ESC-последовательностей для обозначения специальных символов, например "&copy;" для обозначения знака Ó и "&reg;" для значка Ò. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.

ESC-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;.

 

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

Таблица 2 - Основные теги для оформления HTML-документа

тег HTML – начальный и конечный теги всего HTML-документа

 

№	Атрибут	Функция
	version= строка	Указывается версия HTML, которая была использована для создания данного документа
	i	Заключенный в теги текст будет отображаться в курсивном начертании
тег HEAD – начальный и конечный теги заголовочной части HTML-документа
тег TITLE – начальный и конечный теги заголовка HTML-документа
тег A – начальный и конечный теги, которые позволяют создать гиперссылку (атрибут href) или идентификатор фрагмента (атрибут name) заголовка HTML-документа
№	Атрибут	Функция
	href= url	Указывается URL-адрес целевого документа гиперссылки (необходим, если это не якорь имени)
	methods= список	Задается список методов отображения, зависящих от браузера (через запятую)
	name= строка	Указывается имя идентификатора фрагмента (необходим, если это не якорь гипертекстовой ссылки)
	rel= связь	Определяется связь этого документа с целевым документом
	rev= связь	Определяется обратная связь целевого документа с данным
	target= имя	Задается имя кадра или окна отображения обозначенного ссылкой документа
	title= строка	Задается заголовок целевого документа
	urn= urn	Указывается не зависящее от места нахождения универсальное имя ресурса для данной гиперссылки
тег ADDRESS – заключенный в данные теги текст представляет собой адрес
тег B – заключенный в данные теги текст будет отображаться жирным шрифтом
тег BASE – указывается базовый URL для всех относительных URL в данном документе
№	Атрибут	Функция
	href= url	Указывается базовый URL-адрес
	target= имя	Задается использующееся по умолчанию целевое окно для всех ссылок <a> в документе. Предназначен в основном для переадресации ссылки в другие кадры. Существует четыре специальных значения: _blank, _parent, _self и _top
тег BASEFONT – указывается размер шрифта для последующего текста
№	Атрибут	Функция
	size= значение	Установка размера базового шрифта. Диапазон – от 1 до 7
тег BIG – заключенный в теги текст будет отображаться шрифтом большего размера
тег BODY – начальный и конечный теги тела документа
№	Атрибут	Функция
	alink= цвет	Установка цвета активных гипертекстовых ссылок в документе
	background= url	Указывается URL фонового изображения
	bgcolor= цвет	Установка цвета фона документа
	bgproperties= значение	Если значение равно fixed, запрещается прокрутка фонового изображения вместе с содержимым документа (IE2 и выше)
	leftmargin=значе н ие	Установка размера (в пикселах) левого поля документа (IE2 и выше)
	link= цвет	Установка цвета "непосещенных" гипертекстовых ссылок в документе
	text= цвет	Установка цвета обычного текста в документе
	topmargin= значение	Установка размера (в пикселах) верхнего поля документа (IE2 и выше)
	vlink= цвет	Установка цвета "посещенных" ссылок в документе
тег BR – разрыв текущего текстового потока и возобновление его с начала следующей строки
№	Атрибут	Функция
	clear=поле	Задается "обтекание" объекта, расположение которого указано значением данного атрибута (left, right или all). При переносе на новую строку текст будет размещаться так, чтобы объект оставался видимым
тег CENTER – размещение заключенного в теги текста по центру
тег CITE – заключенный в теги текст представляет собой цитату
тег COMMENT – Комментарий в тексте документа. Комментарии будут видимы в любом браузере. Для всех браузеров комментарий представляется в виде <!—текст комментария -->
тег DD – задается описательная часть для элемента списка определений
тег DFN – текст, заключенный в теги форматируется как определение
тег DL – создание списка определений, содержащих теги <dt> и <dd>
тег DT – задается описательно-условная часть для элемента списка определений
тег EMBED – начальный и конечный теги, которые позволяют описать встраиваемый в документ объект. В зависимости от вида встраиваемого объекта могут, помимо указанных ниже, включаться дополнительные параметры
№	Атрибут	Функция
	src= url	Указывается URL встраиваемого объекта. Этот атрибут является необходимым
	height= n	Указывается высота зоны, которую займет встроенный объект
	name= имя	Указывается имя встраиваемого объекта
	width= n	Указывается ширина зоны, которую займет встроенный объект
тег FONT – установка размера, цвета или гарнитуры заключенног в теги текста
№	Атрибут	Функция
	color=цвет	Установка цвета заключенного в теги текста
	face=список	Установка гарнитуры заключенного в теги текста (устанавливается первый из указанных в разделенном запятыми списке имен шрифтов)
	size= значение	Установка размера базового шрифта. Диапазон – от 1 до 7
тег Hn – заключенный в теги текст представляет собой заголовок уровня n. Возможные значения n – от 1 до 6
№	Атрибут	Функция
	align= тип	Указывается способ выравнивания заголовка: по левому краю (left, по умолчанию), по центру (center) или по правому краю (right)
тег HR – разрыв текущего текстового потока. В месте разрыва будет вставлена горизонтальная линейка
№	Атрибут	Функция
	align= тип	Указывается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или по правому краю (right)
	noshade	Запрещается использование объемного затенения при отображении линейки
	size= n	Установка толщины линейки равной целому числу пиксел
	width= значение
тег I – заключенный в теги текст будет отображаться в курсивном начертании
тег IMG – в текущий текстовой поток вставляется изображение
№	Атрибут	Функция
	alt= текст	Задается альтернативный текст для браузеров, не поддерживающих работу с изображениями
	Border= n	Установка толщины (в пикселах) обрамления изображений, содержащихся в гиперссылках
	controls	Добавление функций управления воспроизведением встроенных виедоклипов (IE2 и выше)
	Dynsrc= url	Задается URL-адрес видеоклипа, подлежащего изображению (IE2 и выше)
	Height= n	Задается высота изображения в пикселах
	Hspace= n	Задается размещение слева и справа от изображения областей свободного пространства шириной по n пиксел
	Ismap	Указывается, что при использовании данного тега внутри тега <a> изображение выбирается с помощью мыши
	loop= значение	Установка числа повторов воспроизведения видео. Значение может быть целым или значением infinite (IE2 и выше)
	Lowsrc= url	Указывается изображением с низким разрешением, которое браузер должен загрузить первым. За ним следует изображением, заданное атрибутом <src> (IE2 и выше)
	src= url	Указывается исходный URL изображения, подлежащего воспроизведению. Этот атрибут является необходимым
	start= начало	Указывается, когда следует воспроизвести видеоклип (варианты: fileopen или mouseover)
	Usemap= url	Указывается чувствительная к перемещению мыши область изображения
	Vspace= n	Задается размщенеие над и под изображением областей свободного пространства по n пиксел
	width= n	Указывается ширина изображения в пикселах
тег KBD – заключенный в теги текст вводится посимвольно (как при наборе с клавиатуры)
тег LINK – в заголовке (<head>) документа определяется ссылка из данного документа на другой документ
№	Атрибут	Функция
	href= url	Указывается URL-адрес гипертекстововй ссылки целевого документа
	methods= список	Задается список методов отображения для данной ссылки, зависящих от браузера (через запятую)
	rel= связь	Определяется связь этого документа с целевым документом. Для Internet Explorer 3.0 rel=style означает существование внешней таблицы стилей
	rev= связь	Определяется обратная связь целевого документа с данным
	src= url	Указывается URL внешней таблицы стилей, которая будет использоваться для форматирования документа (IE2 и выше)
	title= строка	Задается заголовок целевого документа
	type= text/css	Задается тип внешней ссылки, которая будет использоваться как внешняя каскадная таблица стилей
	urn= urn	Для целевого документа указывается универсальное имя ресурса, не зависящее от его места нахождения
тег MAP – определяется чувствительная к перемещению мыши область изображения
№	Атрибут	Функция
	name= строка	Задается имя данной области. Этот атрибут является необходимым
тег NOBR – в заключенном в теги тексте разрывы не допускаются
тег P – начальный и конечный теги абзаца
	align= тип	Задается способ выравнивания текста в абзаце: по левому краю (left), центру (center) или по правому краю (right)
тег PLAINTEXT – указывается, что остальную часть документа следует отображать без обработки, как предварительно отформатированный текст
тег PRE – заключенный в теги текст будет отображаться так. как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов
№	Атрибут	Функция
	width= n	Браузер будет размещать текст так, чтобы в строке умещалось (если возможно) n символов
тег S – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией
тег SAMP – заключенный в теги текст представляет собой шаблон
тег SMALL – заключенный в теги текст будет отображаться шрифтом меньшего размера
тег SPACER – вставить в документ разделитель (Только N3)
№	Атрибут	Функция
	type= тип	Указывается тип разделителя: vertical – между двумя строками текста помещается область пустого пространства указанного размера; horizontal – область пустого пространства указанного размера помещается между словами или символами; block – вставка прямоугольной области
	size= n	Указывается (в пикселах) ширина разделителя типа horizontal или высота разделителя типа vertical
	width= n	Указывается ширина разделителя типа block
	height= n	Указывается высота разделителя типа block
	align= значение	Указывается способ выравнивания разделителя block относительно окружающего текста.
тег SPAN – заключенный в теги текст будет форматироваться с использованием таблицы стилей (Только IE3 и выше)
№	Атрибут	Функция
	style= элементы	Для текста в заданном интервале задаются элементы таблицы стилей
тег STRIKE – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией
тег SUB – заключенный в теги текст будет отображаться как нижний индекс
тег SUP – заключенный в теги текст будет отображаться как верхний индекс
тег TT – заключенный в теги текст будет отображаться моноширинным шрифтом
тег VAR – заключенный в теги текст представляет собой имя переменной

 

Часть 2. Практические задания 1-5 (использовать таблицы 1-2).

Задание 1. Вызовите текстовый редактор БЛОКНОТ. Наберите следующий ниже текст и сохраните под именем web1.html.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка (заголовок для браузера)</TITLE>

</HEAD>

<BODY>

ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (……………………).

</BODY>

</HTML>

1.1 Задайте цвет фона и цвет текста для Web-страницы, отличные от установленных по умолчанию.

Загрузите файл web1.html в Internet Explorer. Оцените результат.