2.témakör - bekezdésformázás

FONTOS: a 2. témakörben leírtak a Chrome böngészőben használatosak.

Bekezések formai beállításai

Az előző témakörben foglalkoztunk egy html oldal legkisebb - számunkra még lényeges - formázható részének, a karakternek a formai beállításaival, illetve formázási lehetőségeivel.
Ebben a témakörben a következő formázási egységünk a bekezdés lesz. A mintafeladatsoron végighaladva, lépésről-lépésre fogunk megismerkedni a gyakorlati végrehajtás mikéntjével. Minden feladat végén - az otthoni gyakorlás elősegítése céljából - látni fogod a forráskódot, illetve a hozzátartozó screenshotot.

Szeretném fokozottan felhívni a figyelmedet az

"Új ismeret"
"Új címkék", és az
"Új tulajdonságok és hozzá tartozó értékek"

menüpontokra, amelyek a lényeges elemeket (címkéket) és az azokhoz tartozó, általunk használt tulajdonság-értékeket tartalmazzák.

Új ismeret:

bekezdések igazítása (balra-, középre- és jobbra zárás, sorkizárt bekezdés)
bekezdésen belüli sortörés (lágy sortörés/újsor)
bekezdésen belüli sortávolság meghatározása
első sor behúzása
behúzás balról- illetve jobbról
térköz beállítása bekezdés előtt- és után
címsorok

Új címkék:

<p> ... </p> -> bekezdés kezdete és vége
<br/> -> bekezdésen belüli soremelés (lágy sortörés). Páratlan címke, nincs külön nyitó-, illetve zárórész
<h1> ... </h1> -> h1-es szintű címsor
(további címsorok:
<h2> ... </h2>,
<h3> ... </h3>
...
<h6> ... </h6>)

Új tulajdonságok és hozzá tartozó értékek:

text-align: left/right/center/justify -> szöveg igazítása balra-, jobbra-, középre és sorkizárt
margin-left: és margin-right: -> bal- és jobb oldali behúzás. A mértéket pixelben kell megadni.
line-height: -> bekezdésen belüli sortávolság. Százalékban kell megadni. Az egyszeres (szimpla) sortávolság a 100%
text-indent: -> az első sor behúzása. Pixelben kell megadni.
margin-top: és margin-bottom: -> térköz beállítása bekezdés előtt- és után. A mértéket pixelben kell megadni.

Mintafeladat:

lépés: első bekezdés létrehozása és inicializálása

Új címke (tag):<p> ... </p> -> bekezdés

0. (bevezető) lépésként hozz létre egy "szigorúan szabályos" html oldalt és mentsd el "index.html" néven.
Ezután töltsd le az első bekezdéshez szükséges forrásszöveget (lorem ipsum...), helyezd el a törzsrészben, majd végezd el a szöveg inicializálását, azaz:
Forrás: itt

helyezd el a forrásállományt egy bekezdésben. -> <p> ... </p>
növeld a karakter méretét 18pt-ra

Figyeld meg, hogy alapértelmezésben a szöveg a böngészőablak bal oldalához igazítva jelenik meg (balra zárt), tehát az "egyenesre vágás" az ablak bal oldalán jelenik meg, míg a jobb oldal rendezetlen.


forrás	screenshot

lépés: bekezdés jobbra igazítása (zárása)

Új tulajdonság:érték text-align: right -> bekezdés jobbra igazítása

Igazítsd a bekezdést a böngészőablak jobb széléhez. Ezt a műveletet nevezzük jobbra igazításnak (zárás).
A művelet elvégzéséhez a "text-align" tulajdonságot használd, melynek értéke "right" lesz.
Mint ahogy azt dokumentumszerkesztésben már megszokhattuk, a bekezdés jobb oldal lesz "egyenesre vágva", míg a bal oldala "ahogy-esik-úgy-puffan".


forrás	screenshot

lépés: bekezdés középre (zárása)

Új tulajdonság:érték text-align: center -> bekezdés középre igazítása

Nézzük most a középre zárást. Ekkor a bekezdés középvonalához képzelheted a tükröt, így sem a jobb-, sem a bal oldal nem lesz majd "vágott". A "text-align" tulajdonság értéke "center" lesz majd.


forrás	screenshot

lépés: sorkizárt bekezdés

Új tulajdonság:érték text-align: justify -> sorkizárt bekezdés

Valószínűleg, nem fog a meglepetés erejével ledönteni a lábadról a sorkizárt bekezdés. Ekkor a "text-align" tulajdonság a "justify" értéket kapja, és a bekezdés mindkét oldala - az "árvasor" kivételével - szép egyenesen szerkesztett.


forrás	screenshot

lépés: balra zárt bekezdés

Új tulajdonság:érték text-align: left -> balra zárt bekezdés

Ha nem használod a "text-align" tulajdonságot, akkor alapértelmezetten a böngésző ablak bal oldalához igazítja a szöveget, de direkt, közvetlen módon is megadhatod a balra zárás értékét. Ekkor a "text-align" tulajdonságnak add a "left" értéket. Az eredmény ugyan az lesz, mint az első esetben, tehát a bal oldal "vágott", míg a jobb oldala szerkesztetlen marad majd a bekezdésnek.


forrás	screenshot

lépés: bekezdésen belüli sortörés

Új címke (tag):<br/> -> bekezdésen belüli sortörés (lágy sortörés/új sor) Páratlan tag, azaz nincs nyitó- és zárótag pár, hanem csak az összevont elem létezik.

Dokumentumszerkesztésben nem sűrűn ugyan, de itt, a weboldalkészítésénél aránylag gyakran alkalmazzuk a <br/> címkét, amelyet legkönnyebben úgy definiálhatnánk, mint a "lágy sortörés"-t a szövegszerkesztésben. Azaz, a szöveg az adott ponton új sort kap.
Keresd meg a screenshotban jól kivehető "hahomoznia kell" szövegrészt, és tedd ki a forrásban mutatott helyre a <br/> tag-et. Ettől a kurzorpozíciótól számított szöveg új sorba kerül.


forrás	screenshot

lépés: az ú.n. "nem-törhető-szóköz"

Új entitás (egyed):  -> nem-törhető-szóköz. Lényegében egy üres szóköznyi helyet jelent. Nem tartozik sem a tag-ek, sem pedig a tulajdonságok közé. Használata néha elkerülhetetlen, de ne szokj hozzá!
( Az "&" jel billentyűzet kódja: jobb oldali Alt + C )

A leírásban kicsit nehéz ábrázolni - és használata nem is teljesen szabályos! -, de helyenként előfordul, hogy használni kell a "nem-törhető-szóköz" entitást (html kódot), amely tulajdonképpen a következő karaktersor:  
Pont úgy kell beírni, ahogy azt piros színnel kiemeltem, tehát: "endjel-n-b-s-p-pontosvessző"

Ahányszor kitesszük, annyiszor kapunk az adott kurzorpozícióban egy "üres szóköz"-t, így például elérhetünk egyfajta szabálytalan karakter-ritkítátást. Ráadásul úgy, hogy a böngésző nem is töri majd az adott helyen a szöveget.
Bár hasznosnak látszik, de lehetőleg ne alkalmazd!
A mintafeladat teljessége kedvéért próbáld ki a forrásban mutatott helyen.


forrás	screenshot

lépés: bal- és jobb oldali behúzás mértéke

Új tulajdonság:érték margin-left:100px és margin-right:50px-> bal- ill. jobb oldali margóhoz viszonyított távolság meghatározása

A dokumentumszerkesztésben is használtad a "margótól-történő-elrugaszkodást", azaz a bal- vagy jobb oldali margóhoz viszonyított elszakadás mértékének beállítását.
A html szerkesztésben is használatos tulajdonságok nevei: "margin-left" illetve "margin-right". A mértéket pixelben kell megadni.


forrás	screenshot

lépés: bekezdésen belüli sortávolság

Új tulajdonság:érték line-height:XX% -> bekezdésen belüli sortávolság

Nagyon sűrűn alkalmazzuk dokumentumszerkesztésben a bekezdésen belüli sorok közötti távolság mértékének beállítását, azaz a sortávolságot. Ezt egy weboldal elkészítésekor a "line-height:" tulajdonsággal teheted meg. A mértéket százalékban kell meghatározni. Ami a dokumentumszerkesztőben a "szimpla" sortávolság, az a html oldal készítésekor a "line-height:100%". Ezt ismerve növelheted és csökkentheted a sorok közötti távolság mértékét.
A screenshotban 150%-os, azaz másfeles sortávolságot alkalmazok.


forrás	screenshot

lépés: első sor behúzása

Új tulajdonság:érték text-indent: -> bekezdés első sorának a többihez viszonyított behúzása. A behúzás mértékét pixelben kell megadnod.

Dokumentumszerkesztésből már szintén ismert művelet a bekezdés első sorának a többi sorhoz viszonyított behúzása. Ezt html oldalon a "text-indent:" tulajdonság segítségével adhatod meg. A távolságot pixelben kell meghatároznod.


forrás	screenshot

lépés: bekezdés előtti- és bekezdés utáni távolság (dokumentumszerkesztésben: térköz) meghatározása

Új tulajdonság:érték margin-top:80px és margin-bottom:40px-> két bekezdés közötti távolság meghatározása pixelben. Dokumentumszerkesztésben: a bekezdés előtti- és utáni térköz.

Dokumentumszerkesztésben szigorúan tiltott művelet két bekezdés közötti távolság létrehozására az "enter-billentyű-nyomogatása". Ezt a szabálytalan műveletet váltja ki weboldalak készítésekor a bekezdések közötti térköz beállítása.

Html szerkesztésben a "margin-top:" (bekezdés előtt) és a "margin-bottom" (bekezdés után) tulajdonságok segítségével adhatod meg a térközt. A távolságot pixelben kell meghatározni.
Mivel ennek elkészítéséhez még két bekezdés szükséges, a második és a harmadik bekezdést töltsd le innen és illeszd be az első bekezdés után.
Alkalmazd mindkét bekezdésre a forráskód formai beállításait és figyeld meg a térköz változását.


forrás	screenshot

Gyakorló feladatok

A karakterektre és a bekezdésre vonatkozó tulajdonságok ismeretében készítsd el a minta szerinti weboldalt.