4.03. Szövegek formázása, tördelése

Default book

A BODY tag részben használt jelölők jelennek meg a HTML oldalon az ablakban. A <BODY> ........</BODY> tag-ek közötti rész az, ami látszik.

Ide írhatunk bármilyen folytonos szöveget és a szöveg megjelenési tulajdonságait lehet módosítani a tag-ekkel. Nagyjából olyan dolgokat tudunk itt is végezni, mint egy szövegszerkesztőben, de azért a HTML oldal szegényesebb, mint egy modern szövegszerkesztő.

Szövegek manipulálása

A szöveg manipulálásának legegyszerűbb módja, amikor egy vagy több betű megjelenését módosítjuk. Például egy szöveg lehet félkövér, vastag, lehet dőlt és kiemelt, lehet aláhúzott, lehet áthúzott, lehet alsó index és felső index. Ezek a tag-ek párban fordulnak elő, tehát nyitó tag és záró tag. Lehet még kis karakter és lehet nagy karakter is. A HTML 5 újítása volt a kiemelés tag bevezetése is.

<b>félkövér</b>,
<strong>vastag</strong>
<i>dőlt</i>
<em>kiemelt</em>
<u>aláhúzott</u>
<s>áthúzott</s>
<sub>alsó</sub> index 
<sup>felső</sup> index
<small>kis karakter</small>
<big>nagy karakter</big>
<mark>kiemelés</mark>
<pre>A szöveget formázatlanul írja ki</pre>

Egy vagy több betű színét és méretét is lehet változtatni. egyszerre több paramétert is lehet módosítani, mint például itt.

Egy vagy több betű színének változtatása: 
<span style="color:#FF0000;">színét</span>
<span style="color:#0000FF;">és</span> 

A betű méretének változtatása:
<span style="font-size:24px;">méretét</span> 
<span style="font-size:16px;">lehet </span>
<span style="font-size:18px;">változtatni</span>.

Több paraméter egyidejű módosítása 
<span style="font-size:26px;"><span style="color: rgb(255, 0, 0);"><s> mint például itt.</s></span></span>

Ez már nem a hagyományos HTML megoldás. Látható, hogy a <span> ...</span> tagben van egy furcsaság. Ezt attributumnak hívják és segítségével a szövegrész tulajdonságait lehet módosítani a stíluslapok felhasználásával. Itt most ezzel megállunk, mert a stílusokra majd később vissza fogunk térni.

Megjegyzem, hogy a HTML eredeti leírásában kevesebb karakterformázó tag volt, viszont az új lehetőségek gyakran ugyanazt vagy nagyon hasonló hatást érnek el a böngészőkben. Például az <i> és az <em> tag vagy a <b> és a<strong> tagek nagyon hasonló karakterformázást eredményeznek.

Szövegek tördelése

Nagyon fontos tag, amely a szöveget bekezdésekbe, paragrafusokba tördeli. Ezt a <p>......</p> tag szolgálja.

<p>Nagyon fontos tag, amely a szöveget bekezdésekbe, paragrafusokba tördeli. Ezt a <strong>&lt;p&gt;......&lt;/p&gt;</strong> tag szolgálja.</p>

A paragrafusok a szöveg egybefüggő egységei és a paragrafus tag segítségével tudjuk a szöveget tördelni. Ez szinte szó szerint megegyezik a szövegszerkesztőkben alkalmazott megoldásokkal. Paragrafusoknak lehet a szövegét balra, középre, jobbra vagy sor kiegyenlítve igazítani.

Az alábbi szövegrész balra igazított.

Ez a paragrafus jobbra igazított

Ezt itt középre igazítottam.

A weboldalak teszteléséhez használják az un. "Lorem Ipsum" szöveget, ami nagyjából a blablabla megfelelője a webfejlesztésben. Ez a kifejezés a tesztszövegek előállításánál jött elő, amikor is a szöveg egy weboldalon csak azért van, hogy teszteljék a weboldal kinézetét, ezért mindenféle szöveget odatesznek, csak hogy teljen az oldal. Most is ezt teszem és sorkizárttá fogom tenni a szöveget, hogy megtaníthassam a megfelelő tag-eket.

