Le HTML (Hypertext Markup Language) est le langage utilisé pour la construction des documents hypertextes pouvant être visualisés sur le Web (World Wide Web). Le HTML fut développé à la fin des années 80 par Tim Berners-Lee du CERN et popularisé à ses débuts par le navigateur NCSA Mosaic. En 1994, l’arrivée du navigateur Netscape et la sortie du HTML 2.0 (version finale en 1995) ont amené une forte augmentation de la popularité du langage. Cependant, il a fallu attendre le milieu de 1995 pour finalement voir l’entrée de Microsoft sur le marché des navigateurs avec son Microsoft Internet Explorer.
Le langage HTML fonctionne suivant ce principe : des commandes HTML entourent des blocs de texte dans un document pour décrire l'apparence de celui-ci. Lorsqu'un navigateur interprète le document en question, il formate le texte suivant la signification des commandes HTML. Par exemple, des commandes peuvent indiquer qu'il s'agit d'un titre, d’une liste d'éléments ou d'un simple paragraphe. Un document HTML peut incorporer du texte mais également des images, de l'animation, du son ou autres médias.
Un document HTML peut être créé à l'aide d'un simple éditeur de texte, mais en employant un éditeur spécialisé (par exemple, WebExpert de Visicom Media), votre travail sera de loin plus performant.
Dans cette section vour pourrez trouver une description sommaire des balises disponibles pour le langage HTLM 3.2.
Cependant, pour une description plus complète, vous trouverez en bas de la page un lien pour télécharger un fichier d'aide livré avec WebExpert de Visicom Media, contenant TOUTES les instructions HTML 3.2.
Voici le début de votre page...
<html>
<head>
<title>Placez ici votre titre</title>
</head>
<body>
Ici vous saisirez le code de votre page
</body>
</html>
Dans la section "Body" vous allez devoir déclarer beaucoup d'options qui vont influencer le reste de votre page.
Si vous voulez rajouter une image de fond, sasissez ceci entre la partie <body et la partie > :
background="Le nom de votre image suivie de son extension"
Voici ce que vous devez obtenir :
<body background="essai.gif">
N.B. : Pour des raisons de bonne lecture des images par votre navigateur, il est préférable de les mettres dans le même répertoire que le site. Par ailleurs, étant donné que la pluspart des hébergeurs fonctionnent sous Unix ou Linux, proscrivez les accents et les majuscules...
Si vous voulez changer les couleurs, voici ce que vous devez sasir pour...
... changer la couleur de fond : bgcolor="#code hexadécimal de la couleur"
... changer la couleur du texte : text="#code hexadécimal de la couleur"
... changer la couleur des liens : link="#code hexadécimal de la couleur"
La couleur doit être mise au format héxadécimal. Au bas de cette page, vous trouverez un programme, nommé HTML Color qui permet de connaître le code d'une couleur.
Les polices de caractères
Les petits plus...
Les frames
Les tableaux
Les listes
Les programmes et utilitaires
L'utilisation des polices de caractères...
<font name="Ici, saisissez le nom de la police que vous voulez. Ex. : Arial">
<font size="Saisissez ici la taille (de 1 à 6) que vous désirez appliquer à votre police">
<font color="Saisissez ici la couleur que vous désirez appliquer à votre police. Elle devra être à ce format : "#@@@@@@" (les sigles @ représentent un nombre). Pour mieux vous aider au choix dans la couleur, un programme est livré dans la partie "Logiciels" du site.">
<b></b> Ceci sert à mettre le texte en gras.
<i></i> Ceci sert à mettre le texte en italique.
<big></big> Ceci sert à rendre le texte "imposant".
<blink></blink> Ceci sert à faire clignoter le texte.
<strike></strike> Ceci sert à barrer le texte.
<u></u> Ceci sert à souligner le texte.
Retour au sommaire des techniques
Les petits plus...
Pour insérer une image :
<img src="Nom de votre image et son extension">
Pour insérer une ligne horizontale :
<hr>
Pour insérer un lien vers une autre page de votre site ou vers un autre site :
<a href="http://www.microsoft.com">Microsoft</A>
Pour mettre une musique de fond :
<bgsound src="Votre musique ou son suivi de son extension loop=Nombre de répétitions>
A la section loop, vous devez mettre le nombre de répétitions (par exemple 3) ou -1 pour répéter à l'infini.
Retour au sommaire des techniques
Les frames...
Je pense qu'il serait préférable, pour des raisons de meilleure compréhension, de commencer par un petit exemple...
<html>
<head>
<title>Exemple de frame</title>
<head>
<body>
<frameset cols="30%, *">
<frame src="Page1.html" name="MENU">
<frameset rows="30%, *">
<frame src="Page2.html" name="MENUPAGE">
<frame src="Page3.html" name="PAGE">
</frameset>
</frameset>
</body>
</html>
Avec un code de ce genre, l'explorateur va d'abord partager sa fenêtre en 2 parties verticales (frameset cols) : l'une faisant 30% et l'autre occupant le reste, c'est à dire 70%.
Ensuite nous indiquons à l'explorateur de partager la partie de droite en 2 autres parties horizontales (frameset rows) : l'une faisant 30% et l'autre occupant le reste, c'est à dire 70%.
Analyse du code...
<frameset cols="30%, *"> : indique à l'explorateur de partager sa fenêtre en deux parties VERTICALES !!! L'une fait 30%, l'autre 70%.
<frame src="Page1.html" name="MENU"> : on indique à l'explorateur de mettre dans la partie de gauche une page nommée "Page1.html" et de donner à cette partie le nom de "MENU".
<frameset rows="30%, *"> : indique à l'explorateur de partager la partie de droite en deux LIGNES !!! L'une fait 30%, l'autre 70%.
<frame src="Page2.html" name="MENUPAGE"> : on indique à l'explorateur de mettre dans la partie du haut une page nommée "Page2.html" et de donner à cette partie le nom de "MENUPAGE".
<frame src="Page3.html" name="PAGE"> : on indique à l'explorateur de mettre dans la partie du bas une page nommée "Page3.html" et de donner à cette partie le nom de "PAGE".
</frameset> : ferme la partie des déclarations de frames.
</frameset> : ferme la partie des déclarations de frames.
Retour au sommaire des techniques
Les tableaux...
Une fois de plus, nous allons commencer par un exemple. La compréhension en sera améliorée.
Ici, nous allons faire un tableau de 3 lignes par 3 colonnes.
<html>
<head>
<title>Essai</title>
</head>
<body>
<table border="1">
<tr>
<td>Voici</td>
<td>un</td>
<td>exemple</td>
</tr>
<tr>
<td>pour</td>
<td>faire</td>
<td>un tableau</td>
</tr>
<tr>
<td>sur</td>
<td>une</td>
<td>page</td>
</tr>
</table>
</body>
</html>
Et voici notre exemple lu par le navigateur...
| Voici |
un |
exemple |
| pour |
faire |
un tableau |
| sur |
une |
page |
Analyse du code...
<table border="1"> : Ouvre la section de déclaration de tableau et indique que les séparateurs seront de taille 1.
<tr> : Ouvre une nouvelle ligne.
<td></td> : Inscrit du texte dans la première ligne, première colonne.
<td></td> : Inscrit du texte dans la première ligne, deuxième colonne.
<td></td> : Inscrit du texte dans la première ligne, troisième colonne.
</tr> : Ferme la ligne.
<tr> : Ouvre une nouvelle ligne.
<td></td> : Inscrit du texte dans la seconde ligne, première colonne.
<td></td> : Inscrit du texte dans la seconde ligne, deuxième colonne.
<td></td> : Inscrit du texte dans la seconde ligne, troisième colonne.
</tr> : Ferme la ligne.
<tr> : Ouvre une nouvelle ligne.
<td></td> : Inscrit du texte dans la troisième ligne, première colonne.
<td></td> : Inscrit du texte dans la troisième ligne, deuxième colonne.
<td></td> : Inscrit du texte dans la troisième ligne, troisième colonne.
</tr> : Ferme la ligne.
</table> : Ferme la déclaration des tableaux.
Si vous voulez centrer le texte dans vos cases, saisissez <center> après td.
Vous obtiendrez ceci : <td><center>Votre texte</center></td>
Si vous voulez aligner le texte à droite, il vous suffit de remplacer <center> </center> par <right> </right>
Retour au sommaire des techniques
Les listes...
Il existe différents types de listes :
- les listes organisée (avec des numéros devant)
- les listes ordinaires (avec seulement un petit point devant).
Nous allons expliquer la première...
Voilà tout d'abord comment la déclarer :
Mettez l'introduction habituelle...
<ol>
<li>Numéro un
<li>Numéro deux
<li>Numéro trois
</ol>
Analyse du code...
<ol> : Ouvre la section de déclaration des listes organisées.
<li>Numéro un : Indique à l'explorateur d'ouvrir la première ligne. On obtiendra ceci : 1. Numéro un
<li>Numéro deux : Indique à l'explorateur d'ouvrir la seconde ligne. On obtiendra ceci : 2. Numéro deux
<li>Numéro trois : Indique à l'explorateur d'ouvrir la troisième ligne. On obtiendra ceci : 3. Numéro trois
</ol> : Ferme la section de déclaration des listres organisées.
Explication de la deuxième méthode : les listes non-organisées...
Voilà tout d'abord comment la déclarer :
Mettez ici l'introduction habituelle...
<ul>
<li>Ligne 1
<li>Ligne 2
<li>Ligne 3
</ul>
Analyse du code...
<ul> : Ouvre la section de déclaration des listes non-organisées.
<li>Ligne 1 : Indique à l'explorateur d'ouvrir la première ligne. On obtiendra ceci : . Ligne 1
<li>Ligne 2 : Indique à l'explorateur d'ouvrir la seconde ligne. On obtiendra ceci : . Ligne 2
<li>Ligne 3 : Indique à l'explorateur d'ouvrir la troisième ligne. On obtiendra ceci : . Ligne 3
</ul> : Ferme la séction de déclaration des listes non-organisées.
DURAND Adrien
Dernière révision : Mardi 29 février 2000
HTML Color (7,61 Ko) : pour trouver le code héxadécimal d'un couleur.
HTML Color (387 Ko) : la même chose qu'au dessus, mais avec la DLL Vb40032.dll nécessaire au programme
Référence HTML complète (135 Ko) : incluse à l'éditeur WebExpert de Visicom Media
Retour au sommaire des techniques |