УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

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

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




Урок 6. Создание страницы «Контакты»

Цель: ознакомиться с API геолокации.
Задачи:

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

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

Lab6_1

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

Создание страницы "Контакты".

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

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

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

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

Lab6_2

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

Оформление страницы "Контакты".

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

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

Lab6_3

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

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

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

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

Lab6_4

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

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

Lab6_5

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

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

Lab6_6

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

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

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

– Удалите абзац "контент".
– Добавьте текст из файла contact.txt который находится в папке work_files.
– Добавьте теги переноса строки br (рисунок 6.1).

Lab6_7

6.7 - Добавление текста

Добавление карты.

В данном упражнении вы добавите карту Google Карты.

– Откройте Google Карты в браузере https://www.google.com/maps (рисунок 6.8).

Lab6_8

6.8 - Google Карты
– Найдите город Екатеринбург, улица Машиностроителей дом 11 (рисунок 6.9).

Lab6_9

6.9 - Машиностроителей 11

– Нажмите на значок меню "Бутерброд" в левом верхнем углу экрана.
– Выберите пункт Ссылка/код (рисунок 6.10).

Lab6_10

6.10 - Меню

– В верхней части появившегося окна откройте вкладку Код.

Lab6_11

6.11 - кладка Код

– Выберите размер карты. Затем скопируйте текст в поле и вставьте его в contact.html, после текста (рисунок 6.12).

Lab6_12

6.12 - кладка Код

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

В этом упражнении вы форму для звонка компании клиенту.

– После тега закрывающего ссылку на увеличенную карту </a> добавьте пустой тег div (рисунок 6.13).

Lab6_13

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

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

Lab6_14

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

– После тега form добавьте тег label с атрибутом for="name" и названием "Введите Ваше имя" (рисунок 6.15).

Lab6_15

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

– После тега label вставьте тег input с атрибутами "id="name" name="name" size="15" type="text" Placeholder="Алексей" title="Имя" required" (рисунок 6.16).

Lab6_16

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

– Добавьте тег label с аттрибутом for="tel" и названием "Введите номер телефона".
– Добавьте тег input с атрибутами "id="tel" name="tel" size="11" type="text" Placeholder="+71234567890" required" (рисунок 6.17).

Lab6_17

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

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

Lab6_18

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

Lab6_19

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

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

Lab6_20

6.20 - Страница "Контакты"

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

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