A HTML5 szövegszintű elemei

<a> – hiperhivatkozás

Az <a> tag az egyik legfontosabb tag, hiszen ezzel tudunk hiperhivatkozásokat (linkeket) létrehozni az egyes objektumok között.

Mire használjuk?

• A hiperlinkekkel (azaz hivatkozásokkal, vagy linkekkel) kapcsolatot hozhatunk létre a különböző oldalak, médiaelemek stb. között. A böngészők a linkeket alapesetben aláhúzással illetve eltérő színnel jelölik. A még nem látogatott linkek színe alapesetben kék, a már látogatottaké lila, az aktív linkek színe (vagyis amire rákattintottunk és töltődik) piros.
• A linkek megjelenése a stíluslapok segítségével megváltoztatható. Az egyes oldalakon belül is létrehozhatunk hivatkozásokat, az oldalon belül elhelyezett „könyvjelzőkre”.

Az alábbiakban áttekintjük a paramétereket, amelyekre később példákat is hozunk.

Paraméterek:

• globális attribútumok
• href: értékként a hivatkozott oldal url-jét adhatjuk meg. pl.:<a href="http://www.elte.hu/>ELTE honlapja</a>
  • Természetesen a hivatkozásokat nem csak abszolút módon, hanem az aktuális oldal elérhetőségéhez képest relatívan is megadhatjuk. Nézzük például a következő honlapstruktúrát.
    • index.html (fájl)
    • hobbi.html (fájl)
    • kepek (könyvtár)
      • bicikli.jpg (fájl)
      • sziklamaszas.jpg (fájl)
      • onarckep.jpg (fájl)
    • galeria (könyvtár)
      • lap1.html (fájl)
      • lap2.html (fájl)
  • Itt azt látjuk, hogy a gyökérkönyvtárban két állomány található (index.html, hobbi.html), valamint van egy kepek és egy galeria könyvtár is további állományokkal. Hogyan hivatkozhatunk az index.html oldalról a galeria könyvtár lap1.html oldalára? Egyszerű: megadjuk, hogy az a galeria könyvtárból nyílik, teszünk egy / jelet és megadjuk a fájl nevét, ami most lap1.html.
    Példa: Nézd meg a <a href="galeria/lap1.html">galéria első lapját </a> is!
  • És ha a lap1.html oldalról hivatkozni akarunk a kepek könyvtárban lévő sziklamaszas.jpg képre? Ekkor meg kell adnunk, hogy az egy szinttel feljebb lévő könyvtárból (amit két ponttal [..] jelölünk) nyíló kepek könyvtárban található sziklamaszas.jpg legyen a hivatkozott állomány.
    Példa: A képet <a href="../kepek/sziklamaszas.jpg"> megtekintheted nagyobb méretben </a> is.
  • Amennyiben a példánkban szereplő gyökérkönyvtár ténylegesen a webszerver gyökérkönyvtára, akkor más módon is hivatkozhatunk az állományokra. Ehhez kihasználjuk, hogy a gyökér könyvtárra a / jellel hivatkozhatunk. Vagyis a fenti példa szerint a következő kód is megfelelő lesz.
    Példa: A képet <a href="/kepek/sziklamaszas.jpg"> megtekintheted nagyobb méretben </a> is.
  • A hivatkozott oldal egy könyvjelzőjére is hivatkozhatunk, amennyiben a # jel után megadjuk az egyedi azonosítót. pl.: <a href="magamrol.html#kapcsolat">Ugrás a kapcsolathoz</a>
  • A href paraméter kötelezően megadandó, kivéve, ha az oldalon belüli könyvjelző létrehozására használjuk az <a> tag-et. pl.: <a id="kapcsolat"></a>.
• target: ezzel befolyásoljuk, hogy a link hova töltődjön be. A HTML 4-es változatában ebben a paraméterben adhattuk meg, hogy melyik keretbe töltődjön be az oldal. A HTML5 szabványban nem egyszerűen keretről, hanem böngészési környezetről (kontextus) van szó, ami igazából egy vagy több dokumentumobjektum, és egy vagy több nézet (view) gyűjteménye. A böngészési környezetek egymásba ágyazhatók, így egy környezetnek lehetnek gyerek böngészési környezetei, vagy fordítva: szülő böngészési környezetei. A legfelső szintű (top) böngészési környezetnek nincsenek szülő környezetei. Az új megfogalmazás azonban a régi gyakorlaton nem változtat, a korábban megszokott értékeket lehet használni a target paramétereként :
  • _self: A jelenlegi böngészési környezetbe töltődik be az oldal
  • _blank: Egy új, névtelen böngészési környezetbe töltődik be az oldal
  • _parent: A szülő böngészési környezetébe töltődik be az oldal
  • _top: a legfelső szintű böngészési környezetbe töltődik be az oldal.
