HTML linkek

ebben a bemutató megtudhatja, hogyan hozhat létre linkeket más oldalak HTML.

linkek létrehozása HTML-ben

a hivatkozás vagy hiperhivatkozás az egyik webes erőforrásból a másikba történő kapcsolat. A linkek lehetővé teszik a felhasználók számára, hogy zökkenőmentesen mozogjanak egyik oldalról a másikra, bármely szerveren bárhol a világon.

egy linknek két vége van, úgynevezett horgonyok. A hivatkozás a forráshorgonynál kezdődik, és a célhorgonyra mutat, amely bármilyen webes erőforrás lehet, például kép, hang-vagy videoklip, PDF fájl, HTML dokumentum vagy magában a dokumentumban található elem stb.

alapértelmezés szerint a linkek a legtöbb böngészőben a következőképpen jelennek meg:

• a nem látogatott link aláhúzott és kék.
• a meglátogatott link aláhúzott és lila.
• az aktív hivatkozás aláhúzott és piros.

ezt azonban felülírhatja a CSS segítségével. Tudjon meg többet a styling linkekről.

HTML Link szintaxis

a linkek HTML-ben vannak megadva a <a> címkével.

a hivatkozás vagy hiperhivatkozás lehet szó, szavak csoportja vagy kép.

a nyitó <a> címke és a záró </a> címke között bármi a hivatkozás részévé válik, amelyet a felhasználó lát és rákattint a böngészőben. Íme néhány példa a linkekre:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

a href attribútum határozza meg a hivatkozás célját. Értéke lehet abszolút vagy relatív URL.

az abszolút URL az az URL, amely tartalmazza az URL-formátum minden részét, például a protokollt, a gazdagép nevét és a dokumentum elérési útját, például https://www.google.com/, https://www.example.com/form.php stb. Míg a relatív URL-ek oldal-relatív útvonalak, például contact.html, images/smiley.png stb. A relatív URL soha nem tartalmazza a http:// vagy https:// előtagot.

hivatkozások céljainak beállítása

a target attribútum megmondja a böngészőnek, hogy hol nyissa meg a csatolt dokumentumot. Négy meghatározott cél van, és minden célnév aláhúzással (_) kezdődik:

• _blank — megnyitja a csatolt dokumentumot egy új ablakban vagy lapon.
• _parent — megnyitja a csatolt dokumentumot a szülőablakban.
• _self — megnyitja a csatolt dokumentumot ugyanabban az ablakban vagy lapon, mint a forrásdokumentum. Ez az alapértelmezett érték, ezért nem szükséges kifejezetten megadni ezt az értéket.
• _top — megnyitja a csatolt dokumentumot a teljes böngészőablakban.

próbálja ki a következő példát, hogy megértse, hogyan működik a link célja alapvetően:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

Könyvjelző horgonyok létrehozása

könyvjelző horgonyokat is létrehozhat, hogy a felhasználók a weboldal egy adott szakaszára ugorhassanak. A könyvjelzők különösen hasznosak, ha nagyon hosszú weboldala van.

könyvjelzők létrehozása egy kétlépcsős folyamat: először adja hozzá a id attribútumot ahhoz az elemhez, ahová ugrani szeretne, majd használja azt a id attribútumértéket, amelyet a hash jel (#) előz meg a href attribútum <a> címke értékeként, amint az a következő példában látható:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

letöltési linkek létrehozása

a fájl letöltési linket pontosan ugyanúgy hozhatja létre, mint a szöveges linkek elhelyezését. Csak mutasson a cél URL-re a letölthető fájlra.

a következő példában létrehoztuk a letöltési linkeket ZIP, PDF és JPG fájlokhoz.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>