TABLEAUX, LIENS et IMAGES
ATTENTION: les définitions données le sont à titre indicatif sur la base de la norme HTML 4. Les comportements sous les différents navigateurs sont à tester au cas par cas, en particulier avec les versions de Netscape qui commence à dater! Noter également que ces listes ne sont absolument pas exhaustives; elles fournissent simplement les fonctions et leurs attributs les plus courants.
Les tableaux
| tag | signification | fonction |
|---|---|---|
| <table></table> | table | insère un tableau |
| <tr></tr> | table row | insère une ligne |
| <td></td> | table data | insère une cellule |
| <th></th> | table header | insère une cellule d'en-tête, dont le texte est, par défaut, en gras et centré |
|
attribut |
signification |
effet |
s'applique à |
exemple |
|
align |
alignment |
alignement
horizontal |
table, tr, td, th |
align="Center"
ou "Left" ou "Right" ou "Justify" |
|
valign |
vertical alignment |
alignement
vertical |
table, tr, td, th |
align="Top"
ou "Bottom" ou "Middle" ou "Baseline" |
|
bgcolor |
background
color |
couleur
de fond |
table, tr, td, th |
bgcolor="#99DDCC"
ou "Silver" |
|
border |
border |
épaisseur
de la bordure |
table |
border="0"
ou "1"… |
|
bordercolor |
border color |
couleur
de la bordure |
table, tr(IE), td, th |
bordercolor="#99DDCC"
ou "Navy" |
|
cellspacing |
cell spacing |
nb
de pixels entre la bord externe des cellules et le bord externe du tableau |
table |
cellspacing="0"
ou "1" ou "2"… |
|
cellpadding |
cell padding |
nb
de pixels entre la bord interne des cellules et leur contenu |
table |
cellpadding="0"
ou "1"… |
|
class |
class |
spécifie
le style CSS à appliquer |
table, tr, td, th |
class="t1" |
|
cols |
columns |
indique
à priori le nombre de colonnes du tableau, pour améliorer la performance |
table |
cols="6" |
|
width
|
width |
donne
la largeur / la hauteur de la table ou de la cellule |
table,
td, th |
width="130"
ou width="50%" |
|
nowrap |
no wrap |
interdit
les retours à la ligne automatiques |
table(IE), tr, td, th |
nowrap |
|
background |
background |
insère
une image de fond, mais les différences entre navigateurs empêche quasiment
son utilisation |
table(IE), tr(NS), td(IE), th(IE) |
background="images/bg.gif" |
|
colspan |
span columns |
défini
que la prochaine cellule "compte" pour plusieurs cellules
horizontalement / verticalement |
td, th |
colspan="3" rowspan="2" |
Les liens
penser
aux attributs link, vlink et alink de Body.
URL: Uniform Resource Locator
Attention
aux caractères non US-ASCII; ils seront remplacés par le signe % et leur valeur
ASCII. Par exemple l'espace devient %20.
|
tag |
signification |
fonction |
|
<a href="…">…</a> |
anchor
hyperreference |
lien
vers une autre page web. Entre les guillemets, saisir l'addresse absolue
("http://www.yahoo.ch") ou relative ("index.html") |
|
<a name="…">…</a> |
anchor name |
défini
un signet sur la page. Par exemple "chapitre 1" |
|
<a href="#…">…</a> |
anchor hyperreference |
lien
sur le signet correspondant sur cette page. Par exemple
"#chapitre1" |
|
<a href="…#…">… </a> |
anchor hyperreference |
lien
sur le signet correspondant sur une page du web. Par exemple
"index.html#chapitre1" |
|
<a href="mailto:…">…
</a> |
anchor
hyperreference |
Lien
E-mail; ouvre une fenêtre de composition de courrier. |
attributs de <a>:
|
attribut |
signification |
effet |
exemple |
|
href |
anchor hyperreference |
cible
du lien |
voir
tableau précédent |
|
name
ou id |
name
ou id |
défini
un signet |
voir
tableau précédent |
|
class |
class |
spécifie
le style CSS à appliquer |
class="t1" |
|
target |
target |
spécifie
l'emplacement où le contenu du lien doit s'afficher (frame ou fenêtre). Si
aucune fenêtre ou lien de ce nom n'existe, ouvre une nouvelle fenêtre. |
target="mon
joli frame" ou target="_new" |
|
title |
title |
donne
un titre du lien, apparaît lorsqu'on survole le lien avec la souris (utile
surtout pour les images) |
title="clicquer
ici pour voir une photo de cette superbe voiture" |
|
accesskey |
access key |
touche
de raccourci, permet d'activer le lien avec la touche Alt + le caractère
donné |
accesskey="q" |
Les images
attributs de <img>:
|
attribut |
signification |
effet |
exemple |
|
src |
source |
référence
le fichier image |
src="images/mon_image.gif"
ou src="http://www.yahoo.com/weather/usa.com" |
|
alt |
altternate |
texte
de remplacement, apparaît également lorsqu'on survole le lien avec la souris |
alt="mon
chien quand il avait 3 ans" |
|
class |
class |
spécifie
le style CSS à appliquer |
class="t1" |
|
align |
alignment |
alignement
horizontal |
align="left"
ou "right" ou "top" ou "middle" ou
"bottom" ou "baseline" ou "center"(IE) ou
"texttop"(NS) ou "absmiddle"(NS) ou
"absbottom"(NS) |
|
border |
border |
épaisseur
de la bordure |
border="0" |
|
width |
width |
largeur
/ hauteur de l'image |
width="130" ou
width="50%" |
|
hspace |
horizontal vertical space |
espacement
entre l'image et le texte |
hspace="0"
ou "2" vspace="1" ou "2" |
|
ismap
et usemap |
|
ismap
défini l'image comme étant réactive et usemap défini le nom de la map à utiliser |
<img
src="images/map2.gif" ismap usemap="#map2"> |