Traduction
Tutoriel HTML - sommaire
Tutoriel HTML5 - 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 déjà présentes dans la version 4 de HTML et qui sont toujours valides dans la norme HTML5.
Ce sont aussi des balises peu connues qui peuvent cependant s'avérer très utiles.
Beaucoup de ces balises sont des balises doubles c'est à dire que la balise fermante est obligatoire.
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 double 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'une balise double 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. En effet les espaces, les tabulations, les retours chariot
sont pris en compte par le navigateur.
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.
Le texte balisé apparait par défaut avec une police à pas fixe.
Extrait de la feuille de style : pre {... ; background : lavender; ...}
Attention, même contenu dans la balise PRE, le code HTML sera quand même exécuté ...
Voir dernière section de ce chapitre pour connaitre la solution.
Pour que les espaces et retours à la ligne saisis soient pris en compte, il existe une solution alternative en CSS : appliquer à un élément bloc la propriété white-space : pre
A utiliser pour des citations courtes ; balise double de type "inline". Le texte balisé est encadré de guillemets.
Le philosophe Boileau a écrit :
Tout ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément.
Retenez "Bloc entre quotes" ; balise utilisée pour des citations longues.
Il s'agit d'un balise double de type "block".
Cette balise dispose de l'attribut cite dont la valeur indique la source de la citation.
Cette balise a davantage une valeur sémantique (utile pour le référencement naturel) et à la différente de Q, elle ne
propose nativement aucune mise en forme ...
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."
Extrait de la feuille de style en lien avec la page :
...
blockquote {margin-left : 20px ; margin-right : 20px; }
...
La citation encadrée par l'élément blockquote sera en retrait tant à gauche qu'à droite grâce à cette règle de style.
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.
Le sens du sigle sous forme d'une infobulle lorsque vous survolez celui-ci.
L'attribut TITLE est obligatoire.
En principe aucun mot n'est coupé par le navigateur sauf si des césures sont forcées via la balise WBR (Word BReak). Il s'agit cette fois d'une balise orpheline (pas de balise fermante).
Le mot le plus long de la langue française : anticonstitutionnellement
Le mot déborde de la boite ; ce qui n'est pas joli.
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 l'emploi de la balise WBR inséré au milieu d'un mot.
Pour provoquer une césure au sein d'un mot il existe une solution alternative en CSS : appliquer à un élément bloc
la propriété word-break : break-all (césure n'importe où dans le mot) Ou hyphens : auto (coupure entre deux syllabes).
Pour en savoir plus
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 intéressantes pour produire un glossaire.
Chaque conteneur DL (Definition List) contient les balises DT (Definition Term) et 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. Il s'agit d'une balise double.
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 mon site j'utilise très souvent un iframe pour afficher le rendu d'une page tenant lieu d'exemple.
Lorque vous visitez le site googleMaps ce dernier vous propose le code HTML à insérer dans votre page pour faire apparaitre cette carte.
Notre établissement est situé place Jean Bart à Dunkerque.
Voir carte ci-dessous.
La valeur de l'attribut src de la balise IFRAME est une chaine très très longue ; je n'ai indiqué qu'un extrait.
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 : 10px auto ; }
Lorsque vous imbriquez une image dans un élément A, l'image pointe un seul lien.
Ce que nous voulons c'est que selon l'emplacement cliqué dans l'image le lien activé est différent.
Il faut alors utiliser les balises AREA dans le conteneur MAP en lien avec un élément IMG.
Notez que l'élémént IMG fait 300 par 175 et dispose de l'attribut usemap ;
par ailleurs la balise MAP a un seul attribut : name dont la valeur doit correspondre à celle utilisée pour l'attribut usemap de IMG.
Ici je fixe la valeur de ces deux attributs à "logo".
Dans l'exemple on découpe l'image en trois zones cliquables donc l'élément MAP contient trois fois la balise AREA.
Comme ces zones cliquables sont des rectangles, l'attribut shape de AREA vaut "rect" ; il faut aussi préciser dans l'attribut coords
les coordonnées X & Y des coins haut gauche et bas droit du rectangle ; dans href la cible et dans alt le texte alternatif à l'image.
Voici une problématique intéressante lorsque vous voulez réaliser un tuto HTML avec des extraits de code qui doivent simplement s'afficher (mais surtout ne pas être interprétés par le navigateur).
Pour afficher du code CSS ou JS sans qu'il soit exécuté, c'est très simple. Il suffit que le code
CSS soit en dehors du conteneur STYLE et le code JS en dehors du conteneur SCRIPT.
Mais pour le code HTML c'est un peu plus délicat ...
Voyons ci-dessous les différents solutions pour simplement afficher du HTML
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 HTML les chevrons par leur entité de caractère c'est à dire les
combinaisons : "lt" & "gt" précédées de "&" et suivies de ";". Tous les caractères doivent être collés.
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.
<textarea readonly> Syntaxe de la balise IMG est : <img src ="chemin relatif image" alt ="texte alternatif" /> </textarea>
C'est la solution que j'ai retenu dans mon site.