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
    • logotype
    • puces et autres éléments de décors
    • règles de mise en forme (feuilles de style)
  • Les éléments multimédia sont inclus de même
  • 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
  • Structure de la page → modèles HTML (et CMS)
    designer fonctionnel
  • Rendu visuel → CSS (et HTML)
    designer graphique
  • Interactions → JS (et HTML, CSS)
    développeur front end

HTML et documents hypermédias

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

Pourquoi structurer ?

  • Le WYSIWYG (what you see is what you get)…
    • est confortable, mais
    • est orienté par le rendu visuel
    • est conditionné par un dispositif de visualisation
  • La structuration logique permet
    • la réutilisation d'éléments multimédia (logo…)
    • une cohérence d'aspect sur de grands ensemble
    • un enrichissement sémantique (type des données, langue…)
      Ceci oblige à la rigueur, p.ex. pour l'italique :
      titre d'œuvre ≠ nom d'espèce ≠ locution étrangère

Éléments de type bloc

  • Niveaux logiques : h1, h2, h3,… h6, p
  • Autres types de blocs :
    balisesignificationcontexte
    <div> bloc de texte (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
    <dt> et <dd> alinéas, terme et définition, d'un glossaire dl
    <pre> texte préformaté (code) général
    <blockquote> paragraphe de citation (marges augmentées) général

Ancienne hiérarchisation (HTML 4)

  • En HTML 4/XHTML 1, on utilise des divisions :
    <div class="section" id="elephAfro">
    ▏   <h1>Les éléphants d'Afrique</h1>
    ▏   <p>Premières considérations...</p>
    ▏     ...
    ▏   <div class="sous-section" id="elephAfroHabitat">
    ▏   ▏   <h2>Habitat</h2>
    ▏   ▏   <p>Les éléphants d'Afrique habitent...</p>
    ▏   ▏     ...
    ▏   </div>
    </div>

Actuelle hiérarchisation (HTML 5)

  • (X)HTML 5 ajoute une notion de sections :
    balisesignification
    <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…
  • Et d'en-tête/pied de section :
    balisesignification
    <header> en-tête, introduction, aides de navigation…
    <footer> pied de section
  • Une section a un titre, reflétant de façon adéquate la hiérarchie du document entier (HTML 5.1).

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)

  • Liens :
    • <a href="…url…">…contenu…</a>
  • Objets inclus :
    • <br> → saut de ligne impératif
    • <hr> → filet horizontal (sur toute la largeur)

    • <img> → image : PNG, JPEG ou SVGsauf IE8 ☺
    • <object>, <embed> → autre contenu externe

Éléments en-ligne (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 en-ligne (3)

  • Attention : ne jamais raisonner “rendu” !
    • <i> balise une rupture de la langue ou du discours
      Ne pas confondre avec <em> ni <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>Le terme <i class="glossaire">utilisabilité</i>, défini ci-après…</p>
      <p>Ceci est en italiques&nbsp;: <i>exemple</i>.</p>
    • <b> balise une rupture typographique
      Ne pas confondre avec <strong>
    • À s'interdire : <big>, <center>, <font>, <s>,
      <small>, <strike>, <tt>, <u>
    • 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…">
▏  ▏  <meta name="keywords" content="mot-clé,mot-clé,…">
▏  ▏  <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.
  • Placer des commentaires (pour les humains) :
    <!-- …commentaire… -->
  • On peut aussi désactiver du code :
    <!-- <balise>… -->

Structure-type d'un document HTML 5

exemple de table des titres exemple de structure de sections

Utiliser le CSS

Le CSS s'occupe du rendu visuel

humour, HTML avec ou sans CSS

CSS ?

En cascade ?

  • Règles globales, du navigateur
  • Règles générales, utilisables sur différents sites
    p.ex.: Google web fonts
  • Règles pour un site entier
    p.ex.: mise en page, menus, encarts, etc.
  • Règles applicables à des secteurs d'un site
  • Règles applicables à une page
    p.ex.: cours, application, événement, etc.
  • Déclarations locales, applicable à un élément
    seulement quand il n'a pas de caractère générique

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 tests ou des exercices, p.ex.)
    <style>
    ▏ /* règles CSS */
    </style>
  • “Feuille” de style en-ligne (inline stylesheet)
    à éviter, autant que possible
    <element style="/* déclarations CSS */" …>…

