Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

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

Динамика и детерминанты показателей газоанализа юных спортсменов в восстановительном периоде после лабораторных нагрузок до отказа...

Техника безопасности при работе на пароконвектомате: К обслуживанию пароконвектомата допускаются лица, прошедшие технический минимум по эксплуатации оборудования...

Интересное:

Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...

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

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

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Как можно улучшить простой HTML-документ

2019-07-11

246

0.00 из 5.00 0 оценок

Заказать работу

Содержание

Стр 1 из 6Следующая ⇒

Институт управления,

Бизнеса и права

Дашко Ю.В.

Алекперов И.Д.

Цай А.В.

Практическое руководство

По HTML

(2 издание)

Ростов-на-Дону

2003

Оглавление

1. Что такое HTML?. 4

2. Первый HTML-документ. 5

2.1 Как устроен HTML-документ. 5

2.2 Обязательные метки <html>... </html>. 6

3. Как можно улучшить простой HTML-документ. 8

3.1 Абзац. 8

3.1.1 Внутри абзаца. Непарные метки, вводимые только маленькими буквами <BR>. 8

3.1.2 &-последовательности. 9

3.1.3 Комментарии. 9

3.2 Форматирование шрифта. 10

3.2.1 Физические стили. 10

3.2.2 Логические стили. 10

4. Организация текста внутри документа. 12

4.1 Ненумерованные списки: <UL>... </UL>. 12

4.2 Нумерованные списки: <OL>... </OL>. 12

4.3 Списки определений: <DL>... </DL>. 13

4.4 Вложенные списки. 14

4.5 Форматированный текст: <PRE>... </PRE>. 15

5. За пределами HTML-файла. 16

5.1 Связывание. 16

5.2 Изображения в HTML-документе. 18

6. Тайное становится явным, или Видимое действие невидимых меток. 20

6.1 Цветовая гамма HTML-документа. 20

6.2 Заголовок HTML-документа: что в нем может быть. 21

интересного?. 21

7. Таблицы. Для чего нужны таблицы?. 25

7.1 Как устроена таблица?. 25

8. Фрейм. Что такое фрейм?. 29

8.1 Для чего можно использовать фреймы?. 29

8.2 Создание простой страницы с фреймами. 30

8.2.1 Задание фреймовой структуры.. 30

8.2.2 Подготовка содержимого фрейма. 31

8.2.3 Подготовка фрейма main. 32

8.2.4 Использование тега <NOFRAMES>. 34

8.2.5 Специфические теги и атрибуты фреймов. 35

9. Формы. Для чего нужны формы?. 40

9.1 Как устроена форма?. 40

9.2 Простейшая форма. 41

9.3 Как форма собирает данные?. 42

10. Некоторые советы по разработке и размещению HTML-страниц. 46

10.1 Где можно бесплатно разместить свою страничку?. 47

Это руководство содержит азы языка HTML, необходимые при опубликовании документации любого рода на глобальной компьютерной сети Интернет. Насколько велика Интернет, точно не знает никто. Точное число пользователей просто никому не известно. Известно только, что оно очень велико – несколько сот миллионов человек по всему миру.

Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) на Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (Hyper Text Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW).

Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет. Например, разработать в текстовом процессоре Microsoft Word, а затем перенести в формат HTML и разместить на сервере.

Что такое HTML?

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2, 4.0 и т.д.

Для освоения HTML по этому Руководству Вам понадобятся две вещи:

1. Любой броузер, т.е., программа, пригодная для просмотра HTML-файлов (Internet Explorer).

2. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной кодировке. Если на компьютере установлен Windows, вполне подойдет Word.

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

Первый HTML-документ

Как устроен HTML-документ

HTML-документ – это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).

Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски – tag, читается "тэг").

Большинство HTML-меток – парные, т.е. на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты броузером одинаково.

2.2 Обязательные метки <html>... </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head>... </head>

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

<title>... </title>

Все, что находится между метками <title> и </title>, толкуется броузером как название документа. Internet Explorer, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body>... </body>

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

< H 1>... </ H 1> — < H 6>... </ H 6>

Метки вида <Hi> (где i – цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня, естественно, – самый мелкий.

<P>... </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Абзац

3.1.1 Внутри абзаца. Непарные метки, вводимые только маленькими буквами <BR>

Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. Очень удобно при публикации стихов.

<HR>

Метка <HR> описывает вот такую горизонтальную линию:

Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселях) и/или WIDTH (определяет размах линии в процентах от ширины экрана).

3.1.2 &-последовательности

Поскольку символы "<" и ">" воспринимаются броузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Броузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than – меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than – больше, чем).

Символ "&" (амперсанд) кодируется последовательностью &

Двойные кавычки (") кодируются последовательностью "

Помните: точка с запятой – обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., строчные). Использование меток типа &QUOT; или &AMP; не допускается.

&-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &- последовательностей.

Комментарии

Браузеры игнорируют любой текст, помещенный между . Это удобно для размещения комментариев.

Форматирование шрифта

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

Физические стили

Под физическим стилем принято понимать прямое указание броузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.

