Des balises méconnues et des sélecteurs CSS souvent ignorés
J'évoque dans ce chapitre des balises de la norme HTML4 mais qui sont peu connues et qui sont toujours valides dans la norme HTML 5.
Je traite aussi de sélecteurs CSS parfois ignorés.
Des balises mal connues
La balise DFN
Balise double de type inline pour définir un mot.
Exemple
- Il y a trois formes d'hermaphrodisme chez les poissons :
- protandre : individu nait mâle puis devient femelle
- protogyne : individu nait femelle puis devient mâle
- synchrone : individu dispose durant toute son existence des organes mâle et femelle
Le texte correspondant à la définition apparait par défaut en italique.
Le code HTML correspondant
La balise double ADDRESS
Il s'agit d'une balise de type block pour afficher les coordonnées d'un individu / un organisme.
Exemple
Je vous prie de trouver ci-joint mes coordonnées :
Charles Dupont55 rue des poilus
62100 Calais
dupont_charles@gmail.com
Le 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.
Le code HTML correspondant
La balise double PRE
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.
Exemple
Le code JS sera donc :
var cible = document.querySelector("#joueurs");
cible.ondrop = deposer;
cible.ondragenter = setdrop;
cible.ondragover = setdrop ;
cible.ondragstart = glisser ;
Le code HTML correspondant
<p>Le code JS sera donc :
<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é apparait par défaut avec la police à pas fixe telle courier.
La balise double BLOCKQUOTE
Utile pour des citations longues.
Balise de type "block".
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.
Le code HTML correspondant
La balise double Q
A utiliser pour des citations courtes. Balise de type "inline".
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
La balise CITE
Cette balise double peut être utilisée pour indiquer un titre, un auteur, une URL, etc.
Par défaut le texte balisé est en italique ; balise de type "inline".
Exemple
Au bonheur des dames est une oeuvre de Emile Zola.
Le code HTML correspondant
La balise ABBR
A utiliser pour donner le sens d'un sigle, d'un acronyme.
La définition du sigle apparait lorsque le visiteur le survole.
Exemple
- Quelques sigles célèbres :
- SNCF
- ENA
- PDG
Le code HTML correspondant
L'attribut TITLE est obligatoire et doit contenir la définition du sigle.
Lors du survol du sigle le contenu de l'attribut title apparait sous forme d'une infobulle.
Balise orpheline WBR
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).
Exemple
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.
Le code HTML
Notez la balise orpheline WBR que j'ai insérée au milieu du mot pour provoquer une césure.
Les listes de définitions
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 éléments DT (Definition Term) et des éléments DD (Definition Data).
Ces trois balises sont doubles !
Exemple : extrait d'un glossaire
- Antenne :
- Appendice sensoriel mobile, long et filiforme que certains invertébrés (Annélides, Crustacés, etc.) portent sur la tête.
- Antennule :
- Petite antenne courte chez les crustacés.
- Anthropique :
- Caractérise, en écologie la transformation d'un écosystème naturel, par l'effet de l'action humaine. L'effet anthropique peut être volontaire ou non.
Le code correspondant
CSS :
dl{border : 1px solid black; margin : 20px;padding : 10px;}
dt{text-decoration : underline; }
dd{margin-left : 10px; }
dt, dd {color : olive; }
Code HTML :
Il n'est pas obligatoire (mais conseillé) 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
Dans le cadre du responsive design j'ai modifié le code proposé par Google maps.
J'ai remplacé "width ="600" par width ="100%".
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
On peut lire dans certains tutos qu'il faut utiliser la balise PRE. C'est faux ou plutôt c'est pas suffisant. En fait la balise PRE se contente
d'afficher le texte avec une police à chasse fixe et les sauts de ligne dans le texte sont respectés.
Prenons un exemple !
Le code correspondant
Le rendu
La syntaxe de la balise IMG (pour insérer une image) est :
Le code HTML est exécuté quand même et comme le navigateur ne trouve pas l'image il se contente d'afficher la valeur de l'attribut alt.
Solution
Pour éviter que le code HTML soit interprété, il faut remplacer dans le code les chevrons par leur entité de caractère !
Le code HTLM correspondant :
Le rendu :
Syntaxe de la balise image : <img src ="chemin relatif image" alt ="texte alternatif" />
Le saut de ligne est appliqué ; l'instruction est simplement affichée.
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 côté très pratique ...
Maintenant elle est encore comprise des navigateurs même récents.
Solution ter
Utiliser la balise TEXTAREA
La syntaxe de la balise IMG est :
Code correspondant:
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 est un élément "inline" qu'il faut transformer en boite (display :block) pour pouvoir appliquer margin :auto.
Des sélecteurs peu connus
Une règle de style commence toujours par un sélecteur précisant les éléments de la page qui seront concernés par cette règle de style.
Oui je l'admet cett page est très moche mais l'objectif est ailleurs : présenter des sélecteurs mal connus.
Notez que le texte de ce paragraphe est en gras et en "olive" et que le texte de la première ligne est en italique
Exemple
Affichez une page web avec des sélecteurs confidentiels ...Je suis d'accord avec vous cette page est très moche.
Mais l'important n'est pas là. Ce qui compte c'est que vous découvriez des sélecteurs un peu plus complexes.
Vous connaissez tous le sélecteur hiérarchique (ul li par exemple), le sélecteur de classe (.important par exemple),
le sélecteur d'identifiant (#corps par exemple) mais il y a des sélecteurs moins connus.
Connaissez vous le sélecteur d'attribut, le sélecteur d'enfant, le sélecteur adjacent, le sélecteur de première lettre, le
sélecteur de première ligne ?
Observations de la page
La première lettre de chaque paragraphe est une lettrine (grande taille).
La première ligne de chaque paragraphe est en italique.
Certains paragraphes sont en gras.
La couleur est aussi variable : rouge ou olive.
Les images ont des formatages différents : bordure verte ou ombrage ou transparence.
Le premier item de liste est en rouge mais les autres sont en vert.
Le code correspondant
Code HTML (extrait)
Le code CSS de cette page
p {text-align: justify ; color : red ; margin :5px ; }
p:first-letter {font-size : 200% ; }
p:first-line {font-style : italic ; }
body > p {color : olive ; }
h3 + p {font-weight : bold ; }
img[title] {border : 10px solid green ; }
img[alt] {box-shadow : 10px 10px 10px gray ; }
img[alt = censure]{opacity :0.1 ; }
div {border : 1px solid red ; }
li {color : red}
li+li {color : green; }
- Dans la feuille de style ci-dessus vous avez quelques exemples de sélecteurs souvent méconnus et qui pourtant peuvent être très pratiques :
- p:first-letter : sélecteur de première lettre ; cible ici la première lettre de chaque balise P ;
donc la première lettre du paragraphe sera une lettrine (grande taille, police différente) - p:first-line : sélecteur de première ligne ; cible ici la première ligne de chaque balise P ;
donc la première ligne de chaque paragraphe sera en italique - body > p : sélecteur d'enfant ; cible les balises P "descendants directs" de BODY mais pas ceux contenus dans DIV ("descendants indirects") ;
donc seuls les paragraphes "enfants" de BODY seront en "olive", les autres seront en "gray" ! - h3 + p : sélecteur adjacent ; cible l'élément P qui suit immédiatement H3 ;
donc seul le premier paragraphe qui suit une balise H1 sera en gras ! - img[title] : sélecteur d'attribut ; cible uniquement les éléments IMG ayant l'attribut title ;
donc les images ayant cet attribut auront une bordure rouge - img[alt] : autre sélecteur d'attribut ; cible uniquement les images ayant l'attribut alt ;
donc les images ayant cet attribut seront ombrées - img[alt=censure] : autre sélecteur d'attribut ; cible uniquement les images ayant l'attribut alt avec la valeur censure !
- li+li {color : green ; } : sélecteur adjacent ; Les items de liste sont en vert à partir du deuxième item (un LI suivant un LI)