Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
В отличие от большинства HTML-тэгов, которые предназначены для различных видов отображения информации, формы используются как для отображения, так и для сбора информации. Броузер обеспечивает отправку введенной пользователем информации обратно на сервер, где она будет обработана какой либо программой-сценарием. В роли такой программы-сценария чаще всего выступает CGI (Common Gateway Interface - стандартный шлюзовой интерфейс), а для написания самих программ CGI используются такие языки программирования, как C, PERL и SHELL.
Создать в HTML-документе форму гораздо проще, чем написать для ее обработки CGI-сценарий, так как для этого необходимо хорошее знание соответствующего языка программирования и возможностей операционной системы Unix.
В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).
Формы передают информацию программам-сценариям в виде пар
[имя переменной]=[значение переменной].
Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Форма открывается тэгом <FORM> и заканчивается тэгом </FORM>. HTML-документ может содержать в себе несколько форм, однако формы должны находиться одна внутри другой. HTML-текст, включая тэги, может размещаться внутри форм без ограничений.
Метка <FORM> может содержать три атрибута, один из которых (ACTION) является обязательным. Вот эти атрибуты:
В самом простом виде форма представляет собой поле, которое должно быть заполнено текстом и какой либо инструмент для отправки серверу данных из формы.
В качестве такого инструмента чаще всего используется кнопка, создать которую можно достаточно просто с помощью дескриптора INPUT:
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы CGI-сценарию , определенному в метке <FORM>.
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" например:
<INPUT TYPE=submit VALUE="Отправка данных">
Объединим теперь оба дескриптора формы в небольшом примере. В нем форма не будет собирать никаких данных, а просто вернет нас снова к тексту этой главы.
<HTML> <HEAD> <TITLE>Пример простой формы</TITLE> </HEAD> <H1>Простейшая форма </H1> <FORM ACTION="lesson4.htm"> <!--Это начало формы--> <INPUT TYPE=submit VALUE="Возврат, к теме "Формы""> </FORM> <!--Это конец формы--> </BODY> </HTML>
Как будет работать эта форма можно увидеть в следующем примере).
Надпись, нанесенную на кнопку, можно тоже при необходимости передать CGI-сценарию путем введения в определение кнопки атрибута NAME=[имя], например:
<INPUT TYPE=submit NAME=button VALUE="Отправка данных">
При нажатии на такую кнопку CGI-сценарий вместе со всеми остальными данными получит и переменную button со значением Отправка данных.
В форме может быть несколько кнопок типа submit с различными именами или значениями. CGI-сценарий, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана CGI-сценарию). Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано CGI-сценарию под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, однако, этот атрибут не обязателен, поскольку в этих случаях форма используется для ввода информации пользователем с клавиатуры.
Основные типы элементов <INPUT>:
<INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван" MAXLENGTH=12>
<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=8>
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с <INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с <INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры <INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции <INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей <INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет
<INPUT TYPE=hidden NAME=version VALUE="1.1">
<INPUT TYPE=reset VALUE="Очистить поля формы">
Если значения, которые должен ввести пользователь в форму, заранее предопределены, то они образуют список, создаваемый с помощью дескриптора <SELECT>.
Меню <SELECT> из n элементов выглядит примерно так:
<SELECT NAME="[имя]"> <OPTION VALUE="[значение 1]">[текст 1] <OPTION VALUE="[значение 2]">[текст 2] ... <OPTION VALUE="[значение n]">[текст n] </SELECT>
Как Вы видите, меню начинается с тэга <SELECT> и заканчивается тэгом </SELECT>. Дескриптор <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню.
Тэг <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать поочередно несколько элементов. Большинство браузеров показывают меню < SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках, то есть количество одновременно отображаемых на экране строк меню, можно задать атрибутом SIZE=[число]). Если атрибут SIZE)не задан, то он принимается равным 1. Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.
Тэг <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тэг <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Разберем небольшой пример.
<SELECT NAME="selection"> <OPTION VALUE="option1" checked>Вариант 1 <OPTION VALUE="option2">Вариант 2 <OPTION VALUE="option3">Вариант 3 </SELECT>
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3.
После всего, что мы уже узнали, дескриптор TEXTAREA может показаться совсем простым. Достаточно сказать, что используется вместо дескриптора INPUT, когда необходимо ввести несколько строк текста. Например:
<TEXTAREA NAME=address ROWS=5 COLS=50> А здесь - Ваш адрес... </TEXTAREA>
Все атрибуты дескриптора являются обязательными. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере — address). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50).
Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты. Если в введенном тексте содержатся какие либо HTML-дескрипторы, например, форматирования, то они будут помещены броузером в область ввода без какой-либо обработки.
Примеры включения в HTML-документ различных типов форм можно посмотреть:
Ниже приведен текст этого HTML-документа
<HTML> <HEAD> <TITLE>Пример различных типов форм</TITLE> </HEAD> <H1>Несколько более сложная форма </H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Расскажите немного о себе...</H2> <P>(Указывать подлинные данные совсем не обязательно. Для целей демонстрации примера вполне подойдут и вымышленные.) </P> <P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR> Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR> Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской <INPUT TYPE=radio NAME=gender VALUE="female">женский<BR> Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR> Где вы учитесь?: <SELECT NAME="selection"> <OPTION VALUE="var1" checked>Школа <OPTION VALUE="var2">Лицей <OPTION VALUE="var3">Гимназия </SELECT> <BR> Какие компьютерные дисциплины Вы бы хотели изучать?<BR> <INPUT TYPE=checkbox NAME=teach VALUE="LANG">Языки программирования<BR> <INPUT TYPE=checkbox NAME=teach VALUE="WD" checked>WEB-дизайн<BR> <INPUT TYPE=checkbox NAME=teachVALUE="LAN">Компьютерные сети<BR> <INPUT TYPE=checkbox NAME=teach VALUE="APP" checked>Оффисные приложения<BR> <BR> Укажите Ваш адрес и контактные телефон: <TEXTAREA NAME=address ROWS=5 COLS=50> Город Киев,... </TEXTAREA> <BR><BR> <INPUT TYPE=submit VALUE="Запустить обработчик"></P> </FORM> </BODY> </HTML>
Как следует из всего вышеизложенного, создание форм - это всего лишь полдела, причем не самая сложная. Однако, все они нуждаются в разработке и написании CGI-сценариев. Отчасти это верно, но только отчасти.
HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике.
Допустим, что мы слегка изменили Пример 12. Вместо строки
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
мы ввели строку
<FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain>
Обратите внимание, что мы изменили алгоритм кодирования на text/plain, то есть фактически выключили кодирование вообще.
Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года, место учебы: гимназия, изучаемая компьютерная дисциплина - WEB-дизайн, а в поле TEXTAREA указан домашний адрес и телефон. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик?
Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:
fn=Иван ln=Петров gender=male age=22 selection=var3 teach=WD adress=Город Киев, ...
К сожалению, не все пользователи смогут воспользоваться такой формой. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке.
В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя тэг <FRAME>, дизайнер НТМL-страницы разделяет экран броузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда пользователь щелкает их мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной.
Хотя фиксация фирменного знака или средств навигации - наиболее очевидные способы использования фреймов, это не значит, что их возможности тем и исчерпываются. Просто перечисленные решения - первое, что приходит в голову дизайнерам, когда они думают о том, как использовать фреймы. Но каждый раз, когда в экран броузера вставляется фрейм, Вы урезаете территорию, на которой можно было бы разместить данные. Чем больше вы вводите фреймов, тем меньше остается полезного пространства и тем скорее Вы запутаете посетителей своей WEB-страницы, незнакомых с навигацией на Web-странице с использованием фреймов.
Тем не менее, фреймы позволяют еще на один шаг приблизиться к идеальному интерфейсу WEB-страницы, добавляя ей такие качества, как логичность и универсальность. Фреймы прекрасно подходят для офоримления следующих элементов WEB-страницы:
На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: тэги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия.
Главное из них состоит в том, содержимое ячеек таблицы указывается в той же HTML-странице, где описана сама таблица. Напротив, структура фреймов описывается в НТМL-странице, называемой frameset. Содержимое же каждого из описанных фреймов - это отдельная HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на удаленном узле где-то в сети.
Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.
Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные тэги и атрибуты.
Построим страницу с двумя фреймами, подобную той, на которую Вы сейчас смотрите. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.
Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Вся информация о структуре фреймов помещается в HTML-страницу, которая загружается первой и является родительской по отношению к страницам, где хранится содержание фреймов.
Для описания фреймов в родительской HTML-странице используется дескриптор FRAMESET с двумя атрибутами COLS и ROWS. Оба они принимают числовые значения (в пикселах или процентах), указывающее на ширину (или высоту) поля экрана, отводимого под соответствующий фрейм. Например
<FRAMESET COLS="30%,70%">
указывает, что создаются два фрейма, для которых страница будет разделена по вертикали в пропорции 30% : 70%. Кстати, вторую цифру можно было и не указывать, заменив ее знаком *, что обозначает всю оставшуюся часть страницы. А можно сделать так:
< FRAMESET ROW="20, 2*, *" >
Число перед знаком *, показывает, что соответствующая строка (в данном случае - средняя) занимает в два раза больше оставшегося на экране места, чем нижняя. Не забывайте, что значения относительны (они зависят от размера экрана). Это часто бывает удобно, ведь вы не всегда знаете, какой у вашего пользователя монитор и какое разрешение он использует.
В принципе, страницу можно разделить вдоль и поперек на любое количество фреймов, но при этом нужно не забывать, что во всем нужна мера.
Далее необходимо внутри дескриптора <FRAMESET> указать URL тех HTML-файлов, где хранится информация, выводимая в каждый фрейм. Для этого используется дескриптор <FRAME> с атрибутом SRC, указывающим на URL соответствующего фреймого файла:
<FRAME SRC=(URL)>
В нашем примере создаются два фрейма, поэтому дескриптор <FRAMEgt; будет повторен тоже дважды. При этом очень важно соблюдать простое правило: Порядок указания фреймовых файлов дескриптором <FRAME> должен соответствовать порядку перечисления их размеров в дескрипторе <FRAMESET>.
Если, предполагается, что в левое поле шириной 30% будет выводиться содержимое фреймого файла a.htm, а в оставшееся поле справа - содержимое файла b.htm, то содержимое родительской HTML-страницы, назовем ее start.htm, будет следующим:
<HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <FRAMESET COLS="30%, 70%"> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> </FRAMESET> </HTML>
Обратите внимание: страница с фреймовой структурой не содержит тага <ВОDY>.
Теперь осталось еще создать два фреймовых файла a.htm и b.htm с простым текстовым содержимым. Например для файла a.htm :
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Это содержимое левого фрейма шириной 30%</H3>
</BODY>
</HTML>
и файла b.htm
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Это содержимое правого фрейма шириной 70%</H3>
</BODY>
</HTML>
В обоих файлах отсутствует привычных дескриптор TITLE, так он не имеет смысла, поскольку все равно не будет виден: ведь фрейм разворачивается не в собственном окне, а в пределах отведенной ему части общего окна HTML-страницы
Теперь посмотрим, что у нас получилось в этом примере.
Теперь попробуем несколько усложнить свою задачу. Во-первых, создадим больше фреймов, причем так, чтобы окно каждого из первоначально созданных фреймов было затем разделено еще на несколько отдельных фреймов.
Во-вторых, для каждого фрейма зададим его параметры (толщину линии границы, отступы от нее и т.д.) с помощью атрибутов.
И в-третьих, добьемся того, чтобы с помощью содержимого одного из фреймов мы могли выбирать, что просматривать в окнах других фреймов.
При решении первой задачи предположим, что каждый из первоначально созданных фрейма будет разделен еще на два окна. Левый фрейм шириной 30% разделим по горизонтали на верхний, высотой 120 пикселей, и нижний. Правый фрейм также разделим на два, причем верхний фрейм займет 80% от общей высоты.
Для реализации этой задачи в родительской HTML-странице all.htm запишем следующее:
<HTML>
<HEAD>
<TITLE>Пример более сложной фреймовой структуры</TITLE>
</HEAD>
<FRAMESET COLS="30%, 70%">
<FRAMESET ROWS="120,*" FRAMEBORDER="no" >
<FRAME SRC="1.htm" MARGINWIDTH="15" MARGINHEIGHT="10">
<FRAME SRC="2.htm" SCROLLING="no" NORESIZE>
</FRAMESET>
<FRAMESET ROWS="80%,*" BORDERCOLOR="OLIVE">
<FRAME SRC="3.htm" NAME="info" BORDER="3" >
<FRAME SRC="4.htm">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Вы видите эту страницу броузером не поддерживающим фреймы.
</BODY>
</NOFRAMES>
</HTML>
Как видим, тэги FRAMESET здесь образуют вложенную структуру, причем внутри каждого контейнера FRAMESET . . . /FRAMESET находятся список соответствующих ему фреймовых файлов. Кроме того, в данном примере наряду с уже известными используются новые атрибуты дескриптора FRAME. Приведем теперь полный списой всех атрибутов этого дескриптора:
В приведенном фрагменте HTML-документа присутствует также дескриптор NOFRAMES. Он предназначен для тех устаревших броузеров, которые не поддерживают фреймы. В этом случае все содержимое контейнера FRAMESET будет проигнорировано, а будет, наоборот, выполняться содержимое контейнера NOFRAMES. Для этого в него включен дескриптор BODY.
Теперь остается сформировать HTML-документы 1.htm, 2.htm, 3.htm и 4.htm. В принципе, здесь нет ничего примечательного, если не считать случая, когда один из фреймовых файлов (2.htm) предназначен для ссылок, по которым будет выполняться навигация в фреймовом файле 3.htm. Для построения таких ссылок используется атрибут TARGET:
<HTML> <HEAD> <TITLE> Меню</TITLE> </HEAD> <BODY> <H3 ALIGN=CENTER>Компания.</H3> <HR> <UL><font color="#400040" size="4"> <LI><a href="3.htm" ТАRGЕТ="info">Главная</a> <LI><a href="5.htm" ТАRGЕТ="info">Новости</a> <LI><a href="6.htm" ТАRGЕТ="info">Товары</a> <LI><a href="7.htm" ТАRGЕТ="info">Услуги</a> <LI><a href="lesson4.htm#glava9-6" ТАRGЕТ="_parent">Выход</a> </UL> </font> </BODY> </HTML>
Заметим, что здесь ничего не говорится о фреймах. О них все сказано в фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся в фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В нашем примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Мы хотим, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме info.
Если для большинства ссылок указывается один и тот же фрейм, то можно задать базовую ссылку, поместив в раздел HEAD HTML-страницы дескриптор <BASE> следующим образом:
<HEAD>
<BASE="(имя фрейма)">
</HEAD>
Поставленная нами задача решена. Вы можете в этом сами убедиться.
"Целевые" фреймы предназначены исключительно для особых случаев. С их помощью можно "вырваться" из текущей фреймовой структуры. Но их применение требует большой осторожности и внимательности, так как можно не только не улучшить, но даже ухудшить навигацию на HTML-странице.
Для "целевых" фреймов зарезервированы следующие имена:
До 1996 года разработчики WEB-страниц никак не могли найти ответ на следующий вопрос: нужно разработывать страницы в расчете на конкретные броузеры или следует сделать выбор в пользу универсального дизайна, подходящего для всех броузеров.
Каскадные таблицы стилей (Cascad Style Sheets)были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0. Их появление положило конец бесконечным спорам WEB-дизайнеров, так как отныне каждый из них мог создавать свой собственный стиль документа, не опасаясь, что он не поддерживается конкретным типом броузера.
Идея положенная в основу таблиц достаточно проста. WEB-дизайнер описывает до мельчайших подробностей гарнитуру и размеры шрифтов, цвет, способы выравнивания и прочие характеристики, обычно указываемые в параметрах контейнеров абзацев. Но при таком описании, он может быть уверен, что заданный стиль, в отличие от контейнерных парамеров, будет однозначно интерпретирован броузером любого типа.
Как и во многих языках программирования, например в PASCAL, описание свойств стиля можно вынести в специальную секцию данных в начале документа. Обычно стиль описывается внутри контейнера STYLE:
<style type="text/css"> <!-- Описание стилей --> </style>
Начнем с простого примера. Нужно описать стили отображения текста в абзаце и заглавии документа:
<html>
<head>
<style type="text/css">
P {color:blue; font-family: Times; font-size:10pt;}
H1 {color:black; font-size:12pt; font-family:Arial; text-align: center;}
</style>
</head>
<body>
<H1>Проверка описания стиля для заглавия</H1>
<P> Проверка описания стиля для абзаца</P>
</body>
</html>
В данном примере для заголовка типа H1 и дескриптора абзаца P заданы определенные стили по шрифту, размеру, цвету и выравниванию текста. Это означает, что при использовании данных дескрипторов в документе мы будем автоматически устанавливать для их содержимого заданный стиль текста.
Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.
С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN.
О контейнере STYLE мы уже говорили выше, поэтому уделим больше внимания остальным.
Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Это очень удобно, если WEB-дизайнер желает, чтобы для всех страниц разработанного им сайта использовались одни и те же стили. В этом случае, вместо того, чтобы в заголовке каждого HTML-документа указывать характеристики применяемых стилей, их описания создаются в отдельном файле листа стилей *.css, ссылка на который из каждого HTML-документа выполняется с помощью тэга LINK формата:
<LINK REL=stylesheet HREF="(URL файла листа стилей)" TYPE="text/css">
Последний атрибут TYPE не является обязательным и может быть пропущен.
Понятно, что WEB-дизанер может размещать файл листа стилей на любом сервере, лишь бы была правильно указана соответствующая ссылка
Контейнер SPAN применяется для указания стиля тех фрагментов текста, которые нельзя однозначно связать с какими-либо контейнерами. Это как бы специальный контейнер для изменения стиля текста. Недостатком его является то, что в листе стилей можно задать только один вариант стиля для этого контейнера, хотя и это дает WEB-дизайнеру большие возможности. Например, с помощью контейнера SPAN можно переопределить стиль фрагмента текста внутри какого-либо другого стандартного контейнера:
<HTML>
<HEAD>
<style TYPE="text/css">
P { color:red; font-size: 24pt; font-family: times;}
SPAN {color:navy; font-size: 18pt; font-family: courier}
</style>
</HEAD>
<BODY>
<P> Это текст, отформатированный с учетом стиля для контейнера <P>.
<SPAN>А это фрагмент текста, стиль которого переопределен с помощью
контейнера <SPAN>.</SPAN> Далее снова идет текст в прежнем стиле</P>
</BODY>
</HTML>
Посмотрим теперь на результат применения контейнера SPAN внутри контейнера P.
Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.
Перечень новых атрибутов у тагов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера:
<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text</h3>
Можно также определить класс стилей и использовать его при помощи атрибута CLASS. В этом случае стиль внутри соответствующего контейнера может быть изменен только если есть ссылка на соответствующий класс:
<HTML>
<HEAD>
<style type="text/css">
H3.class1 {font-size:12pt;color:blue}
H3.class2 {font-size:16pt;font-style:italic; color:green}
</style>
</HEAD>
<BODY>
. . .
<H3>Это текст обычного заголовка третьего уровня</H3>
. . .
<H3 class="class1">Это текст заголовка третьего уровня с учетом класса class1</H3>
. . .
<H3 class="class2">Это текст заголовка третьего уровня с учетом класса class2</H3>
. . .
<H3>Это снова текст обычного заголовка третьего уровня</H3>
</BODY>
</HTML>
В данном случае мы определили два класса заголовков третьего уровня, но можно определить класс all, который можно будет применять к любым контейнерам:
<HTML>
<HEAD>
<style type="text/css">
all.class1 {font-size:12pt;color=blue}
</style>
</HEAD>
<BODY>
<H3 class="class1">Это текст заголовка третьего уровня с учетом класса class1</H3>
<P class="class1">Это текст абзаца с учетом класса class1</P>
</BODY>
</HTML>
Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса:
<HTML>
<HEAD>
<style type="text/css">
H3.class1 {font-size:12pt;color:blue}
#C1 { font-size:20pt;}
</style>
</HEAD>
<BODY>
<H3 class="class1">Это текст синего цвета размером 12 пунктов</H3>
<H3 class="class1" id="C1">Это текст в том же стиле, но с уточнением
размера до 20 пунктов</H3>
</BODY>
</HTML>
Таким образом, атрибуты контейнеров позволяют связать описатели стилей с содержанием контейнеров и управлять формой отображаемой информации.
Ниже перечислены некоторые свойства стилей, которые описываются при их определении в дескрипторе <STYLE>. Все они разбиты на четыре группы:
Первую группу свойств составляют свойства шрифтов:
Вторую группу свойств составляют свойства текста:
Третью группу свойств составляют свойства блоков текста:
Четвертую группу составляют описатели цвета фона и цвета текста:
Кроме того, существуют свойства list-styleопределяющие тип пульки у элементов списка и ряд других свойств элементов HTML-разметки.
Назначение большинства этих свойств очевидно. При этом одни из них дублируют дейсвия, которые можно получить с помощью обычных HTML-дескрипторов, а другие позволяют сделать то, что невозможно сделать никаким иным способом. Для каждого свойства имеются несколько опций, одна из которых указывается при описании стиля за данным названием свойства через двоеточие. Свойства в описании стилей отделяются друг от друга точкой с запятой. Ниже в таблице приведены примеры опций некоторых свойств:
| Свойство | Значение | Пример опций |
|---|---|---|
| font-family | Название шрифта | Arial, Serif (с засечками), Symbol (символьный) |
| font-size | Число/величина в процентах | 12pt (12 пунктов), +1, 120% |
| font-weight | Число/уровень | +1, light(легкий), medium (средний), extra bold (слишком жирный) |
| font-style | Название стиля | italic (курсив), normal (обычный) |
| font | Сочетание всех возможностей стилей в применеии к шрифту | 12pt Serif medium small caps (12 пунктов, с засечками, средний, капитель) |
| color | Слово/шестнадцатиричное слово | red (красный), FF00FF |
| background | Цвет/оттенок/имя файла/td> | green (зеленый), orange (оранжевый), square.gif |
| word-spacing | Число+единицы измерения | 1pt (1 пункт), 4em (4 эм), 1in (1 дюйм) |
| text-spacing | Число+единицы измерения | 3pt (3 пункта), 2em (2 эм), +1 |
| text-decoration | Слово | underline (подчеркивание), line through (перечеркивание), box (рамка), blink (мерцание) |
| vertical-align | Слово/величина в процентах | baseline (базовая линия), sup (по верхнему уровню), sub (по нижнему уровню), middle (по центру), 50% |
| text-align | Слово | left (по левому краю), right (по правому краю), center (по центру), justify (по ширине) |
| text indent | Число/величина в процентах | 1in (1 дюйм), 5%, 3em (3 эм) |
| margin | Число | 0.5in (0.5 дюйма), 2em (2 эм) |
| list-style | Слово/URL | disc (круг), circle (окружность), square (квадрат), lower alpha |
| white-space | PRE/Normal | PRE (моноширинный), normal (нормальный) |
Собственно и не стоило бы говорить о Java, если бы не возможность использования небольших мобильных программ, которые можно передавать по сети и исполнять на компьютере пользователя. Эти программы в терминологии Java называются апплетами (яблочками). Для встраивания вызовов апплетов в текст НТМL-документа и отведения места для отображаемой апплетом информации в НТМL был введен контейнер АРРLЕТ, который начинается тагом <APPLET> и кончается тагом </APPLET>. Вместе с дескриптором АРРLЕТ для передачи броузеру специфических параметров кнкретного апплета JAVA используется дескриптор PARAM. Дескриптор АРРLЕТ допускает использование атрибутов CODE, CODEBASE, HEIGHT и WIDTH. В общем случае ссылка на апплет имеет следующий вид:
<APPLET CODEBASE=(URL) CODE=(файл апплета.class) width=число height=число> <PARAM NAME="(имя_параметра)" VALUE="(строка/число)"> . . . Альтернативный HTML-текст для броузеров, не поддерживающих Java </APPLET>
Атрибут CODEBASE указывает путь к серверу с апплетом, но без имени самого файла, содержащего апплет. Атрибут CODE задает имя апплета, причем с обязательным указанием расширения .class, указывающим на то, что файл является откомпилированным классом JAVA. Содержимое дескриптора PARAM обычно берется из описания апплета, где указано, какие параметры ему можно задать.
На различных сайтах Internet находятся большие библиотеки JAVA-апплетов. Например, апплет FLAG.CLASS можно включить в HTML-страницу и задать его параметры следующим образом:
<HTML> <BODY bgcolor="#000000" LINK="FFFF10" TEXT="FFFFFF" VLINK="00FFC0" ALINK="00FFC0"> <HR> <BR> <applet code=Flag.class width=100 height=60> <param name=film value="flag.gif"> <param name=frames value=16> <!-- Время воспроизведения каждого кадра --> <param name=delay value=100> <!-- Интервал в миллисекундах между кадрами --> </applet> <BR> <HR> </BODY> </HTML>
Теперь посмотрим, что получилось.
Сразу же на главной странице сайта нужно указать данные автора - WEB-мастера (фамилию и E-mail), для пожеланий посетителей.
Укажите также дату последнего изменения WEB-страницы, чтобы читатели видели, есть ли новинки.
Все новости можно указывать в ссылке "Что нового?" на первой странице сайта
Откажитесь от ненужных ссылок, например, от уведомления о выходе из WEB-страницы.
Почаще посещайте свой собственный сайт, так как многие ошибки видны "со стороны".
На главной странице не следует размещать ссылки на другие сайты, иначе посетитель сразу же покинет вашу WEB-страницу.
Используйте META-дескрипторы. Этим вы оказываете помощь поисковым машинам.
Используйте продуманную иерархию заголовков. Ваш документ будет читаться гораздо лучше, если в нем будет четкое разбиение на разделы и подразделы.
Следите за вложенностью дескрипторов и не забывайте закрывать контейнеры
Всегда указывайте альтернативный текст для изображений, так как читатели могут отключить их автоматическую загрузку.
При разработке крупных многостраничных сайтов всегда создавайте оглавление. Это может облегчить пользователю работу с документом, особенно если документ носит справочный характер.
Хорошо продумайте навигацию, чтобы из любой страницы было удобно сделать переход или возврат. Это поможет Вам спроектировать удобную в пользовании коллекцию HTML-документов.
Не доверяйте полностью визуальным редакторам HTML. Помните, что большинство из них имеют мелкие или крупные недостатки.
Обязательно проверяйте свою WEB-страницу на совместимость хотя бы с наиболее популярными браузерами.
Включайте в состав WEB-страницы апплеты, видео- и аудио-файлы только в самом крайнем случае, так как они очень замедляют загрузку