Web-технологии (педагогическое образование)

Лабораторный практикум для студентов педагогического направления подготовки


На лабораторном практикуме преподаватель будет просить вас написать код для решения той или иной задачи на HTML5, CSS, JavaScript, PHP. Найдите для себя оптимальный текстовый редактор и web-браузер на локальном компьютере, с помощью которого вам будет удобно писать и отлаживать соответствующие коды.

Задача 1. Создайте html-страницу с рецептом какого-нибудь кулинарного блюда в идеологии html 5. Используйте список ингредиентов (<ul>) и нумерованный список этапов приготовления (<ol>), добавьте изображение (<img>) с альтернативным текстом. Сделайте ссылку на кулинарный ресурс, с которого взят рецепт или который имеет подобный рецепт. Подключите CSS файл, разработайте и примените дизайн страницы. Сделайте форму для обратной связи (пока фиктивную) - отзыв о рецепте - содержащую поля нескольких видов. 

Задача 2. "Конфетти". Создайте web-страницу, содержащую поле, на котором, щёлкая мышкой, можно вывести круг случайного цвета и размера с центром в указанном мышкой месте. Пользуйтесь возможностями <canvas> и JavaScript. 


Самостоятельно: тренинг по языку HTML

Для совершенствования знаний в языке HTML, CSS и JavaScript вы можете пройти какие-нибудь онлайн-курсы, например "Основы HTML" на сайте "HTML Academy" (бесплатную часть).


Итоговое задание: собственный Web-сайт на удалённом сервере.

Рекомендуется создать сайт из двух-трёх страниц с изображениями и текстом по любой выбранной вами (и одобренной преподавателем) теме. Этот сайт в ходе практических занятий вы будете совершенствовать, вводя в него новые элементы дизайна, CSS-форматирование, JavaScript-коды, формы для ввода данных и активные PHP-страницы. Сайт предполагается разместить по локальному IP-адресу (http://172.20.1.176) и продемонстрировать его полноценную работу. На сайте каждому из вас будет выделен персональный каталог для размещения вашего проекта. Логины, пароли и описание порядка действий при работе на сайте следует получить у преподавателя. Использование СУБД в проекте - по желанию.