Vidéo : Ajout de liens (5/5)
Contenu proposé par
Ajout de liens (5/5)
3 minutes pour coderComment 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.
Si tu as raté le début, tu peux rattrapper 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) ».
Mais avant, 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 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.
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 suite 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 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> 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 que l’on crée, 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. Maintenant il faut indiquer où va nous amener ce lien. Dans la balises <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 bien 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 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>. C'est donc le titre qui est va devenir un lien. Ajoute le code href= et mets l’adresse de la vidéo surprise que je veux lui faire voir : 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, mais je voulais précisé 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. Mais 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, 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 l’apprendre facilement et gratuitement.
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 19/10/22
Ce contenu est proposé par
Bienvenue ! Votre compte a bien été créé.
Autorises-tu ton navigateur à rester automatiquement connecté à Lumni ?