Exercices html et cssCette page présente les exercices associés à la formation. Les fichiers servant de base aux exercices sont disponnibles ici : Exercices.
La correction est présentée sur cette page. Libre à vous de la consulter ou non pendant ou après la formation.

Tableaux

Partie 1 : structure

Réaliser le tableau suivant à partir des fichiers présents dans le dossier fournit. Pour afficher les lignes, il est possible d'ajouter à la balise <table> un attribut border="1px". Ceci sera déconseillé dans la suite des exercices, l'apparence étant de préférence gérée dans les css.

Partie 2 : habillage

Réaliser le tableau suivant en faisant évoluer le code de la partie 1 de cet exercice. La couleur de l'entête et des bordures est #337AB7, une ligne sur deux dans le corps du tableau est de la couleur #D8E2EB, les autres sont blanches.

Positionnement

Réaliser la page suivante en vous servant du fichier fournit. Utiliser les balises html5 (main, nav, section) pour catégoriser les éléments de la page et pour pouvoir réaliser les sélecteurs css. La couleur utilisée pour l'entête et le pied de page est #337AB7

Mise en forme d'une page

Créer le lien suivant en vous servant des fichiers fournits. Vous devrez utiliser les pseudo-classes associés aux liens pour y parvenir. La couleur utilisée est #337AB7

Tableau entête fixée

Réaliser le tableau suivant sachant que l'entête est fixe et que le contenu peut défiler grâce à l’ascenseur sur la droite. Vous utiliserez les balises thead et tbody pour distinguer les parties fixes des parties qui sont déplacées avec l'ascensseur. La couleur utilisée pour l'entête est #337AB7, une ligne sur deux utilise est de la couleur #D8E2EB, l'autre est blanche

Page htl simple

Mettre en forme le texte du poème "A une passante" fournit dans les fichiers d'exercices afin d’obtenir le rendu visuel suivant. Dans un premier temps, vous pourrez uniquement catégoriser le contenu de la page html puis ensuite modifier la css afin d'obtenir le résultat attendu. Le lien vers la page de l'auteur ne fonctionne pas dans l'exemple ci-dessous, vous devrez le faire pointer vers la page du même nom.

Menu css

Réaliser le menu déroulant suivant (vous vous servirez des balises html5). La couleur sombre est #333, la couleur claire est #111

Site complet

Créer la page d’accueil d’un site avec un bandeau de présentation, une barre de navigation en haut, une sidebar sur la droite et un pied de page. Le site pourra ressembler à ceci. Vous êtes libres de modifier l'aspect visuel de cette page selon vos goûts. Il convient de conserver les parties présentes sur cette page et disposées de manière identique (un menu en haut, une sidebar sur la droite, et des marges à gauche et à droite.