132 lines
8.8 KiB
Markdown
132 lines
8.8 KiB
Markdown
# Лабораторная работа №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> (после регистрации).
|
||
|
||
Обязательно в описании репозитория укажите вашу фамилию и имя.
|
||
Пример:
|
||
|
||
|
||
|
||
Далее на своём ПК создайте любой каталог, откройте его в 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`:
|
||
|
||
|
||
|
||
Всё.
|
||
Среда разработки и репозиторий подготовлены для работы.
|
||
Убедиться в этом можно на вкладке *Source Control* в VS Code:
|
||
|
||
|
||
|
||
## Создание набора файлов и базового шаблона для выполнения лабораторной работы
|
||
|
||
Так как работа будет выполняться на базовых технологиях веб-разработки, необходимо создать следующие файлы:
|
||
|
||
- `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-дерева.
|
||
|
||
## Собственно выполнение лабораторной работы
|
||
|
||
Дополнительные требования:
|
||
|
||
- В HTML-документе должен быть определён favicon: изображение, которое отображается на вкладке с Вашим документом;
|
||
- Ссылки в шапке (навигации) на разделы лендинга, как и в л/р F1, должны переносить пользователя на эти разделы;
|
||
- Внешний вид страницы должен более-менее соответствовать макету из л/р F1.
|
||
- Для получения данных с формы необходимо воспользоваться объектом `FormData`.
|
||
- Для отправки данных на сервер почитайте и реализуйте вызов API через функцию `fetch`.
|
||
|
||
Несколько советов:
|
||
|
||
- Не забудьте каждому `input`-элементу задать атрибут `name`.
|
||
- Для более тонкой настройки позиционирования элементов используйте `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`;
|
||
- возможно дополнительные файлы с изображениями, шрифтами, документами и пр.
|