Экгауз, лекциии семинар, КР / Дополнительный материал к лекциям и семинарам / информационные технологии

Как верхний индекс отображается текст, заключенный между тегами :

<SUP> ... </SUP> (от английского superscript)

Параметры шрифта

Текст, заключенный между тегами <FONT ... > ... </FONT> имеет размер, цвет и гарнитуру, задаваемую атрибутами

SIZE = значение	размер;	задается либо в форме абсолютного значения
	(число	от 1 до 7), либо	относительно размера
	основного шрифта (в форме +n		или -n).
COLOR = цвет	цвет.
FACE = список шрифтов	предпочтительные гарнитуры для отображения текста;
	названия перечисляются через запятую, например,
	FACE="Verdana,Helvetica,Arial,Sans-Serif"

Форматирование абзацев

Фактически, форматирование абзацев, предусмотренное в стандартах HTML,

сводится лишь к выравниванию Вид выравнивания может быть задан следующими тегами:

<P> ... </P> (абзац - см. Разбиение текста) и <DIV> ... </DIV> (раздел) с

помощью атрибута ALIGN, который может принимать значения LEFT, CENTER и RIGHT , задающие выравнивание по левому краю, центру и правому краю окна браузера.

По центру будет выровнен и текст, заключенный в теги <CENTER> ...

</CENTER>.

Применение закрывающего компонента для всех этих тегов, вообще говоря, не обязательно. Если закрывающего компонента нет, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, либо до конца документа.

Списки

HTML позволяет создавать нумерованные (упорядоченные), маркированные

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

<OL> ... </OL> упорядоченный список (от английского ordered list)

<UL> ... </UL> неупорядоченный список (от английского unordered list) <DL> ... </DL> список определений (от английского definition list)

Каждый элемент упорядоченного или неупорядоченного списка заключается в теги

<LI> ... </LI> (от английского list item). Элементы списка определений заключается в теги <DT> ... </DT> (термин) либо <DD> .. </DD> (определение). При выводе текста браузер располагает каждый элемент списка с новой строки, предваряя его номером либо маркером в случае упорядоченного или неупорядоченного списка.

В списке определений текст, заключенный между тегами <DD> ... </DD>,

сдвигается на некоторое количество позиций (в разных браузерах по-разному) вправо относительно остального текста. Это свойство можно с успехом использовать и в том случае, когда по существу никакого списка нет, а просто надо сдвинуть ряд строк правее

основного текста.

Допустимы вложенные списки.

Тег <OL> имеет необязательные атрибуты :

TYPE = формат		формат нумерации; может иметь значения:
			арабские цифры (по умолчанию)
			прописные буквы
			строчные буквы
			большие римские цифры
			маленькие римские цифры
START = значение		первый номер в списке (по умолчанию 1)

Тег <UL> имеет необязательный атрибут

TYPE = формат	формат маркера; может иметь значения:
	Disc	диск (по умолчанию)
	Circle	окружность
	Square	квадрат

Заголовки разных уровней внутри текста

Теги вида <Hn> ... </Hn> оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня выводится наиболее крупным шрифтом.

Теги <H1> , <H2>, ... , <H6> могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и CENTER.

Графические изображения

Тег <IMG> вставляет изображение в текстовый поток. Закрывающего компонента

этот тег не имеет.

Обязательный атрибут:

SRC = url	адрес графического файла
Основные необязательные атрибуты:
ALT = текст	альтернативный текст, выводимый в режиме браузера без
	загрузки изображений
BORDER = значение	толщина обрамляющей рамки в пикселах;							0 означает
	отсутствие рамки (по умолчанию)
HEIGHT = значение	высота	изображения		в	пикселах		(по	умолчанию
	оригинальная) либо в процентах от высоты окна браузера
WIDTH = значение	ширина	изображения		в	пикселах		(по	умолчанию
	оригинальная) либо в процентах от ширины окна браузера
HSPACE = значение	свободное пространство слева и справа от изображения в
	пикселах
VSPACE = значение	свободное пространство сверху и снизу от изображения в
	пикселах
ALIGN = значение	выравнивание изображения по горизонтали или вертикали.
	Значения TEXTTOP, ABSCENTER, CENTER, BOTTOM,
	ABSBOTTOM		обеспечивают			различные		варианты
	вертикального		выравнивания относительно					текстовой
	строки;	при	применении этих			значений		вставленное
	изображение разрывает текстовый поток.
	Если заданы значения			LEFT либо			RIGHT, изображение
	соответствующим образом будет выровнено по горизонтали;
	задание этих значений обеспечивает обтекание изображения
	текстом
