Documents structurés pour le web
HTML-CSS

Master information-communication

Yannis Delmas
yannis.delmas@univ-poitiers.fr

Introduction
Genèse du HTML-CSS

L'invention du Worldwide web

This is for everyone Tim Berners-Lee

Exemple d'instrument au CERN :

CERN - détecteur Atlas

Exemple d'article du CERN : Search for a Standard Model Higgs boson…

Choix fonctionnels

  • Désignation universelle
  • Possibilités graphiques et multimédias
  • Hypertextualité
  • Interopérabilité et ouverture
  • Compatibilité ascendante et descendante
  • Parcimonie (limitation des transferts de données)
  • Modularité

Architecture générale

Grands principes du HTML v. 5 (extraits)

  • Compatibilité
    • Supporter l'existant (compatibilité ascendante)
    • Permettre un rendu dégradé (compatibilité descendante)
    • Suivre les usages
  • Utilité
    • Résoudre des problèmes réellement présents
    • Priorité au terrain (utilisateur > auteur > implémenteur > spécifieur > théorie)
    • Sécurité dès la conception (secure by design)
    • Separation of concerns, en particulier séparation contenu/rendu visuel
  • Interopérabilité
  • Accès universel
    • Support de toutes les langues du monde, grâce à Unicode
    • Accessibilité pour les personnes en situation de handicap

Choix techniques

  • Objets inclus
    • Stockage : fichiers séparés
    • Typage : types MIME, formats standards
    • Rendu : greffons (plugins)
  • Adresses web globales (URL, URI)
    • … avec infrastructure client-serveur et caches
  • Structuration du texte
    • HTML — application du SGML
    • XHTML — application du XML

Découpage d’une page

  • Les éléments récurrents sont isolés
    • règles de mise en forme → feuille de style
    • puces, éléments de décors → f. style + fichiers externes
    • logotype → fichier(s) externe(s)
  • Les éléments multimédia sont externalisés
  • Un fichier HTML contient
    • le texte sous forme structurée
    • une description formelle de la page

Architecture client-serveur ⌛

Principe des caches ⌛

  • Cas 1 : fichier inconnu du cache
    • Demande du fichier au serveur
    • Utilisation et conservation dans le cache
  • Cas 2 : fichier connu du cache
    • Demande au serveur de la date de modification
    • Si périmé : demande de la dernière version
    • Si valide : utilisation de la version en cache
  • Les caches peuvent s’enchaîner

La séparation des pouvoirs

  • Contenu, fond → HTML
    🧑‍💻 rédacteur
    📄 charte éditoriale
  • Structure de la page → modèles HTML (et CMS)
    🧑‍💻 designer fonctionnel
    📄 maquette fonctionnelle
  • Rendu visuel → CSS (et HTML)
    🧑‍💻 designer graphique
    📄 maquette graphique
  • Interactions → JS (et HTML, CSS)
    🧑‍💻 développeur front end

Principes du balisage

Texte structuré

  • Balisage grammatical
    Le chat mange la souris.
  • Balisage de présentation
    « Le malade imaginaire de Molière c'est aussi…
    l'imaginaire malade. »
  • Plusieurs modèles ⌛ :
    • RTF (traitement de texte)
    • LaTeχ (composition)
    • SGML (encodage de texte, TEI)
      Standardized Generalized Markup Language (ISO 8879)

Balisages SGML et XML (1/2)

  • Balisage grammatical
    <phrase><sujet>Le chat</sujet> <verbe>mange</verbe>
    <complement>la souris</complement>.</phrase>
  • Balisage de présentation
    <q><i>Le malade imaginaire</i> de <b>Molière</b>
    c'est aussi… <br />l'imaginaire malade.</q>
  • Balises… end of life
    • ouvrantes : <abc>
    • fermantes : </abc>
    • ouvrantes-fermantes : <abc />

Balisages SGML et XML (2/2)

  • Attributs :
    <img src="logo_ACME_XS.jpeg" alt="ACME SARL" />
  • Entités :
entitéexplicationvaleur
&lt;plus petit que (less than)<
&quot;guillemets doubles"
&amp;esperluette (ampersand)&
&nbsp;espace insécable
&laquo;guillemet français ouvrant
(left angle quote)
«
&eacute;e accent aigu (acute)é
&ecirc;e accent circonflexeê
&ccedil;c cédilleç
&euro;euro
entitéexplicationvaleur
&gt;plus grand que (greater than)>
&apos;guillemet simple'
 
&shy;tiret conditionnel-
&raquo;guillemet français fermant
(left angle quote)
»
&egrave;e accent graveè
&euml;e tréma (umlaut)ë
 
&copy;copyright©

Seules les cinq premières sont sûres dans un document XHTML.
exemple d'entités non converties

URL et URI

  • URL/URI : Uniform resource locator / identifier
  • Variantes :
    http://…nom_serveur…/dossier1/dossier2/…/fichier
    ou : https:
    /dossier1/dossier2/…/fichier
    sous-dossier1/sous-dossier2/…/fichier
    • Pour remonter d'un cran : ..
  • Paramètres de programmes côté serveur ⌛ :
    http://serveur/chemin?nom1=valeur1&nom2=val2&…
    • Attention aux & : <a href="…?nom1=val1&amp;nom2=…">…

Structuration logique du HTML

Mauvaise pratique : le WYSIWYG

  • WYSIWYG = what you see is what you get
    • Facile
    • Confortable
  • Penser WYSIWYG = penser visuellement
    • La mise en forme est un langage visuel
    • Gros + gras : indice de titre et de début de section
    • Italique : indice de mise en valeur ou locution étrangère…
  • Il faut refuser cette facilité illusoire.
    • Comment font les personnes malvoyantes ?
    • Et les moteurs de recherche ? Les enceintes connectées ?
    • Comment s’adapter à tout support ?

Bonne pratique : la structuration logique

  • Marque bien les sections, leur rôle, leur titre
  • Favorise la réutilisation d’éléments multimédia
  • Assure une cohérence d’aspect de grands ensembles
  • Commun aux différents publics et supports
  • Oblige à la rigueur, p.ex. pour l’italique :
    titre d’œuvre ≠ locution étrangère ≠ nom d’espèce
  • Permet un enrichissement sémantique

Les étapes de codage (simplifié)

  • Zonage, maquette fonctionnelle (wireframe/mockup), maquette graphique
  • Baliser en (X)HTML les pages et/ou modèles
    • Structuration logique de la page/du modèle
    • Structuration locale de la page/du modèle
      de l’extérieur vers l’intérieur ou par ordre d’apparition
    • Structuration visuelle de la page
  • Préparer la feuille de style du site
    • Mise en forme locale
    • Mise en page (selon les contraintes de dépendance)
  • Coder les interactions

Hiérarchisation HTML 5.1

  • Le contenu se découpe en sections
    <section> section (générique)
    <body>, <main> le document entier et son contenu principal
    <article> section du document susceptible de constituer un document indépendant
    <nav> navigation (vers d’autres pages ou sections)
    <aside> contenu annexe séparable : citations, publicités…
  • Une section a un titre, reflétant son niveau
    document → <h1>, niveau 2 → <h2>, …, niveau 6 → <h6>
  • Chaque section peut avoir un en-tête et/ou un pied
    <header> en-tête, introduction, aides de navigation…
    <footer> pied de section

Éléments de type bloc

  • Blocs usuels : <h1>, <h2>, <h3>, <h4>, <p>
  • Principaux autres types de blocs :
    balisesignificationcontexte
    <div> bloc de contenu (générique) général
    <td> et <th> cellule de donnée / de titre d’un tableau table tr
    <li> item d’une liste ul ou ol
    <figure> figure, illustration,
    et sa légende <figcaption>
    général
    <blockquote> paragraphe de citation général

Exemple de blocs : les listes

  • Listes à puce <ul> ou numérotées <ol>
    <p>Pour un canard à l’orange&nbsp;:</p>
    <ul>
    ▏  <li>un canard</li>
    ▏  <li>quatre oranges</li>
    </ul>

    Pour un canard à l’orange :

    • un canard
    • quatre oranges
  • Peuvent être imbriquées
    • …comme ici
  • Utilisation la plus courante : les menus déroulants

Éléments en-ligne (1/2)

Éléments en-ligne (2/2)

  • Marquage sémantique : !
    • <em> → souligner oui, vraiment
    • <cite> → référence de citation le journal Le Monde
    • <strong> → insister si, j'insiste
    • <code> → code (programme, HTML…) <code>
      mais aussi : <samp>, <kbd>, <var>
    • <sub> et <sup> → indice et exposant xi et m3
  • Et pour tout ce qui n'est pas prévu :
    • <span> → marquage neutre

