A hiperlinkeknek köszönhető az óriási hálózat, mely a webet alkotja — lehetővé teszik, hogy dokumentumokat, weboldalakat kapcsoljunk össze. A linkekre kattintva a böngészők egy másik webcímre (URL) irányítanak bennünket.
A link anatómiája
Egy egyszerű link úgy készül, hogy a szöveget, melyet linkké szeretnénk változtatni, az <a> elemmel keretezzük, és href attribútummal látjuk el, mely azt a webcímet tartalmazza, ahova a link vezet.
A linkeket title attribútummal is elláthatjuk — az attribútum fontos információkat, figyelmeztetéseket tartalmazhat a linkkel kapcsolatban.
Nem csak szöveget, más tartalmakat is linkké változtathatunk. Gyakori eset például, hogy egy logó a cég honlapjára linkel. Ilyen esetben elég a képet az <a> jelölések közé tenni.
Röviden a linkekről és az elérési utakról
A linkek megértéséhez nem árt szót ejteni az URL-ekről is. Az URL határozza meg, hol található egy-egy dolog a neten. Az URL-ek elérési utakat használnak, melyek meghatározzák, hol található a linkelni kívánt fájl a fájlrendszerben.
Gyakran szeretnénk egy HTML-dokumentum specifikus részére linkelni, hogy az olvasónak ne kelljen az oldal tetejéről görgetni. Ezt könnyen megtehetjük, ha elsőként id attribútummal látjuk el az elemet, melyre linkelni szeretnénk, majd a specifikus id-t beillesztjük az URL végére, a # jellel elválasztva.
Jótanácsok a linkeléshez
Fontos, hogy a linkek szövege mindig értelmes legyen. Lényeges, hogy az olvasók számára is világos legyen, hova vezet a link, de tartalmazzon kulcsszavakat is a keresők számára.
Az URL lehetőleg ne szerepeljen magában a szövegben, melyet az olvasó is lát — nemcsak csúnya, de rosszul is hangzik, amikor a képernyőolvasók betűről betűre felolvassák.
Ne használd a link kifejezést a linkeknél — a látogatók felismerik a linket az eltérő stílusáról, a képernyőolvasók pedig enélkül is felismerik a linkeket.
E-mail linkek
Olyan linkeket is készíthetünk, amelyekre kattintva új kimenő e-mail nyílik meg, a megadott címre címezve. Ezt az <a> elem és a mailto: URL séma segítségével tehetjük meg, ahogy a példa mutatja:
<a href="mailto:pelda@email.com">E-mail küldése</a> Egyelőre elég, ha ennyit tudsz a linkekről. Most pedig nézzük, hogyan formázhatjuk a szöveget!
Olyan HTML-elemeket fogunk bemutatni, amelyeket ritkábban használunk, viszont nagyon hasznosak tudnak lenni a szövegformázás során. Vágjunk bele!
Leíró listák
A listákról már volt szó, de nem említettük meg a ritkábban használt leíró listákat, melyek kifejezésekből és azok magyarázatából állnak. Az ilyen listákat A listákról már volt szó, de nem említettük meg a ritkábban használt leíró listákat, melyek kifejezésekből és azok magyarázatából állnak. Az ilyen listákat <dl> jelöléssel kell ellátni, a kifejezéseket <dt> jelöléssel keretezzük, a magyarázatokat vagy leírásokat pedig a <dd> elemmel látjuk el.
Idézetek
Az idézetek jelölésére két lehetőségünk is van, attól függően, hogy block vagy inline idézetről van szó. A <blockquote> elem akkor alkalmazható, ha egy egész blokkszintű elemet (listát, bekezdést) máshonnan idézünk, és szeretnénk az idézetet kiemelni, s a cite attribútum segítségével a forrásra linkelni. Az inline idézeteket a <q> jelölővel látjuk el — ezek klasszikus, idézőjellel keretezett szövegként jelennek meg a bekezdésen belül.
Rövidítések és betűszavak
HTML-jelölésekkel azt is elérhetjük, hogy a rövidítésre vagy a betűszóra helyezve a kurzort megjelenjen a teljes szó. Ezt a következő példa illusztrálja:
Mi <abbr title="Hypertext Markup Language">HTML</abbr> segítségével állítjuk össze a weboldalunkat. Alsó és felső index
Időnként szükségünk van az indexekre és a hatványkitevőkre, amikor kémiai vagy matematikai egyenletekkel dolgozunk. Erre a feladatra kiválóan alkalmasak a <sub> (alsó index) és <sup> (felső index) elemek.
Kódok
A számítógépes kódokat is számos HTML-elemmel jelölhetjük. A legegyszerűbb és a leggyakrabban használt elem a <code>, mely az általános számítógépes kódok jelölésére való.
Dátum és idő
A HTML <time> eleme az idő és a dátum jelölésére való, olyan formában, amelyet a gépek is el tudnak olvasni.
<time datetime="2018-10-25">25 October 2018</time> Miért hasznos ez? Mert az emberek nagyon sokféleképpen tüntetik fel a dátumokat. Magyarul is többféleképp írjuk a keltezést — a hónap nevét számmal, betűvel —, a különféle nyelvekben pedig számtalan forma létezik.
A számítógépek azonban nem ismerik fel valamennyi dátumformát. Ezért hasznos a <time> elem, mely lehetővé teszi, hogy a látogatók által olvasható dátum mellé egy számítógépek által olvasható dátumot is csatoljunk.
Ezzel leckénk végéhez érkeztünk — ne feledd, ez nem egy mindent felölelő lista a HTML-elemekről! A célunk az volt, hogy lefedjük a legfontosabb dolgokat, azokat, amelyeket a leggyakrabban használunk, amelyeket hasznosnak vagy érdekesnek vélünk.