coding.exercices/HTML exercices/exercice-semantique.html

129 lines
3.7 KiB
HTML
Raw Permalink Normal View History

2023-03-15 18:49:14 +01:00
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
color: blue;
font: 1em sans-serif;
}
.titre-center {
text-align: center;
background-color: aqua;
color: red;
}
</style>
</head>
<body>
<header>
<div class="titre-center">
<h1>Le blog informatique</h1>
</div>
<nav>
<ul>
<li>Accueil</li>
<li>FAQ</li>
<li>A propos</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<section>
<h2>A la une</h2>
<article>
<img src="" alt="oups cassé">
<div>
<div>
<h1>Sujet du post</h1>
<p>hdfijsjisjd ushdisjdpjzi shdhoijdhks ksuhdijoqiz</p>
</div>
<div>
<span>01/05/2017</span>
<span>32 commentaires</span>
</div>
</div>
</article>
</section>
<section>
<h2>Derniers posts</h2>
<article>
<img src="" alt="oups cassé">
<div>
<div>
<h1>Sujet du post</h1>
<p>hgdjysgdkuhs jhsgdkhqkcb bqjhdgkqh</p>
</div>
<div>
<span>12/07/2017</span>
<span>41 commentaires</span>
</div>
</div>
</article>
<hr>
<article>
<img src="" alt="oups cassé">
<div>
<div>
<h1>Sujet du post</h1>
<p>hbdfjhcsbc jdscbkdshckjds kjdscksc</p>
</div>
<div>
<span>10/07/2017</span>
<span>26 commentaires</span>
</div>
</div>
</article>
<hr>
<article>
<img src="" alt="oups cassé">
<div>
<div>
<h1>Sujet du post</h1>
<p>jhdckuhdfkhb bsjdbkcshief jksdsfuh</p>
</div>
<div>
<span>08/07/2017</span>
<span>15 commentaires</span>
</div>
</div>
</article>
</section>
<aside>
<h1>2017</h1>
<details>
<summary>Janvier</summary>
</details>
<details>
<summary>Février</summary>
</details>
<details>
<summary>Mars</summary>
</details>
<details open>
<summary>Avril</summary>
<ul>
<li><a href="https://www.helmo.be/" target="_blank">élément cliquable</a></li>
<li><a href="https://www.helmo.be/" target="_blank">élément cliquable</a></li>
</ul>
</details>
<details>
<summary>Mai</summary>
</details>
<details>
<summary>Juin</summary>
</details>
<details>
<summary>Juillet</summary>
</details>
</aside>
</main>
<footer>
<span>&copy; Biogie - 2017</span>
</footer>
</body>
</html>