19-02-2015

Balises et attributs

La plupart des balises admettent des attributs, suivant la syntaxe suivante :

La valeur de l’attribut est écrite entre guillemets (on peut mettre ou pas les guillements si l’attribut est un nombre mais c’est déconseillé).

Exemples :

<hr align="left" size=20 width=100> qui précise l’alignement du trait horizontal, son épaisseur (en pixels) et sa largeur (en pixels)
<hr align="center" size=20 width=100>
<font size=1 color="red" face="arial"> qui précise la taille, la couleur et la police des caractères compris entre les balises ouvrante et fermante <font> et </font>
<p align="left"> qui précise l’alignement du texte du paragraphe déterminée par la balise <p>
<p align="center"> ou <p align="right">
<h1 align="left"> qui précise l’alignement du texte d’une en-tête ; les mêmes attributs s’appliquent aussi aux en-têtes, <h2>, <h3>, ..., <h6>
<a href="URL" target="_blank">texte cliquable</a> permet d’ouvrir le document appelé (et localisé à l’URL donné par l’attribut href) dans une nouvelle fenêtre (c’est le rôle de l’attribut target de préciser comment et où doit s’ouvrir le lien, la valeur "_blank" commande l’ouverture d’une nouvelle fenêtre)

Remarque : cet attribut est sujet à critiques ; il n’est pas toujours fondé de l’utiliser pour forcer l’ouverture d’une page dans une nouvelle fenêtre, on peut considérer que c’est l’utilisateur qui décidera :

soit en faisant un clic simple sur le lien pour ouvrir dans la même fenêtre ;
soit en faisant un clic-droit puis "ouvrir dans une nouvelle fenêtre".

Etiquette de balise

Une étiquette est un attribut particulier (nommé id) que l’on ajoute à une balise pour la repérer dans la page html :

<p id ="etiquette">.....</p>.

On nomme ainsi un emplacement précis d’un document HTML. Un lien peut alors envoyer directement à cet emplacement par :

<a href="URL du document.html#etiquette">texte cliquable</a>

Dans la pratique : supposons que dans une page "index.html" on ait le lien :

<a href="ma_page2.html" > aller page 2</a>

On veut, par ce lien, renvoyer le lecteur à un endroit précis de la page "ma_page2.html" ; si à l’endroit choisi se trouve une balise, h2 par exemple, il faut marquer cet endroit dans ma_page2.html : <h2 id="ici">.....</h2> puis changer le lien dans ’index.html" par : <a href="ma_page2.html#ici">aller page 2</a>.

Balise ouvrante, balise fermante et attributs

Les attributs associés à une balise ne sont précisés qu’au niveau de la balise ouvrante. Comme dans l’exemple :

<p align="right">
<font color="red"> Le début de la phrase est en rouge</font>
et la suite est en noir. Le paragraphe est, lui, aligné à droite.
</p>

Balises et mises en forme

Par défaut chaque navigateur affecte une mise en forme à chaque balise (police, taille, ...) ; on peut modifier cette mise en forme pour fabriquer des pages plus esthétiques. Vous avez vu ci-dessus quelques exemples simplistes...

Pendant longtemps la technique de mise en forme a été de rajouter dans le code html des balises HTML spécifiques, la balise FONT en est le meilleur exemple :

<p><font color="00FF00">bonjour ce texte est de couleur ? </font></p> (testez vous-même).

Une technique supplémentaire était de rajouter des attributs de mise en forme dans la balise elle-même :

<p align="right"> ce paragraphe est cadré à droite </p>

Aujourd’hui dans la conception des pages html on souhaite séparer le plus possible les indications de balisage (titre, sous titre, liste, ...) des indications de mise en forme (en gros, rouge, à droite, ...). On utilise principalement des techniques dites de "feuille de style CSS" : toutes les indications de mise en forme sont regroupées dans un document à part (ou bien dans l’en-tête du document HTML) ; ces techniques sont enseignées dans le cours Expert Com.

On peut cependant continuer à mettre des indications de mise en forme dans les balises HTML mais avec une syntaxe légérement différente ; on considère maintenant que la balise font et les attributs comme align doivent être évités ; reprenons les deux exemples ci-dessus, il vaut mieux écrire :

Exemple 1 : <p style="color:#00FF00 ; " >bonjour ce texte ...</p>
Exemple 2 : <p style="text-align:right ; " > ce paragraphe ...</p>

On peut en plus grouper les indications de mise en forme :

<p style="color:#00FF00 ; text-align:right ;"> paragraphe en couleur et aligné à droite</p>

Lien hypertexte et images

On peut permettre à l’utilisateur de cliquer sur une image. Essayez-le ! Cliquez sur le logo du C2i ci-dessous pour accéder à un site sur le certificat informatique. Examinez le code nécessaire pour produire cet effet :

<a href="https://c2i.education.fr/" target="_blank" ><img src="c2i.jpg"></a>

On peut aussi utiliser un lien pour donner accès à une grande image à partir d’une vignette. La balise de lien doit alors pointer sur l’image en question. Essayez sur l’image ci-dessous !

Examinez le code nécessaire pour produire l’effet :

<a href="diplome.jpg" target="_blank"><img src="diplome.jpg" width="210" height="149"></a>