## Niveau Débutant Salut! Commençons par les bases. HTML est un langage de balisage qui nous permet de structurer notre contenu sur le web. Pour commencer, essayons de créer une simple page web avec un titre et un paragraphe. ```html <!DOCTYPE html> <html> <head> <title>Ma première page</title> </head> <body> <h1>Salut, je suis le titre!</h1> <p>Et moi, je suis un paragraphe.</p> </body> </html> ``` ## Niveau Intermédiaire Maintenant que tu as les bases, passons à quelque chose d'un peu plus complexe. Utilisons certaines des nouvelles fonctionnalités de HTML5, comme les éléments `header`, `footer`, `nav`, `article`, `section` et `aside`. ```html <!DOCTYPE html> <html> <head> <title>Ma deuxième page</title> </head> <body> <header> <h1>Voici mon site</h1> <nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section> <article> <h2>Mon premier article</h2> <p>C'est le texte de mon premier article.</p> </article> <aside> <h3>À propos de l'auteur</h3> <p>C'est moi, l'auteur!</p> </aside> </section> <footer> <p>© 2023 Mon Site</p> </footer> </body> </html> ``` ## Niveau Expert Bien joué! Maintenant, ajoutons du CSS pour rendre notre page plus jolie. CSS est un langage qui nous permet de styliser notre contenu HTML. Nous allons ajouter un fichier CSS externe et le lier à notre page HTML. ```html <!DOCTYPE html> <html> <head> <title>Ma troisième page</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <!-- Le même contenu que la deuxième page --> </body> </html> ``` Et voici le contenu de notre fichier `styles.css`: ```css body { font-family: Arial, sans-serif; } header { background-color: #f8f9fa; padding: 20px; text-align: center; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { text-decoration: none; color: #007bff; } section { margin: 20px; } article { margin-bottom: 20px; } aside { background-color: #e9ecef; padding: 20px; margin-bottom: 20px; } footer { background-color: #f8f9fa; text-align: center; padding: 20px; } ``` Voilà! J'espère que ces exercices t'aideront à comprendre les bases de HTML et CSS. Bonne chance!