Создание сайта на HTML5

---

Урок 5. Создание страницы «Вопросы-ответы»

Цель: ознакомиться с диалогами в HTML и использование форм.
Задачи:

– Научиться добавлять диалоги на веб-страницу.
– Научиться добавлять диалоги в спойлеры.
– Научиться добавлять формы на веб-страницу.
– Научиться добавлять свойства форм в формы.

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 5.1):

5.1 - Предварительный просмотр веб-страницы

Создание страницы "Вопросы-ответы".

В начале пятого урока вы создадите страницу question.html, которая будет являться страницей "Вопросы-ответы" сайта.

В этом упражнении вы создадите веб-страницу "Вопросы-ответы".

– Запустите Visual Studio Code. Автоматически должен открыться ваш проект. Если этого не произошло, то воспользуйтесь первым уроком и откройте проект.
– Кликните на файл design.html правой кнопкой мыши и выберите пункт «Копировать».
– Кликните правой кнопкой мыши в пустой области под файлом design.html и выберите в открывшемся меню пункт «Вставить».
– Кликните на появившийся файл design copy.html правой кнопкой мыши и выберите в открывшемся меню пункт «Переименовать».
– Задайте имя файла question.html и нажмите кнопку «Enter».

В результате выполнения всех пунктов упражнения у вас должен появиться в списке файлов, файл question.html, а так же он должен быть открыт в рабочей области Visual Studio Code (рисунок 5.2).

5.2 - Результат создания файла question.html

Оформление страницы "Вопросы-ответы".

В этом упражнении вы укажите, что question.html это страница "Вопросы-ответы".

– Перейдите в рабочую область Visual Studio Code.
– Переместите курсор мыши к тегу Title.
– Добавьте через тире к тексту ЮК Советник текст «Вопросы-ответы» (рисунок 5.3).

5.3 - Cтраница "Вопросы-ответы" в теге Title

Добавление заголовка страницы.

В этом упражнении вы добавите заголовок страницы

– Для того, чтобы у контента сайта были отступы по сторонам оберните контентную часть страницы в div "featured" (рисунок 5.4).

5.4 - Добавление div

– Добавьте заголовок "Вопросы-ответы" заключив его в теги h3 (рисунок 5.5).

5.5 - Код заголовка страницы

– Результат добавления заголовка виден на рисунке 5.6.

5.6 - Заголовок страницы

Добавление спойлеров.

В этом упражнении вы добавите спойлеры на страницы.

– Удалите абзац "контент".
– Добавьте тег div c атрибутами id="accordion-html5" class="accordion" (рисунок 5.7).

5.7 - Добавление div

– Между тегами div добавьте теги details и после закрытия тега details, тег br (рисунок 5.8).

5.8 - Вставка тега Details

– Для вставки заголовка спойлера вставьте теги summary, а между ними тег заголовка h2 и введите текст "Жилищные вопросы" (рисунок 5.9).

5.9 - Заголовок спойлера

– Для вставки диалогов добавьте теги p, dialog (рисунок 5.10).

5.10 - Добавления тега Dialog

– Внутренние теги диалога dt-отвечающий за первого участника диалоги и dd-отвечающий за второго участника диалога. Добавьте эти теги на страницу и перенос строки после dd (рисунок 5.11).

5.11 - Добавления тегов Dt, Dd

– Для того, что бы выделить первого участника диалога не только отсутпом, но и визуально добавьте между тегами dt теги strong (рисунок 5.12).

5.12 - Добавления тегов Strong

– Добавьте текст для первого диалога из файла question.txt, располагающегося в папке work_files (1 спойлер 1 диалог) (рисунок 5.13).

5.13 - Добавления диалога

– Используя ранее полученные знания добавьте остальные диалоги в первом спойлере (рисунок 5.14).

5.14 - Диалоги первого спойлера

– Используя ранее полученные знания добавьте остальные спойлеры с диалогами (рисунок 5.15).

5.15 - Код диалогов

– Результат свёрнутых спойлеров виден на рисуноке 5.16.

5.16 - Просмотр страницы с диалогами

Добавление форм.

В этом упражнении вы добавите формы на страницу

– После тега закрытия div, следующий за тегом закрытия details вставьте абзац с текстом "Чтобы задать свой юридический вопрос используйте данную форму:" (рисунок 5.17)

5.17 - Добавление абзаца

– Добавьте пустой тег div (рисунок 5.18).

5.18 - Добавление div

– Между тегами div добавьте тег form с атрибутами "id="form1" action="/" method="post" role="form" onsubmit=" return submitForm();"" (рисунок 5.19).

5.19 - Вставка тега Form

– После тега Form добавьте тег label с атрибутом for="name" и названием "Введите ФИО" (рисунок 5.20).

5.20 - Добавления Label

– После тега label вставьте тег input с атрибутами "id="name" name="name" size="99" type="text" Placeholder="Иванов Иван Иванович" title="Фамилия Имя Отчество" required pattern"([а-яА-Яa-zA-Z]{3,30})+\s+([а-яА-Яa-zA-Z]{3,30})+\s+([а-яА-Яa-zA-Z]{3,30})"" (рисунок 5.21).

5.21 - Добавления тега Input

– Добавьте тег label с аттрибутом for="email" и названием "Email адрес".
– Добавьте тег input с атрибутами "id="email" name="email" size="30" type="text" Placeholder="mail@mail.ru" required" (рисунок 5.22).

5.22 - Добавления тегов Label, Input для email

– Добавьте тег label с атрибутом for="message" и названием "Вопрос:".
– Добавьте тег textarea с аттрибутами "id="message" cols="30" rows="10" name="message" required" и тегом переноса строки br (рисунок 5.23).

5.23 - Добавления тегов Label, Input для поля ввода текста

– Ниже добавьте тег button с атрибутом type="submit" и текстом на кнопке Отправить (рисунок 5.24). Формы добавлены. (рисунок 5.25)

5.24 - Добавления тега Button

5.25 - Формы добавлены

В результате выполнения всех упражнений у вас получилась страница "Вопросы-ответы", на которой есть абзац текста, диалоги, спойлеры, формы (рисунок 5.26).

5.26 - Страница "Вопросы-ответы"

Контрольные вопросы

1. Какой тег используется для вставки диалогов?
2. Какие теги используются для отображения первого и второго участника?
3. Какой тег ипользуется для создания форм?
4. Какой тег ипользуется для формы предназначенной для многострочного текста?