Гиперссылки

Гиперссылка – это указание адреса HTML-документа (или другого ресурса Интернет), к которому можно перейти от текущего документа при активизации этой гиперссылки. Для вставки ссылки в документ используются теги <A HREF=URL-адрес> и </A>, между которыми вводится текст самой ссылки, отображаемый в браузере и используемый для перехода. Он будет выделен цветом (по умолчанию – синим) и подчеркнут. Значение параметра HREF – это адрес той страницы или того ресурса, на который производится ссылка. Например:

<A HREF = http://www.spbstu.ru/mmf/index.html> </A> - ссылка на сайт ММФ.

Ссылку можно создавать и в виде графического изображения. В этом случае между тегами <A> и </A> вставляется команда <IMG>. Например:

<A HREF=”httр://www.spbstu.ru/mmf/index.html”>

<IMG SRC=”pic1.gif”></A>

Если создается ссылка на страницу, расположенную на том же сервере, что и исходная страница, то в URL не включается доменное имя. Например,

Это ссылка на страницу <A HREF=”page2.html”>page2</A>

Это ссылка на рисунок <A HREF=”image/picture.jpg”>picture</A>

В первом случае создается ссылка на страницу page2.html, расположенную в том же каталоге, что и исходный документ, во втором – создается ссылка на рисунок picture.jpg из подкаталога image.

Иногда возникает необходимость создавать так называемые внутренние ссылки, т.е. ссылки внутри страницы на отдельные разделы:

<A HREF=”#1”>Параграф 1</A><BR>

<A HREF=”#2”>Параграф 2</A><BR>

<A HREF=”#3”>Параграф 3</A><BR>

<P>

<A NAME=”1”>Параграф 1</A><BR>

(текст первого параграфа)<BR>

<A NAME=”2”>Параграф 2</A><BR>

(текст второго параграфа)<BR>

<A NAME=”3”>Параграф 3</A><BR>

(текст третьего параграфа)<BR>

Здесь Параграф 1, Параграф 2, Параграф 3 – названия разделов; 1, 2, 3 – имена закладок, на которые нужно перейти с соответствующих ссылок.

Для создания ссылки на адрес электронной почты следует добавить перед адресом запись mailto:. Например, с помощью ссылки

<A HREF = ”mailto:eurorobot@mail.ru”> здесь </A>

щелчком по слову здесь можно послать письмо по адресу eurorobot@mail.ru.

Создание списков

Для разделения текста большого объема часто используется форматирование в виде списков. Типы списков представлены в табл. 5.

Таблица 5

Типы списков HTML и соответствующие им теги

Тег	Тип списка
<OL>	Упорядоченный (нумерованный) список
<UL>	Неупорядоченный (маркированный) список
<DL>	Список определений
<MENU>	Список элементов меню (используется редко)
<DIR>	Список элементов каталогов (используется редко)

При создании нумерованного списка используется следующий синтаксис:

<OL>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

…

<LI>Последний элемент списка</LI>

</OL>

По умолчанию элементы списка нумеруются арабскими цифрами. Чтобы для нумерации использовались буквы алфавита или римские цифры, надо определить стиль форматирования следующим образом: <OL TYPE=тип START=значение>

Параметр тип может принимать значения, приведенные в табл. 6. Атрибут START используется тогда, когда нумерация списка начинается с числа, отличного от 1, или с буквы, отличной от а. Тогда параметр значение – это число, соответствующее начальному числу списка или начальной букве списка. Например, код <OL TYPE=A START=4> означает, что нумерация списка будет начинаться с четвертой буквы английского алфавита, т.е. с D.

Таблица 6

Типы нумерации упорядоченных списков в HTML

Тип	Стиль
1	Стандартный способ нумерации с помощью арабских цифр
a	Строчные буквы английского алфавита
A	Прописные буквы английского алфавита
i	Строчные римские цифры
I	Прописные римские цифры

Код неупорядоченного списка очень похож на код нумерованного списка:

<UL TYPE=тип>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

…

<LI>Последний элемент списка</LI>

</UL>

Здесь параметр тип может принимать одно из значений, приведенных в табл. 7, например: <UL TYPE=”square”>

Таблица 7

Типы маркеров для маркированных списков

Тип	Рекомендуемый внешний вид (зависит от браузера)
disc	Заполненный кружок
square	Заполненный квадратик
circle	Незаполненный кружок

В списках определений каждому термину соответствует абзац определения, оформленный с отступом. Такие списки могут использоваться, например, в каталогах с описанием товаров. Список определений содержится в контейнере <DL> </DL>, где DL – definition list. Элементы списка определений создаются с использованием тегов <DT> и <DD>, которые отмечают термин (definition term) и его определение (definition). Например:

<DL>

<DT>Первый термин</DT>

<DD>Первое определение</DD>

<DT>Второй термин</DT>

<DD>Второе определение</DD>

</DL>

Web-графика

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

<IMG SRC=URL_изображения HEIGHT=”число” WIDTH=”число”>,

где SRC – источник (source) – место, где хранится изображение, HEIGHT и WIDTH – размеры изображения в пикселах (соответственно высота и ширина). Например:

<IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50”<BR>

<IMG SRC=”http://www.spbstu.ru/mmf/logo500.gif” WIDTH=”120” HEIGHT=”120”

Здесь picture.jpg – картинка размером 50 на 50 пикселов, размещенная в каталоге image на том же сервере, что и исходная страница; logo500.gif – картинка размером 120 на 120 пикселов, размещенная на другом сервере по адресу: http://www.spbstu.ru/mmf/.

Для выравнивания текста относительно изображений используется атрибут ALIGN тега IMG. Некоторые его значения приведены в табл. 8.

Таблица 8

Стандартные значения атрибута ALIGN тега IMG

Значение	Результат
TOP	Нижний край текста выравнивается по верхнему краю изображения
MIDDLE	Нижний край текста выравнивается по центру изображения
BOTTOM	Нижний край текста выравнивается по нижнему краю изображения
LEFT	Изображение располагается слева от текста
RIGHT	Изображение располагается справа от текста

Например:

<IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50” ALIGN= ”LEFT”>

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

<IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50” ALIGN= ”LEFT” HSPACE=”5” VSPACE=”5”>

Изображения можно использовать для создания ссылок. В этом случае тег <IMG> помещается в контейнер <A HREF=”URL”></A>. Например:

<A HREF=”page2.html”><IMG SRC=”image/picture.jpg” WIDTH=”50” HEIGHT=”50” </A>

В этом примере рисунок picture.jpg является изображением-ссылкой на страницу с именем page2.html.

Если в браузере отключена функция загрузки изображения, на место картинки помещается альтернативный текст, определяемый параметром ALT:

<IMG SRC=”logo.gif” ALT=”Logotype”>

Таблицы

Создание красивых и функциональных Web-страниц требует точного позиционирования текста и рисунков. Для этих целей широко используются таблицы. В ячейках таблицы легко размещаются и текст, и графика.

Код таблицы в HTML содержится в контейнере <TABLE> </TABLE>. Между ними последовательно описывается каждая строка таблицы, заключаемая в теги <TR> и </TR>, а уже внутри каждой строки описываются ячейки столбцов, причем столбцы всегда должны находиться в обрамлении тегов <TD> и </TD>.

Заголовки столбцов и строк в таблицах размещаются при помощи тегов <TH> и </TH>. Название таблицы заключается между тегами <CAPTION> и </CAPTION>. По умолчанию заголовок располагается над таблицей. С помощью параметра ALIGN и атрибутов BOTTOM, TOP, LEFT и RIGHT можно задать другое положение заголовка таблицы.

Иногда одну ячейку надо растянуть на несколько столбцов или несколько строк. Например: <TD COLSPAN=3> - ячейка растягивается на три столбца; <TD ROWSPAN=2> - ячейка растягивается на две строки.

Рассмотрим пример.

<TABLE BORDER=3 WIDTH=”70%” ALIGN=CENTER>

<CAPTION ALIGN=BOTTOM>Подпись к таблице</CAPTION>

<TR>

<TH ALIGN=CENTER ROWSPAN=2>Фамилия, и., о.</TH>

<TH ALIGN=CENTER COLSPAN=2>Оценки</TH>

</TR>

<TR>

<TH ALIGN=CENTER>Физика</TH>

<TH ALIGN=CENTER>Химия</TH>

</TR>

<TR>

<TD ALIGN=LEFT>Иванов А.И.</TD>

<TD ALIGN=RIGHT>5</TD>

<TD ALIGN=RIGHT>5</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Петров С.Б.</TD>

<TD ALIGN= RIGHT>4</TD>

<TD ALIGN= RIGHT>5</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Сидоров В.В.</TD>

<TD ALIGN=RIGHT>3</TD>

<TD ALIGN= RIGHT>4</TD>

</TR>

</TABLE>

В первой строке этого примера BORDER=3 назначает толщину границы таблицы в 3 пиксела; WIDTH=”70%” определяет ширину таблицы в 70% от ширины экрана; ALIGN=CENTER центрирует таблицу. Между тегами <TH> и </TH> размещают заголовки строк и столбцов. Таблица, созданная в соответствии с приведенным примером, представлена на рис. 7.

Рис. 7. Окно браузера с результатами просмотра файла с таблицей

У тегов <TABLE>, <TR>, <TD>, <TH> есть общие параметры. Параметр BORDERCOLOR задает цвет границы объекта; параметры BORDERCOLORDARK и BORDERCOLORLIGHT задают темный и светлый цвета для трехмерного изображения рамки вокруг объекта. В параметре BACKGROUND указывается имя графического файла, который будет служить фоном для таблицы. Если файл не используется, то параметром BGCOLOR можно задать цвет фона объекта.

Фреймы

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

При создании документа с фреймовой структурой в главном HTML-файле нет нужды употреблять тег <BODY>. Вместо него используются теги <FRAMESET> и </FRAMESET>. Между ними вставляются теги <FRAME>, которые определяют содержимое каждого отдельного фрейма.

Положение фреймов указывается в теге <FRAMESET> с помощью параметров. Если фреймы расположены в виде таблицы, то используются параметры COLS и ROWS, задающие размеры колонок и строк. Ширина и высота каждого фрейма задается либо в пикселах, либо в процентах от размера окна браузера. Например: <FRAMESET ROWS=”110,*”> устанавливает фреймы в виде строк, высота верхнего фрейма – 110 пикселов, а нижнего – все свободное место окна браузера. В случае <FRAMESET COLS=”20%,60%,*”> фреймы расположены вертикально в виде трех колонок, ширина левого фрейма – 20% от окна браузера, ширина среднего фрейма – 60%, ширина правого фрейма – оставшееся пространство окна браузера.

В теге <FRAMESET> используются параметры FRAMEBORDER и FRAMESPACING. Если значение первого из них равно единице, то каждый фрейм будет иметь трехмерную рамку, а если нулю, то рамки не будет. Второй параметр указывает расстояние между соседними фреймами в пикселах.

Параметр FRAMEBORDER применяется и в теге <FRAME>. Делается это в случае, когда наличие рамки необходимо указывать для отдельных фреймов. В теге <FRAME> могут быть использованы параметры MARGINHEIGHT и MARGINWIDTH для задания отступа по вертикали и горизонтали от границ фрейма в пикселах.

Еще один параметр тега <FRAME> - NORESIZE. Если он указан при определении фрейма, то пользователь не сможет изменять границы фрейма. Параметр SCROLLING задает, нужно или нет создавать полосы прокрутки для просмотра содержимого фрейма. Значение YES заставляет отображать полосы прокрутки в каждом случае, значение NO не позволяет их отображать, а значение AUTO создает их только в случае необходимости.

