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
Donc dans cette page j'évoque divers éléments introduits par la spécification HTML5 et qu'on ne peut ranger
dans les cases ci-dessus.
Certaines de ces balises ont une valeur sémantique forte et sont susceptibles d'être exploitées par les moteurs de recherche.
La balise MARK est un surligneur de texte. Il marque un passage spécifique, que l'on souhaite mettre en valeur. Son style par défaut est celui d'un texte surligné en jaune.
HTML signifie HyperText Markup Language.
CSS signifie Cascading Style Sheet.
Les acronymes apparaissent sur fond jaune.
Le code HTML correspondant :
Pour info : extrait de la feuille de style de cette page :
div.bordure {margin : 10px auto ; width : 80% ; border : 1px solid black; }
Avant la norme HTML5 il n'y avait aucune balise pour indiquer que le contenu de l'élément était une date, un instant, une durée.
Cette balise est intéressante pour le référencement naturel (SEO) ; Le robot d'indexation retrouve facilement une date.
Le texte est affiché en italique.
Le contenu de l'attribut datetime est lu par l'ordinateur mais invisible pour l'internaute.
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 :
Pour éviter que la page soit trop longue une partie du contenu peut ne pas être masquée par défaut.
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é (overflow : hidden). Mais si survol ou clic de la boite la hauteur de celle-ci devient "auto" donc tout le contenu s'affiche.
div {height : 100px ; overflow : hidden; border : 1px solid red; }
div:hover {height : auto; }
Il existe désormais une alternative HTML avec l'emploi de deux nouvelles balises details & summary
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.
Il serait 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.
C'est à dire que vous pouvez réaliser au sein de cette balise des tests.
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).
Réduisez la largeur de la fenêtre pour observer le changement de source !
CSS :
picture {width : 90% ; margin : 10px auto; }
img{width : 80%; display : block ; margin : 10px auto; }
HTML :
Si la largeur de la fenêtre est au minimum de 1200px alors la source est "aravis_grand.jpg" .
Si la largeur de la fenêtre est compris entre 1200 et 800 pixels alors la source est "aravis_medium.jpg".
Sinon la source est "aravis_petit.jpg".
Remarquez que la balise PICTURE doit contenir les éléments SOURCE et IMG.
La balise SOURCE a deux attributs au moins : srcset, media.
La valeur de l'attribut media est une "media query".
L'élément HGROUP représente un titre et son contenu associé. Il regroupe un élément titre avec un ou plusieurs paragraphes (P). La stylisation CSS est facilité.
Contenu du paragraphe
Blablabla ...
Blablabla ...
Blablabla ...
Le même style s'applique au titre et à son contenu.
Alors que HGROUP regroupe un titre et un paragraphe (ou plusieurs), FIGURE regroupe une image / une vidéo
avec une légende.
Cet élément déjà évoqué dans le chapitre précédent.
HTML5 et le multimédia
Permet de transmettre des données numériques importantes à l'ordinateur. Cet élément ne doit pas être confondu avec le nouvel attribut data-*"
Aucune "data" n'apparait ...
Les "data" sont lues par l'ordinateur tout en étant invisibles pour l'internaute ...
La norme HTML5 introduit deux nouvelles balises pour afficher des valeurs sous forme de barres donc un effet visuel interessant.
La balise meter doit être utilisée pour afficher une jauge c'est à dire une mesure scalaire.
La balise meter ne doit pas être utilisée pour indiquer une progression ; il faut alors utiliser l'élément
progess
Notez un bel affichage même sans avoir styliser le sélecteur meter : couleur de remplissage par défaut de la barre : vert.
Notez qu'il s'agit d'une balise double et de type "inline".
Cet élément affiche une barre de progression.
32%
Couleur par défaut de la barre de remplissage : bleu.
Notez qu'il s'agit d'une balise double et de type "inline".
Dans l'exemple précédent la valeur de l'élément progress est fixe.
Mais bien sûr Tout l'intérêt de cet élément réside dans le fait de pouvoir faire varier cette valeur via un script ...
Ce script simule le chargement long d'un gros fichier.
La durée d'exécution est 20 secondes.
var stop = setInterval(increment,200) : la fonction increment est appelée tous les 200 millisecondes.
Cette fonction est appelée 100 fois (l'appel est ensuite bloqué par clearInterval()).
Donc 100 par 200 millisecondes = 20 secondes.
L'instruction console.log(compteur) est provisoire.
À la différence du langage Python qui dispose de la fonction sleep() (pour ralentir l'exécution d'un script),
le langage JS ne propose de fonction identique.
L'astuce consiste à faire appel aux "minuteurs" ; c'est à dire les fonctions setTimeout(), setInterval()
La balise dialog est un élément sémantique introduit dans HTML5 pour représenter une boîte de dialogue.
Elle sert à afficher des contenus contextuels (avertissements, formulaires, options) au-dessus du contenu principal.
Par défaut, l'élément dialog n’est pas visible ; il faut l’ouvrir explicitement (un script JS).
Lorsque la boite de dialogue est affichée, l'arrière-plan est flouté et grisé et n'est plus accessible car la boite de dialogue est modale.
L'élément form method="dialog"contient un bouton qui, lorsqu’il est soumis, appelle automatiquement dialog.close().
Donc nul besoin d'une instruction JS pour fermer la boite de dialogue.
body {width : 80vw ; margin : 10px auto ; border : 1px solid red; }
p {font-size : 1.2em ; margin : 10px ; text-align : justify ; }
button {display : block ; margin : 30px ; }
dialog {border : none ; padding: 2rem;
border-radius: 1rem; max-width: 380px;
box-shadow: 10px 10px 10px grey; }
dialog::backdrop {
backdrop-filter: blur(4px);
background: ligthgrey; }
Le pseudo-élément ::backdrop permet de styliser l'arrière-plan d'une boîte de dialogue lorsque
celle-ci est affichée et à condition qu'elle soit modale (qui bloque l'accès aux autres éléments de la page).
La propriété backdrop-filter: blur(4px) donne un effet de flou.
const bouton = document.querySelector('button');
const boite_diag = document.querySelector('dialog');
bouton.onclick = function(){boite_diag.showModal(); } // mode modale
Modifiez la dernière ligne du script comme suit:
bouton.onclick = function(){boite_diag.show(); }
Cette fois la boite de dialogue est non modale. L'arrière plan n'est ni flouté ni grisé et reste accessible.