Создание сайта на HTML5
Авторы учебного курса:
Боголепов Михаил Михайлович,
студент гр. ЗКТ-617 ФГАОУ ВО «РГППУ.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ
Урок 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 Холста?