112 lines
4.5 KiB
HTML
112 lines
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>
|