Jelölőelemek XHTML - laphoz

Jelölőelemek
<hr /> <b> vagy <strong>
<i> vagy <em> <address>
<big> és a <small> <sub> és <sup>
<cite> és a <dfn> <var>
<tt> <code>
<kbd> és a <samp> <pre>
<acronym> <del>
<ins> Összefoglaló




A XHTML dokumentumokban az információ egyik fő hordozója a szöveg.
Szöveges dokumentumok kezelésénél igen fontos feladat a szövegek formázása.
A szöveg formázására a CSS stílustechnikát alkalmazzuk.
A szöveg alapformázására viszont, az XHTML nyelvben számos jelölőelem létezik.

1. A <hr /> címke, vízszintes elválasztóvonal megjelenítése

Vízszintes vonalakat a, <hr> </hr> jelölőelemek segítségével tudunk létrehozni.
Címsoroknál, ajánlott helyette a css, azaz stíluslapon történö vonalra jellemző meghatározás megírása.
A <hr> </hr> jelölőelempár, egy vízszintes elválasztó vonalat helyez el a Weboldalon, a rendelkezésre álló szélességben.

Példa:
Megírása XHTML lapon

<body>
<hr> </hr>
<h3>XHTML - lapon megírt, címsornál megjelenő vonal</h3>
<hr> </hr>
</body>

Megjelenése a monitoron: Szövegsornál, fent és lent is megjelenik a vonal.


XHTML - lapon megírt, címsornál megjelenő vonal


<hr> jelölő címke bekezdéseknél XHTML lapon
Szövegek aláhúzásához nem ajánlott, helyette a CSS, azaz stíluslappal történő formázást válasszuk.

Példa egy rosszul elhelyezett jelölőelemre:
<body>
<p>Bekezdés szavainál <hr />aláhúzott szöveg <hr /> </p>
</body>

Megjelenése a monitoron: ( A vonal megjelenítésén kivül, a szöveget is új sorba helyezi. )

Bekezdés szavainál


aláhúzott szöveg

Aláhúzáshoz XHTML - lapon, <span> kijelölő címkét alkalmazzuk
- Bekezdéseknél aláhúzott szöveg vagy szövegrészhez, XHTML lapon a <span> szövegkiemelő címkét alkalmazzuk
- A kiemelendő szövegrészre vonatkozó meghatározást CSS, azaz stíluslapon írjuk meg.

Meírása XHTML - lapon:

<body>
<p>Bekezdés szavainál <span>aláhúzott szöveg </span> </p>
</body>

Meghatározás meírása CSS - lapon:

span {border-bottom: 1px solid black;}

Megjelenése a monitoron:

Bekezdés szavainál aláhúzott szöveg

Vissza a lap elejére

2. A <b> vagy <strong>, <i> vagy <em> címke.

Dokumentumunkban szöveg - szövegrészek kiemelése:

Félkövér karakterekhez vizuális elem: <b>szöveg</b>
Félkövér karakterekhez logikai elem: <strong>szöveg</strong>

Dőlt karakterekhez vizuális elem: <i>szöveg</i>
Dőlt karakterekhez logikai elem: <em>szöveg</em>
Az em címke: az emphasis - kihangsúlyozás - angol szó rövidítése.

A strong elem ugyanazon okokból részesítjük előnybe tisztán vizuális ellenpárjával, a b elemmel szemben, amiért az em elemet az i elemmel szemben.
A hangos képernyő-felolvasók más hangon olvassák fel a strong címkével jelölt szöveget, mint a normál szöveget, és ugyancsak más hangon, mint az em címkével jelöltet.
Az i elemmel, b elemmel is elérhetők a logikai ellenpárjával azonos vizuális hatások, melyek pusztán díszítési szempontból szükségesek, de nem hordoznak semmilyen logikai mellékjelentést, és nem hoznak létre erős kihangsúlyozást.

Megírása XHTML - lapon

<body>
<b>Böngészőkben, </b>
<strong>az XHTML lapon megírt, </strong>
<em>dokumentumunk szövege, </em>
<i>így jelenik meg </i>
</body>

Megjenése a monitoron

Böngészőkben, az XHTML lapon megírt, dokumentumunk szövege, így jelenik meg

Megjegyzés:
A <b> és <i> címkéket szigorúan vizuális megjelenítésre alkalmazzuk.
XHTML lapon a <strong> és <em> címkék, vizuális és logikai megjelenítésre is alkalmasak, azaz a hangos képernyőfelolvasók a kijelölésnek megfelelően hangsúlyozzák és olvassák fel dokumentumunk szövegét.
Ezeket meg is erősíthetjük úgy, hogy a stíluslapon is megírjuk a rájuk jellemző meghatározást.
Ezáltal, minden böngészőprogram a kijelölésnek megfelelően jeleníti meg a kijelölt részeket.

Meghatározások megírása stíluslapon:
Vastagon kiemelt szövegekhez: strong {font-weight: bold;}
Dőlt kiemeléssel szövegekhez: em {font-style: italic;}

Vissza a lap elejére

3. Az <address> címke

Az <address>szöveg</address> jelölőelem segítségével a Weboldal szerzőjének az email címét adjuk meg.
Az address jelölőelem általában a Weboldal kezdetén vagy végén található.

Megírása XHTML - lapon:

<address title="mailto:webmester@kkavarog.net">Webmester</address>

Megjelenése a monitoron: Egeret, mozgassuk a szöveg fölé.

Webmester

Vissza a lap elejére

4. A <big> és a <small> címke.

Betűk nagysága a környező szöveghez viszonyítva:
- Nagyobb betűformátum: <big>szöveg</big>
- Kisebb betűformátum: <small>szöveg</small>

Megírása XHTML - lapon:

<body>
Az XHTML az <big> Internet publikálás és alkalmazásfejlesztés </big> nyelve.
A HTML <small> (Hypertext Markup Language) </small> nyelvet eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki.
</body>

Megjelenése a monitoron:

Az XHTML az Internet publikálás és alkalmazásfejlesztés nyelve. A HTML (Hypertext Markup Language) nyelvet eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki.

Vissza a lap elejére

5. A <sub> és <sup> címke

Alsóindex: <sub>alsó index</sub>
Felsőindex: <sup>felső index</sup>

Meírása XHTML - lapon

<body>
Víz vegyjele: H<sub>2</sub>O
Köbméter jele: m<sup>3</sup>
</body>

Megjelenése a monitoron:

Víz vegyjele: H2O

Köbméter jele: m3

Vissza a lap elejére

6. A <cite> és a <dfn> címke

A cite, logikai elem.
Idézeteket a: <cite>idézet</cite> jelölőelem használatával, hozhatunk létre.
A cite elemet címhivatkozások megjelölésére, például könyvek és újságok címének kiemelésére szánták.
Néha a cite jellemző adja meg az eredeti dokumentum helyét.
A böngészők többsége a címhivatkozásokat dőlt betűvel jelenítik meg.

<cite>Meírása XHTML - lapon idézetként

<p>
A cite elemet címhivatkozások megjelölésére, kiemelésére szánták. <cite>Néha a cite jellemző adja meg az eredeti dokumentum helyét. </cite> A böngészők többsége a címhivatkozásokat dőlt betűvel jelenítik meg.
</p>

<cite>Megjelenése a monitoron idézetként:

A cite elemet címhivatkozások megjelölésére, kiemelésére szánták. Néha a cite jellemző adja meg az eredeti dokumentum helyét. A böngészők többsége a címhivatkozásokat dőlt betűvel jelenítik meg.

 

Ha egy olyan webhelyről idéznénk valamit, mely támogatja a hivatkozott könyvet a cite elem a következőképpen is, kinézhetne.
A cite most kétszer szerepel, mint cite elem, és egy cite jellemző.

Meírása XHTML - lapon

<p>
Weblapokat a világ minden nyelvén lehet írni, melyre különleges karakterkód áll rendelkezésünkre. Latin betűs nyelvek XHTML karaktereinek teljes listája itt található:
<cite cite="http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtmllat1.ent"> http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml-lat1.ent </cite>
</p>

Megjelenése a monitoron:

Weblapokat a világ minden nyelvén lehet írni, melyre különleges karakterkód áll rendelkezésünkre. Latin betűs nyelvek XHTML karaktereinek teljes listája itt található:
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml-lat1.ent

Definíciókhoz: <dfn>definíció</dfn>

Meírása XHTML - lapon

<body>
<dfn>
Az XHTML (Extensible HyperText Markup Language) egy struktúrában gazdag jelölőnyelv, amely a megjelenítést a stíluslapokra bizza, moduláris alapokra épül és együttműködik az XML (Extensible Markup Language) alapú felhasználói alkalmazásokkal.
</dfn>
</body>

Megjelenése a monitoron:

Az XHTML (Extensible HyperText Markup Language) egy struktúrában gazdag jelölőnyelv, amely a megjelenítést a stíluslapokra bizza, moduláris alapokra épül és együttműködik az XML (Extensible Markup Language) alapú felhasználói alkalmazásokkal.

Vissza a lap elejére

7. A <var> címke

Változónevet a: <var>változónév</var> jelölőcímke alkalmazásával hozhatunk létre.

Megírása XHTML - lapon

<body>
<var>$x=2</var>
</body>

Megjelenése a monitoron:

$x=2

Vissza a lap elejére

8. A <tt> címke

A tt címke : a typewriter text - írógépbetűk - angol kifejezés rövidítéséből származik.
Vannak olyan esetek, amikor írógépbetűket akarunk megjeleníteni, azaz egyforma nagyságú helyet foglaljanak el a betűk. ( Pl : az i betű is ugyan akkorát mint az m betű)

Fixpontos betűket eredményez : <tt>szöveg</tt>
Ekkor a szöveg azonos térfoglalású, az írógép kimenetéhez hasonló karakterekkel jelenik meg.
Megírása XHTML - lapon

<body>
<tt> Így mondtam imígyen, irigylik is minden xHTML </tt>
</body>

Megjelenése a monitoron:

Így mondtam imígyen, irigylik is minden xHTML

Vissza a lap elejére

9. A <code> címke

A code címke: a computer code - számítógépes kód - angol kifejezés rövidítéséből származik.
A code címkét, számítógépes kódok megjelenítésére használjuk.

Kódrészleteket: <code>kódrészlet</code> jelölőelemek segítségével tudunk létrehozni.

Megírása XHTML - lapon

<body>
<code>
$tipus [ ]= "Sony"; <br />
$tipus [ ]= "Samsung"; <br />
$tipus [ ]= "Nokia"; <br />
$tipus [ ]= "VIDEOTON"; <br />
$tipus [ ]= "Motorolla"; <br />
$tipus [ ]= "Mercedes"; <br />
print $tipus[5];
</code>
</body>

Megjelenése a monitoron:

$tipus []= "Sony";
$tipus []= "Samsung";
$tipus []= "Nokia";
$tipus []= "VIDEOTON";
$tipus []= "Motorolla";
$tipus []= "Mercedes";
print $tipus[5];

Vissza a lap elejére

10. A <kbd> és a <samp> címke

A kbd címke: a keyboard - billentyűzet - angol szó rövidítéséből származik.
A billentűzetről beviendő utasítások megadására használjuk.
A kbd címke: logikai, szövegközi elem.

Billentyűfelirat jelzését: <kbd>szöveg</kbd> jelölőelemek segítségével tudunk létrehozni.
Minták bemutatását pedig: <samp>példa</samp> jelölőelemek segítségével tudunk létrehozni.

Vissza a lap elejére

11. A <pre> címke

A pre címke: a preformatted text - előre formázott szöveg - angol kifejezés rövidítéséből származik
A pre blokszíntű elem.
Normál esetben, amikor egynél több szóközt írunk egymás után az XHTML kódban, vagy a RETURN ( ENTER ) billentyűt lenyomva hozunk létre új sort, a böngészők nem veszik figyelembe.
A pre olyan elem, amelyet használva a böngésző megtartja az eredeti dokumentum szerinti szóközöket és sortöréseket.

Gyakran használják:
Versekhez, ASCII karakterekkel ellátott képekhez és egyszerű táblázatok kialakítására.
Hosszú kódblokkok weblapon való megjelenítésére.

Megírása XHTML - lapon:
- A szavak között nyomjuk le többször a szóközbillentyűt.
- A szöveg szó után nyomjuk le az ENTER, majd a TAB billentyűt, és ismét használjuk a szóközbillentyűt.

<pre> Ez egy előre formázott szöveg, mely bemutató céljából készült. </pre>

Megjelenése a monitoron:

 Ez  egy   előre    formázott             szöveg,   
	mely   bemutató              céljából készült.

Vissza a lap elejére

12. Az <acronym> vagy <abbr> címke

Amikor mozaikszókat, rövidítéseket használunk, azt tekintik megfelelő eljárásnak, ha az első előforduláskor minden mozaikszót egy acronym elemmel és az azt kiegészítő title jellemzővel azonosítunk
Mozaikszó a többi előfordulásnál az acronym elemmel való azonosítás nélkül használható az XHTML lapon.

Az abbr címkével jelölt szöveget is a böngészők gyakran dőlt betűkkel jelenítik meg.
Ez böngészőről böngészőre változhat, ezért a CSS stílusokkal beállíthatjuk, hogy az abbr elemek a nekünk tetsző betűstílussal jelenjenek meg.

Az acronym és az abbr címke használata várhatóan megváltozik, mert a W3C tekintetbe vette, hogy az XHTML következő változatából kihagyja az acronym címkét és az abbr címke marad

A következő jelölőelemek egy szóból álló, rövidített fogalmak magyarázatára szolgálnak. <acronym title="rövidítés magyarázata">rövidítés</acronym>
<abbr title="rövidítés magyarázata">rövidítés</abbr>

Megírása XHTML - lapon

<body>
<acronym title="United States of America">USA</acronym>
<abbr title="Limited">Ltb.</abbr>
</body>

Megjelenése a monitoron: Szöveg fölé mozgassuk az egeret.

USA

Ltb.

Vissza a lap elejére

13. A <del> címke

Szövegtörlést a: <del>kitörölt szöveg</del> jelölőelem segítségével valósítjuk meg.
A kitörölt szöveg áthúzott.

Megírása XHTML - lapon

<body>
<del>Jelenleg az xHTML 1.0 verzió fejlesztésénél tartunk.</del>
</body>

Megjelenése a monitoron:

Jelenleg az xHTML 1.0 verzió fejlesztésénél tartunk.

Vissza a lap elejére

14. Az <ins> címke

<ins>beágyazott szöveg</ins> jelölőelem beágyazott szöveg bemutatására szolgál (a beágyazott szöveg aláhúzott).

Megírása XHTML - lapon

<body>
<ins>Az XHTML kódrészlet ellenorzése igen fontos feladat. Az ellenorzéssel módunkban van betartani a W3C ajánlásait és kiküszöbölni a hibákat az XHTML kódrészletekben.</ins>
</body>

Megjelenése a monitoron

Az XHTML kódrészlet ellenőrzése igen fontos feladat. Az ellenőrzéssel módunkban van betartani a W3C ajánlásait és kiküszöbölni a hibákat az XHTML kódrészletekben.

Vissza a lap elejére