Exercices HTML - CSS

Remarques :

• Vous utiliserez un des éditeurs suivants en fonction de votre système : Notepad++ (windows), Gedit (linux) ou TextWrangler (MacOS)..
• Suivez les recommandations d'écriture de HTML vues en cours et validez vos documents.
• Introduisez des commentaires.
• Pensez à utiliser la balise meta.
• Utilisez un dossier qui porte comme nom votre nom et prénom : nom_prenom pour placer vos fichiers.
• A la fin de la séance vous enverrez le fichier nom_prenom.zip, avec tous vos fichiers, à l'adresse miguel.tomasena@univ-savoie.fr.

Procédez par étapes en validant à chaque fois le résultat.

1. Ecrivez la page (index.html) pour afficher un document comme celui présentée par la figure ci-dessous.
   Remarques :
   • Notez le titre de la page Ma page perso.
   • La page comporte : un titre, un sous-titre, une liste des liens hypertexte vers des pages à faire dans les points suivants, le logo de validation (seulement si la page est valide), et un paragraphe en bas de page.
   • Vous pouvez télecharger ici un logo de validation.
   • Vous pouvez utiliser les balises structurantes de html5 (header, footer, section, nav) si vous le souhaitez.
   
2. Ecrivez la page (profil.html) pour afficher un document comme celui présentée par la figure ci-dessous.
   Remarques :
   • Notez la ligne horizontale après un titre.
   • "Web" est un abréviation de Word Wide Web.
   • "i" est un indice de "x". "x_i" est une puissance de "2".
   • Le logo de l'université est un lien hypertexte. Vous trouvevez ici un logo.
   
3. Ecrivez la page (donnees.html) pour afficher un document comme celui présentée par la figure ci-dessous.
   Remarques :
   • Le contenu principal de cette page est un un tableau qui a comme titre (Taille).
   • Le tableau comporte six cellules dont trois sont des en-têtes (th) et trois sont des cellules normales ("photo", 80 et 176).
   • Utilisez une image quelconque pour la cellule "photo".
   • Définissez et importez un fichier de styles pour que :
     • les cellules des en-têtes s'affichent systématiquement avec une taille de police de 16 points.
     • les autres cellules s'affichent systématiquement avec un fond jaune.
   
4. Ecrivez la page (important.html) pour afficher un document comme celui présentée par la figure ci-dessous. Cette page importera un fichier de style contenant les définitions nécessaires pour :
   • Avoir une classe de style souligne utilisée pour souligner le titre (h1) ainsi que le mot re-directionné.
   • Afficher les caractères italiques (emphasis, em) en caractères de taille deux fois plus grande mais seulement quand ils se trouveront à l'intérieur d'un paragraphe.
   Par ailleurs important.html fera un redirectionnement automatique vers index.html au bout de 3 secondes.
   
5. Pour terminer définissez, et importez dans vos quatre pages, une feuille de style pour afficher :
   • la page en entier avec une bordure et une petite marge.
   • la première lettre de chaque titre (h1) deux fois plus grande.
   • le paragraphe du bas de page en blanc sur fond gris avec une marge interne de 10 pixels. Définissez la classe de style "basPage" ou bien la balises structurante footer de html5.
   L'image suivante vous montre quatre vignettes de vos pages avec ces styles.
   Peuvent vous rendre service les propriétés de style suivantes : border, margin, font-size, color, background-color, padding.