Форматирование текстов в HTML
· Стандартные логические стили
· Управление шрифтом
· Цвет
· Текст заданного формата
· Списки
· Разделительные полосы
· Бегущая строка
· Специальные и зарезервированные символы
Страница обычно содержит тексты — простой и наиболее распространенный способ представления информации, хотя далеко не единственный. Вы можете создать текст, не уделяя особого внимания тому, как он будет выглядеть в окне браузера. Браузер отобразит неформатированный текст, используя настройки, выбранные пользователем. Однако самый непритязательный пользователь хотел бы, чтобы заголовки как-то отличались от основного текста размером и шрифтом, чтобы можно было выделить абзацы, пропустить строку и т. п. Все это называется форматированием текста. Сразу предупредим, что если вы переусердствуете в этом деле, то пользователь просто не сможет прочитать ваш текст, не говоря уже об эстетическом восприятии. Запомните, что тексты — это главная часть вашей страницы. Они должны правильно отображаться почти во всех браузерах.
Если вы работаете в специальной программе, предназначенной для создания Web-страниц (например, FrontPage), то располагаете множеством вариантов, подобных форматированию в обычных текстовых процессорах. Поэкспериментируйте, наблюдая при этом, какие тэги создает FrontPage (см. вкладку HTML).
При оформлении текстов используются специальные тэги. Рассмотрим некоторые из них. Тэг <BR> предписывает переход на новую строку. Тэг <Р> является тэгом конца абзаца. После него текст будет выводиться с новой строки и, кроме того, одна строка будет пропущена. Если не использовать эти тэги, то разбиение текста на строки будет определяться шириной окна браузера, так что вид текста может оказаться совсем не таким, каким вы его представляли. Если вы хотите, чтобы текст выравнивался по центру окна браузера, используйте тэг <CENTER>, который упоминался в предыдущей главе. Заметим, что тэги <BR> и <Р> действуют не только на тексты, но и на другие элементы страницы. Например, если вы хотите, чтобы рисунок размещался ниже текста, то поставьте между текстом и тэгом рисунка <BR> или <Р>.
Стандартные логические стили
Для выбора размера шрифта можно использовать тэги так называемых логических стилей. Их всего шесть и обычно они используются для определения заголовков различного уровня. При переходе от первого стиля к шестому постепенно уменьшаются размер и толщина букв шрифта. Тэги логических стилей записываются как <Н1>, <Н2>,..., <Н6>.Каждый из них имеет соответствующий закрывающий тэг. Например, тэгу <Н1> соответствует закрывающий тэг </Н1>. Например, запись
<Н1>Заголовок 1-го уровня </Н1>
задает вывод текста Заголовок 1-го уровня шрифтом, соответствующим первому логическому стилю.
Заметим, что логический стиль определяет стиль текста сообразно настройкам браузера. При этом текст со стилем <Н2> всегда будет «меньше», чем со стилем <Н1>, если, конечно, автор страницы не переопределил его по своему усмотрению. Дело в том, что вы имеете возможность переопределить установки по умолчанию. Для этого используются средства каскадных таблиц стилей (CSS).
Следующая программа демонстрирует использование тэгов логических стилей:
<HTML>
<HEAD> <TITLE> Основные элементы HTML </TITLE></HEAD>
<BODY>
<Н1>Заголовок 1-го уровня </Н1>
<Н2>Заголовок 2-го уровня </Н2>
<Н7>Заголовок 7-го уровня </Н7>
</BODY>
</HTML>
Логические стили
Заголовки различных уровней;
заголовок уровня i (1=1,2,..., 7) задается тегом <Hi>
Управление шрифтом
Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов, можно определять шрифты для каждого текстового фрагмента с помощью специальных тэгов. Самый простой способ — использование так называемых физических стилей:
Полужирный (Bold) <В>
Курсив (Italic) <I>
Подчеркнутый (Underscore) <U>
Вычеркнутый (Strike ) <S>
Пишущая машинка (Typewriter) <TT>
Мерцающий (только для браузера Netscape Navigator) <BLINK>
Физические стили
Внутри тэга заголовка можно вставить тэг физического стиля, чтобы модифицировать весь заголовок или только некоторую его часть. Например, чтобы выделить курсивом часть текста, определенного в качестве заголовка, можно использовать следующую конструкцию:
Изменение стиля шрифта части заголовка
С помощью специального тэга <FONT> можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. Тэг основного шрифта имеет формат <BASEFONT SIZE=>. Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тэг, то размер основного шрифта по умолчанию устанавливается равным 3.
Тэг <FONTSIZE=размер_шрифта> устанавливает размер текущего шрифта для отдельных фрагментов текста. На стили этот тэг не влияет. Диапазон возможных значений — от 1 до 7. Данный тэг позволяет также управлять размером текущего шрифта относительно основного. Для этого используются символ + (чтобы увеличить) и символ - (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тэг <FONT SlZE=+2> устанавливает размер текущего шрифта равным 5.
Для задания гарнитуры шрифта используется тэг <FONT РАСЕ="имя_шрифта">. Например:<FONT FACE="Arial">
Если этот тэг не используется в вашем документе, то браузер будет применять шрифт, установленный в его настройке. Поэтому текст на экране пользователя может выглядеть совсем не так, как вы его представляли. Следует также иметь в виду, что если назначенный вами шрифт не установлен на компьютере пользователя, то браузер будет изображать текст шрифтом, установленным по умолчанию.
Вы можете в тэге <FONT> указать через запятую перечень шрифтов. В этом случае браузер будет использовать первый найденный шрифт. Например, можно записать тэг: FACE="Arial, Sans Serif, Courier">
Обычно в перечне задают похожие шрифты. Рекомендуется назначать наиболее популярные шрифты. При размещении на странице текстовой информации лучше вообще не назначать название шрифта, полагаясь на стандартные настройки браузера. Но тогда при разработке страницы следует также использовать стандартные настройки браузера, чтобы синхронизировать свое восприятие текста с возможным восприятием пользователя. В конце концов, вы создаете страницу не для себя, а для читателей.
С помощью атрибута COLOR в тэге <FONT> можно задать цвет шрифта: <FONT СОLOR="цвет">
Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей). Следующая программа демонстрирует управление шрифтом:
<HTML>
<НЕАD><ТIТLЕ>Установка шрифтов</ТIТLE/НЕАD>
<BODY>
<Р>Шрифт Aria <FONT FАСЕ="АRIАL">АБВГДЕЖЗИК </FONT>
<Р>Шрифт Courier<FONT FАСЕ="СOURIER">АБВГДЕЖЗИК </FONT>
<Р>Шрифт SYMBOL<FONT FACE="SYMBOL" SIZE=7 СОLОR="RЕD">АБВГДЕЖЗИК
</FONT>
</BODY>
</HTML>
Использование различных шрифтов
Заметим, что в тэге <FONT> можно использовать несколько или все его возможные атрибуты. Например:
<FONT FACE="Arial" SIZE=5 COLOR="BLUE">
В математических формулах, а также для подстрочных замечаний часто применяются индексы, которые отличаются от основного текста положением (чуть выше или ниже) и размером. Для этой цели служат тэги <SUP> и <SUB> соответственно для верхних и нижних индексов.
<HTML>
<НЕАD><Т1ТLЕ>Индексы</ТIТLЕ> /НЕАD>
<BODY>
<НЗ>Пример использования индексов
<Р> (5+x<SUP>2</SUP>)<SUP>x+3</SUP>
<P>a<SUB>1</SUB> + a<SUB>2</SUB>+ a<SUB>3</SUB>
<Р>Подстрочные примечания <SUP>2</SUP>
</H3>
</BODY>
</HTML>
Использование верхних и нижних индексов
Кроме рассмотренных выше, имеются дополнительные тэги форматирования текстов:
<ADDRES> — выделение адресов электронной почты, почтовых адресов и
номеров телефонов;
<СIТЕ> — выделение цитат;
<CODE>, <SAMP> — запись текстов программ, символьных констант;
<KBD> — ввод текстов с клавиатуры.
В последних трех стилях используется моноширинный шрифт (обычно Courier). Например, буквы I и Ж моноширинного шрифта занимают одинаковое место. Использование моноширинных шрифтов обусловлено простой возможностью выравнивания текста с помощью символов «пробел».
Отметим еще один момент. В тэги управления шрифтом, как и в тэги логических стилей, можно вставлять атрибут ТITLE= "строка", что позволяет привязать к тексту внутри этого тэга всплывающую подсказку. Аргументом атрибута TITLE является строка подсказки. При остановке указателя мыши на выделенном слове или фразе около указателя появится подсказка. С помощью этого приема можно расшифровывать аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.
Цвет
По умолчанию браузеры заполняют фон сплошным цветом, определенным настройкой браузера: серым, белым или черным. Пользователи по-разному настраивают цвета, поэтому иногда имеет смысл принудительно зафиксировать цвет фона или создать фоновое изображение. Если вы не позаботитесь об этом, в худшем случае пользователь не сможет прочитать синий текст на черном фоне.
Цвет фона определяется атрибутом BGCOLOR тэга <BODY>. Например, тэг, задающий цвет фона #FF1230, имеет вид:<BODY BGCOLOR="#FF1230">
Тэг, задающий желтый цвет фона, имеет вид:<BODY BGCOLOR="YELLOW">
Можно задать и цвет текста. Этой цели служит атрибут TEXT тэга <BODY>. Тэг, приведенный ниже, задает зеленый цвет фона и синий цвет текста:<BODY BGCOLOR="GREEN" TEXT="BLUE">
Как уже было сказано, цвет можно указывать по имени и шестнадцатеричным кодом. Ниже приводится таблица соответствий некоторых имен цветов и их шестнадцатеричных представлений:
Цвет Имя цвета Шестнадцатеричное представление
Черный BLACK #000000
NAVY #000089
SILVER #COCOCO
Синий BLUE #OOOOF
MAROON #800000
Пурпурный PURPLE #800080
Красный RED #FFOOOO
FUCHSIA #FFOOF
Зеленый GREEN #008000
TEAL #008080
LIME #OOFFOO
AQUA #OOFFF
OLIVE #808000
Серый GRAY #808080
Желтый YELLOW #FFFFOO
Белый WHITE #FFFFFF
Текст заданного формата
Браузер обычно преобразует текст HTML-файла при выводе его на экран, т. е. игнорирует лишние пробелы, символы табуляции и символы конца строки. Если вы хотите, чтобы текст на экране выглядел так, как вы его ввели в документ HTML, то воспользуйтесь тэгом предварительного форматирования <PRE>. Текст должен находиться между тэгами <PRE> и</РRЕ>.
СпискиДовольно часто требуется разместить на странице списки (перечни элементов). Списки бывают упорядоченными (по алфавиту или по возрастанию/убыванию номера) и неупорядоченными. При отображении списков браузер выделяет их отступом от края страницы. Кроме того, списки могут быть вложенными.
Упорядоченные списки задаются тэгом <OL>, а неупорядоченные — тэгом <UL>. Оба эти тэга парные, т. е. контейнерные.
Для упорядоченных списков можно выбрать способ индексации. Это делается с помощью атрибута TYPE с аргументами: 1 (арабские цифры), А (прописные буквы), а (строчные буквы), i (римские цифры). Можно задать номер, с которого начинается нумерация элементов списка. Для этого служит атрибут START внутри тэга <OL>.
Перед элементами списков следует поставить тэг <LI>, чтобы индексация происходила автоматически. В этом тэге можно использовать и вышеописанный атрибут TYPE.
Бегущая строка
Internet Explorer поддерживает тэг <MARQUEE>, который позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:
WIDTH — ширина поля бегущей строки в пикселах или процентах от ширины окна;
HEIGHT — высота поля бегущей строки (в пикселах);
HSPACE, VSPACE — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах);
ALIGN —положение текста бегущей строки в ее поле; возможные аргументы:
ТОР (вверху);
BOTTOM (внизу);
MIDDLE (посередине);
DIRECTION — определяет направление движения; возможные аргументы:
LEFT (справа налево);
RIGHT (слева направо);
BEHAVIOR — характер движения строки; возможные аргументы:
SCROLL — текст появляется от одного края и скрывается за другим;
SLIDE — строка вытягивается из одного края поля и останавливается у другого края;
ALTERNATE — задаетпеременноенаправлениедвижения, отодного края к другому, а затем обратно;
LOOP — количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова INFINITY.
Атрибут LOOP не влияет на поведение бегущей строки, если для атрибута BEHAVIOR заданы аргументы ALTERNATE или SLIDE;
SCROLLAMOUNT — устанавливает длину (в пикселах) «прыжка» те кета за один такт; при большом значении этого параметра текст движется рывками, а при малом — замедленно;
SCROLLDELAY — определяет величину паузы между тактами перемещения текста в миллисекундах;
BGCOLOR — устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.
Гиперссылки
Гиперссылками (или просто ссылками) называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети.
Гиперссылка состоит из "внутренней" части, то есть, адреса документа, на который она ссылается, и "внешней" части, видимой на экране и называемой якорем гиперссылки. Якорь гиперссылки может представлять из себя слово или группу слов, картинку или часть картинки. Если подвести указатель “мыши” к ссылке, он примет форму ладони с вытянутым указательным пальцем – и это самый надежный способ ее определить. При этом, в строке состояния браузера можно будет прочитать адрес, на который указывает ссылка.
Кроме того, практически всегда текстовые ссылки выделены другим цветом и очень часто подчеркнуты. Графические ссылки часто заключены в рамку того же цвета, которым выделяются текстовые ссылки. По умолчанию это синий цвет, но каждая Web-страница может использовать свое собственное оформление. Цвет ссылок, которые уже выбирались пользователем, обычно отличается от цвета непосещенных ссылок и выглядит более “бледным” (по умолчанию – фиолетовый).
Для создания гиперссылки служит таг вида
<A HREF="адрес" TARGET="окно">текст ссылки</A>
Об адресах документов сказано ниже. Опция TARGET может быть не указана, в этом случае документ открывается в текущем окне браузера, или указана в виде TARGET="_BLANK">, тогда документ открывается в новом окне. Текст ссылки внутри тага <A> может быть любым. Точно так же в таг <A> можно поместить и изображение.
Чтобы научиться создавать ссылки, нужно иметь представление о том, как адресуются документы в Сети.
Полный адрес документа в сети называется URL (Uniform Resource Locator; принято читать “урл”). URL может состоять из следующих частей:
префикс протокола, то есть, указание на используемую сетевую службу. Основные протоколы, с которыми Вы столкнетесь, приведены в таблице 3.Протокол Пояснение
http:// HTTP – основной протокол, обеспечивающий доступ к Web-страницам. Используется по умолчанию, поэтому часто не указывается в URL.
ftp:// Протокол передачи файлов FTP, позволяющий при помощи программы FTP-клиента обмениваться файлами с удаленным компьютером.
mailto: Доступ к электронной почте. Вслед за mailto: указывается адрес электронной почты, имеющий общий вид имя_пользователя@адрес_почтового_домена.
file:// Указывается вместо имени протокола при обращении к Web-странице, расположенной на локальной машине.
Основные префиксы протоколов в URL
доменное имя компьютера или его IP-адрес вместо доменного имени. Например, сервер НГАСУ имеет доменное имя www.ngasu.nsk.su и IP-адрес 62.76.97.33;
номер порта, через который происходит взаимодействие с сервером. Перед номером порта ставится двоеточие. С точки зрения пользователя указание порта бывает полезно, например, для “принудительной” перекодировки документа. Так, адреса http://www.newmail.ru:8100 и http://www.newmail.ru:8101 адресуют один и тот же сервер, но в первом случае документ читается в кодировке KOI-8, а во втором – в кодировке Windows. Вообще же, номер порта включается в URL только при нестандартных настройках сервера;
имя файла на сервере, которое может включать и путь от корневого каталога сервера. В записи пути по дереву каталогов сервера используется символ ‘/’, а не ‘\’, как принято в Dos и Windows. Корневой каталог на сервере – совсем не обязательно “головной каталог диска”, как на локальной машине, а при соединении с сервером мы получаем доступ не ко всем его папкам и файлам, а только к тем, которые на нем специальным образом “размещены” и открыты для просмотра через WWW.
закладка, позволяющая перейти в нужную часть документа. Имя закладки отделяется от имени файла символом '#'.
В целях совместимости имена файлов, размещаемых в Интернет, обычно строятся по правилам DOS - то есть, состоят из латинских букв, цифр и символа подчеркивания и имеют длину не более 8 символов. С другой стороны, web-страницам принято давать раширение *.html, а не *.htm.
Следует также помнить, что URL чувствителен к регистру символов, то есть, http://www.TNT.ru и http://www.tnt.ru – это не один и тот же адрес.
Например, один из файлов страницы кафедры прикладной математики НГАСУ имеет полный URL http://www.ngasu.nsk.su/prikl/person.html, из чего можно заключить, что он находится на сервере НГАСУ в папке с именем prikl.
Если в URL не указано имя html-файла, это означает, что документ имеет имя по умолчанию, которое может назначаться при администрировании сервера. Чаще всего это имя index.html, так что URL http://www.name.ru может означать то же самое, что http://www.name.ru/index.html.
Ссылка, в которой указан полный URL документа, называется абсолютной. Абсолютные ссылки используются для связи с внешними ресурсами Интернет, URL которых известен нам и не меняется.
Относительная ссылка ссылается на документ, опуская общую адресную часть. Например, если из документа index.html нужно сослаться на документ test.html, находящийся в той же папке, это можно сделать ссылкой вида
<a href="test.html">документ test.html</a>
При использовании относительной ссылки можно ссылаться на папки, которые являются как вложенными, так и на родительскими по отношению к папке, в которой расположен исходный документ. Например, ссылка на рисунок с именем my.jpg, находящийся во вложенной папке images может иметь вид
<a href="images/my.jpg">посмотрите рисунок</a>
Внутренние ссылки предназначены для навигации в пределах документа. Они имеют вид <a href="#закладка">якорь ссылки</a>
Для создания закладки служит таг вида <a name="закладка">якорь закладки</a>. Имена закладок должны быть уникальными в пределах документа.
Например, если первое слово документа заключить в таг <a name="start">...</a>, в нижней части документа можно разместить ссылку вида
<a href="#start">к началу страницы...</a>
При разработке собственного web-сайта для перехода между его страницами используются, как правило, относительные ссылки, что позволяет просматривать сайт на локальной машине, не внося в него изменений, а также при необходимости легко переместить сайт на другой сервер.
примеры различных видов:Обычная ссылкаЭто обычная гипертекстовая ссылка. Щелчок по ней вызовет переход к новому документу (в данном случае - к главной странице нашего сайта).
Почтовая ссылка Это ссылка на почтовый адрес. Щелчок по ней приведет к запуску окна создания сообщения, которое можно отправить по указанному в ссылке адресу. Если же ни одна почтовая программа на машине не установлена, браузер сообщит об этом в окне диалога. Опция target при этом не указывается.
FTP-ссылкаЭто ссылка на FTP-сервер, содержащий файловые архивы. При щелчке по ней браузер перейдет в режим FTP-клиента и покажет содержимое головного каталога архива. При этом, панели инструментов браузера изменятся. Если же на машине установлена внешняя программа поддержки FTP, она будет запущена.
Ссылка на файл Это ссылка на архивный файл типа *.zip, находящийся на сервере. После щелчка по ней браузер обычно спрашивает в окне диалога, что следует сделать с архивом - открыть в текущем положении или сохранить на диске. Такие же вопросы задаются и о многих других типах файлов, в том числе об исполняемых программах *.exe
Ссылка на картинку Это ссылка на картинку типа *.gif, которая откроется в новом окне.
Локальная ссылка Щелчок по этой ссылке откроет в новом окне содержимое диска c: Ссылка имеет вид file://c:/
Ссылка с хитростью Это внутренняя ссылка на закладку в документе. Но HTML-код ссылки таков, что браузер при щелчке по ней откроет в новом маленьком окне картинку. Поэтому не удивляйтесь, если при посещении некоторых страниц окна вдруг "вываливаются ниоткуда"... это один из рекламных приемов в Сети.
Графика
Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.
Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации ("мультипликация" на Web-страницах, графические кнопки, "украшения"). Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект - возможность черезстрочной загрузки изображения GIF - то есть, изображение может постепенно "проявляться" по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.
Формат JPG используется для хранения полноцветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16.7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web-страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательный вариант картинки.
Из доступных приложений эффективно управлять файлами в форматах GIF и JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw.
Рисунок в любом формате вставляется в документ HTML тагом следующего вида:
<IMG SRC="URL рисунка" WIDTH="ширина" HEIGHT="высота" BORDER="рамка" ALIGN="выравнивание" HSPACE="отступ по горизонтали" VSPACE="отступ по вертикали" ALT="текст">
Закрывать этот таг не нужно.
Опция SRC содержит абсолютный или относительный адрес рисунка, если рисунок не найден, на его месте выведется пустая рамка. При разработке сайта используются, как правило относительные адреса. Хотя SRC - единственная обязательная опция тага, указание всех остальных опций настоятельно рекомендуется.
Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). Если ширина и высота не указаны, загрузка страницы замедляется и часто приводит к некрасивому эффекту "скачущего" текста на экране. Если указанные ширина и высота не соответствуют действительным размерам рисунка, при выводе он будет отмасштабирован, что также существенно замедляет загрузку (единственное допустимое исключение - уменьшение или увеличение при загрузке в 2 раза).
Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка, являющегося гиперссылкой. Если рамка не нужна, значением этой опции следует сделать 0, а если рисунок не является ссылкой, опцию можно не указывать.
Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения - LEFT (слева) и RIGHT (справа). Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Рисунок не выглядит сливающимся с текстом при их значениях в пределах 5-15.
Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении "мышки" на рисунок. Обычно этот текст содержит название рисунка.
Примеры: <img src="http://www.ngasu.nsk.su/prikl/head.gif" width="267" height="106" align="left" alt="Заставка">
А эта картинка со ссылкой подготовлена с помощью тага <IMG SRC="http://www.ngasu.nsk.su/prikl/ngasu.gif" WIDTH="148" HEIGHT="111" BORDER="1" HSPACE="10" VSPACE="10" ALIGN="LEFT" ALT="Страница кафедры">
HTML позволяет легко добавить на страницу фоновое изображение. Для этого достаточно указать опцию background="URL рисунка" в таг BODY. Рисунок может быть в формате GIF или JPG. Точно так же можно добавить фоновое изображение в таблицу, строку или ячейку таблицы - для этого достаточно указать опцию background="URL рисунка" в таге <table>, <tr> или <td>.
Формы и их обработка
Формы являются наиболее популярным способом "обратной связи" с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные формы для заказов или для того, чтобы получить от пользователей страницы какие-либо комментарии и пожелания.
Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.
Форма открывается тагом <FORM>, имеющим несколько опций.
Опция action="url" указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.
Опция method="стиль" указывает метод передачи данных программе-обработчику формы. "Стиль" может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно только в случае отправки данных формы по электронной почте.
Опция name="имя" указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.
Опция enctype="кодирование" задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде enctype="text/plain".
Примеры:
Заголовок формы, используемой на поисковой машине Яndex, имеет вид:
<form name="web" method="get" action="/yandsearch">
Заголовок формы, отправляющей информацию на адрес E-mail, может иметь вид:
<form action="mailto:[email protected]?subject=Internet-Test"
method="post" enctype="text/plain" name="Q" onSubmit="return Validate()">
Здесь форма имеет имя Q, в качестве action указана отправка сообщения по E-mail на адрес [email protected] с темой "Internet-Test", опция enctype предписывает отправлять данные формы как текст, а опция onSubmit связывает отправку формы с функцией Validate(), написанной на Javascript. Этот прием широко используется для проверки корректности заполнения формы.
Внутри тага <form> находятся поля формы. Перечислим основные из них:
<textarea name="имя" cols="число столбцов" rows="число строк" wrap="стиль">...</textarea>
Таг предназначен для создания многострочного поля ввода. Опции cols и rows указывают число строк и столбцов в поле, опция wrap указывает на режим автоматического распределения текста в ячейке. Она может принимать одно из значений off (выключен), virtual (распределять текст по всей ячейке, но на сервер передавать как одну строку) или physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается). Опция name здесь и далее обозначает имя поля и предполагается обязательной. Текст, написанный в таге <textarea>, становится его значением по умолчанию.
Таг <select name="имя" size="размер" multiple>...</select> определяет в форме меню с одним или несколькими вариантами выбора или список с полосой прокрутки. Если опция size указана в виде size="1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Опция multiple, если она указана, разрешает выбирать из списка более одного значения. Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.
Внутри тага <select> размещаются элементы меню или списка, каждый - в своем таге <option>, имеющем общий вид
<option value="значение" selected>текст</option>
Опция value указывает значение, возвращаемое программе обработки при выборе пользователем данной опции, опция selected указывает на элемент списка, выбранный по умолчанию. Внутри тага <option> пишется текст, видимый в меню или списке на экране.
Таг <input>, в отличие от <textarea> и <select>, не должен закрываться и предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы.
<input type="text" name="строка" maxlength="максимальный размер" size="число символов" value="строка">
Создает поле ввода. Опция maxlength ограничивает максимальную длину вводимого текста, а опция size показывает максимальное количество отображаемых символов. Опция value указывает исходное значение поля ввода.
Текстовое поле с защитой вводимых символов (то есть, с заменой их на звездочки, как принято при вводе паролей) можно создать, если заменить опцию type="text" на type="password". Остальные опции поля ввода пароля - те же самые.
<input type="checkbox" name="строка" value="строка" checked>
Создает флажок. Опция value определяет значение, возвращаемое программе обработки при выборе пользователем флажка, опция checked, если она указана, делает флажок выбранным по умолчанию.
<input type="radio" name="имя" value="строка" checked>
Создает радиокнопку. Радиокнопки можно группировать, задавая одно и то же значение опции name. Опции value и checked имеют те же значения, что и у флажка.
<input type="reset" value="строка">
Создает кнопку для очистки формы. Значение опции value позволяет указать надпись для кнопки. После очистки все элементы формы принимают значения, которые они имели по умолчанию.
<input type="submit" value="строка">
Создает кнопку для отправки данных формы приложению-обработчику. Опция value позволяет указать надпись на кнопке.
Для создания произвольной кнопки вместо reset или submit указывается значение button. В основном это требуется при написании скриптов, работающих на стороне клиента. Например, кнопка, созданная тагом <INPUT TYPE="button" VALUE="Вывести" onClick="Look()"> подписана словом "Вывести", а при нажатии на нее вызывает функцию Look(), написанную на JavaScript.
Работа с формами
Создайте документ HTML, содержащий форму для заполнения заказа на товар. Заказ должен быть отправлен по электронной почте.
Форма предусматривает поле ввода номера банковского счета, поле ввода личного номера пользователя (этот номер следует защитить от "подглядывания" при вводе), список выбора товаров (можно выбрать как один, так и несколько товаров), поле ввода произвольного комментария пользователя.
Также пользователь должен указать один из двух методов оплаты - наличным или безналичным расчетом. Пользователь должен иметь возможность указать, какую дополнительную информацию он хочет получить при ответе - данные об остатках на счете и/или список последних платежей по счету. Любая из этих двух опций может быть включена или выключена.
Предусмотрите также возможность сброса введенных в форму данных.
Фреймы
Фреймами или кадрами называют независимые окна внутри окна браузера, в которых могут одновременно отображаться разные документы. Фреймы удобны при создании страниц, которые должны иметь как динамическое, так статическое содержимое. Например, узкий левый фрейм может содержать оглавление сайта, а широкий правый будет предназначен для вывода информации. Возможны также любые другие конфигурации.
Документ, использующий фреймы, содержит только описание внешнего вида фреймов, которое выполняется в таге <frameset>...</frameset>, используемом вместо тага <body>. У тага <frameset> есть две главных опции - rows="список величин" и cols="список величин", описывающие, соответственно, строки и столбцы таблицы фреймов.
Строка "список величин" представляет собой разделенный запятыми перечень значений в пикселах, процентах или относительных величинах. Например, таг <frameset rows="100,240,140"> создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселов соответственно, <frameset cols="25%,75%"> создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера, а <frameset cols="*,2*"> - 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.
Эти способы можно использовать и совместно - например, <frameset cols="128,*"> указывает оставить 128 пикселов слева под первый фрейм, а все остальное пространство - под второй. При определении обоих атрибутов rows и cols, например, <frameset rows="*,2*" cols="*,2*"> получается сетка кадров.
Другие опции тага <frameset>:
border="ширина" - указывает ширину обрамления всех рамок для всех кадров, в пискелах;
frameborder=yes или frameborder=no - включает или выключает отображение обрамления кадров. В случае yes рамка имеет трехмерную форму, иначе она невидима, то есть имеет цвет фона окна по умолчанию. Некоторые браузеры "понимают" эту опцию только в виде frameborder=1 или frameborder=0, поэтому обычно указывают оба способа;
framespacing="ширина" - указать ширину промежутка между смежными кадрами в пискелах. Не действует в Netscape Navigator.
Внутри тага <frameset> находятся описания отдельных кадров, каждое в собственном таге <frame>, закрывать который не нужно. Число тагов <frame> должно быть равно числу кадров, определенных в таге <frameset>, при этом считается, что кадры описываются слева направо и сверху вниз.
Перечислим основные опции тага <frame>:
опция src="url" указывает URL исходного документа для данного кадра;
опция name="строка" указывает имя кадра. Это необходимо сделать, если предполагается ссылаться из одних кадров на другие;
опция scrolling="значение" управляет линейками прокрутки кадра. Значение может быть задано в виде yes (линейки есть всегда), no (никогда) или auto (если необходимо);
опция noresize запрещает изменять размеры кадра. Опция noresize, указанная для данного кадра, влияет также и на все кадры, смежные с ним;
опция frameborder может указываться также внутри тага <frame>, со всеми замечаниями, которые сделаны относительно нее. Указание этой опции в таге <frame> отменяет указание, сделанное в таге <frameset> для данного кадра и всех, смежных с ним;
опции magrinheight="ширина" и marginwidth="ширина" задают размещение по верхней-нижней и боковым сторонам кадра областей свободного пространства, ширина которых указывается в пикселах.