Создание сайта на HTML5
Авторы учебного курса:
Боголепов Михаил Михайлович,
студент гр. ЗКТ-617 ФГАОУ ВО «РГППУ.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ
Урок 6. Создание страницы «Контакты»
Цель: ознакомиться с API геолокации.
Задачи:
– Научиться добавлять Google-карту на веб-страницу.
– Научиться изменять координаты.
– Научиться искать местоположение.
В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 6.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).
6.2 - Результат создания файла contact.html
Оформление страницы "Контакты".
В этом упражнении вы укажите, что contact.html это страница "Контакты".
– Перейдите в рабочую область Visual Studio Code.
– Переместите курсор мыши к тегу Title.
– Добавьте через тире к тексту ЮК Советник текст «Контакты» (рисунок 6.3).
6.3 - Cтраница "Вопросы-ответы" в теге Title
Добавление заголовка страницы.
В этом упражнении вы добавите заголовок страницы.
– Для того, чтобы у контента сайта были отступы по сторонам оберните контентную часть страницы в div "featured" (рисунок 6.4).
6.4 - Добавление div
– Добавьте заголовок "Контакты" заключив его в теги h3 (рисунок 6.5).
6.5 - Код заголовка страницы
– Результат добавления заголовка виден на рисунке 6.6.
6.6 - Заголовок страницы
Добавление текста.
В этом упражнении вы добавите текст на страницу
– Удалите абзац "контент".
– Добавьте текст из файла contact.txt который находится в папке work_files.
– Добавьте теги переноса строки br (рисунок 6.1).
6.7 - Добавление текста
Добавление карты.
В данном упражнении вы добавите карту Google Карты.
– Откройте Google Карты в браузере https://www.google.com/maps (рисунок 6.8).
6.8 - Google Карты
– Найдите город Екатеринбург, улица Машиностроителей дом 11 (рисунок 6.9).
6.9 - Машиностроителей 11
– Нажмите на значок меню "Бутерброд" в левом верхнем углу экрана.
– Выберите пункт Ссылка/код (рисунок 6.10).
6.10 - Меню
– В верхней части появившегося окна откройте вкладку Код.
6.11 - кладка Код
– Выберите размер карты. Затем скопируйте текст в поле и вставьте его в contact.html, после текста (рисунок 6.12).
6.12 - кладка Код
Добавление формы обратного звонка.
В этом упражнении вы форму для звонка компании клиенту.
– После тега закрывающего ссылку на увеличенную карту </a> добавьте пустой тег div (рисунок 6.13).
6.13 - Добавление div
– Между тегами div добавьте тег form с атрибутами "id="form2" action="/" method="post" role="form" onsubmit=" return submitForm();"" (рисунок 6.14).
6.14 - Вставка тега Form
– После тега form добавьте тег label с атрибутом for="name" и названием "Введите Ваше имя" (рисунок 6.15).
6.15 - Добавления Label
– После тега label вставьте тег input с атрибутами "id="name" name="name" size="15" type="text" Placeholder="Алексей" title="Имя" required" (рисунок 6.16).
6.16 - Добавления тега Input
– Добавьте тег label с аттрибутом for="tel" и названием "Введите номер телефона".
– Добавьте тег input с атрибутами "id="tel" name="tel" size="11" type="text" Placeholder="+71234567890" required" (рисунок 6.17).
6.17 - Добавления тегов Label, Input для tel
– Ниже добавьте тег button с атрибутом type="submit" и текстом на кнопке "Заказать звонок" (рисунок 6.18). Формы добавлены. (рисунок 6.19)
6.18 - Добавления тега Button
6.19 - Формы добавлены
В результате выполнения всех упражнений у вас получилась страница "Контакты", на которой есть абзацы текста, карта, формы (рисунок 6.20).
6.20 - Страница "Контакты"
Контрольные вопросы
1. Какой сервис по добавлению карты на сайт был использован в уроке?
2. Какой тег использовался для втсавки карты на сайт?
3. Какой тип формы используется для написания в нем номера телефона?