Monday 13 February 2017

HTML 4 VS HTML 5

HTML 4 VS HTML 5 Example

This is about live example of what is exactly page wise difference between HTML 4 and HTML 5. In HTML 4 we use div as page structure schema which is old now. Normally we make CSS classes for header,menu,section,article,footer etc. HTML 5 minimize this complexity by introducing new page structure element like header,footer,menu,section,acticle etc. these new tags simplified your page structure which was mess in previous for beginner. In upcoming example you will see a complete web page design separately in HTML4 and HTML5. After this example I am sure you will be able to understand what exactly difference between HTML 4 and 5 .

HTML 4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Girfa : Student Help HTML4 Example</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<div id="header">
  <h1>Raj SMS</h1>
</div>

<div id="menu">
  <ul>
    <li>Home</li>
    <li>Courses</li>
    <li>Career</li>
     <li>Facility</li>
     <li>About US</li>
     <li>Contact US</li>
     <li>Blog </li>
  </ul>
</div>

<div id="content">
  <h2>Welcome Raj SMS</h2>
  <div class="article">
    <h2>About Raj SMS</h2>
    <p>RAJ SMS GROUP considers education to be a life-long process which should have a strong foundation. The goal of the RAJ SMS GROUP is to inculcate in the students a love for learning and a desire to excel at every level. .</p>
     <p>The institution also aims at equipping the students with the intellectual and practical skills that are necessary to meet the challenges in the future.RAJ SMS of Institutions motto "Before self' speaks volumes about the quality of education which the institution imparts and the values it stands for.</p>
  </div>
  <div class="article">
    <h2>Director Message</h2>
    <p>It is with great pleasure to welcome you to our website. In this millennium the Computer Education has taken the key and premier role in the professional studies and excellence.</p>
  </div>
</div>

<div id="footer">
  <p>&copy; 2017 Raj SMS. All rights reserved.</p>
</div>

</body>

</html>

HTML 5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> >Girfa : Student HTML5 Example</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<header>
<h1>Raj SMS</h1>
</header>

<nav>
<ul>
  <li>Home</li>
    <li>Courses</li>
    <li>Career</li>
     <li>Facility</li>
     <li>About US</li>
     <li>Contact US</li>
     <li>Blog </li>
</ul>
</nav>

<section>
<h2>Welcome Raj SMS</h2>
<article>
<h2>About Raj SMS</h2>
  <p>RAJ SMS GROUP considers education to be a life-long process which should have a strong foundation. The goal of the RAJ SMS GROUP is to inculcate in the students a love for learning and a desire to excel at every level. .</p>
 <p>The institution also aims at equipping the students with the intellectual and practical skills that are necessary to meet the challenges in the future.RAJ SMS of Institutions motto "Before self' speaks volumes about the quality of education which the institution imparts and the values it stands for.</p>
</article>
<article>
<h2>Director Message</h2>
  <p>It is with great pleasure to welcome you to our website. In this millennium the Computer Education has taken the key and premier role in the professional studies and excellence.</p>
</article>
</section>

<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>

No comments:

Post a Comment