Le squelette d'une page web¶

La base d'une page HTML devrait toujours être la même et intégrer un minimum d'information afin de répondre aux standards et de permettre aux différents navigateurs de comprendre la structure de la page.

Squelette épuré¶

Le squelette le plus épuré d'une page HTML comprend :

Le type de document
Le début / fin du code HTML
La définition du fichier en en-tête
Le contenu de la page dans le corps

Ainsi, notre squelette épuré est le suivant :

<!doctype html>

<html>

    <head>
        <!-- Description du fichier ici -->
    </head>

    <body>
        <!-- Contenu de la page web ici -->
    </body>

</html>

Version du document¶

Dans le squelette présenté ci-haut, le type de document est défini au tout début du fichier à l'aide de la balise :

<!doctype html>

Un mode de compatibilité s'applique lorsqu'il n'y a pas de DOCTYPE spécifié, que ce dernier est mal écrit ou encore que la version indiquée est désuette. Dans cette éventualité, le navigateur suppose que la page web est vieille ou qu'elle n'a pas été conçue avec les standards du web. La page sera tout de même affichée dans le navigateur, mais demandera plus de ressources pour effectuer le rendu et le résultat sera fort possiblement mal affiché et étrange.

En précisant la balise <!doctype html> en début de fichier, on force le navigateur à interpréter le code HTML en suivant les standards associés à la version HTML5. C'est ce qui doit être adopté pour tout nouveau site web afin d'utiliser le HTML5 en mode plein standards.

La page web¶

Après la définition de la version, on peut maintenant écrire notre page web.

D'abord, on doit délimiter la page à l'aide de la balise <html> afin de bien définir le contenant de la page.

Ensuite, cette dernière est composée de deux sections importantes:

L'en-tête <head> : contient des informations invisibles mais importantes qui décrivent la façon dont la page doit être lue par les navigateurs
Le corps : contient le contenu visible de la page web

Pour comprendre cette notion, comparons notre page html à une assiette-repas. Le repas a besoin d'un contenant pour pouvoir être servi, tout comme notre page web. Ainsi, on pourrait décrire notre assiette de la façon suivante :

L'assiette HTML

On pourrait alors comparer notre assiette avec le squelette de la page HTML comme suit :

L'assiette HTML

L'en-tête: description du fichier¶

L'objectif de l'en-tête est de fournir de l'information à propos de la page, utile aux navigateurs et aux moteurs de recherche. Les informations inscrites dans cette section n'apparaissent pas sur la page web.

Les balises utilisées à l'intérieur de l'en-tête sont généralement utilisée que dans cette section spécifique. Idéalement, on ne retrouvera pas ces balises dans le corps de la page. Voici les balises typiquement utilisées dans l'en-tête :

Balise	Description
`<title>`	Cette balise ermet de définir un titre de page à afficher sur l'onglet du navigateur. Elle n'a aucun lien avec le contenu de la page web.
`<meta>`	Cette balise est utilisée pour définir plusieurs informations : l'encodage, l'auteur, la description, des mots-clé, etc... Des exemples sont donnés plus bas.
`<link>`	Cette balise est utilisée pour définir des relations, entre la page web actuelle et d'autres ressources dites externes. Ces autres ressources incluent entre autres les feuilles de style (CSS), l'icône de favoris et d'autres ressources externes.
`<script>`	Cette balise permet de référencer du code exécutable tel que du JavaScript. D'autres langages peuvent aussi être appelés avec cette balise, notamment le GLSL du WebGL. Toutefois, nous verrons que les standards actuels suggèrent fortement de placer les script en fin de la portion `<body>` de la page.

Minimum recommandé¶

Selon les standards actuels du Web, un minimum d'information doit être défini dans l'en-tête de la page. Cette information doit contenir :

1 - L'encodage

L'encodage indique l'ensemble des caractères possibles dans la page. Il existe plusieurs codes pour définir différents types d'encodage.

Le plus fréquent est UTF-8 puisque cet ensemble permet de définir tous les caractères possibles de presque toutes les langues humaines (ceci exclu donc le Klingon ).

Ainsi, pour indiquer à notre navigateur que notre page doit être affichée en utilisant l'encodage UTF-8, on utilise la balise <meta> de la façon suivante:

<meta charset="utf-8">

Afin que tout le reste du document html soit bien lu et compris, y compris le titre sur l'onglet du navigateur, ce sera la première balise à insérer entre l'ouverture et la fermeture de la balise <head>.

Vous remarquerez plus bas que la balise <meta> est utilisée pour définir plusieurs types d'informations. Ainsi, les attributs utilisés sont très importants pour définir correctement chaque occurence. Ici, on utilise l'attribut charset pour indiquer que cette occurence de la balise meta indique l'encodage de la page.