Текст, размещенный между этими метками<TT> и </TT>, будет написан шрифтом, имитирующим пишущую машинку, т.е. имеющим фиксированную ширину символа.

Логические стили

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

<EM>... </EM>

От английского emphasis – акцент.

<STRONG>... </STRONG>

От английского strong emphasis – сильный акцент.

<CODE>... </CODE>

Рекомендуется использовать для фрагментов исходных текстов.

<SAMP>... </SAMP>

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

<KBD>... </KBD>

От английского keyboard – клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

<VAR>... </VAR>

От английского variable – переменная. Рекомендуется использовать для написания имен переменных. Вы сможете увидеть, как Ваш броузер показывает те или иные логические стили.

Вложенные списки

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

Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.

4.5 Форматированный текст: <PRE>... </PRE>

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

Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted – предварительно форматированный), выводится броузером на экран как есть – со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

4.6 Текст с отступом: <BLOCKQUOTE>... </BLOCKQUOTE>

Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится броузером на экран с увеличенным левым полем.

За пределами HTML-файла

Связывание

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

В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:

<A HREF="[адрес перехода]">выделенный фрагмент текста</A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое – это задать имя другого HTML-документа, к которому нужно перейти. Например:

<A HREF="index.html">Перейти к оглавлению</A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ index.html.

Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

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

На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если необходимо дать ссылку на сайт Сальского филиала Института управления, бизнеса и права, придется ввести в свой HTML-документ примерно такой фрагмент:

<A HREF="http://www.iubip.ru/salsk/index.html"> Сальский филиал ИУБиП</A>

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

Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html:

<A NAME="AAA">Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер:

<A HREF="2.html#AAA">Переход к анкеру AAA</A>

Переход к этому анкеру можно также определить и внутри самого документа 2.html – достаточно только включить в него вот такой фрагмент:

<A HREF="#AAA">Переход к анкеру AAA</A>

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

Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами, следить за написанием имен анкеров: большинство броузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет на анкер AAA, хотя документ, скорее всего, будет загружен корректно.

Возможны так же ссылки и на другие виды ресурсов:

<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.

<A HREF="mailto:user@mail.box">Послать письмо</A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.

Интересного?

Заголовок HTML-документа не виден пользователю при просмотре. Однако в нем есть некоторые интересные особенности, которые стоит знать.

Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций. META-инструкция – это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные META-инструкции:

Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.

Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера (со стороны очень похоже, что именно такой подход был использован, например, при создании сервера технической поддержки фирмы Novell, ведущего производителя операционных систем для локальных компьютерных сетей).

Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов:

Эта META-инструкция дает броузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251.

Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8.

Такая META-инструкция дает броузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так:

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

http:// www.iubip.ru/salsk/index.html.

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

Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что броузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей.

В отличие от всех примеров, которые мы рассматривали ранее, этот пример состоит не из одного, а из трех файлов. Используя META-инструкцию Refresh, мы создадим небольшой слайд-фильм из трех кадров (файлов e0010.html, e0010a.html и e0010b.html), которые будут циклически повторяться. Для остановки демонстрации нужно будет воспользоваться любой из гипертекстовых ссылок.

Фрейм. Что такое фрейм?

В каком-то смысле фрейм – это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя тэг <FRAME>, дизайнер НТМL-страницы разделяет экран броузера на части. В результате пользователь, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, можно построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются при щелчке мышкой по ним, изменяется только часть экрана, а сама полоска навигации остается неподвижной.

Задание фреймовой структуры

Для начала необходимо представить себе общий вид страницы, – где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тэга <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тэга <ВОDY>.

Это весь код, необходимый для задания фреймовой структуры. Обратите внимание на тэг <NOFRAMES> (к нему еще вернемся). В результате получается экран, разделенный на два окна. Левое окно занимает 25 процентов экрана и содержит страницу с названием a.html. Окно справа займет 75 процентов и вначале покажет файл b.html. Пока их нет, видна страница с двумя пустыми фреймами. Прежде чем она появится, необходимо пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы. Правую страницу мы назвали <main> (<главная>) с помощью строки:

Это означает, что фрейм под именем main будет содержать страницу b.html. Поскольку нет необходимости в показе в левом фрейме никаких страниц, кроме menu.html, его не нужно называть.

Подготовка содержимого фрейма

Нужно загрузить фреймы с содержимым и задать страницу menu.html в левом фрейме, где нужно щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл menu.html – это обычная НТМL-страница, построенная как оглавление. На самом деле можно взять готовую страницу с оглавлением и использовать ее. Нужно запомнить, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована. Теперь необходимо определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Если нужно, чтобы они отображались в правом фрейме, то необходимо добавить атрибут ТАRGET= (TARGЕТ="main") в тэг ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая страница появляется во фрейме main. Если все страницы будут отражаться во фрейме main, нужно добавить атрибут ТАRGЕТ="main" во все тэги ссылок в оглавлении. Если не определить атрибут ТАRGЕТ, то страница появится там, где щелкнули мышкой, – в левом фрейме, что в данном случае не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, можно добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление длиннее, чтобы пользователи видели как можно больше ссылок. Ниже приведен код для левого фрейма menu.html.

