Sections pr�c�dentes

Introduction
Terminologie
Index par codets
Votre premi�re page HTML
Les composantes standards
La t�te
Le corps
Le pied
Les cadres
Les r�f�rences
Liens absolus vs les relatifs
Les ancres
� des fichiers ex�cutables
La destination
La pr�sentation du texte
Son positionnement
Les s�parateurs
Les en-t�tes
Les polices
Les styles logiques
Les styles physiques
L'interpr�tation
Les couleurs
Les listes
Les d�finitions
La table des mati�res
La liste par codets
Retour � ma page principale
Bienvenue, vous �tes le e a acc�der � l'HTML en une page.

Les images

Voici une image standard.

<IMG SRC="logo.gif">

En plus de la source(SRC), le codet IMG prend comme param�tres l'alignement (ALIGN) et le texte de remplacement pour les fureteurs ne supportant les images (ALT). On peut �galement utiliser l'identificateur ISMAP pour les images dans un codet de r�f�rence � un ex�cutable. On peut �galement sp�cifier la grandeur de l'image avec les param�tres WIDTH et HEIGHT et la largeur de sa bordure avec le param�tre BORDER.

L'alignement

Nous verrons ici cinq valeurs possibles pour le param�tre ALIGN. Dans le cas des trois premi�res, l'image est consid�r�e comme faisant partie d'une ligne de texte comme n'importe quel autre caract�re. Ces trois valeurs indiquent l'alignement du texte par rapport � l'image. Il s'agit de TOP, MIDDLE et BOTTOM.

ligne pr�c�dente
en haut, au milieu, en bas.

ligne pr�c�dente<BR> <IMG SRC="logo.gif" ALIGN=TOP> en haut, <IMG SRC="logo.gif" ALIGN=MIDDLE> au milieu, <IMG SRC="logo.gif" ALIGN=BOTTOM> en bas. <P>

Pour les autres valeurs, les images ne font pas partie d'une ligne, mais sont situ�es sur un c�t� de l'�cran (devan�ant la marge comme dans un traitement de texte).

ligne 1
ligne 2
ligne 3
ligne 4
ligne 5
ligne 1<BR> <IMG SRC="logo.gif" ALIGN=LEFT> ligne 2<BR> ligne 3<BR> <IMG SRC="logo.gif" ALIGN=RIGHT> ligne 4<BR> ligne 5<BR CLEAR>

M�fiez-vous, les images � gauche et � droite peuvent parfois se superposer, o� une image � droite se superposer sur du texte pr�format�. 

Texte long long long long long long long long long

<IMG SRC="logo.gif" WIDTH=80% HEIGHT=50 ALIGN=RIGHT> <PRE>Texte long long long long long long long long long</PRE> <BR CLEAR>

La grandeur

Il existe deux autres param�tres qui sont tr�s int�ressants, surtout si votre page est fr�quent�e par des gens ayant une connexion plut�t lente. Il s'agit des param�tres WIDTH et HEIGHT. Ils prennent pour valeur un entier, respectivement la largeur et la hauteur de votre image en pixels. Ce param�tre permet au fureteur de laisser libre l'espace dont l'image a besoin et de continuer � afficher le texte. Vous pouvez �galement modifier la grandeur des images, mais je ne le recommande pas. Les images agrandies sont g�n�ralement laides. Si vous voulez r�tr�cir des images, il est pr�f�rable de le faire sur votre propre machine, il est inutile d'envoyer un fichier de 2000 par 2000 pour afficher un petit coin de 40 par 40.

<IMG SRC="logo.gif" HEIGHT=100> <IMG SRC="logo.gif" HEIGHT=20 WIDTH=200>

Les bordures

On peut �galement ajouter une bordure � une image. La bordure est de la couleur du texte (ou celle du texte li�). Par d�faut, les images � l'ext�rieur d'un lien n'ont pas de bordure, et celles � l'int�rieur en ont une de 2 pixels de large.

<IMG SRC="logo.gif" BORDER=5> <A HREF="logo.gif"><IMG SRC="logo.gif" BORDER=5></A>

Les tableaux

Voici un tableau tr�s simple.

Rang 1 Cellule 1 Rang 1 Cellule 2
Rang 2 Cellule 1 Rang 2 Cellule 2
<TABLE> <TR><TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TR><TD>Rang 2 Cellule 1 <TD>Rang 2 Cellule 2 </TABLE>

Les tableaux sont situ�s dans un codet TABLE, chaque rang commence par un codet TR et chaque cellule par un codet TD (ou TH).

Les bordures

Pour rajouter une bordure � un tableau, il faut ajouter le mot cl� BORDER.

Rang 1 Cellule 1 Rang 1 Cellule 2
Rang 2 Cellule 1 Rang 2 Cellule 2
<TABLE BORDER> <TR><TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TR><TD>Rang 2 Cellule 1 <TD>Rang 2 Cellule 2 </TABLE>

On peut �galement modifier la largeur de la bordure,

Rang 1 Cellule 1 Rang 1 Cellule 2
Rang 2 Cellule 1 Rang 2 Cellule 2
<TABLE BORDER=20> <TR><TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TR><TD>Rang 2 Cellule 1 <TD>Rang 2 Cellule 2 </TABLE>

la largeur des s�parations entre les cellules

Rang 1 Cellule 1 Rang 1 Cellule 2
Rang 2 Cellule 1 Rang 2 Cellule 2
<TABLE BORDER CELLSPACING=10> <TR><TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TR><TD>Rang 2 Cellule 1 <TD>Rang 2 Cellule 2 </TABLE>

et l'espace libre dans la cellule.

Rang 1 Cellule 1 Rang 1 Cellule 2
Rang 2 Cellule 1 Rang 2 Cellule 2
<TABLE BORDER CELLPADDING=10> <TR><TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TR><TD>Rang 2 Cellule 1 <TD>Rang 2 Cellule 2 </TABLE>

La largeur des �l�ments

On peut �galement sp�cifier la largeur du tableau au complet et/ou d'une colonne ou plusieurs colonnes. On peut utiliser soit une valeur absolue (en pixels), soit une valeur relative (en pourcentage de la largeur de l'�cran pour le tableau, ou de la largeur du tableau pour une colonne). Le premier tableau utilise de l'exemple utilise des largeurs relatives, ses cellules s'allongeront si on modifie la largeur de la fen�tre (ou du cadre). Le second utilise des largeurs absolue, il ne s'allonge donc jamais. Si vous allongez votre fen�tre, seul le premier tableau de cet exemple s'allongera.

Rang 1 Cellule 1 Rang 1 Cellule 2

Rang 1 Cellule 1 Rang 1 Cellule 2

<TABLE BORDER WIDTH=80%> <TR><TD WIDTH=60%>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 </TABLE> <P> <TABLE BORDER WIDTH=200> <TR><TD WIDTH=100>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 </TABLE>

L'alignement des �l�ments

Le param�tre ALIGN peut �tre utilis� pour modifier l'alignement horizontal des cellules. Les valeurs possibles sont LEFT, CENTER ou RIGHT. On peut mettre l'argument comme param�tre du rang ou de la cellule, le dernier ayant priorit�.

Rang 1 Cellule 1 Rang 1 Cellule 2 Rang 1 Cellule 3
Rang 2 Cellule 1 Rang 2 Cellule 2 Rang 2 Cellule 3
Rang 3 Cellule 1 Rang 3 Cellule 2 Rang 3 Cellule 3
<TABLE BORDER WIDTH=90% > <TR ALIGN=CENTER><TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TD>Rang 1 Cellule 3 <TR><TD>Rang 2 Cellule 1 <TD ALIGN=RIGHT>Rang 2 Cellule 2 <TD>Rang 2 Cellule 3 <TR ALIGN=CENTER><TD>Rang 3 Cellule 1 <TD>Rang 3 Cellule 2 <TD ALIGN=LEFT>Rang 3 Cellule 3 </TABLE>

Le param�tre VALIGN peut �tre utilis� pour modifier l'alignement vertical des cellules. Les valeurs possibles sont TOP, CENTER ou BOTTOM. On peut mettre l'argument comme param�tre du rang ou de la cellule, le dernier ayant priorit�.



Rang 1 Cellule 1 Rang 1 Cellule 2 Rang 1 Cellule 3


Rang 2 Cellule 1 Rang 2 Cellule 2 Rang 2 Cellule 3


Rang 3 Cellule 1 Rang 3 Cellule 2 Rang 3 Cellule 3
<TABLE BORDER> <TR VALIGN=BOTTON><TD><BR><BR> <TD>Rang 1 Cellule 1 <TD>Rang 1 Cellule 2 <TD>Rang 1 Cellule 3 <TR><TD><BR><BR> <TD>Rang 2 Cellule 1 <TD VALIGN=BOTTOM>Rang 2 Cellule 2 <TD>Rang 2 Cellule 3 <TR VALIGN=TOP><TD><BR><BR> <TD>Rang 3 Cellule 1 <TD>Rang 3 Cellule 2 <TD VALIGN=CENTER>Rang 3 Cellule 3 </TABLE>

Les cellules de grandeurs variables

On peut utiliser les param�tres ROWSPAN et COLSPAN, avec les codets TD et TH, de fa�on � obtenir des cellules disproportionn�es.

Rang 1 Cellule 1 Rang 1 et 2 Cellule 2 Rang 1 Cellule 3
Rang 2 Cellule 1 Rang 2 Cellule 3
Rang 3 Cellule 1
<TABLE BORDER> <TR><TD>Rang 1 Cellule 1 <TD ROWSPAN=2>Rang 1 et 2 Cellule 2 <TD>Rang 1 Cellule 3 <TR><TD>Rang 2 Cellule 1 <!--Rang 2 Cellule 2 est saut� � cause du COLSPAN=2--> <TD>Rang 2 Cellule 3 <TR><TD COLSPAN=3>Rang 3 Cellule 1 <!--Rang 3 Cellule 2 et 3 sont saut�s � cause du ROWSPAN=2 --> </TABLE>

Emp�cher les c�sures

Le param�tre NOWRAP permet d'emp�cher la c�sure automatique sur les tableaux trop petits. Gardez � l'esprit que tous les utilisateurs n'ont pas un �cran avec une aussi bonne r�solution que le votre et que des tableaux qui fond plusieurs fois la largeur de l'�cran sont tr�s arides � consulter.

test test test test test test test test test test test test test test

test test test test test test test test test test test test
<TABLE BORDER WIDTH=20%> <TR><TD>test test test test test test test test test test test test test test </TABLE> <BR> <TABLE BORDER WIDTH=20%> <TR><TD NOWRAP>test test test test test test test test test test test test </TABLE>

Les caract�res sp�ciaux

Certains caract�res peuvent �tre obtenus � l'aide d'un code num�rique, en voici la liste.

Code01234567 89101112131415
160 ¡¢£¤ ¥¦§¨© ª«¬­®¯
176°±²³´ µ·¸¹ º»¼½¾¿
192�ÁÂÃÄ ÅÆÇÈÉ ÊËÌÍÎÏ
208ÐÑÒÓÔ ÕÖ×ØÙ ÚÛÜÝÞß
224àáâãä åæçèé êëìíîï
240ðñòóô õö÷øù ú�üýþÿ

On peut �galement utiliser des cha�nes alphanum�riques, en voici une liste (sans-doute incompl�te).

Cha�neRCha�neRCha�neR Cha�neRCha�neRCha�neR
AacuteÁAgraveÀAcirc AumlÄAringÅAtildeÃ
EacuteÉEgraveÈEcircÊ EumlË
IacuteÍIgraveÌIcircÎ IumlÏNtildeÑ
OacuteÓOgraveÒOcircÔ OumlÖOtildeÕ
UacuteÚUgraveÙUcircÛ UumlÜ
YacuteÝ
AEligÆCcedilÇETHÐ OslashØTHORNÞ
aacuteáagraveàacircâ aumläaringåatildeã
eacuteéegraveèecircê eumlë
iacuteíigraveìicircî iumlïntildeñ
oacuteóograveòocircô oumlöotildeõ
uacuteúugraveùucircû uumlü
yacuteýyumlÿ
aeligæccedilçethð oslashøthornþszligß
lt<gt>amp&quot" reg®copy©

Les formulaires

Voici un petit formulaire qui permet de demander une recherche � Yahoo. On y retrouve les deux �l�ments essentiels : un moyen d'aller chercher de l'information et un de soumettre la requ�te.

<FORM METHOD=GET ACTION="http://search.yahoo.com/bin/search"> <INPUT NAME=p> <INPUT TYPE=SUBMIT> </FORM>