lab_4_2

0

Описание

Языки

  • HTML94,8%
  • CSS3,8%
  • JavaScript1,4%
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
README.md

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ
РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САХАЛИНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»







Институт естественных наук и техносферной безопасности
Кафедра информатики
Гусев Владислав Михайлович





Лабораторная работа №2.«HTML»
01.03.02 Прикладная математика и информатика













Научный руководитель
Соболев Евгений Игоревич




г. Южно-Сахалинск
2024 г.













Введение

HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Также может применяться к любым XML-документам, например, к SVG или XUL.

JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений..

Задачи

  1. Повторите страницу по данному по образцу
  2. Повторите страницу по данному по образцу
  3. Повторите страницу по данному по образцу
  4. Повторите страницу по данному по образцу
  5. Повторите страницу по данному по образцу
  6. Повторите страницу по данному по образцу
  7. Создать структуру HTML страницы с использованием заголовка, абзацев, списков и изображений.
  8. Вставить видео на страницу с помощью тега <video> и добавить управляющие элементы.
  9. Создать форму обратной связи с полями для ввода имени, email и сообщения.
  10. Разработать таблицу с данными о товарах (название, цена, описание) и стилизовать её с помощью CSS.
  11. Добавить на страницу интерактивную карту с маркерами и информацией о местоположении.
  12. Реализовать выпадающее меню навигации с использованием HTML и CSS.
  13. Вставить аудио-плеер на страницу для воспроизведения музыкального трека.
  14. Создать галерею изображений с возможностью пролистывания и увеличения фотографий.
  15. Разработать форму заказа товара с выбором количества и кнопкой отправки заказа.
  16. Использовать iframe для встраивания внешнего контента (например, карты Google или видео с YouTube).
  17. Добавить на страницу анимированный слайдер с переходами между изображениями.
  18. Реализовать функционал проверки вводимых данных в форме с помощью JavaScript.
  19. Создать анимированное меню бургер для мобильной версии сайта.
  20. Использовать тег <canvas> для создания простой графики или анимации на странице.
  21. Добавить на страницу элементы социальных сетей с возможностью перехода по ссылкам.
  22. Разработать форму регистрации пользователей с проверкой пароля на соответствие требованиям.
  23. Создать табличное представление данных с возможностью сортировки и фильтрации по столбцам.
  24. Использовать Web-шрифты для стилизации текста на странице.
  25. Реализовать функционал Drag and Drop для перетаскивания элементов на странице.
  26. Создать адаптивную веб-страницу, которая корректно отображается на разных устройствах и разрешениях экрана.

Решения

Файл 1.html

Файл 2.html

Файл 3.html

Файл 4.html

Файл 5.html

Файл 6.html

Файл 7.html

Файл 8.html

Файл 9.html

Файл 10.html

Файл 11.html

Файл 12.html

Файл 13.html

Файл 14.html

Файл 15.html

Файл 16.html

Файл 17.html

Файл 18.html

Файл 19.html

Файл 20.html

Файл 21.html

Файл 22.html

Файл 23.html

Файл 24.html

Файл 25.html

Файл 26.html

Также были использованы несколько общих css файлов

Файл style/btn.css

Файл style/form.css

Файл style/table.css

Файл style/var.css

Результат

  1. Повторите страницу по данному по образцу
  2. Повторите страницу по данному по образцу
  3. Повторите страницу по данному по образцу
  4. Повторите страницу по данному по образцу
  5. Повторите страницу по данному по образцу
  6. Повторите страницу по данному по образцу
  7. Создать структуру HTML страницы с использованием заголовка, абзацев, списков и изображений.
  8. Вставить видео на страницу с помощью тега <video> и добавить управляющие элементы.
  9. Создать форму обратной связи с полями для ввода имени, email и сообщения.
  10. Разработать таблицу с данными о товарах (название, цена, описание) и стилизовать её с помощью CSS.
  11. Добавить на страницу интерактивную карту с маркерами и информацией о местоположении.
  12. Реализовать выпадающее меню навигации с использованием HTML и CSS.
  13. Вставить аудио-плеер на страницу для воспроизведения музыкального трека.
  14. Создать галерею изображений с возможностью пролистывания и увеличения фотографий.
  15. Разработать форму заказа товара с выбором количества и кнопкой отправки заказа.
  16. Использовать iframe для встраивания внешнего контента (например, карты Google или видео с YouTube).
  17. Добавить на страницу анимированный слайдер с переходами между изображениями.
  18. Реализовать функционал проверки вводимых данных в форме с помощью JavaScript.
  19. Создать анимированное меню бургер для мобильной версии сайта.
  20. Использовать тег <canvas> для создания простой графики или анимации на странице.
  21. Добавить на страницу элементы социальных сетей с возможностью перехода по ссылкам.
  22. Разработать форму регистрации пользователей с проверкой пароля на соответствие требованиям.
  23. Создать табличное представление данных с возможностью сортировки и фильтрации по столбцам.
  24. Использовать Web-шрифты для стилизации текста на странице.
  25. Реализовать функционал Drag and Drop для перетаскивания элементов на странице.
  26. Создать адаптивную веб-страницу, которая корректно отображается на разных устройствах и разрешениях экрана.

Вывод

По итогу проделанной лабораторной работы, были созданы 26 страниц по заданиям с использованием HTML, CSS, JS