Images HTML — Introduction à CSS

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Images HTML — Introduction à CSS

Notes de cours

  • Images HTML
    • Formats d’image pour le web
    • L’élément img et ses attributs
    • Images mappées
  • 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

Travail personnel

Objectifs

Ce TP vous fait revoir (ou découvrir) les bases du CSS et l'utilisation de l'inspecteur de Firefox.

Exercice 1 — Expérimentation du CSS #

Reprendre la page simple sur Tim Berners-Lee créée au TP précédent (vous pouvez en télécharger une correction ici), et appliquer les styles suivants, en utilisant une balise <style> (pas un attribut !) :

  1. mettre les titres de section en bleu ;
  2. mettre le titre principal en italique ;
  3. mettre les liens en gras ;
  4. mettre des puces carrées à la place des puces rondes dans la liste ;
  5. enlever le soulignement des liens.

Appliquer ensuite les styles suivants, en expérimentant :

  1. augmenter la taille de la police du titre principal ;
  2. ajouter un « cadre » autour des images (essayer plusieurs styles et plusieurs épaisseurs) ;
  3. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

Exercice 2 — Utilisation de l’inspecteur de Firefox #

Vous trouverez sur cette page quelques explications sur les réponses aux questions.

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 3 — Manipulation des balises HTML et reproduction d’un modèle #

Inspiré d’un exercice d’Hervé Le Crosnier

Un corrigé de cet exercice est disponible (HTML seul ; avec CSS ; archive). Attention, le rendu n’est pas forcément exactement le même sous Chrome que sous Firefox.

Attention, si vous avez déjà commencé cet exercice lors du précédent TP, notez bien que dans cette version on vous demande le CSS, et qu'il y a des consignes précises !

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 4 (optionnel) — Listes et menus #

Réaliser un menu avec une liste d'items contenant des liens, puis rédiger des feuilles de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple.

menu vertical
Un menu vertical.
menu horizontal
Un menu horizontal (regarder la propriété display).

Exercice 5 (optionnel) — Reproduction d’un modèle #

On vous donne une image d'une page web, version simplifiée d'une page du site WikiHow.

Exemple de page à réaliser
Capture d'écran de la page
(Cliquer pour voir en taille réelle ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

On vous demande de créer du code HTML5 (valide) et CSS reproduisant ce modèle, aussi fidèlement que possible. Télechargez cette archive, qui contient les images nécessaires et les textes (fichier textes.txt), ainsi qu'une feuille de style CSS qui ajuste la police de la page.

Informations complémentaires

Les couleurs de fond sont le blanc, le vert #93B874, le gris clair #F6F5F4, et le gris foncé #ECEBE8. Les bordures sont en gris #E5E5E5 ou en vert #89AC6C (menu).

La couleur de base du texte est #545454 (brun très sombre). Les autres couleurs de texte sont le blanc (pied de page), le gris #737373 (fil d'Ariane), le noir #242424 (titres), et le vert très sombre #336633 (liens).