- PHP – Passage et traitement des paramètres passés dans une URL (méthode GET)

Objectif : Réaliser une page « html5 » qui utilise des balises sémantiques ; utiliser des scripts php pour lire le contenu des variables passées dans une URL, et faire un traitement en fonction de ces variables .

Pour plus d’information sur l’intérêt des balises sémantiques ; utiliser le lien précédent.

Le bon emploi du HTML sémantique permet aussi d’améliorer l’accessibilité des documents sur Internet.

Le balisage sémantique consiste en l’utilisation d’éléments HTML pour donner du sens au contenu. C’est important pour une large gamme d’agents-utilisateurs (navigateurs sans support des feuilles de style, navigateurs textuels, assistants personnels, moteurs de recherche, etc).

Vous devez utiliser les éléments HTML standards (c’est-à-dire les balises) pour votre balisage et éviter d’utiliser des balises génériques en les faisant ressembler aux balises sémantiques. Dans des termes simples, cela veut dire : pour des titres, utiliser les éléments de titres, en commençant avec H1, pour des paragraphes de texte, utiliser un paragraphe, pour des listes, utiliser des éléments de liste. Pour structure le document (body), utiliser les balises ci dessous :

une en-tête de page : HEADER
une barre de navigation : NAV
une colonne de gauche : ASIDE
une zone principale pour le contenu : SECTION ou MAIN ou ARTICLE
un pied de page : FOOTER

image d’un article sur internet

exemple d’une page html

<!DOCTYPE HTML>
<html>
<head>
        <title>Titre principal de la page</title>
        <meta charset="utf-8">
</head>

<body>
    
    <header><!-- Entête de la zone considérée --></header>
    <nav><!-- Nav. principale de la page -> site --></nav>
    <aside><!-- Les à-cotés de la page --></aside>
    <section><!-- Contenu textuel de la page --></section>
    <footer><!-- Pied-de-page de la page -> site --></footer>

</body>
</html>

Pour déterminer comment imbriquer dans votre page les balises <main>, <section> ou <article>, voir les liens ci-dessous :

Quelques exemples de pages html qui utilisent des pages sémantiques : Sur alsacreations , openclassroom et Mozilla

Remarque importante :

Les balises section et article doivent obligatoirement avoir un titre.

Les balises de titre ont un ordre d’importance. Il ne doit y avoir qu’une seule balise <h1> dans la page (aujourd’hui,c’est une des règles élémentaires et indispensable à respecter en matière de référencement).

Si on veut être rigoureux, les balises header, footer et main doivent être à la racine de la balise body. Cependant il y a des exemples comme sur alsacreations qui ne sont pas aussi rigoureux.

Exemple

<!DOCTYPE HTML>
<html>
<head>
        <title>Titre principal de la page</title>
        <meta charset="utf-8">
</head>

<body>
    <header><!-- Entête de la page -->
        <nav>
            <!-- Nav. principale de la page -> site -->
        </nav>
    </header>
    <main>
        <h1>Mon site perso</h1>
        <section>
            <!-- 1ère partie du site, avec des articles -->
            <h2>Actualités</h2>
            <article>
                <h3>Une actu</h3>
                <p>Texte de mon actu</p>
            </article>
            <article>
                <h3>Une autre actu</h3>
                <p>Texte de mon autre actu</p>
            </article>
        </section>
        <section>
            <!-- 2ème partie du site -->
            <h2>Le titre de ma 2e partie</h2>
            <aside><!-- Un bloc d'informations complémentaire pour la 2e partie --></aside>
            <p>Le contenu de ma 2e partie</p>
        </section>
        <section>
            <!-- 3ème partie du site -->
            <h2>Ma 3e partie</h3>
            <div><!-- Un div, sans sens sémentique, uniquement pour des besoins de formatage & CSS -->
                <p>Du contenu</p>
            </div>
            <div><!-- Un autre div, sans sens sémantique, uniquement pour des besoins de formatage & CSS -->
                <p>Du contenu</p>
            </div>
        </section>
    </main>
    <footer>
        <!-- Pied-de-page de la page -> site -->
    </footer>
</body>
</html>

Exercice noté:

Dans l’exemple : les couleurs sont mal choisies, les boutons sont mal mis en évidence, la zone utile à l’élève pour apprendre ne fait pas assez ressortir ce qu’il doit apprendre …