FrontPage 2003

71

<dl> - список определений <dt>…</dt> - для задания термина.

<dd>…</dd> - для задания определения, сдвигается на некоторое количество позиций вправо относительно остального текста, демонстрируя подчиненность.

</dl> - завершает список определений.

Понятия многоуровневого списка в HTML нет; при необходимости такой список можно создать, используя вложенные нумерованные или маркированные списки.

<comment> … </comment> или <! – … -- > - используется для добавления комментариев, которые не показываются в браузере.

<center>…</center> - расположение элементов html-документа по центру окна браузера.

Некоторые тэги первой группы.

<strong>…</strong> - сильное выделение. В браузерах отображается полужирным начертанием. В голосовых браузерах текстовый фрагмент должен быть сильно выделен голосом.

<em>…</em> - выделение. В браузерах отображается наклонным начертанием. В

голосовых браузерах текстовый фрагмент должен быть выделен голосом. _… - верхний индекс.

^… - нижний индекс.

Наклонным начертанием выводятся элементы. <dfn>…</dfn> - определение.

<cite>…</cite> -цитата.

<var>…</var> - переменная.

Моноширинным шрифтом выводятся элементы.

72

<code>…</code> - программный код. <samp>…</samp>- примеры программ, сценариев.

<kbd>…</kbd> - примеры текста, который должен ввести пользователь.

Эти элементы, являются чисто логическими, никак внешне не выделяются.

<abbr>…</abbr> - аббревиатура (сокращение).

<acronym>…</acronym> - акроним (слово,сформированное из первых букв словосочетания, которое оно заменяет).

Некоторые тэги второй группы. <b>…</b> - жирный текст.

<i>…</i> - курсив.

<u>…</u> - текст с подчеркиванием. <s>…</s> - перечеркнутый текст.

<tt>…</tt> - моноширинный шрифт.

<font - определяет вид шрифта, с помощью атрибутов

size =значение - размер шрифта; задается либо в форме абсолютного значения (число от 1 до 7), либо относительно размера основного шрифта (в форме +n или -n). Значение по умолчанию: size =3.

color="[#kod][name]" - цвет шрифта.

face=список гарнитур шрифта - перечисляется через запятую в порядке убывания предпочтения (Arial, Verdana). Список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек, "рубленый", "журнальный"), cursive (курсив), fantasy (аллегорический), monospace (моноширинный).

>…</font>

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

Организация гиперссылок.

Гиперссылка – это элемент, который организует связь между web-страницами и их фрагментами. В качестве объекта, по которому организуется гиперссылка, может выступать любой объект html-документа (текст или графическое изображение).

Гиперссылка в html-документе организуется с помощью парных тэгов <a>…</a> (от английского anchor - якорь). Данные тэги могут употребляться в трех форматах.

1) Создание якоря (метки) фрагмента.

73

<a name=”метка”> …</a> - служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент.

2) Создание гиперссылки на html-документ, или его фрагмент. <a href=”адрес”>…</a> - гиперссылка на html-документ;

<a href=”адрес#метка”>…</a> - гиперссылка на фрагмент документа, с созданным якорем, где адрес – адрес документа в абсолютной или относительной форме.

3) Создание гиперссылки на электронную почту.

<a href=”mailto:e-mail”>…</a>, где e-mail – адрес электронной почты.

Текст или изображения, размещенные между тегами <a>…</a>, становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку документа, на который организовывалась гиперссылка.

Дополнительно можно использовать следующие атрибуты. target=_blank - документ будет загружаться в новое окно браузера.

title=“строка” - “строка” будет всплывать при наведении на гиперссылку указателя мыши.

Создание таблиц и их применение для форматирования документов.

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

Основные тэги, используемые для описания таблиц: table, tr, td, th. Все табличные данные (рис.1) заключаются в теги <table> ... </table>; описание каждого горизонтального ряда ячеек заключается в теги <tr> ... </tr>; содержимое каждой ячейки заключается в теги

<td> ... </td>.

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

форматированный текст, изображения, гиперссылки; допустимы вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными; необходимо поместите в нее хотя бы неразрывный пробел &nbsp. Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки nowrap); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку. Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты rowspan и colspan. Элементы,

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

74

атрибутов по умолчанию могут зависеть от настроек браузера, поэтому желательно

</table>

Рисунок 1 – Структура таблицы Рассмотрим основные атрибуты тэгов, используемых для создания таблицы.

<table

width=[число][%] - ширина задается либо в пикселях, либо в % от текущей ширины окна; align=[left][center][right] - размещение таблицы на странице относительно окна браузера,

при этом таблица будет обтекаться внешним текстовым потоком; border=число - толщина рамки таблицы;

cellpadding=число - расстояние между содержимым ячейки и ее границей в пикселях; cellspacing=число - расстояние между ячейками в пикселях;

background = “url” – фоновое изображение для всей таблицы; bgcolor="[#kod][name]" - фоновый цвет для всей таблицы;

hspace=число - свободное пространство слева и справа от таблицы в пикселях; vspace=число - свободное пространство сверху и снизу от таблицы в пикселях; rules=значение - определяет линии между ячейками:

none - нет линий, значение используется по умолчанию, ro ws - линии отображаются только между строками, cols - линии отображаются только между столбцами,

all - линии отображаются между строками и столбцами.

frame=значение – определяет какие стороны рамки, окружающей таблицу, будут видимы: void - сторон нет,

above - только верхняя часть, below - только нижняя часть,

hsides - только верхняя и нижняя часть, vsides - только левая и правая части, lhs - только левая часть,

rhs - только права часть.

box или border - все четыре части.

>

75

<tr - начало строки таблицы, задают параметры горизонтального ряда (строки) ячеек; background = “url” - фоновое изображение;

bgcolor="[#kod][name]" - фоновый цвет;

align=[left][center][right] - горизонтальное размещение содержимого ячеек ряда. valign=[top][ middle][ bottom] - вертикальное выравнивание содержимого ячеек ряда

(верх, середина, низ).

>

<td

width=[число][%] - ширина ячейки; height=[число][%] - высота ячейки; bgcolor="[#kod][name]" - цвет фона ячейки; background = “url" - фоновое изображение;

align=[left][center][right] - размещение содержимого ячейки по горизонтали; valign=[top][middle][bottom] - размещение содержимого ячейки по вертикали; colspan=число - объединение ячеек по строке;

rowspan=число - объединение ячеек по столбцу;

>

содержимое ячейки

</td> - завершение описания ячейки;

</tr> - завершение описания строки таблицы;

</table> - завершение описания таблицы.

Тэг <th> так же описывает ячейку, но в отличие от тэга <td> содержимое тэга <th>

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

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

Вставка графического изображения в html-документ.

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

<img

src=”url” – обязательный атрибут, определяющий адрес графического файла. border=число – толщина обрамляющей рамки в пикселях.

76

height= число – высота изображения в пикселях или в % от высоты окна браузера. width= число – ширина изображения в пикселях или в % от ширины окна браузера. hspace= число – отступы слева и справа от изображения в пикселях.

vspace= число – отступы снизу и сверху от изображения в пикселях.

alt=текст – задается альтернативный текст, который «всплывает» при наведении курсора мыши на изображение; выводится в пустой рамке режиме браузера без загрузки графики.

align=значение - значения left либо right, выравнивают изображение соответствующим образом по горизонтали; задание этих значений обеспечивает обтекание изображения текстом. Значения texttop, abscenter, center, bottom, absbottom

обеспечивают различные варианты вертикального выравнивания относительно текстовой строки; при применении этих значений вставленное изображение разрывает текстовый поток.

>

Для того чтобы завершить обтекание графического изображения текстом необходимо вставить тэг <br clear=all>.

Использование графики для организации гиперссылок.

Очень часто графические изображения применяются для организации навигации по сайту. Небольшие анимационные рисунки или кнопки, с соответствующими надписями используются как гиперссылки на соответствую щие страницы. В этом случае html-код выглядит следующим образом:

<a href=”url-документа” title=”ссылка”><img src=”url-рисунка” alt=”кнопка”></a>.

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

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

Во втором случае используется тэг <map> и вложенные в него тэги <area>,

задающие навигационную карту, основанную на изображении. В тэг <img> вставляется дополнительный атрибут usemap=#name_map, который привязывает данное графическое изображение к карте. В этом случае html-код выглядит следующим образом.

<img src=”url-рисунка” border=0 usemap=”#name_map”> - вставка изображения и привязка его к карте с именем name_map.

left-x, top-y, right-x, bottom-y (т.е. левый верхний и правый нижний углы прямоугольника), center-x, center-y, radius (координаты центра и радиус окружности),

x1, y1, x2, y2, …, xN, yN (координаты углов многоугольника);

>

</map> - завершение описания навигационной карты.

Организация фреймовой структуры html-документа.

Фреймы - средство для разделения окна браузера на несколько областей

(фреймов), в каждой из которых отображается содержимое отдельной web-страницы.

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

Любая из страниц web-сайта (не обязательно титульная) может быть оформлена с использованием фреймов. В этом случае контейнер <body>…</body>, меняется на контейнер <frameset>…</frameset>, который может содержать только такие же структуры и тэг <frame>.

<frameset – тэг задает относительный или абсолютный размер фреймов, на которые будет поделено окно браузера, и имеет следующие атрибуты.

rows="[число,число,…,число]/[%,%,…,%]" - задает количество и размер строк в создаваемом наборе кадров в пикселях, процентах или * -

пропорционально другим кадрам. cols="[число,число,…,число]/[%,%,…,%]" - задает количество и размер колонок в

создаваемом наборе кадров в пикселях, процентах или * - пропорционально другим кадрам.

78

frameborder=1/0 - задает наличие или отсутствие обрамления у фреймов (1 соответствует наличию, а 0- отсутствию обрамления).

border=число - задает толщину обрамления в пикселях для всех производных фреймов. > - полученные кадры описываются, начиная с верхнего левого, слева направо и сверху

вниз и для каждого должен быть свой тэг <frame>.

<frame - тэг описывает внешний вид и поведение кадра, имеет следующие атрибуты. name="name-frame" - имя кадра.

marginwidth=число - горизонтальный отступ между содержимым кадра и его границами. marginheight=число - вертикальный отступ между содержимым кадра и его границами. scrolling=[yes][no][auto] – описание полосы прокрутки .

noresize – фиксирование границ кадра. src="name.htm"> - имя файла, загружаемого в кадр.

</frameset>

<noframes> - тэг для описания страницы без фреймов.

<body>

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

</body>

</noframes>

При организации гиперссылок внутри кадровой структуры в тег <a href=… >

необходимо добавить атрибут target=

“name-frame” - страница будет загружаться в окно заданного кадра. “_blank” - страница будет загружаться в новое окно.

“_self” - страница будет загружаться в тот же кадр, где была активизировано ссылка.

“_top” - страница будет загружаться в то же окно, но поверх всех кадров, занимая полностью пространство окна;

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

Другой вариант использования фреймов, заключается в том, что в тело документа

(<body>…<body>) c помощью контейнера <iframe>…</iframe> вставляется окно, в которое можно загружать другие HTML-документы или изображения. Не все браузеры их поддерживают. Например, Netscape 4.06 их не понимает. Но зато самый распространенный браузер InternetExplorer четвертой и более поздней версии умеет с ними работать. Данный тэг описывается следую щим образом.

<iframe

79

src=”name-1.htm” - адрес документа, первоначально загружаемого в кадр. name=”name-frame” – имя кадра. Используя в основном документе тэг <a href=”name-

2.htm” target=name-frame> - можно изменить содержимое кадра. height=значение - высота кадра в пикселях или процентах от высоты окна браузера. width=значение - ширина изображения в пикселях или в % от ширины окна браузера. scrolling=yes/no/auto - задается стиль вывода полос прокрутки, соответственно

выводятся в кадре всегда, не выводятся, выводятся при необходимости. frameborder=значение - включение / выключение показа "псевдотрехмерного"

обрамления кадра. (1/0 или yes/no).

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

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

align=значение - выравнивание кадра по горизонтали или вертикали аналогично изображению.

>

Браузер не поддерживает встроенных фреймов.

</iframe>

Фреймы были популярны в 90-х годах (обычно их использовали для организации навигации по сайту). Сейчас в Интернете на сайтах организаций фреймовую структуру не встретишь , ее можно увидеть лишь на любительских web-страницах.

Создание HTML-форм.

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

а второй заключает в себе создание на web-сервере скрипта для ее обработки.

Форма создается при помощи различных тэгов и атрибутов, заключенных в контейнер <form>…</form>.

Рассмотрим синтаксис формы для отправки почтового сообщения.

<form method="POST" action="mailto:e-mail" ENCTYPE="text/plain"> - описание формы

value="значение по умолчанию" – задается при необходимости.

>

<input type="checkbox" - флажок выбора выглядит обычно в виде крестика или птички.

name="Имя поля2" value="Значение"

checked – включение по умолчанию

>

<input type="radio" value="Значение1" name="Имя поля3" checked> - выбор

<select name="Имя поля4" - выбор из выпадающего меню. size="2" – высота поля в строках.

multiple - возможность одновременного выбора нескольких значений.

>

<option value="вариант1">Вариант1</option> - описание вариантов выбора

<option value="вариант2" selected>Вариант2</option> <option value="вариант3">Вариант3</option>

</select>

<textarea name="Имя поля5" rows="число строк" cols="число колонок">

многострочное текстовое поле </textarea>

<input type="submit" value="Название кнопки1" name="имя формы"> - кнопка отправки формы

<input type="reset" value="Название кнопки2" name="имя"> - кнопка сброса значений

</form>