DY

TP09: Sémantique

Le HTML sémantique est l'utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c'est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence).

Squelette de base HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>..</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

Navigation et titre principal

Dans la balise header rajoutez le code suivant:

<h1>HELLO WORLD!</h1>
<nav>
    <a href=".." title="..">Home</a>
    <a href=".." title="..">Contact</a>
</nav>

Un exemple plus complexe

Voici l'exemple d'un article:

<article>
    <h2>Useless title</h2>
    <time>04/05/1977</time>
    <p></p>
    <img src=".." alt=".." />
    <a href="http://google.fr" title="Jump to google.fr">Google</a>
</article>

Structure globale d'une page d'actualités

Voici le code d'un listing d'articles avec une sidebar:

<main>
    <section>
        <h2></h2>
        <article></article>
        <article></article>
    </section>
    <aside>
        <p>..</p>
    </aside>
</main>

Il y a bien longtemps, dans une galaxie lointaine, très lointaine ...

En reprenant vos fichiers du TP n°5, modifier la structure de vos fichier HTML pour obtenir une page d'accueil et des pages pour chaque film sémantiquement correct.

Page d'actualités

En utilisant vos connaissance en HTML sémantique, créer une page d'actualités que nous nommerons IUTNews et qui listera quelques actualités. Chacune contenant à minima les informations suivantes: