Le texte et la couleur - Transformer une page internet (3/4)

3 minutes pour coder - Transformer une page internet

Chargement de la playlist en cours...

Comment modifier la couleur du texte d'une page Web ? 

Grâce aux deux premières vidéos, on a vu comment afficher le code d'une page Web et comment en modifier le texte. Maintenant que tu sais changer le titre, je vais te montrer comment changer la couleur du titre. 

Si tu n’as plus la fenêtre avec le code, fais un clic droit et "inspecter l’élément".

Regardons maintenant d’un peu plus près le bout de code du titre que l’on veut modifier : 

<h1 class="title-content" itemprop="name">Le texte et la couleur - Transformer une page internet (3/4)</h1>

Le HTML, un langage de balisage

Le HTML fonctionne avec des balises. Une balise c’est quelque chose qui ne va pas apparaître sur la page Web,  mais qui va nous permettre de dire comment afficher les différents éléments de cette page. 

  • Par exemple, la balise <h1 c’est ce qui sert à définir le début et </h1>, la fin. Le H1, c’est le code HTML qui dit que le texte entouré par ces deux balises est un titre.
  • Ensuite il y a le contenu : Le texte et la couleur - Transformer une page internet (3/4). Ici c’est du texte puisque c’est une balise de titre et qu’un titre… c’est du texte !
  • Enfin il reste une chose : class="title-content" itemprop="name"> Ce bout de code va définir comment afficher le texte, sa couleur, sa taille, le type d’écriture utilisé… 

Je trouve qu’un titre noir c’est un peu triste et je veux le changer. Je vais commencer par supprimer ce bout de code : class="title-content" itemprop="name">. Double clique dessus, puis sélectionne ce que tu veux supprimer, clique sur "effacer" puis "entrée". Tu devrais voir que le titre n'a plus exactement la même apparence qu’avant. Ensuite double clique sur la balise <h1>. Fais bien attention à garder les deux lettres H1 et on va ajouter un petit bout de code à la suite pour écrire le titre en bleu : style="color:blue"

Que veut dire ce code ? Style, c’est pareil qu’en français, c’est l’apparence. Les deux autres mots sont en anglais mais tu les connais peut être. Color, c’est couleur et Blue, c’est bleu.

On lui demande donc de modifier le style du texte de notre balise et plus précisément que l’on veut la couleur bleu. Presse "entrée" sur ton clavier et ton titre devrait maintenant être écrit en bleu. Pas mal non ?

Si tu veux changer de couleur, tu peux cliquer sur la partie que tu souhaites modifier et essayer avec les autres couleurs que tu connais en anglais ! Mais attention au faute d'orthographe, sinon il ne se passe rien ! Parce que le code informatique, c’est très précis. Une faute de frappe et rien ne se passe !

Maintenant que tu sais modifier le contenu et la couleur d'un texte, découvre comment détruire une page Web dans la prochaine vidéo !

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

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

Recommandations

Je t’accompagne dans
tes révisions du bac