2 - Le titre

Tel qu'expliqué dans le tableau ci-haut, le titre permet de définir le texte affiché sur l'onglet du navigateur. Mais cette information possède aussi d'autres utilités importantes telles que le titre utilisé lorsqu'on sauvegarde un favoris.

Dans l'image présentée, nous voyons le titre de trois sites: Rocket.Chat, Squelette HTML - Interface et What's in the head?

Pour définir le titre, il suffit d'inscrire le texte voulu entre l'ouverture et la fermeture de la balise <title>.

Voici un exemple:

<title>Rocket.Chat</title>

Il est important de noter que la balise <title> ne devrait être définie qu'une seule fois dans une page web.

3 - Lien vers la feuille de style (CSS) - s'il y en a

Les standards du web d'aujourd'hui dicte que dans le meilleur des mondes, le CSS doit être écrit dans un fichier autre que la page HTML. Ceci simplifie grandement la page web et facilite la maintenance et la division du travail en équipe.

Par contre, comme le CSS se trouve dans un autre fichier, il faut alors créer un lien dans la page html pour que cette dernière puisse le lire et l'interpréter au moment de son affichage.

Pour créer ce lien, on utilise la balise <link>, comme l'exemple suivant:

<link rel="stylesheet" href="styles.css">

Ici, on utilise les attributs et les valeurs suivants :

rel="stylesheet" indique que la relation qui existe entre la page HTML et le fichier externe est un lien de type "feuille de style".

href="mon_document_css.css" indique le chemin où se trouve le fichier externe

Lorsque le fichier se trouve dans un sous-dossier du projet, alors on doit l'indiquer dans l'attribut href :

<link rel="stylesheet" href="img/styles.css">

Donc, un en-tête de page web devrait contenir au minimum les métadonnées suivantes :

L'encodage
L'auteur
Le titre

Exemple :

    <head>
        <meta charset="utf-8">
        <title>TITRE DE LA PAGE</title>
        <meta name="author" content="NOM DE L'AUTEUR">
    </head>

Autres éléments importants¶

Bien que l'encodage, le titre et le lien vers la feuille de style soient le minimum recommandé dans l'en-tête, d'autres informations sont jugées aussi très importantes et devraient faire partie de l'en-tête afin d'optimiser la page web. Ces éléments sont :

L'auteur
La description
L'icône de favoris
Les données Open Graph

1 - L'auteur

Spécifier l'auteur de la page peut être utile au sein d'une équipe de travail afin de pouvoir s'adresser à la bonne personne lorsque nécessaire. De plus, spécifier un auteur peut aussi permettre la possibilité d'entrer en contact avec eux.

Pour spécifier l'auteur de la page, on utilise la balise <meta> avec deux attributs :

nom (name) : spécifie le type d'information
contenu (content) : spécifie l'information elle-même

Ainsi, pour déclarer un auteur, la syntaxe à suivre est :

<meta name="author" content="Mélissa Clermont">

2 - La description

La description est un élément très important pour les moteurs de recherche. Non seulement cette information est utilisée dans l'affichage des résultats de recherche, mais si la description contient des mots-clé en lien avec le contenu de la page, alors il y a de meilleures chances que la page ressorte dans premiers résultats de recherche.

Bon à savoir

L'optimisation d'une page web pour améliorer ses chances de ressortir dans les premiers résultats de recherche est une technique qu'on appelle le SEO (Search Engine Optimization). Certaines personnes se sont spécialisées dans ce domaine et ne travaillent qu'à optimiser les sites web existants ou en création.

Pour ajouter une description das notre page web, on utilise aussi la balise <meta> avec les attributs nom (name) et contenu (content), comme suit :

<meta name="description" content="Page traitant du squelette d'une page HTML afin d'expliquer la structure d'une page web tout en tenant compte des bonnes pratiques et des standards actuels, incluant le minimum nécessaire dans la section <head>, ainsi que ce qu'on devrait retrouver dans la section <body>.">

3 - L'icône de favoris

L'icône de favoris est utilisé à deux endroits dans le navigateur :

sur l'onglet du navigateur à côté du titre
dans la liste de favoris

L'icône de favoris est une image de très petite taille (16 pixels par 16 pixels) et de format spécifique (idéalement .ico pour une meilleure compatibilité entre les différentes versions des navigateurs, mais peut aussi être un .gif ou un .png).

Pour ajouter le favicon à une page web, on utilise la balise <link> de la façon suivante :

<link rel="icon" href="img/mon_favicon.ico">

La valeur apparaissant dans l'attribut type change selon le format de l'image. En effet, pour un .png, la valeur serait plutôt image/png.

La valeur apparaissant dans l'attribut href est un chemin relatif vers l'emplacement de l'icône.

