Sabtu, 12 November 2011

Code Your Website With HTML 5

As evident, we have the following elements: header, last posts container, archive with a list of posts and blocks that usually we find in the sidebar of website, such as personal information, blogroll and contact details.
You may check out complete code here: index.html – style.css.

Step 1 – Basic Structure
First of all I define the basic structure of the HTML page, including Doctype, links to stylesheets, the title of the page and charset details. The following image explains the structure and highlights the tag that I use to create the basic structure.

this code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>mubarok leto| personal blog</title>
 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
 <header id="site_head">
  <div class="header_cont"><!--useful to create the 1024px limit-->
  <!--header stuff-->
  </div>
 </header>

 <div id="main_content"><!--useful to create the 1024px limit-->

  <section id="last_posts">
  <!--last posts here-->
  </section>

  <div class="left_cont">
  <section id="archive">
  <!--list od posts here-->
  </section>

  <aside class="friends">
  <!--blogroll-->
  </aside>
  </div>

  <aside>
  <section class="about">
  <!--identitas here-->
  </section>  

  <nav>
  <!--links for the backgroud profesi-->
  </nav>

  <section class="contact">
  <!--contact details here-->
  </section>
  </aside>

  <footer class="bottom">
  <!--footer info here-->
  </footer>
  </footer>

 </div><!--/main_container-->

</body>
</html>

Tidak ada komentar:

Posting Komentar