TP HTML
Ecrire une page HTML dont le contenu est représenté par l’image TP_en_Image. Pour cela, suivez les indications
suivantes :
1. L’en-tête en bleu clair est un élément HEADER contenant une barre de navigation (élément NAV) en jaune. Le
contenu du HEADER (logo de la NASA, titres H1 et H3) est aligné à travers une Table HTML comme suit :
La table HTML contient une seule ligne (TR) et deux cellules (TD).
Elle doit être alignée sur toute la largeur de la page à travers le code : <table style="width :100 %">.
La première cellule (contenant l'image [Link]) doit occuper 10 % de la largeur.
La deuxième cellule (contenant H1 et H3) doit occuper 90 % de la largeur.
2. La barre de navigation (NAV) est un menu (i.e. une liste UL) contenant trois liens.
3. L’attribut align="center" est utilisé pour centrer le contenu d'un élément HTML (P, H1, H2,...).
4. La courte présentation à droite est un élément ASIDE positionné par le biais de l’attribut float tout comme dans
l'exemple [Link]. Les informations du résumé (Naissance, Université d'origine,...) sont positionnées à
travers une Table HTML.
5. Le corps de la page contient quatre parties (Présentation, Education, Récompenses, et Notes). Chaque partie est
composée de deux éléments DIV successifs. Le premier contient uniquement le titre de la partie (celui avec une
couleur de fond en bleu). Le deuxième (sans couleur de fond) contient les informations relatives à cette partie.
6. Chaque exposant, MSL1 ou NASA2, est un lien interne (élément a) qui doit pointer vers sa description qui se
trouve dans la partie Notes. Pour cela, accordez un identifiant unique (attribut ID) à chaque description dans la
partie Notes, et chaque exposant doit pointer vers l’identifiant de la description qui lui correspond.
7. La partie Récompenses contient un sommaire composé de deux titres (Américaines et Africaines). Un sommaire
HTML a la syntaxe suivante :
<details><summary>Titre</summary>
<ul>
<li>….</li> Liste contenant les détails du Titre
<li>….</li>
</ul>
</details>
8. Faites le nécessaire pour que le logo de la NASA soit cliquable : une fois on clique sur le logo on doit se faire
rediriger vers l’URL [Link] Cette URL doit s’ouvrir sur un nouvel onglet.
9. Le pied-de-page est un élément FOOTER contenant deux liens. Le lien à gauche doit pointer vers un fichier
PDF, et celui à droite doit pointer vers une adresse e-mail.