Comment apprendre le HTML en un week-end

Un guide pratique pour enseigner les bases du HTML à toute la famille en deux jours seulement.

1. Samedi matin : Découvrir ce qu'est le HTML. Commencez par expliquer que HTML signifie 'langage de balisage pour les pages web'. Imaginez-le comme les fondations d'une maison : il donne la structure de base à une page internet. Installez un éditeur de texte simple comme Notepad++ ou utilisez le bloc-notes de votre ordinateur. Créez votre premier fichier : ouvrez l'éditeur, tapez 'Bonjour le monde !' et sauvegardez avec l'extension .html. Double-cliquez sur le fichier pour l'ouvrir dans votre navigateur. Félicitations, vous venez de créer votre première page web ! Expliquez ensuite la structure de base : toute page HTML commence par des balises qui s'ouvrent et se ferment, comme des parenthèses qui encadrent le contenu.
2. Samedi après-midi : Apprendre les balises essentielles. Enseignez les balises fondamentales une par une. Commencez par les titres : <h1> pour les gros titres, <h2> pour les sous-titres, jusqu'à <h6>. Montrez comment <p> crée des paragraphes et <br> fait un saut de ligne. Explorez les listes avec <ul> pour les listes à puces et <ol> pour les listes numérotées, chaque élément étant dans une balise <li>. Pratiquez en créant une page sur les hobbies de la famille ou la liste des courses. L'important est de taper, sauvegarder, actualiser le navigateur et voir le résultat. Cette répétition aide à mémoriser naturellement.
3. Dimanche matin : Ajouter des liens et des images. Découvrez la magie des liens avec la balise <a>. Expliquez que 'href' indique où aller : <a href='https://www.exemple.com'>Cliquez ici</a>. Créez des liens vers vos sites préférés ou entre différentes pages que vous créez. Pour les images, utilisez <img src='nom-de-limage.jpg' alt='description'>. L'attribut 'alt' est important : il décrit l'image pour les personnes qui ne peuvent pas la voir. Téléchargez quelques photos de famille ou trouvez des images libres de droits en ligne. Créez une galerie photo simple ou une page de présentation de la famille avec photos et liens.
4. Dimanche après-midi : Organiser avec des tableaux et des divisions. Apprenez à structurer le contenu avec <table> pour créer des tableaux. Utilisez <tr> pour les lignes, <td> pour les cellules normales et <th> pour les en-têtes. Créez un planning familial ou un tableau de tâches ménagères. Introduisez ensuite <div>, qui permet de grouper du contenu dans des boîtes invisibles. Bien que vous n'appreniez pas encore le CSS, expliquez que <div> prépare le terrain pour rendre les pages plus jolies plus tard. Terminez en créant une page complète qui combine tout ce que vous avez appris : titres, paragraphes, liens, images et tableau.
5. Finaliser et célébrer. Créez ensemble un petit site web familial avec plusieurs pages liées entre elles. Une page d'accueil, une page pour chaque membre de la famille, une page de photos et une page de contact. Utilisez tout ce que vous avez appris pour rendre chaque page intéressante. Montrez comment vérifier que tout fonctionne en cliquant sur tous les liens. Sauvegardez tout dans un dossier dédié sur l'ordinateur. Félicitez-vous : vous maîtrisez maintenant les bases du HTML ! Discutez des prochaines étapes possibles : apprendre le CSS pour la mise en forme, ou JavaScript pour l'interactivité.