[HTML/CSS] - 9. Comment créer des liens en HTML

par Tychic Obanda


HTML | 20 commentaires




Salut, Mbote tout le monde! Bienvenu dans cette nouvelle vidéo à laquelle je vais vous montrer comment créer des liens hypertextes en HTML.

Au début de cette de vidéos, nous avions défini un site web comme étant un ensemble de pages web liées entre elles par des liens hypertextes et aujourd'hui, nous allons voir comment créer ces liens.

Pour créer un lien en HTML, on utilise la balise <a></a>. Cette balise en elle-même ne sert à rien. Elle a toujours eu besoin des attributs pour l'accompagner à créer des liens hypertextes.

Les attributs de la balise <a></a>

Comme je viens de le dire, cette balise ne sert à rien sans les attributs. Cependant, je vais vous présenter une liste d'attributs qu'il faut utiliser pour la balise <a></a>.

Le URL du lien

Pour préciser l'adresse URL auquel le lien va pointer, on utilise l'attribut href. Cet attribut est indispensable pour la balise <a></a>.

A l’intérieur de cet attribut nous allons mettre l'adresse du lien

<a href="https://www.243tech.com">Cliquez ici pour visiter notre site</a>

En parlant des liens, je tiens à vous informer que nous avons deux types de liens : interne et externe.

Un lien interne est un lien qui pointe vers une autre page de votre site et un lien externe, c'est un lien qui pointe vers un autre site. Dans le cas d'un lien externe, veuillez toujours indiquer le protocole http ou https à l'adresse du site qu'on pointe le lien.

Créer un lien vers une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.

En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.

Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre.

<h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.

<a href="#mon_ancre">Aller vers l'ancre</a>

Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).

Source : openclassrooms.com

Afficher une infobulle sur un lien

Ici, je vous montre comment afficher une infobulle sur un lien. Pour le faire, on utilise l'attribut title. Ne confondez surtout pas l'attribut title à la balise <title></title> que nous avions déjà vu.

<a href="https://www.243tech.com" title="Découvrez les astuces sur la programmation">Astuces et tutoriels sur la programmation web</a>

C'est tout pour cette vidéo. Si vous avez d'autres astuces sur les liens n’hésitez de les balancer aux commentaires.







Laisser un commentaire
Bamboo Joint Earring
Bamboo Joint Earring
24-09-2020 à 17:34

De las mujeres del alto talón de las botas del tobillo http://www.sarstore.es/de-las-mujeres-del-alto-tal243n-de-las-botas-del-tobillo-p-7814.html
Yunt Sac à Main en Bambou. Sac à bandoulière Plage Sac à bandoulière Demi-Lune. Sac bandoulière tressé de Voyage Sac bandoulière pour Les Femmes http://www.hitechstore.fr/yunt-sac-224-main-en-bambou-sac-224-bandouli232re-plage-sac-224-bandouli232re-demilune-sac-bandouli232re-tress233-de-voyage-sac-bandouli232re-pour-les-femmes-p-22036.html
Rcsinway Uomo in Pelle Pieghevole Portafoglio Versione Coreana del Pacchetto di Carta Multi-Retro Carta Sacchetto Creativo Frizione Portafoglio (Color : Brown) http://www.mdworldstore.it/rcsinway-uomo-in-pelle-pieghevole-portafoglio-versione-coreana-del-pacchetto-di-carta-multiretro-carta-sacchetto-creativo-frizione-portafoglio-color-brown-p-12434.html
Modische Sneakers aus Leder für Frauen für jeden Anlass - Low-Top Sneakers - Wei?e Python http://www.yoostore.de/modische-sneakers-aus-leder-f252r-frauen-f252r-jeden-anlass-lowtop-sneakers-wei223e-python-p-19342.html
Bamboo Joint Earring https://www.sgoodglass.com/bamboo-joint-earring/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
02-08-2018 à 15:36

C'est bien. Mettez-vous à la réalisation de votre application et j'ai hâte de l'installer sur mon téléphone :)


Jacket
Jacket
23-09-2020 à 23:54

