Saturday, April 17, 2021

Salider Page Html


<!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>HTML4</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>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>About</li>
    <li>Contact</li>
    <li>Update</li>
  </ul>
</div>
<div id="content">
  <h2>News</h2>
  <div class="article">
    <h2>Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>
<div id="footer">
  <p>&amp;copy; 2018 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

 

Change to HTML5 Semantic Elements The existing CSS contains id's and classes for styling the elements

 

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;
}

 

Replace with equal CSS styles for HTML5 semantic elements:

 

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;
}

 

Finally, change the elements to HTML5 semantic elements:

 

 <body>
 <header> 
 <h1>Monday Times</h1> 
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body> 

1 comment: