Блог старого компьютера

Блог старого компьютера


Главная html & css Верстка на HTML5

Верстка на HTML5

29.11.2012 08:10 Администратор html & css
Печать PDF
Все идет вперед все движется и развивается, а с этим всем и html не стоит на месте. На данный момент вышел html5 (если можно так сказать) о котором мы сегодня и поговорим. На самом деле боятся html5 совсем не нужно, там нет ни чего сложного и я вам сегодня постараюсь это доказать. Чем быстрее вы с ним ознакомитесь тем выше будут ваши знания и умения, а значит что вы попрежнему останетесь специалистом высокого уровня.  

Как говорит нам документация html5 не является продолжением гипертекстовой разметки, а является новой открытой платфоромой для создания веб приложений.

На сколько я знаю стандарт html5 еще не завершен, но уже сейчас большинство современных браузеров поддерживают его. Так как браузеры начали поддерживать платформу html5 то в сети стали появлятся сайты использующие эту платформу.

В html5 добавлено несколько новых  тегов, некоторые из ни просто являются заменой привычного тега <div>, но уже с заложеным в него смыслом. К примеру возьмем тег <header> из его названия ясно что он создан для того чтоб в него помещалась верхушка сайта, так сказать шапка. Для простого пользователя сайта совершенно не важно будь в сайте тег <header> в котором размещена шапка или тег <div>, разницы в их отображении нету и тот и тот является обычным блочным (теги html5 по умолчанию не блочны им необходимо задавать css свойство display:block;) элементом. А вот для машины к примеру возьмем поискового робота, сразу становится ясно что эта область отвечает за шапку сайта, тем самым робот имеет возможность более правильно индексировать сайт. Вот уже на начальном изчении html5 мы с вами понимаем что в нем нового и какие он возможности нам предлогает, но это далеко не все.

И так раз уж коснулись темы блочной верстки с новыми тегами то и продолжим ее. Я опишу основноые теги html5 которые нам необходимо знать:

  1. Тег <header> - (в переводе означает - заголовок) тег означающий область шапки сайта (в нем можно разместить к примеру логотип сайта, изображение, заголовок, название сайта).
  2.  Тег <article> - (в переводе означает - статья) в данном теге размещается основная инофрмация сайта (новости, статьи, записи)
  3. Тег <aside> - (в переводе значит - в стороне) тег означает область сайта в которой размещаются архивы, ссылки, метки, модули (тег данной области знаком нам как область sidebar)
  4. Тег родитель <figure> и сын <figcaption> - теги предназанчены для ассоциаци элемента с подписью. Об его использовании поговорим ниже, тога все встанет на свои места.
  5. Тег <footer> - всем нами понятный тег который означает подвал (футер, низ сайта). В котором мы привыкли размещать копирайт, контакты, счетчики, и другую информацию о странице.
  6. Тег <hgroup> - в данном теге размещается группа заголовков.
  7. Тег <nav> - тег в котором размещаются ссылки навигации по сайту. Рекомендуется заключать в данный тег то "Меню сайта" которое является для вас и для поиска более важным. Можно так же и использовать несколько таких тегов. Так же я слышал про тег <menu>, но сказать что то по нему сейчас не готов.
  8. Тег <section> -  определяет секцию документа. В нем можно размещать заголовок, шапку, подвал. Наверное такой тег довольно полезен будет создателям блога.
  9. Тег  <time> - думаю и так понятно что этот тег создан для того чтоб помещать в нем дату.

 Вот с помощью представленных выше тегов мы можем создать семантическую страницу, которая думаю будет приятна поиску. Привыкнуть к данным тегам я думаю не составит труда, тем более для тех людей которые использовали следующий алгоритм верстки <div id="nav"></div>.

 Вот на этом моменте я думаю как бы составить страницу с использованием всех тегов, и почему то считаю что не нужно это делать и покажу все это на простом примере.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Моя первая страница на html5</title>
<!--[if lt IE 9]>
<script>
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
<style>
body{
margin:0px;
padding:0px;
font-sizeL13px;
font-family:Tahoma;
}

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

h1, h2{
margin:0px;
padding:0px;
}

.wrapper{
width:970px;
margin-left:auto;
margin-right:auto;
}

.clear{
clear:both;
}

header{
height:100px;
background: #e6e6fa;
line-height:100px;
}

header h1{
margin-left:20px;
}

aside{
float:left;
width:270px;
}

article{
float:left;
width:620px;
margin-right:20px;
}

nav{
margin-top:20px;
margin-bottom:20px;
}

nav a{
margin-left:130px;
}

footer{
margin-top:10px;
background: #FF7F7F;
}

time{
font-size:12px;
color:silver;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Мой сайт на html5</h1>
</header>
<nav>
<a href="/1.html">Обо мне</a>
<a href="/2.html">Статьи</a>
<a href="/3.html">Заметки</a>
<a href="/4.html">Контакты</a>
</nav>
<aside>
<h2>Последние новости</h2>
<time>2012-12-12</time>
<p>Сегодня ДК имени Ленина выступает замечательная группа "Короли Лопаты"</p>
</aside>
<article>
<h2>История о моем отдыхе</h2>
<time>2012-12-12</time>
<p>В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. </p>
<p>В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. В этом году я замечательно отдохнул. </p>
</article>
<div class="clear"><d/iv>
<footer>
Copyright © 2008-12 Валентин Васильев
</footer>
</div>
</body>
</html>

 Выше вы видите исходный код странички на html5 которую я буквально за 5 минут сверстал вам для примера.

Первым на что вы обратили мнимние это скорее всего <!DOCTYPE html>. Именно такой доктайп и нужно указывать для инициализации html5 он единственный и другого несуществует.

Второе на что скорее всего вы обратили внимание это на мета тег задающий кодировку сайта <meta charset="utf-8">. Написав так я не ошибся, кодировку теперь можно задавать именно так. Хотя можно и по старинке.

Третье на что нужно обратить внимание это на то что всем новым тегам я назначил display:block.

Четвертое на что вы обратили внимание это скрипт указанный в теге <head>. Думаю если вы разбираетесь в JS то вам станет ясно что это скрипт добавляет  возможность использовать новые теги в нашем "любимом" ишаке (IE7 и IE8). Данные скрипт обходит циклом нужные нам теги и дает возможность их использовать. Скрипт можно и упрастить написав вот так (но универсальностью тут не пахнет):

<script>
document.createElement("header");
</script>

 Страницу я проверил в различных браузерах. Выглядит она так:

 Описание принципов верстки на html5 я закончил, если у вас есть чем дополнить мои слова буду очень рад. В дальнейшем планирую сделать обзор новых мультимедийных тегов.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?