M?nner Polierte Echtes Leder Einzel Monk Schuhe W?lbungs-Bügel-Beleg Auf Smart Work Kleid Loafer [HY50-K36-YELLOW-43] http://www.acatostore.de/m228nner-polierte-echtes-leder-einzel-monk-schuhe-w246lbungsb252gelbeleg-auf-smart-work-kleid-loafer-hy50k36yellow43-p-18372.html
Zapatillas de running para mujer. erizos. comer pan. de malla transpirable. senderismo. tenis. color Multicolor. talla 41.5 EU http://www.sarstore.es/zapatillas-de-running-para-mujer-erizos-comer-pan-de-malla-transpirable-senderismo-tenis-color-multicolor-talla-415-eu-p-137.html
Scarpe Sportive da Donna Scarpe da Ginnastica Casual Antiscivolo con Piattaforma Traspirante Scarpe Autunnali Casual con Lacci Estivi http://www.sonicstore.it/scarpe-sportive-da-donna-scarpe-da-ginnastica-casual-antiscivolo-con-piattaforma-traspirante-scarpe-autunnali-casual-con-lacci-estivi-p-9127.html
Reebok Speedlux 2.0. Chaussures de Running Compétition Femme http://www.deepstore.fr/reebok-speedlux-20-chaussures-de-running-comp233tition-femme-p-19691.html
Jacket https://www.ruishengarment.com/jacket/


2mm Plastic Sheet
2mm Plastic Sheet
23-09-2020 à 15:58

Women Small Cell Phone Purse Crossbody.Sketchy Figures Cheerful Composition Kids Playroom Nursery Wall Decor Nature Print http://www.hitechstore.fr/women-small-cell-phone-purse-crossbodysketchy-figures-cheerful-composition-kids-playroom-nursery-wall-decor-nature-print-p-13226.html
SL 46 Colour AZUL - EN ISO 20345 S1 - W10 - Gr. 42 http://www.uastore.es/sl-46-colour-azul-en-iso-20345-s1-w10-gr-42-p-13364.html
Kobra Women http://www.acatostore.de/kobra-women-p-2751.html
Vantage GTX Mid. Stivali da Escursionismo Alti Uomo http://www.sonicstore.it/vantage-gtx-mid-stivali-da-escursionismo-alti-uomo-p-7857.html
2mm Plastic Sheet https://www.hsplasticgroup.com/2mm-plastic-sheet/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
01-08-2018 à 18:12

Merci Jean-Marie d'avoir pris ces conseils en considération.


Featured Products
Featured Products
21-09-2020 à 05:11

Herren Mahalo. Schwarz Wei? Braun Schwarz Schwarz Grün Wei? http://www.acatostore.de/herren-mahalo-schwarz-wei223-braun-schwarz-schwarz-gr252n-wei223-p-5704.html
Femmes C?nique Bout Carré Escarpins http://www.hitechstore.fr/femmes-c244nique-bout-carr233-escarpins-p-18501.html
Original Customized - personalisierte Schuhe (Handwerk Produkt) Purple Paisley http://www.mdworldstore.it/original-customized-personalisierte-schuhe-handwerk-produkt-purple-paisley-p-17510.html
Purple Champs Globo Gym Cobras - Mochila con puerto de carga USB. color morado http://www.uastore.es/purple-champs-globo-gym-cobras-mochila-con-puerto-de-carga-usb-color-morado-p-26155.html
Featured Products https://www.morningstarstone.com/featured-products/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
30-07-2018 à 22:28

Oui Cris c'est le client qui prime


Elegant. Hoch Femme
Elegant. Hoch Femme
20-09-2020 à 01:53

MTN Attack 6 Texapore Mid M. wasserdichte & atmungsaktive Wanderschuhe für Herren. Wanderschuhe mit schnelltrocknendem Futter. trittsichere Outdoor Schuhe http://www.acatostore.de/mtn-attack-6-texapore-mid-m-wasserdichte-atmungsaktive-wanderschuhe-f252r-herren-wanderschuhe-mit-schnelltrocknendem-futter-trittsichere-outdoor-schuhe-p-5161.html
Bosch Nozzle https://www.lcjiujiujiayi.com/bosch-nozzle/
Slide-on Ciabatte da Uomo. Colore Nero (checkerboard/white). Taglia 39 EU http://www.sonicstore.it/slideon-ciabatte-da-uomo-colore-nero-checkerboardwhite-taglia-39-eu-p-8016.html
SNOWCRUSH. Botas de Nieve para Mujer http://www.sarstore.es/snowcrush-botas-de-nieve-para-mujer-p-22696.html
Elegant. Hoch Femme http://www.hitechstore.fr/elegant-hoch-femme-p-18674.html


Cut To Size
Cut To Size
19-09-2020 à 21:37

Yuefensu Chausse-Pied Robuste Maple Long 23 Pouces Corne Chaussures Chaussures Lifter for Adultes Enfants Seniors Vous Aide Facilement à Porter des Talons Hauts Ou (Color : Wood. Size : 4.5x4.5x60cm) http://www.hitechstore.fr/yuefensu-chaussepied-robuste-maple-long-23-pouces-corne-chaussures-chaussures-lifter-for-adultes-enfants-seniors-vous-aide-facilement-224-porter-des-talons-hauts-ou-color-wood-size-45x45x60cm-p-526.html
Spiaggia e piscina.Infradito moda marea femminile indossare pantofole antiscivolo piedi selvatici clip da spiaggia scarpe da spiaggia coppia sandali da spiaggia e pantofole estate-40-41 iarde_Spina d http://www.sonicstore.it/spiaggia-e-piscinainfradito-moda-marea-femminile-indossare-pantofole-antiscivolo-piedi-selvatici-clip-da-spiaggia-scarpe-da-spiaggia-coppia-sandali-da-spiaggia-e-pantofole-estate4041-iardespina-d-p-8259.html
AN-JING Tragbar Herren-Doppel Umh?ngetasche Rucksackschultaschenmann- M?nnliche Kurzstreckengesch?ftsreisetasche wasserdichte Computer-Tasche Mit Gro?er Kapazit?t (Color : Black. Size : L) http://www.acatostore.de/anjing-tragbar-herrendoppel-umh228ngetasche-rucksackschultaschenmann-m228nnliche-kurzstreckengesch228ftsreisetasche-wasserdichte-computertasche-mit-gro223er-kapazit228t-color-black-size-l-p-20140.html
Zapatillas de Algodón Cálido Fleece Botas de Nieve Zapatos Unisex Amantes Zapatillas de Algodón Zapatillas de Algodón Impermeables Antideslizantes a Prueba de Frío.Negro.47 http://www.sarstore.es/zapatillas-de-algod243n-c225lido-fleece-botas-de-nieve-zapatos-unisex-amantes-zapatillas-de-algod243n-zapatillas-de-algod243n-impermeables-antideslizantes-a-prueba-de-fr237onegro47-p-7532.html
Cut to Size https://www.morningstarstone.com/cut-to-size/


Baby Romper Suits
Baby Romper Suits
18-09-2020 à 17:46

Sneaker pour Femmes Chaussures de Plein air Grande Taille Hauteur Augmentant été Femme compensée Bottines Bling à Lacets Dames Chaussures de Confort http://www.deepstore.fr/sneaker-pour-femmes-chaussures-de-plein-air-grande-taille-hauteur-augmentant-233t233-femme-compens233e-bottines-bling-224-lacets-dames-chaussures-de-confort-p-22701.html
Bolsa de tela. dise?o de Mickey Mouse http://www.uastore.es/bolsa-de-tela-dise241o-de-mickey-mouse-p-2058.html
Ananas - Borsa a tracolla piccola. colore: Blu http://www.sonicstore.it/ananas-borsa-a-tracolla-piccola-colore-blu-p-19975.html
Herren Husky Schneestiefel http://www.acatostore.de/herren-husky-schneestiefel-p-17248.html
Baby Romper Suits https://www.ruishengarment.com/baby-romper-suits/


Door Glass Regulator
Door Glass Regulator
18-09-2020 à 00:25

Norwin Vibe. Scarpe Stringate Basse Oxford Uomo http://www.mdworldstore.it/norwin-vibe-scarpe-stringate-basse-oxford-uomo-p-18603.html
Cliff. Tennis Femme http://www.hitechstore.fr/cliff-tennis-femme-p-24459.html
Schuhe Damen Boots L?ssige Stiefel Square Pinhole Wedges Heel Ankle Short Booties Mode Stiefeletten 35-43 http://www.yoostore.de/schuhe-damen-boots-l228ssige-stiefel-square-pinhole-wedges-heel-ankle-short-booties-mode-stiefeletten-3543-p-17008.html
Chanclas para hombre. dise?o de Jekyl http://www.uastore.es/chanclas-para-hombre-dise241o-de-jekyl-p-12678.html
Door glass regulator https://www.johnfuauto.com/door-glass-regulator/


BOPET
BOPET
13-09-2020 à 21:59

BOPET https://www.genzonnmbopet.com/bopet/

Glktxoxk
Glktxoxk
26-09-2020 à 11:09

