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

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

Grâce aux deux premières vidéos, on sait comment inspecter une page internet pour qu'elle nous révèle son code et on a même pu le modifier. On va continuer un peu.

Maintenant que tu as changé le titre, je vais te montrer comment changer la couleur du titre. Si tu n’as plus la fenêtre avec le code alors tu peux faire un clic droit et inspecter l’élément pour y revenir comme on a vu dans la première vidéo et trouver le titre.

On va regarder maintenant d’un peu plus près le bout de code que l’on veut modifier. 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 d’une page. Par exemple, ici la balise c’est ce petit bout de texte qui sert à définir le début et celui-ci pour la fin. Le H1 c’est le code HTML pour dire que le texte qui est entouré par ces deux balises est un titre.

Ensuite il y a le contenu. 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. C’est ce bout de code ici qui est à l'intérieur de la première balise. Ça c’est simplement le code qui va définir comment afficher le texte, sa couleur, le type d’écriture utilisé, sa taille etc… 

Moi, je trouve qu’un titre noir c’est un peu triste et c’est ce que je veux changer. Je vais commencer par supprimer ce bout de code. Je double clique dessus, puis je sélectionne la totalité de ce que je veux supprimer, je clique sur “effacer” puis “entrée” et voilà. Quand tu vas le faire, tu devrais voir que le titre n'a plus exactement la même apparence qu’avant. Ensuite je double clique sur la balise <h1>. Je fais bien attention à bien garder les deux lettres H1 et je vais ajouter un petit bout de code à la suite pour écrire le titre en bleu.Pourquoi ? Et bien… Parce que je le peux ! 
Je vais entrer ce code : style=color:blue

Qu’est-ce que ce code veut dire ? 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.

Tu peux l’écrire avec ton clavier mais si tu préfères, tu peux aussi le copier et le coller depuis la description de la vidéo. Donc ce que l’on va demander c’est de modifier le style du texte de notre balise. Et de dire précisément que l’on veut une couleur bleue. Maintenant tu presses “entrée” sur ton clavier.

Si tu regardes le titre il devrait maintenant être écrit en bleu. Pas mal non ?

Si tu veux changer et l’écrire dans une autre couleur, tu peux cliquer sur la partie que l’on veut modifier et essayer avec toutes les autres couleurs que tu connais en anglais. purple, green, …

Mais attention il faut bien les écrire… Sinon il ne se passe rien ! Parce que le code informatique c’est très précis. Comme je te l’ai déjà dit, une machine est très bête.  Une faute de frappe et rien ne se passe ! Ou pire !

Maintenant que tu sais modifier le texte et même la couleur j’espère que tu es prêt pour la prochaine vidéo !

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Recommandations