A fenti példákban látható, hogy a bekezdések között mindig van egy kis sortávolság. Ezt a távolságot, meg azt, hogy milyen paramétereket hogyan kell beállítani szintén a stílusoknál tanuljuk meg.

A bekezdéshez hasonló két TAG van, amelyekben az a furcsaság, hogy nem látszik önmagában a jelentésük, mivel a szöveget csak egységbe fogják, de nem adnak neki formát.

Ez a két tag a <div> .....</div> és a <span> ......</span>. A kettő jelentése és szerepe hasonló. Tulajdonképpen nincsen is meghatározva. Csak egy különbség van közöttük. A <div> tag alapesetben egy téglalapot határoz meg, míg a <span> tag a szövegnek egy szakaszát keretezi, mint ahogy ez korábban látszott is. Ezt szépen úgy mondjuk, hogy a <div> tag block (téglalap) és a <span> tag inline (sorközi) megjelenítésű alapesetben!

Ez egy div doboz, aminek adtam keretet és meghatároztam a szélességét.

A fenti példa akkor mire jó? Az oldalon lévő tartalmak tördelésére és később egyéb huncutságokra, hogyha már ismerünk egy kis javascriptet is! wink

További TAG, amikkel a szöveget lehet tördelni

Ha egy szöveg következő szavát egyszerűen és biztosan a következő sor elején akarjuk látni, akkor használhatjuk a <br /> tag-et (break=törés, sortörés).
Valahogy így.

Ha egy szöveg következő szavát egyszerűen és biztosan a következő sor elején akarjuk látni, akkor használhatjuk a <br /> tag-et.
Valahogy így.

Ha olyan hosszú szavunk van, amely nem fér ki egy sorban, akkor a böngészők default nem törik el a szót. Viszont ha használjuk a <wbr> tag-et akkor a hosszabb szavak a megjelölt helyen eltörhetnek.

Nézzük csak meg a visszaszentségteleníthetetlenségeskedéseitekéivel nevű szót vajon hol lesz eltörve?

A fenti doboz HTML kódja így néz ki:

<div style="width:200px;border: 1px black dotted;"><p>Nézzük csak meg a visszaszentségtelenít<wbr />hetetlenséges<wbr />kedéseitekéivel nevű szót vajon hol lesz eltörve?</p>
</div>

Látható, hogy a <wbr/> tag eltöri a szót. Ha azonban szélesebb a hely, akkor nem töri, tehát ez egy feltételes törés csak!

A szöveg ragolásához tatozik még egy vízszintes vonal húzásának lehetősége:

Ez a <hr /> tag (Horizontal ruler = vízszintes vonal)

Ha a weboldalba olyat szeretnénk beleírni, amely nem jelenik meg a böngésző ablakban, de megjegyzésként ott van a szövegben, akkor az alábbi jelölőt kell használnunk.

<!-- ........-->

<pre>....</pre> - Ez a tag pár azt eredményezi, hogy a kirt szöveg állandó szélességű karakterekkel, szóközök, tab-ok és sortörések megtartásával jelenik meg. Ilyet használhatunk például a PHP hibaüzeneteinek megjelenítésénél.

A HTML5-ben vezették be az alábbi tageket

<code>...</code> - Ha számítógépes kódot akarunk megjeleníteni.
<var>...</var> - ha egy változó jelölését akarjuk elvégezni
<samp>...</samp> - egy program kimenetének megjelenítésére akarjuk használni
<kbd>....</kbd> - egy billentyűzet kombináció megjelölését akarjuk kiírni
<time>  - egy időpontot szeretnénk megjeleníteni

A HTML 5 újítása az idő és a dátum megadása

<time datetime="2013-03-15">2013. március 15.</time>
<time datetime="14:00">Kezdés 14 órakor</time>
<time datetime="2013-03-15T20:00+00:00">
     2013. március 15  20:00
</time>

Ezt a kimenetet állítja elő: