# TP HTML > Vous validerez *toutes* vos pages avec le service de [validation](http://validator.w3.org/) du W3C. > Vous pouvez utiliser [des aides](https://websitesetup.org/wp-content/uploads/2019/10/WSU-HTML-Cheat-Sheet.pdf) pour trouver les balises HTML. > La [référence](https://developer.mozilla.org/fr/docs/Web/HTML/Element) des éléments HTML (Mozilla Developer Network). > Une [aide](./aide.md) pour le tp. ## Correction de la syntaxe, et validation ### Exercice 0 Corrigez le code HTML suivant en utilisant le validateur du W3C : ```html

My first HTML5 document

HTML5 est vraiment super !

Vous trouverez les images sur http://upload.wikimedia.org >Utilisez avantageusement les possiblités de formatages de votre éditeur de texte, ou > la commande `sed` pour transformer le csv en html ou encore ce [programme](./src/csv2html.c) C. ## Images ### Exercice 5 Voici une image représentant les couches utilisées dans le développement WEB.
Par CaptainT7 — Travail personnel, CC BY-SA 4.0, lien.
Ecrire une page html qui affiche cette image. Les zones HTML, CSS et JS sont cliquables, et doivent ouvrir un nouvel onglet vers : - HTML : https://developer.mozilla.org/docs/Web/HTML - CSS : https://developer.mozilla.org/docs/Web/CSS - JS : https://developer.mozilla.org/docs/Web/JavaScript > - L'attribut `usemap` d'une image permet de préciser une carte (map) décrivant des zones d'une image cliquable. > - La balise `map` permet de décrire des zones (sous forme de rectangles, circles, polygones) cliquables d'une image . Un exemple > ```html > Planets usemap="#planetmap"> > > > Sun > Mercury > Venus > ``` > - Vous pouvez facilement (graphiquement) générer une map avec Gimp (filtre->Web->Image cliquable) ## Bonus ### Exercice 6 Ecrire un script shell qui permet de formater le contenu d'un repertoire en html, sous forme d'une table indiquant pour chaque entrée, le nom, les droits, la taille et la date de dernier accès correspondants. La commande ```bash ./dir2html.sh dir dir.html ``` produira le fichier `dir.html` contenant les entrées du répertoire `dir`, avec le rendu suivant : ![gallerie](./img/rep.png ':-:') >**Aides** >- Comment faire pour écrire dans un fichier depuis un script bash ? >- Pour récupèrer la liste des entrées en bash : > ```bash > l=$(ls dir) > ``` >- Pour itérer les éléments d'une liste en bash : > ```bash > for i in $l; > do > ... > done > ``` >- Pour obtenir et formater les informations sur chaque entrée, vous pouvez utiliser la commande `stat`, en adaptant > sa sortie à vos besoins. >- Les icones de fichier ![fichier](./img/file1.png) et de répertoire ![répertoire](./img/folder.png) se trouvent dans le répertoire [img](./img). >