CSS : Exercice Mise en forme du texte et des liens

Header :

Mette en forme les textes est la base du CSS, vous allez la pratiquer à travers tous les exercices suivant en plus d'autres notions, il est donc important de saisir cette occasion pour vous concentrer sur cette partie et donc mieux la maîtriser pour la suite.

Body

Instruction

Comme thème Je vous invite à prendre un thème dans la continuité de l'exercice précédent, si vous avez pris par exemple un chanteur, faites-en un autre, ou faite un article sur sa musique. Si vous avez fait un jeu, présentez un autre jeu, ou faite un article sur un aspect du jeu. Exemple: si vous avez pris FIFA 2022, faites un article sur le dernier champion du monde et son parcours à celui-ci.

  1. Créez un fichier CSS StyleNomDuTheme.css. Tout le styling devra se trouver dedans.
  2. Créez un fichier HTML nommé ArticleNomDuTheme.html et ajoutez la structure HTML de base, y compris les balises <html>, <head>, <meta>, <title>, <link>, et <body>, n'oubliez pas d'y lier votre CSS !
  3. À l'intérieur du <body>, ajoutez un en-tête (<header>) avec un titre principal, par exemple "Mon Site Web".
  4. Créez une section de contenu (<section>) avec un titre (<h1>) et quelques paragraphes (<p>) de texte. Utilisez différentes couleurs de texte, tailles de police, et polices de caractères pour styliser le texte à votre goût.
  5. Ajoutez des liens (<a>) dans votre contenu, par exemple, des liens vers des pages "Accueil", "À Propos", et "Contact". Appliquez des pseudo-classes comme :hover pour changer la couleur ou le style des liens lorsque la souris les survole.
  6. Utilisez une liste non ordonnée (<ul>) avec des éléments de liste (<li>) pour créer une liste de liens supplémentaires. Appliquez également des styles aux éléments de liste.
  7. Insérez une image (<img>) dans votre contenu. Assurez-vous d'inclure un attribut "alt" avec une description significative pour l'image, par exemple, "Image de paysage". Appliquez également une bordure (border) à l'image pour la mettre en valeur.
  8. Créez un pied de page (<footer>) avec des informations de copyright.
  9. Explorez différentes propriétés CSS pour la stylisation, telles que color, font-size, font-family, text-decoration, line-height, margin, padding, border, etc.
  10. Facultatif : Si vous le souhaitez, ajoutez une police de caractères personnalisée en utilisant la règle @font-face et la propriété font-family.
  11. Testez votre page web dans un navigateur pour vous assurer que la stylisation est appliquée comme prévu.

Conseils :

  • Utilisez des couleurs et des styles qui correspondent à votre propre vision artistique.
  • Expérimentez avec différentes combinaisons de propriétés CSS pour obtenir l'apparence souhaitée.
  • Assurez-vous que votre page est lisible et que les liens sont clairement identifiables.
  • Choisissez une image pertinente pour votre contenu et assurez-vous que l'attribut "alt" décrit correctement l'image.

Une fois l'exercice terminé, ouvrez votre page dans un navigateur pour voir le résultat de votre stylisation du texte, des liens, et de l'image. Amusez-vous à explorer les différentes possibilités de conception !

Tags

créé le 2023-09-01 à 11:19

Interactive Graph
Table Of Contents
CSS : Exercice Mise en forme du texte et des liens
Header :
Body
Instruction
Conseils :
Footer
Tags