4 - Les données Open Graph

Le protocole Open Graph a été créé par Facebook afin de permettre de créer des liens riches en information sur les médias sociaux.

Quand on publie un lien dans Facebook, deux choses peuvent se produire dans le fil des nouvelles: soit le lien seul est publié, soit de l'information sur la page (image, titre, description, etc.) apparaît. Pour permettre d'afficher des informations propres à la page, cette dernière doit fournir les informations Open Graph.

Voici un exemple où on défini une image, un titre et une desciption en données Open Graph :

<meta property="og:image" content="https://cours.dinf.ca/interface/mon_image.png">

<meta property="og:title" content="Cours Dinf - Interfaces Web">

<meta property="og:description" content="Contenu de cours pour le cours intitulé Interfaces Web dispensé par le département d'informatique du Cégep de Lévis-Lauzon.">

Noter que pour l'image, on doit fournir un URL vers cette dernière et non un chemin d'accès local.

Le corps: contenu de la page web¶

Le corps de la page web est délimité par l'ouverture et la fermeture de la balise <body>.

C'est ici qu'on doit écrire tout le code permettant d'afficher du contenu sur la page web - le contenu visible pour l'utilisateur.

Le contenu d'une page web est normalement divisé en 4 grandes sections :

L'en-tête
La navigation
Le contenu
Le pied de page

Comment ces sections sont présentées et subdivisées est propre à chaque site web.

Il existe toutefois des normes, sans être des règles, qui permettent de rendre l'expérience utilisateur agréable et intuitive. En voici quelques unes :

Quelques normes

1️⃣ L'en-tête devrait toujours contenir un élément cliquable permettant de revenir à la page d'accueil du site web. Généralement, cet élément est une image, un logo ou un nom de compagnie.

2️⃣ La navigation devrait toujours être la même et se trouver au même endroit d'une page à l'autre à l'intérieur d'un site web.

3️⃣ Le pied de page devrait toujours être le même d'une page à l'autre à l'intérieur d'un site web.

4️⃣ La présentation de chaque page à l'intérieur d'un site web devrait suivre la même mise en page et les mêmes styles.

5️⃣ Dans la mesure du possible, toujours utiliser les bonnes balises HTML pour chaque section du document pour faciliter l'indexation par les moteurs de recherche.

Les balises pour délimiter chacune des 4 sections dans la page web sont les suivantes :

En-tête : <header>
Navigation : <nav>
Contenu : <main>
Pied de page : <footer>

Ces balises en soit ne font rien de spécial autre qu'indiquer un bloc (et son type) de contenu dans la page. Nous verrons comment utiliser ces blocs à notre avantage lors de la mise en page avec le CSS.

Finalement, après tout le contenu de la page, avant la fermeture de la balise <body>, si notre page doit contenir du JavaScript, on l'insèrera à cet endroit à l'aide d'une référence au fichier contenant le code voulu.

Référence au code JavaScript (au besoin)

Parfois, nos pages web auront besoin d'un langage de programmation pour effectuer des opérations logiques. Ces opérations permettent de rendre les pages web dynamiques et permettent l'interaction de l'utilisateur avec la page.

Comme le CSS, les standards d'aujourd'hui recommandent d'écrire ce code dans un fichier externe à la page HTML pour les mêmes raison: simplifier le code ainsi que faciliter la maintenance et le travail d'équipe.

Pour faire référence à du code JavaScript dans nos pages web, on utilise la balise <script> avant la fermeture de la balise <body> comme suit :

<script src="mon_fichier_js.js"></script>

Vous verrez beaucoup de sites web qui insèrent la référence au JavaScript dans l'en-tête de la page, c'est-à-dire à l'intérieur de la balise <head>avant le corps de la page. Ceci a longtemps été la bonne pratique à suivre. Toutefois, cette méthode a été révisée, car une page web est lue de haut en bas. Un script appelé en en-tête est alors lu avant le contenu de la page. Une page qui est particulièrement volumineuse peut être longue à lire et si un script fait référence à un élément de la page qui n'a pas encore été lu par le navigateur, alors une erreur de chargement s'ensuivra et la page ne pourra être affichée. Pour éviter cette situation, il est maintenant conseillé d'ajouter la référence au JavaScript à la fin des pages HTML juste avant la fermeture de la baslie <body>.

Squelette du cours¶

Après avoir bien lu et compris les explication du squelette, vous trouverez ci-bas le minimum requis dans les pages web à produire pendant le cours.

Évidemment, nous verrons ensemble comment compléter le tout!

<!doctype html>

<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>TITRE DE LA PAGE</title>
        <meta name="author" content="NOM DE L'AUTEUR">
        <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>
        <!-- CONTENU DE LA PAGE -->
    </body>

</html>