Mini-cours de HTML

Partie VI

Vous savez déjà que le principe du HTML est de délimiter des zones, qui peuvent contenir d'autres zones, et que la balise a permet d'appeler d'autres pages web.

Pour terminer ce mini-cours, vous allons apprendre quelques détails et 4 dernières balises.

Les caractères spéciaux

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 : &lt;

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 : &quot;

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 : &amp;

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.

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 <!-- et se termine par -->

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

Elle sert généralement :

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".
Mais, il ne peut pas avoir de zone de commentaire 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 ...

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

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, mon footer contient toujours un bouton.

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.

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.

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

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

Maintenant que vous connaissez ces règles, avec quel programme allez-vous pouvoir écrire vos premiers fichiers HTML ?

Voici les programmes gratuits recommandés :

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

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

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.

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

Pour aller plus loin

Quelques liens

Quelques livres

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