HTML & CSS
Les langages de base du Web
Technoweb L3 - 2023 - Benjamin Becquet
HTML
HyperText Markup Language
Technoweb L3 - 2023 - Benjamin Becquet 2
Origine
~ 1990, Tim Berners-Lee @ CERN
Invention du World Wide Web = convergence de 3 technologies :
URL (Universal Resource Locator) : protocle d'adressage de ressources
HTTP (HyperText Transfert Protocol) : protocole de communication client/serveur
HTML (HyperText Markup Language) : langage de description de document
Langage à balises issu du SGML : arbre d'éléments + attributs
<!DOCTYPE html>
<html lang="en">
<head>
<title>A very simple page</title>
</head>
<body>
<p>Hello world! <a href="[Link] great articles here</a></p>
<!-- This is a comment -->
</body>
</html>
Technoweb L3 - 2023 - Benjamin Becquet 3
Principes fondateurs
Format texte ouvert
Facile à lire et à écrire (pour les machines et les humains)
Sémantique, accessible
Robuste, résilient (pas de "plantage")
Principes parfois (et toujours !) menacés (versions propriétaires, monopoles, etc.)
1994 : W3C créé par Tim-Berners Lee pour protéger et faire évoluer les standards
~2000 : Poussée du W3C vers le XML (XHTML)
2004 : WHATWG, groupement de développeurs de navigateurs
Approche plus pragmatique du langage, en lien avec les implémentations
Depuis : maintenu conjointement par le W3C et le WHATWG
Technoweb L3 - 2023 - Benjamin Becquet 4
Version actuelle
HTML "Living standard", ou "HTML5" par abus de langage
Spécifications du langage
MDN (Mozilla Developer Network)
Référence incontournable pour le développement
Abandon de l'approche XML stricte :
certains éléments n'ont pas besoin d'être fermés (ex : <meta> , <br> )
certains attributs peuvent être sans valeur (ex : checked , download )
Actuellement, ~ 115 éléments (voir HTML Tags Memory Test)
Technoweb L3 - 2023 - Benjamin Becquet 5
Base
<!DOCTYPE html> : déclaration de type de document.
html : racine, unique
head : en-tête, unique
body : corps, unique
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- en-tête -->
</head>
<body>
<!-- corps -->
</body>
</html>
Technoweb L3 - 2023 - Benjamin Becquet 6
En-tête <head>
Titre de la page
Ressources annexes (icônes, feuilles de styles CSS, JavaScript, flux RSS, etc.)
Métadonnées (pour navigateurs, moteurs de recherche, réseaux sociaux, etc.)
<head>
<meta charset="utf-8" />
<title>Articles - Blog de Benjamin Becquet</title>
<meta name="description" content="Liste de mes articles" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" media="screen" href="[Link]" />
<link rel="alternate" type="application/rss+xml" href="[Link]" />
<link rel="icon" href="[Link]" />
<script src="[Link]"></script>
</head>
Technoweb L3 - 2023 - Benjamin Becquet 7
Structure macro du document
Blocs sémantiques
<main> , <header> , <footer> , <nav> , <article> ,
<section> , <aside> , <figure>
Hiérarchie de titres
<h1> , <h2> , … <h6>
Technoweb L3 - 2023 - Benjamin Becquet 8
Formatage du contenu
Paragraphes : <p>
Typographie basique : <b> , <i> , <em> , <sup> , <sub>
Listes :
Numérotées (ordered) : <ol> + <li>
Non numérotées (unordered): <ul> + <li>
De définitions : <dl> + <dt> + <dd>
Citations :
en ligne : <q>
en bloc : <blockquote> + <cite>
Blocs de code préformatté : <pre> + <code>
Technoweb L3 - 2023 - Benjamin Becquet 9
Liens
Tous les liens hypertextes se font avec la balise <a> (pour anchor) et son attribut href :
<a href="[Link] absolu</a>
<a href="../[Link]">Lien relatif</a>
<a href="/articles/2020/10/technoweb">Lien relatif à la racine du site</a>
<a href="#section1">Lien interne (vers l'élément d'id "section1")</a>
<a href="[Link] mail</a>
<a href="[Link] téléphone</a>
Quelques attributs utiles :
target="_blank" ouvrir la cible dans un nouveau "contexte" (onglet) À utiliser à bon escient.
rel : pour qualifier la relation entre source et cible ( nofollow , noopener , noreferrer , etc.)
download : pour un lien de téléchargement
Technoweb L3 - 2023 - Benjamin Becquet 10
Ressources externes
Images :
<img src="url-de-l-image" alt="Description textuelle" />
Plusieurs versions selon l'affichage (responsive) et le support des formats :
<picture>
<source srcset="[Link] 768w, [Link] 1.5x" type="image/webp" />
<source srcset="[Link], [Link] 2x" />
<img src="[Link]" alt="logo" />
</picture>
Contenu multimédia :
<video> & <audio> , avec mécanisme similaire à <picture> pour le support des formats
Insert d'un autre document HTML :
<iframe src="url" title="description"></iframe>
Technoweb L3 - 2023 - Benjamin Becquet 11
Tableaux de données
<table> Achats bricolage
<caption>
Achats bricolage
</caption>
Produit Prix
<thead>
<tr> Pinceaux 20 €
<th>Produit</th>
<th>Prix</th>
</tr> Peinture 55 €
</thead>
<tbody>
<tr> Marteau 12 €
<td>Pinceaux</td>
<td>20 €</td>
</tr> Total 87 €
<tr>
<td>Peinture</td>
<td>55 €</td>
</tr>
⚠️ Pas pour organiser visuellement du
<tr>
<td>Marteau</td>
<td>12 €</td>
</tr>
</tbody>
<tfoot> contenu dans une page
<tr>
<th>Total</th>
<td>87 €</td>
</tr>
</tfoot>
</table>
Technoweb L3 - 2023 - Benjamin Becquet 12
Formulaires
Avec les liens hypertexte, base de l'interactivité du web
<form> : délimite un formulaire
Plusieurs types de champs disponibles, interactifs et stateful (maintiennent une valeur interne)
<input> , décliné via son attribut type (voir liste complète)
type="text"
type="checkbox"
type="radio"
type="range"
<select> + <option> + <optgroup> Choisissez une option
<textarea>
<label> , associé à un champ élément via l'attribut for
Technoweb L3 - 2023 - Benjamin Becquet 13
Formulaires
<form action="/createAccount" method="POST">
<div class="field">
<label for="mail">Adresse mail</label>
<input id="mail" name="mail" type="email" />
</div>
<div class="field">
<label for="password">Mot de passe</label>
<input id="password" name="password" type="password" />
</div>
<div class="field">
<label for="gender">Sexe</label>
<select id="gender" name="gender">
<option value="nc">Sans indication</option>
<option value="m">Homme</option>
<option value="f">Femme</option>
</select>
</div>
<div class="field">
<input id="tos" name="tos" type="checkbox" />
<label for="tos">J'ai lu les conditions d'utilisation</label>
</div>
<button type="submit">Créer mon compte</button>
</form>
Technoweb L3 - 2023 - Benjamin Becquet 14
Éléments non sémantiques ( div & span )
<div> (block) et <span> (inline)
Pas de signification ni de rendu particulier par défaut
Permettent de désigner ou grouper des fragments logiques du document
Apparence et/ou comportement définis par CSS et/ou JavaScript
<div class="field">
<label for="tos">J'accepte les conditions d'utilisation</label>
<input id="tos" type="checkbox" />
</div>
⚠️ Ne doivent pas remplacer des éléments plus adaptés.
<button onclick="…">Valider</button> ➞ ergonomie et accessibilité standards
<div class="button" onclick="…">Valider</div> ➞ tout à faire soi-même
Technoweb L3 - 2023 - Benjamin Becquet 15
Accessibilité (a11y)
Proposer un contenu lisible et utilisable aux personnes handicapées, quel que soit ce handicap.
Obligation légale pour de nombreux services (pour la France, voir le RGAA)
⚠️ Un site accessible commence par un HTML bien structuré et bien décrit
ARIA
Extension à HTML via des attributs complémentaires pour l'accessibilité ( role et aria-* )
<p role="alert" class="formMessage">Erreur de mot de passe</p>
<button aria-label="Fermer" onclick="…">X</button>
Technoweb L3 - 2023 - Benjamin Becquet 16
DOM
Document Object Model
Résultat de l'interprétation du HTML
Représentation en mémoire du document par le
navigateur
Expose une API permettant la lecture et la
manipulation du document par des langages de
script (en pratique, JavaScript)
L'inspecteur des outils de développement des
navigateurs est une représentation du DOM.
Technoweb L3 - 2023 - Benjamin Becquet 17
CSS
Cascading Style Sheets
Technoweb L3 - 2023 - Benjamin Becquet 18
Origine
Premiers temps du web : mélange contenu structuré + présentation dans le HTML
<body bgcolor="yellow">
<h1 font="Comic Sans MS">titre</h1>
<center><p>Lorem ipsum</p></center>
</body>
Problèmes vs. évolution rapide du web :
Maintenabilité et passage à l'échelle
Limitation d'expressivité
Adaptabilité aux divers supports
Accessibilité
➞ Besoin d'un langage dédié à la présentation
Technoweb L3 - 2023 - Benjamin Becquet 19
1996 : Cascading Style Sheets
HTML CSS
Contenu structuré Régles de présentation
<html> body {
<head></head> background-color: yellow;
<body> ◀▶ }
h1 {
<h1>titre</h1> font-family: sans-serif;
<p>Lorem ipsum</p> }
</body> p {
text-align: center;
</html> }
Version actuelle du standard : CSS 3.1
Référence sur le W3C : [Link]
Principes fondateurs similaires au HTML, notamment la robustesse et la tolérence aux erreurs
Technoweb L3 - 2023 - Benjamin Becquet 20
Illustration
Bonne démonstration, ancienne mais toujours d'actualité : CSS Zen Garden
Une même page HTML pour de multiples feuilles de style au design très différent
Technoweb L3 - 2023 - Benjamin Becquet 21
Lien HTML / CSS
en référençant un fichier avec une balise <link> dans le <head>
<link rel="stylesheet" href="../[Link]" />
dans le document, avec une balise <style>
<style>
.banner {
background-color: yellow;
}
</style>
inline, spécifiquement pour un élément, avec l'attribut style
<button style="border:1px solid red;font-weight:bold">Annuler</button>
Les trois peuvent cohabiter.
Technoweb L3 - 2023 - Benjamin Becquet 22
Syntaxe de base
sélecteur Sélecteur : expression de ciblage d'éléments (ou parties) dans le document
(, sélecteur*) {
propiété: valeur; Propriété : paramètre de style à appliquer aux éléments séléctionnés
propiété: valeur;
... Valeur : valeur possible définie par la règle
}
Règle : propriété + valeur
Exemple :
a {
color: #00bb76;
text-decoration: underline;
}
.bookName,
.field label {
font-style: italic;
}
article p:first-of-type::first-letter {
font-size: 130%;
}
Technoweb L3 - 2023 - Benjamin Becquet 23
Attributs HTML id et class
id :
identifiant unique dans le document
utile pour le HTML lui-même (labels, liens internes) et la sélection via CSS
class :
assignable à plusieurs éléments
un élément peut avoir plusieurs classes
utile seulement pour la sélection via CSS
<div id="connectedUsers">
<h3>Utilisateur connectés</h3>
<ul>
<li class="userName">Alice</li>
<li class="userName myself">Benjamin</li>
<li class="userName">Élodie</li>
<li class="userName">Mounir</li>
</ul>
</div>
Technoweb L3 - 2023 - Benjamin Becquet 24
Sélecteurs principaux
Type Syntaxe Exemple
Universel * *
Type d'élément <tag> a
Identifiant #<id> #searchInput
Classe .<class> .message
Descendant <ancestor> <child> .message img
Enfant direct <parent> > <child> .message > img
Même parent <child1> ~ <child2> .message ~ .separator
Suivant <child1> + <child2> .message + .separator
Attribut [<attr><operator><value>] .message[lang=fr]
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 25
Sélecteurs : pseudo-classes ( : )
Ciblage d'un élément en fonction de son "état".
État dans le DOM : tr:nth-child(2n) {
:first-child , :first-of-type , :nth-child , … background-color: pink;
}
États d'un lien : a:hover {
:hover , :active , :visited , … text-decoration: none;
}
État de champs de formulaire : button:disabled {
:focus , :disabled , :invalid , :checked , … opacity: 0.5;
}
Également opérateur :not input:not(:checked) {
color: grey;
}
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 26
Sélecteurs : pseudo-éléments ( :: )
Ciblage d'une sous-partie d'un élément.
::first-letter , ::first-line
p::first-letter {
font-size: 1.5em;
margin-left: 1em;
}
::before & ::after : injection de contenu.
p:last-of-type::after {
content: "The end.";
font-style: italic;
display: block;
text-align: right;
}
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 27
Propriétés
Le standard définit :
Quelles propriétés s'appliquent à quel type d'élément
Quelles sont les types et valeurs possibles pour les propriétés
Quelles propriétés sont héritées (ex : font ) ou non (ex : border )
Tous les aspects visuels sont couverts :
Typographie ( font-size , font-style , font-family , …)
Couleurs, images, rendu ( color , background-color , background-image , filter , …)
Marges internes/externes, bordures ( padding , margin , border , …)
Dimensions ( width / height , min-width / max-height , …)
Positionnement ( display , float , position , …)
Transformations, animations, ( transition , transform , …)
…
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 28
Propriétés raccourcies
Certaines propriétés permettent de déclarer plusieurs valeurs à la fois.
C'est le cas de font , background , margin , padding , border , flex , …
.example {
background-color: yellow;
background-image: url("imgs/[Link]");
background-repeat: no-repeat;
background-position: top left;
}
/* peut s'écrire */
.example {
background: yellow url("imgs/[Link]") top left no-repeat;
}
.example {
margin-top: 10px;
.example { .example {
margin-right: 5px;
margin-bottom: 10px; = margin: 10px 5px 10px 5px; = margin: 10px 5px;
} }
margin-left: 5px;
}
Technoweb L3 - 2023 - Benjamin Becquet 29
Unités de longueur
Les valeurs de tailles peuvent s'exprimer de très nombreuses façons :
Absolues
px : pixels
cm , mm , pt , etc. : autres unités, non recommandées sur écran
Relatives
% : pourcentage (requiert une valeur de référence dans les parents)
em : largeur d'un 'M' typographique, relatif au font-size parent
rem (root em) : comme em , relatif au font-size racine
vw / vh / vmin / vmax : pourcentages de hauteur/largeur d'affichage (viewport)
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 30
Flux de rendu et modèle de boîte
Deux grands types d'éléments en HTML/CSS : Le box model s'applique aux éléments block
block :
100% de la largeur
hauteur définie par son contenu
ex : <p> , <article> , <div> , …
inline :
largeur définie par son contenu
son rendu dans le flux du document
ex : <a> , <em> , <input> , …
En CSS : propriété display
(qui peut valoir inline-block et plein d'autres
valeurs…) (Source image WikiPedia)
Technoweb L3 - 2023 - Benjamin Becquet 31
Layout
CSS offre maintenant des solutions matures pour gérer des arrangements complexes :
Flexbox Grid
display: flex; display: grid;
arrangements sur un axe arrangements assimilables à une grille
centrages et alignements facilement réorganisable
designs fluides superposition possible
A Complete Guide to Flexbox A Complete Guide to Grid
Flexbox ou Grid ? [Link]
Technoweb L3 - 2023 - Benjamin Becquet 32
Media queries : @media
Application de sélecteurs selon les caractéristiques et fonctionnalités du client :
@media print {
video {
display: none;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
@media (prefers-reduced-motion) { … }
@media (pointer: none) { … }
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 33
Responsive Web Design
Application commune des media queries. body {
font-size: 14px;
Principe : }
servir un même contenu HTML quel que soit le device /* "breakpoint" */
@media (min-width: 600px) {
en fonction des caractéristiques du navigateur, adapter le body {
font-size: 16px;
contenu (déplacer/redimensionner/masquer/…) via CSS }
}
adaptable à largeur/hauteur d'écran, mais aussi orientation
(portrait/paysage), finesse d'affichage, etc… @media (min-width: 1000px) {
body {
margin: 0 auto;
max-width: 800px;
}
}
Approche mobile-first :
Mobile = cas par défaut
On surcharge ensuite pour
les grands écrans
Technoweb L3 - 2023 - Benjamin Becquet 34
Custom properties (aka. "variables CSS")
Apparues avec CSS3
Permettent de définir des valeurs réutilisables
Sont héritées
:root {
--mainColor: black; /* Déclaration */
}
aside {
--mainColor: #333;
}
.note {
color: var(--mainColor); /* Accès */
background-color: var(--bgColor, white); /* Accès avec valeur par défaut */
}
Référence MDN
Technoweb L3 - 2023 - Benjamin Becquet 35
"Cascading" ?
La "cascade" = algorithme au cœur du CSS qui calcule quelles règles de style s'appliquent
réellement aux éléments du DOM, à partir de différentes sources et valeurs.
Critères :
1. Importance de la règle
Règle de transition > règle marquée !important > règle normale
2. Origine de la règle
Site web > feuille de style utilisateur > style par défaut du navigateur
3. Spécificité des sélecteurs (Réf. MDN)
inline dans le HTML > #id > .class > type ▲ Bonne synthèse
Précision (ex : main p > p ) [Link]
s-cascade
4. Ordre de déclaration
À score égal par ailleurs, la dernière règle définie s'applique
Technoweb L3 - 2023 - Benjamin Becquet 36
Problématiques du CSS sur les projets d'envergure
Standard très vivant, en évolution constante (voir CSS in 2022)
En pratique, dépend du support par les navigateurs (voir [Link]
Comment continuer à supporter les vieilles versions ?
Complexité / performance
Comment s'adapter à tous les supports ?
Comment ne pas envoyer du style inutile ?
Comment garantir la cohérence à l'échelle du projet entier ?
Conflits de règles
Pratiques de namespacing des sélecteurs (OOCSS, BEM, etc…)
.search-box__button_big { … }
➞ Pour les gros projets, il est rare d'écrire du CSS brut et from scratch.
Technoweb L3 - 2023 - Benjamin Becquet 37
Pratiques et outils actuels
Préprocesseurs ou transpileurs (ex : Sass, PostCSS)
Surcouche au langage, transformé en vrai CSS pour le navigateur
Support syntaxique plus large (ex : boucles, nesting de sélecteurs)
Application de fonctions et automatisation à la compilation (ex : préfixage de propriétés)
Frameworks et design systems clef-en-main
Ex : Bootstrap, ensemble de classes utilitaires de haut niveau
<button class="btn btn-lg btn-primary">
Ex : Tailwind, Tachyons, ensemble de classes utilitaires "atomiques" + compilation
<button class="m-10 bg-red-300 text-white px-4 py-2 text-xs shadow-lg">
Lien avec le code JavaScript, approches "CSS-in-JS" (ex : Styled components, Emotion)
namespacing automatique via le code JavaScript
<button class="sc-bkzYnD sc-dmlqKv lgOOoH gNtXWi">
Technoweb L3 - 2023 - Benjamin Becquet 38
Remarques générales
Technoweb L3 - 2023 - Benjamin Becquet 39
À retenir
Ce cours est une introduction très rapide !
HTML et CSS sont trop complexes pour tout connaître d'un coup.
Plus important :
Connaître les grands principes des langages
Être sensible aux bonnes pratiques (standards, accessibilité, etc.)
Savoir chercher l'information
Se tenir un minimum au courant des évolutions
Technologie toujours "bidouillable" ➞ bricoler !
Technoweb L3 - 2023 - Benjamin Becquet 40
Outils de développement des navigateurs
Technoweb L3 - 2023 - Benjamin Becquet 41
Pour finir
Deux références que j'aime bien :
Resilient Web Design Quelques techniques HTML et CSS pour réduire
l’utilisation de JavaScript
Technoweb L3 - 2023 - Benjamin Becquet 42