Использование CSS-фреймворка Bootstrap #

При разработке HTML-документов важной задачей является предоставление практичного и достаточно приятного для восприятия пользовательского интерфейса. Для решения этой задачи применяется отдельный язык CSS. Изучение данного языка не входит в рамки данного курса.

Вместо этого предлагается использовать CSS-фреймворк, который предоставляет готовые наборы «компонентов» HTML-документов, которые можно использовать для оформления. При использовании подобных решений ключевым становится не изучение деталей «низкоуровневого» языка CSS, а высокоуровневых компонентов, которые предоставляет CSS-фреймворк.

По окончании данной лабораторной работы вы должны:

Уметь подключать внешние CSS-документы к HTML-документам.
Уметь находить названия CSS-классов в CSS-документах.
Уметь применять CSS-классы к элементам HTML-документа.
Уметь применять наборы CSS-классов, предоставляемых CSS-библиотекой Bootstrap, для оформления сложных компонентов.
Уметь применять сетку для горизонального и вертикального расположения элементов в HTML-документе.
Знать о стандартных компонентах: навигационная панель, кнопки, карточки.

Внимание. В рамках курса запрещается использование CSS-кода внутри HTML-кода. Для оформления элементов используйте CSS-классы.

Внимание. Рекомендуется использовать готовые CSS-классы вместо написания собственных классов. Наличие ошибок или визуальных проблем при проверке может и скорее всего скажется негативно на оценке за лабораторную работу.

Документация #

Задача #

Вам необходимо разработать набор HTML-документов, которые описывают языки программирования, которые упоминаются в данном курсе.

Логическая структура сайта #

flowchart LR index("index.html\nСтартовая страница") prog-langs("languages.html\nЯзыки программирования") html-lang("langs/html-lang.html\nЯзык разметки HTML") css-lang("langs/css-lang.html\nЯзык стилизации CSS") kotlin-lang("langs/kotlin-lang.html\nЯзык Kotlin") index --- prog-langs prog-langs --- html-lang prog-langs --- css-lang prog-langs --- kotlin-lang

На стартовой странице, index.html, находится краткое описание задачи.
На странице со списком языков программирования, languages.html, находится несколько списков языков программирования с одинаковым содержимым, но разным оформлением. В каждом из списков должно находится название языка и ссылка к соответствующей странице. Список необходимо оформить следующими способами:
- С помощью группы списков: https://getbootstrap.su/docs/5.3/components/list-group/.
- С помощью таблиц: https://getbootstrap.su/docs/5.3/content/tables/.
- С помощью карточек: https://getbootstrap.su/docs/5.3/components/card/. Внимание. Для контроля ширины карточек используйте механизм сеток. Пример фиксации ширины карточки через указание стиля будет считаться ошибкой.
На странице конкретного языка программирования (html-lang.html, css-lang.html, kotlin-lang.html) должно присутствовать:
- Название языка программирования, в рамках заголовка h1, https://getbootstrap.su/docs/5.3/content/typography/#%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8.
- Ссылка для возвращения к странице списка языка программирования. Ссылка должна быть оформлена:
  - Как обыкновенная ссылка с текстом: https://getbootstrap.su/docs/5.3/content/typography/#%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B8.
  - Как кнопка: https://getbootstrap.su/docs/5.3/components/buttons/#%d1%82%d0%b5%d0%b3%d0%b8-%d0%ba%d0%bd%d0%be%d0%bf%d0%be%d0%ba.
- Краткое описание назначения языка, в рамках которого есть h2-заголовок с текстом «Краткое описание», за которым идёт несколько параграфов, p-элементов, с соответствующим содержимым.
- Пример исходного кода, в рамках которого есть h2-заголовок с текстом «Пример исходного кода», за которым идёт форматированный текст внутри элемента code, https://getbootstrap.su/docs/5.3/content/reboot/#%d0%b1%d0%bb%d0%be%d0%ba%d0%b8-%d0%ba%d0%be%d0%b4%d0%b0.

Требования к реализации #

