Quelques balises HTML4 peu connues

La balise double DFN

Balise de type inline pour définir un mot.

Exemple

Le texte correspondant à la définition apparaît par défaut en italique.

Le code HTML correspondant

<ul>Il y a trois formes d'hermaphrodisme chez les poissons : <li>protandre : <dfn>individu naît mâle puis devient femelle</dfn> <li>protogyne : <dfn>individu naît femelle puis devient mâle</dfn> <li>synchrone : <dfn>individu dispose durant toute son existence des organes mâle et femelle</dfn> </ul>

La balise double ADDRESS

Balise de type block pour afficher les coordonnées d'une personne.

Exemple

Je vous prie de trouver ci-joint mes coordonnées :

Charles Dupont
55 rue des poilus
62100 Calais
dupont_charles@gmail.com

Le texte apparaît par défaut en italique.

Le code HTML correspondant

<address> Charles Dupont <br>55 rue des poilus <br>62100 Calais <br>dupont_charles@gmail.com </address>

La balise double PRE

Balise de type block. Très pratique pour afficher du code.

Exemple

Quelques lignes de code Javascript :

	var cible = document.querySelector("#joueurs");
	cible.ondrop = deposer; 
	cible.ondragenter = setdrop; 
	cible.ondragover = setdrop ; 
	cible.ondragstart = glisser ; 

Le code HTML

<pre> var cible = document.querySelector("#joueurs"); cible.ondrop = deposer; cible.ondragenter = setdrop; cible.ondragover = setdrop ; cible.ondragstart = glisser ; </pre>

Les sauts de ligne saisis sont pris en compte par le navigateur !
Le texte balisé apparaît par défaut avec la police courier.

La balise double BLOCKQUOTE

Utile pour des citations longues.

Exemple

Extrait de l'appel du 18 juin 1940 par le général de Gaulle :

Moi, général de Gaulle, actuellement à Londres, j'invite les officiers et les soldats français qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, avec leurs armes ou sans leurs armes, j'invite les ingénieurs et les ouvriers spécialisés des industries d'armement qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, à se mettre en rapport avec moi.

Il s'agit d'une balise block (saut de ligne). Le texte apparaît par défaut avec un retrait à gauche.
Ici ce n'est pas le cas car dans la feuille de style j'ai supprimé les marges par défaut : * {margin :0px ; }

Le code HTML correspondant

<blockquote> Moi, général de Gaulle, actuellement à Londres, j'invite les officiers et les soldats français qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, avec leurs armes ou sans leurs armes, j'invite les ingénieurs et les ouvriers spécialisés des industries d'armement qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, à se mettre en rapport avec moi. </blockquote>

La balise double Q

A utiliser pour des citations courtes.

Exemple

Le grand philosophe Descartes a écrit : Tout ce qui se conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.

Il s'agit d'une balise inline.Le texte balisé est encadré de guillemets.

Le code HTML correspondant

<p>Le grand philosophe Descartes a écrit : <q>Tout ce qui se conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.</q>

Balise orpheline WBR

En principe aucun mot n'est coupé par le navigateur sauf si des césures sont autorisées.

Exemple

Le mot le plus long de la langue française : anticonstitutionnellement

Le mot anticonstitutionnellement est coupé ; ce qui évite qu'il ne déborde de la boîte.

Le code HTML

<div style ="background : orange ; width : 150px;"> <p>Le mot le plus long de la langue française : <b>anticonstitu<wbr>tionnellement</b> </div>

Les listes de définitions

Beaucoup moins connues que les listes à puces et ordonnées elles peuvent être utiles pour afficher dans une page web un dialogue.

Exemple

Le client :
Quand le train pour Caen ?
L'employé SNCF :
Je ne peux pas vous dire quand si vous ne me dites pas pour où !!!

Bon affichage du dialogue (absurde) comme dans un livre.

Le code HTML

<dl> <dt>Le client : </dt> <dd>Quand le train pour Caen ?</dd> <dt>L'employé SNCF : <dd>Je ne peux pas vous dire Quand si vous ne me dites pas pour où !!! </dl>

Le conteneur DL (definition list) contient des balises doubles DT (dialog talker) et des balises doubles DD (dialog discourse).
Il n'est pas obligatoire de fermer les balises DT et DD.

La balise iframe

La balise iframe permet d'insérer une page HTML dans une autre page web.

Lorque vous visitez le site googleMaps ce dernier vous propose le code HTML pour insérer la carte dans votre site.

Exemple

Notre établissement est situé place Jean Bart à Dunkerque.
Voir carte ci-dessous.

Le code correspondant

<p>Notre établissement est situé place Jean Bart à Dunkerque. <br>Voir carte ci-dessous. <iframe src="https://www.google.com/maps/embed?pb=... width="600" height="450" frameborder="0" style="border:0" allowfullscreen> </iframe>

Attention la balise iframe est nativement de type inline. Donc pour que la carte soit bien centrée dans la page il faut ajouter dans la feuille de style la règle ci-dessous :

iframe {display : block ; margin :auto ; }

Comment afficher du code HTML (sans qu'il soit interprété) ?

Voici une problèmatique intéressante lorsque vous voulez réaliser un tuto HTML !

Utiliser le conteneur PRE

	

La syntaxe de la balise IMG (pour insérer une image) est : texte alternatif

Le code correspondant

<pre> <p>La syntaxe de la balise image est : <img src ="chemin relatif image" alt ="texte alternatif" /> </pre>

Le code HTML est exécuté quand même et comme le navigateur ne trouve pas l'image il affiche le contenu de l'attribut alt.

Correction

Pour éviter que le code HTML soit interprété, il faut remplacer dans le code les chevrons par leur entité de caractère !

	

Syntaxe de la balise image : <img src ="chemin relatif image" alt ="texte alternatif" />

Le code HTLM correspondant :

<pre> <p>Syntaxe de la balise image : &lt;img src ="chemin relatif image" alt ="texte alternatif" /&gt; </pre>

Autre solution

Utiliser la balise XMP !
Le code HTML & CSS & JavaScript contenu dans cette balise est affiché mais pas exécuté.

J'utilise beaucoup le conteneur XMP mais il y a un problème. Cette balise est considérée comme obsolète par le W3C.
C'est quand même étonnant compte tenu de son aspect très pratique ...
Maintenant elle est comprise des navigateurs même récents.

Ou encore

Utiliser la balise TEXTAREA

La syntaxe de la balise IMG est :

Code correspondant:

<textarea readonly> <img src ="chemin relatif image" alt ="texte alternatif" /> </textarea>

Attention par défaut la zone de texte multi-lignes est un éditable. Il faut donc rajouter l'attribut readonly.

Il faut aussi rajouter une règle de style pour un affichage correct :
textarea {display : block ;width : 80% ; height : auto ; margin : auto ; }
textarea est un élément "inline" qu'il faut transformer en boîte (display :block) pour appliquer margin :auto.

Retour menu