Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Пример 2.21. Встраивание таблицы стилей в HTML-документ.




Пример 2. 21. Встраивание таблицы стилей в HTML-документ.

< HTML>

< HEAD>

< TITLE> Встраивание таблицы стилей в HTML-документ < /TITLE>

< LINK REL=STYLESHEET HREF=" styles. css" Type=" text/css" >

< STYLE TYPE=" text/css" >

<! - -

 

H1{font-size: 24; font-weigt: bold; color: red; margin-left: 10%}

 

H2{font-size: 20; font-weigt: bold; color: black; font-family: courier}

 

P. italic {font-style: italic}

 

P. red {color: red}

 

- ->

< /STYLE>

< /HEAD>

 

< BODY BGCOLOR=" yellow" >

< H1> Встроенная таблица стилей< /H1>

< P> Обычный текст

< H2> Заголовок второго уровня< /H2>

< P CLASS=italic> Наклонный текст

< P CLASS=red> Текст красного цвета

< /BODY>

< /HTML>

 

Результат выполнения примера 2. 21 имеет вид (рис. 2. 22)

 

Рис. 2. 22. Просмотр примера 2. 21 (таблица стилей в HTML-документе)

Стили в операторах HTML

Пример 2. 22. Стили в операторах HTML

< HTML>

< HEAD>

< TITLE> Стили в операторах HTML < /TITLE>

< /HEAD>

< BODY BGCOLOR=" yellow" >

< H1 STYLE=" font-size: 24; font-weigt: bold; color: red; margin-left: 10%" >

Стили в операторах HTML< /H1>

< P> Обычный текст

< H2 STYLE=" font-size: 20; font-weigt: bold; color: black; font-family: courier" >

Заголовок второго уровня< /H2>

< P STYLE=" font-style: italic" > Наклонный текст

< P STYLE=" color: red" > Текст красного цвета

< /BODY> < /HTML>

Результат выполнения примера 2. 22 имеет вид (рис. 2. 23)

Рис. 2. 23. Просмотр примера 2. 22 (стили в операторах HTML)

В примерах (2. 19 — 2. 22) используются идентичные стилевые свойства. Формы использования стилевых свойств различны. Идентичность стилевых свойств, несмотря на различие форм их использования, приводит к идентичности отображения Web-страниц (рис. 2. 20 — 2. 23).

 

2. 8. Интерактивные Web-страницы

Современные версии HTML (версия 4. 0 и выше) дают возможность проектировать активные Web-страницы, поддерживающие диалог с пользователем и изменяющие свой вид в зависимости от этого диалога. Материал, изложенный в предыдущих разделах методических указаний, позволяет проектировать так называемые статические Web-страницы[1] и не рассматривает возможностей проектирования активных Web-страниц, так как предназначен для первоначального освоения Web-технологии. Возможности проектирования активных Web-страниц будут рассмотрены в других методических указаниях.

В настоящем разделе рассмотрим одну из возможностей проектирования активной Web-страницы на основе форм.

Форма предназначена для логического объединения элементов управления в группы и обеспечения взаимодействия пользователя с сервером WWW.

Механизм взаимодействия:

- На сервере WWW установлены программы (приложения CGI[2]), которые через протокол HTTP получают “упакованную” в форму информацию от удаленного пользователя.

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

В документе HTML, который создается для ввода информации, предназначенной для обработки, размещается форма ввода с элементами управления.

 

Элемент < FORM>. Синтаксис: элемент является контейнером.

< FORM атрибут_1=" значение_1" атрибут_2=" значение_2" > . . . < /FORM>

Для создания в форме разнообразных органов управления (полей ввода, списков выбора, переключателей, кнопок и так далее) используются элементы: < INPUT>, < TEXTAREA>, < SELECT> и другие.

Собственные атрибуты элемента < FORM>

Наименование атрибута Описание атрибута
action action= " URI" указывает обработчик формы на сервере, которому передаются данные. URI содержит адрес сервера и программы на сервере. Например, http: //server_name/ directory/ program_name. Альтернатива — передача данных action= " URI", используя почтовую программу клиента. Указывается почтовый префикс — mailto: //uri.
method Указывает метод отправки данных. Принимает значения: - get для передачи небольших сообщений; - post универсальный метод, используемый для передачи данных любого объема.
enctype Применяется для метода post и указывает тип передаваемых серверу данных. По умолчанию — application/x-www-form-urlencoded.
name Имя, которое используется для доступа к элементу< form>.
target Указывает окно, в котором будет отображаться информация. Принимает значения: frame_name, _blank, _self, _parent, _top
accept accept=" content_type". Указывает тип данных, которые использует форма.
accept-charset accept-charset =" content_type". Указывает кодировку символов, используемых пользователем.

В качестве содержания контейнер < FORM> . . . < /FORM> включает:

 

- блочные заголовки < H1> . . . < H6>, элементы: < P>, < DIV>, < DL>, < PRE>, < BLOCKQUOTE>, < FIELDSET>, < ADDRESS>, < HR>, < TABLE>, списки < UL>, < OL>, скрипты < SCRIPT>, < NOSCRIPT>;

- встроенные элементы:

- текст;

- элементы физического форматирования — < B>, < BIG>, < I>, < S>, < STRIKE>, < SMALL>, < TT>;

- элементы логического форматирования — < EM>, < STRONG>, < DFN>, < CODE>, < SAMP>, < KBD>, < VAR>, < CITE>, < ABBR>, < ACRONIM>;

- специального назначения — < A>, < IMG>, < MAP>, < APPLET>, < OBJECT>, < SCRIPT>, < SPAN>, < IFRAME>, < FONT>, < BASEFONT>, < BR>, < SUB>, < SUP>, < BDO>, < Q>;

- форм — < INPUT>, < SELECT>, < TEXTAREA>, < BUTTON>, < LABEL>.

Контейнер допускает отсутствие содержания.

 

Пример. 2. 23. Фрагмент программы для ввода пароля.

< FORM name=" форма_пароль" action=" http: //server_domain_name/cgi-bin/processed_programm. cgi" method=" get" >

введите пароль:

< INPUT type=" password" name=" " user_login>

< INPUT type=" submit" value=" press" >

< /FORM>

Соответствующая форма — форма_пароль, будет иметь вид (рис. 2. 24):

 

Рис. 2. 23. Просмотр примера 2. 24 (форма_пароль)

Элемент < INPUT>. Оператор < INPUT> предназначен для ввода элементов управления в форму. В качестве элементов управления могут использоваться: поля ввода текстовой информации, поля ввода пароля, флажки, переключатели, кнопки, а также органы управления для передачи локального файла через навигатор в удаленный сервер WWW.

 

Синтаксис: одиночный оператор. Закрывающий оператор отсутствует. < INPUT type=" тип_элемента" атрибут_2=" значение" >

Собственные атрибуты элемента < FORM>

Наименование атрибута Описание атрибута
type Задает тип органа управления. Принимает значения: - text задает поле ввода одной строкой. Атрибут size задает число символов. По умолчанию присваивается и выводится на экран значение, заданное атрибутом value. Например, < INPUT type=" text" size=" 35" maxlength=" 50" value=" Sample of text" >; - password аналогично text, символы высвечиваются в виде звездочек; - checkbox переключатель типа Check Box. Предназначен для использования отдельно или в наборе независимых переключателей. Начальное значение: value= " on" — " ложь" value=" checked" — " истина"; - radioпереключатель для группы зависимых переключателей. Используется для выбора одного значения из нескольких. Переключатели одной группы имеют одинаковое значение атрибута name. Значение атрибута value различаются - fileсоздает элемент для выбора и передачи файла. Обычно, строка для ввода имени и кнопка; - hidden скрытое поле, которое не отображается. Анализируется сервером; - buttonкнопка с заданной надписью. Надпись кнопки определяется значением атрибута value: - value=" submit" кнопка передачи данных из заполненной формы. Текст надписи задается значением атрибута value: - value=" image" создается кнопка-изображение. В операторе указываются атрибуты src и alt; - value=" reset" предназначена для “сброса” формы. Надпись на кнопке задается атрибутом value.
size Определяет размер элемента ввода в символах или пикселях. В символах для text и password, в пикселях для остальных.
accept Используется для указания типа данных.
name Задает имя элемента.
value Задает начальное состояние или значение элементов (по умолчанию).
maxlength Указывает максимальное значение длины строки.
disabled Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям.
readonly Не позволяет изменять содержимое для элементов “ввод текста” и “ввод пароля. ”
alt Задает альтернативный текст.
usemap Указывает на карту, обрабатываемую на стороне клиента.
ismap Указывает на карту, обрабатываемую на стороне сервера.
tab-index Определяет порядок перемещения по элементам ввода при помощи клавиши Tab.
accesskey Назначает “горячую” клавишу для организации доступа к элементу.  

Элемент < TEXTAREA>. Оператор < INPUT> с параметром type, имеющим значение text, позволяет вставить в форму поле редактирования одной текстовой строки. Если необходимо использовать многострочный текст, то необходимо использовать оператор < TEXTAREA>, который применяется совместно с < /TEXTAREA>.

 

Собственные атрибуты элемента < TEXTAREA>

