Создание статических HTML-сайтов

Целью данного задания явлется восстановление (или приобретение) навыков оформления информации с помощью HTML-документов. А также обучение использованию компонент, предоставляемых CSS-фреймворком Bootstrap.

Учебники HTML

Для тех, кто не знаком с HTML, настоятельно рекомендуется прочесть учебник данного языка разметки. Для тех, кто знаком с HTML, настоятельно рекомендуется просмотреть учебники для восстановления знаний.

Учебник HTML от Mozilla
Учебник HTML на английском от Mozilla
Документация на CSS-фреймворк Bootstrap
Русские учебники HTML, не рецензировались

Задача

Мы формируем сайт для размещения собственных статей на техническую тематику (блог). Основная задача данного сайта состоит в том, чтобы Вы смогли делиться с другими и обсуждать информацию о полезных с Вашей точки зрения технологиях, практиках, инструментах. Дополнительно этот сайт должен быть вашей визитной карточкой, с которой другие люди смогут узнать о Ваших достижениях, знаниях и умениях.

Сайт должен состоять из следующих страниц:

Главная страница. На ней должен отображаться список статей (блог-постов), размещённых на сайте. На вашем сайте должна находится как минимум одна статья, можно больше.
Визитная карточка. Краткая информация о себе. Информация может включать список различных достижений (научных работ (публикаций), приложений, выступлений на конференциях, награды и т.п.). Этот список содержит ваши личные достижения. Можно указывать любые, но в разумных пределах.
Статья, посвящённая разработке первой лаборатоной работы. Размер статьи - не менее 400 слов.
Дополнительно статья, посвящённая разработке сайтов с использованием элементов CSS-фреймворка.

Все страницы должны содержать одинаковую шапку, в которой должны быть ссылки на основные разделы сайта: главная страница, визитная карточка.

На главной странице должен выводиться список аннотаций статей, т.е. либо краткого описания, либо выдержки из текста статьи. Аннотация включает в себя название, описание и ссылку на страницу с полным содержанием. При нажатии на ссылку должна открываться страница с полным содержимым статьи.

Пример технологического блога: http://ru-linux.livejournal.com/

Предлагаемый подход к решению задачи

Создайте каталог site.
Установите джем bundler и создайте его конфигурационный файл.
С помощью Bundler поставьте джемы adsf и adsf-live. Внимание джем adsf-live не работает и не устанавливается под MS Windows. Его не надо устанавливать под данной ОС. Однако в результате опция --live-reload сервера adsf, используемая в следующем пункте, перестаёт работать.
Запустите в корне каталога site приложение adsf: adsf --live-reload. Для Windows просто adsf* В веб-браузере откройте ссылку http://localhost:3000. Если вы всё сделали верно, то вы должны получить ответ от сервера с ошибкой.

Создайте файл index.html и добавьте в него следующую заготовку для страницы:

<!doctype html>
<html lang="ru">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Всё о пушистиках</title>
  </head>
  <body>
    Пушистые созданя!
  </body>
</html>

Откройте браузер и обновите ссылку сайта adsf. Если вы всё сделали корректно, тогда у вас должна отобразиться текстовая надпись Пушистые создания!.
В заголовок подключите стилевой документ CSS-фреймворка Bootstrap:
```

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
```
Мы будем использовать CDN (Content Delivery Network) для предоставления файлов пользователю. Это плюс для нас - нет необходимости скачивать и раздавать файл, однако требует от клиента соединяться к нескольким серверам для работы сайта. Плюс мы начинаем зависеть от доступа и к данной DN тоже.

Чтобы этого избежать скачайте архив с CSS-документом Bootstrap, распакуйте его и переместите каталоги css и js внутрь каталога site. Для распаковки архива можно воспользоваться unzip bootstap-4.3.1-dist.zip. Тогда можно модифицировать подключение CSS-фреймворка следующим образом:
```
<link rel="stylesheet" href="css/bootstrap.min.css">
```
В конец секции body поместите подключение JavaScript, необходимого для функционирования интерактивных компонентов:
```


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
```
Эти подключения нужны для функционирования только лишь небольшой части компонентов, предлагаемых фреймворком Bootstap. По умолчанию мы подключим их, однако в реальном окружении необходимо продумать все зависимости вашего приложения.

Вы также можете использовать локальные ресурсы вместо ресурсов, поставляемых с CDN. JavaScript часть фреймворка поставляется в составе архива. Другие библиотеки необходимо скачивать с соответствующих ресурсов.
Добавьте в файл index.html навигационную панель. Для создания навигационной панели используйте элемент Navbar. Добавьте в него ссылки:
- Ссылка на начальную страницу сайта, ссылка должна ссылаться на index.html.
- Ссылка на визитную карточку, ссылка должна ссылаться на cv.html.
Скопируйте файл index.html в файл template.html, чтобы его можно было использовать как шаблон для других страниц.
Создайте файл cv.html на основании шаблона template.html. Проверьте, что можете корректно переходить между этими страницами.
Заполните страницу cv.html, используя следующие элементы:
- List group для указания знакомых вам технологий.
- Набор из Alerts для указания списка знакомых вам иностранных языков. Распределите знание языков по 3 категориям: зелёный - хорошее знание, жёлтый - требуется помощь в виде словаря, красный - знаю пару слов.
- Список публикаций сформируйте в виде набора карточек. Карточка должна содержать название публикации, краткое её описание и ссылку. Желательно добавить изображения, которые будут описывать тематику публикации. Если у вас нет публикаций, то используйте любые публикации с Google Scholar.
- Список учебных заведений и результаты их окончания (включая начальную и среднюю школу) в формате карусели. На карточке должно быть название заведения, в качестве описания укажите результаты. Поэкспериментируйте с различными видами анимации.
Заполните страницу index.html. Основное содержимое должно быть сформировано с помощью 2 колонок.
- В каждую колонку добавьте по описанию статьи с помощью компонентов Jumbotron.
- В каждом компоненте должна быть ссылка на соответствующую статью, оформленная в виде кнопки. Первая статья будет расположена в файле lab-one.html, вторая в bootstrap-info.html.
- Под колонками разместите компонент для перехода между страницами. У вас должна быть 1 страница, ссылка должна вести на файл index.html.
Скопируйте файл template.html в файл lab-one.html. Данный файл должен содержать описание первой лабораторной работы.
- Для структурирования информации на странице используйте заголовки h1, h2 и h3, содержимое абзацев поместите в p.
- По возможности используйте таблицы для описания различных вариантов. Можно использовать, например, для анализа альтернативных вариантов по реализации.
- Обязательно добавьте элементы кода на страницу и оформите их необходимым образом.
Скопируйте файл template.html в файл bootstrap-info.html и добавьте в него компоненты, которые не были использованы на других страницах.
Удостоверьтесь, что можете успешно осуществлять навигацию между страницами.
Используя код из примеров Bootstrap добавьте на все страницы подвал, в котором укажите автора всех документов и дату создания каждого из них.