Comment créer votre site web en HTML
Depuis le temps que tu navigues sur Internet, tu as dû voir des centaines, voire des milliers de site ! Veux-tu apprendre comment en créer un ? C’est exactement ce que je te propose de découvrir !
C’est bientôt l’anniversaire d’une amie qui adore créer des sites. Pour lui souhaiter son anniversaire, je me suis dit que j’allais lui coder une page en HTML, le langage pour créer des sites web !
En faisant ce site internet, on va apprendre à écrire du code en HTML, à mettre des images et à ajouter des liens. Une fois que tu sauras comment faire tout ça, tu pourras créer des sites sur les sujets que tu veux. Mais avant de continuer, je te propose de regarder les tutos « Transformer une page internet » pour savoir comment afficher et modifier le code de n’importe quel page web. Si c'est déjà fait on peut commencer à coder une page en HTML. Comme c’est la première fois, on va partir sur un exemple assez simple.
L'éditeur de texte
Télécharge un petit logiciel qui s'appelle Sublime Text. Pour trouver ce logiciel, il faut aller sur le site www.sublimetext.com puis cliquer sur Download (Télécharger.) L’avantage de ce logiciel, c’est qu’il va colorer notre texte pour le rendre plus facile à comprendre et donc à écrire.
(Si tu suis ce tutoriel sur un ordinateur à l’école ou que tu ne peux pas télécharger de logiciel, pas de problème tu peux tout faire sur Bloc-notes si tu utilises un ordinateur Windows ou sur Textedit si tu utilises un Mac.)
Une fois que le logiciel est installé tu peux l’ouvrir et normalement tu arrives sur une page complètement vide. C’est normal. On va écrire uniquement en code : des lettres, des chiffres et des symboles, alors pas besoin d’un logiciel très compliqué.
Structure de base d'une page en HTML
La première chose à faire quand on écrit un code en HTML c’est d’indiquer à l’ordinateur qu’on va utiliser ce langage. Pour ça on écrit dans la première ligne de mon document :
<!DOCTYPE html>
Ensuite on va ajouter notre première balise :
<html>
</html>
Une balise définit une zone dans laquelle on va pouvoir ajouter du contenu. C’est dans cette balise par exemple que l’on va mettre tout notre code HTML.
Ensuite à l’intérieur de la balise <html> on va ajouter deux autres balises :
<head> </head>
Head en anglais ca veut dire tête. Dans cette balise on va mettre du contenu qui va être lu par le navigateur, mais qui ne va pas être affiché directement sur la page.
<body> </body>
Body ça veut dire corps en francais. C’est dans cette balise que l’on va mettre tout ce qui va être vraiment affiché.
Puis, ajoute ce bout de code dans la balise <head> :
<meta charset="utf-8" />
<title>Bon anniversaire Chloé</title>
La première ligne sert simplement à ce que l’affichage du texte se fasse correctement, la deuxième sert à donner un titre à notre page HTML.
Pour éviter de perdre ce que l’on a fait, on va l’enregistrer :
On clique sur File pour "Fichier", ensuite Save as pour "Enregistrer sous" et on arrive sur cette petite fenêtre.
Maintenant conseil d’ami : Les noms un peu débiles en "aaaa" ou "lololilol", c’est bien, mais si vous voulez ne pas vous perdre plus tard il vaut mieux prendre l’habitude de bien nommer ses fichiers. Celui-là je vais le placer dans mes documents et l'appeler Tuto1.html. Encore une fois c’est très important de bien nommer vos documents pour les retrouver plus tard.
Pour commencer à remplir un peu votre code, rendez-vous dans la prochaine vidéo « Ajout de texte (2/5) ».
