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