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:41Publié le 16/10/2017

Le texte et la couleur d'une page web (3/4)

3 minutes pour coder

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 bleue. 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. 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

Auteur : Arnaud Gantier et MICODE

Producteur : Coyote Conseil

Année de production : 2017

Année de diffusion : 2017

Publié le 16/10/17

Modifié le 22/02/24

Ce contenu est proposé par