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

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> document entier (et <main> 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, de rang adéquat, indépendamment du sectionnement (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 ?

  • Définitions globales, du navigateur
  • Définitions générales, utilisables sur différents sites
    p.ex.: Google web fonts
  • Définitions pour un site entier
    p.ex.: mise en page, menus, encarts, etc.
  • Définitions applicables à des secteurs d'un site
  • Définitions applicable à une page
    p.ex.: cours, application, événement, etc.
  • Définitions locales, applicable à un élément
    seulement quand il n'y a rien de 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 au strict nécessaire (pour tester, 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 ne s'agit que d'images de fond
  • 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 ⌛

  • em : largeur d'M, référence de la fonte (font-size)
  • ex : hauteur d'x, hauteur des lettres sans “jambe”
  • % : pourcentage par rapport au contenu
  • px : point d'écran de référence — pixel sur un PC
  • pt : point d'impression — en pratique 1px=¾pt
  • in : pouce d'impression — en pratique 1in=72pt=96px
  • cm : centimètre d'impression — en pratique 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 :
    P E : un élément E (enfant) qui est dans un élément P (parent)
  • Attention à l'ordre
    et à ne pas confondre P 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 sont définis dynamiquement
  • Ils n'ont pas de contrepartie dans le code HTML
  • Pseudo-é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
    • Sont utilisables comme n'importe quel élément

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

  • Principales pseudo-classes :
    • :visited : est un lien visité
    • :link : est un lien non visité
    • :hover : est survolé
    • :active : est activé
    • :focus : a le focus (saisie)
    • :target : est la cible (#) de l'URI (CSS3)
    • S'utilisent partout, comme une classe “environnementale”,
      p.ex. menu déroulants ou autres effets de survol
  • 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ègles de cascade (1/2)

  • Évaluation pour chaque élément et chaque pseudo-élément du document
  • Hiérarchie des déclarations :
    • Origine et importance :
      !important > auteur > utilisateur > navigateur
    • Portée (scope) : limitation à une section (CSS 3)
    • Spécificité :
      #identifiant > .classe > balise > *
    • Ordre d'apparition (au fil de la lecture des fichiers) :
      dernière > première

Règles de cascade (2/2)

  • Principe de calcul de la spécificité :
    *                    /* 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 (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...