icu.next-video

Contenu proposé par

France Télévisions

Regarde cette vidéo et gagne facilement jusqu'à 15 Lumniz en te connectant !

Il n’y a pas de Lumniz à gagner car tu as déjà consommé cet élément. Ne t'inquiète pas, il y a plein d'autres contenus intéressants à explorer et toujours plus de Lumniz à gagner.

->   En savoir plus
Techno03:02Publié le 23/10/2017

Démarrage (1/5)

3 minutes pour coder

Comment créer ton 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é.

📌 Y'à un article spécifique sur : la Structure de base d'une page en HTML

 

Ecris en code 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 Filepour "Fichier", ensuite Save as pour "Enregistrer sous" et on arrive sur cette petite fenêtre.

Petit 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 tes 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 tes documents pour les retrouver plus tard.

📌 Pour commencer à remplir un peu ton code, voici la prochaine vidéo « Ajout de texte (2/5) ».

Réalisateur : Valentin Levelli

Nom de l'auteur : Arnaud Gantier et MICODE

Producteur : Coyote Conseil

Année de production : 2017

Année de diffusion : 2017

Publié le 23/10/17

Modifié le 20/02/24

Ce contenu est proposé par