TP 4 - HTML et CSS

Retour à la page de l'UE

Dans ce TP, nous allons continuer à travailler avec HTML, et jouer un peu avec CSS.

Question 0.1. Dans ce TP, vous continuerez de modifier votre fichier index.html des semaines précédentes. Allez aussi loin que vous le pouvez dans le TP, et à la fin, créez une archive contenant votre répertoire www que vous rendrez sur Jalon.

Exercice 1 : SVG et PNG

Ajoutez dans votre fichier index.html une nouvelle section "Test SVG", structurée comme précédemment, avant votre section "Mon emploi du temps".

Question 1.1. Dans cette nouvelle section, reproduisez ce que vous voyez dans cette capture d'écran, de la manière la plus fidèle possible ! Pour l'image SVG, vous pouvez utiliser le code suivant:
<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Pour l'image PNG, vous pouvez la récupérer ici. Vous pouvez utiliser les attributs width et height pour vous assurer que les deux images ont la même taille.
Question 1.2. Vérifiez de nouveau que votre fichier index.html est valide. Si cela n'est pas le cas, corrigez toutes vos erreurs.
Question 1.3. Zoomez (beaucoup) sur votre page. Que constatez-vous ?

Exercice 2 : image maps

Question 2.1. Ajoutez une section "Mon emploi du temps cliquable" qui condiendra cette image. Ajoutez un image map de telle manière à ce que lorsque vous cliquez sur certains des enseignements, vous vous retrouviez sur la page web de l'UE correspondante (s'il y en a une, sinon choisissez une page qui a un rapport avec la matière). Faites-le pour au moins trois enseignements, dont le "TD math gr2" (attention, il vous faudra un polygone!). N'oubliez pas les attributs alt.

Exercice 3 : CSS dans votre page web

Vous allez maintenant ajouter du CSS à votre page web.

Question 3.1. Créez un fichier appellé par exemple style.css dans votre répertoire www/. Ajoutez-y le CSS nécessaire pour que toutes vos balises utilisent la police Verdana (n'oubliez pas de spécifier de quel type de police il s'agit, au cas où l'utilisateur n'aurait pas cette police installée sur son système).
Question 3.2. Allez sur Google Fonts, choisissez une police qui vous plait, et faites en sorte qu'elle soit utilisée partout sur votre page.
Question 3.3. Faites en sorte que les liens de votre page soient vert clair. Faites en sorte que lorsque la souris passe dessus, ils deviennent orange. Faites en sorte que les liens déjà visités soient vert foncé.
Question 3.4. Ajoutez une texture en fond de votre page, c'est-à-dire, une petite image qui est faite pour être répétée "en grille". Vous pouvez utiliser par exemple cette image.
Question 3.5. Ajoutez une ligne horizontale sous vos titres de niveau 2, en utilisant la balise h2 comme sélecteur dans votre fichier CSS. Vous pouvez pour cela vous inspirer du CSS de ce TP.
Question 3.6. Faites en sorte que vos titres de niveau 2 aient un fond d'une couleur de votre choix, avec une opacité de 50% (on doit voir la texture de fond de la page par transparence).
Question 3.7. Faites en sorte que votre adresse e-mail (l'image de la dernière fois) soit encadrée, grâce à l'attribut border. Vous pouvez lui donner un attribut id pour l'identifier dans votre CSS. Interdiction d'utiliser l'attribut style !
Question 3.8. Utilisez https://html5.validator.nu/ (ou le validateur sur le site du W3C) pour valider votre page index.html, et utilisez https://jigsaw.w3.org/css-validator/ pour valider votre feuille de style. Faites en sorte qu'il ne reste plus d'erreurs !

Valid XHTML 1.1