Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.

Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

Верстка div (старая)

Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

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

А вот сейчас нам нужно данный код перевести в HTML5, но как оказывается что этот новый стандарт принёс с собой не мало новых тегов, о которых нужно знать перед тем как перевести наш код.

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

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

— данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

— обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.

— задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

— в этот тег должен входить низ Вашего сайта (Футер)

— в данный тег входят групы заголовков сайтов, например .

— данный тег включает в себя всю навигацию на сайте (меню).

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

Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:

— данный тег выводит аудио на сайте.

— данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

— в этот тег должны входить список меню, например ul li.

— сюда входят время и дата на сайте. Например на блогах дата размещения поста.

— вставляет видео на страницу.

— данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу
.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

А вот как он выглядит по новому:

Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег . Он был такой:

А стал такой:

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами и нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

Footer, nav, header, section, aside { display: block }

Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:

Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner — . Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 () можем смело его использовать вместо div только с таким же классом. Таким образом у нас получилось следующее:

И не забываем поставить закрывающий тег , а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом . В старой вёрстке этот главный блок выглядел так , а в HTML5 будет выглядеть вот так . И опять же не забудьте поставить закрывающий тег и удалить старый div.

Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.

Вывод

Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу:-) До скорых встреч.

От автора: с тех пор, как в сети стали появляться статьи, демонстрирующие новые свойства HTML5 и CSS3, у меня родилась идея создания верстки сайта без изображений. Взяв на вооружение улучшения HTML5 и CSS3 (по сравнению с предыдущими почтенными спецификациями), не слишком сложно сверстать достойно выглядящий веб сайт, которому не придется полагаться на изображения в качестве элементов разметки.

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Использование nav для создания основной навигации сайта – это нечто вроде данности, но обстоятельства таковы, что на вашем сайте будет больше областей, содержащих ссылки; вопрос в том, которые из них вам следует обернуть тэгом nav. Вот некоторые примеры использования, которые, я считаю, могут подойти:

Связанные посты.

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

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

XHTML

2010 16apr Sample Post 1 38

Curabitur ut congue hac, diam turpis[…]

Written by: Author Name Tags: coolmodernhype-friendly Continue Reading

2010 16 apr Sample Post 1 38 Curabitur ut congue hac, diam turpis[…] Written by: Author Name Tags: cool modern hype-friendly Continue Reading

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации ) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

Область общего нижнего колонтитула нашей демо-страницы содержит три элемента section. В них мы перечисляем самые популярные посты блога, последние комментарии и короткую биографию своей выдуманной компании.

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.

Как обычно, я с нетерпением жду любых вопросов и комментариев. Пожалуйста, не бойтесь высказаться и начать обсуждение использования новых элементов, потому что это – лучший способ прояснить их пользу.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Также можно скачать XHTML версию данного шаблона!

Шаг 1 - Дизайн

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

После этого весь дизайн кодируются с помощью HTML и CSS.

Шаг 2 - HTML

Важно заметить, что работа над HTML5 все еще ведется. И она по разным оценкам продлится до 2022 года (абсолютно серьезно). Однако, некоторые части уже готовы и ими можно пользоваться сегодня.

В этом уроке мы используем несколько новых тегов:

header - в него обернем нашу шапку
footer - для футера
section - группирует контент в секции (к примеру, главная секция, сайдбар...)
article - отделяет статьи от всей страницы
nav - содержит навигацию
figure - обычно содержит картинку-иллюстрацию к статье

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

Однако, есть некоторые ограничения использования HTML5 сегодня. Одно из них - эта вся линейка браузеров Internet Explorer - они не поддерживают эти теги (но это можно решить добавив небольшой JavaScript). Поэтому пока еще рановато полностью переходить на HTML5.

Поэтому в начале урока Вам также доступна ссылка на скачивание такого же шаблона, но в XHTML версии (работает во всех браузерах сейчас).

template.html - шапка

Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo .clear { zoom: 1; display: block; }

Вы можете заметить новый на первой строке, который сообщает браузеру, что страница создана по HTML5 стандарту.

После указания таблицы стилей и названия документа мы подключаем специальный JavaScript, который поможет правильно отображать HTML5 в любом IE. Это означает, что пользователь IE с отключенным JS ничего красивого не увидит. Именно поэтому стоит задуматься об использовании XHTML версии данного шаблона.

template.html - тело документа

В конце у нас идет тег футера.

Шаг 3 - CSS

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

styles.css - часть 1

