Accueil
Mes tutoriels sur la programmation

Tutoriel HTML - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

HTML5 - encore de nouvelles balise fort utiles

Pour info la feuille de style de la page

	div {height : 100px ; overflow : hidden; border : 1px solid red; }
	div:hover {height : auto; }
	picture {width : 90% ; margin : 10px auto 10px auto; }
	img{width : 80%; display : block ; margin :auto; }

Je ne modifie par la mise en forme par défaut de la balise TIME.

La balise TIME

Une balise sémantique

Avant la norme HTML5 il n'y avait aucune balise pour contenir une date, une heure ou une durée.

Cette balise est très intéressante pour le référencement naturel d'une page ; Le robot d'indexation retrouve facilement une date.

Exemple

Le concert aura lieu le au parc des Princes à Paris.
Ce spectacle débutera à et il durera au moins .

Le code HTML correspondant

<p>Le concert aura lieu le <time datetime="2020-02-07">7 février</time> au parc des Princes à Paris. <br>Ce spectacle débutera à <time datetime="20:00">20 heures</time> et il durera au moins <time datetime="PT2H30M">2 heures et 30 minutes</time>.</p>

L'attribut "datetime"

Remarquez que le texte contenu dans la balise TIME apparait par défaut en italique.

Notez à chaque fois l'attribut datetime dont la valeur doit respecteur un certain format pour préciser aux robots s'il s'agit d'une date ou d'une heure voire d'une durée de temps :

Masquer une partie du texte

Pour éviter que la page soit trop longue une partie du contenu peut ne pas être affichée lors du chargement de la page.

La solution CSS

Vous connaissez, je pense, la solution CSS : par défaut la boite contenant le paragraphe a une petite hauteur ; l'éventuel surplus de texte est masqué. Mais si survol de la boite la hauteur de celle-ci devient "auto" donc tout le contenu s'affiche.

Le code type

CSS :

	...
	div {height : 100px ; overflow : hidden; border : 1px solid red; }
	div:hover {height : auto; }

HTML :

... <div> <p class ="remarque">Survolez la boite bordurée de rouge pour afficher tout son contenu. <h3>Histoire de Rome</h3> <p>In his tractibus navigerum nusquam visitur flumen ... ... <p>Saepissime igitur mihi de amicitia cogitanti maxime ... ... <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens ... </div> ...

Exemple ci-dessous

Survolez la boite bordurée de rouge pour afficher tout son contenu.

Histoire de Rome

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

La solution jQuery

L'extension UI de ce fameux Framework propose le widgetaccordion().
L'extension jQuery UI est traitée dans le tuto "javaScript & jQuery" dans ce même site. Tutoriel JavaScript & jQueyr

Solution HTML

Grâce à la version 5 il existe désormais une solution HTML : emploi des nouvelles balises details & summary

Exemple ci-dessous

Cliquez sur le petit triangle noir pour développer !

Histoire de Rome

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

Le code HTML correspondant

<details> <summary> <h3>Histoire de Rome</h3> <p>In his tractibus navigerum nusquam visitur flumen ... ... </summary> <p>Saepissime igitur ... <p>Isdem diebus Apollinaris Domitiani gener, paulo ... ... </details>

La balise summary doit être contenue dans la balise details.
Au chargement de la page seul le contenu à l'intérieur de summary s'affiche et un triangle noir orienté vers la droite s'affiche.
Dès que vous cliquez sur le triangle tout le contenu s'affiche, le triangle noir s'oriente vers le bas.
Cliquez à nouveau sur le triangle, alors le contenu est replié et le triangle retrouve son orientation initiale.
Au 1er octobre 2020 ces deux balises sont implémentées sur tous les navigateurs récents y compris la dernière version de Edge.

La balise PICTURE

Il est absurde d'afficher sur l'écran minuscule d'un smartphone une image haute résolution (donc une image lourde).
Ces images qui pèsent plus d'un demi méga doivent être réservées aux grands écrans et encore si elles sont affichées "plein écran".
Grâce à la nouvelle balise PICTURE il est possible d'afficher telle ou telle autre image en fonction de la résolution de l'écran.

Exemple d'utilisation de cette balise

Dans l'exemple ci-dessous il y a trois versions de la photo :

"aravis_grand.jpg" est l'image d'origine.
"aravis_petit.jpg" est une copie redimensionnée avec PAINT et à laquelle j'ai rajouté un texte : "petite image".
Notez que si vous divisez par 3 le nombre de pixels en largeurs (et en conservant les proportions) le poids de l'image est divisé par 9 !!!
Dans une deuxième étape j'ai rogné l'image à gauche et à droite avec que le rapport largeur par hauteur corresponde mieux aux petits écrans. Et donc en définitive le poids de la petite image tombe à 70 Ko (au lieu de 1200 à l'origine).

PICTURE : élément d'image adaptative

Le col des Aravis en hiver :

Réduisez la largeur de la fenêtre pour observer le changement de source !

Le code correspondant

CSS :

	picture {width : 90% ; margin : 10px auto 10px auto; }
	img{width : 80%; display : block ; margin :auto; }

HTML :

... <figure> <figcaption>Le col des Aravis en hiver : </figcaption> <picture> <source srcset="../images/aravis_grand.jpg" media="(min-width: 800px)"> <img src="../images/aravis_petit.jpg" /> </picture> </figure> ...

Notez que la balise PICTURE contient un test : si la largeur de la fenêtre est au minimum de 800px alors la source est "aravis_grand.jpg"
SINON la source est "aravis_petit.jpg".
Remarquez que la balise PICTURE doit contenir les éléments SOURCE et IMG. La balise IMG précise la source de l'image si le test est faux.
La balise SOURCE a deux attributs au moins : srcset, media.
La valeur de l'attribut media est une requête média ("media query" en anglais).

Exemple plus complexe

Il est possible d'avoir deux tests voir plus.

Le code HTML

... <picture> <source media="(min-width: 1200px)" srcset="../images/aravis_grand.jpg"> <source media="(min-width: 800px)" srcset="../images/aravis_medium.jpg"> <img src="../images/aravis_petit.jpg" alt ="col des Aravis" > </picture> ...

Test

Observez le rendu de ce deuxième exemple

Vous pouvez tester cette page sur votre PC portable puis sur votre tablette puis sur votre smartphone.
Ou bien uniquement sur votre PC en réduisant progressivement la largeur de la fenêtre.

Remarque générale

Il faut faire preuve de bon sens. Il ne faut pas abuser de la balise PICTURE car le code HTML qui en découle est lourd.
Il faut réserver l'emploi de cette technologie aux images lourdes dont il faut éviter le chargement dans le cadre de internet mobile.