LE GUIDE DU HTML

version 1.1 (29/06/2004) par eVr

Ce guide est un compromis entre brièveté, clarté et précision. Vous trouverez ici toutes les commandes principales et quelques autres utiles, classées par type.

1. Introduction
2. Principes de base
3. Balises principales
4. Présentation
5. Formatage du texte
6. Images & couleurs
7. Sons
8. Liens
9. Tableaux
10. Listes
11. Formulaires
12. Caractères spéciaux
13. Cadres
14. Diverses autres commandes
15. Effets de style (scripts CSS)
16. D'autres sites & conclusion

1. Introduction :

Le langage html permet de présenter un document au format ".html" ou ".htm", et peu être lu par n'importe quel navigateur (browser). Ce langage est un passage obligé pour la mise à la disposition d'un document sur le web. Pour voir la source d'un document, il suffit lorsqu'il est affiché par votre browser de faire un clic droit/afficher la source Vous trouverez ci-dessous les principales balises utilisées pour la construction d'un document html.
L'idéal serait pour commencer à comprendre de regarder la source d'un site assez petit en guise d'illustration de ce qui va suivre.

^ TOP ^

2. Principes de base :

les balises sont de la forme
<balise> </balise>
ou
<balise />
la cible des balises se situe entre celles-ci
les balises peuvent être écrites en majuscules ou pas

^ TOP ^

3. Balises principales :

Un document html comporte toujours un squelette stéréotypé. En effet, celui-ci facilite la lecture du document par le navigateur, et il dessine des zones différentes ayant un contenu spécifique. Le squelette est de la forme :

<html>
<head>
<title></title>
</head>
<body>
mise en forme du document
</body> </html>

<html>

</html>

délimite tout le document.

<head>

</head>

délimite l'entête du document

<title>

</title>

délimite la zone d'entrée du titre du document

<body>

</body>

délimite le corps du document c'est à dire là ou vous trouverez la mise en forme.

^ TOP ^

4. Présentation :

<br />

: Aller à la ligne

: Sert à aligner le texte à droite, gauche ou au centre : ces attributs sont left, right et center. A noter qu'on peut centrer du texte simplement par la commande

: Pour faire un paragraphe

: bloc en retrait

<hr>

: défini une ligne horizontale. Les attributs possibles sont :

: définit la largeur de la ligne, en % de l'écran ou en pixels

: définit l'épaisseur de la ligne, en % ou en pixels

: définit la couleur de la ligne

: l'attribut noshade sert à produire une ligne pleine (sans effet 3D)

^ TOP ^

5. Formatage du texte :

<hX>titre</hX>

: définit la taille d'un titre, avec X de 1 à 6 du plus petit au plus grand.

La définition des paramètre de taille, de couleur, de fonte,... du texte est désignée par

<font>

<font face="???">texte</font>

: désigne la police de caractère utilisée (fonte)

<font color="???">texte</font>

: désigne la couleur du texte. Celle ci peut être écrite en anglais (ex : black, blue, red) pour les plus simples et les navigateurs relativement récents. Sinon, on doit écrire les couleurs en hexadécimal.

<font size="X">texte</font>

: désigne la taille du texte, ou X vaut de 1 à 7
On peut également faire varier la taille du texte de la manière suivante :

<font size="+2">texte</font>

ou le texte sera plus grand de 2 unités.
La grandeur de base du texte se note

auquel on peut ajouter les attributs color, size et face comme avec

<font>

On peut mettre plusieurs attributs derrière une balise

<font>

<font size="2" color="blue" face="arial">texte</font>

Pour la taille de la police, on peut simplement utiliser les balises

<small>

<big>

.

Il existe aussi d'autres balises de mise en forme du texte :

<b>texte</b>

: pour mettre le texte en gras (bold)

<i>texte</i>

: texte en italique

<u>texte</u>

: texte souligné

<em>texte</em>

: texte en italique également

<cite>texte</cite>

: citation (en italique)

<tt>texte</tt>

: imprimé

<strike>texte</strike>

: texte ~~barré~~ (on utilise aussi

<s>texte</s>

)

<blink>texte</blink>

: texte clignotant; ça marche pas forcément par contre

<sup>texte</sup>

: texte en ^exposant

<sub>texte</sub>

: texte en _indice

<pre>texte</pre>

: texte préformaté

^ TOP ^

6. Images & couleurs :

Pour insérer une image, on utilise la balise

On peut préciser également :

la taille des bords :

le texte en alternative (qui apparaît lorsqu'on laisse le curseur longtemps sur l'image ou lorsque l'image ne s'affiche pas) :

Pour accélérez l'affichage de la page, on peut définir les dimensions de l'image :

. Cette image aura les dimensions 100*200 pixels.
On peut définir l'espace environnant de l'image (par rapport au texte avant et après elle) par les attributs

hspace

(espace horizontal) et

vspace

(espace vertical).

: définit un objet encastré.

Pour définir une couleur à la page, on utilisera un attribut de

<body>

: La page aura la couleur rouge en arrière-plan
De même, une image en arrière plan sera déclarée ainsi :

^ TOP ^

7. Sons :

Cette partie sera pas très longue car on ne peut pas faire grand chose avec des sons.

définit le son qui se lancera lorsque la page s'ouvrira.
Les attributs sont :

. Si X vaut -1, le son se répètera en boucle à l'infinie, sinon il se répètera X fois.
On peut également utiliser un lien pour ouvrir un son :

<a href="blabla.mid">écoutez ici un son</a>

^ TOP ^

8. Liens :

Un lien est du texte introduit par la balise

<a>

.
L'adresse se note par "href" : ce lien mène vers la page d'accueil. La syntaxe est :

<a href="URL">texte</a>

. Tout ce qui se trouve entre ces 2 balises sont des liens. On peut y mettre une image par exemple.

On peut définir la couleur des liens avec des attribut de

<body>

: signifie que les liens seront rouge, les liens actifs seront bleu et les liens visités seront vert. On peut simplifier la saisie des liens : si toutes vos pages sont dans le même répertoire, pour aller à la page "???.html", il suffira de taper

.

Si on veut donner l'URL de base pour faire ce type de raccourci, on utilisera

Par exemple, la page à l'adresse "http://www.domaine.com/mapage.html" est accessible par les commandes :

...

<a href="mapage.html">ma page perso</a>

On peut, comme pour les images donner un titre ou un intitulé aux liens ; celui-ci s'affichera en laissant qq temps le curseur sur le lien.
Pour cela, on utilise le code

title="titre du lien..."

ex : lien

^ TOP ^

9. Tableaux :

Un tableau se définit par les balises

, les lignes du tableau se définissent par les balises

et les cellules se définissent par

. Chaque cellule du tableau doit contenir au moins un caractère pour être affichée.
A noter cependant : les balises </tr> et </td> sont recommandées par un soucis de lisibilité mais par indispensables.

Exemple de tableau "basique" :

<table>
<tr><td>coucou</td>
<td>c'est un exemple !</td>
</tr>
<tr><td>essayez</td>
<td>aussi</td>
</tr>
</table>

Cela donnera :

coucou	c'est un exemple !
essayez	aussi

Voila, ça c'est la base d'un tableau... On peut rajouter les attributs suivants :

: définit la taille des bords du tableau (X en pixels)

: définit la couleur des bord du tableau (avec ? la couleur)

: définit la couleur du tableau (avec ? la couleur)

: pour mettre une image en arrière-plan
(à noter que cet attribut peut être mis également à la suite de <td>)

: définit l'espace entre les cellules (X en pixels)

: définit l'espace entre les bords et le texte (X en pixels)

: définit la largeur du tableau (X en pixels)
(on peut mettre X en pourcentage en rajoutant % : X%)

On peut faire des tableaux améliorés avec des cellules qui ont la taille de 2 autres cellules : on utilise comme attribut de <td> ou <th> les commandes

rowspan

pour une cellule qui a sa largeur modifiée et

colspan

pour une cellule qui a sa hauteur modifiée :

largeur=2
hauteur=3	cellule normale
	cellule normale
	cellule normale

Code source du tableau ci-dessus :

<table>
<tr><td colspan=2>largeur=2
<tr><td rowspan=3>hauteur=3
<td>cellule normale
<tr><td>cellule normale
<tr><td>cellule normale
</table>

Voila, c'est à peut près tout sur les tableaux...

^ TOP ^

10. Listes :

Ce sera un petit paragraphe car les listes sont assez faciles à faire. On peut simplement créer une alternance de texte précédé d'un point :

premier
second
troisième

Mais ce n'est pas une liste à proprement dit.
Il existe 2 sortes de listes : les listes ordonnées et les listes non-ordonnées. Seules leurs apparences changent.

-liste non-ordonnée :
Elle est définit entre les balises

<ul>

</ul>

. Chaque point est ensuite précédé de la balise

<li>

-liste ordonnée :
Elle est définit entre les balises

<ol>

</ol>

. Comme les listes non-ordonnées, chaque point est précédé par

<li>

Dans les 2 cas, on peut choisir la forme pour li, en lui ajoutant un des attributs suivants :

<li type=disc>
<li type=circle>
<li type=square>

Dans le cas de la liste ordonnée, on peut choisir également parmis les attributs suivants :

^ TOP ^

11. Formulaires :

Les formulaires sont établis dans une zone de définition située entre les balises

. On doit définir la méthode (POST ou GET) à employer. La différence entre les 2 est que l'une fait apparaitre les variables dans l'URL alors que l'autre les passe de manière transparente (donc plus sécurisée).
On doit également préciser l'action du formulaire avec l'attribut

ACTION

. Cet attribut doit cibler le fichier de traitement du formulaire.
Ici nous utiliseront la méthode POST, donc les commandes du formulaire seront placées entre

</form>

.

La commande

input

:
-

: sert à insérer dans la page un champ d'entrée de données. Ces attributs sont :

name="nom"
: obligatoire ; sert à donner le nom du champ
value="valeur par défaut"
: donne la valeur par défaut du champ
size="X"
: donne la taille du champ (avec X le nombre de caractères maximum)

Afin que l'utilisateur puisse savoir à quoi sert ce champ de texte il est nécessaire de lui donner une légende ou un titre. Les descriptions de champs sont faites à l'aide de la balise

<label>

.
Vous pouvez également désactiver le champ de 2 façons :

readonly
: permet de juste afficher le champ sans que l'internaute puisse le modifier
disabled
: permet de désactiver le champ de façon à ce qu'il ne soit pas transmis lors de l'envoi du formulaire

Exemple de formulaire :

<form method=post>
<label for="nom">Nom : </label><input type="text" name="nom" value="entrez votre nom" size="50" id="nom"><br>
<label for="prenom">Prenom : </label><input type="text" name="prenom" value="entrez votre prénom" size="50" id="prenom">
</form>

Cela donne à l'écran : NB : Vous noterez que le label fait référence à l'identifieur (

id=""

) et non au nom (

name=""

) d'un champ.

-

: ressemble à un type text, mais dissimule le contenu à l'écran en remplacant le texte par des étoiles.
Attention il n'est pas crypté et ne cache que l'affichage à l'écran du texte saisi.

mot de passe : <input type="password" name="pass" value="popo">

mot de passe :

<input type="radio">
: sert à insérer des choix de réponses à cocher. Ces attributs sont les mêmes que ci-dessus, sauf pour size qui n'existe pas pour cette commande.

<input type="radio" name="info">monsieur
<input type="radio" name="info">madame

Le code ci-dessus par exemple donnera à l'écran : monsieur madame
<input type="file">
: permet à l'internaute d'envoyer un fichier
Vous pouvez restreindre le choix à une liste de types de contenu autorisés séparés par des virgules, en la spécifiant dans l'attribut
accept
de la balise
form
.
<form action="blabla" accept="text/plain,text/html"> <label>Fichier à envoyer <input type="file"></label> </form>

Fichier à envoyer
<input type="hidden">
: permet de créer des champs invisibles à l'affichage (mais visibles dans le code source de la page). Ces champs sont faits pour pouvoir définir sur la page des valeurs qui ne changeront pas ou qui n'ont pas besoin d'interactions directes avec l'utilisateur.

<input type="hidden" name="source" value="evil.rain.free.fr">

On peut ajouter au formulaire un champ de texte sur plusieurs lignes par la commande

.
Cette balise nécessite que l'on attribut la taille du champ, ce qui ce fait par les sous-balise

cols

rows

, respectivement pour le nombre de caractère sur une ligne et le nombre de lignes.

On peut utiliser la commande

wrap="off", "virtual" ou "physical"

qui joue sur les ascenseurs horizontaux du champ de texte.
On lui attribut également un nom avec la commande

name="nom"

Pour créer un menu déroulant, on utilise la balise

. Pour pouvoir sélectionner plusieurs options, il faut rajouter la commande

Chaque item du menu sera précédé par la balise

et éventuellement

</option>

. L'option par défaut est notée

Vous pouvez définir la taille avec l'attribut

size

pour obtenir une liste de taille fixe.
Vous pouvez grouper les options grâce à l'attribut

<select>
<optgroup label="nombres">
<option> un</option>
<option selected> deux</option>
<option> trois</option>
</optgroup>
<optgroup label="chiffres">
<option> dix</option>
<option> trente</option>
</optgroup>
</select>

