PIX

6. Construire un site internet simple

1 - Le corps du site

But :

Connaitre la structure de base d’un site internet

Compétences / savoirs

  • Doctype
  • Balises
  • Encodage
  • Modèles et gabarits

Le doctype

La chaîne de texte suivante est appelée doctype (qui est la contraction, anglaise, de « document » et « type »).

<!DOCTYPE html>

En ce qui concerne HTML, le doctype est un reliquat historique. Pourquoi est-il alors toujours présent ?

Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.

Le doctype déclenche l’utilisation du mode standard. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le W3C et le WHATWG. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.

Attention : Le doctype doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.

L’élément <html>

Tout le document (en dehors du doctype) est contenu entre les balises <html> et </html>. Il ne peut y avoir qu’un seul élément <html> par document.

Il est possible d’oublier <html> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <html> sera nécessaire. Par exemple, on utilise <html lang="fr"> pour indiquer que le document entier est écrit en français. De la même façon, <html> permettra d’appliquer une mise en forme sur tout le document grâce à CSS.

Les éléments <head> et <body>

Au sein de l’élément <html>, le document aura une « tête » (head en anglais) située entre les balises <head> et </head> et un « corps » (body en anglais) situé entre les balises <body> et </body>.

La tête de la page contient les méta-données (c’est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l’utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.

Le corps contient le contenu affiché pour l’utilisateur. C’est donc sur cet élément qu’on s’attardera le plus.

HTML est très souple à propos de la structure du document, si vous oubliez les éléments <head> et <body>, ils seront implicitement ajoutés. Voici un document sans <html> ni <head> ni <body> :

<!DOCTYPE html>
<title>Ceci est un document HTML</title>

Coucou monde ! (<i>Hello world!</i>)

Le navigateur s’occupera de tout :

[Screenshot of the browser making its best guess]

Même si le navigateur prend soin d’ajouter les balises qui manquent : c’est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <head> et où est <body>, vous gagnerez plus de temps.

L’élément <title> : le titre du document

Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :

<!DOCTYPE html>
<html>
    <head>
        <title>Mon fabuleux exemple HTML</title>
        ...
    </head>
    <body>
        ...
    </body>
</html>

Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <title>).

Là encore, libre à vous de ne pas indiquer le titre et d’en subir les conséquences. Le titre d’un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.

S’il n’y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :

<!DOCTYPE html>
<!-- Pas de titre ici -->
Hello world!
Chrome[Screenshot of a Chrome tab labeled ''index.html'']
Firefox[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]

Définir le jeu de caractères utilisé

Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c’est-à-dire au format binaire). Pour exprimer d’autres valeurs, il est nécessaire de s’accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.

Heureusement, lorsqu’il s’agit de représenter des chaînes de caractères, il existe un standard appelé UTF-8 qui permet d’associer des nombres binaires à l’ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que “A” sera stocké avec la valeur “65”, ce qui correspond, en écriture binaire, au nombre “01000001”. 

D’autres formes d’encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu’on utilise UTF-8 dans le fichier HTML. C’est pour cette raison que nous avons ajouté <meta charset="utf-8"> dans l’exemple ci-avant.

Note : En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l’encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l’encodage à utiliser lors de l’enregistrement.

Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :

[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']

Modèles et gabarits

Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c’est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d’une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).

Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d’éviter d’écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d’un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).

Astuce : Si votre éditeur de texte permet de gérer les snippets (fragments de code), vous pouvez placer votre modèle dans un snippet pour l’invoquer rapidement et générer un début de document à la vitesse de la lumière.

Astuce : À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n’hésitez pas à consulter le projet HTML5 Boilerplate. Celui-ci décrit des templates (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.

Exercice à faire

Le corps d'un site

Complétez le formulaire

Toutes les réponses se trouvent dans les pages à visiter


2 - Les balises

But :

Comprendre la structuration d’une page web

Compétences / savoirs

  • connaitre les differentes balises html

Balises de structuration du texte

Balise

Description

<abbr>

Abréviation

<blockquote>

Citation (longue)

<cite>

Citation du titre d’une œuvre ou d’un évènement

<q>

Citation (courte)

<sup>

Exposant

<sub>

Indice

<strong>

Mise en valeur forte

<em>

Mise en valeur normale

<mark>

Mise en valeur visuelle

<h1>

Titre de niveau 1

<h2>

Titre de niveau 2

<h3>

Titre de niveau 3

<h4>

Titre de niveau 4

<h5>

Titre de niveau 5

<h6>

Titre de niveau 6

<img />

Image

<figure>

Figure (image, code, etc.)

<figcaption>

Description de la figure

<audio>

Son

<video>

Vidéo

<source>

Format source pour les balises<audio>et<video>

<a>

Lien hypertexte

<br />

Retour à la ligne

<p>

Paragraphe

<hr />

Ligne de séparation horizontale

<address>

Adresse de contact

<del>

Texte supprimé

<ins>

Texte inséré

<dfn>

Définition

<kbd>

Saisie clavier

<pre>

Affichage formaté (pour les codes sources)

<progress>

Barre de progression

<time>

Date ou heure

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

Balise

Description

<ul>

Liste à puces, non numérotée

<ol>

Liste numérotée

<li>

Élément de la liste à puces

<dl>

Liste de définitions

<dt>

Terme à définir

<dd>

Définition du terme

Balises de tableau

Balise

Description

<table>

Tableau

<caption>

Titre du tableau

<tr>

Ligne de tableau

<th>

Cellule d’en-tête

<td>

Cellule

<thead>

Section de l’en-tête du tableau

<tbody>

Section du corps du tableau

<tfoot>

Section du pied du tableau

Balises de formulaire

Balise

Description

<form>

Formulaire

<fieldset>

Groupe de champs

<legend>

Titre d’un groupe de champs

<label>

Libellé d’un champ

<input />

Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)

<textarea>

Zone de saisie multiligne

<select>

Liste déroulante

<option>

Élément d’une liste déroulante

<optgroup>

Groupe d’éléments d’une liste déroulante

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

Balise

Description

<header>

En-tête

<nav>

Liens principaux de navigation

<footer>

Pied de page

<section>

Section de page

<article>

Article (contenu autonome)

<aside>

Informations complémentaires

Balises génériques

Les balises génériques sont des balises qui n’ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens :<p>signifie « Paragraphe »,<h2>signifie « Sous-titre », etc.
Parfois, on a besoin d’utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l’une est inline, l’autre est block.

Balise

Description

<span>

Balise générique de type inline

<div>

Balise générique de type block

Ces balises ont un intérêt uniquement si vous leur associez un attributclass,idoustyle:

  • class: indique le nom de la classe CSS à utiliser.

  • id: donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d’identifier la balise. Vous pouvez vous servir de l’ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.

  • style: cet attribut vous permet d’indiquer directement le code CSS à appliquer. Vous n’êtes donc pas obligés d’avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu’il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.

Exercice à faire

Les balises

Complétez le formulaire

Toutes les réponses se trouvent dans les pages à visiter