На всех страницах должно присутствовать навигационное меню, https://getbootstrap.su/docs/5.3/components/navbar/, в рамках которого должны находиться ссылки на стартовую страницу и на страницу со списком языков программирования.
Всё содержимое страницы должно быть помещено в общий контейнер https://getbootstrap.su/docs/5.3/layout/containers/.
Внутри контейнера должна располагаться сетка https://getbootstrap.su/docs/5.3/layout/grid/, в ячейках которой должны располагаться элементы HTML-документа.
В рамках данной работы и лабораторных работ запрещается устанавливать или модифицировать CSS-стили у элементов HTML-документа. Вместо этого необходимо использовать CSS-классы, предоставляемыми библиотекой.
Можно использовать альтернативные CSS-фреймворки с учётом соблюдения предыдущего пункта.

Подход к реализации #

Создайте каталог, в котором будут размещены файлы сайта.
Архив CSS-библиотеки со всеми зависимостями, https://getbootstrap.su/docs/5.3/getting-started/download/#%d1%81%d0%ba%d0%be%d0%bc%d0%bf%d0%b8%d0%bb%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%bd%d1%8b%d0%b9-css-%d0%b8-js.

Распакуйте содержимое архива в каталог проекта. После распаковки у вас в каталоге должны появиться следующие файлы:

./
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   └── ...
└── js
    ├── bootstap.bundle.js
    ├── bootstap.bundle.js
    └── ...

Создайте файл template.html, в который добавите подключение библиотеки:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Демо Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Привет мир!</h1>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Откройте данный файл в браузере с помощью веб-сервера, встроенного в IDEA. С помощью инструментов разработчика убедитесь, что происходит загрузка CSS-библиотеки.
Доработайте файл template.html так, чтобы он содержал элементы, общие для всех других страниц. Он должен содержать:
1. Общее название для сайта.
2. Общее навигационное меню сайта.
3. Название языка в мета-информации сайта.
4. Указание на кодировку символов документа.
5. Общую базовую сетку для размещения содержимого страниц.
Скопируйте файл template.html в файл index.html и заполните его содержимым:
1. Добавьте заголовок h1, включающий название «Языки программирования курса»
2. После заголовка должны следовать параграфы с текстом задачи.
Удостоверьтесь, что данные на странице отображаются корректно.
Скопируйте файл template.htm в файл languages.html и заполните его содержимым:
1. Добавьте заголовок h1, включающий текст «Языки программирования».
2. Добавьте заголовок h2, включающий текст «Навигация в форме списка».
3. Далее расположите ненумерованный список ul, внутри элементов которого, li, расположены ссылки на соответствующие страницы. Текст ссылки — название языка программирования. Лучше всего использовать относительные ссылки.
4. Добавьте заголовок h2, включающий текст «Навигация в формате таблицы».
5. После заголовка разместите таблицу с двумя колонками: «Название языка», «Ссылка на страницу с описанием». В первом столбце должно находиться название языка, а во втором столбце — ссылка с текстом «Ссылка».
6. Добавьте заголовок h2, включающий текст «Навигация в формате карточек».
7. После заголовка разместите три карточки, в заглавии которых находится название языка программирования. В качестве текста описания разместите текст «Информацию о языке можно прочитать по ссылке», где текст «по ссылке» является ссылкой на соответствующую страницу.
Создайте каталог langs.
Скопируйте файл template.html в файл langs/html-lang.html и заполните его содержимым:
1. Исправьте пути к общим ресурсам: CSS и JavaScript-файлам CSS-библиотеки.
2. Добавьте заголовок h1 с текстом «Язык программирования HTML».
3. Добавьте блоковый элемент div, внутри которого расположите ссылки на страницу со списком языка программирования languages.html.
4. Первая ссылка должна использовать только обычный элемент с содержимым «Назад к списку».
5. Вторая ссылка должна быть оформлена в виде кнопки и содержать текст «Назад».
6. Добавьте заголовок h2 с текстом «Краткое описание».
7. Добавьте несколько параграфов и ненумерованных перечислений, описывающий данный язык программирования.
8. Добавьте заголовок h2 с текстом «Пример исходного кода».
9. Добавьте пример кода на данном языке программирования. Используйте элементы pre и code.
10. Удостоверьтесь, что все элементы интерфейса выглядят корректно и переход между всеми тремя страницами работает корректно.
Добавьте файл langs/css-lang.html, описывающий язык CSS.
Добавьте файл langs/kotlin-lang.html, описывающий язык Kotlin.
Удостоверьтесь, что на всех страницах корректно подключаются файлы CSS-библиотеки, а также корректно происходит переход между HTML-документами.