Éléments à utiliser avec précaution ⌛

  • Aspects à coder par un style, autant que possible :
    • <br> : saut de ligne impératif
    • <hr> : filet horizontal
    • À s’interdire : <big>, <center>, <font>, <small>, <strike>, <tt>, <u>
  • Ne jamais raisonner visuellement
    • <i> = rupture de la langue ou du discours ≠ <em><cite>
      <p>Le <i lang="en">web</i> est un outil fantastique.</p>
      <p>Le <i class="taxonomie">Felis silvestris</i> mange la Souris.</p>
      <p>L’<i class="glossaire">utilisabilité</i> est une exigence…</p>
      <p>Ceci est en italiques&nbsp;: <i>exemple</i>.</p>
    • <b> = rupture typographique ≠ <strong>
  • Change en HTML 5 : <s>

HTML et description de document

Données et méta-données

Le fichier HTML ne comporte pas que son contenu :

<!DOCTYPE html>
<html lang="fr"><!-- code de langue ISO 639 -->
▏  <head>
▏  ▏  <meta charset="utf-8"><!-- encodage des caractères -->
▏  ▏  <title>…titre de la page…</title>
▏  ▏  <meta name="author" content="…nom / URL de l'auteur…">
▏  ▏  <meta name="description" content="…description du contenu…">
▏  ▏  <link rel="stylesheet" href="…URL d'une feuille de style…">
▏  </head>
▏  <body>
▏  ▏  …contenu de la page…
▏  </body>
</html>

Documentation du code

  • Indenter le code
    • Aligner les balises ouvrantes et fermantes qui se correspondent
  • Insérer des commentaires
    • Annotations pour les lecteurs humains
    • Comme ceci : <!-- …commentaire… -->
    • Cela peut aussi servir à désactiver une portion de code :
      <!-- <balise>… -->

Structure-type d’un document HTML 5

exemple de table des titres exemple de structure de sections

Quelques conseils

Utiliser le CSS

Le CSS s’occupe du rendu visuel

humour, HTML avec ou sans CSS

CSS ?

En cascade ?

  • Style global, d’un navigateur
  • Styles généraux, utilisables sur différents sites
  • Styles de tout ou partie d’un site web
    • Ex. : mise en page, menus, encarts…
  • Règles applicables dans tel ou tel contexte
    • Ex. : page de cours, application, mini-site d’événement…
    • Ex. : ul de liste à puce vs ul de menu déroulant
  • Déclarations locales, applicable à un élément
    (à éviter, autant que possible)

Association au HTML

  • Feuille de style externe (external stylesheet)
    <link rel="stylesheet" type="text/css" href="feuille.css" />
  • Feuille de style incorporée (embeded stylesheet)
    à limiter (pour des tests ou des exercices, p. ex.)
    <style>
    ▏ /* règles CSS */
    </style>
  • “Feuille” de style en-ligne (inline stylesheet)
    à éviter, autant que possible
    <balise style="/* déclarations CSS */" …>…

Fonctionnement du CSS

Définir la mise en forme
d’un type d’éléments

  • Rappel : le rendu visuel d’un type est un indice de sa fonction
  • Exemple : rendu des éléments h3
<h3>Lorem ipsum</h3>
<p>Dolor sit amet…</p>
h3 {
▏  background: #B77E8D; /*   */
▏  color:      #411422; /*   */
▏  font-size:  144%;
▏  margin:     10px 0 20px 0;
}
(…)

Les règles peuvent se grouper ⌛

balise1, balise2, … {
▏  propriété1: valeur1;
▏  propriété2: valeur2;
▏  …
}

Équivaut (presque) à :

balise1 {
▏  propriété1: valeur1; propriété2: valeur2; …
}
balise2 {
▏  propriété1: valeur1; propriété2: valeur2; …
}
…

Les classes CSS

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="alinea">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
.alinea {
▏   text-indent: 50px;
}
(…)

Propriétés CSS usuelles

Les couleurs en CSS (1/3) ⌛

  • Les 16 “couleurs” élémentaires sont :
    black #000000 noir
    gray #808080 gris foncé (50%)
    silver #C0C0C0 gris foncé (75%)
    white #FFFFFF blanc
    maroon #800000 pourpre, rouge foncé
    red #FF0000 rouge vif
    purple #800080 violet, mauve
    fuchsia #FF00FF fuchsia, rose
    green #008000 vert foncé
    lime #00FF00 vert vif
    olive #808000 marron, khaki
    yellow #FFFF00 jaune vif
    navy #000080 outremer, bleu foncé
    blue #0000FF bleu vif
    teal #008080 turquoise foncé
    aqua #00FFFF turquoise clair
  • Plus une spéciale : transparent

Les couleurs en CSS (2/3) ⌛

  • Palette web (225 “couleurs”) :
    (6 rouges) × (6 verts) × (6 bleus)
    plus les précédentes qui manqueraient
    hexadécimal 00 33 66 99 CC FF
    décimal 0 51 102 153 204 255
    proportion 0% 20% 40% 60% 80% 100%
  • Ex.: #3366CC équivaut à rgb(51, 102, 204)
    ou encore à rgb(20%, 40%, 80%)
  • En CSS 3 on peut ajouter un paramètre d'opacité : rgba(51, 102, 204, 0.25)
    ou rgba(20%, 40%, 80%, 25%)
  • Un peu d'aide : sélecteur de couleur du MDN

Les couleurs en CSS (3/3) ⌛

  • color : couleur d’écriture, héritée
  • background-color : couleur de fond, non héritée
<p class="abc">Test 1</p>
<p class="def">
▏ Test 2
▏ <q>test 3</q>
</p>
.abc {
▏ background-color: #0F2D40;
▏ color: #3E8C84;
}
.def {
▏ background-color:
▏ ▏      rgba(47, 0, 38, .6);
▏ color: rgb(168, 204, 132);
}
(…)

Les images en CSS ⌛

  • Images de fond ou de décoration
  • Principales propriétés : background-image, background-repeat, background-position
.ex {
▏ background-color:    #C6D4D7;
▏ background-image:    url(decors/logo-UP-2011.svg);
▏ background-repeat:   no-repeat;  /* repeat|repeat-x|repeat-y */
▏ background-position: 0 0;   /* δx δy */
}
(…)

Les polices de caractères (1/3) ⌛

  • La fonte : font-family
    font-family: Baskerville, 'Times New Roman', "Heisi Mincho W3", serif;
    • La sélection se fait caractère par caractère
    • ⚠️ Mettre au moins une fonte standard et terminer par une fonte générique (serif, sans-serif, mono…)
  • La taille : font-size et line-height
  • Les variantes de style : font-style, font-weight, font-variant, color, text-…

Les polices de caractères (2/3) ⌛

  • Exemple :
    p {
    ▏ font-family: YanoneKaffeesatz, Arial, Helvetica, sans-serif;
    ▏ font-weight: 300; /* normal=400, bold=700 */
    ▏ font-size: 26pt;
    }
    h4 {
    ▏ font-family: Baskerville, 'Times New Roman', "Heisi Mincho W3", serif;
    ▏ font-weight: bold; /* habituellement par défaut */
    ▏ font-size: 32pt;
    }
    (…)

Les polices de caractères (3/3) ⌛

Dimensions des éléments ⌛

  • Dimensions (pour un bloc) : width × height
  • Marge extérieure (pour un bloc) :
    margin: haut droite bas gauche;
  • Bordure :
    border: épaisseur style couleur;
  • Marge intérieure :
    padding: haut droite bas gauche;
  • Les marges verticales libres des blocs se recouvrent

Principales unités des dimensions ⌛

  • ex : hauteur d’x, hauteur des lettres sans “jambe”
  • em : largeur d’M, référence de la fonte (font-size)
  • rem : font-size de la racine du document — référence à préférer pour les polices
  • % : pourcentage par rapport au conteneur de référence
  • px : point d’écran de référence — pixel sur un PC
  • pt : point “d’impression” — en réalité ¾pt = 1px
  • in : pouce “d’impression” — en fait 1in = 72pt = 96px
  • cm : centimètre “d’impression” — en fait 1in = 2,54cm

Sélecteurs CSS complexes
et règles de cascade

Combinaison de situations

  • Deux sélecteurs simples se combinent en se collant :
    p.alinea {…}
  • On peut combiner plusieurs classes :
    .highlight.css {…}
  • Rappel : le point se lit « … de classe … » :
    B.C = « un élément de balise B et de classe C »

Situation d’inclusion (1/2)

  • Cas type : <ul> représente une liste à puces dans le cas général, ou un menu déroulant (ou burger, ou nuage de tags…) dans un bloc de navigation
  • Si un élément E est immédiatement dans un élément P, E est appelé l’enfant et P le parent
  • Si E est inclus dans un élément A,
    E est appelé enfant ou descendant
    et A est appelé ancêtre ou ascendant

Situation d’inclusion (2/2)

  • On désigne l’inclusion par un espace :
    A E signifie « E qui est dans A »
  • ⚠️ Ne pas confondre A ES1, S2B.C
  • Exemples :
    h1 { text-weight: bold; color: #800000; }
    h1 strong { text-weight: normal; }
    .valeur { text-weight: bold; color: #800000; }
    h1 .valeur { color: #336666; }
    ul { list-style-image: url(puce-liste-12x12.png); }
    ul ul { list-style-image: url(puce-liste-10x10.png); }
    ul ul ul { list-style-image: url(puce-liste-8x8.png); }
    em { font-style: italic; }
    em em { font-style: normal; }

Pseudo-éléments ⌛

  • N’apparaissent pas dans le code HTML
  • Définis dynamiquement par le navigateur
  • Comptent comme des balises dans les sélecteurs
  • Principaux pseudo-éléments :
    • X::before : dans X, avant le contenu de l’élément
    • X::after : dans X, après son contenu
    • X::first-letter : premier caractère de X
    • X::first-line : première ligne du bloc X
    • X::selection : texte sélectionné dans X

Pseudo-classes ⌛

  • N’apparaissent pas dans le code HTML
  • Désignent un état ou une situation d’un élément
  • Comptent comme des classes dans les sélecteurs
  • Pseudo-classes usuelles :
    • :visited : est un lien visité
    • :link : est un lien pas encore visité
    • :hover : est survolé
    • :active : est activé
    • :focus : a le focus (saisie)

Autres pseudo-classes ⌛

  • Il y a de nombreuses pseudo-classes
  • Indicateurs d’états :
    :checked, :default, :focus-within, :valid, :invalid, :disabled, :read-only, :read-write, :required
  • Indicateurs de situation dans le document :
    :empty, :lang(…), :first-of-type, :nth-of-type(…), :last-of-type, :first-child, :nth-child(…), :nth-last-child(…), :last-child
  • Sélecteurs d’utilisation plus avancée :
    :root, :target, :not(…)

Règle de cascade

  • Certaines propriétés (ex.: color)
    ont pour valeur par défaut l’héritage (inherit)
  • Pour chaque élément ou pseudo-élément,
    criblage des règles par leur sélecteur
  • Pour chaque propriété, on arbitre les conflits
    • Par origine des règles :
      !important > normal > config. utilisateur > navigateur
    • Puis par spécificité du sélecteur :
      style="…" > #identifiant > .classe > balise > *
    • Puis par ordre d’apparition : après > avant

Aide-mémoire pour la spécificité

  • Métaphore linguistique des sélecteurs élémentaires
  • Du plus générique au plus spécifique :
    * pronom personnel indéfini, “on”
    balise nom commun
    .classe adjectif qualificatif, complément de nom
    #identifiant nom propre (unique dans chaque page)
    style="…" doigt pointé (unique sur le web)

Spécificité des sélecteurs complexes

  • On compte chaque type de sélecteur élémentaire, par catégorie
  • Définition par l’exemple :
    * {…}              /* spécificité = 0 0 0 (pas du tout spécifique) */
    li {…}             /* spécificité = 0 0 1 (faible : très général) */
    q::before {…}      /* spécificité = 0 0 2 */
    nav ul {…}         /* spécificité = 0 0 2 */
    ul ul li {…}       /* spécificité = 0 0 3 */
    aside.framed {…}   /* spécificité = 0 1 1 */
    a:hover {…}        /* spécificité = 0 1 1 */
    nav ul li.here {…} /* spécificité = 0 1 3 */
    #x34y {…}          /* spécificité = 1 0 0 */
    #banner nav {…}    /* spécificité = 1 0 1 (forte : très spécifique) */
  • L’attribut style="…" est le plus spécifique (1000)

Apprenez à raisonner de façon générique !

Le spécifique, en CSS, c'est mal…