HTML Макеты

Пример: Макет на основе таблицы

Макет на основе таблицы

Шапка сайта
Главное меню HTML Элементы HTML Атрибуты HTML Таблицы ...	Основной контент...
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<title>Макет на основе таблицы</title>
    <style>
        table {
            width: 100%;
            border: 0;
        }
        td.header {
            background-color: #b5dcb3;
        }
        td.sidebar {
            background-color: #dddddd;
            width: 30%;
            vertical-align: top;
            padding:5px;
        }
        td.sidebar>ul {
            list-style: none;
            padding:5px;
        }
        td.article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            vertical-align: top;
            padding:5px;
        }
        td.footer {
            background-color: #b5dcb3;
            text-align: center;
            padding:5px;
        }
    </style>
</head>
<body>
  <table border="0">
    <tr>
      <td colspan="2" class="header"><h1>Шапка сайта</h1></td>
    </tr>
    <tr>
      <td class="sidebar">
        <b>Главное меню</b>
            <ul>
                <li>HTML Элементы</li>
                <li>HTML Атрибуты</li>
                <li>HTML Таблицы</li>
                <li>...</li>
            </ul>
      </td>
      <td class="article">Основной контент...</td>
    </tr>
    <tr>
      <td colspan="2" class="footer">Copyright © 2017 wm-school.ru</td>
    </tr>
  </table>
</body>
</html>

	Совет: Не используйте таблицы для разметки страницы! W3C осуждает использование таблиц для разметки.

Пример: Макет на основе DIV-элементов

Шапка сайта
Главное меню HTML Элементы HTML Атрибуты HTML Таблицы ...	Основной контент...
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
#header {
    background-color:#808000;
}
#sidebar>ul {
    list-style: none;
    padding:5px;
}
#sidebar {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
#content {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
#footer {
    background-color:#808000;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div id="page">
<div id="header">
<h1>Шапка сайта</h1>
</div>

<div id="sidebar">
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</div>

<div id="content">
<p>Основной контент...</p>
</div>

<div id="footer">
Copyright © 2017 wm-school.ru
</div>
</div>

</body>
</html>

Новые элементы разметки в HTML5
Элемент	Значение / описание
<header>	Определение заголовка страницы или раздела.
<nav>	Определение области навигации страницы или раздела.
<section>	Определение логической области страницы или группировка контента.
<article>	Определение статьи (логически завершенного блока контента).
<aside>	Определение вторичного или связанного контента.
<footer>	Определение завершителя страницы или раздела.
<details>	Определяет дополнительные детали.
<summary>	Определяет заголовок для элемента <details>.

Пример: Макет на основе элементов HTML5

Шапка сайта
Главное меню HTML Элементы HTML Атрибуты HTML Таблицы ...	Заголовок Основной контент...
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
header {
    background-color:#0095B6;
}
nav>ul {
    list-style: none;
    padding:5px;
}
nav {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
section {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
footer {
    background-color:#0095B6;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div id="page">
<header>
<h1>Шапка сайта</h1>
</header>

<nav>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</nav>

<section>
<h1>Заголовок</h1>
<p>Основной контент...</p>
</section>

<footer>
Copyright © 2017 wm-school.ru
</footer>
</div>

</body>
</html>

HTML уроки:

Формы

HTML Примеры

HTML Справочники

Макеты веб-страниц

Макеты на основе таблиц

Пример: Макет на основе таблицы

Шапка сайта

Макеты на основе DIV-элементов

Пример: Макет на основе DIV-элементов

Шапка сайта

Новые элементы макета в HTML5

Новые элементы разметки в HTML5

Пример: Макет на основе элементов HTML5

Шапка сайта

Заголовок

HTML уроки:

Формы

HTML Примеры

HTML Справочники

Макеты веб-страниц

Макеты на основе таблиц

Пример: Макет на основе таблицы

Шапка сайта

Макеты на основе DIV-элементов

Пример: Макет на основе DIV-элементов

Шапка сайта

Новые элементы макета в HTML5

Новые элементы разметки в HTML5

Пример: Макет на основе элементов HTML5

Шапка сайта

Заголовок

Макеты на основе таблиц

Пример: Макет на основе таблицы