Ajout de liens - Créer un site en HTML (5/5)

3 minutes pour coder - Créer un site en HTML

Chargement de la playlist en cours...

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

J’espère que tu es prêt, c’est le dernier épisode pour finir notre page web !*

 

Bon  en regardant la page que l’on a créé il y a juste une chose qui m’embête, les petits points de la liste ne sont pas très beaux.

 

Alors je vais les enlever grâce au code CSS.

 

Je vais dire que toutes les balises UL, celles qui servent à faire des listes, ne vont plus afficher de petit point.

Pour faire ça je vais simplement coller ce bout de code dans le fichier CSS. Quand on enregistre le fichier et que l’on regarde le résultat. On tombe là-dessus.

 

ul

{

  list-style-type: none;

}

 

On va maintenant ajouter des liens, parce que j’ai envie de créer une page cachée pour surprendre Chloé avec une vidéo spéciale. Les liens c’est ce qui permet d’aller d’une page à l’autre et d’un site à l’autre. 

Tous les sites que l’on visite en ont des centaines, quand ce n’est pas des centaines de milliers.  Notre premier lien va amener à la deuxième page de notre site. Le truc c’est qu’il faut commencer par créer une deuxième page ! D’abord on va faire un double clic sur la barre en haut pour avoir un nouvel onglet. On va ensuite suite l’enregistrer en faisant File - Save As puis en le nommant Tuto2.html. Il faut bien que toutes les lettres soient identiques.

Ensuite on va revenir sur le code HTML de la page Tuto1 pour sélectionner tout le contenu de la balise Head. Attention prend la bien 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> puis fermer la balise <html> comme ça </html>.

Ensuite dans le body on va commencer par 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 !

Une fois que c’est fait on peut tester la page, pour le faire tu dois retrouver le fichier sur ton ordinateur comme on l’a fait dans la vidéo précédente, puis double-clique. Normalement tu dois arriver sur cette page !

Tout fonctionne. On a bien notre titre d’affiché et la page ressemble beaucoup à l’autre. On a les mêmes couleurs et les titres sont identiques. Tout ça c’est grâce au CSS.

Peu importe le nombre de page que l’on crée, on va toujours réutiliser le code du CSS, comme ça on peut créer de belles pages web et gagner beaucoup de temps.

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 l’image, pour que quand on clique dessus on tombe sur la deuxième page

Pour ajouter un lien il faut utiliser la balise <a> 

On va entourer les balises de l’image de cette manière. Maintenant il faut indiquer où va nous amener ce lien. Pour ce faire il suffit d’écrire le nom du deuxième fichier après avoir écrit “href=”

Il ne reste qu’à mettre le nom du fichier Tuto2.html entre les guillemets pour que le lien fonctionne.

Une fois que c’est fait on peut tout enregistrer et tester le lien.

Si je clique sur le bouton j’arrive bien sur la deuxième page.

Pour revenir en arrière je peux simplement utiliser 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 que je lui ai préparée. On va donc ajouter un lien sur le fichier tuto2.

On va entourer le titre h1 avec la balise de lien “a”.

Ça veut dire que le titre tel qu’il est va devenir un lien.  Maintenant on peut ajouter le code “href=”” et mettre l’adresse de la vidéo surprise que je veux lui faire voir.

Tu peux trouver ce lien dans la description de cette vidéo, c’est le lien surprise. https://youtu.be/pgd45TJ8LeU

Une fois que tu l’as, fais un copier-coller. Il ne te reste ensuite qu’à tout enregistrer.

On approche de la fin de ce tuto mais j’ai une chose importante à te dire. 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. Mais si on veut les mettre sur internet, c’est possible.  

Le plus important c’est surtout qu’on a codé en HTML. 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 !

Le tuto s’arrête ici. Je vais simplement te laisser regarder la dernière vidéo surprise en cliquant sur le lien que l’on vient d’ajouter.

C’était Micode, Salut !

 

 

https://youtu.be/pgd45TJ8LeU

Bon normalement cette vidéo est censé être une surprise pour Chloé mais là j’ai surtout envie de te féliciter ! Parce que si tu vois cette vidéo c’est que tu as compléter en entier le tuto HTML. Et pour ça franchement bravo !

Je profiter de cette vidéo cachée, pour te dire que j’ai adoré faire ces tutos, maintenant que tu sais comment fonctionne une page html et comment en faire une, c’est à toi de jouer ! 

Et pour finir, je te révèle le secret pour apprendre et maîtriser le code. Il est simple c’est de poser des questions. Que ce soit à des gens ou sur un moteur de recherche.

Il y a des milliers de gens qui partagent leurs passions du code pour qu’on puisse tous l’apprendre facilement et gratuitement. Si tu as aimé mes vidéos et mes tutoriels, pense à les partager à tes amis pour qu’ils puissent eux aussi découvrir comment coder des jeux vidéos ou des site internets.

 

Encore une fois bravo et à bientôt.

C’était Micode, Salut à tous !

ul

{

  list-style-type: none;

}

 

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Recommandations