Le HTML

Généralités :
Derrière ces quatre lettres barbares, se cache le langage informatique vedette du Web. Si vous êtes tenté par l'aventure du site perso, nous vous proposons de passer à l'action en 10 leçons. Prêt? Pour votre initiation, 10 leçons simples, appuyées par des exemples qui vous permettront de connaître les bases. Vous pourrez vous exercer en tapant le code HTML dans un "bloc-notes" ou un "wordpad". Pour voir le résultat de votre travail, vous enregistrerez votre document au format HTML (soit, "nomdudocument.html").
Fermez-le.
Puis, ouvrez-le dans Iexplorer pour voir la page telle qu'elle apparaît dans un navigateur web.
Pour être tout à fait honnête, vous n'êtes pas obligé de connaître l'HTML (HyperText Markup Language) en français "langage de balisage hypertexte", pour créer votre site perso. Si vous utilisez un éditeur WYSIWYG (What You See Is What You Get, en français "ce que vous voyez - à l'écran - est ce que vous obtenez - en ligne"), le logiciel traduit automatiquement vos désirs en langage html. Néanmoins, connaître les bases du html peut s'avérer très utile lorsque votre logiciel d'édition, forcément imparfait, ne vous "obéit pas au doigt et à l'oeil" et laisse par exemple un espace indésirable entre deux pavés de texte, un alignement peu heureux dans un tableau ou encore une couleur de lien qui s'accorde mal avec la couleur de fond de votre page.
LE HTML, qu'est-ce que c'est ?
LE HTML n'est pas un langage de programmation, il s'apparente plutôt à un outil de mise en forme des pages web (texte et images). C'est ce langage qui est utilisé pour créer toutes les pages web que vous voyez lorsque vous surfez avec Internet Explorer. Si vous ne savez à quoi ressemble "la bête", prenez n'importe quelle page web et regardez son "code source" dans IExplorer: il suffit pour cela d'aller dans le menu "Affichage"et de cliquer sur "Source" ou sur la page clic droit >>> "Afficher la Source".
Si c'est la première fois que vous faites cette manipulation, vous risquez d'être un peu affolé par ces centaines et centaines de lignes de codes qui ressemblent à du javanais. Mais une fois assimilé les bases du HTML, tout devient parfaitement limpide ou presque.
Apprendre LE HTML, à quoi ça sert ?
Lorsque l'on comprend ce qui se passe "sous le capot" de son site, on se sent un peu moins bête. Et on peut agir directement dans le code pour améliorer la qualité de ses pages. Ajoutez à cela que certains de ces éditeurs wysiwyg n'ont pas de version française, il vaut donc mieux connaître les mots anglais usuels utilisés dans les menus pour savoir s'en servir. Enfin, nul besoin d'avoir fait une grande école ou d'être un informaticien chevronné pour comprendre les bases du html et l'utiliser, il suffit simplement de connaître trois mots d'anglais et de disposer de quelques heures dans son emploi du temps.

---

Au menu de cet article :

1. Un principe à connaître : les balises
2. La structure des pages : la tête et le corps
3. Créer des caractères spéciaux (é,à, ê...)
4. Enrichir la présentation des mots (gras, italique...)
5. Mieux présenter le texte (paragraphes, filets, listes...)
6. Mettre des couleurs(**)
7. Insérer un lien hypertexte
8. Insérer une image
9. Créer un tableau
10. Créer des cadres
11. Les outils
**La palette des 216 couleurs du web

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

1. Un principe à connaître : les balises