USEMAP = #имя	указывается имя, задаваемое в теге MAP, задающем в данном
	изображении области, чувствительные к щелчку мыши

Несмотря на то, что формально обязательным является только атрибут SRC, на практике необходимо следует указывать и альтернативный текст (атрибут ALT). Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая, и документ загружается долго. К тому же, до сих пор существуют браузеры, не поддерживающие графики.

Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать явным

образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и WIDTH

говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества.

Масштабирование изображений в сторону увеличения применяется в особых случаях,

когда необходимо вывести цветные полосы либо прозрачные "распорки" строго определенной ширины и высоты. При этом достаточно изготовить изображение размером 1х1 пиксел (нужного цвета или прозрачное) и вставить в документ, задав необходимые размеры.

А вот сильно уменьшенные варианты изображений используют довольно часто,

например, для создания каталога миниатюр, каждая из которых имеет гиперссылку на

полномасштабное изображение.

Гиперссылки

Связь между	HTML-документами и фрагментами	документов организуется с
помощью тегов <A> ... </A> (от английского anchor - якорь).
Тег <A> употребляется в двух формах.
В первом случае - при создании гиперссылки - обязательным является атрибут
HREF = url	- адрес целевого документа.
Текст и изображения, размещенные между тегами		<A> ... </A>, становятся

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

указанным как значение атрибута LINK тега <BODY> (либо цветом по умолчанию).

Из необязательных атрибутов здесь упомянем один:

TARGET = имя - имя кадра или окна для вывода целевого документа.

Во втором случае - при создании якоря (метки) фрагмента - обязателен атрибут

NAME = имя - имя идентификатора фрагмента.

Созданный в некоторой точке документа якорь служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент. При создании ссылки на этот фрагмент используется тег <A> с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #.

Вот пример совместного использования якоря и гиперссылки. Представим себе длинный документ book.htm , состоящий из нескольких глав. Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные имена, например:

.......

<A NAME="chapter1"></A> Глава 1. ........

.......

<A NAME="chapter2"></A> Глава 2. ........

.......

Теперь можно создать гиперссылки из этого же документа или из любого другого на указанные фрагменты. Приведем, например, гиперссылки на точку документа, с

которого начинается Глава 2.

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

<A HREF="#chapter2">переход к Главе 2</A>

Гиперссылка из другого документа, находящегося в том же каталоге: <A HREF=" book.htm#chapter2">переход к Главе 2</A>

Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком; для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег <MAP>,

реализующий чувствительное изображение-карту (см. раздел Изображение-карта).

Таблицы

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

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

изображения и фрагменты текстов в ячейки таблицы с невидимой границей, можно добиться эффекта обтекания изображения текстом, расположить текст как многоколоночный и так далее.

Основные теги, используемые для описания таблиц : <TABLE> ... </TABLE> ;

<TR> ... </TR> ; <TD> ... </TD>. Все табличные данные заключаются в теги <TABLE>

... </TABLE> ; описание каждого ряда ячеек заключается в теги <TR> ... </TR> ;

содержимое каждой ячейки заключается в теги <TD> ... </TD>.

Таким образом, для описания, например, таблицы из двух строк (рядов), каждая из которых содержит две ячейки, придется создать следующую конструкцию:

<TABLE>

<TR>

<TD> содержимое 1-ой ячейки первой строки </TD> <TD> содержимое 2-ой ячейки первой строки </TD>

</TR>

<TR>

<TD> содержимое 1-ой ячейки второй строки </TD> <TD> содержимое 2-ой ячейки второй строки </TD>

</TR>

</TABLE>

Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе,

в частности, текст, изображения, текст с HTML-тегами; допустимы вложенные таблицы.

Не следует оставлять ячейки таблицы незаполненными; если по замыслу web-мастера какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел

  . Ячейки, не содержащие данных, могут некрасиво выглядеть в Netscape Navigator : не отображается заданный фон и рамки ячеек.

Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом;

при достижении правой границы ячейки очередное слово переносится на новую строку.

Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN.

Теги, описывающие таблицы, имеют много атрибутов; все они необязательны.

Здесь упомянем те, которые одинаково поддерживаются браузерами Netscape Navigator

