Вебтехнології. Урок 6. Верстка вебсторінки

Завдання 1. Верстка вебсторінки.

1. Продовжуємо працювати з HTML-кодом з минулого уроку.
   Відкрийте HTML-редактор. Натисніть кнопку “Відкрити HTML” та завантажте код HTML-сторінки з меню сайту, який ми створювали на минулому занятті
2. Для того щоб створити повноцінний макет вебсторінки нам необхідно додати до нього бокове меню, блок для основного тексту та нижню частину сторінки (футер, підвал).
   Щоб створити бокове меню та блок для основного тексту нам необхідний новий блок-контейнер, який буде розміщуватися нижче створенного раніше меню.
   Для цього під блоком <div class="menu"> створимо новий елемент <div> та наддамо йому id зі значенням main.

   <div id="main">
   </div>

   Елемент <div id="main"></div> буде контейнером для основної частини сайту.
3. Всередині <div id="main"> необхідно створити ще два елементи та задати для них унікальні id.
   
   <div id="sidebar"> – блок для бокового меню
   <div id="article"> – блок для основної частини сторінки (статті).

   <div id="sidebar">
     бокове меню
   </div>
   <div id="article">
     основний текст сторінки
   </div>

   Також повернемо червону лінію навколо всіх блоків <div>, щоб розуміти, як вони розташовуються на сторінці.

   div {
     border: 1px solid red;
   }

   

4. Так само, як і у випадку меню, блоки <div id="sidebar"> і <div id="article"> займають всю ширину контейнера main.
   Для того щоб розмістити блок sidebar зліва, а блок article справа, нам необхідно застосувати атрибут display зі значенням flex до елемента <div id="main">.

   #main {
     display: flex;
   }

   

5. Після цього ми можемо задати необхідну ширину (атрибут width) і висоту (атрибут height) для блоків sidebar та article.
   Наприклад, можемо встановити ширину блока sidebar як 30%, а ширину article як 70% від ширини контейнера main.
   Висоту блоків можемо встановити в пікселях, наприклад, 500 пікселів.

   #sidebar {
     width: 30%;
     height: 500px;
   }
   #article {
     width: 70%;
     height: 500px;
   }

   

6. Щоб завершити верстку вебсторінки створимо нижню частину сторінки (інколи її називають футер або підвал).
   Для цього створимо ще один елемент <div> нижче елемента <div id="main">, в якому розміщується основна частина вебсторінки.
   
   Не забуваєм встановити id.

   <div id="footer">
     футер
   </div>

   Також для нижньої частини сайту встановимо колір фону.

   #footer {
     background-color: #00b4d8;
   }

7.  Робота над версткою сторінки завершена. Видаляємо червоні лінії, які ми додали до елементів <div>.