Plan de la séance #

  1. Rappel : HTML
  2. Introduction à CSS (historique et concepts clés)
  3. Atelier : création d’une page Web en CSS et en HTML

1. Rappel : HTML – baliser le texte #

  • pourquoi des balises ?
  • quelle version de HTML ?
  • un format pérenne ?

2. Rappel : La structure d’un document HTML #

<!DOCTYPE html>
<html lang="fr">
  <head>
	  <title>Ma page</title>
	  <link rel="icon" href= "favicon.ico" />
	</head>
	<body>
	  <p>Du texte.</p>
	</body>
</html>

3. HTML : Exercise #

  • ouvrez un éditeur de texte (VSCode, Codium, Atom, Vim, etc.)
  • créez un fichier ma-page.html
  • renseignez un titre avec une balise <h1>
  • ajoutez quelques renseignements sur cette page dans une balise <details>
  • écrivez quelques lignes avec la balise <p>
  • enregistrez votre fichier puis ouvrez-le avec votre navigateur favori

4. CSS #

  • 1994 : Håkon Wium Lie, au CERN, commence à travailler sur le CSS.
  • 1996 : Le W3C publie la première norme pour CSS
  • Cascading Style Sheets
  • 1999 CSS3 : couleurs , RGBA, HSLA , coins arrondis (border-radius:), ombres (hauteur, largeur, flou), dégradés, images d’arrière-plan multiples
  • cascading : Indique la priorité avec laquelle les informations sont traitées

5. CSS : Historique #

  • La séparation de la structure du document de sa mise en page était un objectif du HTML depuis sa création en 1990 par Team Berners Lee
  • Il existait déjà des technologies permettant de réguler le style d’une page : Word a été lancé en 1983, TeX en 1979
  • Selon l’idée originale, chaque navigateur aurait dû produire sa propre feuille de style
  • Encouragé par Dave Ragget (le principal architecte de HTML3.0), Håkon a publié la première version de CSS 3 jours avant la présentation de Netscape Navigator
  • 1995 : création de la liste de diffusion www-style et premier Workshop dédié à CSS
  • 1996 : Internet Explorer et Netscape en concurrence pour prendre en charge CSS

5. CSS : Historique

Points de discussion après première présentation #

  • Équilibre entre les préférences de l’auteur et celles de l’utilisateur
  • CSS n’est pas un langage de programmation complet

6. CSS : mettre en forme (mais pas que) #

  • appliquer une mise en forme à partir d’une sémantique
  • des règles imbriquées
  • langage spécifique à un domaine (domain specific language)
  • langage déclaratif (vs. langages impératifs)
  • langage pour la mise en style (stylesheet language): peut être utilisé pour décrire la présentation d’un langage de balisage tel que HTML
  • langage de Turing incomplet

p {
  text-align: right;
}


<!DOCTYPE html>
<html lang="fr">
  <head>
	  <link rel="stylesheet" href="styles.css">
	  <title>Ma page</title>
	</head>
	<body>
	<p>Du texte.</p>
  </body>
</html>

5. CSS : mettre en forme (mais pas que)

Exercice #

  1. créez un fichier styles.css avec votre éditeur de texte que vous placez au même niveau que votre fichier HTML précédemment créé
  2. indiquez que la couleur de votre titre de niveau 1 doit être rouge avec la propriété color
  3. enregistrez votre fichier
  4. modifier votre fichier HTML précédent pour que la feuille CSS puisse être appelée
  5. affichez votre fichier HTML dans votre navigateur web préféré

7. CSS : Concepts fondamentaux #

  • Sélecteurs = élément, #id, .class
  • Le modèle de boîte = padding, margin, border
  • Display = inline (span, i), block (div, p), flexbox, grid

7. CSS : Concepts fondamentaux

Le modèle de boîte #

Box model