Создание простого примитивного шаблона с использованием html 5

В статье разобран процесс разработки примитивного шаблона с использованием html5.

Создание простого примитивного шаблона с использованием html 5

Ничего лишнего, только html + css.


Оглавление:
  1. Первоначальная разработка каркаса сайта
  2. Создание шапки сайта
  3. Создание поля с контентом
  4. Создание подвала
  5. Готовый код


Приступим!


Создадим файл названием index.html и напишем первоначальный макет:

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<header>
   
</header>

<div class="content">
    <aside>
        <nav>

        </nav>
    </aside>

    <article>

    </article>
</div>

<footer>

</footer>

</body>
</html>


<!DOCTYPE>
Необходим для указания типа текущего документа.


И в данном случае:
<!DOCTYPE html>

Указана поддержка типов всех документов. Ориентировано на поддержку языка html5.

При разработке использовалась поддержка русского языка с помощью кодировки utf-8, а так-же указан тип размещаемого контента text / html.
Указываем в теге head:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


Указываем данные о странице в титульной части сайта:

Создание простого примитивного шаблона с использованием html 5

<title>Experimental Template</title>


Подключаем файл с таблицей стилей:
<link rel="stylesheet" href="css/style.css" />

Создаем папку в той же директории, где создавали файл index.html с названием css и в этой папке создадим файл style.css

Таблицу стилей заполним базовой информацией:

body {
    margin: 0;
    background: #F2EFE6;
}

header, footer, aside, nav, article {
    display: block;
}


Тело body будет иметь светло серый цвет и у него будут отсутствовать отступы.
Далее задаем тегам header, footer, aside, nav и article. Содержимое этих тегов будет блочным.

Браузер IE ниже 9 версии не понимает теги языка html5. По этому подключаем единственный js файл для поддержки этим браузером неизвестных тегов.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


На этом мы закончили написание кода в теге head и приступим к тегу header для настройки шапки сайта.
Страницы:
1 2 3 4 5
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru