Rappels sur HTML et CSS

Licence Informatique, semestre 6

Jean-Marc LecarpentierPascal Vanier

Enseignement des technologies du Web

 

Rappels sur HTML et CSS

Notes de cours

  • HTML : la base du web
    • Balisage et structure de documents
    • Les règles de HTML
    • Notions d’hypertexte
    • Notions d’accessibilité
    • Les éléments de structuration d’HTML5
  • Introduction à CSS
    • Propriétés de style
    • Règles CSS
    • Intérêt des feuilles de style
    • Cascade et héritage
    • Classes et identifiants
    • Groupes et combinaison de sélecteurs
  • Modèle de boîte CSS3
    • Visual formatting model de HTML/CSS
    • Propriétés de base des boîtes
    • Quelques propriétés CSS3
    • Alignement de contenu
  • Bases de la mise en page avec CSS
    • Propriété display
    • Positionnement absolu et relatif
    • Mise en page classique et moderne

Travail personnel

Objectifs

  • Réviser les principes de base de HTML et CSS
  • Manipuler l'outil de base de la mise en page moderne : les grilles CSS. (à partir de l'exercice 3)

Attention, les grilles CSS sont un ajout assez récent : ce que nous allons voir ne fonctionnera pas forcément sur tous les navigateurs (en particulier ceux qui sont un peu anciens). Comme indiqué dès le début, tous les TP doivent être faits sous Firefox.

Exercice 1 (optionnel) — Utilisation de l’inspecteur de Firefox #

Remarque : cet exercice était donné en TP de « Technologies web 1 » en L1 en 2017-2018. Si vous l'avez déjà fait et que vous en maîtrisez le contenu, vous n'êtes pas obligé·e de perdre du temps à le refaire.

L'inspecteur de Firefox est un outil fondamental pour qui s'essaie au CSS. (Des équivalents existent pour les autres gros navigateurs.)

  1. Aller sur un site quelconque, faire un clic droit sur un élément, et choisir « Examiner l'élément » (ou Inspect Element). Une fenêtre apparaît, avec trois parties :
    • à gauche, le HTML ;
    • au milieu, les règles CSS appliquées ;
    • à droite, les propriétés CSS calculées (et d'autres onglets utiles).
  2. Dans la partie centrale, décocher des propriétés CSS et observer l'effet sur la page.
  3. Dans la partie centrale, modifier des valeurs de propriétés CSS et observer l'effet sur la page (et sur les valeurs calculées à droite).
  4. Cliquer sur la flèche en haut à gauche de l'inspecteur, et parcourir les éléments de la page.
  5. Aller voir l'onglet « Modèle de boîte » (« Box model ») du cadre de droite.

Ce qui est particulièrement important, c'est que l'inspecteur ne vous montre pas le code que vous avez écrit, mais ce que le navigateur en a compris, ce qui permet de détecter de nombreuses erreurs.

  1. Aller sur cette page et regarder le code source (clic droit puis « Code source de la page », ou alors « Control-U »).
  2. Retourner sur la page, ouvrir l'inspecteur et regarder la partie HTML ; comparer au code source de la page. Comprenez-vous ce qui se passe avec le paragraphe et la liste ?
  3. Inspecter le footer : quelles sont les propriétés CSS que « voit » vraiment le navigateur ? Trouver l'erreur dans le code.

L'intérêt de l'inspecteur peut vous sembler anecdotique pour l'instant, mais il deviendra vite incontournable quand vous commencerez à faire de la mise en page.

Exercice 2 (optionnel) — Manipulation des balises HTML et reproduction d’un modèle #

Inspiré d’un exercice d’Hervé Le Crosnier
Remarque : cet exercice était donné en TP de « Technologies web 1 » en L1 en 2017-2018. Si vous l'avez déjà fait et que vous en maîtrisez le contenu, vous n'êtes pas obligé·e de perdre du temps à le refaire.

On vous fournit deux images de la même page web : la première est est la version avec les styles de base du navigateur, tandis que pour la seconde on a appliqué une feuille de style. Les images de Marylin et Tom, les modèles et le texte sont disponibles dans cette archive.

Écrire en HTML5 valide, sans CSS, le code permettant d'obtenir le premier modèle. On s'efforcera d'utiliser des éléments ayant une sémantique correcte. Il peut être utile de jeter un œil à la 2e version pour repérer les parties qui auront besoin d’être stylées, mais attention : interdiction d'utiliser les éléments div et span, et les attributs id et class ! Ne pas hésiter à s'inspirer de la liste des éléments HTML.

Ajouter ensuite une feuille de style en essayant d'obtenir le second modèle, sans changer le corps du HTML. Attention, si le HTML a été fait correctement, la seule modification nécessaire est l'ajout de la feuille de style ! Il est toujours interdit d'utiliser les éléments div et span, et les attributs id et class ! Certains détails ne sont pas faciles à reproduire pour les débutant·e·s : ce n'est pas grave si vous n'y arrivez pas. Faites ce que vous pouvez.

NB : les images fournies montrent le rendu obtenu avec Firefox (ce sera toujours le cas dans ce cours). Il est possible que le résultat ne soit pas tout à fait le même sous Chrome. Il est donc recommandé d'utiliser Firefox pour faire les TP.

Exercice 3 — Introduction à la mise en page avec les grilles CSS #

Télécharger cette archive, elle contient un fichier HTML et une feuille de style CSS qui lui est associée. Le document HTML contient un div de classe conteneur avec trois éléments section dedans. Les règles déjà présentes dans le CSS ne font qu'ajouter des couleurs et des bordures. En particulier, le conteneur a un fond rouge et les sections ont un fond jaune.

Dans cet exercice, on va utiliser les grilles CSS pour présenter les trois sections en colonnes, et ce faisant découvrir tous les aspects des grilles CSS qui sont nécessaires dans ce cours, ce qui ne représente qu'une petite partie des possibilités qu'elles offrent.

Il n'y a pas de notes de cours sur les grilles : cet exercice sert d'introduction, et pour les détails techniques vous pouvez vous tourner vers les ressources suivantes :

  1. Ajouter dans la feuille de style les propriétés suivantes au conteneur, et observer ce qui se passe :

    display: grid;
    grid-template-columns: 200px 300px 200px;
    

    Les sections devraient se retrouver en colonnes, sans qu'on n'ait eu besoin de leur appliquer de propriétés : la mise en forme est spécifiée au niveau du parent (contrairement aux techniques utilisant display: float ou display: inline-block).

  2. Les trois valeurs que l'on a mises dans grid-template-columns sont les largeurs des trois colonnes. Essayer d'autres largeurs, éventuellement avec d'autres unités (pourcentages, em…), puis revenir à la version initiale.

  3. Normalement, si votre écran est suffisamment grand, il devrait rester de l'espace à droite dans le conteneur. On peut gérer le positionnement de nos colonnes dans la largeur disponible avec la propriété justify-content (toujours sur le conteneur). Essayer les diverses valeurs possibles et en choisir une.

  4. Penchons-nous à nouveau sur la propriété grid-template-columns. Remplacer une des trois longueurs par la valeur 1fr. Que se passe-t-il ?

  5. L'unité fr signifie « fraction » : chaque colonne dont la largeur est donnée en fr aura une largeur proportionnelle au nombre de fr indiqué. En particulier, dans notre cas, l'espace disponible est distribué aux deux colonnes proportionnellement à leur fr.

    Remplacer la largeur d'une autre colonne par 3fr. Que se passe-t-il ? Essayer d'autres valeurs.

  6. Ajouter la propriété grid-gap: 10px sur le conteneur. Constater que la proportionnalité entre les colonnes spécifiées avec des fr est toujours respectée.
  7. Enlever une des trois valeurs, afin de ne spécifier que deux colonnes. Que se passe-t-il ?
  8. S'il n'y a pas assez de colonnes, les éléments en trop « passent à la ligne » : une nouvelle rangée est créée en-dessous de la première. On peut donc choisir le nombre de colonnes indépendamment du nombre d'éléments dans le conteneur.

    Il est possible de spécifier les hauteurs des rangées avec grid-template-rows (toujours sur le conteneur). Essayer de mettre 300px 50px. Que se passe-t-il ?

  9. De façon générale, c'est une très mauvaise idée de fixer des hauteurs en CSS, car le contenu peut dépasser et/ou se retrouver caché. On fixe les dimensions horizontales et on laisse au navigateur la liberté d'adapter les dimensions verticales (en fonction du contenu, de la taille de la police ou de la fenêtre).

    On n'aura donc généralement pas besoin de spécifier la hauteur des rangées en pixels. Cependant on peut utiliser des fr : le navigateur calculera des hauteurs qui ne font pas dépasser le contenu. Utiliser les valeurs suivantes :

    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 3fr;
    

    On voit que la deuxième rangée est effectivement trois fois plus haute que la première.

  10. Ajouter un quatrième élément section dans le conteneur, avec très peu de texte (typiquement un seul mot, pas de titre). Normalement, cette nouvelle section devrait être beaucoup plus grande que son contenu. Cela va nous permettre d'expérimenter les propriétés justify-items et align-items (toujours sur le conteneur). Attention, bien faire la différence entre justify-content, qui modifie la position des colonnes dans le conteneur, et justify-items, qui modifie la position des éléments dans leur colonne.

    La valeur par défaut de ces deux propriétés est stretch : la boîte s'étire pour remplir sa cellule. Tester d'autres valeurs pour ces deux propriétés (center, start ou end).

  11. Si on choisit center pour les deux, la taille des rangées et des colonnes commence à devenir moins claire. L'inspecteur de Firefox intègre un outil pour visualiser les grilles : chercher le conteneur dans la vue HTML et cliquer sur le petit « grid » à sa droite. Des lignes apparaissent dans la page pour matérialiser la grille. (Il y a quelques options dans l'onglet « Mise en page » du cadre de droite.)
  12. Donner un identifiant à la quatrième section, et utiliser cet identifiant dans la feuille de style pour donner à cet élément les propriétés suivantes :

    justify-self: stretch;
    align-self: stretch;
    

    On peut ainsi appliquer des propriétés d'alignement à un unique fils du conteneur.

  13. Pour finir, il est important de comprendre que la mise en page web se fait toujours hiérarchiquement : on positionne les grosses zones, puis on s'occupe du contenu de chaque zone, et ce récursivement jusqu'aux feuilles de l'arbre DOM.

    À titre d'exemple, remplacer le contenu de la quatrième section par une liste (ul) de six items, puis passer le ul en display: grid et utiliser grid-template-columns et grid-template-rows pour afficher les items sur une grille ayant 2 rangées de 3 colonnes (dont vous êtes libres de choisir les dimensions). Attention, contrairement à div et section, les éléments ul et li ont des propriétés CSS par défaut (notamment des marges et paddings) : il faudra en enlever ou en modifier pour faire quelque chose de propre !

    Capture d'écran du résultat final
    Un résultat final possible

