Le squelette d'une page web¶

Le squelette HTML est la fondation de chaque page web

Créer une page Web, c'est comme construire une maison. Le HTML est la structure du bâtiment avant d'ajouter la peinture et la décoration. Le squelette HTML est donc le point de départ de presque tous les sites Web.

Il existe des standards afin de permettre aux différents navigateurs et aux moteurs de recherche de comprendre la structure de la page.

Squelette épuré¶

Notre squelette épuré est le suivant :

<!doctype html>

<html lang="fr">

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

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

</html>

Signification :

<!doctype html> : indique au navigateur que la page utilise la version moderne de HTML.
<html> : englobe toute la page Web. L'attribut lang="fr" précise que le contenu est en français.
<head> : contient les informations sur la page, invisibles pour les visiteurs, comme le titre, l'auteur et l'encodage des caractères. Ces informations sont utiles au navigateur et aux moteurs de recherche.
<body> : contient tout ce que l'utilisateur voit à l'écran : textes, images, liens, boutons, etc.

Pour comprendre d'avantage ces notions, 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 `<head>`: description du fichier¶

✅ Ojectif : 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 HTMl qu'on retrouve 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.

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 le code suivant :

<meta charset="utf-8">

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

2 - Le titre

La balise <title> permet de définir le texte affiché sur l'onglet du navigateur.

Cette information possède aussi d'autres utilités importantes telles que le titre utilisé lorsqu'on sauvegarde un favoris.

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

<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 - 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">

Exemple d'un en-tête minimal¶

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

L'encodage
Le titre
L'auteur

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¶

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 :

La description
L'icône de favoris
Les styles

1 - 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>.">

2 - 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.

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">

Signification des attributs :

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="styles.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="css/styles.css">

Les données OpenGraph¶

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 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

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.

Dans chaque bloc, on pourra insérer le contenu visible tel que des images, des paragraphes, des listes, etc.

⚠️ Règle importante : Toujours utiliser la bonne balise pour chaque élément.

Squelette du cours¶

Après avoir bien lu et compris les explication du squelette, voici donc 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>