Traduction
Tutoriel HTML - sommaire
Tutoriel HTML - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
J'évoque dans ce chapitre des balises qui existaient dans la version 4 de HTML mais qui sont peu connues et qui sont toujours valides dans la norme HTML 5, sinon ce chapitre ne présenterait aucun intérêt.
Balise double de type inline pour définir un mot.
Le texte correspondant à la définition apparait par défaut en italique.
Il s'agit d'une balise de type block pour afficher les coordonnées d'un individu / un organisme.
Je vous prie de trouver ci-joint mes coordonnées :
Charles DupontLe texte apparait par défaut en italique comme si il était à l'intérieur du conteneur I mais la balise ADDRESS a en plus une valeur sémantique importante.
Il s'agit d'un balise de type block qui est très pratique pour afficher du code.
Cette balise permet d'afficher le texte dans la page tel qu'il a été saisi via l'éditeur. Les espaces, les tabulations, les retours chariot
sont pris en compte.
Le code JS sera donc :
var cible = document.querySelector("#joueurs");
cible.ondrop = deposer;
cible.ondragenter = setdrop;
cible.ondragover = setdrop ;
cible.ondragstart = glisser ;
Les sauts de ligne saisis sont pris en compte par le navigateur !
Le texte balisé apparait par défaut avec une police à pas fixe telle courier.
Attention, même contenu dans la balise PRE, le code HTML sera quand même exécuté sauf si vous remplacez les chevrons par leur entité de caractère.
Retenez "Bloc entre quotes" ; balise utilisée pour des citations longues.
Il s'agit d'un balise de type "block".
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.
A utiliser pour des citations courtes. Balise de type "inline".
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.
Cette balise double peut être utilisée pour indiquer un titre, un auteur, une URL, etc.
Par défaut le texte balisé est affiché en italique mais avec une valeur sémantique importante. Il s'agit d'une balise de type "inline".
Au bonheur des dames est une oeuvre de Emile Zola.
ABBR (comme abréviation). A utiliser pour donner le sens d'un sigle, d'un acronyme.
La définition apparait lorsque le visiteur survole le sigle sous forme d'une infobulle.
L'attribut TITLE est obligatoire.
En principe aucun mot n'est coupé par le navigateur sauf si des césures sont forcées avec la balise orpheline WBR (Word BReak).
Le mot le plus long de la langue française : anticonstitu
Le mot anticonstitutionnellement est coupé ; ce qui évite qu'il ne déborde de la boîte.
Notez la balise orpheline WBR que j'ai insérée au milieu du mot pour provoquer une césure.
Tout le monde connait les listes ordonnées (OL : ordered list) et les listes à puces (UL : unordered list).
Beaucoup moins connues les listes de définitions ; elles peuvent être utiles pour produire un glossaire.
Le conteneur DL (Definition List) contient des balises doubles DT (Definition Term ou terme à définir) et des balises doubles DD (Definition Data).
CSS :
Code HTML :
Il n'est pas obligatoire (mais conseillé) de fermer les balises DT et DD.
La balise iframe permet d'insérer une page HTML dans une autre page.
Bien que visible à l'écran, cette page imbriquée bénéficie de son propre contexte d'exécution.
Ainsi, les styles et scripts de la page mère n'ont aucun effet sur la page fille et vice versa.
Dans ce site j'utilise très souvent un iframe pour afficher le rendu de la page d'exemple.
Lorque vous visitez le site googleMaps ce dernier vous propose le code HTML pour insérer la carte dans votre site.
Notre établissement est situé place Jean Bart à Dunkerque.
Voir carte ci-dessous.
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 ; }
Voici une problématique intéressante lorsque vous voulez réaliser un tutoriel sur HTML.
Pour afficher du code CSS ou JS sans qu'il soit exécuté, c'est très simple. Il suffit que le code
CSS ou JS ne soit pas contenu dans la balise double STYLE ou SCRIPT.
Pour le code HTML c'est un peu plus délicat. Je vous propose plusieurs solutions.
On peut lire dans certains tutos qu'il faut utiliser la balise PRE. C'est faux ou plutôt ce n'est pas suffisant.
Pour éviter que le code HTML soit exécuté, il faut remplacer dans le code à afficher, les chevrons par leur entité de caractère c'est à dire les
combinaisons : "<" et ">"
Le code HTML contenu dans cette balise est affiché sans être exécuté.
Cette balise est considérée comme obsolète par le W3C.
C'est quand même étonnant compte tenu de son côté très pratique ...
Maintenant elle est encore comprise des navigateurs même récents mais forcément une page contenant la balise XMP ne sera pas valide ...
Comme vous savez cette balise sert, dans le cadre d'un formulaire, à saisir un long texte. Mais si on lui ajoute l'attribut readonly elle permet
d'afficher fidèlemenent du code.
Le code à saisir est alors :
<textarea readonly> Syntaxe de la balise IMG est : <img src ="chemin relatif image" alt ="texte alternatif" /> </textarea>
Et le rendu est :
C'est la solution que j'ai retenu dans mon site pour afficher les extraits de code HTML et même les extraits de code CSS et JS même si ce n'est nécessaire.