Exercice 4 — Mise en pratique des grilles CSS #

Récupérer cette archive et la décompresser à un endroit approprié. Elle contient une page HTML (avec une bannière, un pied de page, un menu de navigation, un article principal et un encadré d'information), ainsi que deux feuilles de style. La première, base.css, règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style layout.css vide, qui va servir à régler la mise en page.

Compléter la feuille de style layout.css pour que la page respecte le modèle suivant, en utilisant les grilles CSS. Attention, vous ne devez pas modifier le HTML (ni base.css), tout doit être fait dans la feuille de style !

Quelques précisions :

  • Les items du menu doivent faire 15em de largeur
  • L'encadré bleu doit faire 200 pixels de large, tandis que l'article principal doit prendre tout le reste de la largeur.
  • L'encadré bleu doit être centré verticalement par rapport à l'article.

Pour le reste, vous êtes libres de choisir les dimensions, tant que le résultat ressemble au modèle.

Modèle à réaliser
Capture d'écran de la page à réaliser.

Exercice 5 — Reproduction d’un modèle simple #

Cet exercice consiste à reproduire l'apparence d'une version (très) simplifiée de la page d'accueil d'un site de vente de céramiques. Reproduire un site web existant est une des manières les plus efficaces de progresser.

Modèle de la page à reproduire

On vous fournit le HTML, les images, et une feuille de style (presque) vide dans cette archive. À vous de la compléter pour obtenir un rendu le plus proche possible du modèle, sans modifier le HTML  !

Les tailles (hauteurs, textes) n'ont pas d'importance, faites au mieux. Les trois fonds gris en haut à droite sont #F9F9F9, #F4F4F4, et #EDEDED. Les couleurs de fond des blocs sont #DBEAD8 (vert), #C2D4D8 (bleu), et #B0ABC3 (violet).

Note : il n'est pas interdit d'aller voir le CSS du site original, mais ça ne devrait pas vraiment vous aider (plutôt l'inverse).