HTML STRUCTURE DE BASE

1. Structure d'un document HTML

La page est l'objet de base traité puis affiché dans votre navigateur (Microsoft Internet Explorer ou Netscape Navigator). Elle est construite à l'aide de commandes (appelées balises ou tags) <HTML>. Les "balises" ou "tags" qui constituent le langage sont inscrits entre < > et fonctionnement par couples

un tag de début <COMMANDE>
... suite d'instructions et de texte entrant dans le champ d'application de la commande.
un tag de fin </COMMANDE> reconnaissable au signe "/".

Quelques instructions comme <BR> ("Brake" : "à-la-ligne") ne nécessitent pas de tag de fin.
Une page est constituée par un fichier qui porte traditionnellement l'extension .HTM. C'est un fichier texte standard que nous allons créer avec le Bloc-Notes.

1) Tout d'abord, il faut indiquer au navigateur que l'on fait du HTML.
Notre page devra commencer par la commande <HTML> et finir par </HTML>.

2) Une page HTML est constitué de 2 parties principales : une entête et le corps du texte proprement dit.
L'entête sera comprise entre les commandes <HEADER> et </HEADER>.
Le texte proprement dit sera compris entre les commandes <BODY> et </BODY>.
Ce qui donne en structure de base :

<HTML>
<HEADER>
</HEADER>
<BODY>

</BODY>
</HTML>

Cliquer sur les liens pour consulter le détail des instructions (ou balises/tags).

L'entête permet de donner un certain nombre de renseignements sur le document mais nous n'en verrons que l'instruction <TITLE&gtnom-du-document<TITLE> qui affiche le nom du document dans la barre de titre du navigateur.
Le début de notre fichier .HTM sera :

<HTML>
<HEADER>
<TITLE> [Le titre c'est ICI !] --> Structure du Langage HTML de base <--</TITLE>
</HEADER>
<BODY>
...etc...

On peut remarquer dans notre exemple que les commandes et le titre sont sur la même ligne, ceci ne gêne absolument pas le navigateur. Vous tapez votre texte et vos commandes de telle sorte que ce soit le plus lisible possible pour vous. Vous pouvez par exemple employer des tabulations ... mais elles n'apparaitront pas sur la page affichée par le navigateur.

Le code ci-dessus figure dans le fichier essai essai1.htm que vous pouvez visualiser dans votre navigateur. Evidemment c'est vide, et un peu gris... mais le titre est bien dans la barre de la fenêtre !
Super truc : une fois sur la page d'essai vous pouvez visualiser son code, si vous n'êtes pas en plein écran : en cliquant dans le menu "Affichage", le choix "Source...". Le Bloc-Notes s'ouvre avec le fichier ESSAI1.HTM. Fermer le ensuite pour reprendre l'exploration du HTML. Appuyez sur le bouton "Précédent" de votre navigateur ou sur les touches ALT + "flèche gauche" pour revenir sur cette page.

Il est temps de passer à l'examen de l'aspect général de la page,
Ou de revenir au menu.

 

2. Aspect général de la page

Comme nous l'avons vu la balise d'ouverture <BODY> annonce le CORPS du document dans lequel on va trouver :

Ce fond peut être uni ou dessiné, des caractères de couleurs, tailles, et de fontes différentes. La balise <BODY> supporte des attributs (facultatifs) permettant de contrôler l'aspect général de la page.

Voyons d'abord une couleur de fond pour le document !

Pour la couleur de fond, le paramètre est BGCOLOR (pour "BackGround COLOR") :

<BODY BGCOLOR="#RRGGBB"> spécifie la couleur du fond du document en 3 nombres hexadécimaux (de 00 à FF) indiquant le dosage des couleurs Rouge Vert, Bleu (RRed, GGreen, BBlue).
En pratique on utilise un des outils de Windows comme PaintBrush ou Paint (menu déroulant Options / Modifier les couleurs / Définir une couleur personnalisée...). Quelle que soit la couleur choisie, le système propose les valeurs RRGGBB dans 3 fenêtres superposées mais en décimal (000 à 255). Exemple Rouge=73 Vert=220 Bleu=240 ! Il suffit de jouer de la calculette scientifique incorporée aux outils Windows pour transformer ces chiffres en hexadécimal comme le réclame le langage HTML (dans l'exemple du bleu pâle ci-dessus on aurait :
<BODY BGCOLOR="#49DCF0">.
Voyez le fichier essai2.htm et revenez ici en faisant "Précédent" sur votre navigateur ou appuyez sur les touches ALT + "flèche gauche".
Attention, dans le choix des couleurs. Le texte doit toujours être lisible (par défaut le texte est en noir).

Récupéré sur un web aéronautique (on se demande bien pourquoi ?!!) je vous conseille la consultation de l'excellante palette de couleurs prête à l'emploi et produite par Roland TREGLIA.

<BODY BGCOLOR="YELLOW">
Le langage HTML a retenu quelques couleurs qu'on peut utiliser directement par leur mnémonique plutôt que d'utiliser la forme #RRGGBB :

    aqua      : bleu-clair     lime     : vert-clair       silver   : argent
    black     : noir           maroon   : marron foncé     teal     : cyan foncé
    blue      : bleu           navy     : marine           white    : blanc
    fuchsia   : lilas          olive    : vert olive       yellow   : jaune
    gray      : gris           purple   : pourpre
    green     : vert           red      : rouge

Voyez le fichier essai2bis.htm et revenez comme indiqué ci-dessus.

Voyons maintenant un fond composé d'une image !
On peut faire mieux qu'un fond de couleur uni et utiliser une image comme toile de fond grâce à l'attribut : <BACKGROUND="image"> où "image" est le nom d'un fichier image (souvent aux formats .GIF & .JPG) qui sera utilisé comme fond d'écran. Le fichier peut être sous n'importe quel répertoire pourvu que son "chemin" soit correctement indiqué.
Exemples :
<BODY BACKGROUND="wallpap4"> (fichier image situé dans le répertoire courant)
<BODY BACKGROUND="fonds/wallpap4"> (situé dans le répertoire "fonds" lui même situé au-dessous du répertoire courant)
<BODY BACKGROUND="../wallpap4"> (situé dans le répertoire juste au-dessusdu répertoire courant)

Comme tout à l'heure, jetez un petit coup d'oeil au fichier essai3.htm dans votre navigateur. Appuyer sur le bouton précédent ou sur les touches ALT + "flèche gauche" pour revenir sur cette page.

La même logique de couleurs est applicable au texte du document !

En résumé : format le plus complet de la balise d'ouverture <BODY>:
<BOBY BACKGROUND="image" (ou BGCOLOR="#RRGGBB") TEXT="#RRGGBB"; LINK="#RRGGBB"; ALINK="#RRGGBB"; VLINK="#RRGGBB">

Un peu de culture "image" et un peu d'histoire UNISYS !

Dans le navigateur, on peut afficher 2 standards d'image : le GIF (extension des fichiers .GIF) et le JPEG (extension .JPG).

Le GIF est un peu comme le format Bitmap, chaque point est défini précisément, mais le fichier est compressé.
Une image BMP (BitMap) et GIF Graphics Interchange Format) apparaitront dans votre programme de dessin (comme Paint Shop Pro par exemple) exactement de la même manière, mais le fichier GIF sera plus petit que le fichier BMP. Ce format est bon pour les dessins, schémas, capture d'écrans car il garde précisément les points qui composent l'image, mais il est limité à 256 couleurs simultanées.
Développé par CompuServe en 1987 pour échanger des fichiers graphiques par le réseau téléphonique le format GIF utilise l'algorithme de compression LZW (pour Lempel, Ziv, Welch).
Cet algorithme a été notablement amélioré par Terry Welch de la société SPERRY
LZW réduit la taille d'un fichier d'un facteur de 4 à 5 sans perte de qualité. Le format GIF se présente sous deux formes différentes :

Le JPEG est un fichier image compressé avec des algorithmes complexes qui permet surtout de stocker des photos dans un fichier raisonnablement petit. Les photos sont composées de points très différents les uns des autres, car avec beaucoup de variations de nuances. La compression GIF n'est pas efficace sur ce type d'image car elle est basée sur la répétition des couleurs, par exemple, si j'ai une ligne de 100 points blancs, je vais stocker en quelques octets (2 !) la répétition de 100 points de même couleurs, alors que le BMP stocke 100 octets. Le JPEG, selon le taux de compression choisi, va prendre des petits bouts de l'image et prendre la couleur moyenne avant de compresser. L'image globale garde le même aspect mais point par point elle est modifiée. Cas pratique : les textes passent assez mal en JPEG, qui est réservé surtout aux photographies numérisées.

Le cadre est posé, y'a plus qu'à mettre en forme le texte.
A moins qu'on arrête là aujourd'hui et qu'on retourne au menu.