Mi a hiperlink?

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></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!

Haladó szövegformázás

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 <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:

<p>Mi <abbr title="Hypertext Markup Language">
HTML</abbr> segítségével állítjuk össze a weboldalunkat.</p>

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.

NYEREMÉNYJÁTÉK!

Örömmel tölt el bennünket, hogy cikksorozatunk ennyi olvasó érdeklődését felkeltette, és hogy az első kérdésünkre sok helyes válasz érkezett, hiszen azok között, akik beküldik a helyes választ, a sorozat végén egy laptopot sorsolunk ki! Minden beküldött helyes válasz növeli a nyerési esélyeket, hiszen mindegyik egy szelvényt fog érni.

Ötödik heti kérdésünk:

Melyik kóddal tudunk e-mail linket készíteni?

A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!

Néhány szó rólunk:
Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.