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

---

Урок 3. Создание страницы «Услуги и цены»

Цель: ознакомиться с редактированием текста, добавлением таблиц, а так же API Drag and Drop.
Задачи:

– Научиться редактировать текст.
– Научиться добавлять заголовки.
– Научиться добавлять таблицы.
– Научиться добавлять и использовать API перетаскивания.

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

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

Создание страницы "Услуги и цены".

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

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

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

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

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

Оформление страницы "Услуги и цены".

В этом упражнении вы укажите, что price.html это страница "Услуги и цены".

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

3.3 - Cтраница "Услуги и цены" в теге Title

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

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

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

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

– Добавьте заголовок "Услуги и цены" заключив его в теги h3 (рисунок 3.5).

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

Добавление абзацев на страницу.

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

– Для добавления первого абзаца возьмите текст с файла price.txt, расположенного в папке work_files.
– Вставьте первый абзац вместо текста "Контент".
– Добавьте к тегу p атрибут align и задайте ему значение center (рисунок 3.6).

3.6 - Добавление и выравнивание абзаца

– Добавьте заголовок используя теги h4, обернув его тегом b (рисунок 3.7).

3.7 - Заголовок в странице

– Добавьте второй абзац используя теги p (рисунок 3.8).

3.8 - Второй абзац

Добавление таблицы на страницу.

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

– Для добавления таблицы, перейдите на первый абзац и ниже его добавьте теги <table></table>.
– Между вышенаписанными тегами вставьте теги <thead></thead>. Они нужны для визуального различия названий колонок от основной таблицы.
– Между вышенаписанными тегами вставьте теги <tr></tr>. Это одна строка таблицы
– Между вышенаписанными тегами вставьте теги <th></th>. Это первая колонка таблицы
– Ниже добавьте те же теги <th></th>. Это вторая колонка таблицы
– Первой колонке в теге th задайте атрибут width и укажите его значение 70%.
– Между вышенаписанными тегами вставьте "Правовые консультации".
– Второй колонке в теге th задайте атрибут width и укажите его значение 30%.
– Между вышенаписанными тегами вставьте "Стоимость руб." (рисунок 3.9).

3.9 - Добавление заголовка таблицы

– После тега </thead> добавьте теги <tr></tr>.
– Между вышенаписанными тегами вставьте теги <td></td>. Это первая колонка таблицы.
– Добавьте сюда название первой по счёту услуги из файла price.txt.
– Между вышенаписанными тегами вставьте теги <td></td>. Это вторая колонка таблицы.
– Добавьте сюда первую цену по счёту услуги из файла price.txt (рисунок 3.10).

3.10 - Первая строка таблицы

– Выполнив четыре пункта, с 11 по 14, наполните таблицу данными из файла price.txt (рисунок 3.11). Вид готовой таблицы представлен на рисунке 3.12.

3.11 - Фрагмент кода заполнения таблицы

3.12 - Вид готовой таблицы

Добавление API перетаскивания. Создание калькулятора подсчёта услуг.

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

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

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

В этом упражнении вы создадите калькулятор подсчёта услуг

– Для добавления калькулятора, перейдите к строке второго абзаца "Для подсчета суммы перенесите услуги из списка приведенного снизу, в поле калькулятора".
– Перейдите на следующую строку.
– Добавьте тег div с атрибутом id="page" (рисунок 3.14).

3.14 - Добавление тега div

– Перейдите на следующую строку.
– Добавьте теги section с атрибутом id="cart" и class="shopping-cart" (рисунок 3.15).

3.15 - Добавление тега section

– Перейдите на следующую строку.
– Между вышенаписанными тегами вставьте заголовок с тегами h5, теги ненумерованного списка и абзац с внутренними тегами span (рисунок 3.16).

3.16 - Добавление заголовка, списка, абзаца
– Заполните заголовок и абзац согласно рисунку 3.17.

3.17 - Заполнение тегов информацией

– Перейдите на следующую строку.
– Добавьте теги section с атрибутом id="products" и class="products".
– Добавьте заголовок используя тег H5 и введите текст заголовка "Прейскурант услуг:" (рисунок 3.18).

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

– Перейдите на следующую строку.
– Добавьте ненумерованный список используя тег ul. Добавьте пункт списка используя тег li.
– В теге li используйте атрибуты id, и data-price добавьте первый пункт используя информацию из price.txt (рисунок 3.19).

3.19 - Добавление пункта списка прайса

– Используя информацию о списке из price.txt заполните список(рисунок 3.20).

3.20 - Добавление пунктов списка прайса

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

3.21 - Страница "Услуги и цены"

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

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