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

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

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

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

Задача 3. Создайте html-страницу "Генератор чисел Фибоначчи". На странице две кнопки "Новое число" и "Очистить список", и начало ряда (число - 0, значение - 1). Напишите код на JavaScript, который в ответ на нажатие кнопки "Новое число" будет генерировать новую строку с числом, на единицу большим  предыдущего, и соответствующим значением ряда Фибоначчи. Кнопка "Очистить список" оставляет только первую строку ряда.

Задача 4. Разработка простейшей системы аутентификации на сервере. Для выполнения этого задания вам нужно взять логин и пароль у преподавателя для входа в персональное web-пространство на сервере c IP-адресом 172.20.1.176. Доступ к личному каталогу для загрузки и редактирования файлов осуществляется по протоколу FTPS. Система аутентификации должна состоять из страницы с формой регистрации на сайте, страницы с формой для ввода  логина и пароля, и страницы, показывающей результат аутентификации. Предполагается использование языка PHP. Дополнительную информацию смотрите в этой презентации.

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

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

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

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