Réponse au commentaire
glktxoxk http://www.gm22mj975sc84u1xw39p61o6cg980prjs.org/
[url=http://www.gm22mj975sc84u1xw39p61o6cg980prjs.org/]uglktxoxk[/url]
<a href="http://www.gm22mj975sc84u1xw39p61o6cg980prjs.org/">aglktxoxk</a>

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
23-06-2018 à 19:32

Je vous en prie


Pet Bottle
Pet Bottle
13-09-2020 à 15:14

Pet Bottle https://www.plasticspray.com/pet-bottle/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
19-06-2018 à 13:32

Merci


Cooling System
Cooling System
13-09-2020 à 01:59

Cooling system https://www.johnfuauto.com/cooling-system/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
11-06-2018 à 14:05

Je vous en prie


Cable
Cable
12-09-2020 à 23:46

Cable https://www.johnfuauto.com/cable/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
09-06-2018 à 10:32

Je t'en prie


Brake Drum
Brake Drum
12-09-2020 à 21:47

Brake drum https://www.johnfuauto.com/brake-drum/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
21-05-2018 à 19:39

Je vous en prie


Dasan Zhone ONU
Dasan Zhone ONU
12-09-2020 à 21:22

Dasan Zhone ONU https://www.qualfiber.com/dasan-zhone-onu-epon-onu-fttx-equipment/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
21-05-2018 à 19:29

Merci


Changan/Chana
Changan/Chana
12-09-2020 à 19:32

Changan/Chana https://www.johnfuauto.com/changanchana/

Hrtcollins
Hrtcollins
05-07-2020 à 21:50

Svp si vous avez un groupe whatssap jaimerai que vous majoutiez(+237 655417175) jai un site que Jai cree mais le php mempeche de continuer

Hrtcollins
Hrtcollins
05-07-2020 à 15:04

Svp si vous avez un groupe whatssap jaimerai que vous majoutiez(+237 655417175) jai un site que Jai cree mais le php mempeche de continuer

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
18-05-2018 à 15:10

Merci Kouame. Si tu es sur Whatsapp, je te laisse un message. Bon début de week-end


GOLDEN DEER
GOLDEN DEER
12-09-2020 à 13:50

GOLDEN DEER https://www.johnfuauto.com/golden-deer/

Samy
Samy
18-05-2018 à 23:25

Merci pour ce lien

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
05-05-2018 à 08:25

Salut Évariste tu peux télécharger les pdf sur ce lien https://openclassrooms.com/old-courses-pdf
Pour les tutoriels vidéos, je te conseille de voir la chaîne de Pierre Giraud sur Youtube


Mesh Router
Mesh Router
12-09-2020 à 11:52

Mesh Router https://www.qualfiber.com/mesh-router/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
30-04-2018 à 16:13

Merci Hariss


12 Micron Pet Sheet
12 Micron Pet Sheet
12-09-2020 à 00:05

12 Micron Pet Sheet https://www.genzonnmbopet.com/12-micron-pet-sheet/

Evvqwqzmew
Evvqwqzmew
26-09-2020 à 06:38

Réponse au commentaire
evvqwqzmew http://www.g176vuoo599b52434h7m1xi15gbgnw8bs.org/
[url=http://www.g176vuoo599b52434h7m1xi15gbgnw8bs.org/]uevvqwqzmew[/url]
<a href="http://www.g176vuoo599b52434h7m1xi15gbgnw8bs.org/">aevvqwqzmew</a>

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
29-04-2018 à 16:05

Je vous écris bientôt sur Whatsapp


1x22 Red Dot Sight
1x22 Red Dot Sight
11-09-2020 à 21:55

1x22 Red Dot Sight https://www.chenxioutdoor.com/1x22-red-dot-sight/

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
26-04-2018 à 01:29

Vraiment ?


Nlzeijrzsj
Nlzeijrzsj
01-09-2020 à 12:52

[HTML/CSS] - 9. Comment créer des liens en HTML
[url=http://www.g9xn4o3kq21aau765b918zb4pf8934lvs.org/]unlzeijrzsj[/url]
nlzeijrzsj http://www.g9xn4o3kq21aau765b918zb4pf8934lvs.org/
<a href="http://www.g9xn4o3kq21aau765b918zb4pf8934lvs.org/">anlzeijrzsj</a>

DJO
DJO
03-04-2018 à 22:34

oui evidament le système de commentaire dans les articles montre nous comment l'integrer comme dans votre sit

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
26-03-2018 à 02:25

Salut Djuk et Djani. Vous parlez du système des commentaires dans les articles?

DJANI
DJANI
25-03-2018 à 21:48

ce le même stystème que je n'arrive pas a créer pouriez-vous nous expliquer plus sur ce stystème (Commentaire)


Recherche
Site hébergé chez Ikoula

Mon site est hébergé chez Ikoula. Un hebergeur web de qualité et si vous cherchez à mettre votre site en ligne, cliquez ici pour profiter de l'offre de 0,99€ par mois !

Logo hébergeur web Ikoula

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 142 articles publiés, 1413 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve certainement ici...