112 lines
No EOL
4.5 KiB
HTML
112 lines
No EOL
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<!-- Métadonnées de la page -->
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Page web simple en HTML5 respectant les standards du W3C.">
|
||
<title>Page HTML5 — Démonstration</title>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- En-tête sémantique de la page -->
|
||
<header>
|
||
<h1>Exemple de page HTML5 conforme au W3C</h1>
|
||
<p>Réalisation dans le cadre du module <strong>Développement Web Statique</strong></p>
|
||
</header>
|
||
|
||
<!-- Contenu principal -->
|
||
<main>
|
||
<!-- Section d’introduction -->
|
||
<section>
|
||
<h2>Présentation</h2>
|
||
<p>
|
||
Cette page a été réalisée pour illustrer l’utilisation des éléments
|
||
<strong>sémantiques</strong> en HTML5 tout en respectant les standards du <abbr
|
||
title="World Wide Web Consortium">W3C</abbr>.
|
||
Elle contient une image, une liste, un tableau, un lien et du texte, comme demandé dans l’exercice.
|
||
</p>
|
||
<!-- Insertion d’une image locale ou distante -->
|
||
<figure>
|
||
<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg"
|
||
alt="Logo HTML5">
|
||
<figcaption>Logo officiel de HTML5.</figcaption>
|
||
</figure>
|
||
</section>
|
||
|
||
<!-- Section sur les éléments sémantiques -->
|
||
<section>
|
||
<h2>Les éléments sémantiques HTML5</h2>
|
||
<p>
|
||
HTML5 introduit plusieurs balises sémantiques telles que :
|
||
</p>
|
||
<!-- Liste non ordonnée -->
|
||
<ul>
|
||
<li><code><header></code> – en-tête du document</li>
|
||
<li><code><nav></code> – zone de navigation</li>
|
||
<li><code><article></code> – contenu autonome</li>
|
||
<li><code><section></code> – division thématique</li>
|
||
<li><code><footer></code> – bas de page</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Section sur les standards W3C -->
|
||
<section>
|
||
<h2>Les standards du W3C</h2>
|
||
<p>
|
||
Le <strong>W3C</strong> (World Wide Web Consortium) est une organisation qui définit
|
||
les <em>normes du web</em>. Ces règles assurent que les sites soient accessibles, compatibles et
|
||
bien structurés.
|
||
</p>
|
||
<p>
|
||
Pour plus d’informations, consultez le site officiel :
|
||
<!-- Lien externe -->
|
||
<a href="https://www.w3.org/" target="_blank" rel="noopener noreferrer">W3C.org</a>.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- Section avec tableau -->
|
||
<section>
|
||
<h2>Comparaison entre HTML et HTML5</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Critère</th>
|
||
<th>HTML</th>
|
||
<th>HTML5</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Sémantique</td>
|
||
<td>Peu développée</td>
|
||
<td>Balises explicites (header, footer, etc.)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Support multimédia</td>
|
||
<td>Utilise des plugins (Flash, etc.)</td>
|
||
<td>Intégré (audio, vidéo)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Compatibilité</td>
|
||
<td>Ancienne norme</td>
|
||
<td>Standard W3C actuel</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Pied de page -->
|
||
<footer>
|
||
<p>© 2025 - Équipe Persistent Lagoons</p>
|
||
<p>Page validée selon les standards du <a href="https://validator.w3.org/" target="_blank"
|
||
rel="noopener noreferrer">W3C Validator</a>.</p>
|
||
</footer>
|
||
|
||
</body>
|
||
|
||
</html> |