Karakterszintű HTML elemek

A karakterszintű HTML elemek leírása; tt, i, b, u, s, big, small, sub, sup, em, strong, cite, code, dfn, kbd, samp, var, a, img, font, basefont, br

1. Fizikai karakterformázás

Ezek az elemek a szöveg megjelenésére hatnak. Befolyásolhatjuk a segítségükkel, hogyan jelenjen meg az adott oldal, és minden böngészőben ugyanúgy fog kinézni. Tetszőleges szintig egymásba ágyazhatóak, csak arra kell oda figyelni, hogy ne forduljanak elő átfedések.

Példák:

1
2

<b>Ez <i>egy</b> átfedés</i>.
<b>Így <i>már</i></b> <i>nem</i> átfedés.

Az első példa esetében a ‹b› elem lezárta előtt egy ‹i› elemet nyitottunk, így átfedést hoztunk létre. Érdemes a második formát használni, amikor a „már” és „nem” szavakat külön-külön formáztuk, és ezen felül még az „Így már” szavakat is a ‹b› elemmel kiemeltük félkövérre. Érdekes a második formát használni, mert az elsőt nem minden böngésző képes kezelni.

A következő elemek fizikai formázó elemek. Nem okoznak sortörést, ezért ügyelni kell a sorttörések és esetleges szóközök beillesztésére.

‹tt› („Tele Type”) Fix szélességű, úgynevezett írógépbetűk
‹i› („Italic”) Dőlt betűs szöveg
‹b› („Bold”) Félkövér betűkkel írt szöveg
‹u› („Underline”) Aláhúzott betűk
‹s› vagy ‹strike› („Strike-through”) Vízszintes vonallal áthúzott betűk
‹big› Nagy betűkkel írt szöveg
‹small› Kis betűkkel írt szöveg
‹sub› („Subscript”) Alsó indexbe rakott szöveg, az aktuális sorhoz képest kisebb betűvel és lentebb helyezkedik el
‹sup› („Superscript”) Felső indexbe rakott szöveg

2. Logikai karakterformázás

Ebben az esetben a szöveget tartalom alapján különítjük el. Ugyanúgy félkövér vagy dőlt formában fog megjelenni egy-egy rész grafikus böngészők esetén, de sokkal inkább böngészőfüggő a megjelenés.

Elsősorban az ‹EM› és a ‹STRONG› elemeket használjuk majd. Ezeket részletesebben tanulmányozzuk, a többi elemet pedig felsorolás szinten nézzük meg.

‹em› („basic emphasys”) Alap hangsúly, ami főleg dőlt betűvel jelenik meg a grafikus böngészők esetében.

Példa:

1

Érdemes odafigyelni az <em>em</em> elemre

‹strong› („strong emphasys”) Erős hangsúly ami általában félkövér betűvel jelenik meg

Példa:

1

Érdemes odafigyelni a <strong>strong</strong> elemre

További logikai karakterformázó elemek

‹cite› Általában dőlt betűvel megjelenő, más forrásokhoz, anyagokhoz kapcsolódó idézetek, hivatkozások
‹code› Programkódok idézésére használjuk, általában fix szélességű betűkkel jelenik meg
‹dfn› Fontos szavak kiemelésére szolgál, általában dőlt betűvel jelenik meg.
‹kbd› A felhasználó által begépelendő szöveget adhatjuk meg, általában fix szélességű betűvel jelenik meg
‹samp› Programok, rutinok kimenetének megjelenítésére szolgál, általában fix szélességű betűkkel
‹var› Parancsok paramétereinek megjelenítésére szolgál, általában dőlt betűvel

3. Az ‹A› elem

Nem egymásba ágyazhatóak, viszont magukba foglalhatnak bármelyen karakterszintű elemet. A HTML elemek közül ez az egyik legfontosabb. Segítségével két dokumentum, vagy szövegrész között helyezhetünk el vele hivatkozási pontokat.

A böngészők ezeket a hivatkozásokat általában valamilyen módon kiemelik (aláhúzott, megkülönböztető szín) és amikor a felhasználó aktiválja a kapcsolatot (kattintás, kiválasztás) az oldal helyére a megadott oldal töltődik be.

Name – Ezzel a paraméterrel nevet adhatunk a hivatkozásunknak. A kiválasztott névnek egyedinek kell lennie, de nem számít egyedinek két, csak „betűnagyságban” különböző elnevezés (pl. „hivatkozas” és „Hivatkozas”). Az itt megadott referenciapontok hivatkozási pontokként szolgálhatnak egy adott oldalon belül a következő módon. Az URL végére egy „#” –et kell tennünk a választott név (Name) megadásával. Így a hivatkozása az adott oldalon belül a megadott névvel ellátott linkre mutat.

Href – A hivatkozott objektum címét adhatjuk itt meg egy URL segítségével.

Rel – Kapcsolattípust adhatunk meg az aktuális és a hivatkozott dokumentum között. Ezzel a kapcsolattípus megadással segíthetjük a keresőprogramokat oldalaink feltérképezésében. Elsősorban a ‹link› esetében használatos.

Rev – Az előzővel megeggyező kapcsolattípust adhatunk meg, csak fordított kapcsolatirányt feltételez. Elsősorban a ‹link› esetében használatos. Title – A hivatkozott dokumentum címével segíthetjük a látogatókat a választásban.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Name – azonosító név – elhagyható
Href – url – elhagyható
Rel – kapcsolat-típus – elhagyható
Rev – kapcsolat-típus – elhagyható
Title – cím – elhagyható

Példa:

1

<a href="http://gdportal.extra.hu/pelda.html">A pelda.html oldalra mutató link.</a>

4. ‹IMG›

Ezzel az elemmel képeket helyezhetünk el az oldalunkon.

Src – A kép URL-jét kell megadnunk, aminek a kiterjesztése lehet például GIF, JPG vagy PNG.

Alt – A képről lehet rövid információkat leírni ide. Főleg akkor játszik fontos szerepet, amikor a kép nem jelent vagy nem jelenhet meg a böngészőben. Ebben az esetben általában az ide beírt szöveg kerül kiírásra valamilyen formában.

Width, Height – A kép megjelenési magassága és szélessége állítható be. Ha nem az eredeti méretet adjuk, meg akkor a kép torzítva jelenik meg a böngészőben. Ha nem módosítjuk a kép méretét, akkor is érdemes megadni az eredeti méreteket, mert így a böngésző lefoglalja a helyet a kép számára és így közel a végleges formában jelenik meg az oldal attól függetlenül hogy a kép letöltődött már, vagy nem. A méret megadható képpontban vagy a rendelkezésre álló terület bizonyos százalékában.

Align – A kép és szöveg viszonyát határozza meg.

top – A kép tetejét a mellette lévő szöveg tetejével illeszti egy vonalba

middle – A kép közepéhez illeszti a szöveg alapvonalát

left – A képet a bal oldali margóhoz igazítja, és mellé kerül teljes terjedelmével a szöveg, ameddig van szabad terület.

right – Az előzővel megegyező forma, csak a kép itt a jobb margóhoz igazodik és tőle balra helyezkedik el a szöveg.

Border – A kép köré rajzolt keret vastagságát állíthatjuk be ezzel a paraméterrel. Gyakran használunk linkként egy képet, ebben az esetben érdemes 0-ra állítani, mivel nem nyújt túl esztétikus látványt.

Hspace, Vspace – A kép mellet hagyandó üres terület állítható be vele kétoldalt (Hspace), illetve a kép fölött és alatt (Vspace). Ez általában egy kicsi, nullánál nagyobb érték. Akkor érdemes felülbírálni, ha több képet szeretnénk egymás mellett elhelyezni.

Ismap – Szerver oldali térkép.

Usemap – Kliens oldali térkép.

Példa:

1

<img src="http://gdportal.extra.hu/bg.jpg" mce_src="http://gdportal.extra.hu/bg.jpg" width="10" height="10" alt="háttérkép" border="0">

Kezdő tag: kötelező
Záró tag: tilos

Paraméterek:
Src – url – kötelező
Alt – leírás – kötelező
Width – szélesség – elhagyható
Height – magasság – elhagyható
Align – igazítás-típus – elhagyható
Border – vastagság – elhagyható
Hspace – vízszintes térköz – elhagyható
Vspace – függőleges térköz – elhagyható
Ismap –
Usemap – url – elhagyható

5. ‹FONT›

Segítségével megváltoztathatjuk egy szövegrész betűméretét és színét.

Size – A méretet 1-7-ig adhatjuk meg, ami abszolút méretadás.

Color – A szokásos RGB, vagy a gyakran használt 16 szín angol nevének használatával. Az újabb böngészők már több színt ismernek név szerint is.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Size – méret – elhagyható
Color – szín – elhagyható

6. ‹BASEFONT›

Segítségével megváltoztathatjuk egy szövegrész betűméretét és színét.

Size – A méret relatív méretadással adható meg.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Size – méret – elhagyható

7. ‹BR›

Sortörést végez. Akkor használatos, amikor azt szeretnénk elérni hogy a következő szövegrész mindenképpen új sorban kezdődjön.

Kezdő tag: kötelező
Záró tag: tilos