Correction TP HTML les balises sémantiques
Correction TP HTML les balises sémantiques
-
Objectifs
- ِ
-
Liste des exercices
- Exercice 01
- Exercice 01
-
Énoncé
Correction
-
Énoncé
Correction
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="utf-8"/>
</head>
<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li><a href="#news">News</a></li>
<li><a href="#sports">Sports</a></li>
<li><a href="#weather">Weather</a></li>
</ul>
</nav>
<section id="news">
<h2>News Section</h2>
<article>
<h3>News Article 1</h3>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
</article>
<article>
<h3>News Article 2</h3>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
</article>
</section>
<section id="sports">
<h2>Sports Section</h2>
<article>
<h3>Sports Article 1</h3>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
</article>
<article>
<h3>Sports Article 2</h3>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
</article>
</section>
<section id="weather">
<h2>Weather Section</h2>
<article>
<h3>Weather Article 1</h3>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
</article>
<article>
<h3>Weather Article 2</h3>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum
ipsum lurum hurum turum ipsum lurum hurum turum.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>