Наименование атрибута Описание атрибута
name Определяет имя элемента, которое используется при передаче данных. Аналогичен атрибуту id.
rows Определяет число строк текста на экране. При необходимости создается вертикальная полоса прокрутки.
cols Определяет число символов в каждой строке, то есть задает ширину поля ввода текста. При необходимости создается горизонтальная полоса прокрутки.
disabled Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям.
readonly Не позволяет изменять содержимое для элементов “ввод текста” и “ввод пароля”.
tab-index Определяет порядок перемещения по элементам ввода при помощи клавиши Tab.
accesskey Назначает “горячую” клавишу для организации доступа к элементу.

Элемент < BUTTON> используется, если необходимо создать кнопку без использования элемента < INPUT>. В этом случае кнопка обладает большими функциональными возможностями и к ней можно “подключить” блочные и встроенные HTML-элементы, за исключением < a>, < input>, < select>, < textarea>, < label>, < button>, < form>, < fielset>.

Синтаксис: < button type=" " . . . > . . . < /button>

Собственные атрибуты элемента < button>

Наименование атрибута Описание атрибута
type Указывает тип кнопки. Принимает значения: type=" button" создается кнопка произвольного назначения type=" submit" создается кнопка “Отправить” type=" reset" создается кнопка “Очистить”.
value Задает начальное состояние или значение элементов (по умолчанию).
name Определяет имя элемента, которое используется при передаче данных. Аналогичен атрибуту id.
disabled Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям.
tab-index Определяет порядок перемещения по элементам ввода при помощи клавиши Tab.
accesskey Назначает “горячую” клавишу для организации доступа к элементу.

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

 

Синтаксис: < SELECT> < OPTION> . . . < OPTION> . . . < /SELECT>

Собственные атрибуты элемента SELECT

Наименование атрибута Описание атрибута
name Обязательный. Определяет имя элемента, которое передается на сервер.
size Определяет видимое число строк списка. Создается полоса прокрутки.
multiple По умолчанию список подразумевает одиночный выбор. Если атрибут multiple задан, то можно выбирать более одного элемента списка.
disabled Делает элемент неактивным, то есть щелчки на нем Не приводят к каким-либо последствиям.
tab-index Определяет порядок перемещения по элементам ввода при помощи клавиши Tab.

Элементы < OPTION> и < OPTGROUP>. Элемент < OPTION> является элементом выбора в меню и используется совместно с элементом < SELECT>. Элемент < OPTGROUP> применяется для связывания нескольких элементов < OPTION> в логическую группу. Элемент < OPTGROUP> допускает вложенность.

 

Собственные атрибуты элемента < OPTION>

Наименование атрибута Описание атрибута
value Задает начальное значение элементов (по умолчанию). Если атрибут не задан, то ему присваивается значение строки, которая записана в контейнере < OPTION>.
selected Задает выбранный элемент.
label Определяет метку элемента.
disabled Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям.

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

Синтаксис: < LABEL> . . . < /LABEL>

Собственные атрибуты элемента < LABEL>

Наименование атрибута Описание атрибута
for Определяет имя элемента, которому противопоставляется надпись. Сама надпись размещается в контейнере < LABEL>.
accesskey Назначает “горячую” клавишу для организации доступа к элементу.

Содержание контейнера < LABEL> может включать:

- текст;

- элементы физического форматирования — < B>, < BIG>, < I>, < S>, < STRIKE>, < SMALL>, < TT>;

- элементы логического форматирования — < EM>, < STRONG>, < DFN>, < CODE>, < SAMP>, < KBD>, < VAR>, < CITE>, < ABBR>, < ACRONIM>;

- специального назначения — < A>, < IMG>, < MAP>, < APPLET>, < OBJECT>, < SCRIPT>, < SPAN>, < IFRAME>, < FONT>, < BASEFONT>, < BR>, < SUB>, < SUP>, < BDO>, < Q>;

- форм — < INPUT>, < SELECT>, < TEXTAREA>, < BUTTON>, < LABEL>.

 

Элементы < FIELDSET> и < LEGEND>. Если необходимо организовать подпись не к одному, а к нескольким элементам и свести их в группу, то необходимо использовать элементы < FIELDSET> и < LEGEND>. Причем < FIELDSET> является контейнером, в которые вкладываются формы, а < LEGEND> объединяет подписи к группе.

Синтаксис:

< FIELDSET attribute=" value" >

< LEGEND> . . . < /LEGEND>

< LEGEND> . . . < LEGEND>

< /FIELDSET>

Собственные атрибуты элемента < LEGEND>

Наименование атрибута Описание атрибута
align Выравнивание относительно блока < FIELDSET>. Принимает значения: top, left, right, bottom.
accesskey Назначает “горячую” клавишу для организации доступа к элементу.

Содержание для элемента < FIELDSET> может включать:

- блочные заголовки < H1> . . . < H6>, элементы: < P>, < DIV>, < DL>, < PRE>, < BLOCKQUOTE>, < FIELDSET>, < ADDRESS>, < HR>, < TABLE>, списки < UL>, < OL>, скрипты < SCRIPT>, < NOSCRIPT>.

Как < FIELDSET>, так и < LEGEND> могут включать встроенные элементы:

- текст;

- элементы физического форматирования — < B>, < BIG>, < I>, < S>, < STRIKE>, < SMALL>, < TT>;

- элементы логического форматирования — < EM>, < STRONG>, < DFN>, < CODE>, < SAMP>, < KBD>, < VAR>, < CITE>, < ABBR>, < ACRONIM>;

- специального назначения — < A>, < IMG>, < MAP>, < APPLET>, < OBJECT>, < SCRIPT>, < SPAN>, < IFRAME>, < FONT>, < BASEFONT>, < BR>, < SUB>, < SUP>, < BDO>, < Q>;

- форм — < INPUT>, < SELECT>, < TEXTAREA>, < BUTTON>, < LABEL>.

 

Пример 2. 24. Положим, что мы проводим социологический опрос среди студентов. Форма, которая бы поставляла данные на сервер и там обрабатывалась, могла бы иметь вид:

 

Приведенной форме соответствует HTML-документ:

 

< HTML>

< HEAD>

< TITLE> Форма_экзамен< /TITLE>

< /HEAD>

< BODY>

< FORM ACTION=" Экзаменационная_сессия" METHOD = " POST" >

< P> < STRONG> Какую оценку вы получили< /STRONG> < /P>

< DL>

< DD> < INPUT TYPE=" RADIO" NAME=" оценка" VALUE=" отлично" > отлично

 < INPUT TYPE=" RADIO" NAME=" оценка" VALUE=" хорошо" > хорошо

< INPUT TYPE=" RADIO" CHECKED NAME=" оценка" VALUE= " удовлетворительно" > удовлетворительно

< INPUT TYPE=" RADIO" NAME=" оценка" VALUE= " неудовлетворительно" > неудовлетворительно< /DD>

< /DL> < P> < STRONG> Экзамен по какой дисциплине вы сдавали? < /STRONG>

< DL> < DD> < SELECT NAME=" экзамен" SIZE=" 1" >

< OPTION SELECTED> Информатика< /OPTION>

< OPTION> Мат_анализ< /OPTION>

< OPTION> Иностранный_язык< /OPTION>

< OPTION> Управление_персоналом< /OPTION>

< OPTION> Организация_производства< /OPTION>

< OPTION> (другой)< /OPTION>

< /SELECT> другой: < INPUT TYPE=" TEXT" SIZE=" 26" MAXLENGTH=" 256" NAME=" объект_другой" > < /DD>

< /DL>

< P> < STRONG> Перечислите, пожалуйста, экзаменационные вопросы: < /STRONG> < /P> < DL> < DD> < TEXTAREA NAME=" вопросы" ROWS=" 5" COLS = " 42" > < /TEXTAREA> < /DD> < /DL>

< P> < STRONG> Ваши данные для контактов: < /STRONG> < /P>

< DL>

< DD>

< TABLE>

< TR>

< TD> Имя

< TD> < INPUT TYPE=" TEXT" SIZE=" 35" MAXLENGTH=" 256" NAME= " USERNAME" >

< /TR>

< TR>

< TD> E-MAIL

< TD> < INPUT TYPE=" TEXT" SIZE=" 35" MAXLENGTH=" 256" NAME= " USEREMAIL" >

< /TR>

< TR>

< TD> Телефон

< TD> < INPUT TYPE=" TEXT" SIZE=" 35" MAXLENGTH=" 256" NAME= " USERTEL" >

< /TR>

< TR>

< TD> FAX

< TD> < INPUT TYPE=" TEXT" SIZE=" 35" MAXLENGTH=" 256" NAME=" USERFAX" >

< /TR>

< /TABLE>

< /DD>

< /DL>

< DL>

< DD> < INPUT TYPE=" CHECKBOX" NAME=" Собственная оценка" VALUE= " Собственная оценка" > Соответствует ли, по вашему мнению, оценка вашим знаниям < /DD>

< /DL>

< P> < INPUT TYPE=" SUBMIT" VALUE=" SUBMIT COMMENTS" > < INPUT TYPE=" RESET" VALUE=" CLEAR FORM" > < /P>

< /FORM>

< /BODY>

< /HTML>

 

Форма, заполненная и готовая к пересылке на сервер, приведена ниже. Пересылка формы выполняется при нажатии кнопки Submit Comments. Сброс формы, то есть приведение формы в исходное состояние, выполняется кнопкой Clear Form.

 


[1] Статическая Web-страница — Web-страница, которая не изменяется во времени без вмешательства администратора сервера WWW

[2] CGI – стандартный шлюзовый интерфейс (Common Gateway Interface) для запуска внешних программ под управлением сервера WWW.

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...