Total Pageviews

Thursday, March 5, 2015

How to Create template using HTML5 Semantic Elements

 

 

 

 

 

 

 

 

How to Create template using HTML5 Semantic Elements, step to create html5 template using css, difference between html4 and HTML 5 template code, create a template using HTML5 semantic element

 

in this post i am going to explain how to create a template using HTML5 Semantic element and CSS.

To Create a template first you must know template creation using HTML4  Div tag .exactly what we do ?
we use multiple div in our HTML page as per our requirement suppose i want to crate following layout as shown below
 

Div Logo Title
Div Navigation
Div Left
Div Content
Div Right
Div Footer

 To Create  above template you need to define 6 div tag and set css property like float left or right, 

problem of this method is that you are going to use div tag repeatedly .

in HTML5 we are going to use Semantic Elements specially we are going to replace div tag in HTML4 with section tag or article tag or header, footer, aside etc. as per our requirement.

lets first see which are the html5 semantic elements what its use exactly.

Semantic elements means elements with certain meaning respect to user and Browser that means when you are gong to put content in this tag content got certain importance both browser and user point of view.

following are semantic elements defined by html5 and their use



Specifies a header for a document or section


<article>
Defines an article
<aside>
Defines content aside from the page content
<details>
Defines additional details that the user can view or hide
<figcaption>
Defines a caption for a <figure> element
<figure>
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>
Defines a footer for a document or section
<mark>
Defines marked/highlighted text
<nav>
Defines navigation links


<section>


Defines a section in a document


  

 

Note : Above All tag are paired tag

instead of dividing your page into different div we are going to create a different section using <section> tag

for my document i am going to give heading using <header> tag also i can use this header tag in <section> , <article> , <aside> tag to give heading to content. with <hgroup> tag.

to put image in my page i am going to use <figure> tag in that i will use <img> <figcaption> to name the image 

footer of my page will be in <footer> tag

to write navigation link i am going to use <nav> tag 

after writing HTML code i will apply  Same CSS that was apply to my HTML4 Element template lets see first HTML4 Template  and then convert it into HTML5 Template.

We are going to crate below html4 template first

HTML CSS code for above template is as follow

<html>
<head>
<style>
 #header{ background-color:pink;
          color:red;
          text-align:center;
          padding:5px;
}
#templatemo_menu {
    float: left;
    width: 100%;
    height: 30px;
    background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
    border-bottom: 1px solid #333;
}

#templatemo_menu ul {
    float: left;
    width:800px;
    margin: 0;
    padding: 7px 0 0 0;
    list-style: none;
}

#templatemo_menu ul li{
    display: inline;
}

#templatemo_menu ul li a{
    float: left;
    padding: 0 25px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
    color: #FFFF00;
}

#nav{ line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      h5:hover,h5:active;
clear:both;
    }
#section{ width:350px;
          float:left;
          padding:10px;
        }
#Div{ background-color:pink;
         color:red;
         clear:both;
         text-align:center;
         padding:5px;
       }
</head>
</style>
 <body>
 
 
 
   <Div id="header">
     <h1>html5css3sourcecode.blogspot.com</h1>
  
    <Div id="templatemo_menu">
        <ul>
            <li><a href="html5css3sourcecode.blogspot.com"  class="current">Home</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Business</a></li> 
            <li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>                    
            <li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>  
          <li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>            
        </ul>
    </Div>

   </Div>


   <Div id="nav">
     <h5> <li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Business</a></li> 
            <li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>                    
            <li><a href="html5css3sourcecode.blogspot.com">Technology </a></li> 
 <li><a href="html5css3sourcecode.blogspot.com"> Science</a></li> 
</h5>
   </Div>


   <Div id="section">
     <p>
<Div>
  <img src="what-is-web-hosting.jpg" alt="What is Web Hosting" width="304" height="228">
  <figcaption>Fig1. - What is Web Hosting.</figcaption>
</Div>

     </p>
    </Div>


  <Div id="Div">
   <h1> copyright@ <a href="html5css3sourcecode.blogspot.com">html5css3sourcecode.blogspot.com</a></h1>
  </Div>

 </body>
 </html>

Lets we convert HTML4 template into HTML5  template we are going  to use same CSS classes as shown in following image

HTML CSS code for above template is as follow

<html>
<head>
<style>
 #header{ background-color:pink;
          color:red;
          text-align:center;
          padding:5px;
}
#templatemo_menu {
    float: left;
    width: 100%;
    height: 30px;
    background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
    border-bottom: 1px solid #333;
}

#templatemo_menu ul {
    float: left;
    width:800px;
    margin: 0;
    padding: 7px 0 0 0;
    list-style: none;
}

#templatemo_menu ul li{
    display: inline;
}

#templatemo_menu ul li a{
    float: left;
    padding: 0 25px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
    color: #FFFF00;
}

#nav{ line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      h5:hover,h5:active;
clear:both;
    }
#section{ width:350px;
          float:left;
          padding:10px;
        }
#footer{ background-color:pink;
         color:red;
         clear:both;
         text-align:center;
         padding:5px;
       }
</head>
</style>
 <body>
 
 
 
   <Section id="header">
     <header> <h1>html5css3sourcecode.blogspot.com</h1></header>
  
    <NAV id="templatemo_menu">
        <ul>
            <li><a href="html5css3sourcecode.blogspot.com"  class="current">Home</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Business</a></li> 
            <li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>                    
            <li><a href="html5css3sourcecode.blogspot.com">Technology </a></li>  
          <li><a href="html5css3sourcecode.blogspot.com"> Science</a></li>            
        </ul>
    </NAV>

   </Section>


   <aside id="nav">
     <h5> <li><a href="html5css3sourcecode.blogspot.com" class="current">Home</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Daily News</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Sports</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Business</a></li> 
            <li><a href="html5css3sourcecode.blogspot.com">Politics</a></li>
            <li><a href="html5css3sourcecode.blogspot.com">Entertainment</a></li>                    
            <li><a href="html5css3sourcecode.blogspot.com">Technology </a></li> 
 <li><a href="html5css3sourcecode.blogspot.com"> Science</a></li> 
</h5>
   </aside>


   <Section id="section">
     <p>
    <figure>
      <img src="what-is-web-hosting.jpg" alt="What is Web Hosting" width="304" height="228">
      <figcaption>Fig1. - What is Web Hosting.</figcaption>
    </figure>

     </p>
    </Section>
  <footer id="footer">
   <h1> copyright@ <a href="html5css3sourcecode.blogspot.com">html5css3sourcecode.blogspot.com</a></h1>
  </footer>

 </body>
 </html>

 https://drive.google.com/file/d/0B51E_9HWc8iQNllpRU9ha0NRQTA/view?usp=sharing

To download Html4 and Html5 templat click here

 

Popular Posts

Follow by Email