Add lwF5

README.md

@@ -22,7 +22,7 @@ Frontend:
 - [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](./lwF2/README.md)
 - [Лабораторная работа №F3 - Стилизация веб-приложения (React)](./lwF3/README.md)
 - [Лабораторная работа №F4 - Взаимодействие с API (Axios)](./lwF4/README.md)
-- [Лабораторная работа №F5 - Повторение на базовых технологиях (HTML, CSS)](#)
+- [Лабораторная работа №F5* - Базовые технологии WWW (HTML, CSS, JS)](./lwF5/README.md)
 
 Backend:
 

lwF5/README.md

@@ -0,0 +1,125 @@
+# Лабораторная работа №F5* - Базовые технологии WWW (HTML, CSS, JS)
+
+## Цель работы
+
+- Более глубокое изучение базовых технологий WWW: HTML, CSS, JS.
+- Изучение базовых правил работы с утилитой git.
+
+## Ход работы
+
+- Перед выполнением работы необходимо как минимум сдать лабораторные работы F3 и F4, т.к. работа будет основываться на этих работах.
+- Первый этап работы: организация рабочего пространства.
+- Затем необходимо создать репозиторий git и залить его на хостинг.
+- В репозитории необходимо создать как минимум по одному файлу HTML, CSS, JS и связать их друг с другом.
+  Также в репозиторий необходимо положить пример файла `db.json` для запуска json-server из л/р F4.
+- Необходимо повторить вёрстку (lwF3) и алгоритм отправки данных на сервер (lwF4) без использования react, axios, module css и typescript.
+- Для сдачи необходимо прислать репозиторий на проверку, затем продемонстрировать работу веб-приложения.
+
+## Настройка рабочего окружения
+
+На лабораторном (или личном) ПК должны быть установлены следующие программы:
+
+- Visual Studio Code: <https://code.visualstudio.com/download>;
+- Система контроля версий git: <https://git-scm.com/downloads>.
+
+Необходимые к установке расширения VS Code:
+
+- GitLens: <https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens>.
+  Необходимо для более тесной интеграции VS Code и git.
+- Live Server: <https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer>.
+  Необходим для запуска небольшого веб-сервера.
+  Без него не будет работать отправка данных на json-server из-за политик безопасности браузера.
+- HTML CSS Support: <https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css>.
+  Для поддержки подсказок с классами CSS в HTML-документе.
+- HTMLHint: <https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint>.
+  Для проверки, что разметка в HTML-документе указана корректно.
+
+## Создание репозитория git
+
+Происходит по адресу <https://git.is.ulstu.ru>, а точнее <https://git.is.ulstu.ru/repo/create> (после регистрации).
+
+Обязательно в описании репозитория укажите вашу фамилию и имя.
+Пример:
+
+![](gitea-create-repo.png)
+
+Далее на своём ПК создайте любой каталог, откройте его в VS Code, создайте пустой файл `README.md`.
+
+Далее в терминале ``(Ctrl + `)`` необходимо написать код, указанный на сайте в блоке "Создать новый репозиторий из командной строки", кроме строки 1.
+
+Пример:
+
+```
+git init
+git checkout -b main
+git add README.md
+git commit -m "first commit"
+git remote add origin https://git.is.ulstu.ru/v.moiseev/ip-lw-f5.git
+git push -u origin main
+```
+
+> Разберитесь с каждой командой из представленных выше.
+> Преподаватель может в рамках защиты лабораторной работы попросить объяснить смысл этих команд.
+
+После успешного выполнения команды на сайте должен отобразиться файл `README.md`:
+
+![](gitea-result.png)
+
+Всё.
+Среда разработки и репозиторий подготовлены для работы.
+Убедиться в этом можно на вкладке *Source Control* в VS Code:
+
+![](vs-code-git.png)
+
+## Создание набора файлов и базового шаблона для выполнения лабораторной работы
+
+Так как работа будет выполняться на базовых технологиях веб-разработки, необходимо создать следующие файлы:
+
+- `index.html`.
+  Здесь будет разметка HTML-документа, который будет представлять собой одностраничное приложение, разрабатываемое в рамках работ lwF1-lwF4.
+- `style.css`.
+  Здесь будут описаны правила стилизации элементов документа при помощи технологии каскадных таблиц стилей CSS.
+- `script.js`.
+  В этом файле будет описана логика получения данных с полей ввода и их отправка на json-server.
+
+> Почему основной HTML-документ называется index - прочитайте самостоятельно.
+
+Далее надо создать базовый шаблон в HTML-документе.
+Для этого можно воспользоваться Emmet-шаблонов `!`: ввести в файле `index.html` символ `!` и нажать на Enter.
+
+Далее необходимо подключить `style.css` и `script.js`.
+
+> Особенность подключения `script.js`.
+> Необходимо в тэге `script` указать атрибут `defer`, чтобы скрипт выполнялся уже после загрузки всего DOM-дерева.
+
+## Собственно выполнение лабораторной работы
+
+Несколько советов:
+
+- Не забудьте каждому `input`-элементу задать атрибут `name`.
+- Для получения данных с формы можно воспользоваться объектом `FormData`.
+- Для отправки данных на сервер почитайте и реализуйте вызов API через функцию `fetch`.
+- Для более тонкой настройки позиционирования элементов используйте `display: flex` и другие возможности flexbox.
+- Если нужно вставить картинки, их можно добавить в каталог `img`. Шрифты - `fonts`. Или подключить их через CDN.
+- Старайтесь понятия все правила стилизации в CSS, т.к. на защите это пригодится.
+  Рекомендуется использовать минимальный набор стилей для повторения макета от л/р F1.
+
+> Почитайте, что такое CDN и как оно может помочь или наоборот навредить.
+
+Источники:
+
+- <https://htmlbook.ru/>;
+- <https://learn.javascript.ru/>.
+
+## Коммит результата
+
+После этого необходимо при помощи вкладки *Source control* или командной строки добавить новый коммит в ваш репозиторий с файлами лабораторной работы, а потом выполнить `git push` (в VS Code есть кнопка *Sync*, которая делает push + pull).
+
+Что должно быть в итоге:
+
+- файл `README.md`;
+- файл `index.html`;
+- файл `style.css`;
+- файл `script.js`;
+- файл `db.json`;
+- возможно дополнительные файлы с изображениями, шрифтами, документами и пр.