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>