Documents structurés pour le web

HTML - CSS

Introduction Genèse du HTML-CSS

L'invention du Worldwide web
This is for everyone - Tim Berners-Lee

Choix fonctionnels
Désignation universelle

Possibilités graphiques et multimédias

Hypertextualité (URL, URI)

Interopérabilité et ouverture

Compatibilité ascendante et descendante (pouvoir ouvrir les vieux documents sur les nouveaux
navigateur et inversement)

Parcimonie (limitation des transferts de données) → dans les fichiers de cache

Modularité (répartition des taches)

Sommaire
Architecture générale

Principes du balisage

Structuration logique du HTML

HTML et description de document

Utiliser le CSS

Fonctionnement du CSS

Propriétés CSS usuelles

Sélecteurs CSS complexes

Architecture générale
Grands principes du HTML v. 5 (extraits)
Compatibilité

Supporter l'existant (compatibilité ascendante)

Documents structurés pour le web HTML - CSS 1

 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

Documents structurés pour le web HTML - CSS 2

 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

Documents structurés pour le web HTML - CSS 3

 Principes du balisage
Texte structuré
Balisage grammatical (phrase, sujet, verbe, complètement)

Balisage de présentation (citation, italique, gras, à la ligne)

Plusieurs modèles :

RTF (traitement de texte)

LaTeχ (composition) ⇒ trop complexe

SGML (encodage de texte, TEI)

Standardized Generalized Markup Language (ISO 8879)

Balisages SGML et XML

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

ouvrantes : <abc>

fermantes : </abc>

ouvrantes-fermantes : <abc />

Attributs :

<img⎵src="logo_ACME_XS.jpeg"⎵alt="ACME SARL" />

Entités :

URL et URI

Documents structurés pour le web HTML - CSS 4

 URL/URI : Uniform resource locator / identifier

Variantes :
[Link]
ou : https : …
/dossier1/dossier2/…/fichier
sous-dossier1/sous-dossier2/…/fichier

Pour remonter d'un cran :

Paramètres de programmes côté serveur :

[Link]

Attention aux & : <a href="…?nom1=val1&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, [Link]. pour l’italique :titre d’œuvre ≠ locution étrangère ≠ nom d’espèce

Permet un enrichissement sémantique

Les étapes de réalisation (simplifié)

Documents structurés pour le web HTML - CSS 5

 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 depuis HTML 5.1

Le contenu se découpe en sections

<section> section (générique)

<body> le document entier et son contenu principal <main>
<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

Structure-type d’un document HTML 5

Documents structurés pour le web HTML - CSS 6

 Éléments de type bloc
Sections et éléments associés : <body>, <section>… <main>, <header>… <h1>, <h2>…

Paragraphes : <p>

Principaux autres types de blocs :

Exemple de blocs : les listes

Listes à puce <ul> ou numérotées <ol>

Documents structurés pour le web HTML - CSS 7

 Peuvent être imbriquées

…comme ici

Utilisation la plus courante : les menus déroulants

Éléments en ligne
Liens : <a href="…url…">…contenu…</a>

Recommandations du Beau code web sur les ancres

Objets inclus :

<img> → image : PNG, JPEG ou SVG

<picture> → image adaptative (on en parle plus tard)

<video>, → autres contenus externes

Recommandations du Beau code web sur les textes alternatifs aux images et médias

Marquage sémantique :

<em> → souligner

<cite> → référence de citation

<strong> → insister

<code> → code (programme, HTML…) mais aussi : <samp>, <kbd>, <var>

<sub> et <sup> → indice et exposant

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 ≠

Documents structurés pour le web HTML - CSS 8

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

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 :

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

Utiliser le CSS

Documents structurés pour le web HTML - CSS 9

 Le CSS s’occupe du rendu visuel

CSS ?
CSS = Cascading Style Sheet Feuille de style en cascade

Obsolète : CSS 1

Officiel : CSS 2.1 = « CSS, level 2, revision 1 »

En cascade ?
Style global, d’un navigateur

Styles généraux, utilisables sur différents sites

Ex. : Google web fonts

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="[Link]" />

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

Documents structurés pour le web HTML - CSS 10

 Définir la mise en formed’un type d’éléments
Rappel : le rendu visuel d’un type doit être un indice de sa fonction

Exemple : rendu des éléments h3

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 la
boris 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 de
serunt mollit anim id est laborum.</p>

Introduites par un point en CSS

Documents structurés pour le web HTML - CSS 11

 .alinea {
text-indent: 50px;
}

Cascade = gestion des conflits

⇒ Une classe l’emporte sur des balises

Propriétés CSS usuelles

Les couleurs en CSS

Deux propriétés principales : color et background-color

De nombreux espaces de couleur ; le plus courant : sRGB

Plusieurs façon de désigner une même couleur : rgb(…) ,hsl(…) …

Y compris, depuis peu, relativement à une autre couleur

Nombre de couleurs ont un nom : transparent, white, black, maroon, magenta, olive, etc.

Écriture la plus usuelle : rgb(rouge vert bleu) ou rgb(rouge vert bleu / opacité)

Composantes rouge (r), verte (g) et bleue (b) : entre 0 et 255 ou entre 0% et 100%

Opacité (alpha) : entre 0 et 1 ou entre 0% et 100%

Autre méthode courante : hsl(teinte saturation luminosité) ou

hsl(teinte saturation luminosité / opacité)

background-color : couleur de fond, non héritée

color : couleur d’écriture, héritée

Les images en CSS

Images de fond ou de décoration

Principales propriétés : background-image, background-repeat, background-position

Documents structurés pour le web HTML - CSS 12

 .ex {
background-color: lightskyblue;
background-image: url(decors/[Link]);
background-repeat: no-repeat; /* repeat|repeat-x|repeat-y */
background-position: 0 0; /* δx δy */
}

Les polices de caractères

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

Exemple :

Il n’est pas nécessaire de se limiter aux polices habituelles

Penser les associations de polices

Dimensions des éléments

Dimensions (pour un bloc) : width × height

Marge extérieure (pour un bloc) :

margin: haut droite bas gauche;

Documents structurés pour le web HTML - CSS 13

 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 : [Link] {…}

On peut combiner plusieurs classes : .[Link] {…}

Rappel : le point se lit « … de classe … » : = « un élément de balise B et de classe C »

Situation d’inclusion
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

On désigne l’inclusion par un espace : signifie « qui est dans »

⚠️ Ne pas confondre : A⎵E ≠ S1, S2 ≠ B.C

Exemples :

Documents structurés pour le web HTML - CSS 14

 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 , avant le contenu de l’élément

X: :after : dans , après son contenu X

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

Documents structurés pour le web HTML - CSS 15

 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 plus avancés : :root, :target, :not(…), :has(…)

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 :

L’attribut style="…" est encore plus spécifique

Documents structurés pour le web HTML - CSS 16

Documents structurés pour le web HTML - CSS 17