# Лабораторная работа №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`;
- возможно дополнительные файлы с изображениями, шрифтами, документами и пр.