Наконец, параметр SRC тега <FRAME> указывает на HTML-файл с содержимым данного фрейма. Например:

<FRAMESET COLS=”20%,*” FRAMEBORDER=1>

<FRAME SCROLLING=AUTO SRC=”1.html”>

<FRAME SCROLLING=AUTO SRC=”2.html”>

</FRAMESET>

Здесь заданы два фрейма шириной 20% и 80% от ширины окна браузера. В левом окне будет помещен файл 1.html, в правом – файл 2.html.

Таблицы стилей

С помощью таблиц стилей (style sheets) можно контролировать внешний вид Web-страниц в гораздо большей степени, чем с помощью «простого» HTML. При использовании таблиц стилей функциональные возможности Web-страниц будут доступны всем пользователям без исключения. Перед пользователями, имеющими современные компьютеры и браузеры, Web-страницы предстанут в оригинальном виде. Все остальные пользователи увидят страницы в упрощенном варианте; тем не менее, они в полном объеме получат ту же информацию, что и пользователи современных браузеров.

Для того, чтобы все страницы Web-сайта выглядели единообразно, создают отдельный файл с таблицами стилей, и с ним связывают все Web-страницы. Расширение такого файла - .css (css – cascading style sheets). В результате расширяются возможности для контроля внешнего вида Web-страниц, а также достигается значительная экономия времени при создании сайта.

Структура файла с описанием стилей достаточно проста. Указывается тег, обозначающий способ форматирования текста, а за ним в фигурных скобках – переопределение стиля для этого тега. Ниже приводится текст файла style1.css:

.back {background: yellow}

.bigletter {font-family: Garamond, "Times New Roman"; font-size: 130pt; font-style: italic; color: #666633}

.maintext {font-family: "Times New Roman", Times, serif; font-size: 14pt; color: #990000; text-align: center; font-weight: bold }

a.changecolor {color:black; text-decoration: none}

a.changecolor:Hover {color:blue; text-decoration: underline}

В этом файле первая строка задает желтый фон элемента (background: yellow). Вторая строка определяет, что текст класса bigletter пишется шрифтом Garamond или Times New Roman, размер шрифта – 130 пунктов, начертание – курсив (italic), цвет #666633. Третья строка устанавливает, что текст класса maintext пишется шрифтом Times New Roman, Times или serif, размер шрифта – 14 пунктов, цвет #990000, текст центрируется (text-align:center). Четвертая и пятая строки определяют, что ссылка <a> класса changecolor имеет черный цвет и не подчеркнута (text-decoration:none); при подводе к ней курсора мыши она меняет цвет на синий и становится подчеркнутой (text-decoration:underline). Этот эффект поддерживается только в Internet Explorer.

Для того, чтобы использовать стиль из файла style1.css, надо в HTML-файле к соответствующему тегу добавить параметр CLASS. Например,

<BODY CLASS=”BACK”>, <H1 CLASS=”BIGLETTER”>, <P CLASS= ”MAINTEXT”>.

Чтобы HTML-документ связать с файлом по имени style1.css, содержащим таблицы стилей, следует добавить в него внутри контейнера <HEAD></HEAD> тег <LINK REL=STYLESHEET HREF=”style1.css” TYPE = ”text/css”>. Например:

<!--Этот пример иллюстрирует работу таблицы стилей-->

<html>

<head>

<title>style</title>

<link href=" style1.css" rel=stylesheet>

</head>

<body class="back">

<div class="bigletter">Это bigletter </div>

<p class="maintext">Это maintext</p>

<p class="maintext">Эта <a class = "changecolor" href = "http:// www.spbstu.ru/mmf/index.html"> ссылка</a> меняет цвет на синий только в Internet Explorer</p>

</body>

</html>