Décrire et manipuler un document numérique

Exercice collège communautaire CSS

Exercice collège communautaire CSS

Consignes pour le rendu :

• Exercices individuels à rendre au plus tard le 25/02/2024 à 19h.
• Ne rendre que le fichier CSS.
• Le nom de fichier doit être de la forme <Prénom>_<Nom>-college-4L4SC02P.css, par exemple pour William Labov, le nom du fichier sera William_Labov-college-4L4SC02P.css.
• Dépôt sur Cours en Ligne.

Point de départ

Pour débuter cette évaluation, vous devez télécharger les fichiers HTML et CSS de l’exercice et les sauvegarder dans un même dossier sur votre machine.

Note : Autrement, il est possible d’utiliser un site comme CodePen, jsFiddle, ou Glitch. Pour cela, copiez-coller simplement le contenu des fichiers dans un de ces éditeur.

Énoncé de l’exercice

Vous disposez d’undocument HTML pour la page d’accueil du site internet d’une université imaginaire et d’un CSS de départ. Vous devez compléter ce CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés.

Vous ne devez pas modifier le HTML en quoi que ce soit pour cet exercice.

Les règles suivantes vous sont imposées, mais si vous aimez le design, vous pouvez y ajoutez tout ce qui vous plait.

Style général du texte :

• Donnez à la page une propriété font-size de 10px sur tout le site.
• Donnez aux titres et autres types d’éléments des tailles de polices appropriées définies avec une unité relative adéquate.
• Donnez au corps du texte une propriété line-height appropriée.
• Centrez le titre d’en-tête sur la page.
• Augmentez légèrement la valeur de la propriété letter-spacing des titres pour qu’ils ne paraissent pas trop écrasés en donnant un peu d’air aux lettres.
• Donnez au corps du texte une valeur de propriété letter-spacing et word-spacing appropriée.
• Donnez au premier paragraphe après chaque titre dans <section> une légère indentation, disons 20 pixels.

Liens :

• Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page.
• Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu’ils sont ciblés ou survolés.

Listes :

• Assurez-vous que l’espacement des listes et éléments de liste s’accorde bien avec le style d’ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété line-height qu’une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes.
• Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose.

Polices de caractères :

• Téléchargez quelques polices gratuites. Comme il s’agit d’un collège communautaire, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police serif ample pour le corps du texte général, associée une police sans serif ou bloc serif pour les en-têtes serait pas mal.
• Ensuite, utilisez le service ad-hoc pour créer le « bulletproof @font-face code » pour ces deux fontes.
• Appliquez la police pour le corps à toute la page et celle pour les titres aux en-têtes.

Menu de navigation :

• Donnez à votre menu de navigation un style en accord avec l’apparence de la page.

Exemple

La capture d’écran ci-après montre un exemple possible du design terminé :

Un aperçu d’une apparence possible pour la page d’accueil