Cours Amphi R1.02

• Notepad++
  • version portable 7.9.5
  • > Settings > Preference > auto-completion > auto-insert
  • > Plugins > Plugins admnin... > tidy2
• Firefox version 91 ou plus
  • version 91+ (portable)
  • > Settings > Home (ajuster)
  • > Settings > Search (ajuster)
  • > Settings > Privacy (ajuster)
  • > Settings > Extensions : Adblock / Adblock Plus
  • > Settings > Themes : dark
• Calibre (portable)

Une page html bob.

Regardons le code source de la page html, avec firefox : Crtl+U

Tentons de le rendre plus lisible, avec notepad++ et html-tidy : > Plugins > tidy2

Explorons et modifions le code, avec firefox inspector : Crtl+Shift+I

• HTML [semaines 1 et 2]

  • Un fichier au format texte
  • Contient les informations à afficher
  • Contient aussi organisation/groupement/découpage de celle-ci

• CSS [semaines 3 à 5]

  • Un fichier au format texte
  • Contient les règles de mise en page
  • Celles-ci complètent/modifient/remplacent la présentation par défaut (librement choisie par chacun des navigateurs)

• Publication électronique [semaine 6]

  • Ebook standard w3c : epub
  • Format libre, construit à partir de html et css

• Quelques techniques plus avancées[semaine 7]

  • flexbox
  • grid
  • transitions / animations

• C'est un fichier au format texte (usuellement ceux d'extension .txt). Pour celui-ci on utilisera habituellement l'extension .html.
• Les caractères sont/étaient codés en ASCII (1 car === 1 octet) ; mais 256 choix, c'est trop peu.
• On passe/est passé en Unicode (144,697 cars).
• Il y a plein de manières d'encoder cette quantité de caractères ; classiquement on choisira utf-8.
• Il faut donc s'assurer de le dire : à notepad++, et dans le fichier html lui-même.
• L'information est donc écrite comme une suite de caractères.
• Chaque morceau d'information (par exemple chaque mot) est appelé un token.
• il est séparé/distigué d'un autre/des autres par un/des whitespace (espace, tabulation, saut de ligne)
• Donc un ou plusieurs whitespace, cela revient au même ; un espace ou une tabulation ou un saut de ligne, cela revient au même. (enfin... presque toujours...)

expression ambiguë

3 + 4 x 5 / 3 - 1 + 4

parenthésage

[ (3 + 4) x [ 5 / (3 - 1) + 4 ] ]

parenthèses nommées

<tout> <peu> 3 + 4 </peu> x <grand> 5 / <peu> 3 - 1 </peu> + 4 </grand> </tout>

représentation arborescente

• Le fichier html utilise le système de parenthèses nommées vu ci-dessus pour organiser l'information à afficher.
• Dans le vocabulaire html, la parenthèse nommée est appelée balise ; le nom qui y figure tag ; l'ensemble de la balise et de son contenu élément.
• L'exemple de l'expression arithmétique montre bien qu'un élément peut contenir des informations à afficher, mais aussi d'autres éléments.
• Attention : vu l'écriture (syntaxe) des balises, le caractère inférieur strict à un rôle spécial en html.
• Dans le monde html, on a deux particularités supplémentaires:
  • Les balises peuvent, en plus du tag, contenir des informations complémentaires:
    • Ces informations sont appelées attribut(s) de la balise.
    • Par exemple, on pourrait y dire quelle est l'url pour un lien.
    • Elles se rédigent sous la forme nom_attribut="valeur_attribut" (donc égal et guillemets ont aussi un rôle spécial en html)
    • Ainsi, on aurait <a href="https://www.iut.fr">le lien vers les iut de france</a>.
  • Les balises peuvent être d'arité 2 ou d'arité 1 :
    • Les balises d'arité 2, ou binaires, correspondent à l'idée qu'on se fait de "vraies" parenthèses : avec une parenthèse ouvrante, et une parenthèse fermante.
    • On distinguera les deux en ajoutant un symbole slash, comme dans l'exemple précédent : <a> et </a>
    • Les balises d'arité 1, ou unaires, ne sont constituées que d'une seule "parenthèse".
    • On les distinguera des autres en ajoutant un symbole slash avant la fin de balise, comme par exemple précédent : <img/>
    • Ces balises peuvent provoquer l'ajout :
      • d'un affichage : par exemple une image pour <img/>
      • d'un effet : par exemple une fin de ligne pour <br/>
      • d'une information technique : par exemple le type d'encodage utilisé pour <meta charset="utf8"/>
• Pour savoir si les règles d'écriture ont bien été respectées, le w3c offre un outil de validation.
• Lorsque les règles ne sont pas respectées, chaque navigateur corrige/se comporte comme il veut.
• Les navigateurs maintiennent en interne la représentation arborescente des elements : DOM (Document Object Model).

Ci-dessous, le squelette de ce que l'on considère habituellement comme le minimum pour un document html

						
		<!doctype html>
		<html lang="fr">
			<head>
				<meta charset="utf8"/>
				<title>.....</title>
			</head>
			<body>
				....
			</body>
		</html>

Remarques

• L'annonce doctype ne fait pas partie des éléments html (donc pas du DOM). Elle vise à aider le lecteur du fichier (navigateur ou autre).
• Le document est donc constitué d'un unique élément : html. Celui-ci contient tous les autres.
• En particulier, les deux fils de html doivent, dans l'ordre, être head et body.
• head contient les informations techniques
• body contient l'information à afficher, structurée par les emboitements de balises

Tags de structuration

Il s'agit de tags que l'on trouve comme fils de body. Ils groupent les informations, et peuvent s'emboiter (...avec qq limitations).

Remarques

Nombre de ces tags ont des attributs ad hoc qui permettent d'affiner leur comportement ; ces attributs complètent ou se chevauchent avec les possibilités offertes par le css. On peut par exemple:

• Choisir le numéro initial d'une liste ordonnée, inverser l'ordre du décompte, compter en chiffress romains...
• Modifier le type de puces d'une liste non-ordonnée.
• Grouper des lignes/colonnes/cases dans un tableau.
• Choisir parmi une impressionnante famille d'inputs (texte, nombre, date, couleur, mot de passe, téléphone, checkbox, radiobutton...)
• Activer une auto-complétion, ou un contrôle de saisie (format,min/max)

Tags de sémantiques

Il s'agit de tags introduits à partir de html4. Ils déclinent les tags div en fonction de l'intention sémantique prêtée à l'élément.

Deux tags de contenu particulièrement fréquents

a(nchor) : lien hypertext

• onclick : redirige vers une nouvelle url
• l'url est spécifiée dans l'attribut src
• l'attribut target peut demander que le lien soit ouvert dans une autre fenêtre
• Remarque : l'url peut être :
  • sur un autre site : une adresse "complète" de site, par exemple
    (usuellement, cela débute par http ou https)
  • sur le même site,
    • en absolu : un chemin d'accès complet/explicite
      (on débutera par un slash, désignant le répertoire racine du site)
    • en relatif : un chemin d'accès à partir du répertoire contenant le fichier actuel
      (le symbole pointpoint permet de remonter vers le répertoire parent ; le symbole slash permet d'enchainer les accès)
  • au sein de la même page : une section ou un article, par exemple
    (on l'identifiera avec l'attribut id, et on y référera en préfixant par un dièse)
  • un cas particulier est l'utilisation d'un email (préfixé par mailto:), qui tentera d'activer le logiciel d'envoi de mails
    (... s'il existe... en espérant qu'il est configuré correctement... pour cet utilisateur... )

img : image

• Crée un élément qui affiche une image
• L'attribut src indique l'url où se trouve le fichier encodant l'image
• L'attribut alt attend un texte décrivant l'image ; il sert en cas de problème de chargement ou de visibilité (requête mal-voyants)
• Certaines images (historiquement au format gif) seront animées par le navigateur.
  Attention, ce n'est pas forcément du meilleur goût, et cela implique une sur-consomation de resources
• Combiné au tag map, on peut associer différents liens à différentes zones de l'image.
• Combiné aux tags figure et figcaption, on peut lui associer une légende

D'autres tags que vous pouvez explorer

• picture, audio, video : Contruisent des éléments contenant des resources multimédias
• svg, canvas : Définisent une zone de dessin
• template : à combiner avec l'usage de langage de script

• On peut ajouter un commentaire dans la page html, comme mémo pour soi-même ou comme explication pour autrui, mais ne devant pas être prise en compte par le navigateur pour le DOM ou le rendu.
• Cette possibilité peut aussi permettre de désactiver une partie du code source, en l'excluant du calcul du rendu ; par exemple pour faire des tests lorsqu'on résout des bugs, ou parce qu'on ne veut pas s'en servir pour l'instant mais que peut-être, plus tard...
• Attention : la partie du code source restant non commentée doit constituer un document html bien formé, selon les règles de syntaxe (i.e. qui passe au validateur)
• Le début d'un commentaire est marqué par la suite de caractères <!--
• Le commentaire s'étend jusqu'à la première occurrence de la suite de caractères -->
• Les commentaires ne doivent donc ni s'emboiter ni se chevaucher pour que le navigateur les comprenne correctement.

• Le but du css est de définir les caractéristiques d'affichage des éléments html.
• Par exemple, on pourra décider de passer les écritures en rouge : color : red;
• Dans le vocabulaire css, cette phrase est appelée une déclaration. color est la propriété affectée, et red est la valeur qui lui est assignée.
• Les déclarations sont groupées dans des blocs de déclarations, délimités par des accolades (curly brace).
• Pour indiquer quels éléments sont visés par un bloc de déclarations, celui-ci sera précédé d'un sélecteur
• Par exemple * { color:red; } est une instruction css correctement écrite, visant à passer toutes(*) les écritures de la page en rouge.
• Les instructions css sont appelées règles, et groupées dans des fichiers.
  
• Pour tester la correction syntaxique du fichier, le w3c offre un validateur.
• L'accès à un fichier se fait à partir du document html, en plaçant dans son élément head un élément link :
  <link rel="stylesheet" href="url_du_fichier_css_voulu" />
• Un fichier css peut lui-même demander l'incorporation d'un autre fichier css (sans passer par link dans le html).
  Pour cela doit apparaitre, avant toute règle css, la directive @import "url_fichier_css" ;
• On définit si l'importation doit avoir lieu ou non, en faisant suivre l'url d'une condition media query.
  C'est un point-clé qui permet, par exemple, de choisir quelle mise en page correspond à quel type d'écran.
• Tout comme dans le cas du html, on peut indiquer au navigateur l'encodage des caractères utilisé par le fichier.
  Pour cela, la toute première ligne du fichier doit déclarer, par exemple, @charset "utf-8";
• Une pléthore de propriétés, avec leurs valeurs et conséquences ad hoc, est disponible. Nous en aborderons quelques-unes.

• Tout comme pour les documents htmls, on peut créer des commentaires en css, avec les mêmes objectifs de documentation ou de debug.
• A nouveau, la partie du code non commentée doit constituer un document css bien formé
• Le début d'un commentaire est marqué par la suite de caractères /*
• Le commentaire s'étend jusqu'à la première occurrence de la suite de caractères */
• A nouveau, les commentaires ne doivent donc ni s'emboiter ni se chevaucher

ATTENTION : On donne ici un aperçu du modèle de rendu. Le css peut ensuite le redéfinir ce comportement (propriété display).

• L'élément racine body est une box, c'est-à-dire un rectangle de type block dont :
  • La largeur est égale a la zone d'affichage (viewport)
  • La hauteur est déterminée par son contenu
  • Le rectangle du contenu est entouré d'un éventuel rectangle d'espacement (padding)
  • Celui-ci à son tour entouré d'un éventuel rectangle d'encadrement (border)
  • Celui-ci à son tour entouré d'un éventuel rectangle d'espacement (margin)
  
• Le contenu d'un block est placé le long d'un flot similaire à celui de l'écriture d'un texte
  • Les sous-éléments de type inline:
    • se placent à la suite de ceux existant (comme un mot supplémentaire dans une écriture du texte)
    • occupent une bande de largeur et longueur fixées par le contenu à afficher
  • Les sous-éléments de type block:
    • démarrent sur une nouvelle ligne
    • occupent une largeur égale au viewport
    • occupent une hauteur fixée par leur contenu
    • requièrent un passage à la ligne avant le prochain élément à afficher
• Concernant la largeur et la hauteur :
  • Celles d'un block peuvent être modifiées
  • Mais pas celles d'un inline
  • Pour cela, il faut passer par le type hybride inline-block
  • Les calculs de taille peuvent devenir un casse-tête :
    • hauteur et largeur sont appliquées uniquement au rectangle content
    • La propriété box-sizing peut demander d'inclure les rectangles padding et border
    • Cependant, le rectangle margin reste toujours en dehors des calculs de taille.
    • on peut affiner le calcul avec les quatre opérations arithmétiques

• La logique de flot peut être contournée/altérée en utilisant la propriété position
  • La valeur static correspond à la position de base (nom discutable...)
  • La valeur relative permet de décaler l'élément par rapport à sa position static
    Attention : sa place dans le flot restera vacante
  • La valeur absolute sort l'élément du flot, et le place aux coordonnées choisies
    Attention : ces coordonnées sont calculées relativement au plus proche ancêtre positionné
  • La valeur fixed place l'élément comme absolute et le garde en place en cas de scrolling
  • La valeur sticky place initialement l'élément à sa position static
    Des coordonnées minimales/maximales vers le haut/bas et vers la gauche/droite peuvent être ajoutées
    Le remplissage ou le scrolling ne pourront pousser l'élément au-delà de ces bornes
• Une sorte de float prioritaire peut être défini et mis en concurrence avec le flot de base
  • on place des éléments sur ce flot prioritaire avec la propriété float
  • Ce flot est bidirectionnel (on choisit si l'élément va vers la gauche ou vers la droite)
  • plus détails
• Les éléments peuvent être empilés sur différents plans en utilisant l'attribut z-index (axe z)
  • Les éléments empilés par-dessus masquent ceux en-dessous
  • Tous se déplacent selon le même scrolling
• Des transformations géométriques 3d peuvent être obtenues avec l'attribut transform et les fonctions associées

Sélecteur terminaux

• Le sélecteur de base utilise un mot, qui peut être : un tag, un identifiant ou un nom de classe
• Un tag est le nom d'une balise. Un identifiant et une classe sont des attributs, librement choisis par l'utilisateur.
• Chaque identifiant a vocation à être unique parmi tous les éléments html, tandis que les classes visent à être réutilisables pour plusieurs éléments.
• Par exemple, on définit ainsi l'élément de tag h2, d'identifiant le_titre, et de classe jolies_couleures :
  <h2 id="le_titre" class="jolies_couleures">Comment Gargantua mangea en sallade six pelerins. Chap. xxxvi.</h2>
• Au niveau de la syntaxe du selecteur :
  • un tag est mentionné tel quelle
  • un identifiant est préfixé par un dièse
  • un nom de classe est préfixé par un point
• Pour exemple précédent, ou pourrait avoir une, deux ou trois des règles:
  h2 { ... }      #le_titre{ ... }      .jolies_couleures{ ... }

Qui est affecté par quoi?

Eléments ciblés

• Si le créateur du document html suit la logique attendue, une règle employant un identifiant ne devrait concerner qu'un élément.
• Cependant, les règles par tag ou classe, visent à affecter tous les éléments correspondants.

Héritage

• Lorsqu'un élément est affecté, c'est bien tout le sous-arbre du DOM qui lui correspond qui se trouve affecté.
• Cependant, les éléments fils ne sont affectés que pour leurs propriétés dites héritables.
  Il faut consulter la documentation au cas par cas pour le déterminer...
• Dualement, des règles peuvent entrer en compétition.
  Par exemple .div{ ... } et .span{ ... } pour ce span emboité <div>....<span>..</span>....</div>
• Dans ce cas, une propriété héritable de l'élément span, déclarée dans les règles .div{} et et .span{}, prendra la valeur issue de la règle sur le tag span

Spécificité

• Les règles précédentes ne suffisent pas pour lever toutes les ambigüités.
  Le cas gargantuesque montre un élément affecté par tag, par classe et par identifiant.
• Il se peut que les déclarations soient complémentaires : l'une s'occupant du placement, l'une autre de la font, la dernière de la couleur.
  Dans ce cas, pas de conflit.
• Si plusieurs déclarations affectent la même propriété, c'est alors la règle avec le sélecteur le plus de spéficique qui est choisie.
• L'ordre de spécificité pour les sélecteurs terminaux est identifiant > classe > tag
• Si une égalité subsiste, c'est la dernière déclaration rencontrée qui s'applique (mais là, ça peut être délicat à anticiper!!)

Généralisation : sélection par attribut

• Les sélections par identifiant et classe considèrent les valeurs prises par deux attributs particuliers
• Cette approche est généralisée pour permettre de sélectionner sur la valeur de n'importe quel attribut de balise
• La syntaxe correspondante est [attribut="valeur"]
• La valeur étant une chaine de caractères, on peut affiner avec les opérateurs :
  • ^= pour un préfixe
  • $= pour un suffixe
  • *= pour une sous-chaine
  • ~= pour choisir dans une liste de valeurs
• Nota Bene : du point de vue de la spécificité, ce sélecteur est équivalant à un sélecteur par classe

Pseudo sélecteurs

• La norme css défini des modificateurs pour les sélecteurs terminaux
• ils sont ajoutés en suffixe (sans espace) du terminal qu'ils affectent
• il y a deux catégories de modificateurs :
  • pseudo classes Elles distinguent selon l'état de l'élément.
    La plus connue est :hover qui correspond au survol de l'élément par la souris.
    Par exemple, la règle li:hover{ color:blue; } passe en bleu tout élément de liste, lorsque celui-ci est survolé.
  • pseudo élément Il désigne une partie, concrète ou virtuelle, l'élément.
    Le célèbre ::before correspond à une position d'affichage juste avant l'élément.
    Par exemple, la règle a::before{ content:'-->'; } positionne/ajoute un semblant de flèche devant tout lien hypertext.
• Nota Bene : consultez la documentation au cas par cas pour connaitre leur influence sur la spécificité.

Sélecteurs composés

• Les règles d'héritage et de spécificité mettent en relief la nécessité d'affiner les sélecteurs
• Les sélecteurs terminaux peuvent être accolés (sans espace) pour créer une conjonction de condition (ET)
  Nous appellerons ces concaténations selecteurs sur balise
• Une suite de sélecteurs terminaux peut être construite pour décrire un schéma de position dans la structure du DOM.
  Chaque sélecteur sur balise devra correspondre à un noeud.
  L'élément sélectionné sera celui correspondant au dernier des noeuds décrit.
  On peut voir cette construction comme la pose de jalons successifs le long d'un chemin menant de la racine du DOM, jusqu'au noeud visé, et devant passé par toutes les étapes mentionnées
• Ainsi, étant donnés deux sélecteurs de balise A et B, on dispose des combinaisons suivantes
  • A    B : ancêtre : le B ciblé a un ancêtre A, i.e. il y a un noeud vérifiant la condition A avant d'atteindre le noeud vérifiant la condition B
  • A > B : père : le noeud juste au-dessus B est A
  • A ~ B : sibling : A et B sont exactement sous le même noeud, et A arrive avant B
  • A + B : adjacent sibling : A et B sont exactement sous le même noeud, et A arrive juste avant B
• Nota Bene : concernant la spécificité, le sélecteur ayant le plus d'identifiant dans son écriture l'emporte ; en cas d'égalité, c'est le nombre de classes (ou affiliés) que l'on considère ; puis le nombre de tags.

• Le epub est un format de publication électronique, libre, supporté par le w3c
• Il repose sur les technologies html et css.
• Afin d'être accessible hors ligne, toutes les informations nécessaires sont contenues dans un fichier zip (renommé .epub)
• Un squelette de base est imposé, composé :
  • d'un fichier mimetype contenant le mimecode annonçant un epub
  • un répertoire META-INF/ contenant le fichier container.xml, qui confirme la structure epub et pointe vers la description du contenu
  • un répertoire OEBPS/ contenant le fichier content.opf, qui décrit l'epub, égraine tous les fichiers de contenu, et indique l'ordre par défaut de présentation
• De multiples contraintes viennent s'ajouter sur la syntaxe html, dans le but de garantir l'accessibilité des contenus
• les logiciels de lecture tentent de compenser les défauts syntaxiques/sémanteiques
  les liseuses tentent d'implémenter la norme

En route vers le centrage facile

Avec les techniques vues jusqu'ici, les centrages et alignements, horizontaux et verticaux, restent problématiques. Les deux techniques suivantes reposent sur l'ajout d'un box conteneur, au sein duquel vont être réalisés les ajouts des éléments que l'on désire bien ranger.

• flexbox peut être approché comme une amélioration de float : des éléments viennent s'ajouter dans un flot, et on vise à gérer plus harmonieusement leur positionnement et la répartition de l'espace disponible entre eux
• grid peut être vu comme un perfectionnement de table, partageant les mêmes axes d'amélioration que flexbox. Cependant, il provoque un saut conceptuel avec l'introduction de grid-template-areas. En effet, le placement des éléments s'affranchit alors totalement de leur position dans le DOM. Seules les valeurs absolute et fixed de l'attribut position avait partiellement fait cela jusqu'ici.

La cinématique

Les propriétés animation et transition servent toutes deux à animer les documents html. L'objectif est atteint en faisant plus ou moins rapidement changer la valeur de certaines propriétés. La propriété va ainsi passer d'une valeur initiale à une valeur cible en utilisant l'illusion cinématographique. Cependant, seules certaines propriétés css implémentent un continue de transition (consulter la documentation au cas par cas). La différence fondamentale entre animation et transition réside dans l'origine de la mise en mouvement.

• Une transition décrit une règle de passage d'une valeur de propriété à une autre. Elle est attachée à une règle css. Lorsque, pour quelleque raison que ce soit (par exemple un hover) une des propriétés change de valeur, la règle de passage déclarée va gérer la transition vers la nouvelle valeur.
• Une animation décrit aussi une règle de passage d'une valeur à une autre. Contrairement à la transition elle choisit de quelles propriétés il s'agit, ainsi que les valeurs initiales et les valeurs cible. Une fois définie, l'animation est associée à une règle css, et toujours active (même si son exécution peut être unique ou indéfiniment répétée).
• L'utilisation combinée de transition et d'animation avec des scripts peut rapidement rendre floue la distinction ci-dessous...