Вправа 5.2

Тема: Структура HTML-документа, використання таблиць стилів для оформлення зовнішнього вигляду сторінки.

Підручник: HTML та CSS
Перелік усіх доступних властивостей CSS із прикладами

Що таке мова HTML і чому її використовують?
Першим загальнодоступним описом HTML був документ під назвою «Теги HTML», вперше згаданий в інтернеті Бернерсом-Лі наприкінці 1991 року. Відтоді ця вебмова постійно розвивається. Поточною версією HTML є HTML5, яка дає можливість додавати відео, аудіо та 2D/3D графіку на вебсторінки.

Ви ж бачили вебсайт, який містить відео? Чому відео, аудіо та графіка є більш привабливими для вебсайту?
УВАГА
Абсолютно весь потрібний матеріал із роз'ясненнями є у Підручнику. Я закликаю вас користуватися ним!
Вище є кнопка із вирізкою саме цієї теми

Завдання 1: Додавання відео

  1. Знайдіть відеоролик по тематиці вашого сайту та додайте його на вебсторінку, яку ви створили в попередньому завданні (5.1).
  2. Завантажте його з інтернету чи створіть власне відео за допомогою смартфону, планшету або вебкамери. Якщо відео завантажено на YouTube, скористайтеся меню "Поділитися" -> "Вбудувати" (Встроить) та візьміть код, який відобразиться у вікні.
  3. Якщо це саме файл із відео, то він повинен мати розширення: .mp4, .ogg, .m4v, .webm, .ogv або .3gp. Ці типи підтримуються HTML5, інакше конвертуйте у .mp4.
  4. Якщо ви працюєте з ПК/ноутбука, відкрийте веб-версію (або скачайте собі) Phoenix Code, інакше - інший онлайн-редактор HTML, наприклад, OneCompiler, HTML Editor або HTML Compiler. Якщо там є якийсь готовий код - зітріть його та вставте свій із Вправи 5.1.
  5. Додайте відео на вебсторінку за допомогою відповідного коду. Задайте ширину та висоту вікна для відео на власний розсуд.
  6. Запустіть рендеринг вашої сторінки кнопкою "Run" або аналогічною. Переконайтеся, що отриманий результат правильний.
  7. Збережіть файл і переходьте до Завдання 2.

Завдання 2: Створення таблиці стилів

  1. Подумайте над тим, як би ви хотіли оформити вашу сторінку
  2. Додайте всередину тегу head наступну конструкцію:
    <style type="text/css">
  body {
    background-color: green;
    /* тут треба описувати інші властивості CSS */
  }

  /* а тут можна звертатися і до інших тегів та казати браузеру, як вони мають виглядати */

</style>
    Перелік усіх доступних властивостей із прикладами
  3. Користуючись посиланням на довідник вище виконайте оформлення вашої сторінки - насамперед нас цікавлять властивості:
    • оформлення тексту text-;
    • оформлення фону background-;
    • меж таблиць border-;
    • width/height для зображень;
    • також пограйтеся з padding.
  4. Оформіть за допомогою CSS-властивостей свою сторінку (+тло): параграфи (абзаци), заголовки, таблиці, списки тощо
  5. Збережіть файли та перевірте результат.
  6. Доєднайте скріншот вашої сторінки та код до завдання у ГК - два файли.