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 ajouter et organiser du texte sur un site en HTML ? 

On a préparé notre document pour pouvoir coder en HTML et commencer notre carte d'anniversaire dans la vidéo précédente « Démarrage (1/5) ». Maintenant il est temps 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.

Créer un titre

Commence 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 ouvrirla balise <p> Cette balise sert à ouvrir une zone de texte. Puis je vais écrire ce que j’ai envie de lui dire. 

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 temps de jeter un coup d’œil à ce que l’on a codé ! Enregistre le document en cliquant sur File puis sur Save, réduis la fenêtre de Sublime Text et va 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 et le texte que l’on a écrit.

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.

Créer un paragraphe

Pour créer un paragraphe je dois simplement ajouter une nouvelle balise <p> sans oublier de fermer la précédente avec </p>. 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

On a le texte sur cette page, il est temps de mettre quelques images. Rendez-vous dans le prochain épisode « Ajout d'images (3/5) » !

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Publié le - Mis à jour le 09-07-2018

Recommandations

Je t’accompagne dans
tes révisions du bac