Vous savez déjà que le principe du HTML est de délimiter des zones, qui peuvent contenir d'autres zones, et vous connaissez déjà 21 balises !

Pour terminer ce mini-cours, vous allez apprendre quelques détails et 8 nouvelles balises.

Les caractères spéciaux

Les entités commencent par le caractère & et finissent par le caractère ;

<

Le caractère < sert à indiquer le début d'une balise ...

Pour afficher malgré tout ce caractère, entre balises (ou dans la valeur d'un attribut), sans qu'il soit considéré comme le début d'une balise, il faut écrire : <

"

Pour rappel, la valeur d'un attribut est entouré de guillemets ...

Pour inclure malgré tout le caractère " dans la valeur d'un attribut, sans qu'il soit considéré comme le caractère qui délimite la valeur, il faut écrire : "

'

Bien que non recommandé, la valeur d'un attribut peut être entouré d'apostrophes ...

Dans ce cas, pour inclure malgré tout le caractère ' dans la valeur d'un attribut, sans qu'il soit considéré comme le caractère qui délimite la valeur, il faut écrire : '

Un espace précède parfois un signe de ponctuation ( !, ?, :, ;, ..., ...) ou entoure des signes englobants ( ( ... ), [ ... ], { {... }, ...) . Il se peut alors qu'il soit affiché comme premier caractère d'une nouvelle ligne. Pour éviter cela, il faut remplacer l'espace normal par un espace insécable. Au lieu de frapper la touche espace, on tape  .

On évite d'avoir dans le code une suite de  

&

Les caractères spéciaux sont remplacés par des entités. Une entité se reconnaît par le fait qu'elle commence par & et se termine par ;. Exemples :

<
"
'
 
&

De ce fait, le caractère & est aussi un caractère spécial ... (en XML)

Pour afficher malgré tout ce caractère, entre balises (ou dans la valeur d'un attribut), sans qu'il soit considéré comme le début d'une entité, il faut écrire : &

Ecrire le code en XML

Il existe peu de différences entre le HTML et le XML, alors autant se plier à quelques contraintes supplémentaires pour atteindre un code parfait.

Entre les balises, le texte peut utilisé tous les caractères du clavier, sauf :
< car ce caractère est celui qui indique le début d'une balise
& si le fichier est écrit aussi en XML.

Dans les balises, le code doit respecter certaines règles simples.

Le nom des balises et des attributs s'écrit en minuscule.
La valeur d'un attribut se met entre guillemets.
À chaque attribut correspond une valeur.
Lorsqu'une balise est "seule", (= sans contenu), elle se termine par espace suivi d'un espace suivi d'un slash ( /)
Exemples : <br />, <hr />, <meta ... />, <link ... />, <img ... />, <input ... />

Voir aussi : du HTML au XHTML

Les commentaires

Dans le code, il est possible de créer une zone de commentaire.

Cette zone commence par

Tout ce qui est dans une zone de commentaire est ignoré par le navigateur.

Elle sert généralement :

à créer des lignes pour créer des zones de code pour faciliter sa lecture
à cacher temporairement une partie du code au navigateur
à écrire tout ce qu'on veut ...

Dans un commentaire, -- est interdit (en XML)

Une zone de commentaire n'est pas délimitée par deux balises.
Dans un fichier HTML, il peut exister plusieurs zones de commentaire.
Il peut exister des zones de commentaire dans la zone "head".
Il peut exister des zones de commentaire dans la zone "body".
Une zone de commentaire doit toujours se trouver entre des balises et elle ne peut pas se trouver dans une (autre) zone de commentaire.

Donc, on ne peut ni "commenter" des attributs dans une balise (car une zone de commentaire ne pas être mise dans une balise) ni créer des sous-commentaires (car une zone de commentaire ne peut être contenue dans une zone de commentaire).

Le texte écrit dans une zone de commentaire ne sera pas affiché (si le fichier HTML est valide), mais ce texte n'est pas secret, car tout le monde peut lire le code-source ...

Note personnelle. On aurait pu inventer une balise commentaire, une 111^ème balise, afin de pouvoir les identifier via l'attribut id et créer automatiquement une documentation du code, comme cela se fait dans d'autres langages : Java et C++.

Fichier modèle

Ce n'est qu'une proposition de modèle. Chacun devrait créer son modèle en personnalisant le modèle proposé ici.

<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
<!-- À Â Ç É È Ê Ë Î Ï Ô Ù Û Ü Ÿ Æ Œ æ œ -->
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="" />
    <title></title>
  </head>
  <body><div id="container">

  <header>
    <p id="titre"></p>
  </header>

  <article>
    <h1></h1>
  </article>

  <footer></footer>

</div></body></html>

La première pseudo-balise est obligatoire (en HTML5).

L'attribut lang est recommandé.

L'attribut xmlns indique que le fichier suit les règles du XML (donc, est écrit en XHTML5).

L'attribut charset (de la balise meta) est propre au HTML5. Il est obligatoire de préciser le jeu de caractères utilisé. Utiliser UTF-8 (sans BOM) est vivement recommandé. Et, ne pas oublier d'enregistrer le fichier HTML dans le même format que celui déclaré dans la balise meta : UTF-8.

Voir : Codage des caractères

La description est recommandée, si non Google indexera les premières lignes de la page.

Les mots-clé sont recommandés pour un meilleur référencement.

Tout fichier HTML devrait être lié à un fichier CSS.

Le titre de la page est obligatoire.

La zone "container" est facultative, mais peut faciliter la mise en page.

La zone header ne contient jamais la balise h1 !

La zone article contient toujours une balise h1.

La zone footer est facultative, mais souvent présente.

Dans le fichier CSS, on trouvera une ligne ressemblant à :
#container{ max-width:1024px; } /* largeur maximale de la page */
#titre { font-size: 200%; font-weight: bold; } /* titre de la page */

Ce modèle présente 4 nouvelles balises :

div
header
article
footer

La présente page web utilise le modèle proposé. On peut y voir un entête (défini par la balise header), un corps (défini par la balise article) et un pied de page (défini par la balise footer). Ce qui permet de donner à ces trois zones des couleurs différentes. On remarque que les zones header et footer se ressemblent de page en page. Par exemple, le footer de ce mini-cours contient toujours un bouton.

La balise div permet de créer une zone. Ici la zone identifiée sous "container" contient les trois zones header, article et footer, c'est-à-dire quasiment celle du body ! Ne vous préoccupez pas de cette balise pour le moment.

Pour le moment, vous n'êtes pas capable de faire des pages comme celle que vous lisez. Vous n'êtes pas capable de créer un bouton, de mettre des couleurs dans les différentes zones, ... Mais, croyez-moi, vous connaissez l'essentiel.

Cliquez ici pour voir ce que vous savez faire. Puis, regarder le code source ...

Bon d'accord ! En regardant le code-source vous avez remarqué que j'utilise 4 balises que vous ne connaissez pas encore : em, mark, pre et aside (et, dans mon footer, j'utilise 3 autres balises : button, form et input).

La balise em est comme la balise strong, mais en moins important.
La balise mark est comme la balise strong, mais en plus "visuel".
La balise pre sert à créer une zone dédiée à la présentation du code.
La balise aside définit une zone qui permet de créer un petit aparté,
comme maintenant où j'explique, en marge de la page, le rôle des 4 balises.
La balise button permet d'afficher un bouton (son rôle est quasi le même qu'un lien textuel). Elle est dans la zone form qui contient aussi une zone input. L'étude de ces trois balises (form, input, button) sort du cadre d'un mini-cours d'HTML, elles seront étudiées lors du mini-cours de JavaScript.

Voilà, vous savez qu'il n'est pas nécessaire de connaître les 110 balises du HTML 5 pour créer la page que vous lisez. Maintenant, vous connaissez les 29 principales balises. Suffisamment pour commencer à créer des pages web sophistiquées même si vous ne savez pas encore mettre en forme la page. Pour cela, il vous faudra apprendre un peu de CSS.

Pour présenter ce mini-cours, je n'utilise que 32 balises et un peu de CSS.

Maintenant, chaque fois que vous créerez un fichier HTML, il vous suffira de copier/coller ce code dans votre éditeur HTML favori.

Les éditeurs HTML

Vous connaissez 29 balises, mais avec quel programme allez-vous pouvoir écrire vos premiers fichiers HTML ?

Voici les programmes gratuits recommandés :

Sous Windows, NotePad++
Sous Mac, TextEdit (déjà installé)
Sous Linux, gEdit (déjà installé)

Voir aussi le comparatif sur les éditeurs de texte. On constate que NotePad++ est plus entretenu que beaucoup d'autres.

Sous Windows, est aussi installé un éditeur de texte (Bloc-Notes), mais il est nettement moins performant que Notepad++ qui permet de changer la couleur de fond. Rien que cela justifie son utilisation même pour de simples fichiers texte, en lieu et place du Bloc-Notes de Microsoft.

Configuration de NotePad++ :

Après avoir téléchargé ce programme (disponible via ce lien) et avoir choisi lors de l'installation le français (French) comme langue par défaut, et l'avoir lancé :

Premier réglage. Pour protéger sa vue, choisir un thème qui présente un fond de page qui ne soit pas blanc :

=> Menu Paramétrage > Configurateur de la coloration syntaxique > Thème choisir "Solarized", par exemple.

Comme dans les navigateurs, il est possible en maintenant la touche CTRL enfoncée et en tapant sur la touche + de zoomer (et sur la touche - pour dézoomer).

Deuxième réglage. Pour que tout nouveau fichier soit codé en UFT-8 sans BOM avec comme langage par défaut HTML :

=> Menu Paramétrage > Préférences > Nouveau document > Encodage cocher "UFT-8 sans BOM" et - si vous utilisez NotePad++ essentiellement pour créer des pages web - choisir comme langage par défaut HTML

Si vous utilisez NotePad++ qu'occasionnellement pour créer des pages web :

=> Menu Langage > H > HTML

NotePad++ :

proposera par défaut comme extension "html" lors de l'enregistrement du fichier
créera automatiquement la balise de fermeture (lorsqu'on a fini de taper la balise d'ouverture)
affichera les balises, les attributs, les valeurs des attributs, les commentaires dans des couleurs différentes de celle du texte (= coloration syntaxique)

Le code source est toujours écrit avec un éditeur de texte.

Pour créer des pages web, les éditeurs graphiques ne sont pas recommandés, car non seulement le code généré est souvent complexe (donc difficile à modifier) et sont parfois très chers.

Editeur (européen) recommandé : Blumentals
En 2016, HtmlPad (HTML+CSS+JS) coûtait environ 30 euros, RapidPHP (HTML+CSS+JS+PHP) = 36 euros

Vous connaissez 29 balises : html, head, meta, title, body, link, p, a, h1, h2, h3, h4, h5, h6, ol, ul, li, hr, br, img, strong, div, header, article, footer, em, mark, pre, aside.

Pour créer des notes HTML, cela est suffisant. C'est même déjà suffisant pour créer des pages web légères. D'ailleurs, publier une note HTML sur internet, c'est publier une page web ...

Les 25 balises différentes, utilisées sur cette page, sont : ['html', 'head', 'meta', 'link', 'title', 'body', 'div', 'header', 'p', 'a', 'article', 'h1', 'mark', 'h2', 'em', 'strong', 'ul', 'li', 'br', 'sup', 'pre', 'aside', 'img', 'footer', 'script']