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
Techno03:38Publié le 30/10/2017

Ajout de liens (5/5)

3 minutes pour coder

Comment créer des liens sur un site en HTML ?

On va maintenant ajouter des liens, parce que j’ai envie de créer une page cachée pour surprendre mon amie Chloé avec une vidéo spéciale.

En regardant la page, quelque chose m’embête : les petits points de la liste ne sont pas très beaux. Je vais les enlever grâce au code CSS.

Je veux que toutes les balises <ul>, qui servent à faire des listes, n'affichent plus ces points. Je vais donc simplement coller dans le fichier CSS ce bout de code :

ul

{

  list-style-type: none;

}

Enregistre le fichier et regarde le résultat.

📌Si tu as raté le début, tu peux rattraper les précédentes vidéos ici : « Démarrage (1/5) », « Ajout de texte (2/5) », « Ajout d'images (3/5) » et « Ajout du CSS (4/5) ».

Créer des liens...

Les liens, c’est ce qui permet d’aller d’une page à l’autre et d’un site à l’autre. Les sites que l’on visite en ont des centaines, voire des milliers. Notre premier lien va amener à la deuxième page de notre site, qu'il va falloir créer ! D’abord, on va faire un double-clic sur la barre en haut pour avoir un nouvel onglet. On va ensuite l’enregistrer en faisant File puis Save as, en le nommant Tuto2.html

  • Ensuite, on va revenir sur le code HTML de la page Tuto1 pour sélectionner tout le contenu de la balise <head>. Attention prends bien la balise du début à la fin. On copie le tout pour venir le coller sur notre nouvelle page. Une fois que c’est fait, il ne faut pas oublier d'ajouter les balises <body> et <html>.
  • Ensuite dans <body>, on va créer une balise <div> que l’on va nommer comme dans l’autre page : "carte". Puis dans cette <div>on ajoute un titre H1 avec comme texte : CLIQUE ICI POUR UNE SURPRISE !
  • Teste la page : retrouve le fichier sur ton ordinateur, puis double-clique. On a bien notre titre et la page ressemble beaucoup à la première, les couleurs et les titres sont identiques. Tout ça grâce au CSS. Peu importe le nombre de pages créées, on va garder le CSS, comme ça on peut créer de belles pages web et gagner beaucoup de temps.

... D'une page à une autre

Maintenant, il faut que l’on ajoute un lien sur la première page pour qu’on puisse passer d’une page à l’autre. On peut par exemple le placer sur une image, pour que quand on clique dessus on tombe sur la deuxième page.

  • Pour ajouter un lien, on utilise la balise <a>. On va entourer les balises de l’image avec.
  • Il faut aussi indiquer où va nous amener ce lien. Dans la balise <a>, il faut écrire href=, suivi du nom du fichier Tuto2.html entre guillemets pour que le lien fonctionne.
  • <a href="tuto2.html">

Enregistre et teste le lien. Si je clique sur l'image, j’arrive sur la deuxième page. Pour revenir en arrière, je n'ai qu'à cliquer sur la flèche retour de mon navigateur.

  • Maintenant il faut aussi mettre un lien dans la deuxième page pour que Chloé puisse cliquer et découvrir la surprise. On va donc ajouter un lien sur le fichier tuto2.
  • On va entourer le titre H1 avec la balise de lien <a>. Le titre devient un lien. Ajoute le code href= et mets l’adresse de la vidéo surprise : https://youtu.be/pgd45TJ8LeU
  • <a href="https://youtu.be/pgd45TJ8LeU">

Il ne te reste ensuite qu’à tout enregistrer !

  • On approche de la fin de ce tuto. Je voulais préciser que le site que l’on a créé n’est pas sur Internet. Ce sont des fichiers sur nos ordinateurs qui ne sont pas partagés.
  • Si on veut les mettre sur Internet, c’est possible. Si tu deviens passionné par le code informatique, je suis sûr que tu vas être assez curieux pour chercher comment mettre sur Internet un fichier HTML !

Pour apprendre et maîtriser le code, le plus simple c’est de poser des questions, soit à des gens ou sur un moteur de recherche. Il y a des milliers de gens qui partagent leurs passions du code pour l’apprendre facilement et gratuitement.

 
📌 Découvre aussi avec Micode comment coder un jeu sur Scratch ou transformer une page Internet.

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 30/10/17

Modifié le 20/02/24

Ce contenu est proposé par