Fonctionnement du CSS

Redéfinir l'aspect des balises

Exemple : balises 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

Les classes équivalent à des catégories “personnelles” spécialisant des balises génériques.

Affectées à un élément par l'attribut class en HTML

<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>

Introduites par un point
en CSS

.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) ⌛

  • Principales propriétés : color, background-color
  • Exemple :
<p class="abc">Test 1</p>
<p class="def">Test 2</p>
.abc {
▏ background-color: #0F2D40;
▏ color: #3E8C84;
}
.def {
▏ background-color:
▏ ▏      rgba(47, 0, 38, .6);
▏ color: rgb(168, 204, 132);
}
(…)

Les images en CSS ⌛

  • Il s'agit d'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
  • La taille : font-size et line-height
  • Les variantes de style : font-style, font-weight, font-variant, color

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 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é 1px = ¾pt
  • in : pouce “d'impression” — en fait 1in = 72pt = 96px
  • cm : centimètre “d'impression” — en fait 1in = 2,54cm

Sélecteurs CSS complexes

Combiner balises et classes

  • Balises et classes peuvent se combiner :
    p.alinea {…}
  • On peut également combiner plusieurs classes :
    .highlight.css {…}
  • Le point se lit « … de classe … » :
    B.C : un élément de balise B et de classe C

Imbriquer plusieurs sélecteurs

  • On désigne l'imbrication par un espace :
    A E : un élément E (enfant) qui est dans un élément A (parent ou autre ascendant)
  • Attention à l'ordre
    et à ne pas confondre A ES1, S2B.C
  • Exemples :
    h1 { text-weight: bold; color: #800000; }
    h1 b { 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, pseudo-classes (1/2) ⌛

  • Pseudo-éléments et pseudo-classes n'ont pas de contrepartie dans le code HTML
  • Ils sont définis dynamiquement
  • Pseudo-éléments :
    • Sont utilisables comme des éléments
    • ::before : avant le contenu d'un élément
    • ::first-letter : premier caractère d'un élément
    • ::first-line : première ligne d'un bloc
    • ::after : après le contenu d'un élément

Pseudo-éléments, pseudo-classes (2/2) ⌛

  • Principales pseudo-classes :
    • S'utilisent partout, comme des classes “environnementales”,
      p.ex. menu déroulants ou autres effets de survol
    • :visited : est un lien visité
    • :link : est un lien pas encore visité
    • :hover : est survolé
    • :active : est activé
    • :focus : a le focus (saisie)
    • :target : est la cible (#) de l'URI (CSS3)
  • Il y en a également beaucoup d'autres (CSS3), qui permettent des sélections complexes :
    :first-child, :last-child, :nth-child(…), :nth-of-type(…), :not(…)

Règle de cascade (1/2)

  • Évaluation de chaque règle sur chaque élément et chaque pseudo-élément du document
  • Hiérarchie des déclarations :
    • Origine et importance :
      !important > normal > config. utilisateur > navigateur
    • Spécificité :
      #identifiant > .classe > balise > *
    • Ordre d'apparition (au fil de la lecture des fichiers) :
      dernière > première

Règle de cascade (2/2)

  • Aide-mémoire des sélecteurs élémentaires :
    • * : pronom personnel indéfini, “on”
    • balise : nom commun
    • .classe : adjectif qualificatif, complément de nom
    • #identifiant : nom propre (unique dans une page)

Détermination de la spécificité

  • Calcul de la spécificité dans une feuille de style :
    *                    /* spécificité = 0 0 0 (pas spécifique) */
    li {...}             /* spécificité = 0 0 1 (faible : très général) */
    li::first-line {...} /* spécificité = 0 0 2 */
    ul li {...}          /* spécificité = 0 0 2 */
    ul ol li {...}       /* spécificité = 0 0 3 */
    li.plus {...}        /* spécificité = 0 1 1 */
    a:hover {...}        /* spécificité = 0 1 1 */
    nav ul li.plus {...} /* spécificité = 0 1 3 */
    #x34y {...}          /* spécificité = 1 0 0 */
    #banner nav {...}    /* spécificité = 1 0 1 (forte : très spécifique) */
  • Un attribut style="…" compte comme plus spécifique que tout.

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

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