Структура вложенного списка

<ol> <li>Первый элемент списка</li> <li>Второй элемент списка <ul> <li>Первый элемент вложенного списка</li> <li>Второй элемент вложенного списка</li> <li>Третий элемент вложенного списка</li> </ul> </li> <li>Третий элемент списка</li> </ol>

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

Формы и их элементы

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

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Структура форм

Все элементы форм должны обязательно находиться внутри контейнера <form>. В этом теге могут находиться атрибуты, необходимые для правильной работы формы.

Элемент <fieldset> предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных. Например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков. Внутрь тега <legend> поместить название данной формы. Тогда браузер выделит эту часть рамкой, в которой будет находится название.

Элемент <legend> не обязателен, но, если присутствует, должен идти сразу же после тега <fieldset>. Другие теги или текст перед <legend> недопустимы. Внутри <legend> можно использовать теги форматирования вроде <b>, <i>

<form action="URL"> <fieldset> <legend>Контактные данные</legend> ... </fieldset> </form>

Элементы форм

В html существует три основных тега элементов форм

1. <textarea> используется для того, чтобы сформировать многострочное поле ввода для большого количества информации. С помощью атрибута cols можно задать ширину этого поля, а с помощью атрибута rows указать число срок данного поля. Тег <textarea> парный. 2. <select> представляет собой выпадающий список, элементы которого указываются в тэге <option>. У этого тега существует несколько атрибутов. Чтобы сделать возможность выбора нескольких пунктов, необходимо задать атрибут multiple, в значении которого также необходимо указать multiple. В атрибуте size указывается число строк выпадающего списка, которые увидит пользователь в браузере. Если существует необходимость, чтобы какой-то из элементов выпадающего списка был выбран, то нужно этому элементу в теге <option> задать атрибут selected. Тег <select> также парный.

3. Тег <input />. Он в зависимости от значения атрибута type будет выглядеть по-разному и иметь разные значения. Тег <input /> — одиночный тег. Рассмотрим более подробно тег <input />

У первого тега <input /> значение атрибута type="text", это означает, что это обычное однострочное поле ввода. В значении атрибута size указывается размер этого поля в символах. Атрибут placeholder выводит текст внутри текстового поля, который исчезает при начале ввода символов.

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

Следующие два варианта <input type="checkbox" /> и <input type="radio" /> предоставляют пользователю возможность право выбора некоторых пунктов. В первом случае есть возможность множественного выбора нескольких пунктов в виде флажков, а во втором — единственного выбора в виде переключателей. В обоих случаях есть возможность отметить любой пункт по умолчанию, если задать атрибут checked="checked".

<input type="file" /> предоставляет пользователю возможность выбора файла на своем компьютере, для того, чтобы загрузить его на сервер.

Оставшиеся 3 тега <input /> — кнопки. submit отправляет данные на сервер. reset

предназначена для того, чтобы очистить все поля в форме. А третья type="button" — просто кнопка, при нажатии на которой ничего не произойдет, но ее, например, можно привязать к событию javascript. У всех этих кнопок в значении атрибута value указывается тот текст, который будет отображен на кнопке.

Тег <label>

Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

<label for="идентификатор">Текст</label>

<label><input type="...">Текст</label>

Практика

Гиперссылки

<ul>

<li>Главная</li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

Элементы форм

<form action=""> <fieldset> <legend>Страница регистрации</legend> <input type="text" size="30" placeholder="Ваше Имя"> <input type="password" size="8"> <input type="checkbox" checked="checked"> <input type="radio" name="radio"> <input type="file"> <input type="submit" value="Сохранить"> <input type="reset" value="Очистить"> <input type="button" value="просто кнопка"> </fieldset> </form>

Задание

Задачи, обязательные для выполнения.

● Создать файл index.html — это будет главная страница. На этой странице сделайте ссылки в виде маркированного списка на следующие страницы.

○ Меню (должно располагаться на каждой странице сайта)

■ Главная

■ Услуги

■ Портфолио

■ Контакты

○ Отделить горизонтальной чертой шапку сайта ○ Добавить Название вашего сайта

○ Напишите приветственное сообщение.

○ Горизонтальная черта

○ Footer (должен располагаться на каждой странице сайта)

● Что должно присутствовать в footer

○ Значок копирайта

● На странице «Услуги»

○ Меню сайта

○ Горизонтальная черта

○ Заголовок «Услуги»

○ Список услуг, в виде ссылки на подробное описание услуги.

○ Footer

● На странице «Портфолио» (страницы из первой лабораторной работы)

○ Добавить картинку с возможностью нажатия на нее. Картинка должна открыться в полном размере, в новом окне. *

○ Добавить свои достижения: грамоты, сертификаты, курсы. В виде нумерованного списка, с гиперссылкой (должна открыться в новом окне.) на подробное описание или картинку сертификата, диплома и т.д.*

. ● На странице «Контакты»

○ Меню сайта

○ Горизонтальная черта

○ Заголовок «Напишите мне» ○ Поля для заполнения

■ Имя

■ Email

■ Тема

■ Текстовое поле

■ * Произвольные поля, которые на ваше усмотрение нужны на вашем сайте.

○ Заголовок «Адрес»

■ Контактный номер телефона

■ Адрес