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

---

Урок 4. Создание страниц «Гражданам», «Юридическим лицам»

Цель: ознакомиться редактированием текста, использованием спойлеров и API Холста.
Задачи:

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

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

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

Создание страницы "Гражданам".

В начале четвертого урока вы создадите страницу people.html, которая будет являться страницей "Гражданам" сайта.

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

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

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

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

Оформление страницы "Гражданам".

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

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

4.3 - Cтраница "Гражданам" в теге Title

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

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

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

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

– Добавьте заголовок "Гражданам" заключив его в теги h3 (рисунок 4.5).

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

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

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

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

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

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

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

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

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

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

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

– Для вставки текста используйте тег p, для разъединения абзацев с пропуском добавьте в конце первого абзаца двойной тег br. Текст спойлеров возьмите из файла people.txt, из папки work_files (рисунок 4.10). Развернутый вид спойлера изображен на рисунке 4.11

4.10 - Спойлер "Юридическая помощь гражданам"

4.11 - Развернутый спойлер "Юридическая помощь гражданам"

Используя пункты данного упражнения, 3-5 добавьте спойлеры из файла people.txt (рисунок 4.12). Свернутый вид спойлеров на странице изображен на рисунке 4.13

4.12 - Код спойлеров

4.13 - Свёрнутые спойлеры

Добавления списка на страницу.

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

– Встаньте на строку ниже закрывающего тега div, следующего за тегом закрытия спойлера details.
– Добавьте абзац из файла people.txt (рисуно 4.14).

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

– Для добавления ненумерованного списка добавьте теги <ul> и </ul>.
– Для добавления одного пункта списка добавьте между предедыщими тегами, теги <li> и </li>.
– Каждый отдельный пункт списка находится между тегами <li> и </li>.
– Заполните список из файла people.txt согласно рисунку 4.15.

4.15 - Создание списка

В результате выполнения упражнений вы получили страницу с абзацем и списком (рисунок 4.16).

4.16 - Абзац и список.

Добавление API холста.

В этом упражнении вы подключите JavaScript на страницу.

– Для добавления JavaScript, перейдите к строке заголовка страницы <title> ЮК Советник - Гражданам </title>.
– На следующей строке добавьте теги script.
– К тегу script добавьте атрибут src и введите в нем путь к файлу JavaScript "js/peopleproc.js"(рисунок 4.17).

4.17 - Подключение файла JavaScript

– Перейдите на строку ниже добавленного вами списка и добавьте абзац "Количество выйгранных дел:".
– На следующей строке добавьте код добавления API холста canvas, с атрибутами id="canvas" width="150" heiht="150" (рисунок 4.18).

4.18 - Подключение API холста

В результате выполнения всех упражнений у вас получилась страница "Гражданам", на которой есть абзац текста, ненумированный список, спойлеры, а так же использован API Холст (рисунок 4.19).

4.19 - Страница "Гражданам"

– Используя данный урок, создайте по аналогии страницу "Юридическим лицам". Файл с данными company.txt расположен в папке work_files. Итоговый вид страницы представлен на рисунке 4.20.

4.20 - Страница "Юридическим лицам"

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

1. Какой тег используется для вставки заголовка спойлера?
2. Какой тег используется для вставки спойлера?
3. Какой тэг используется для вставки API Холста?