ABC pour HTML 1 (débutants)

 

1.1 HTML?

HTML est l'abréviation de "HyperText Markup Language". C'est un langage de description de pages où on peut glisser des liens hypertexte (d'où le nom). Si vous avez déjà été faire un tour sur le Web, vous avez sûrement vu des bouts de texte soulignés et écrits dans une autre couleur. Si vous cliquez dessus, vous avez noté qu'ils vous envoyaient ailleurs sur la même page, voire même sur une autre page. Ce sont des liens hypertextes.

On peut préparer ses pages Web avec un éditeur de texte classique et sauver en format htm ou html. Mais depuis peu sont apparus des éditeurs HTML qui permettent de convertir un texte normal en langage HTML (par exemple Word 97), ce qui facilite grandement la tâche et permet d'éviter de connaître le code HTML, quelque peu rébarbatif.

1.2 LES TAGS

En HTML, ce qui est contenu entre < > est appelé tag (balise). Les tags ne sont pas affichés à l'écran mais donnent des directives à votre navigateur. Les tags vont toujours - disons, la plupart du temps - par deux, il y a le tag ouvrant et le tag fermant, et le tag ne s'applique qu'à ce qu'il y a entre les deux.

Exemple : un tag nommé B (pour Bold, gras), permet de passer une partie du texte en gras. Pour ce faire, le texte en question devra commencer par <B> et se terminer par </B>. Notez que ça marchera aussi en minuscules : <b> et </b>. Compris? Le résultat, le voilà. Vous observez que le tag fermant, ici </B>, ne se distingue du tag ouvrant que par un /. C'est une règle générale.

Notez que HTML prend les retours chariot pour des demandes de nouveau paragraphe (grand espace avec la ligne précédente). Le seul moyen d'aller à la ligne c'est de faire "Shift Return" (tag <BR>).

1.3 L'EN-TETE DE PAGE

L'en-tête indique au navigateur qu'il a bien reçu une page en HTML. Commencez par écrire au début <HTML>. Notez que HTML est un tag et qu'à la fin, il faudra donc le... FERMER! Donc vous savez que votre page va se terminer par </HTML>.

Une fois cette formalité accomplie, on va signifier que l'on commence l'en-tête proprement dit, par un autre tag, nommé <HEAD>.

Puis, dans cette partie, on va mettre le titre de la page avec le tag <TITLE>. On inscrit alors le titre qu'on a choisi. Notez au passage qu'il ne faut pas confondre titre de la page et titre du fichier. Le titre de la page peut très être plus long comme <TITLE>CECI EST LE TITRE DE MA PAGE WEB</TITLE>. Lorsque vous chargerez votre page avec votre navigateur, c'est ce titre qui s'affichera en haut. Essayez quand même de faire court.

C'est aussi dans cette région qu'on peut mettre les META (cf. partie avancés).

Et maintenant, ouvrons le corps du document, c'est-à-dire la partie principale, avec le tag <BODY>. Nous allons en profiter pour signaler que les tags peuvent avoir des paramètres. Ainsi, on peut se servir de BODY pour redéfinir les couleurs d'affichage par défaut. La commande <BODY BGCOLOR="#FFFFFF"> permet d'afficher sur un fond blanc (au lieu de gris par défaut). Mine de rien, ce petit truc permet de donner à vos pages un aspect un peu moins austère. Les couleurs ainsi définies sont au format RRVVBB, c'est-à-dire que les deux premiers chiffres hexadécimaux commandent le niveau de rouge, les suivants le vert et les derniers le bleu. Si vous ne maîtrisez pas bien la théorie trichromique de la lumière ou les calculs en base 16, vous téléchargez un éditeur HTML, qui se chargera de tout cela pour vous. De la même manière, vous pouvez ajouter la variable TEXT="#RRVVBB", pour modifier la couleur du texte par défaut, LINK="#RRVVBB" pour la couleur des liens hypertextes, VLINK="#RRVVBB" pour les liens déjà visités. Dans le BODY, vous pouvez aussi mettre une commande qui chargera une image en fond de page. On y reviendra.

Pour clore ce chapitre, j'aimerais vous montrer à quoi ressemble l'en-tête de cette page que vous êtes en train de lire. 

<HTML>
<HEAD>
<TITLE>abc de création de page Web en HTML</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000080" LINK="#FF0000" VLINK="#800000" ALINK="#00FF00">

 

 

1.4 Les grandeurs de caractère

On utilise les tags <Hx>, où x est un nombre entre 1 et 6. Plus x est grand, plus le titre est petit. Par exemple, un texte situé entre les tags <H1> et </H1> sera un gros titre, entre <H4> et </H4> ce sera un titre plus petit.

Voici un titre H1

Voici un titre H2

Voici un titre H3

Voici un titre H4

Voici un titre H5
Voici un titre H6

Si vous voulez un titre centré, ou à droite, ou dans une autre couleur, ou en italique, ou dans une autre taille, ou tout ceci ensemble, il faudra utiliser les tags de mise en forme (cf. plus loin).

 

1.5 LES PARAGRAPHES

On utilise le tag <P> qui définit le début d'un paragraphe. Il en profite pour insérer une ligne vide. Le principal intérêt du tag P est à mon avis son paramètre ALIGN, qui permet de changer l'alignement du texte. Par défaut, il se colle à gauche, mais on peut le mettre à droite ou au centre, avec les options "left", "center" ou "right".

CODE

EFFET

<P ALIGN="left">TEXTE</P>

TEXTE

<P ALIGN="center">TEXTE</P>

TEXTE

<P ALIGN="right">TEXTE</P>

TEXTE

 

Pour les navigateurs (browsers) les plus récents (dès version 4), le paramètre "justify" est enfin supporté. Il permet au texte d'occuper toute la largeur de la fenêtre et d'éviter les effets de crénelage à droite. C'est tout de suite plus joli. Voici un exemple de texte justifié.

  

1.6 MISE EN FORME des TEXTES

Les tags de mise en forme fonctionnent tous de la même façon, c'est-à-dire qu'ils modifient le texte mis entre <TAG> et </TAG>.
Voici les tags simples:

TAG

EFFET

B

texte en gras

EM

mise en valeur (en général italique)

STRONG

autre type de gras (équivalent à B)

BLINK

texte clignotant

I

texte italique

U

souligné (browsers récents)

TT

caractères à largeur fixe

STRIKE

texte barré

BIG

texte plus gros

SMALL

texte plus petit

SUB

indice

SUP

exposant

BLOCKQUOTE
paragraphe mis en retrait
 
Il existe encore d'autres tags de mise en forme mais beaucoup sont inutiles car tous les navigateurs WEB n'en tiennent pas compte.

 

1.7 Le tag FONT

Le tag FONT présente l'intérêt de modifier la taille et la couleur du texte qui se trouve dedans, grâce aux variables COLOR et SIZE.
SIZE modifie la taille des caractères, soit de façon relative (c'est-à-dire par rapport à une taille de caractère par défaut, qui est apparemment 3), soit de façon absolue (et indépendante de la taille de base). Voici le tag FONT à l'oeuvre:

RELATIF

EFFET

ABSOLU

EFFET

-3

texte

1

texte

-1

texte

2

texte

+1

texte

3

texte

+3

texte

4

texte

On peut, pour les navigateurs récents, modifier la fonte utilisée avec l'option FACE. Ainsi le tag<FONT FACE="Arial">texte en arial</FONT> met le texte en fonte arial.

texte en arial
Il y a sept fontes standardisées: Arial, Arial Black, Comic Sans MS, Courier New, Impact, Times New Roman (qui est la fonte par défaut), et Verdana.
Notons que si on appelle dans un FACE une fonte qui n'est pas installée dans l'ordinateur, elle s'affiche en police par défaut (Times New Roman en général), sauf si on a eu la bonne idée de spécifier des fontes "de remplacement", par exemple FACE="Verdana, Arial, Woolbats" affichera en Verdana s'il y a, en arial sinon, et si arial n'est pas installée, en woolbats.
Comme promis, on peut aussi modifier la couleur de la fonte, selon le même format que pour l'en-tête. Vous vous souvenez, c'était quelque chose du genre #RRVVBB.
Pour fixer les idées, le code HTML suivant: 
<FONT FACE="Arial" SIZE="+1" COLOR="#FF5500">Ceci est mon texte</FONT>
aura pour effet d'écrire un texte un petit peu plus gros que la normale (+1), en caractères Arial, dans une couleur à dominante rouge, avec une pointe de vert. On essaie : Ceci est mon texte .
Les tags FONT se recouvrent les uns les autres! quand on fait 
<FONT COLOR="#FF0000">rouge<FONT SIZE="5">grandrouge</FONT>rouge<FONT COLOR="#0000FF">bleu</FONT>rouge</FONT>
on obtient : rougegrandrougerougebleurouge
Notez comme les <FONT> et </FONT> s'emboîtent et notez l'effet produit.

1.8 LE TAG HR

Le tag <HR> mis dans un document signale que l'on insère une "horizontal rule", c'est-à-dire une de ces barres que vous avez vues dans cette page pour séparer les chapitres. Je me bornerai à dire que HR jouit des paramètres HEIGHT et WIDTH, qui permettent d'en varier la taille. Ce simple petit artifice donne un aspect "pro" à vos pages.

 

1.9 Les liens INTERNES à votre page

On usera du tag <A>, qui gère tous les liens, et on encadrera une partie du texte (la cible) par <A NAME="nom"> et </A>. Puis on crée le lien proprement dit, qui pointe vers cette cible, en entourant une partie de texte entre <A HREF="#name"> et </A>. Notez que le nom du lien peut être quelconque, mais que pour la clarté du document, il vaut mieux qu'il ait un rapport avec ce dont il est question.
En pratique, admettons que l'on veuille mettre un lien pointant vers le fond de cette page. On va donc aller au fond de la page, et encadrer une portion quelconque du texte entre <A NAME="fondpage"> et </A>, puis on revient ici et on encadre le texte qui fera lien, par exemple LIEN VERS LE BAS, entre <A HREF="#nom"> et </A>.

<A HREF="#fondpage">LIEN VERS LE BAS</A>
.
.
.
<A NAME="fondpage">FOND</A>

On essaie : LIEN VERS LE BAS
Notez au passage que le lien est souligné et mis en couleur automatiquement, vous n'avez rien à faire. Pratique.

 

1.10 LES LIENS VERS D'AUTRES PAGES DE VOTRE SITE

Je vous conseille tout d'abord de mettre tous les documents de votre site dans le MEME répertoire, ça vous épargnera de vous emmêler les pinceaux dans les arborescences multiples (valable pour un petit site).
Sinon le principe est le même que pour les liens internes, à part qu'il n'y a pas de NAME qui tienne, puisque la page-cible sera simplement désignée par son nom de fichier.
Supposons que vous vouliez mettre un lien vers une page intitulée abchtlm2.HTM dans le même répertoire que celle sur laquelle vous écrivez, il vous faudra libeller le lien ainsi : 
<A HREF="abchtml2.HTM">texte de mon lien</A>
 
Allez on essaie : lien vers le cours moyen abchtml2

 

1.11 LIENS VERS D'AUTRES SITES

Pour joindre une page située sur un autre site, c'est simple, après HREF, entre les guillemets, on met l'adresse du site en question. Exemple : pour renvoyer sur le site de la Maison Blanche, c'est : 
<A HREF="http:/www.whitehouse.gov/">MON COPAIN BILL</A>
On peut aussi cibler un marqueur de type <A NAME="nommarque"> dans un autre fichier, en utilisant une syntaxe du genre <A HREF="nomfic.htm#nommarque">

 

1.12 LIENS VERS UN EMAIL

Si vous voulez que le lecteur de votre page puisse vous répondre, vous emploierez le lien ainsi fait : 
<A HREF="mailto:xxxxxxx@xxxxxx.xx"></A>
où la succession de x représente votre Email.
Exemple : vous pouvez m'écrire en cliquant ici.
Truc utile : vous pouvez proposer un sujet par défaut! Pour cela, il faut libeller le lien ainsi : 
<A HREF="mailto:president@elysee.fr?subject=Felicitations, monsieur Chirac"></A>
Attention à ne pas mettre de guillemets autour du sujet voulu, et de bien mettre le point d'interrogation.

1.13 LIENS VERS DES FICHIERS A TELECHARGER

Pour permettre de télécharger un fichier placé sur votre site, c'est simple, après HREF, entre les guillemets, on met le nom du fichier en question. Le principe est le même que pour les liens internes. La fenêtre de téléchargement apparaît automatiquement dans le navigateur Internet de l'utilisateur.
Supposons que vous vouliez mettre un lien vers un fichier à télécharger intitulé document.xls dans le même répertoire que celui où se trouve votre document. Il vous faudra libeller le lien ainsi :
<A HREF="document.xls">Téléchargement du fichier Excel 97 document.xls (28KB)</A>
Attention: tous les sites d'hébergement n'acceptent pas tous les types d'extension pour les fichiers à télécharger. Les extensions *.doc, *.xls et *.zip sont généralement acceptées. Afin d'occuper moins de place sur le serveur d'hébergement et d'accélérer les téléchargements, il est préférable de mettre des fichiers sous forme compressée (*.zip). Les fichiers *.doc et *.xls sont ouverts dans une fenêtre Word ou Excel.
 

 

1.14 Les lettres accentuées

HTML ne comprend pas forcément tous les caractères. Dès qu'on veut un é ou un à, il faut ruser. Il faut remplacer les caractères spéciaux par ce que l'on appelle des entités. Une entité commence par & et se termine par un ;. Ainsi pour afficher un accent aigu, vous devrez taper &eacute;. C'est long et laborieux, c'est pas beau dans le code, et on doit mémoriser pas mal d'entités pour être à l'aise. Les éditeurs HTML convertissent les caractères en entités (et inversement) d'un simple clic de souris.

 

1.15 LES LISTES

Les listes permettent d'afficher des séries d'éléments. Mettons que de manière peu originale, nous voulions faire une liste des jours de la semaine. On va ouvrir une liste non ordonnée, par le tag <UL>, puis on va mettre un tag <LI> qui indique que ce qui suit est un élément de liste. Notez que le </LI> n'est absolument pas requis. Après le LI, on va donc mettre le premier jour, par exemple Lundi. Puis dessous on met un autre <LI> suivi de Mardi, etc... N'oubliez pas de fermer votre </UL>. En fin de compte on a :
Vous noterez l'apparition de boules, que l'on peut avantageusement remplacer par des carrés en mettant, dans le <UL>, un paramètre TYPE="square".
Il existe aussi des listes ordonnées, que vous pourrez découvrir avec le tag <OL>, qui s'utilise exactement comme <UL>.
                1. Joe
                2. Jim
                3. Jack
                4. Ringo
On peut changer le type de numérotation des listes ordonnées par TYPE="I", "i", "A", "a", etc...
                1. Guerre
                2. Famine
                3. Pestilence
                4. Ringo
 

NS 7.3.2000

 1