Header,footer, article,section, hgroup,nav, figure{ display:block; } article .line{ /* Разделяющая полоса : */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; } footer .line{ margin:2em 0; } nav{ background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #FCFCFC; -moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; } nav ul li{ display:inline; } nav ul li a, nav ul li a:visited{ color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; } nav ul li a:hover{ text-decoration:none; background-color:#f0f0f0; } nav, article, nav ul li a,figure{ /* Applying CSS3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

Нам необходимо установить значение правила display на block для новых тегов. После этого можем обращаться с ними также, как и с обычными тегами.

Мы придаем стиль горизонтальной линии, статьям, и кнопкам навигации. В самом низу мы прописываем свойство border-radius для четырех разных типов элементов сразу для экономии.

styles.css - часть 2

/* Стили для статей : */ #page{ width:960px; margin:0 auto; position:relative; } article{ background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 black; } figure{ border:3px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; } figure:hover{ -moz-box-shadow:0 0 2px #4D7788; -webkit-box-shadow:0 0 2px #4D7788; box-shadow:0 0 2px #4D7788; } figure img{ margin-left:-60px; } /* Стили для футера : */ footer{ margin-bottom:30px; text-align:center; font-size:0.825em; } footer p{ margin-bottom:-2.5em; position:relative; } footer a,footer a:visited{ color:#cccccc; background-color:#213e4a; display:block; padding:2px 4px; z-index:100; position:relative; } footer a:hover{ text-decoration:none; background-color:#142830; } footer a.by{ float:left; } footer a.up{ float:right; }

Во второй части кода мы придаем более детальные стили нашим объектам.

Давайте перейдем к последнему шагу.

Шаг 4 - jQuery

Для модернизации данного шаблона мы создадим плавный эффект скролла после нажатия на ссылку с использованием jQuery плагина scrollTo. Для его работы необходимо пройтись по всем ссылкам и присвоить событие onclick, которое вызовет функцию $.srollTo(), описанную в скрипте плагина.

$(document).ready(function(){ /* Выполнение скрипта после загрузки страницы */ $("nav a,footer a.up").click(function(e){ // Если нажата ссылка - плавный скролл к нужному объекту : $.scrollTo(this.hash || 0, 1500); e.preventDefault(); }); });

Заключение

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

Всем привет. Добро пожаловать на обзор по HTML5. В своих статьях я буду постоянно затрагивать тему нового языка разметки и вместе с Вами создавать поистине великолепные шедевры сайтов. Сразу забегу вперед. Мы действительно! будем создавать отличный игровой портал, благодаря новейшим технологиям. И поэтому нашей основной задачей на сегодня будет понять, что же такое HTML5, что он из себя представляет.

HTML5 – что это?

HTML5 – это новый язык разметки. Но не стоит пугаться и думать, что Ваши знания по предыдущей версии html пропадут зря. На самом деле новая разметка воплотила все преимущества предыдущей версии html и добавила много всего вкусного.

Многие искренне считают, что HTML5 – это некий новый язык программирования. На самом деле это не так. Я считаю, что html5 – это совокупность различных самых современных элементов, благодаря которым, мы и получаем такие великолепные страницы.

HTML5 – это совокупность CSS3 (языка представления страницы), разметки (усовершенственный код html) и JavaScript (взаимодествие, интерактивность). Имея такой богатый арсенал мы можем с уверенностью сказать, что HTML5 это поистине новый рывок в создании не только веб-страниц, но и целых веб-приложений.

Естественно, подходить к созданию интерактивных страниц необходимо, имея, хотя бы базовые знания в области программирования на JavaScript и знанием html и css. Без этого никак.

А в сегодняшней статье, я бы хотел обратить Ваше внимание на создании простой, но в то же время очень важной начальной страницы на HTML5. Следуя этим простым принципам, которые я укажу в коде, Вы поймете, что html5 стал более гибок и понятлив. Итак, начнем с кода.

Моя первая страница /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size: 30px; color: red; } Привет var my_first=document.getElementById("first"); my_first.innerHTML="Это моя первая запись"; // Здесь Вы можете писать любую функцию. HTML5 видит css и javascript. Ему теперь не нужно указывать, что перед ним. Очень удобно.

< ! doctype html > < ! -- Обратитевниманиенановоеопределениедокументов. Теперьненужнозапоминатьисохранятькод. Выегосамизапомните. Посмотрите, каквыглядитВашкод. -- > < html > < head > < meta charset = "utf-8" > < ! -- Вотивсеmeta дляВашегодокумента. Короткость, сестраталанта-- > < title > Мояперваястраница< / title > < link rel = "stylesheet" href = "index.css" > < ! -- Подключениестилейиjavascript сталопрощенекуда-- > /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size : 30px ; color : red ; < / head >