• download: ezzel jelezhetjük, hogy a hivatkozott objektumot letöltésre szánjuk. Amennyiben megadunk paramétert, akkor az lesz a letöltött fájl neve alapértelmezetten.
• rel: a linket tartalmazó dokumentum és a linkelt oldal közti kapcsolat megadására szolgál. A kapcsolatok listája a 4.12 Links &mdash; HTML Standard című dokumentumban van leírva (angol nyelven), itt most csak néhány gyakrabban használt kapcsolatra térünk ki:
  • alternate: az aktuális dokumentum egy alternatív reprezentációjának megadására alkalmas.
  • author: az cikk/dokumentum szerzőjére mutató link megkülönböztetésére szolgál. Ez egyébként sokszor a szerző e-mail címére mutató link. pl.: <a href="mailto:gipsz@jakab.hu" rel="author">Gipsz Jakab</a>
  • help: helyzetérzékeny súgóra mutató link esetén használatos.
  • license: azt jelzi, hogy a fő tartalom szerzői jog által védett, és a hivatkozott oldalon megtaláljuk a felhasználás jellegének leírását.
  • next: azt jelzi, hogy a jelenlegi dokumentum egy sorozat része, és a link a sorban következő oldalra mutat.
  • prev: azt jelzi, hogy a jelenlegi dokumentum egy sorozat része, és a link a sorban előző oldalra mutat.
• hreflang: a hivatkozott oldal nyelvének jelzésére szolgál, a nyelv kódját kell megadni (pl. hu, en). Az intelligensebb képernyőolvasó-beszédmotor együttesekben a hreflang paraméterrel ellátott linkek követése is kiváltja a megfelelő nyelvű beszédprogram aktiválását.
• type: a hivatkozott objektum mime típusának megadására szolgál.

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Link létrehozása</title>
<meta charset="utf-8">
</head>
<body>
<nav>
  <ul id="menu">
    <li><a href="#magamrol">Magamról</a></li>
    <li><a href="#elerhetoseg">Elérhetőség</a></li>
  </ul>
</nav>
<h1 id="magamrol">Magamról</h1>
<p><a href="http://www.budapest.hu" target="_blank">Budapesten</a> születtem, azóta is itt élek.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc velit, ultrices ut nunc eu, mattis tempor nisi. Mauris facilisis tempus dui nec consequat. Sed vel pulvinar risus. Aenean ornare elementum cursus. Quisque imperdiet eros ac pharetra vestibulum. Fusce non tincidunt augue. Aliquam ut accumsan odio, vitae imperdiet massa. Maecenas sed sollicitudin metus, et congue lacus. Etiam luctus sagittis est, id placerat tellus eleifend condimentum. Ut varius, nisi sit amet ornare sollicitudin, enim nisl pharetra massa, quis porttitor neque arcu id magna. Aenean blandit metus non varius condimentum. Sed ultrices, tortor sed fermentum hendrerit, risus eros imperdiet lacus, quis pulvinar orci est eget libero. Proin pretium nisi in quam venenatis, id gravida orci convallis.</p>
<p><a href="#menu">Vissza a menühöz</a></p>
<h1><a id="elerhetoseg"></a>Elérhetőség</h1>
<p>A <a href="mailto:gipszjakab@gipsz.jakab.hu">gipszjakab@gipsz.jakab.hu</a> címen írhatsz nekem emailt.
<p>Aliquam in felis vel ipsum vehicula placerat ut vel lectus. Vivamus quam lacus, ullamcorper non feugiat ac, pulvinar eu lacus. Suspendisse consectetur quis tellus mattis vestibulum. Vestibulum in molestie nisl. Sed a quam et tellus posuere tincidunt et ut lacus. Etiam vitae risus facilisis, congue mauris ac, viverra turpis. Sed aliquet ante non elit placerat, sit amet vehicula erat molestie. Donec porta nisl sit amet odio tincidunt pellentesque. Maecenas vel tempor nunc, sed suscipit massa. Sed eget augue placerat, egestas elit et, imperdiet risus. Donec eget nisl at elit tristique varius in non erat. Praesent velit magna, adipiscing a dui ac, malesuada suscipit diam. Vestibulum posuere turpis sit amet metus gravida pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin vel vulputate ante, vel scelerisque nisi. Fusce ut odio ut nisl tincidunt sollicitudin. Nullam vel ipsum accumsan, ultricies quam id, ullamcorper ante. Sed eget nisl eu nisl egestas consequat non non mi. Vivamus scelerisque iaculis rutrum. </p>
<p><a href="#menu">Vissza a menühöz</a></p>
</body>
</html>

Most hallgassuk meg azt is, hogy ez a példa hogyan hangzik képernyőolvasó programban! A töltelékszöveget ebben az esetben eltávolítottuk a kódból.

<cite> – Mű címe

Mire használjuk?

• Egy alkotás (könyv, cikk, esszé, dal, film, játék, művészeti alkotás stb.) címére hivatkozás során használatos.
• A mű szerzőjének neve ne legyen része a citátumnak.

Paraméterek: globális attribútumok

<p>A kedvenc könyvem a <cite>Malevil</cite>, amelyet Robert Merle írt.</p>

<p>Forrás: Bándi Gyula:  <cite>Környezetvédelmi kézikönyv</cite>, Budapest, KJK, 1998.</p>

<q> – idézet

Mire használjuk?

• Egy más forrásból származó idézet jelölésére szolgál.
• Az idézet jelölésére szolgáló idézőjelet a kliensalkalmazás fogja megjeleníteni a szabvány szerint, így azt nem szabad kitenni.
• Az idézet jelölése idézőjelek között éppúgy helyes megoldás, mint a <q> tag használata. Arra azonban vigyázzunk, hogy nem minden idézőjel közti szöveg tölt be idézet szerepet, így automatikusa sose cseréljük le az idézetjelet <q> tagekre! Példa: Sokszor voltam nehéz helyzetben, de mindig sikerült „kimásznom belőle”. Itt stiláris okokból szerepel idézőjel, nem szabad <q> taggel helyettesíteni.

Paraméterek:

• globális attribútumok
• cite: a cite paraméter egy érvényes webcímet tartalmaz, ahonnan az idézet származik. A kliensprogram feladata, hogy biztosítsa, hogy ezen oldalra el is juthasson a felhasználó, így nem kell hiperhivatkozást definiálni rá. Sajnos azonban ezen funkció böngészőprogramokban történő általános elterjedésére még várnunk kell.

<p>A <cite>Szabadbölcsészet – Tipográfia</cite> oldal szerint a
<q cite="http://mmi.elte.hu/szabadbolcseszet/index.php?option=com_tanelem&id_tanelem=355&tip=0">
folyóiratcikk esetén a folyóirat címe kurzív (vagy a cikk címe idézőjelek közé kerülhet),
könyvnél a könyv címe kurzív</q>.</p>

<p>A <cite>Szabadbölcsészet – Tipográfia</cite> oldal szerint a „folyóiratcikk esetén 
a folyóirat címe kurzív (vagy a cikk címe idézőjelek közé kerülhet), könyvnél a könyv 
címe kurzív”.</p>

<dfn> – definíció

Mire használjuk?

• Szavakat vagy kifejezéseket jelöl meg adott szövegen belül. Olyan helyen jelöli meg azokat, ahol azok definiálásra (meghatározásra) kerültek. Más szavakkal: abban az elemben (pl. bekezdés, szakasz stb.) jelzi előfordulásukat, ahol azok meghatározásra kerültek.
• Fontos megjegyezni, hogy a dfn csak az adott szót/kifejezést jelöli és nem a definíciót.
• A szövegben a nyitó <dfn> és záró </dfn> jelek közé írt kifejezések (általában) dőlt betűsen jelennek meg.

Paraméterek:

• globális attribútumok

<p> A HyperText Markup Language (röviden <dfn>HTML</dfn>)  egy szerkesztett szöveget leíró nyelv.
A HTML nyelvet, annak érdekében, hogy a különféle böngésző programokban azonos, vagy közel azonos formában jelenjenek meg a weboldalak, szabványosították.
</p>

<abbr> – rövidítés

Mire használjuk?

• Rövidítések jelölésére, és azok feloldásának megadására.

Paraméterek:

• globális attribútumok
• title: a title attribútumnak az adott rövidítés feloldását kell tartalmazza.

<p>A szerző ebben a témában írt publikációja megjelent az 
<abbr title="Fertődi Növénynemesítési és Növénytermesztési 
Kutató Intézet Közleményei">FNNKIK</abbr>-ban.</p>

<code> – programkód

Mire használjuk?

• Számítógépes programkód (vagy kódrészlet) elhelyezésére alkalmazható.
• A programkód szintaxisának kiemelésére gyakran használunk külső bővítményeket. Ezért indokolt lehet annak jelölése, hogy az adott programkód milyen programnyelven íródott. Ezt megtehetjük úgy, hogy megfelelő osztályba (class) soroljuk az adott elemet (pl. <code class="language-html"> jelezheti, hogy HTML-kódot helyeztünk el az oldalon.

Paraméterek: globális attribútumok

var i: Integer;
  begin
     i := 1;
     for i:= 1 to 100 do write(i);
  end.
 
 

<pre><code class="language-pascal">
var i: Integer;
  begin
     i := 1;
     for i:= 1 to 100 do write(i);
  end.
 </code>
 </pre>

<var> – változó

Mire használjuk?

• számítógépes programokban, matematikai kifejezésekben előforduló változók jelölésére.

Paraméterek: globális attribútumok

<p>A lineáris függvény képének egyenlete:
<var>y</var> = <var>a</var><var>x</var> + <var>b</var></p>

<samp> – minta kimenet

Mire használjuk?

• egy számítógépes program kimenetének, üzenetének jelölésére.

Paraméterek: globális attribútumok

<p>A számítógép a telepítés során azt írta ki, hogy <samp>Kérem, tegye be a következő CD lemezt!</samp>,
pedig már az előző kettőt is alig tudtam betuszkolni a tálcába.</p>

<kbd> – felhasználó által adott bemenet

Mire használjuk?

• A felhasználók által (billentyűzetről, hanggal) bevitt adatok jelzésére szolgál. Vagyis olyan esetben kell használnunk, amikor a szövegben olyan információt helyezünk el, amelyet a felhasználónak be kell gépelnie, vagy hangfelismerés esetén, ki kell mondania.

Paraméterek: globális attribútumok

<p>A teljes szöveg kijelöléséhez a <kbd>CTRL</kbd>+<kbd>A</kbd> billentyűkombinációt kell lenyomni.</p>

<small> – apró betű

Mire használjuk?

• Széljegyzetek, megjegyzések, kommentek kiírására szolgál. Az apró betű itt sem elsősorban a szöveg fizikai méretére utal, hanem funkciójára.
• A <small> elem nem használható hosszabb szövegegységek (több bekezdés, lista elem, szakasz) megjelölésére, csak rövid szövegek jelölésére alkalmas.

Paraméterek: globális attribútumok

<p>Szoba ár 4 főre, éjszakánként:13000 Ft. <small>(Bruttó ár, a helyi adót nem tartalmazza.)</small></p>

<sub> és <sup> elemek – Alsó- és felső index

Mire használjuk?

• Jellemzően matematikai, kémiai, fizikai stb. képletekben található alsó és felső indexek jelzésére.

Paraméterek: globális attribútumok

<p>A kénsav (H<sub>2</sub>SO<sub>4</sub>) színtelen, nagy sűrűségű folyadék.</p>

<p>Pitagorasz tétele: <var>a</var><sup>2</sup>+<var>b</var><sup>2</sup>=
<var>c</var><sup>2</sup></p>

<br> – sortörés

Mire használjuk?

• Manuális sortörést jelent. A tagnek nincs záró párja.
• Akkor használhatjuk, ha az egyébként tartalmilag összetartozó elemeket akarjuk külön sorokba tördelni.
• Ne használjuk a <br> elemet térközként! Az elemek közti üres térköz megadására a stíluslapok adnak lehetőséget a margók, belső kitöltések stb. definiálásával.
• Szintén nem helyes a <br> használata bekezdések helyett. Az összetartozó gondolatokat bekezdésekbe (<p>) érdemes szervezni, nem pedig egy hosszabb bekezdés tartalmát <br> tagekkel széttörni!

Paraméterek: globális attribútumok

<p>Kovács János<br>egyéni vállalkozó<br>1117 Budapest, Nevenincs u. 17.</p>

<wbr> – feltételes sortörés

Mire használjuk?

• A wbr tag hosszabb feltételes sortörés jelent, és a szavak új sorba törésére való, amennyiben azok nem férnének ki az adott szélességű blokkban. A wbr egyelemű tag, nincs bezáró tagje.
• Gyakran használjuk hosszú webcímek tagolására is.

Paraméterek: globális attribútumok

<p>A következő webcímen megtekinthető, hogyan nézett ki a világ első honlapja 1992-ben: 
<a href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html">
http://www.w3.org/History/<wbr>19921103-<wbr>hypertext/<wbr>hypertext/<wbr>WWW/<wbr>TheProject.html</a></p>

<span> – karakterek formázására

Mire használjuk?

• Önmagában a <span> tagnek nincs szemantikai jelentése. Arra szolgál, hogy néhány karaktert, szót speciális formázással, vagy például nyelv megadással láthassunk el. A formázás során a stíluslapokban rejlő lehetőségeket használjuk ki.
• A <span> egy soron belüli (in-line) elem, amely előtt és mögött a böngésző nem hagy ki margót. Ezt a tulajdonságot a stíluslapok segítségével felülbírálhatjuk, és a span elemet akár blokkszintű elemmé is alakíthatjuk…
• Leggyakrabban a class, style, lang, dir paraméterekkel használjuk a <span> tag-et. Ezeket később, a stíluslapok tárgyalásánál részletesebben bemutatjuk.

Paraméterek: globális attribútumok

<p>Kedvenc színem a <span style="color:red">piros</span>, 
így nem volt kérdéses, hogy milyen színű autót vásárolok.</p>

<time> – dátum és idő megadására

Mire használjuk?

A time tag idő- vagy dátumértéket jelöl. Plusz szemantikai információt hordoz, hiszen az eddigi módon megjelenített dátumokat a weblap látogatója el tudta olvasni és értelmezni, mindegy, milyen formátumban volt megadva, viszont a time tag használatával az automaták/keresők/forráskódolvasók is értelmezni tudják a dátumértéket.

Paraméterek:

• globális attribútumok
• datetime: a dátum megadása gép által olvasható módon.

Például így lehet megadni egy időértéket:

<p>A 10 éves osztálytalálkozónkat <time datetime="2013-04-20">tavasszal</time> 
tartottuk Székesfehérváron.</p>

Amennyiben a time tag tartalma nem egy konkrét dátum vagy időpont, akkor használni kell a datetime attribútumot. A datetime attribútumba kerül a konkrét dátum vagy időpont megfelelő formátumban. Ha nincs datetime attribútum, akkor a time tagnek kell tartalmaznia érvényes dátumformátumot. Legjobb, ha mindig van datetime paraméter és az tartalmazza a gép számára olvasható dátumot, a time tag pedig a felhasználó számára olvasható dátumot. Ha van datetime attribútum, akkor bármi kerülhet a time tagbe.

A datetime attribútum értékét a következő formátumban kell megadni: YYYY-MM-DDThh:mm:ssTZD, ahol a betűk a következőket jelentik:

• YYYY: év négy karakteren (például 2013)
• MM: hónap két karakteren, számmal (például 04)
• DD:a nap két karakteres (például 01) megadással.
• T: a dátumot és időt elválasztó karakter. Ehelyett akár szóköz is használható.
• hh: óra megadása két karakteren (például 22)
• mm: perc megadása két karakteren (például 53)
• ss: másodperc megadása két karakteren (például 06)
• sss: ezredmásodperc megadása három karakteren (000-999)
• -eltolás, +eltolás: az időzónák közti különbségek miatti időeltolódást állíthatjuk be. 4 karakter hosszú lehet, HHMM megadásban, vagyis az első két karakter az óra, a második kettő a perc megadására szolgál.

A dátum vagy az idő valamelyike tetszőlegesen elhagyható.

Pontos dátumot jelölve:

<p>A vizsgaidőszak <time datetime="2013-07-05">utolsó napján</time> 
rendeztük a zárókonferenciát.</p>

Pontos időpontot jelölve:

<p><time datetime="13:56:00">Kora délután</time> láttam meg a napvilágot.</p>

Dátum és időpont:

<p>Egy szép <time datetime="1984-03-14T13:56:00"> márciusi napon </time> születtem.</p>

Dátum és időpont időzónának megfelelő eltolással:

<p>Egy szép <time datetime="1984-03-14T13:56:00+0200"> márciusi napon </time> születtem.</p>

Időtartam megadás

A datetime attribútummal lehetőség van időtartam megadására is. Ekkor a P karakterrel kell kezdeni az értéket, majd egy szám következik, amelyet az alábbi karakterek egyik követhet:

• D: napok
• H: órák
• M:percek
• S: másodpercek

<p>Minden csoda <time datetime="P3D">3 napig</time> tart.</p>

A jobb olvashatóság miatt szóközök elhelyezése is megengedett.

<p>Minden csoda <time datetime="P 3 D">3 napig</time> tart.</p>

Vissza a tartalomjegyzékhez