|
|
XHTML Jelölőelemek
Mobilváltozat!
Asztali változathoz,
kattints a képre!
Jelölőelemek
| <hr /> |
| <b> <strong> |
| <i> <em> |
| <address> |
| <big> <small> |
| <sub> <sup> |
| <cite> <dfn> |
| <var> |
| <tt> |
| <code> |
| <kbd> <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éskor, szöveget új sorba helyezi.
Bekezdés szavainál
aláhúzott szöveg
Aláhúzáshoz
<u>
<span>
jelölő címkét alkalmazzuk.
- Bekezdéseknél aláhúzott szöveg vagy szövegrészhez, XHTML lapon az <u> vagy a szövegkiemelő <span> 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
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;}
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
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.
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
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, 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.
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
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
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];
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.
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.
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.
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.
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.