и Microsoft Internet Explorer. Учтите, что даже при использовании лишь этих атрибутов таблицы могут по-разному выглядеть в разных браузерах. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование в разных браузерах.

Атрибуты тега <TABLE> задают параметры таблицы в целом:

ALIGN = значение		Выравнивание относительно текстового потока; возможны значения
		left, right и center
BACKGROUND = url		Фоновое изображение для всей таблицы таблицы (Microsoft Internet
		Explorer 3.0 и выше и Netscape Navigator 4.0	и выше)
BGCOLOR = цвет		Фоновый цвет
CELLPADDING = значение		Расстояние от границ ячейки до ее содержимого в пикселах
CELLSPACING = значение		Расстояние между ячейками в пикселах
HSPACE = значение		Свободное пространство слева и справа от таблицы в пикселах
VSPACE = значение		Свободное пространство сверху и снизу от таблицы в пикселах
WIDTH = значение		Ширина таблицы; задается либо в пикселах, либо в процентах от
		текущей ширины окна браузера; примеры: WIDTH=256 ;
		WIDTH=100%
Атрибуты тега	<TR> задают параметры данного ряда		(при возникновении

противоречий атрибуты, заданные в теге <TABLE>, отменяются) .

ALIGN = значение	Выравнивание содержимого ячеек ; возможны значения left, right и
	center
