Ajout de texte - Créer un site en HTML (2/5)

3 minutes pour coder - Créer un site en HTML

Chargement de la playlist en cours...

Comment commencer à coder ? 

Dans la vidéo précédente on a préparé notre document pour pouvoir coder en HTML et commencer notre carte d'anniversaire. Maintenant il est temps de coder un peu et de voir ce que ça donne.

Donc ça c’est le résultat que je veux, la première chose à faire c’est d’ajouter le code du titre et du texte. Si tu as fermé l’éditeur HTML, il faut d’abord retourner sur le fichier.  Normalement si tu lances le logiciel “Sublime Text” le dernier fichier va s'ouvrir directement. Si ce n’est pas le cas tu peux cliquer sur “File” pour fichier puis sur “Open file” pour ouvrir un fichier. Il reste simplement à retrouver l’emplacement où tu as enregistré le fichier du code. Une fois que tu es sur le fichier de l’épisode précédent on peut continuer.

Je vais commencer par mettre une balise pour créer un titre dans la balise <body>. Pour rappel c’est à l’intérieur des balises <body> que l’on écrit ce que l’on veut afficher sur la page.

Pour faire ça je vais simplement mettre une balise H1. C’est une balise de titre : 

<h1> </h1>

“H1” ça veut dire que l’on veut le titre le plus important, si on marque “H2”, ce sera un titre un peu moins important et “H3” encore moins.

Une fois que j'ai mis mes balises de titres je vais pouvoir mettre mon titre à l’intérieur. Je vais écrire “Bon anniversaire Chloé !”

Ensuite je veux lui écrire un petit message. Je vais sauter quelques lignes puis ouvrir la balise <p> Cette balise sert à ouvrir une zone de texte.Puis je vais écrire ce que j’ai envie de lui dire. Tu peux copier et coller ce texte depuis la description sous la vidéo pour que ce soit un peu plus rapide :

Chloé, je te souhaite un très bon anniversaire !
Je sais que tu adores le code HTML plus que tout, alors je t'ai préparé un site HTML rien que pour toi.
Tu vas voir il est très bien codé !
Comme je sais que tu es un peu maladroite je t'ai préparé une petite liste de ce à quoi il faut que tu fasses attention quand tu vas souffler tes bougies !

Une fois le texte écrit, il est peut-être temps de jeter un coup d’œil à ce que l’on a codé !

Pour que l’on puisse voir ça il faut enregistrer le document en cliquant sur “file” puis sur “save”, réduire la fenêtre de Sublime Text et que l’on aille chercher le fichier HTML dans le dossier de ton ordinateur. En double cliquant dessus on se retrouve directement sur un navigateur internet et on arrive sur une page blanche avec dessus le titre que l’on a écrit dans la balise H1.

Par contre aucune trace du texte que l’on a écrit dans la balise <p>. Il y a un problème. Il faut qu l’on aille vérifier notre code.

Bon je vois ce que j’ai mal fait. J’ai oublié de fermer la balise !

Regarde si tu as le même problème. Maintenant que c’est corrigé, n’oublie pas d'enregistrer le document et retourne sur le navigateur. Il suffit de cliquer sur rafraîchir pour voir si le problème est réparé. Normalement c’est le cas.
Ce que je vais faire c’est corriger deux trois choses, parce que pour le moment le texte s’écrit tout en longueur. J’aimerais bien créer des paragraphes et sauter des lignes. Pour le faire c’est simple.

Pour créer un paragraphe je dois simplement ajouter une nouvelle balise <p> comme ici sans oublier de fermer la précédente. Et pour sauter des lignes il y a une balise très utile, c’est la balise <br> que je vais mettre ici et ici. Pas besoin de la fermer celle-ci.  

Tu peux regarder ce que ça donne en enregistrant le fichier et en rafraichissant la page du navigateur

Bon on a beaucoup de texte sur cette page, il est peut-être temps de commencer à mettre quelques images.

Pour apprendre à le faire c’est dans l'épisode 3!

Si tu es prêt alors à tout de suite ! 

 

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Publié le - Mis à jour le 08-11-2017

Recommandations

Je t’accompagne dans
tes révisions du bac