Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Апрель, 2011

Создание HTML5 шаблона

Сегодня мы будем заниматься разработкой шаблона формата HTML5 собственноручно!

В итоге должно получиться что-то вроде этого:

Каккад будет такой:

Smashing HTML5!

Если смотреть по блокам —  то, что нам нужно выглядит так:

HEADER

Повились новые теги и

Смысл Header естественно в том, чтобы обозначить верхушку сайта – шапку. Nav – навигационная часть (ссылки на разделы сайта).

едем дальше:

блок Избранное/лучшее (кому как больше нравится):

Это дело теперь упаковывется в специальный тег . А для статьи/поста теперь есть свой тег :

Smashing Magazine

Featured Article

HTML5 in Smashing Magazine!

Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser HTML5 and CSS3 website today!

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

       

  1. This be the title

    10th October 2005

    By Enrique Ramírez

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.

       


  2.    

Блогрол и прочие плюшки (тоже секцией)

код такой:

blogroll

       

  • HTML5 Doctor
  •    

  • HTML5 Spec (working draft)
  •    

  • Smashing Magazine
  •    

  • W3C
  •    

  • WordPress
  •    

  • Wikipedia
  •    

  • HTML5 Doctor
  •    

  • HTML5 Spec (working draft)
  •    

  • Smashing Magazine
  •    

  • W3C
  •    

  • WordPress
  •    

  • Wikipedia
  •    

  • HTML5 Doctor
  •    

  • HTML5 Spec (working draft)
  •    

  • Smashing Magazine
  •    

  • W3C
  •    

  • WordPress
  •    

  • Wikipedia

social

       

  • delicious
  •    

  • digg
  •    

  • facebook
  •    

  • last.fm
  •    

  • rss
  •    

  • twitter

Ну и остался пожалуй теперь самый низ странницы, а именно футер. Несложно догадаться, что для футера теперь тоже есть свой тег – < footer> . Выглядит так:

Smashing Magazine

Amazing Magazine

Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.

2005-2010 HTML5 TEMPLATES.

Осталось только сложить все эти элементы в один html файл, ну и не забыть про CSS.

css-файл формата CSS3 имеет следующий вид:

/* Name: Smashing HTML5 Date: July 2009 Description: Sample layout for HTML5 and CSS3 goodness. Version: 1.0 Author: Enrique Ramírez Autor URI: http://enrique-ramirez.com

*/

/* Imports */

@import url(«reset.css»);
@import url(«global-forms.css»);

/***** Global *****/

/* Body */
body {
background: #F5F4EF url(‘../images/bg.png’);
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: ‘Trebuchet MS’, Trebuchet, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}

/* Headings */

h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {

font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}

/* Anchors */

a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}

/* Paragraphs */

p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}

em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}

::selection {background: #F6CF74; color: #fff;}

/* Lists */

ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}

ol {

list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}

dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */

blockquote {font-style: italic;}
cite {}

q {}

/* Tables */

table {margin: .5em auto 1.5em auto; width: 98%;}

/* Thead */

thead th {padding: .5em .4em; text-align: left;}
thead td {}

/* Tbody */

tbody td {padding: .5em .4em;}
tbody th {}

tbody .alt td {}

tbody .alt th {}

/* Tfoot */

tfoot th {}
tfoot td {}

Что ж, теперь вы немного ознакомлены с форматом html5. Продолжение следует.

Уроки HTML5

Базовый синтаксис html5. Ваша страница должна быть написана по следующей структуре:

 
 
 
    Page title  
 
 
     
       

Page title

 
     
     
         
     
     
         
     
     
         
     
     
         
     
     
         
       

 

В совокуплении с файлом стилей (CSS) структура сайта может выглядеть например так:

Сегодня мы будем заниматься разработкой шаблона формата HTML5 собственноручно!

В итоге должно получиться что-то вроде этого:

Каккад будет такой:

Smashing HTML5!

Если смотреть по блокам —  то, что нам нужно выглядит так:

HEADER

Повились новые теги и

Смысл Header естественно в том, чтобы обозначить верхушку сайта – шапку. Nav – навигационная часть (ссылки на разделы сайта).

едем дальше:

блок Избранное/лучшее (кому как больше нравится):

Это дело теперь упаковывется в специальный тег . А для статьи/поста теперь есть свой тег :

Smashing Magazine

Featured Article

HTML5 in Smashing Magazine!

Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser HTML5 and CSS3 website today!

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

       

  1. This be the title

    10th October 2005

    By Enrique Ramírez

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.

       


  2.    

Блогрол и прочие плюшки (тоже секцией)

код такой:

blogroll

       

  • HTML5 Doctor
  •    

  • HTML5 Spec (working draft)
  •    

  • Smashing Magazine
  •    

  • W3C
  •    

  • WordPress
  •    

  • Wikipedia
  •    

  • HTML5 Doctor
  •    

  • HTML5 Spec (working draft)
  •    

  • Smashing Magazine
  •    

  • W3C
  •    

  • WordPress
  •    

  • Wikipedia
  •    

  • HTML5 Doctor
  •    

  • HTML5 Spec (working draft)
  •    

  • Smashing Magazine
  •    

  • W3C
  •    

  • WordPress
  •    

  • Wikipedia

social

       

  • delicious
  •    

  • digg
  •    

  • facebook
  •    

  • last.fm
  •    

  • rss
  •    

  • twitter

Ну и остался пожалуй теперь самый низ странницы, а именно футер. Несложно догадаться, что для футера теперь тоже есть свой тег – < footer> . Выглядит так:

Smashing Magazine

Amazing Magazine

Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.

2005-2010 HTML5 TEMPLATES.

Осталось только сложить все эти элементы в один html файл, ну и не забыть про CSS.

css-файл формата CSS3 имеет следующий вид:

/* Name: Smashing HTML5 Date: July 2009 Description: Sample layout for HTML5 and CSS3 goodness. Version: 1.0 Author: Enrique Ramírez Autor URI: http://enrique-ramirez.com

*/

/* Imports */

@import url(«reset.css»);
@import url(«global-forms.css»);

/***** Global *****/

/* Body */
body {
background: #F5F4EF url(‘../images/bg.png’);
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: ‘Trebuchet MS’, Trebuchet, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}

/* Headings */

h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {

font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}

/* Anchors */

a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}

/* Paragraphs */

p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}

em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}

::selection {background: #F6CF74; color: #fff;}

/* Lists */

ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}

ol {

list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}

dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */

blockquote {font-style: italic;}
cite {}

q {}

/* Tables */

table {margin: .5em auto 1.5em auto; width: 98%;}

/* Thead */

thead th {padding: .5em .4em; text-align: left;}
thead td {}

/* Tbody */

tbody td {padding: .5em .4em;}
tbody th {}

tbody .alt td {}

tbody .alt th {}

/* Tfoot */

tfoot th {}
tfoot td {}

Что ж, теперь вы немного ознакомлены с форматом html5. Продолжение следует.