Vous pouvez grouper les champs par catégorie pour plus de clartée. Mettez pour cela les champs dans une balise

dont vous préciserez le "titre" en y plaçant la balise

<fieldset>
<legend>titre</legend>
yeahyeah : <input type="text">
<select><option>one<option>two</select>
</fieldset>

Ce qui donne :

titre yeahyeah :

Voila de quoi faire un formulaire consequent. Maintenant il faut pouvoir envoyer les données à votre e-mail par exemple. On utilise pour cela un bouton :
Pour envoyer les réponses d'un internaute, on utilise un bouton qui a pour fonction "submit" c'est à dire envoyer.

Il existe aussi un bouton qui annule les données des champs du formulaire :

On notera également qu'il existe un

type="button"

qui ne fait, de base, rien de spécial mais que l'ont peut associer du javascript.

^ TOP ^

12. Caractères spéciaux :

Les anciens navigateurs ne supportent pas certains caractères spéciaux (&, " par exemple). De plus, certains caractères sont réservés au language html (<, > par exemple) ; il faut donc utiliser un code spécial pour les insérer dans une page.
Voici quelques caractères pouvant poser problème et leur code :

: sert à faire un espace

: &

: <

: >

: "

&oelig;

: œ

: à

: ç

: é

: ê

: è

: ë

: ù

: ®

: ©

™

: ™

&brvbr;

: &

…

: …

: ²

: §

^ TOP ^

13. Cadres :

Les pages affichant les cadres sont des pages affichant plusieurs sources html en même temps. Créer une page vierge. A la place de <body>, mettez la commande

pour définir la zone de définition des cadres.
Supposons que vous vouliez créer une barre de titre à droite, et la page principale à droite. Vous allez donc diviser la page en 2 cadres dans le sens vertical. Vous allez donc déterminer une séparation verticale à X pixels du bord de droite (

cols=X

). Ensuite il faut déterminer les 2 pages à afficher dans les cadres, comme suit :

<frameset cols="150">
<frame name="nom_1" src="URL_1">
<frame name="nom_2" src="URL_2">
</frameset>

A noter que vous donner le nom que vous voulez aux cadres, mais c'est indispensable d'en donner un.
Pour afficher les pages dans le cadre de droite (sur la page "nom_2"), il faut ajouter dans chaque lien du cadre de gauche

target="_nom_2"

:
Par exemple :

<a href="http://www.domaine.com" target="_nom_2">domaine.com</a>

Mais le plus simple c'est d'utiliser un éditeur html pour les cadres car c'est vraiment emm... de les faire soi-même.

^ TOP ^

14. Diverses autres commandes :

: le texte défile à l'écran
On peut ajouter les attributs

height

width

bgcolor

.
texte défilant

^ TOP ^

15. Effets de style (scripts CSS):

On peut faire changer la couleur, la taille et autre des liens : dans la partie <head>, ajoutez les commandes

<style></style>.

Entre ces balises, vous pouvez mettre :
-

a:link {paramètres}

: détermine les paramètres des liens simples
-

a:visited {paramètres}

: paramètres des liens visités
-

a:hover {paramètres}

: paramètres des liens lorsque le curseur est dessus

Les paramètres sont : (vous n'êtes pas obligé de tout mettre bien sur :)

text-decoration : underline|overline|none;
: texte souligné, avec une ligne au dessus ou sans rien
color: ???;
: couleur du texte
background-color: ???;
: couleur du surlignage
font-style: italic;
: met le texte en italique
font-weight: bold;
: met le texte en gras
font-size: ???;
: défini la taille de la police
font-family: ???;
: défini la police du texte
letter-spacing: X;
: espacement, en pixel, entre les lettres
background-attachment: fixed;
: définit le papier peint de la page comme statique
background-position: center|right\left|top|bottom;
: position du papier peint
background-repeat: no-repeat|repeat-x;
: répétition du papier peint
background-image: URL;
: URL de l'image de fond
letter-spacing: x;
: espacement des lettres dans les phrases

A noter que les ";" sont indispensables !!!
Ceci n'est qu'un apercu de ce qu'on peut faire avec les scripts CSS... la suite est là.

^ TOP ^

16. Conclusion :

'tain c'est long à écrire...
On dira que c'est la beta-version de ce guide, alors soyez indulgents pour les fautes et oublis (vous pouvez me les signaler en m'écrivant).
Conclusion : voilà, c'est fini, j'suis crevé ! (et bossez bien le html : c'est en regardant la source (clic droit/afficher la source) des pages intéressantes qu'on progresse !)

^ TOP ^