Ta première page
Le moment est venu de créer ta toute première page HTML, pour de vrai.
Tu viens de découvrir le squelette d'une page HTML dans le chapitre précédent. Maintenant, on passe à la pratique avec deux petits défis.
Pas de piège, pas de note. Juste toi et ton code.
Défi 1 : Remets les pièces du puzzle dans l'ordre
Ces 10 lignes forment une page HTML complète... sauf qu'elles sont mélangées. Utilise les flèches pour les remettre dans le bon ordre.
Trie ces lignes pour reconstituer une page HTML valide. La première ligne doit être en haut.
1
<body>2
<!DOCTYPE html>3
<title>Mon site</title>4
<meta charset="UTF-8">5
<html lang="fr">6
<head>7
<h1>Bienvenue</h1>8
</head>9
</body>10
</html>Défi 2 : Complète le squelette
Le code ci-dessous est presque prêt, mais il manque deux trucs :
- Un titre dans
<title>(ce qui apparaît dans l'onglet du navigateur) - Du contenu visible dans
<body>(un titre, un paragraphe... ce que tu veux)
Tu peux voir le résultat en direct dans l'aperçu à droite.
HTML
Aperçu
Voyons où tu en es
?La page commence bien par <!DOCTYPE html>
?La balise <html> a un attribut lang (pour indiquer la langue)
?L'encodage UTF-8 est déclaré (pour les accents)
?Le viewport est configuré (pour le responsive)
?Le <title> n'est pas vide (c'est le texte dans l'onglet)
?Le <body> contient quelque chose de visible
Astuce : si le titre apparaît dans l'onglet de l'aperçu et que tu vois du contenu dans la page, c'est gagné.