Tartalomjegyzék

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 &lt; 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

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.

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:

<abbr title="Cascading style sheets">CSS</abbr>

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

<abbr>CSS</abbr>

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

<acronym title="Egyesült Nemzetek Szervezete">ENSZ</acronym>

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

<acronym>ENSZ</acronym>

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

abbr, acronym {
    border: none;
}

abbr[title], acronym[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

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

<p>Az <acronym title="Egyesült Nemzetek Szervezete">ENSZ</acronym> kifejezés Franklin Delano Roosevelt amerikai elnöktől származik. Az <acronym>ENSZ</acronym> egy szervezet.</p>
<p>
A <abbr title="Cascading Style Sheets">CSS</abbr> segítségével szép weboldalak hozhatók létre. A <abbr>CSS</abbr> a képernyőfelolvasóknak is tud segíteni.</p>

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:

abbr {
    speak: spell-out;
}

acronym {
    speak: normal;
}

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:

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:

q:before, q:after {
    content: "";
}

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!

<p><q>Jót s jól! Ebben áll a nagy titok</q>” – <br>
figyelmezteti <cite>Kazinczy</cite> költőtársait. </p>

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:

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

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.

Nemcsak idézetkor használunk idézőjelet. Az olyan szavakat is idézőjelbe kell tennünk, amiket nem szó szerint, vagy ironikusan értünk. Azonban az ilyen szavakhoz nem kell a q címkét használni! A q címkét csak az idézetekhez szabad használni!

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.

A blockquote elemen belül nem szabad azonnal szöveget írni, hanem vagy <div>...</div>, vagy <p>...</p> címék közé kell tenni, különben a HTML dokumentum nem lesz érvényes (valid)! (Csak Strict Doctype esetén van így, amit javasolt használni.)

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:

<p><cite>Ady Endre</cite> írta:</p>
<blockquote>
<p>
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.</p>
</blockquote>

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.

blockquote {
    background: transparent url(quote.gif) left top no-repeat;
}

blockquote div {
    padding: 0 52px;
    background: transparent url(quote.gif) right bottom no-repeat;
}

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.

<p><strong>Ez egy nagyon fontos információ</strong></p><p><em>Ez egy fontos információ</em></p>

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!

<p>A <dfn>csíkosfejű nádiposzáta</dfn> 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!</p>

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

Felső- és alsó index

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

<p>Az angol így jelöli a sorszámokat: 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>.</p>
<p>
A víz vegyjele: H<sub>2</sub>O</p>

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

A víz vegyjele: H2O

Lakcímek, vagy egyéb címek

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

<p>Irodánk elérhetősége:</p>
<address>

1111 Budapest<br>
Pitypang utca 111/C.
</address>

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.

<p><del datetime="20061101">Az Internet Explorer böngésző nem kezeli a fix pozíciójú elemeket.</del> <ins datetime="20061101">Időközben a frissen megjelent 7-es változat már kezeli ezeket az elemeket.</ins></p>

<p>
A csomag ára most csak <del>$1497</del> <del>$997</del> <del>$597</del> $379 ! Rendelje meg MOST!</p>

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

Tartalomjegyzék Impresszum, szerzői jogok