La structure - Transformer une page internet (2/4)

3 minutes pour coder - Transformer une page internet

Chargement de la playlist en cours...

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

Comment transformer une page internet ?

Dans la première vidéo, on a vu comment faire apparaître le code html d’un site internet avec l’outil inspecteur. Mais on peut faire bien plus de choses avec. Et c’est ce que l’on va faire dans cette vidéo !

Si tu ne te rappelles plus comment ouvrir l’outil inspecteur tu peux retourner sur la vidéo précédente. Une fois que la fenêtre est apparue, tu devrais trouver un petit bouton comme celui-ci ou celui-là. C’est le bouton inspecter. Une fois que tu cliques dessus et que tu passes au-dessus de la page, tu vas voir des rectangles bleus apparaître là oú tu passes ta souris et le texte dans notre nouvelle fenêtre qui se modifie au fur et à mesure.

Ce que tu vois c’est simplement le code de la page et plus précisément le code qui a permis de placer cet élément ici. D’ailleurs… Ce que je te propose de faire, c’est de mettre pause sur la vidéo et de regarder un peu les différents blocs qui composent cette page. Parce-que tous ces blocs nous amènent à un point important du html.

À la base de ce langage il y a la notion de bloc de contenu. A l’intérieur de ces blocs on peut faire un peu ce que l’on veut. Comme tu peux le voir sur cette page certains blocs sont composés d’images, d’autres de textes voir même... d’autres blocs !

Maintenant on va essayer de repérer une partie précise de ce code. Tu peux cliquer sur le bouton inspecter et cette fois-ci quand tu es sur le bloc titre de la page tu peux cliquer. Normalement tu devrais voir ce texte dans la fenêtre du code.

Affichage du code <h1 class="title" itemprop="name"> Hack ta page internet 2/5</h1>

Cette ligne c’est le code du titre au-dessus de la vidéo, notre but c’est de modifier ce code pour changer le titre par ce que l’on veut. Pour faire ça, il faut que tu cliques 2 fois très rapidement sur le code coloré en bleu pour qu’il soit sélectionné. Une fois que le texte que l’on souhaite effacer est sélectionné, tu peux y écrire ce que tu veux. Ton prénom par exemple. Quand tu as fini d’écrire appuie sur la touche “entrée” et maintenant, si tu regardes le site internet tu peux voir écrit ton prénom ou peu importe ce que tu as écrit ici à la place du titre.

Si tu as réussi et que tu vois ton prénom à la place du titre et bien, tu peux passer à la vidéo suivante !

 

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Recommandations