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
Techno02:23Publié le 23/10/2017

Ajout de texte (2/5)

3 minutes pour coder

Comment ajouter et organiser du texte sur un site en HTML ? 

On a préparé notre document pour pouvoir coder en HTML, 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.

📌 Tu veux créer une carte d'anniversaire ? Commence par la vidéo précédente « Démarrage (1/5) ».

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 avant de 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

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