Здесь ничего не говорится о фреймах. О них все сказано во фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся во фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Необходимо, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы.

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

8.2.4 Использование тега <NOFRAMES>

У многих пользователей еще остались броузеры, не умеющие обращаться с фреймами. По этим причинам разумно предоставить доступ к версии основных страниц без фреймов. Если пользователь с устаревшим броузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тэгами <NOFRAMES> и </NOFRAMES>, будет выглядеть отлично – броузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать тэги <ВODY></ВОDY>. Возможно, придется иначе организовать экран без фреймов.

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

На тот случай, если нет уверенности при использовании <NOFRAMES>, ниже приведен пример страницы с фреймовой структурой с добавленным в конце разделом <NOFRAMES>.

Поддерживающий фреймы броузер проигнорирует все, что находится между тегами <NOFRAMES> и </NOFRAMES>. И наоборот, не поддерживающий фреймы броузер проигнорирует все, что находится между тэгами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

Как устроена форма?

Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.

Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

ACTION

Обязательный атрибут. Определяет, где находится обработчик формы.

METHOD

Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE

Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.

Простейшая форма

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

Встретив такую строчку внутри формы, броузер нарисует на экране кнопку с надписью Submit (читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:

Это простой способ написания простой формы. Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!

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

Как форма собирает данные?

Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов <INPUT>:

TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:

<INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван">

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:

<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля – 10 символов. Введенный пароль передается обработчику в переменной pw.

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:

<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 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

<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> Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.

TYPE=hidden

Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования можно придумать:

<INPUT TYPE=hidden NAME=version VALUE="1.1">

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=reset

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

<INPUT TYPE=reset VALUE="Очистить поля формы">

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

Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.

Меню <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=[число]). Меню <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 (по умолчанию), option 2 или option 3.

Элемент <TEXTAREA> может показаться совсем простым. Например:

<TEXTAREA NAME=address ROWS=5 COLS=50> А здесь - Ваш адрес...</TEXTAREA>

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере – address). Атрибут ROWS устанавливает высоту окна в строках (в примере – 5). Атрибут COLS устанавливает ширину окна в символах (в примере – 50).

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

Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.

Вложенность меток

Современные броузеры способны правильно обработать вложенные метки. Например, вот такой фрагмент HTML-текста

<B><I>жирный наклонный шрифт</I></B>

большинство броузеров вполне успешно воспроизведут как жирный наклонный шрифт. Метки <I>...</I> в этом фрагменте находятся внутри меток <B>...</B>. Другими словами, метки вложены одна в другую.

Работа броузера, однако, окажется сильно затрудненной, если вложенность окажется нарушенной, например:

<B><I>вложенность меток нарушена</B></I>

Соблюдение вложенности – очень важная часть общей культуры написания HTML-текста.

Навигация

Допустим, что в распоряжении пользователя нет кнопки Back(Назад). Необходимо обеспечить пользователю свободу перемещения в этом случае. Это поможет спроектировать удобную в пользовании навигацию HTML-документов.

Институт управления,

Бизнеса и права

Дашко Ю.В.

Алекперов И.Д.

Цай А.В.

Практическое руководство

По HTML

(2 издание)

Ростов-на-Дону

2003

Оглавление

1. Что такое HTML?. 4

2. Первый HTML-документ. 5

2.1 Как устроен HTML-документ. 5

2.2 Обязательные метки <html>... </html>. 6

3. Как можно улучшить простой HTML-документ. 8

3.1 Абзац. 8

3.1.1 Внутри абзаца. Непарные метки, вводимые только маленькими буквами <BR>. 8

3.1.2 &-последовательности. 9

3.1.3 Комментарии. 9

3.2 Форматирование шрифта. 10

3.2.1 Физические стили. 10

3.2.2 Логические стили. 10

4. Организация текста внутри документа. 12

4.1 Ненумерованные списки: <UL>... </UL>. 12

4.2 Нумерованные списки: <OL>... </OL>. 12

4.3 Списки определений: <DL>... </DL>. 13

4.4 Вложенные списки. 14

4.5 Форматированный текст: <PRE>... </PRE>. 15

5. За пределами HTML-файла. 16

5.1 Связывание. 16

5.2 Изображения в HTML-документе. 18

6. Тайное становится явным, или Видимое действие невидимых меток. 20

6.1 Цветовая гамма HTML-документа. 20

6.2 Заголовок HTML-документа: что в нем может быть. 21

интересного?. 21

7. Таблицы. Для чего нужны таблицы?. 25

7.1 Как устроена таблица?. 25

8. Фрейм. Что такое фрейм?. 29

8.1 Для чего можно использовать фреймы?. 29

8.2 Создание простой страницы с фреймами. 30

8.2.1 Задание фреймовой структуры.. 30

8.2.2 Подготовка содержимого фрейма. 31

8.2.3 Подготовка фрей

12 3 4 5 6 Следующая ⇒

Поделиться с друзьями:

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

Особенности сооружения опор в сложных условиях: Сооружение ВЛ в районах с суровыми климатическими и тяжелыми геологическими условиями...

Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...