|
Balise (syntaxe)
Une balise se reconnaît facilement. Elle est toujours encadrée
par les signes :
inférieur à "<"
et supérieur à ">".
Exemple : <font>.
Dans une balise, il y a généralement un tag d'ouverture
<font> et un tag de fermeture
</font>.
Remarquez le slash "/"
dans le tag de fermeture. C'est lui qui différencie les balises
"fermeture" de "ouverture".
Ces deux balises influenceront le texte placé entre elles
:
Pour mettre cette phrase en italique nous l'avons "taguée"
- Comme ci-dessous :
<i>pour mettre cette phrase
en italique nous l'avons "taguée"</i>
Pour mettre cette phrase en gras nous l'avons "taguée"
- Comme ci-dessous :
<b>pour mettre cette phrase
en gras nous l'avons "taguée"</b>
Pour mettre cette
phrase en italique et gras nous l'avons "taguée"
- Comme ci-dessous :
<i><b>pour mettre cette
phrase en italique et gras nous l'avons "taguée"</b></i>
Comme vous pouvez le constater, il existe une hiérarchie
dans l'ouverture et la fermeture des tags :
Le premier ouvert est le dernier fermé.
Paramètres et valeurs de balise (syntaxe)
Chaque balise d'ouverture peut comprendre des paramètres
accompagnés ou non d'une valeur :
<balise paramètre="valeur">texte
ou objet à formater</balise>
<font size="3">texte
à formater</font>
Plusieurs paramètres et valeurs peuvent être définis
dans une même balise :
<font paramètre="valeur"
paramètre="valeur"
paramètre="valeur">texte
à formater</font>
Attention, respectez les espaces entre la balise et le premier
paramètre, puis entre chaque paramètre.
L'écriture exacte est
Signe inférieur<pas
d'espacebaliseESPACE
paramètrepas
d'espaceSigne égal à=pas
d'espaceouverture du guillemet"pas
d'espacevaleurpas
d'espaceFermeture du guillemet"ESPACE
paramètre suivant pas
d'espaceSigne égal à=pas
d'espaceOuverture du guillemet"pas
d'espacevaleurpas
d'espaceFermeture du guillemet"ESPACESigne
supérieur>ZONE
BALISÉESigne inférieur<pas
d'espaceSigne barre oblique slash/pas
d'espacebalisepas
d'espaceSigne
supérieur>
Syntaxe HTML et XHTML
| Concerne |
HTML 4.01 |
XHTML 1.0 |
Casse
de la balise |
minuscules - majuscules (libre)
<body> ou <BODY>
|
minuscules
<body> |
Casse
du paramètre
de la balise |
minuscules - majuscules (libre)
<body BGCOLOR="red">
<BODY bgcolor="red">
etc. |
minuscules
<body bgcolor="red"> |
Casse
de la valeur
du paramamètre |
minuscules - majuscules (libre)
<body bgcolor="red">
<BODY BGCOLOR="RED">
etc. |
libre : minuscules - majuscules
<body bgcolor="red">
ou
<body bgcolor="RED"> |
| Concerne |
HTML 4.01 |
XHTML 1.0 |
Marquage
de la valeur
du paramamètre
guillemets "
apostrophes '
choix libre...
Nous préférerons les guillemets plus courants
|
marquage lorsque le texte contient
a) un espace
b) un URL (lien)
c) une valeur hexadécimale (#FF0000)
<balise para="val
1">
<balise para="http://www.rsr.ch">
<balise para="#FF33CC"
Si non libre :
<body bgcolor=red leftmargin=20> |
marquage TOUJOURS !
<body bgcolor="red">
guillemets " ou apostrophes
' (libre)
Nous préférerons les guillemets plus courants
|
Espace
entre
paramètre = valeur |
libre
juste : <balise para =
"val 1">
mieux : <balise para="val
1">
habituel SANS espaces |
libre
juste : <balise para =
"val 1">
mieux : <balise para="val
1">
habituel SANS espaces |
| Concerne |
HTML 4.01 |
XHTML 1.0 |
Balise
avec contenu
Syntaxe |
balise d'ouverture (paramètres)
<balise para="val">
balise de fermeture (sans paramètres)
</balise>
Entre deux le contenu visible dans le navigateur
<balise para="val"> ...contenu... </balise> |
balise d'ouverture (paramètres)
<balise para="val">
balise de fermeture (sans paramètres)
</balise>
Entre deux le contenu visible dans le navigateur
<balise para="val"> ...contenu... </balise> |
Balise vide
sans contenu
Syntaxe |
comme une balise normale, mais SANS la balise
de fermeture :
<br>
<img src="img.gif" width="200">
SANS </balise> |
comme une balise normale, avec un
espace-slash "
/" de fermeture à la fin :
<br /> <hr
/> etc.
<img src="img.gif" width="200"
/>
ATTENTION: l'espace avant
le slash est nécessaire aux anciens navigateurs qui
ignore la balise si l'espace est omis !
(dans les normes XML l'espace est omis) |
Paramètre
sans valeur |
le paramètre reste tel quel
<hr width="100%" noshade> |
le paramètre ne peut rester sans valeur
<hr noshade="noshade"
/> |
Paramètre de balise
Name |
name s'utilise
comme tout autre paramètre
<img src="image.gif" name="mon_image"> |
name est remplacé par id
<img src="image.gif" id="mon_image"
/>
ATTENTION ! pour être
compatible avec les anciens navigateurs, garder les deux paramètres
:
<img src="image.gif" id="mon_image"
name="mon_image"
/> |
| |
ATTENTION
!
pour être compatible avec les anciens navigateurs, garder
les deux paramètres :
<img src="image.gif" id="mon_image"
name="mon_image"
/> |
Balise
Imbrication |
Première balise ouverte = dernière
fermée (exepté balise vide)
Juste :
<b><i>texte</i></b>
Faux :
<b><i>texte</b></i>
Imbrication non valide :
<b><i>texte</b>texte</i> |
Première balise ouverte = dernière
fermée (exepté balise vide)
Juste :
<b><i>texte</i></b>
Faux :
<b><i>texte</b></i>
Imbrication non valide :
<b><i>texte</b>texte</i> |
Lisibilité
Il est conseillé de décaler les balises affin qu'une
ouverture soit sur la même colonne que sa fermeture correspondante!
Remplacer les points "...." par des tabulations :
<!Doctype html public "-//w3c//dtd
html 3,2//en">
<!-commentaire:dtd html 3.2 ou 4.0 selon ce qu'on utilise dans
le code->
..<html>
......<head>
......... <title>titre de votre page</title>
......</head>
......<body>
..........<!-commentaire : insérez vos textes, tableaux,
images, formulaires, etc.->
......</body>
..</html>
L'alignement n'a pas d'importance si ce n'est d'améliorer
la lisibilité. Ceci est correct mais difficilement lisible
:
<!Doctype html public "-//w3c//dtd
html 3,2//en"><!-commentaire:dtd html 3.2 ou 4.0 selon
ce qu'on utilise dans le code-><html><head><title>titre
de votre page</title></head><body><!-commentaire
: insérez vos textes, tableaux, images, formulaires, etc.-></body></html>
|