Задание по HTML к четвертому уроку. Блочная верстка

В своей рабочей папке с уроками, создайте html документ index.html и сверстайте страницу по шаблону

4 урок Лекционная часть

Пропишите основную структуру документа
В контейнере Body — создайте 6 блоков div: 1 оберточный блок wrapper, отвечаeт за общую ширину рабочего пространства и расположения страницы по середине. 5 остальных блоков — ячейки, каждый из них будет нести свой функционал
```
<div id="wrapper"> 
    <div class="header"> Шапка </div>  
    <div class="menu"> Навигация </div>
    <div class="sidebar"> Сайдбар </div>
    <div class="content"> Контент </div>
    <div class="footer"> Футер </div>
</div>
```
В контейнере head — создайте парный тэг style,и внутри <style>…</style> опишите стили для созданных классов и идентификатора, а также обнулите внешние и внутренние отступы, которые заданы браузером по умолчанию.

<style>
  body{margin:0;padding:0;}
  #wrapper{max-width:1200px;margin:0 auto;}
  .header{width:100%;background:#555;float:left;}
  .menu {width:100%;background:#666;float:left;}
  .sidebar{width:300px;background:#666;float:left;padding:15px;box-sizing:border-box;}
  .content{width:calc(100% - 300px);min-width:300px;background:#777;float:left;padding:15px;box-sizing:border-box;}
  .footer{width:100%;background:#000;float:left;padding:15px;box-sizing:border-box;color:#fff;}
  </style>

Вот что у вас должно получиться

Внутри контейнера header мы расположим по центру блок с классом logo, где будет располагаться логотип, максимальная ширина блока равна 300px

<div class="logo"> Логотип </div>

.logo{max-width:300px;margin:20px auto;background:#999;}

Итоговый код страницы

<html>
    <head> 
       <title> Блочная верстка </title>
     <meta charset="utf-8">
  <!--Стили-->
    <style>
      body{margin:0;padding:0;}
      img{max-width:100%;width:auto;}
      #wrapper{max-width:1200px;margin:0 auto;}
      .header{width:100%;background:#555;float:left;}
        .logo{max-width:300px;margin:20px auto;background:#999;}
      .menu {width:100%;background:#666;float:left;}
        .main{max-width:100%;margin:10px;background:#999;}
      .sidebar{width:300px;background:#666;float:left;padding:15px;box-sizing:border-box;}
      .content{width:calc(100% - 300px);min-width:300px;background:#777;float:left;padding:15px;box-sizing:border-box;}
      .footer{width:100%;background:#000;float:left;padding:15px;box-sizing:border-box;color:#fff;}
    </style>
  <!------>
  </head>
    
  <body> 
    <div id="wrapper">
      <div class="header">
      <div class="logo">Логотип</div>
      </div>
      <div class="menu">Навигация
        <div class="main">Меню</div>
      </div>
      <div class="sidebar"> Сайдбар</div>
      <div class="content">Контент</div>
      <div class="footer">Футер</div>
    </div>
  </body>
</html>

Дополнительно

В корневом каталоге создайте папку css и в нем файл style.css

Перенесите стили с документа в отдельный файл style.css.

В index.html вместо <style>…</style> подключите файл стилей style.css

<link rel="stylesheet" type="text/css" href="css/style.css">