Списки Маркированные списки
реклама
Списки Для наглядного представления информации на Web-страницах часто используются списки. Маркированные списки Самым распространенным типом списка, использующегося в Web, является маркированный список. В графических браузерах напротив каждого элемента такого списка находится маркер, который может иметь вид, например, большого черного кружка или квадратика. При создании маркированных списков используются тэги <UL> и </UL>. Все элементы маркированных списков определяются с помощью тэга <LI>. Когда браузер встречает очередной тэг <LI>, он переходит на новую строку. В каждом элементе списка могут содержаться другие HTML-элементы, а также дополнительные вложенные списки. Упражнение 1. В EditPlus создайте новый файл и сохраните его под именем list.html. 2. В файле list.html наберите следующее: <html> <head> <title> Маркированный список </title> </head> <body> <h1>Маркированный список</h1> <h2>Цвета радуги</h2> <ul> <li> Красный <li> Оранжевый <li> Желтый <li> Зеленый <li> Голубой <li> Синий <li> Фиолетовый </ul> </body> </html> 3. Сохраните и посмотрите результат. Чтобы изменить тип маркера для всего списка, воспользуйтесь синтаксисом <UL TYPE=тип>, а для одного элемента списка - <LI TYPE=тип>, где параметр тип – это одно из значений: Disk – заполненный кружок; Square – заполненный квадратик; Circle – незаполненный кружок. Упражнение Измените тип маркера у списка в файле list.html и посмотрите результат. Нумерованные списки Нумерованный список создается с помощью контейнера <OL></OL>. Каждый элемент списка определяется внутри этого контейнера с помощью дескриптора <LI>. При создании нумерованного списка используется следующий синтаксис: <ol> <li> Первый элемент списка <li> Второй элемент списка … <li> Последний элемент списка </ol> Каждый дескриптор <li> служит для определения одного элемента списка. Упражнение 1. В EditPlus создайте новый текстовый файл и сохраните его под именем num.html. 2. В файле num.html наберите следующее: <html> <head> <title> Нумерованный список </title> </head> <body> <h1> Нумерованный список </h1> <hr> <h2>Для создания Web-страницы необходимо следующее</h2> <ol> <li> Компьютер <li> Текстовый редактор <li> Браузер </ol> </body> </html> 3. Сохраните и посмотрите результат. По умолчанию элементы списка нумеруются с помощью обычных арабских цифр. Но можно сделать так, чтобы для нумерации использовались буквы алфавита или римские цифры. Стиль форматирования списка определяется с помощью следующего синтаксиса: <ol type=тип>. Параметр тип может принимать следующие значения: 1 – стандартный способ нумерации с помощью арабских цифр; а – строчные буквы алфавита; А – прописные буквы алфавита; i – строчные римские цифры; I – прописные римские цифры. Например, для нумерации упорядоченного списка с помощью строчных бук алфавита используется следующий код: <ol type=a>. Упражнение 1. В файл num.html добавьте следующий код: <h2>Виды браузеров:</h2> <ol type=I> <li> Internet Explorer <li> Netscape Navigator <li> Opera <li> Mozilla </ol> 2. Сохраните и посмотрите результат Нумерацию списка можно начать с любой цифры или буквы. Для этого используется атрибут START: <ol start=значение> Параметр значение – это число. Таким образом, код <ol start=8> означает, что нумерация элементов списка будет начинаться с числа 8. Списки определений Еще один тип списка – это список определений. Списки определений чем-то напоминают толковые словари, так как каждому термину соответствует абзац определения, расположенный с отступом. Это средство незаменимо в том случае, если нужно создать список элементов с их подробным описанием (например, для каталогов розничных товаров или недвижимости). Список определений содержится в контейнере <DL></DL>. Элементы списка определений создаются с использованием дескрипторов <DT> и <DD>, с помощью которых отмечаются термин и его определение соответственно. Упражнение 1. В EditPlus создайте новый текстовый файл и сохраните его под именем def.html. 2. В файле def.html наберите следующее: <html> <head> <title> Пример списка определений </title> </head> <body> <h1> Списки определений </h1> <hr> <h2>Породы собак</h2> <dl> <dt> Шетландская овчарка <dd> Небольшая дружелюбная собака, немного напоминающая колли. Выведена на Шетландских островах <dt> Бассет-хаунд <dd> Собака средних размеров, очень дружелюбная. Отличается большими висячими ушами и удрученным выражением морды. </dl> <hr> </body> </html> 3. Сохраните и посмотрите результат. Вложение и комбинирование списков При желании можно комбинировать различные типы списков, а также вкладывать их друг в друга независимо от того, к одному или к разным типам они относятся. Упражнение 1. В EditPlus создайте новый текстовый файл и сохраните его под именем book.html. 2. В файле book.html наберите следующее: <html> <head> <title> Вложение списков </title> </head> <body> <h1> Вложенные списки </h1> <hr> <h2>Содержание</h2> <ul> <li> Глава 1 <li> Глава 2 <ol> <li> Списки <li> Маркированные списки <li> Нумерованные списки <li> Списки определений </ol> <li> Глава 3 <li> Глава 4 </ul> <hr> </body> </html> 3. Сохраните и посмотрите результат. Упражнение 1. В редакторе EditPlus откройте файл about.html, который мы создали ранее в папке Homepage. 2. Представьте информацию о себе, о своих увлечениях в виде списка. 3. Сохраните и посмотрите результат. Формы Формы предназначены для отображения и сбора информации. Потребность в формах возникает, когда вы хотите поместить на страницу анкету для сбора некоторых данных. HTML-формы располагаются между открывающим дескриптором <FORM> и закрывающим дескриптором </FORM>. Все, что расположено между ними, является либо описанием поля формы, либо текстом или графическими элементами, предназначенными для отображения в форме. Открывающий дескриптор имеет следующий синтаксис: <FROM METHOD=”метод” ACTION=”имя сценария”> Атрибуту METHOD могут быть присвоены значения GET и POST. Он определяет способ, посредством которого сервер пересылает CGI-сценарию полученную от формы информацию. Значение параметра имя сценария представляет собой URL CGI-сценария, используемого для обработки данных, полученных от этой формы. Определение типа поля ввода Чаще всего в формах используется дескриптор <INPUT>. Он не имеет закрывающего дескриптора. Основной синтаксис данного дескриптора: <INPUT NAME=”имя поля” TYPE=”тип поля” VALUE=”значение”> При записи дескриптора ключевое слово INPUT всегда должно быть указано первым, а порядок следования остальных атрибутов – произвольный. Присвоение имени создаваемому полю Значение параметра имя поля определяет имя, которое присваивается создаваемому полю ввода. Каждое создаваемое поле ввода должно иметь собственное уникальное имя. Определение типа поля Выражение тип поля может принимать следующие значения: TEXT, HIDDEN, PASSWORD, CHECKBOX, RADIO, SUBMIT и RESET. Атрибут TYPE указывает браузеру, поле какого типа должно быть помещено в форму. TEXT Данное значение указывает браузеру, что нужно создать входное текстовое поле. Подобные поля предназначены для ввода любой текстовой информации, которая может уместиться в одной строке. Это может быть, например, имя, дата рождения или сорт мороженного. Дополнительно может быть указан атрибут VALUE, определяющий начальное значение этого поля. Если такой атрибут опущен, созданное поле в исходном состоянии будет пустым, но если ему присвоено некоторое значение, браузер поместит это значение в созданное поле. Например, при обработке дескриптора <INPUT NAME=”Фамилия” TYPE=”TEXT” VALUE=”Иванов”> текст Иванов будет помещен в созданное поле в качестве начального значения. Если пользователь не внесет в поле изменений, от значение Иванов будет отправлено CGI-сценарию в качестве фамилии пользователя. Для поля типа TEXT можно использовать два дополнительных атрибута – SIZE и MAXLENGTH. Атрибут SIZE задает размер создаваемого поля ввода. Например, если добавить к приведенному выше примеру дескриптора атрибут SIZE=40, то созданное поле будет иметь размер, достаточный для ввода 40 символов. По умолчанию принимается значение 20, поэтому, если данный атрибут опущен, браузер создаст поле, предназначенное для ввода только 20 символов. Атрибут MAXLENGTH определяет максимальное количество символов, которые пользователь сможет ввести в данное поле. Например, если необходимо ограничить длину поля фамилии десятью символами, достаточно поместить в дескриптор <INPUT> атрибут MAXLENGTH=10. HIDDEN Это специальный (скрытый) тип текстового поля. Браузер не отображает его. Скрытые поля полезны, если необходимо указать требуемую для CGI-сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. PASSWORD Данное поле (поле пароля) является еще одним специальным типом текстового поля. Оно обрабатывается аналогично обычному текстовому полю. Но браузер не отображает на экране вводимую в него информацию. Вместо любого введенного в это поле символа на экране отображается звездочка. Подобные действия обеспечивают пользователю определенную защиту на тот случай, если кто-то пытается подсмотреть пароль из-за плеча вводящего. CHECKBOX Браузер отображает поле этого типа в виде небольшого квадрата, называемого флажком. Флажок может быть либо установленным (квадрат перечеркнут крест-накрест), либо неустановленным (квадрат пуст). Если пользователь установит флажок, то после отправки заполненной формы CGI-сценарию будет передана соответствующая переменная со значением, заданным атрибутом VALUE. По умолчанию атрибут VALUE имеет значение ON. Например, если форма содержит дескриптор <INPUT TYPE=CHECKBOX NAME=MYCHECKBOX> и этот флажок установлен, то CGI-сценарию в общем потоке данных от формы будет передана переменная MYCHECKBOX=ON. Если флажок не установлен, от этого поля CGI-сценарию никакие данные не отсылаются. Установить исходное состояние флажка можно с помощью атрибута CHECKED, помещаемого в дескриптор описания поля ввода. Поэтому если описываемый атрибут в дескрипторе отсутствует, по умолчанию флажок выводится на экран как неустановленный. Например, при обработке дескриптора <INPUT TYPE=CHECKBOX NAME=MYCHECKBOX VALUE=true CHECKED> будет создана переменная с именем MYCHECKBOX и со значением true, поскольку этот флажок установлен по умолчанию. RADIO Поле этого типа напоминает поле типа CHECKBOX, поскольку оно также может находится во включенном или выключенном состоянии. Однако, если имеется несколько полей переключателя с одним и тем же именем, то только одно из них может быть включенным. Как и в случае поля типа CHECKBOX, атрибут VALUE определяет значение, передаваемое CGI-сценарию, а атрибут CHECKED определяет исходное состояние переключателя. Например, в фрагменте <P> <INPUT TYPE=RADIO NAME=SEX VALUE=MALE>Мужской <BR> <INPUT TYPE=RADIO NAME=SEX VALUE=FEMALE CHECKED>Женский пользователю предлагается переключатель с двумя положениями, Мужской и Женский, причем изначально он установлен во второе положение, поскольку атрибут CHECKED присутствует во второй строке. Если пользователь щелкнет на кнопке переключателя с названием Мужской, CGI-сценарию будет передана переменная SEX, имеющая значение MALE. В противном случае сценарию передается переменная SEX=FEMALE. SUBMIT Это поле предназначено для подачи браузеру команды отправить всю собранную в форме информацию на сервер. Полю кнопки SUBMIT можно присвоить некоторое имя. RESET Это поле предназначено для выдачи браузеру команды аннулировать все веденные данные и привести форму в исходное состояние. TEXTAREA Тип TEXTAREA определяет поля, которые предназначены для ввода сразу нескольких строк текстовой информации или областей ввода. Для создания этого типа используется специальный дескриптор. Основной синтаксис дескриптора области ввода следующий: <TEXTAREA NAME=имя поля ROWS=rr COLS=cc> </TEXTAREA> Присвоенное атрибуту ROWS значение rr определяет отображаемое в области ввода количество строк, а значение сс, присвоенное атрибуту COLS, указывает число символов в каждой строке. Например, при обработке дескриптора <TEXTAREA NAME=Message ROWS=10 COLS=30></TEXTAREA> браузер выведет на экран пустую область размером 10 строк по 30 символов в каждой, причем ей будет присвоено имя Message. SELECT Последним из существующих типов полей ввода является список. С его помощью пользователь может выбрать одно из предложенных значений. Для создания списков используются дескрипторы <SELECT> и </SELECT>. Между дескрипторами <SELECT> и </SELECT> должны быть помещены дескрипторы <OPTION>. Каждый дескриптор <OPTION> предназначен для задания одного значения, которое пользователь сможет выбрать в списке. Например, фрагмент Webдокумента <SELECT NAME=ITEM> <OPTION> Среднее <OPTION> Неполное высшее <OPTION> Высшее </SELECT> описывает раскрывающийся список с именем ITEM. Упражнение 1. В EditPlus создайте новый текстовый файл и сохраните его под именем form.html. 2. В файле form.html наберите следующее: <html> <head> <title> Пример формы </title> </head> <body> <h1> Анкета </h1> <hr> <form> <pre> Фамилия: <input type=text name=Fname size=30 maxlength=30><br> Имя: <input type=text name=Lname size=30 maxlength=30><br> Пароль: <input type=password name=Pswd size=30 maxlength=30><br> Адрес: <textarea name=address rows=3 cols=60></textarea> Образование: <select name=ed> <option>Среднее <option>Неполное высшее <option>Высшее </select> Пол: <input type=radio name=sex value=m checked>Мужской <input type=radio name=sex value=f>Женский <input type=submit value=Запомнить> <input type=reset value=Очистить> </pre> </body> </html> 3. Сохраните и посмотрите результат.