LE HTML repose entièrement sur un système de balises (ou "tags" en anglais). Ce sont ces balises qui permettent d'enclencher des actions : par exemple, mettre un texte ou des mots en gras, créer un paragraphe, un tableau...
Votre page HTML se présente ainsi comme une succession de balises dites "ouvrantes" < > et de balises "fermantes" caractérisées par un slash </ >. Ces balises délimitent la portée de l'action enclenchée.
Certaines balises comportent des attributs (qu'on appelle aussi paramètres ou propriétés) qui permettent par exemple de choisir la couleur de fond de la page et des liens hypertextes, de choisir la taille, la police et la couleur des caractères..... Ces attributs sont placés à l'intérieur de la balise.
Exemple :
<html>
<body>
Ceci est le texte de mon site.
</body>
</html>
*** Attention, en cas d'instructions multiples (un texte qui serait en gras et en italique par exemple), vous ne pouvez pas croiser les différentes balises, il faut respecter un ordre très précis : la première ouverte <html> est la dernière fermée, la seconde ouverte <body> est l'avant-dernière fermée...

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

2. La structure des pages : la tête et le corps

Votre page web se décompose en deux parties, la tête ("head") et le corps ("body"): la première permet d'inclure du texte non visible lorsque la page est en ligne. Ces informations, qui doivent être inscrites sur chacune de vos pages web, servent principalement à bien référencer votre site auprès des moteurs de recherche et donc à lui assurer une bonne visibilité au milieu des millions de pages web existantes.

La "tête" est comprise entre les balises <HEAD> et </HEAD> Elle comporte les éléments suivants : - le titre ("title") de la page compris entre les balises <TITLE> et </TITLE> - la description du contenu de la page dans la balise <META NAME= "DESCRIPTION" CONTENT="mettez à cet endroit le sujet de votre page"> - les mots-clés ("keywords") dans la balise <META NAME="KEYWORDS" CONTENT="mettez à cet endroit les mots qui définissent de quoi traite votre page">
Le "corps" de votre page web, autrement dit ce qui sera visible dans les navigateurs et donc lu par les internautes, est compris entre les balises <BODY> et </BODY>. C'est entre ces deux balises que vous allez inclure du texte, des images, des liens ("links"), des tableaux ("tables"), des cadres ("frames")…
Exemple
La page d'accueil de votre site ressemblera à ça :
<HTML>
<HEAD>
<TITLE>nom de mon site </TITLE>
<META NAME="DESCRIPTION" CONTENT="ce que ma page contient ">
<META NAME="KEYWORDS" CONTENT="mots qui définissent de quoi traite ma page ">
</HEAD>
<BODY>
Ceci est la page d'accueil de mon site. Vous y trouverez des informations sur…
</BODY>
</HTML>
*** Seul le texte en noir sera visible par les internautes lorsqu'ils se connecteront sur votre page.
Remarquez que nous avons défini la "tête" en bleu et les balises du "corps" en rouge,
pour faire ressortir la structure d'une page HTML type.

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

3. Créer des caractères spéciaux

Le HTML étant un langage mis au point par des américains, un certain nombre de subtilités de la langue française lui échappent et demandent un traitement spécial : en clair, les caractères accentués, les cédilles ou les trémas ne peuvent être tapés directement sur le clavier.
En langage HTML, les accents sont donc traités par des entités commençant par & et se terminant par un point virgule. Vous trouverez ci-dessous les caractères spéciaux les plus courants :
é = &eacute; (acute = aigu)
è = &egrave;
à = &agrave;
ê = &ecirc; (circumflex=circonflexe)
ï = &iuml; (humlaut en allemand = tréma)
ç = &ccedil; (cedilla=cédille)
Bon à savoir : si l'on veut introduire un espace insécable pour ne pas séparer deux mots ou deux chiffres (par exemple, 250 000), il faudra utiliser le caractère &nbsp; (non breaking space).
Exemple:
le texte: Voilà l'été et ses 200 000 kilomètres de bouchons. s'écrit :

Voil&agrave; l'&eacute;t&eacute; et ses 200&nbsp;000 kilom&egrave;tres de bouchons.

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

4. Le style du texte

Afin d'améliorer la lisibilité de vos textes ou simplement d'accroître la richesse de votre mise en page, vous pouvez donner un style particulier aux mots. Voici les balises les plus courantes :
mot(s) compris entre la balise ouvrante et la balise fermante
- gras : <b> et </b> (bold).
- italique : <i> et </i> (italic).
- souligné : <u> et </u> (underline).
- indice : _et _(subscript)
- exposant : ^et ^(supscript)
Exemple :
Le texte Ceci est une introduction au html. Vous y trouverez les principales balises utilisées pour créer des pages web.
s'écrit :
<html>
<body>
Ceci est une <b><i>introduction </i></b> au <b>html </b>. Vous y trouverez les principales <u>balises </u> utilis&eacute;es pour cr&eacute;er des pages web.
</body>
</html>

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

5. La mise en forme du texte

Vos textes gagneront naturellement en lisibilité si vous faites un effort de mise en page. Voici les principales balises qui vous aideront à mettre en forme votre texte :
- aller à la ligne : <br> (break)
- créer un paragraphe : <p> et </p>
- créer un filet/une ligne horizontale: <hr>
- niveaux de titre de 1 (le plus grand) à 6 (le plus petit) :
<h1> et </h1>, <h2> et </h2>…
- liste non ordonnée (c'est à dire des puces au début de chaque ligne) : <ul> et </ul> (unordered list) avec à l'intérieur de ces balises les <li> et </li> pour chaque élément de la liste.
- liste ordonnée (1, 2, 3...) : <ol> et </ol> (ordered list) avec à l'intérieur de ces balises les <li> et </li> pour chaque élément de la liste.
Exemple:

Ceci est un titre entre balises <h1> et </h1>

Caractéristiques du site

• Attrayant
• Sympathique
• Complet

s'écrit :
<html>
<body>
<h1>assistancePC </h1>
<br>caract&eacute;ristiques du site <br><br>
<ul>
<li>attrayant </li>
<li>sympathique </li>
<li>complet </li>
</ul>
</body>
</html>
Les attributs (paramètres) qui viennent préciser la balise <BODY> (concerne l'ensemble de la page) :
- couleur de fond de la page : BGCOLOR (BackGround)
- couleur du texte : TEXT
- couleur des liens non visités : LINK (lien)
- couleur des liens activés : ALINK
- couleur des liens visités : VLINK
L'attribut (paramètre) qui détermine le positionnement des paragraphes dans la page (calé à gauche ou à droite, centré) :
- alignement : ALIGN + choix entre LEFT (gauche), CENTER (centre) et RIGHT (droit).
Les attributs (paramètres) qui viennent préciser les paramètres du texte utilisent la balise <FONT> :
- couleur : COLOR
- taille : SIZE
- police (type de caractère) : FACE
Exemple :
(pour les libellés des couleurs et savoir insérer des liens, voir les chapitres suivants)
<html>
<body bgcolor="00FF00" text="#CC0000" alink="#ffffff" vlink="#ffff00">
<font color="#ffffff” size=”3” face=”arial”>
<ul>
<li>le html, qu'est-ce que c'est ? </li>
<li>apprendre le html à quoi &ccedil;a sert ? </li>
<li>le principe des balises </li>
</ul>
vous &ecirc;tes sur le site de <a href="http://assistancePC.be/" target="blank">assistancePC.be </a>
<br><br>
Pour envoyer vos remarques,
<a href="mailto:assistancePC@live.be">cliquez ici </a>
</font>
</body>
</html>

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

6. Mettre des couleurs

Si vous utilisez les noms de couleurs usuels comme "white" (blanc), "black" (noir), "red (rouge), "blue" (bleu), cette solution est peu fiable et vous réservera des surprises plutôt désagréables. Pour plus de rigueur, il convient de se conformer au codage des couleurs en RGB (Red Green Blue). Par exemple, la couleur de fond de votre page s'écrit comme ceci:
bgcolor="#rrggbb"

Chaque composante de la couleur que vous désirez est définie par une valeur numérique comprise entre 0 et 255 exprimée en hexadécimales, c'est à dire à l'aide des chiffres 0 – 9 et des lettres a – f : 00 correspond à l'absence de couleur et ff à la luminosité maximale. Red Green Blue Red ff 00 00 Green 00 ff 00 Blue 00 00 ff Black 00 00 00 White ff ff ff >>> Charte des couleurs WEB Pour voir le tableau complet et le résultat des couleurs à l'écran, ouvrez la palette de sécurité(216 couleurs), Ouvrir la palette des couleurs

assistancePC.be est en couleurs

S'écrit : <h3><font color="#FF0000">assistancePC.be </font> <font color="#66FF33">est en </font> <font color="#FF66FF">couleurs </font></h3>

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

7. Insérer un lien hypertexte

Les liens, traditionnellement en bleu et soulignés, permettent de naviguer dans et à l'extérieur de votre site et d'envoyer directement un mail à une personn avec sa messagerie. Pour les créer en langage HTML, utilisez la balise : <a> et </a>pour anchor (ancre) avec l'attribut href (hypertext reference).
L'attribut "target" (cible en français) d'un lien hypertexte permet de préciser où la page appelée va afficher.Parmi les différentes possibilités, nous avons retenu les deux plus courantes :

1. la page s'affiche en ouvrant une nouvelle fenêtre du navigateur, vous écrirez: target="blank" (vierge)
2. la nouvelle page reste dans la même page, vous écrirez :target="self" (même)

Exemples :

Aller sur un site ou une page du WEB assistancePC	S'écrit : <a href="http://assistancePC.be/">assistancePC </a>
Envoyez un mail à assistancePC	S'écrit : Envoyez un mail &agrave; <a href="mailto:assistancePC@live.be">assistancePC</a> (pour "mail to", "adresser par mail à")

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

8. Insérer une image

Utilisez la balise <IMG> pour "IMaGe" avec l'attribut src (source de l'image), soit son adresse ou URL (Uniform Resource Locator).
Dans le cas des sites personnels les plus simples, les images se trouvent dans le même dossier que vos pages HTML,
l'appel d'une image s'écrira alors de la façon suivante :

<img src="nomdevotreimage.jpg">
Les attributs d'une image:
- largeur : WIDTH
- hauteur : HEIGHT
- espace horizontal qui sépare l'image du texte : HSPACE
- espace vertical qui sépare l'image du texte : VSPACE
- affichage alternatif (texte qui s'affiche sur votre navigateur avant que l'image ne se télécharge): ALT
ou si vous placez votre souris dessus.
Exemple :
L'image ci-dessous s'appelle "img/rose.jpg"

S'écrit : <img src="img/rose.jpg" width="250" height="188" alt="mon image">

N.B : il est à noter que les images sont au format GIF (.gif) ou au format JPEG (.jpg).
Les formats d'images sur le WEB
GIF: non destructif maximum 256 couleurs >>> peu de couleurs, réservé aux schémas ou aux Cliparts ou animations.
JPG: destructif maximum 16 millions de couleurs >>> beaucoup de couleurs, de qualité médiocre,
à utiliser pour les photos ou des graphismes colorés
PNG: non destructif maximum 16 millions de couleurs >>> beaucoup de couleurs, d'excellente qualité mais fichiers très lourds
D'autres formats sont acceptés (BitMaP, ICOne) ou en cours d'acceptation comme le JPEG2000.

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

9. Créer un tableau

Un tableau est compris entre les balises: <table> et </table>
- Chaque ligne (ou rang) du tableau est comprise entre la balise <tr> et </tr> ("table row")
- Chaque cellule est comprise entre la balise <td> et </td> ("table data") ou <th> et </th> (table header) si on désire mettre en forme le texte contenu dans la cellule.

Les attributs d'un tableau	Les attributs des cellules
- bordure du tableau : BORDER (exprimée en pixels) - largeur : WIDTH - hauteur : HEIGHT - couleur de fond : BGCOLOR	- largeur : WIDTH - hauteur : HEIGHT - couleur de fond : BGCOLOR - alignement horizontal : ALIGN - alignement vertical : VALIGN - marge séparant le bord des cellules de leur contenu : CELLSPADDING - nombre de pixels séparant les cellules : CELLSPACING - étendre une cellule sur plusieurs lignes : ROWSPAN - étendre une cellule sur plusieurs colonnes : COLSPAN

Exemple : <table bgcolor=" #ff0000" border="2" bordercolor="#FF0000"> <tr width="120" height="120"> <td>communiquer</td><td>surfer</td></tr> <tr width="120" height="160"><td cellspadding="15" cellspacing=10>sortir</td> <td cellspadding="15" cellspacing=10>voyager</td></tr> <tr><td colspan="2">annuaire</td></tr> </table>

Resultat : communiquer surfer sortir voyager annuaire

---

Leçons: 1 2 3 4 5 6 7 8 9 10 haut

10. Créer des cadres (ou "frame")

Créer des "frame", ces cadres indépendants ayant chacun leur propre barre de
défilement (ou non), réunis sur une même page, revient à construire une page web
à partir de plusieurs pages. Sur cette page principale comprise entre la balise
<FRAMESET> et </FRAMESET>,
on appelle les pages comme on appelle une image avec la balise <FRAME SRC> en définissant leur taille (COL) et leur emplacement.

Les attributs des cadres : - bordure : FRAMEBORDER ( 1=yes, O=no) - marge horizontale à l'intérieur du cadre : MARGINWIDTH - marge verticale à l'intérieur du cadre : MARGINHEIGHT - taille des cadres inchangée : NORESIZE - présence d'un ascenseur (ou barre de défilement) : SCROLLING (auto, yes, no) Exemple Supposons que vous avez deux pages ("page1.html" et "page2.html") et que vous vouliez les intégrer dans une seule page web avec la "page1.html" à gauche de l'écran et la "page2.html" à droite, ayant respectivement pour taille 250 et 500, et la première ayant un ascenseur, le code HTML s'écrira : <html> <body> <frameset col= “250, 500”> <frame src= “page1.html" name="gauche" frameborder="no" noresize scrolling="yes" marginwidth="0" marginheight="0"> <frame src="page2.html" name="droite" frameborder="no" noresize scrolling="no" marginwidth="0" marginheight="0"> </frameset> </body> </html> Vous n'en savez certainement pas assez pour construire le plus beau site du monde mais suffisamment pour écrire à la main une page simple ou "entrer dans le code" et modifier des paramètres écrits par votre éditeur.