Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes
Sauf exception, les balises ont 2 formes :
Soit elles encadrent un texte, des images, au tout autre contenu, dans se cas,
les balises doivent être ouvertes en plaçant le nom de la balise
en un signe inférieur ( < ) et un signe supérieur ( > )
puis fermée en rajoutant un slash ( / ) devant le nom de la balise.
Par exemple, la balise p qui permet de délimiter un paragraphe est utilisée
de la manière suivante :
<p> texte de paragraphe
</p>
<p> : balise d'ouverture.
</p> : balise de fin de paragraphe.
texte de paragraphe : éléments définit
comme étant un paragraphe, car se trouvant entre la balise d'ouverture
et de fermeture de paragraphe.
L'autre forme de balise est utilisée pour des éléments
ponctuels qui n'encadrent aucun objet. Par exemple, une barre de séparation
horizontale, un retour à la ligne, ou une image se trouvent à
un endroit du document, et n'encadrent pas d'autres choses. Dans ce cas, les
balises doivent être fermées dans la balise d'ouverture en insérant
un slash ( / ) avant de fermer la balise.
Par exemple la balise br qui permet de faire un retour à la ligne s'écrit
de la manière suivante :
<br /> .
<br : ouverture de la balise.
/> : fermeture de la balise.
Certaines balises permettent d'ajouter des propriétés spéciales aux éléments délimités par les balises, ou même pour les éléments définis par les balises. Ces propriétés sont appelées attributs et prennent certaines valeurs.
Les attributs sont toujours situés dans les balises d'ouverture après le nom de la balise, et sont séparés par des espaces, les attributs sont suivis du signe = puis des valeurs qui sont délimitées par des guillemets " . La valeur ne doit pas faire plus de 1024 caractères.
Par exemple un paragraphe peut être centré, grâce à
l'attribut align et la valeur center . La balise et le paragraphe s'écriront
alors de la manière suivante:
<p align="center"
> Texte du paragraphe </p>
<p> </p> : balise d'ouverture et balise
de fermeture.
align : attribut d'alignement.
="center" : valeur de l'attribut d'alignement
(ici : center pour centrer le texte).
Résultat:
Texte du paragraphe
Pour les balises ponctuelles, la même règle s'applique. Par exemple,
la balise hr qui permet d'insérer une ligne horizontale dans le document,
possède l'attribut width qui permet de définir la largeur de la
balise:
<hr width="50%"
/>
<hr /> : balise d'ouverture et de fermeture
width : attribut de largeur.
50% : valeur de l'attribut de largeur (ici : 50%
permet de définira la largeur de la ligne à 50% de la taille de
l'écran).
Si l'on veux à la fois définir la largeur de la ligne, et la hauteur,
il suffit de mettre les 2 attributs correspondants séparés par
un espaces.
Ainsi, si l'on veux une ligne de 50 % de large, et d'une hauteur de 5 pixels,
il faut écrire:
<hr width="50%"
size="5px" />
résultat:
<hr /> balise d'ouverture et de fermeture
width="50%" : attribut de largeur définit
à 50% de la largeur de la fenêtre.
size="5px" : attribut de largeur définit
à 5 pixels.
Un document pouvant avoir une très grande taille, si vous avez besoin
de retravailler le code, il peut être très difficile de situer
l'endroit que vous devez retravailler.
Il est donc utile (en plus d'aérer le document) de commenter le document.
C'est possible en utilisant les balises suivantes:
<!-- permet de définir le début
d'un commentaire
--> permet de clore un commentaire.
Tout ce qui se trouvera entre ces 2 balises ne sera pas pris en compte par le
butineur, et n'apparaîtra donc pas lors de l'affichage de la page. Le
commentaire peut s'étendre sur plusieurs ligne.
Exemple:
Si j'écrit le commentaire suivant, il n'apparaîtra pas dans le
document HTML.
<!-- Fin de la section sur la balise de commentaire
-->
En HTML 4, et en prévisions des normes de codage en XHTML, les balises doivent être écrites en minuscule. Ainsi, il est préférable d'écrire <p> paragraphe </p> plutôt que <P> paragraphe </P>.
Tout attribut doit avoir une valeur. Il existe certains attributs qui ne peuvent prendre qu'une seule valeur. Dans les versions précédentes du HTML, ces attributs ne prenaient donc aucune valeur. En HTML 4, tous les attributs inscrits dans une balise doivent prendre une valeur. En générale, la valeur est la même que le nom de l'attribut.
Par exemple, l'attribut noshade de la balise hr permet de rendre "pleine"
la ligne horizontale. Cet attribut n'a qu'une seule valeur. S'il n'est pas déclaré,
la ligne sera creuse. Cependant, étant donné qu'il est déclaré,
il doit prendre une valeur. Cette valeur sera noshade.
ligne de base
<hr width="50%" size="5px" />
résultat:
<hr width="50%" height="5px" noshade="noshade"
/>
noshade : attribut de remplissage de la ligne.
="noshade" : valeur de l'attribut de
remplissage de la ligne.
résultat:
Les balises peuvent s'imbriquer (par exemple, pour mettre en relief un mot dans un paragraphe). Il faut cependant respecter une Règle: La première balise ouverte est toujours la dernière balise fermée. C'est à dire que si une balise Y est ouverte après une balise X, la balise Y doit être refermée avant la balise X.
| Bonne syntaxe | Mauvaise syntaxe |
|---|---|
| <p> ceci est un <b>texte en gras et <i>en italique</i> </b> .</p> | <p> ceci est un <b>texte en gras et <i>en italique </b> </i>.</p> |
|
|
De nombreuses personnes sont daltoniennes (environ 6% de la population), ces
personnes ne distinguent pas certaines couleurs. Evitez donc, par exemple, de
mettre un fond vert et d'écrire en rouge (et inversement). De plus, il
existe plusieurs types de daltonisme, et chaque type altère différemment
la perception des couleurs. Le lien suivant vous donne quelques informations
supplémentaire sur la perception des couleurs
par les daltoniens. Il est donc préférable d'utiliser des
comparaisons n'utilisant pas de couleur lorsque cela est possible, ou au moins
d'utiliser un système textuel en complément (cf les exemples
de la section tableau).
L'un des intérêt des feuilles de style en cascade
est de permettre à l'utilisateur de choisir ses préférences
dans certain butineurs, et ainsi de supprimer les confusions possibles entre
une couleur de fond, et une couleur de texte.
Vous aurez sans doute remarqué que pour vous décrire les balises, il faut utiliser les caractères inférieur et supérieur. Cependant en HTML ces deux caractères permettent de détecter le début d'une balise et la fin de celle-ci. Pour les afficher de manière à ce qu'ils ne soient pas détectés comme indiquant le début, ou la fin d'une balise, il faut utiliser des codes spéciaux qui sont automatiquement remplacés par le butineur avec un caractère correspondant. Ces "codes" spéciaux appelés entité caractère commençant par le signe & et se terminent par un ; .
Ainsi si j'écrit < le butineur affichera
un < .
Si j'écrit un > le butineur affiche
un > .
Cependant, pour vous indiquer la correspondance, il faut que le butineur affiche
le code. Pour éviter qu'il ne transforme l'entité caractère
< en < , il faut coder en HTML l'affichage du & . ainsi la suite
n'est pas reconnue comme un code.
Le & s'obtient en utilisant l'entité caractère & .
Et pour afficher < le code HTML est en réalité
&lt; .
Pour assurer l'affichage correcte des textes avec accent, il est fortement conseillé
de remplacer tous les caractères accentués par leur entité
caractère correspondante.
La liste des entités caractères se situe dans l'annexe entité caractère.
Même si certains butineurs peuvent afficher du texte sans qu'aucune balise ne soit utilisée, il existe en réalité 4 balise qui sont obligatoire en HTML.
Cette première balise doit être placée au tout début d'un document HTML. Elle doit préciser la version du langage utilisé pour le codage, l'adresse de la définition de ce langage, la langue utilisée pour coder le document, et le type de document HTML.
Pour simplifier les choses, on peux considérer que les documents doivent
utiliser l'une des 3 balises suivante:
Lorsque le document n'utilise pas que des feuilles de style, (la majorité
des documents actuels), la balise Transitional doit être utilisée:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Lorsque votre document utilise uniquement des feuilles de style pour mettre
en forme le document, c'est la balise Strict qui doit être utilisée
(seuls les butineurs les plus récents peuvent afficher ces pages sans
problème).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
Enfin, lorsque votre document utilise des cadres (cf. section cadres), c'est
la balise Frameset qui doit être utilisée:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">
Cette balise permet d'identifier un document comme étant un document HTML. Elle doit être placée en début de document, immédiatement après la balise doctype. Elle se ferme à la fin du document (c'est donc, la dernière balise que doit contenir un document).
Cette balise se place juste après la balise <html> elle permet
de définir un certain nombre de choses qui n'apparaîtrons généralement
pas dans le navigateur, comme la description de feuilles de styles, la description
de scripts, la description du document...
Cette balise doit être fermée avant la balise d'ouverture du corps
du document (balise <body> ).
Placée immédiatement après la fermeture de la balise <head>
( </head> ), elle permet de déclarer que ce qui suit est le corps
du document HTML, c'est à dire tout ce qui apparaîtra d'une manière
ou d'une autre dans le butineur.
Cette balise comporte certains attributs affectant l'ensemble du document. Ces
attributs sont définit dans la section entête et corps.
En résumé le plus petit document HTML devrais se présenter
de la manière suivante:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionnal//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitionnal.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
Dans les pages suivantes, les valeurs des attributs seront expliqués
à chaque fois. Les attributs et valeurs seront notés de la manière
suivante:
<balise attribut="..."> </balise>
Ou bien, lorsque les attributs seront listés:
attribut="..."
Cependant, de nombreux attributs peuvent prendre des valeurs communes, ces valeurs seront notées d'une manière particulière.
Les attributs de taille peuvent souvent prendre plusieurs valeurs différents, ces valeurs peuvent être une dimension en pourcentage de la taille de la fenêtre du butineur, sans valeur (généralement équivalent d'une taille en pixels), ou accompagné d'une unité de mesure, en millimètre (mm), centimètres (cm), ou pixels (px). Les valeurs possibles pouvant varier suivant les attributs, elles seront données à chaque fois que cela sera nécessaire.
Certains attributs prennent des URL (Uniform Ressource Locator), c'est à
dire des adresses Internet. Dans ce cas, la valeur sera notée "URL",
l'adresse peut utiliser un relatif c'est à dire par rapport à
l'emplacement de la page actuelle, ou par rapport à la valeur de l'attribut
<base /> (cf. section liens), ou bien un chemin absolue (c'est à
dire l'adresse Internet complète de la cible).
Exemple de chemin absolue: index.html
Exemple de chemin relatif: http://www.iu-vannes.fr
Un certain nombre d'attribut permet de définir des couleurs. Ces valeurs sont généralement définies en utilisant la signe # suivit du code hexadécimal de la couleur. 3 densités de couleur sont définies, tout d'abord celle du Rouge, puis du Vert, et enfin du Bleu. Ces densités vont de 00 à ff. Un code de couleur hexadécimal est donc constitué de 3 densités de couleur allant de 00 à ff. Une valeur d'attribut définissant du blanc sera donc "#ffffff", et le code du noir sera "#000000". Il est cependant possible d'utiliser d'autres notations comme un code décimal (chaque couleur allant de 0 à 255), ou bien le nom de certaines couleurs dont le tableau des couleurs situé en annexe donne l'équivalence en hexadécimal.
Exemple de l'attribut bgcolor qui permet de définir la couleur de fond
de cette page HTML:
<html bgcolor="#afd3f5">
</html>
Certains attributs, servant généralement à décrire l'élément définit, ou encadré par la balise, peuvent prendre n'importe quel texte. Dans ce cas, la valeur de l'attribut sera noté "texte".
Par exemple, la balise img qui permet d'intégrer des images peut prendre
l'attribut alt qui permet de donner un titre à l'image. Ce titre s'affiche
à la place de l'image dans les navigateurs non graphique, ou quand l'image
ne peut être chargée, ou encore parfois quand la souris passe sur
l'image.
<img src="monimage.gif" alt="titre
de mon image" />
<img src="monimage.gif" /> : balise
attribut, et valeur permettant d'insérer l'image monimage.gif .
alt : attribut permettant de donner un texte alternatif
à l'image.
="titre de mon image" : valeur alternative
de l'image, si l'image n'est pas affichée, le texte titre de mon image
la remplacera.
Une balise, doit être ouverte puis fermée et doit être écrite
en minuscule.
Exemple:
<balise> </balise> ou <balise /> .
Les attributs sont situés dans la balise d'ouverture et doivent toujours
avoir une valeur. L'attribut est séparé de la valeur par le signe
= et la valeur doit toujours être entre " .
Exemple:
<balise attribut="valeur"> <balise />
<balise attribut="valeur" />
les couples attribut-valeur sont séparés entre eux par un espace.
Les balises ne doivent pas de chevaucher. toute balise Y ouverte après une balise X, doit être refermée avant la balise X
Les commentaires se font entre les balises <!-- et --> .
<!-- commentaire -->
Utilisez des exemples textuels plutôt que des exemples utilisant des couleurs, et faites attention à votre choix de couleur de fond et de texte afin que le texte soit lisible par les daltoniens. cf couleurs et daltonismes
Les caractères spéciaux doivent être remplacés par des entités caractère.
4 Balises sont obligatoire:
la balise DOCTYPE qui doit prendre l'une des 3 formes suivantes:
La balise <html> qui doit suivre la balise DOCTYPE, et sa balise de fermeture </html> qui doit clore le document.
La balise <head> qui doit suivre la balise <html> et se refermer avant la balise <body>.
La balise <body> qui doit suivre la balise </head> et se clore après le contenu du document, juste avant la balise html de clôture </html> .
Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes