Mar 10, 2011

Structuring page with HTML 5 and CSS3

1.HTML5
HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let’s get started marking up the blog page.


2.BASIC STRUCTURE

In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I’ll explain afterwards:
view plaincopy to clipboardprint?
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <title>Page title</title>  
  5. </head>  
  6. <body>  
  7.     <header>  
  8.         <h1>Page title</h1>  
  9.     </header>  
  10.     <nav>  
  11.         <!-- Navigation -->  
  12.     </nav>  
  13.     <section id="intro">  
  14.         <!-- Introduction -->  
  15.     </section>  
  16.     <section>  
  17.         <!-- Main content area -->  
  18.     </section>  
  19.     <aside>  
  20.         <!-- Sidebar -->  
  21.     </aside>  
  22.     <footer>  
  23.         <!-- Footer -->  
  24.     </footer>  
  25.   
  26. </body>  
  27. </html>  
It still looks like HTML markup, but there are a few things to note:
  • In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. It simply tells the browser that it’s dealing with an HTML-document.
  • The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from <h1> to <h6>. In this case the header is used to introduce the whole page, but we’ll use it to introduce a section of the page a little later.
  • The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
  • The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.
  • aside is used to wrap around content related to the main content of the page that could still stand on it’s own and make sense. In this case we’re using it for the sidebar.
  • The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.
Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what’s what in a page.

3.NAVIGATION
view plaincopy to clipboardprint?
  1. <nav>  
  2.     <ul>  
  3.         <li><a href="#">Blog</a></li>  
  4.         <li><a href="#">About</a></li>  
  5.         <li><a href="#">Archives</a></li>  
  6.         <li><a href="#">Contact</a></li>  
  7.         <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>  
  8.     </ul>  
  9. </nav>  


4.INTRODUCTION
view plaincopy to clipboardprint?
  1. <section id="intro">  
  2.     <header>  
  3.         <h2>Do you love flowers as much as we do?</h2>  
  4.     </header>  
  5.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>  
  6. </section>  
5.STYLING
view plaincopy to clipboardprint?
  1. /* Makeshift CSS Reset */  
  2. {  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6.   
  7. /* Tell the browser to render HTML 5 elements as block */  
  8. header, footer, aside, nav, article {  
  9.     display: block;  
  10. }  
  11.   
  12. body {  
  13.     margin: 0 auto;  
  14.     width: 940px;  
  15.     font: 13px/22px Helvetica, Arial, sans-serif;  
  16.     background: #f0f0f0;  
  17. }  
  18.   
  19. h2 {  
  20.     font-size: 28px;  
  21.     line-height: 44px;  
  22.     padding: 22px 0;  
  23. }  
  24.   
  25. h3 {  
  26.     font-size: 18px;  
  27.     line-height: 22px;  
  28.     padding: 11px 0;  
  29. }  
  30.   
  31. p {  
  32.     padding-bottom: 22px;  
  33. }  
6.STYLING NAVIGATION
view plaincopy to clipboardprint?
  1. nav {  
  2.     position: absolute;  
  3.     left: 0;  
  4.     width: 100%;  
  5.     background: url("nav_background");  
  6. }  
view plaincopy to clipboardprint?
  1. nav ul {  
  2.     margin: 0 auto;  
  3.     width: 940px;  
  4.     list-style: none;  
  5. }  
view plaincopy to clipboardprint?
  1. nav ul li {  
  2.     float: left;  
  3. }  
  4.   
  5.     nav ul li a {  
  6.         display: block;  
  7.         margin-right: 20px;  
  8.         width: 140px;  
  9.         font-size: 14px;  
  10.         line-height: 44px;  
  11.         text-align: center;  
  12.         text-decoration: none;  
  13.         color: #777;  
  14.     }  
  15.   
  16.         nav ul li a:hover {  
  17.             color: #fff;  
  18.         }  
  19.   
  20.         nav ul li.selected a {  
  21.             color: #fff;  
  22.         }  
  23.   
  24.         nav ul li.subscribe a {  
  25.             margin-left: 22px;  
  26.             padding-left: 33px;  
  27.             text-align: left;  
  28.             background: url("rss.png") left center no-repeat;  
  29.         }  

7.STYLING INTRODUCTION

view plaincopy to clipboardprint?
  1. #intro {  
  2.     margin-top: 66px;  
  3.     padding: 44px;  
  4.     background: #467612 url("intro_background.png") repeat-x;  
  5.     background-size: 100%;  
  6.     border-radius: 22px;  
  7. }  
view plaincopy to clipboardprint?
  1. #intro {  
  2.     ...  
  3.     /* Background-size not implemented yet */  
  4.     -webkit-background-size: 100%;  
  5.     -o-background-size: 100%;  
  6.     -khtml-background-size: 100%;  
  7.   
  8.     /* Border-radius not implemented yet */  
  9.     -moz-border-radius: 22px;  
  10.     -webkit-border-radius: 22px;  
  11. }  
view plaincopy to clipboardprint?
  1. #intro h2, #intro p¬†{  
  2.     width: 336px;  
  3. }  
  4.   
  5. #intro h2 {  
  6.     padding: 0 0 22px 0;  
  7.     font-weight: normal  
  8.     color: #fff;  
  9. }  
  10.   
  11. #intro p {  
  12.     padding: 0;  
  13.     color: #d9f499;  
  14. }  
view plaincopy to clipboardprint?
  1. #intro {  
  2.     ...  
  3.     background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,  
  4.             url("intro_flower.png") top rightright (653px 100%) no-repeat;  
  5.     ...  
  6. }  
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Test post after a long time

i want to see the post