HTML. Основные теги

реклама
1
Язык HTML
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги
могут быть одиночными и парными, для которых обязательно наличие открывающего и
закрывающего тэгов (такая пара тэгов называется контейнером). Закрывающий тэг
содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными,
так и строчными буквами.
HTML-код страницы помещается внутрь контейнера < HTML> </ HTML>.
Заголовок Web-страницы заключается в контейнер < HEAD> </ HEAD> и
содержит название документа.
Название Web-страницы содержится в контейнере <TITLE></TITLE> и
отображается при ее просмотре в строке заголовка браузера.
Основное содержание страницы помещается в контейнер <ВОDY></ВОDY>
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
</HEAD>
<BODY>
...................
</BODY>
</HTML>
Фон документа
<BODY BGCOLOR=”название цвета”>
или
<BODY BACKGROUND=”url изображения”>
Заголовки
Заголовки служат для выделения логических частей текста. Всего может быть
шесть уровней заголовков: от <Нl> (самый крупный) до <Н6> (самый мелкий).
Выравнивание заголовка в тексте: ALIGN=”вид выравнивания (center, right, left)”
Например:
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
</HEAD>
<BODY BGCOLOR=”gray”>
<Н1 align=”center”>Все о компьютере</Н1>
<Н3 align=”left”>Программное обеспечение</Н3>
</BODY>
</HTML>
Заголовок целесообразно отделить от остального содержания страницы
горизонтальной линией с помощью одиночного тэга <HR> (можно задать цвет и
толщину линии)
<HR> (тонкая черная линия)
2
<HR color="red" size=5> (толстая красная линия)
Форматирование текста
С помощью тэга <FONT> и его атрибутов можно задать параметры
форматирования шрифта любого фрагмента текста.
Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial").
Атрибут SIZE - размер шрифта (например, SIZE=4).
Атрибут COLOR - цвет шрифта (например, COLOR="blue").
Например:
<FONT FACE=”Arial” SIZE=3 COLOR=”red”>
Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При
просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца
можно задать определенный тип выравнивания.
Переход на новую строку – одиночный тэг <BR>
<I> - курсив
<U> - подчеркнутый
<B> - полужирный
Например:
<P ALIGN="left"> <i>Ha этом</i> сайте вы сможете <br>получить
<b>различную</b> информацию о компьютере, <u>его программном</u>
обеспечении и ценах на компьютерные комплектующие.
</P>
Вставка изображений.
BACKGROUND=”url изображения”На Web-страницах
графические файлы трех форматов
GIF, JPG и PNG.
<IMG SRC="url изображения">
могут
размещаться
BACKGROUND=”url изображения” BACKGROUND=”url изображения”Например:
<IMG SRC=" http://www.server.ru/computer.gif" >
<IMG SRC=" С: \computer\computer.gif" >
Если файл с изображением находится в той же папке, где и главная страница, то
путь указывать не надо, только имя:
<IMG SRC="computer.gif" >
Пользователи иногда, в целях экономии времени, отключают в браузере загрузку
графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и
функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является
текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC="computer.gif" АLТ="Компьютер">
?
Расположить рисунок относительно текста различным образом позволяет атрибут АLIGN
тэга <IMG>, который может принимать пять различных значений: TOP(верх), MIDDLE
(середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
3
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения
должен принять следующий вид:
<IMG SRC="computer.gif" ALТ="Компьютер" ALIGN="right">
!
Выравнивание «right» и «left» работает, а чтобы расположить рисунок
по центру лучше использовать контейнер <center> </center>:
<center>
<IMG SRC="computer.gif" ALТ="Компьютер">
</center>
Атрибут WIDTH позволяет задать размер рисунка. Например:
<IMG SRC="computer.gif" ALТ="Компьютер" WIDTH=”200” ALIGN="right">
Гиперссылки на Wеb-страницах
Первая титульная страница должна обеспечивать посетителю Web-сайта
возможность начать «путешествие» по сайту. Для этого на титульную страницу должны
быть помещены гиперссылки на другие страницы сайта.
Для создания гиперсвязей между титульной страницей и другими страницами сайта
необходимо, прежде всего, создать заготовки Web-страниц. Такие «пустые» страницы
должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы
необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий НТМL-код:
<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Контейнер гиперссылки <А>< /А> с атрибутом HREF, значением которого является URLадрес документа на локальном компьютере или в Интернете. Контейнер должен
содержать указатель гиперссылки:
<A HREF="URL">Указатель гиперссылки</A>
Например:
[<A HREF="glоssаrу.htm">Словарь</А>]
Принято размещать гиперссылки в нижней части страницы
Такое размещение гиперссылок часто называют панелью навигации.
4
Панель навигации будет представлять собой абзац, выровненный по центру, в котором
указатели гиперссылок разделены пробелами (&nbsp):
Например:
<P ALIGN= "center">
[<A HREF="software.htm">Программы</А>] &nbsp
[<A HREF="glоssаrу.htm">Словарь</А>] &nbsp
[<A HREF="hardware. htm">Комплектующие</А>] &nbsp
[<A HREF="anketa.htm">Aнкетa</A>]
</P>
Гиперссылка в виде рисунка:
<a href="page.html"><img src="images/pict.JPG" border="0" width="100"
height="70"alt="Подробнее"></a>
Вставка комментария
<!-- текст комментария -->
Вставка аудио и видео
Чтобы вставить на страницу звуковой файл или видеоизображение, используется
контейнер гиперссылки <А>< /А>
<A HREF="имя файла с расширением">Поясняющий текст </A>
Файлы могут быть в форматах MP3, WAV, AVI, ...
Например:
<a href="sound.wav">Послушать Президента </a>
<p align="center" ><br><br><font size="+1"><a href="video.mpg"> Кадры
старой хроники<br><font size="+0"> </a>(40 Мб)</font></p><br>
Полезно на титульной странице сайта создать ссылку на адрес электронный почты,
по которому посетители могут связаться с администрацией сайта. Для этого необходимо
5
атрибуту ссылки HREF присвоить URL-адрес электронной почты и вставить ее в
контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для
указания адреса, и содержащий адрес электронной почты.
Упражнение 6
Вставить в титульную страницу код, создающий ссылку на адрес
электронной почты:
<ADDRESS>
<A HREF="mailto:[email protected]">E-mail: [email protected]</A>
</ADDRESS>
По щелчку мыши по ссылке адреса электронной почты будет открываться почтовая
программа Outlook Expгess (или другая используемая по умолчанию почтовая программа),
где в строке “Кому”) будет указан заданный в ссылке адрес.
Созданная титульная страница Web-сайта «Компьютер» содержит заголовок,
рисунок, текст, панель навигации и ссылку на адрес электронной почты.
ВОПРОСЫ
1. Какую функцию выполняют гиперссылки на Web-страницах?
2. Что может использоваться в качестве объекта для создания гиперссылки?
3. Чем различаются абсолютный и относительный адреса документа?
Практические задания
1. Разместите панель навигации и электронный почтовый адрес на титульной странице
вашего сайта.
2. Разместите панель навигации на всех страницах вашего сайта.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки, в
различных вариантах:
 нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
 маркированные списки (в HTML их принято называть ненумерованными), когда
элементы списка идентифицируются с помощью специальных символов (маркеров);
 списки определений, позволяющие составлять перечни определений в так называемой
словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему
типу отличаться от основного.
На странице «Программы» разместим информацию об основных типах
программного обеспечения компьютера в форме вложенного списка.
Сначала создадим основной нумерованный список основных категорий
программного обеспечения. Список располагается внутри контейнера <OL></OL>, а
каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL>
можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а"
(прописные буквы) и др.
Упражнение 7 Открыть в Блокноте файл softwaгe.htm, ввести заголовок Программное
обеспечение и добавить следующий НТМL-код, задающий список:
<OL>
<LI>Системные программы
<LI>Прикладные программы
6
<LI>Системы программирования
</OL>
Создадим теперь вложенный ненумерованный список для одного из элементов
основного списка. Список располагается внутри контейнера <UL></UL>, а каждый
элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL>
можно задать вид маркера списка: "disc" (диск) – по умолчанию, "square" (квадрат) или"
circle" (окружность).
Упражнение 8 Добавить НТМL-код, задающий вложенный список для элемента <LI>
Прикладные программы:
<UL>
<LI TYPE="square" > текстовые редакторы;
<LI TYPE="circle" > графические редакторы;
<LI>электронные таблицы;
<LI>системы управления базами данных.
</UL>
Страницу «Словарь» мы представим в виде словаря компьютерных терминов.
Для этого используем контейнер списка определений <DL></DL>. Внутри него текст
оформляется в виде термина, который выделяется непарным тегом <DT> и определения,
которое следует за тегом <DD>.
Упражнение 9
Открыть в Блокноте файл glossary.htm, ввести заголовок
Компьютерные термины и добавить следующий НТМL-KOД, задающий список
определений:
<DL>
<DТ>Процессор
<DD>Центральное устройство компьютера, производящее обработку информации
в двоичном коде
<DТ>Оперативная память
<DD>Устройство, в котором хранятся программы и данные
</DL>
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Какие типы списков могут быть созданы на Web-страницах?
Практические задания
1. Примените на Web-странице вложенный список, содержащий разные типы списков.
Таблицы на Wеb-страницах
Элемент таблицы TABLE применяется в HTML-документах как
для табличного представления символьных и графических
данных, так и для разбиения страницы на отдельные области, в
которых располагается содержимое различных HTML-элементов
7
(например, логотип сайта, баннер и элементы интерфейса
навигации)
Строки (элемент TR)
Каждая строка таблицы начинается тегом <TR>, а заканчивается </TR>. Закрывающий тег
</TR> не обязателен, но его рекомендуется ставить для обозначения границы каждой
строки. Внутри каждого элемента TR размещается описание ячеек заголовков или ячеек
данных. Шаблон кода простой таблицы имеет вид:
<TAВLE>
<ТR><!--Первая строка таблицы--></ТR>
<ТR><!--Вторая строка таблицы--></ТR>
……………………………………………………………………………………………………
…
<ТR><!--Последняя строка таблицы--></ТR>
</TABLE>
Ячейки (элемент TD)
Для описания содержимого отдельных ячеек таблицы предназначен парный тег <TD>.
Текстовое содержимое ячеек данных по умолчанию отображается шрифтом, заданным в
начальных настройках браузера.
Составим НТМL-код небольшой таблицы, например, со списком адресов российских
чатов. Будем считать, что такая таблица состоит из четырех строк по две ячейки в каждой:
< HTML >
<HEAD>
<ТIТLЕ>Пример таблицы</ТIТLЕ>
</HEAD>
<BODY>
<Н2>Российские чаты</Н2>
<TABLE border=l>
<TR>
<ТD>Название чата</ТD>
<ТD>Адрес</ТD>
</TR>
<TR>
<ТD>СуперМегаЧат</ТD>
<TD>http://smchat.ru/</TD>
</TR>
<TR>
<ТD>Клуб ACЬKa</TD>
<TD>http://asya-сlub.ru/</ТD>
</TR>
<TR>
<TD>RusТusovka</TD>
<TD>http://www.rustusovka.com/</TD>
</TR>
</TABLE> </BODY> < /HTML >
8
Каждая строка таблицы в данном примере содержит одинаковое количество ячеек, а начальный тег <TAВLE> дополнен атрибутом border=l. Если бы атрибут border отсутствовал, браузер отобразил бы таблицу без рамок.
Ширина таблицы (атрибут width)
Ширина таблицы - это параметр, общий для всех ее строк, и поэтому задается он в теге
<TAВLE> атрибутом width. Значение ширины может быть установлено как в пикселах,
так и в процентах (от полной ширины окна браузера). Например, тег
<TAВLE width=300>
задает таблицу с шириной всех строк, равной 300 пикселам. для построения таблицы
шириной, например, 55% окна вам достаточно записать такой тег
<TAВLE width="55%">
Задание ширины в процентах имеет то преимущество, что строки таблицы будут, как
правило, полностью отображаться в окне браузера (без прокрутки).
Выравнивание таблицы в документе (атрибут align)
Для назначения положения таблицы относительно боковых границ окна браузера применяется атрибут align тега <TAВLE>. Этот атрибут может принимать одно из трех
значений: left (размещение таблицы вдоль левого края документа; это значение задается
по умолчанию), center (центрирование) и right (размещение таблицы вдоль правого края
документа). Например, таблица шириной 25% от размера окна браузера, расположенная
вдоль правого края страницы, задается следующим HTМL-KOДOM:
<HТМL>
<HEAD>
<ТIТLЕ>Выравнивание таблицы</ТIТLЕ>
</HEAD>
<BODY>
<TAВLE border="l" width="25%" align="right" >
<ТR><ТD>Магазин</ТD></ТR>
<ТR><ТD>Наши возможности</ТD></ТR>
<ТR><ТD>Наши планы</ТD></ТR>
<ТR><ТD>Корзина</ТD></ТR>
<ТR><ТD>Регистрация</ТD></ТR>
<ТR><ТD>Помощь</ТD></ТR>
</TAВLE>
</BODY>
</HTМL>
9
Вывод внешней рамки (атрибут border)
Если в элементе TABLE отсутствует атрибут border (либо он равен нулю), браузер создаст
таблицу без видимой рамки (границы). Таблицы без рамок часто используются для
позиционирования различных компонентов страницы:
Если атрибут border указан, то есть дескриптор таблицы имеет вид
<TABLE border>
то таблица будет отображена с внешними и внутренними границами в виде двойной линии толщиной 1 пиксел. для задания иной толщины внешней границы нужно указать
числовое значение атрибута border, например, тег
<TAВLE border=10>
определяет таблицу с внешней границей 10 пикселов и линиями внутренних границ 1
пиксел
10
Ширина границ таблицы (атрибут cellspacing)
Границы таблицы по умолчанию отображаются двойной линией, причем расстояние
между линиями (зазор) равно 2 пиксела. Если вы хотите изменить величину зазора
в двойной линии, необходимо тег <TAВLE> дополнить атрибутом cellspacing (в переводе
- расстояние между ячейками). Значение этого атрибута, которое задается положительным
целым числом, определяет толщину двойной линии границ.
Расстояние, от содержимого ячейки до рамки (атрибут cellpadding)
В HTМL предусмотрен атрибут cellpadding, задающий расстояние в пикселах от
содержимого ячейки до рамки. Этот атрибут применяется в составе тега <TAВLE>. ПО
умолчанию значение cellpadding устанавливается равным 1 пикселу.
В качестве примера действия атрибута cellpadding приведем две таблицы, содержащиеся в
следующем HTМL-дoкyмeнтe:
<HTМL>
<НЕAD>
<ТIТLЕ>Атрибут cellpadding</TITLE>
</НЕAD>
<BODY>
<Н2>Таблицы с различным расстоянием от содержимого до границы ячейки</Н2>
<TAВLE border=l>
<ТR>
<ТD>Без атрибута</ТD>
<TD>cellpadding</TD>
</TR>
11
</TAВLE>
<TAВLE border=l cellpadding =30 >
<TR>
<TD>C атрибутом</ТD>
<ТD>cellpadding =30</ТD>
</ТR>
</TABLE>
</BODY>
</HТМL>
Форматирование строк и ячеек
Рассмотренные выше свойства относились к таблице в целом, но часто возникает необходимость задать специальное форматирование для ячеек строки. для этого предусмотрены атрибуты тега <TR>. Например, размеры ячеек строки устанавливаются знакомыми
вам атрибутами width (ширина) и height (высота)
Выравнивание содержимого
По умолчанию содержимое всех ячеек выравнивается по левому краю каждой ячейки (за
исключением заголовков, для которых установлено выравнивание по центру). Для задания
иного вида выравнивания в теги <TR> или <TD> вводятся атрибуты align, принимающие,
как обычно, значения left, right, Например, теги
<TR align="right">
<TD align="center">
определяют соответственно выравнивание содержимого всех ячеек строки (тег <TR>) по
правой границе ячеек и выравнивание содержимого конкретной ячейки (тег <TD>) по
центру.
С помощью атрибута valign вы можете задавать выравнивание содержимого по вертикали.
Этот атрибут применяется с такими значениями: top (выравнивание по верхнему краю
12
ячеек), bottom (по нижнему краю ячеек), middle (центрирование по вертикали. Например,
тег
<TR valign="middle">
назначает центрирование по вертикали содержимого ячеек строки.
А смещение к верхнему краю ячейки устанавливается тегом:
<ТН valign="top">
3адание ширины и высоты
При создании Web-страниц часто возникает необходимость установления линейных
размеров (высоты и ширины) компонентов таблицы. Для задания высоты в тегах <TD>,
<ТН> и <TR> предусмотрен знакомый вам атрибут height. Ширина элементов <TD> и
<ТН> определяется атрибутом width. Целочисленные значения этих атрибутов задают
размеры в пикселах. Например, ячейка данных высотой 30 и шириной 70 пикселов задается тегом
<TD height=30 width=70>
Объединение ячеек таблицы
Все рассмотренные нами ранее примеры таблиц имели в каждой строке одинаковое количество ячеек. Но иногда приходится создавать таблицы, в которых смежные ячейки
должны быть объединены. Достигается это использованием в начальных тегах <ТН> или
<TD> следующих атрибутов.
rowspan - предназначен для объединения ячеек смежных строк. Значение атрибута
задает количество объединяемых ячеек.
colspan - назначает объединение ячеек смежных столбцов.
Рассмотрим пример НТМL-документа, в котором таблица имеет объединенные ячейки:
<HTМL>
<HEAD>
<ТIТLЕ>Объединение ячеек</ТIТLЕ>
</НЕAD>
<BODY>
<Н2>Магазин "Школяр" предлагает учебники:</Н2>
<TAВLE border>
<ТR><ТН>Предмет</ТН><ТН>Раздел</ТН><ТН>Классы</ТН></ТR>
<TR>
<TD
rоwsрan=5>Математика</ТD><ТD>Арифметика</ТD><TD>l–
4</TD>
</TR>
<ТR>
<ТD>Алгебра</ТD><ТD>5– 11</TD>
</TR>
<ТR>
13
<ТD>Геометрия</ТD> <ТD>7– 11</TD>
</TR>
<ТR>
<ТD>Тригонометрия</ТD> <ТD>10– 11</TD>
</TR>
<TR>
<TD colspan=2><I>Количество наименований: 1090</I></TD>
</TR>
<TR>
<TD rоwsрan=4>Физика</ТD><ТD>Механика</ТD><TD>5– 7</TD>
</TR>
<ТR>
<ТD>Электричество</ТD> <ТD>7– 9</TD>
</TR>
<ТR>
<ТD>Оптика</ТD> <ТD>10– 11</TD>
</TR>
<TR>
<TD colspan=2><I>Количество наименований: 457</I></TD>
</TR>
</TABLE>
</BODY>
</HTML>
14
Формы на Wеb-страницах
Для того чтобы посетители сайта могли не только просматривать информацию, но
и отправлять сведения его администраторам, на страницах сайта размещают формы.
Формы представляют собой управляющие элементы различных типов: текстовые поля,
раскрывающиеся списки, флажки, переключатели и Т.д.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из
наших посетителей, с какими целями и с помощью каких программ получает и использует
информацию из сети Интернет, а также выясним, какую информацию они хотели бы
видеть на нашем сайте.
Вся форма заключается в контейнер <FORM></FORM>. В первую очередь
выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь
возможность ответить ему на замечания и поблагодарить за посещение сайта.
Текстовые поля. Для получения этих данных разместим в форме два
однострочных текстовых поля для ввода информации. Текстовые поля создаются с
помощью тэга <INPUT> со значением атрибута TYPE="text". Атрибут NAМE является
обязательным и служит для идентификации полученной информации. Значением атрибута
SIZE является число, задающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга
перевода строки <BR>.
Упражнение 10 Открыть в Блокноте файл anketa.htm и добавить следующий НТМLкод, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере:
<FORM>
Пожалуйста, введите Ваше имя: <BR>
<INPUT TYPE="text" NAME="name" SIZE=30><BR>
E-mail: <BR>
<INPUT TYPE="text" NAME="e-mail" SIZE=30>
</FORM>
Переключатели. Далее, мы хотим выяснить, к какой пользовательской группе
относит себя посетитель. Дадим ему возможность выбрать один из нескольких
предложенных вариантов: учащийся, студент, учитель.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается
такая группа с помощью тэга <INPUT> со значением атрибута TYPE="radio". Все
элементы в группе должны иметь одинаковые значения атрибута NAМE. Например,
NAМE="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим
значения" schoolboy", "student" и "teacher". Значения атрибута VALUE должны быть
уникальными для каждой «радиокнопки», т.к. при ее выборе именно они передаются
серверу.
Атрибут СНЕСКЕD, который задает выбор кнопки по умолчанию, в данном случае не
используется.
Упражнение 11 Добавить НТМL-код, создающий группу переключателей для выбора
одного варианта. Просмотреть страницу в браузере:
Укажите, к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE="radio" NAME="group" VALUE=”schoolboy”> учащийся<BR>
15
<INPUT TYPE="radio" NAME="group" VALUE=”student”> студент<BR>
<INPUT TYPE="radio" NAME="group" VALUE=”teacher”> учитель<BR>
Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель
пользуется наиболее часто. Здесь из предложенного перечня он может выбрать
одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге со
значением атрибута TYPE="checkbox".
Флажки, объединенные в группу, могут иметь одинаковые значения атрибута
NAМE. Например, NAМE="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим
значения "www", "e-mail" и "ftp". Значения атрибута VALUE должны быть уникальными
для каждого флажка, т.к. при его выборе именно они передаются серверу.
Атрибут СНЕСКЕD, который задает выбор кнопки по умолчанию, в данном случае
не используется.
Упражнение 12
Добавить НТМL-код, создающий флажки для выбора нескольких
вариантов. Просмотреть страницу в браузере:
Какие из сервисов Интернета вы используете наиболее часто:<BR>
<INPUT TYPE="checkbox" NAМE="group" VALUE="www"> WWW<BR>
<INPUT TYPE="checkbox" NAМE="group" VALUE="e-mail "> e-mail<ВR>
<INPUT TYPE="checkbox" NAМE="group" VALUE="ftp"> FTP<BR>
Списки. Теперь выяcним, какой из браузеров предпочитает посетитель сайта.
Перечень браузеров представим в виде раскрывающегося списка, из которого можно
выбрать только один вариант. Для реализации такого списка используется контейнер
<SELECT></SELECT>, в котором каждый элемент списка определяется тэгом <OPTION>.
Выбранный по умолчанию элемент задается с помощью атрибута SELECTED.
Упражнение 13 Добавить НТМL-код, создающий раскрывающийся список для выбора
одного варианта. Просмотреть страницу в браузере:
<SELECT NAМE="browsers">
<OPTION SELECTED> Internet Explorer
<OPTION> Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT> <BR>
Текстовая область. В заключение поинтересуемся, что хотел бы видеть
посетитель на наших страницах, какую информацию следовало бы в них добавить. Так
как мы не можем знать заранее, насколько обширным будет ответ читателя, отведем для
него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно
подробный текст.
Создается такая область с помощью тэга <TEXTAREA> с обязательными
атрибутами: NAМE, задающим имя области, ROWS, определяющим число строк, и COLS
- число столбцов области.
16
Упражнение 14
Добавить НТМL-код, создающий текстовую область для ввода
комментариев, просмотреть страницу в браузере:
Какую еще информацию вы хотели бы видеть на нашем сайте?<ВR>
<TEXTAREA NAМE="resume" ROWS=4 COLS=30>
</TEXTAREA><BR>
Отправка данных из формы. Отправка введенной в форму информации или
очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки
создаются с помощью тэга <INPUT>. ДЛЯ создания кнопки, которая отправляет
информацию, атрибуту TYPE необходимо присвоить значение" submit", а атрибуту
VALUE, который задает надпись на кнопке, присвоить значение "Отправить".
Для создания кнопки, которая производит очистку формы, атрибуту TYPE необходимо
присвоить значение"reset", а атрибуту VALUE - значение "Очистить".
Упражнение 15 Добавить НТМL-код, создающий кнопки:
<INPUT TYPE="submit" VАLUЕ="Отправить">
<INPUT TYPE="reset" VАLUЕ="Очистить">
Заполненная форма отправляется на сервер, где обрабатывается специальной
программой - СGI-скриптом, или по электронной почте автору сайта, где он уже
самостоятельно обрабатывает полученные данные.
Для того чтобы при щелчке по кнопке Отправить данные из формы передавались
на сервер и там обрабатывались, необходимо указать, куда их отправить и какая
программа будет их обрабатывать. Эти параметры задаются с помощью атрибута ACTION
контейнера <FORM>.
<FORM ACTION="URL"></FORM>
Атрибут ACTION определяет URL-адрес программы, расположенной на Webсервере, которая обрабатывает полученные данные из формы. Пусть программой, которая
заносит данные из формы в базу данных, будет программа bd.exe.
Обычно такие программы хранятся в каталоге cgi-bin, тогда атрибут ACTION будет
выглядеть следующим образом:
АСТIОN="http:/www.mycompany.ru/cgi-bin/bd.exe"
Скачать