BACKGROUND = url	Фоновое изображение для ячеек данного ряда таблицы (Microsoft
	Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет	Фоновый цвет для ячеек данного ряда
BORDER = значение	Толщина рамки, обрамляющей ячейки данного ряда; BORDER=0 -

		без обрамления
VALIGN = значение		Вертикальное выравнивание содержимого ячеек ; возможны
		значения top, center и bottom
Атрибуты тега	<TD> задают параметры данной ячейки (при возникновении

противоречий атрибуты, заданные в тегах <TABLE> и <TR> , отменяются) .

ALIGN = значение	Выравнивание содержимого ячейки ; возможны значения left, right и
	center
BACKGROUND = url	Фоновое изображение для ячейки таблицы (Microsoft Internet Explorer
	3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет	Фоновый цвет для ячейки
BORDER = значение	Толщина рамки, обрамляющей ячейку; BORDER=0 - без обрамления
VALIGN = значение	Вертикальное выравнивание содержимого ячейки; возможны
	значения top, center и bottom
WIDTH = значение	ширина ячейки; задается либо в пикселах, либо в процентах от
	ширины таблицы;
ROWSPAN = значение	указывает количество строк, охватываемых ячейкой
COLSPAN = значение	указывает количество столбцов, охватываемых ячейкой
NOWRAP	при задании этого атрибута текст не располагается автоматически в
	ячейке; отображается лишь та его часть, что умещается в видимой
	части ячейки; может появиться горизонтальная полоса прокрутки.

При работе с таблицами учтите, что указанное значение атрибута WIDTH во многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше

(в его понимании).

Изображение-карта

Иногда согласно дизайнерскому замыслу web-мастера в HTML-документ надо поместить изображение, отдельные части которого должны переводить по гиперссылке на разные целевые документы. Один из очевидных примеров такого изображения -

географическая карта, щелкнув мышкой по определенным зонам которой, мы переходим к соответствующим документам. В этом случае организовать ссылку с использованием тега <A> непосредственно нельзя, и приходится либо "разрезать" изображение на несколько отдельных, состыковать их и действовать обычным образом (см. раздел Гиперссылки), либо использовать тег <MAP>.

У тега-контейнера <MAP> единственным обязательным артибутом является его имя NAME, которое должно быть использовано при описании атрибута USEMAP тега

IMG , описывающего изображение, призванного служить картой (см. пример,

приведенный ниже). Внутри контейнера <MAP> каждой чувствительной к перемещению

мыши зоне изображения должен соответствовать тег <AREA> с атрибутами:

COORDS = список	список через запятую координат активной зоны (зависит от типа заданной формы
	зоны)
HREF = url	адрес целевого документа гиперссылки, связанного с указанной зоной
SHAPE = форма	возможные значения:
	circle (окружность – задается координатами центра и радиусом в пикселах)
	rectangle (прямоугольник - задается координатами левого верхнего и правого
	нижнего угла)
	polygon (многоугольник - задается координатами своих вершин)
NOREF	иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и
	координатами COORDS) не является активной, реакции на щелчок мыши нет

Пусть, например, у нас есть изображение russia.gif размера 358х194 пиксела и три

HTML-документа, на которые надо организовать гиперссылки : peterburg.htm, moscow.htm и yakutsk.htm .

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

Центры кружков, если принять за точку отсчета (0,0) левый верхний угол изображения, находятся примерно на уровне

(47,58) - Санкт-Петербург (координаты указаны на картинке) (46,82) - Москва

(254,91) - Якутск.

Логично в данном случае выбрать окружность в качестве формы активной зоны.

Приняв, например, радиус этой окружности равным 8 пикселам (с избытком),

реализовать гиперссылки можно с помощью следующего HTML-кода:

<IMG SRC="russia.gif" ALT="Карта России" WIDTH="358" HEIGHT="194" BORDER=0 USEMAP="#mymap">

<MAP NAME="mymap">

<AREA SHAPE="circle" COORDS="47,58,8" HREF="peterburg.htm"> <AREA SHAPE="circle" COORDS="46,82,8" HREF="moscow.htm"> <AREA SHAPE="circle" COORDS="254,91,8" HREF="yakutsk.htm">

</MAP>

Кадры

Кадры (фреймы – от английского frame) позволяют разбить окно браузера на

области, в каждую из которых можно загрузить свой HTML-документ. При описании гиперссылок в этом случае есть возможность отобразить целевой документ в любом кадре из описанного набора.

Структура HTML-документа, задающего набор кадров, отличается от простейшей,

описанной в разделе "Структура HTML-документа". Секция <HEAD> по-прежнему

присутствует, а вместо секции <BODY> , описывающей содержание одного документа,

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

<FRAMESET>	... </FRAMESET>	- описывает структуру набора	кадров;
указывает, на сколько кадров и каких пропорций надо разбить окно браузера.
<FRAME>	- для каждого кадра указывает, какой документ и с		какими
параметрами первоначально загружается в кадр.

Описание структуры набора кадров

При описании структуры набора кадров в теге <FRAMESET>	... </FRAMESET>
необходимо указать хотя бы один из атрибутов COLS или ROWS,	значения которых

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

Размеры кадров (ширина и высота) могут быть определены тремя способами:

-в пикселах;

-в процентах от ширины либо высоты окна браузера;

-каждый символ * в описании размеров интерпретируется как указание отвести для кадра равную часть от оставшегося пространства окна.

Например, описание

<FRAMESET COLS = "50,30%,*">

задает разбиение окна на три столбца, первый из которых имеет ширину 50

пикселов, ширина второго составляет 30% от всей ширины окна, а остальное пространство отдается третьему столбцу.

Описание

<FRAMESET ROWS = "20%,*,30%,*">

задает разбиение окна на четыре строки, первая из которых имеет высоту 20% от высоты всего окна, третья - 30% от высоты всего окна, а остальное пространство делится поровну между второй и четвертой строкой.

Описание

<FRAMESET COLS = "30%,*" ROWS = "60%,*">

задает разбиение окна на два столбца, ширина первого из которых составляет 30%

от всей ширины окна, и на две строки, первая из которых имеет высоту 60% от высоты всего окна. Таким образом, получаются четыре кадра.

Общий вид HTML-документа, задающего набор кадров

Описав структуру набора кадров с помощью тега <FRAMESET> , для каждого кадра надо определить тег <FRAME> , обязательный атрибут SRC которого задает адрес документа, первоначально загружаемого в кадр. Вот пример HTML-документа,

описывающего набор кадров с минимальным набором атрибутов:

<HTML>

<HEAD>

<TITLE> Пример набора кадров </TITLE> </HEAD>

<FRAMESET COLS = "50%,*" ROWS = "30%,*"> <FRAME SRC = "Frame1.htm">

<FRAME SRC = "Frame2.htm">

<FRAME SRC = "Frame3.htm">

<FRAME SRC = "Picture.jpg"> </FRAMESET>

</HTML>

Обратите внимание на то, что тег <FRAME> не имеет закрывающего компонента.

Здесь описаны четыре кадра соответствующих пропорций, в первые три из которых первоначально загружаются HTML-документы Frame1.htm, Frame2.htm и Frame3.htm, а в четвертый - графическое изображение из файла Picture.jpg. Кадры заполняются, начиная с верхнего левого, слева направо и сверху вниз, так что набор кадров в браузере имеет вид :