Создание простого примитивного шаблона с использованием html 5
В статье разобран процесс разработки примитивного шаблона с использованием html5.
Ничего лишнего, только html + css.
Оглавление:
- Первоначальная разработка каркаса сайта
- Создание шапки сайта
- Создание поля с контентом
- Создание подвала
- Готовый код
Приступим!
Создадим файл названием 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">Указываем данные о странице в титульной части сайта:
<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 для настройки шапки сайта.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.