Images HTML

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Images HTML

Notes de cours

  • Images HTML
    • Formats d’image pour le web
    • L’élément img et ses attributs
    • Images mappées

Travail personnel

Objectifs

Pas d'exercice spécifiquement sur les images HTML : l'exercice de ce TP vise à vous entraîner à comprendre une feuille de style existante, ce qui n'est pas forcément évident (même quand il s'agit de ses propres feuilles de style !).

Exercice 1 — Analyse d’une feuille de style

Les figures suivantes montrent le rendu de deux pages d'un site de poèmes.

Les figures suivantes montrent les deux mêmes pages avec une feuille de style différente.

Les deux feuilles de style vous sont données. L'exercice consiste à créer le HTML, de façon à ce que les pages fonctionnent pour les deux feuilles de style.

Les fichiers nécessaires (feuilles de style, photo de Robert Desnos, textes et modèles) sont dans cette archive.

  1. Créer le HTML de la page d'accueil. Il doit suffire de changer le lien de la balise link rel="stylesheet" pour passer d'un style à l'autre. Attention : vous ne devez pas modifier le CSS ! Notez bien qu'il est nécessaire de regarder les deux modèles pour comprendre la structuration de la page. Indice : la boîte #contenu contient tout ce qui n'est ni la bannière ni le pied de page. La boîte #principal contient tout ce qui change d'une page à l'autre sur le site.
  2. Faire de même pour la page du poème. Le HTML n'est différent qu'au niveau du contenu principal : il ne faut pas recommencer de zéro, au contraire !