Основные теги для создания маркированных и нумерованных списков в html-документе. Примеры использования.
Маркированные списки - это списки, в которых элементы списка отмечаются маркерами.
Для установки маркированного списка используются теги <ul> и <li>
Тег <ul> - unordered list (неупорядоченный список).
Тег <li> - list item (элемент списка)
Код, написанный таким образом
<ul>
<li> Книги </li>
<li> Электроника </li>
<li> CD и DVD </li>
</ul>
будет отображен на экране так:
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=... тега <ul>.
Нумерованные (или упорядоченные) списки представляют собой списки из пронумерованных пунктов.
Для установки нумерованного списка используется тег <ol> вместо <ul>
Тег <ol> - ordered list (упорядоченный список).
Самый простой список имеет следующий код:
<ol>
<li> Выйдете на станции метро Войковская. </li>
<li> Сядьте на троллейбус 57 маршрута.</li>
<li> Выйдете на четвертой остановке. </li>
<li> Перейдите дорогу. Я Вас буду ждать у киоска.</li>
</ol>
На экране он отобразится так:
Вид и тип нумерации зависит от параметров тега <ol>
Код HTML Отображение на экране
<ol start="5">
<ol type="A"> Заглавные латинские буквы:
<ol type="a"> Прописные латинские буквы:
<ol type="I"> Cписок с римскими буквами:
Вложенный список - это список, размещенный внутри другого списка.
Например, код
<ol>
<li> Крупные города России:
<ul type="square">
<li> Москва
<li> Санкт-Петербург
</ul>
<li> Крупные города Украины:
<ul type="square">
<li> Киев
</ul>
</ol>
отобразится на экране так:
Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl> ... </dl>, элемента определения термина <dt> ... </dt>, элемента определения описания <dd> ... </dd>.
Код примера
<dl>
<dt>Пиксель</dt>
<dd>Элементарная цветная точка, совокупность
которых образует изображение.</dd>
<dt>Экспозиция</dt>
<dd>Количественная мера световой энергии, падающая
на светочувствительный элемент.</dd>
<dt>Диафрагма</dt>
<dd>Параметр, регулирующий количество света,
который освещает матрицу.</dd>
</dl>
отобразится в браузере так:
Структура пользовательской формы. Основные теги для создания элементов управления формой в html-документе. Примеры использования.
На Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей сайта. Пример тому – гостевая книга, – которая обеспечивает обратную связь с посетителями и разработчиками сайта.
HTML формы могут содержать такие элементы ввода как:
Текстовые поля
Флажки
Радио-кнопки
Кнопки отправления
Списки выбора
Многострочные текстовые поля
Метки
<form> создание формы.
Например:
<form>
<p>Введите ваше имя:</p>
<input type="text" />
<p>Введите пароль: </p>
<input type="password" />
</form>
<input type="text" /> определяет однострочное текстовое поле, в которое пользователь может вводить различную информацию.
Например:
<form>
<p> Введите ФИО в поля ниже: </p> <br />
Имя: <input type="text" name="firstname" /><br />
Фамилия: <input type="text" name="lastname" /><br />
Отчество: <input type="text" name="lastname" />
</form>
<input type="password" /> определяет поле для ввода пароля. Содержимое вводимое в данное поле закрывается черными кружками позволяя вводить пароли даже в присутствии посторонних.
Например:
<form>
Введите пароль: <input type="password" name="pass" />
</form>
<input type="checkbox" /> определяет флажок. Флажки позволяют пользователям выбирать несколько пунктов с предварительно заполненной информацией из группы.
Например:
<form>
<p> Как вы относитесь к полетам в космос? </p>
<input type="checkbox" name="space" value="1" />
Положительно, всегда хотел полететь в космос<br />
<input type="checkbox" name="space" value="2" />
Безразлично, никогда не думал об этом серьезно <br />
<input type="checkbox" name="space" value="3" />
Отритцательно, меня с детства отталкивают мысли о космосе <br />
</form>
<input type="radio" /> определяет радио кнопку. Радио кнопки позволяют пользователям выбрать только один пункт с предварительно заполненной информацией из группы.
Например:
<form>
<p> Укажите Ваш пол: </p>
<input type="radio" name="s" value="m" /> Мужской<br />
<input type="radio" name="s" value="f" /> Женский
</form>
<input type="submit" /> определяет кнопку отправления. После нажатия на данную кнопку данные введенные пользователем будут отправлены на сервер. Адрес, на который будут пересылаться данные формы указывается в атрибуте тэга form - action. Если данный атрибут отсутствует данные будут отправлены на текущую страницу.
Например:
<form name="input" action="form.php" method="get">
Введите Ваше имя: <input type="text" name="name" />
<input type="submit" value="Отправить" />
</form>
Для создания выпадающих списков используется тэг <select>, а элементы выпадающего списка определяются с помощью тэга <option>.
Например:
<p> Выберите ваш пол </p>
<form>
<select name="sex" >
<option value="m"> Мужской </option>
<option value="f"> Женский </option>
</select>
</form>
С помощью атрибута multiple Вы можете указать, что в выпадающем списке могут быть выбраны одновременно несколько элементов.
Например:
<p>В данном списке может быть одновременно выбрано несколько значений (для этого зажмите клавишу Ctrl и щелкайте на необходимые элементы): </p>
<form>
<select name='city' multiple='multiple'>
<option value='london'>Лондон</option>
<option value='moscow'>Москва</option>
<option value='newyork'>Нью Йорк</option>
</select>
</form>
Для того, чтобы озаглавить группу элементов формы, Вы должны с помощью тэга <fieldset> сгруппировать желаемую часть формы и затем с помощью тэга <legend> установить желаемое заглавие.
Например:
<form>
<fieldset>
<legend>Данные о пользователе</legend>
Имя: <br /><input type="text" name="firstname" /><br />
Фамилия:<br /> <input type="text" name="lastname" /><br />
Отчество: <br /><input type="text" name="lastname" /><br />
<p>Укажите Ваш пол:</p>
<input type="radio" name="s" value="m" /> Мужской<br />
<input type="radio" name="s" value="f" /> Женский
</fieldset>
<fieldset>
<legend> Анкета: </legend>
<p>Как Вы относитесь к полетам в космос:</p>
<input type="checkbox" name="space" value="1" />
Положительно, всегда хотел полететь в космос<br />
<input type="checkbox" name="space" value="2" />
Безразлично, никогда не думал об этом серьезно <br />
<input type="checkbox" name="space" value="3" />
Отрицательно, меня с детства отталкивают мысли о космосе <br />
</fieldset>
</form>
