Szövegformázás - Karakter entitások

Eddig csak betűket írtunk a kódunkba, de nehézségekbe ütköznénk, ha például < vagy > jelet akarnánk megjelenítettni a böngészővel. Hiszen ezeket a jeleket a címkékhez használjuk, így a böngésző azt gondolja a < után jövő szövegről, hogy az egy címke, és ez alapján próbálja megjeleníteni az oldalt. Még az is előfordulhat, hogy olyan karaktert akarunk megjeleníteni, ami nincs rajta a billentyűzetünkön, például a © jelet. Erre találták ki a karakter entitásokat.

Ez azt jelenti, hogy ha < jelet akarunk kiíratni, akkor a forráskódba írjuk be a < jeleket, amit egy entitásnak nevezünk. Az entitás & jellel kezdődik, utána szóköz nélkül következik az entitás neve, ami most lt, aztán pontosvessző következik, ami az entitás végét jelzi. Név helyett számmal is hivatkozhatunk egy entitásra, ilyenkor &# jelekkel kezdődik, és szintén pontosvesszővel végződik. Az általános szintaktika tehát a következő: &entitásneve; vagy &#entitásszáma; . Az entitás nevét ajánlott használni inkább, mint az entitás számát.

Az entitásokat legfőképpen az olyan karakterek jelölésére találták ki, amelyek vagy nincsenek benne a használt karakterkészletben, vagy nem tudjuk bevinni őket a billentyűzetről. Mivel mi UTF-8 kódolást használunk, az alább következő ötfajta entitáson kívül valószínűleg nem lesz szükségünk más entitásra. Hiszen az UTF-8 számos speciális karaktert is támogat, amiket így egyszerűen beírhatunk a HTML kódba.

Amik helyett muszáj entitást használnunk

• & jel: Ezt azért kell külön jelezni, mert ez a jel vezeti be az entitásokat. Ha a böngésző ilyen jellel találkozik, automatikusan keresi az utána lévő jeleket, hogy az entitást felismerve a megfelelő karaktert jeleníthesse meg. Entitása: &

  A weboldalon sehol nem maradhat kódolatlan & karakter! Például ha kimásolunk valahonnan egy linket, akkor muszáj kicserélnünk a linkben előforduló összes & jelet entitásra, azaz & jelekre. Például ha Google-n rákeresünk a html css kifejezésre, és linket akarunk létrehozni a találati listára, akkor ezt a linket fogjuk látni a címsorban:

  http://www.google.hu/search?hl=hu&q=html+css
  &btnG=Google+keres%C3%A9s&meta=

  De ebben van három & jel a vastagon szedett részeken, ezért így írjuk ki a linket a href attribútumba:

  http://www.google.hu/search?hl=hu&q=html+css
  &btnG=Google+keres%C3%A9s&meta=

• < jel: Ez a jel szolgál a címkék bevezetésére, ezért kell külön entitással kicserélni. Entitása: <
• Non-breaking space, azaz nem törő szóköz: Akkor kell használni, ha egynél több szóközt akarunk megjeleníteni egymás után. Entitása:   (A <pre>...</pre> címkék közé ágyazott szövegben is megjelenhetnek több, egymást követő szóközök.)

A nagyobb mint (>), írógépi idézőjel ("), aposztróf (') jelek megjelenhetnek kódolatlanul a szövegben, de jobban tesszük, ha mégis entitást használunk helyettük.

• > jel: Ez a jel szolgál a címkék lezárására, ajánlott helyette entitást használni. Entitása: >
• " jel: Írógépi idézőjel, ajánlott helyette entitást használni. Entitása: "
• ' jel: Aposztróf, ajánlott helyette entitást használni. Entitása: '

A szöveg részeinek logikai elkülönítése

Az alábbiakban olyan címkékkel fogunk megismerkedni, amelyek egy szövegrészt logikailag különítenek el a szöveg többi részétől. Emellett egyes szövegrészeket lehetőségünk van vizuálisan is elkülöníteni, például dőlt betűvel írunk egy címet. Azonban ez a kétfajta kiemelés nem keverendő egymással!

Ha vizuálisan különítünk el egy szövegrészt, azaz más színnel írjuk, más betűtípussal stb., akkor ezt a formázást stíluslappal kell elvégezni.

Ha azonban logikailag különítünk el egy részt, akkor a HTML kódban bizonyos címkéket kell használnunk. Erre jó példa a strong és az em címke. A <strong>...</strong> címkék közé kell tenni az erősen kihagnsúlyozott szöveget, az <em>...</em> címkék közé pedig a gyengébben kihangsúlyozott szöveget. A strong közé tett szöveg vastagon, az em közé tett pedig dőlt betűvel fog megjelenni.

Kérdezhetnénk, hogy miért kell ezeket a címkéket használni, amikor ugyanolyan hatást tudnánk elérni CSS használatával is? Azért, mert így lesz szemantikus az általunk írt kód. Címsorokat is létrehozhatnánk pusztán stíluslappal, ha megvastagítjuk és megnöveljük a szöveget. Azonban így elvész az az információ, hogy ez egy címsor, nem pedig egy díszített szöveg. Emlékezzünk: A HTML írja le a tartalmat, pl. hogy ez egy lista, ez egy címsor, ez egy hangsúlyos szöveg, ez egy táblázat; a CSS pedig a kinézetet: ez a táblázat ilyen színű legyen, a hangsúlyos szöveg vastagon jelenjen meg, a lista elemei előtt ez a kép legyen.

Az alább következő címkékre ugyanez vonatkozik: Nem azért kell őket használni, hogy vizuális hatást érjünk el velük, hanem a szemantikusság biztosításához.

Az ilyen logikai elkülönítés és a CSS formázás nem cserélhető fel egymással! Ha design elemként dőlt betűt szeretnénk, akkor ezt CSS tulajdonsággal érjük el, és ne az em címkével! Ha kihangsúlyozást szeretnénk, akkor ezt a strong címével érjük el, és ne CSS-sel!

Rövidítések és mozaikszók

Rövidítés minden olyan eset, amikor nem a teljes szót, kifejezést írjuk le, hanem vagy az első néhány betűjét, vagy a kifejezésben található szavak kezdőbetűit, vagy szóösszetétel esetén a szavak kezdőbetűit.

A mozaikszók a Wikipédia szerint hosszabb kifejezések betűiből vagy részleteiből összevont szavak. Leginkább a tulajdonnevek, azokon belül is az intézménynevek között gyakoriak. Minden mozaikszó rövidítés is egyben, de nem minden rövidítés mozaikszó.

A HTML dokumentumban nem kell az összes rövidítést logikailag elkülöníteni, csak az alábbi típusúakat:

Típus	Leírás	Példa
I.	Olyan rövidítés, amit rövidítve írunk le, de teljes szóként mondunk ki minden esetben	pl. stb. km em. u. hsz.
II.	Olyan rövidítés, ami egy tulajdonnév vagy kifejezés kezdőbetűiből áll, és betűzve ejtjük ki őket.	HTML, FTP, BKV, CSS
III.	Olyan mozaikszó, amely egy tulajdonnév vagy kifejezés szavainak első, vagy első néhány betűiből áll össze, és szóként ejtjük ki, nem pedig betűzve.	MAHART, MALÉV, MÁV, NATO, ENSZ, Benelux, GIF

A HTML kódban csak a II. és a III. típust kell megjelölni, az I. típust nem kötelező, de megjelölhetjük.

A II. típusú rövidítést első előfordulásakor így kell jelölni:

Második, vagy többszöri előfordulásakor pedig így:

A III. típusú rövidítést első előfordulásakor így kell jelölni:

Második, vagy többszöri előfordulásakor pedig így:

A vizuális megjelenéshez pedig az alábbi stíluslaprészletet használjuk:

Ez a példa bemutatja a fenitek használatát, a fenti stíluslapot alkalmazva:

Az ENSZ kifejezés Franklin Delano Roosevelt amerikai elnöktől származik. Az ENSZ egy szervezet.

A CSS segítségével szép weboldalak hozhatók létre. A CSS a képernyőfelolvasóknak is tud segíteni.

A stíluslapunk először beállítja, hogy a böngésző ne tegyen keretet a rövidítések alá, mert alapértelmezettként így jelöli meg őket. Utána keretet és segítség típusú egérmutatót állítunk be azokra a rövidítéskre, amelyekhez magyarázó szöveg van megadva. Ha ezek fölé állunk az egérrel, akkor megváltozik az egérmutató és megjelenik a magyarázó szöveg.

Érdemes egy rövidítésnek csak a legelső előfordulását aláhúzni, de dönthetünk úgy is, hogy az összes előfordulást aláhúzzuk, vagy minden weboldalon belül csak az első előfordulást.

A többszöri előfordulásokat azért még meg kell jelölni az abbr vagy az acronym címkével, de nem muszáj hozzá magyarázószöveget adni. Ugyanakkor a képernyőfelolvasó fel fogja így is ismerni a rövidítést.

Az abbr és az acronym címke nem a rövidíések magyarázatának helyett van, hanem logikai elkülönítés céljából. Ha egy rövidítést használunk, érdemes kiírni mellé a teljes alakot első előfordulásakor!

A CSS segítségével azt is leírhatjuk, hogyan értelmezzék a hangos képernyőfelolvasók a rövidítéseket. Ha a fentieket betartjuk, akkor ezt a stíluslapot kell írni a felolvasó számára:

Azaz a II. típusú, abbr címkével jelölt rövidítést betűzve olvassa fel, a III. típusú rövidítést szóként, azaz normál módon olvassa fel.

Idézetek és címhivatkozások

Az idézeteknek két fajtája van: Idézhetünk egy hosszabb részt, ekkor az egész egy új bekezdésbe kerül, erre való a blockquote címke. Amikor rövidebb részeket idézünk, akkor a q címkét használjuk.

Az idézőjeleknek több típusuk létezik:

• Az írógépes idézőjelek olyan egyenes idézőjelek, amik közé mi is írjuk az attribútumok értékeit. Magyar szövegben gyakran használják hibásan. Ugyanis magyar szövegben magyar idézőjeleket kell használnunk, amik a billentyűzeten nem találhatók meg, de a legtöbb szövegszerkesztő program automatikusan átírja a billentyűzetről bevitt írógépi idézőjeleket magyar idézőjelekké.

  Kinézet	Entitás	Leírás
  'A'	'	aposztróf
  "A"	"	írógépes dupla idézőjel

• Nyomdai idézőjelek a magyar tipográfiában. Ha magyarul írjuk a weboldalt, akkor a kettős magyar idézőjelet kell használnunk idézéskor az írógépi és egyéb más idézőjelek helyett!

  Kinézet	Entitás	Leírás
  ’A’	’’	félidézőjel
  „A”	„ ”	macskaköröm

• Belső idézőjelek a magyar tipográfiában. Ezeket akkor kell használni, ha maga az idézet is idézetet tartalmaz.

  Kinézet	Entitás	Leírás
  »A«	» «	magyar belső idézőjel (bal és jobb)

• Nyomdai idézőjelek az angolszász tipográfiában. Ha angolul írjuk a weboldalt, akkor az angol kettős idézőjelet kell használnunk.

  Kinézet	Entitás	Leírás
  ‘A’	‘ ’	angol szimpla idézőjelek (bal és jobb)
  “A”	“ ”	angol dupla idézőjelek (bal és jobb)

Kisebb, pár soros idézeteket a <q>...</q> címék közé kell írnunk. A szabvány szerint a böngészőnek fel kéne ismerni a q címkét, és a közte lévő szöveg elé és mögé idézőjelet tenni. Azonban az Internet Explorer ezt nem teszi meg, a többi böngésző pedig csak angol idézőjeleket jelenít meg. A problémáról ezen a címen érhető el bővebb információ.

A megoldást azt jeleni, hogy stíluslappal megmondjuk a böngészőnek, hogy ne tegyen idézőjeleket a q címke tartalmának elé és mögé. Ezt ezzel a kóddal tehetjük meg:

Ezután minden idézésnél kézzel kell kiírnunk a magyar nyelvnek megfelelő idézőjeleket, méghozzá a q címkén kívül. Ez ellenkezik a W3C által előírt szabvánnyal, ami szerint nem kéne idézőjeleket használnunk, mert a böngésző kiteszi helyettünk. Ez a fentiek miatt azonban nem megfelelő.

Ez a példa megmutatja a rövidebb idézetek használatát. Ehhez szükséges, hogy a fenti kis stílust alkalmazzuk arra az oldalra, ahol idézünk. Az idézőjeleket nem kell entitással helyettesíteni, mert az UTF-8 karakterkészletében benne vannak ezek a jelek. Tehát egyszerűen ki is másolhatjuk őket erről az oldalról.

Az idézett személy nevét a <cite>...</cite> címkék közé kell írni!

„Jót s jól! Ebben áll a nagy titok” –
figyelmezteti Kazinczy költőtársait.

Ha belső idézetet akarunk használni, akkor egymásba kell ágyazni a q címkéket és az idézőjel formáját is meg kell változtatni:

Petőfi írta apjáról: „Szemében »mesterségem« / Most is nagy szálka még;
/ Előítéletét az / Évek nem szünteték.”

Ha hosszabban akarunk idézni, akkor a szöveget a <blockquote>...</blockquote> címkék közé kell írnunk. Ilyenkor semelyik böngésző nem teszi ki az idézőjelet, erről nekünk kell gondoskodnunk. Az ilyen idézet kicsit beljebb fog kezdődni.

Opcionális attribútum a cite, amely értékének egy URL-t adhatunk meg, ahol az idézet megtalálható, vagy több információ érhető el róla. Ez nem összekeverendő a cite címkével, amely továbbra is az idézett személy nevének megjelölésére szolgál:

Ady Endre írta:

Nem az a fontos, hogy meddig élünk, / Hogy meddig lobog vérünk, / Hogy csókot meddig kérünk és adunk, / Hanem az, hogy volt egy napunk, / Amiért érdemes volt élni.

Látható, hogy a fenti idézetblokk nincs is idézőjelek között, csak kicsit beljebb kezdődik! Ez normális viselkedés, az idézőjeleket nekünk kell kitenni kézzel, de stíluslappal jobb megoldás. Stíluslappal megadhatjuk, hogy egy bizonyos címke előtt és után automatikusan megjelenjen valamilyen szöveg, esetünkben a blockquote elem előtt és után egy kezdő és záró idézőjel.

Azonban az ilyen megoldást az Internet Explorer nem kezeli, ezért ehelyett két kis képet fogunk kitenni hátternek. Azt akarjuk elérni, hogy a bal felső és a jobb alsó sarokban jelenjen meg az idézőjel képe. Azonban csak azt tudjuk megadni, hogy a háttérkép vagy ismétlődjön, vagy pedig csak egyszer jelenjen meg, de nekünk arra volna szükségünk, hogy kétszer jelenjen meg. Ezért cselhez folyamodunk: a blockquote hátterének betesszük az egyik idézőjelet, és bal felül jelentíjük meg, a blockquote-on belüli div címkének ugyancsak beállítjuk a hátterét, de azt jobb alul jelenítjük meg. A div címkén belül használhatunk több bekezdést is, ha hosszabb az idézet, mert csak a div-nek adtuk meg a hátterét.

Ady Endre írta:

Nem az a fontos, hogy meddig élünk, / Hogy meddig lobog vérünk, / Hogy csókot meddig kérünk és adunk, / Hanem az, hogy volt egy napunk, / Amiért érdemes volt élni.

Kihangsúlyozás és definíció

A szövegben logikailag el kell különíteni a fontosabb, kihangsúlyozott részeket. Az erősebb kihangsúlyozásra való a strong címke, a gyengébb kihangsúlyozásra pedig az em címke.

Ez egy nagyon fontos információ

Ez egy fontos információ

A böngészők a strong elemet vastagon, az em elemet pedig dőlt betűvel jelenítik meg. Ha más megjelenést szeretnénk, akkor használjunk stíluslapot!

Ha a szövegben először fordul elő egy olyan ismeretlen fogalom, amit meg is magyarázunk rögtön, akkor ezt a fogalmat jelöljük meg a dfn címkével. A többszöri előfordulásait már nem kell megjelölni. Ez a címke segíthet abban, hogy tárgymutatót készítsünk!

A csíkosfejű nádiposzáta a madarak osztályának verébalakúak rendjébe és az óvilágiposzáta-félék családjába tartozó faj. A csíkosfejű nádiposzáta Magyarországon fokozottan védett!

Programnyelvek forráskódjának jelölése

• A code címke programnyelvi kód jelölésére szolgál. Gyakran használják a pre címkével a formázáshoz:
  <p>Ez a lehető legegyszerűbb Java program:</p>
<pre>
<code>
public class Main {
   
    public static void main(String[] args) {
        System.out.println("Helló világ!");
    }
   
}
</code>
</pre>

  Ez a lehető legegyszerűbb Java program:

  public class Main {
      public static void main(String[] args) {
          System.out.println("Helló világ!");
      }
  }
  

• A kbd címke olyan szöveg jelölésére szolgál, amit a felhasználónak kell begépelnie.
  <p>A fenti program lefordításához, majd futtatásához ezt kell beírni a parancssorba:</p>
<p><kbd>javac Main.java<br>
java Main</kbd></p>

  A fenti program lefordításához, majd futtatásához ezt kell beírni a parancssorba:

  javac Main.java
  java Main

• A samp címke egy kód kimenetét mutatja meg.
  <p>A fenti program kimenete:</p>
<p><samp>Helló világ!</samp></p>

  A fenti program kimenete:

  Helló világ!

• A var címke egy program változójának jelölésére szolgál.
  <p>A programban az <var>args</var> változó a program indításakor esetlegesen megadott paramétereket tartalmazza.</p>

  A programban az args változó a program indításakor esetlegesen megadott paramétereket tartalmazza.

Felső- és alsó index

Felső indexet a sup, alsó indexet pedig a sub címkével lehet előállítani.

Az angol így jelöli a sorszámokat: 1^st, 2^nd, 3^rd.

A víz vegyjele: H₂O

Lakcímek, vagy egyéb címek

Lakcímet, vagy egyéb címeket az address címkével kell jelölni.

Irodánk elérhetősége:

1111 Budapest
Pitypang utca 111/C.

Beillesztett és kivágott szöveg

Vannak olyan programok, amelyek követik egy szöveg változásait. Ha az eredeti szövegbe utólag beszúrtak, vagy kitöröltek részeket, akkor ezt külön jelzi, dátummal megjelölve a módosítások idejét.

Ugyanilyen logikai megkülönböztetést érhetünk el az ins (beszúrt szöveg) és a del (kitörölt szöveg) címkékkel. Ezeket sem dekorációra, hanem a beszúrt és a kitörölt szöveg megkülönböztetésére a többi szövegtől használjuk. Használhatjuk bennük a datetime attribútumot, ami ÉÉÉÉHHNN formátumban adja meg a módosítás idejét, illetve a cite attribútumot, amely azt az URL-t adja meg, ahol a módosítás oka van megmagyarázva.

Ezeket a címkéket akkor használjuk, ha tudatni akarjuk a látogatóinkkal, hogy egy cikk szövegét módosítottuk, de a módosított szövegrész régebbi változatát is meg akarjuk tartani.

Az Internet Explorer böngésző nem kezeli a fix pozíciójú elemeket. Időközben a frissen megjelent 7-es változat már kezeli ezeket az elemeket.

A csomag ára most csak $1497 $997 $597 $379 ! Rendelje meg MOST!

Bekezdésen belüli szöveg kijelölése

Gyakran van szükségünk arra, hogy csak bizonyos szavak, szövegrészeket emeljünk ki, színezzünk át stb. Az ilyen formázandó szövegrészek kijelölésére kell használni a span címkét. Ehhez a címkéhez mindig adjuk meg a class értéket, hiszen így fogjuk tudni később elérni a stíluslapból.

Tulajdonság	Leírás	Lehetséges értékek
color	Szöveg színének megadása.	color-rgb color-hex color-name
Szöveg színének és háttérszínének megadása.
text-align	Szövegigazítás: bal, jobb, közép, sorkizárt.	left right center justify
Szövegek összes lehetséges igazítása.
text-decoration	Aláhúzást, felülhúzást, áthúzást, vagy villogást állít be a szövegre.	none underline overline line-through blink
Szöveg aláhúzása, felülvonása, áthúzása, vagy villogtatása. A villogó szöveget nem kezeli az Internet Explorer.
text-indent	Bekezdés első sorának beljebb kezdése.	length %
Bekezdés első sorainak beljebb kezdése.
line-height	Sorközök megadására szolgál.	normal number length %
Különböző sorközöket állít be a bekezdésre.
letter-spacing	A karakterek közti szóköz nagyságát szabályozza.	normal length
A karakterek közti szóköz nagyságának változatai.
word-spacing	A szavak közti szóköz nagyságát szabályozza.	normal length
A szavak közti szóköz nagyságának változatai.
text-transform	Szöveget kisbetűssé, nagybetűssé, vagy minden szót nagy kezdőbetűssé változtat.	none capitalize uppercase lowercase
Kisbetűs, nagybetűs, szavankénti nagy kezdőbetűs szöveg.
font-family	A használandó betűcsaládról ad prioritásos listát: Ha az első megadott font nem található, akkor próbálkozik a másodikkal és így tovább.	Betűcsalád neve, pl: Arial, "Times New Roman", Verdana; Vagy: általános típus: serif sans-serif cursive fantasy monospace
Példa különböző betűcsaládokra. Példa az általános típusokra.
font-style	Dőlt betűs szöveg megjelenítését teszi lehetővé.	normal italic oblique
Dőlt betűs szöveg. Előfordulhat, hogy semmilyen különbséget nem veszünk észre az italic és az oblique értékek között, mindegyik dőlt betűket eredményez. Talán van olyan betűcsalád, ahol érezhető a különbség. Dőlt betűs szöveghez használjuk az italic értéket!
font-size	Szöveg méretét lehet megadni.	xx-small x-small small medium large x-large xx-large pt px smaller larger % em
A font-size tulajdonság értékéhez csak ezeket az értékeket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem betűméretéhez képest relatívan adják meg a betűméretet. Ha abszolút értékeket használunk, akkor az Internet Explorer 6 felhasználók nehezen fogják tudni átméretezni a szöveget, mert az IE 6 csak kis skálán engedi változtatni a betűméretet. Továbbá az abszolút betűméret eltérhet a látogató által megszokottól. Abszolút méretet csak nyomtatási stíluslaphoz használjunk, ezek a következők: xx-small, x-small, small, medium, large, x-large, xx-large, pt, px. Abszolút fontméretek használata. Itt először a body elemre 300% fontméretet állítottunk be. Azonban ez csak az első bekezdésre van hatással, mert ez a bekezdés örökli a body elem fontméretét. A többi bekezdésre viszont nincs hatással a szülő elem (azaz a body) fontmérete, mert abszolút méreteket használtunk. Relatív fontméretek használata. Ebben a példában a fontméretek a szülő elemhez képest (ami most a body) lettek megadva. A smaller azt jelenti, hogy az elem fontmérete eggyel kisebb legyen, mint a szülő elem fontmérete, a larger pedig azt, hogy eggyel nagyobb. A 2em és a 200% egyaránt azt jelenti, hogy az elem fontmérete legyen kétszerese a szülő elem fontméretének.
font-weight	Szöveg vastagságát adja meg.	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Szöveg vastagítása. Bár a vastagítás értéke elvileg széles skálán állítható, a böngészők csak a normal vagy a bold értéket veszik figyelembe! Tehát vagy vastagíthatjuk a szöveget, vagy nem csinálunk vele semmit.
font-variant	Kiskapitális szöveg megadása.	normal small-caps
Kiskapitális szöveg megadása. A kiskapitális szöveg olyan szöveg, ami először csupa nagybetűs lesz, aztán az eredetileg is nagybetűk egy kicsivel nagyobb méretűek leszenek, mint a többi nagybetű.
font	Rövidítő tulajdonság az összes eddigi tulajdonság beállításához, a jobb oldali sorrendben.	font-style font-variant font-weight font-size/line-height font-family
A font tulajdonság használata, ötféle meghatározás.

Ajánlott linkek

HTML 4.01 szöveg modulja: http://www.w3.org/TR/html401/struct/text.html

CSS font modulja: http://www.w3.org/TR/CSS21/fonts.html

CSS szöveg modulja: http://www.w3.org/TR/CSS21/text.html