Ebben a témakörben a feladatunk a weboldalak bekezdéseinek formai beállításaira vonatkozó ismeretek elsajátítása.
Hasonlóan a karakterformázáshoz, itt is a kiindulási pontként alkalmazhatjuk a dokumentumszerkesztésnél már
megismert műveleteket, amelyek megtalálhatók a weboldalak szerkesztésénél is.
Hasonlítsuk őket össze:
|
|
Alapvetően ezeken a dokumentum-formázási tulajdonságokon fogunk végigmenni a témakör megismerése során, kiegészítve néhány - csak a html szerkesztésre vonatkozó - új ismerettel.
Új címkék:
- <p>...</p> ->bekezdés
- <br/> ->bekezdésen belüli-, ú.n.: "lágy" sortörés (új sor)
- text-align: left -> balra zárás (balra igazítás)
- text-align: center -> középre zárás (középre igazítás)
- text-align: right -> jobbra zárás (jobbra igazítás)
- text-align: justify -> sorkizárás
- margin-left: szám pt -> a böngészőablak bal szélétől történő behúzás
- margin-right: szám pt -> a böngészőablak jobb szélétől történő behúzás
- text-indent: szám pt -> a bekezdés első sorának behúzása
- margin-top: szám pt -> a bekezdés előtti térköz
- margin-bottom: szám pt -> a bekezdés utáni térköz
- line-height: XXX% -> a bekezdésen belüli sortávolság (a 100% jelenti a egyszeres sorközt)
- background-color: angol név/rgb kód/hexadecimális érték -> a bekezdés háttérszínének definiálása
- padding: szám pt -> szöveg távolsága a bekezdés szélétől számítva - ez egyfajta keret
- Ha egy adott szövegegységet bekezdésként kívánunk kezelni, akkor azt a <p>...</p> címkék közé kell elhelyezni. Alapértelmezetten az adott bekezdés a böngészőablak
- teljes szélességében,
- balra igazított formában fog megjelenni.
- Középre igazítás Ha az adott bekezdést középre szeretnénk igazítani, akkor a középre zárás tulajdonságát kell használnulk a stílus meghatározásakor.
- Jobbra igazítás Ha az adott bekezdést jobbra szeretnénk igazítani, akkor a jobbra zárás tulajdonságot kell alkalmaznunk a stílus meghatározásakor.
- sorkizárt igazítás A legszebb igazítási forma - hasonlóan a dokumentumszerkesztéshez - itt is a sorkizárt igazítás, amely mind a bal-, mind pedig a bekezdés jobb oldalát egyenesre "vágja", alkalmazva az "árvasort" azokra a szövegrészekre, amelyek nem férnek már bele ebbe a távolságba.
- balra zárás Ha valamilyen okból kifolyólag közvetlenül szeretnél alkalmazni a balra zárás lehetőségét, akkor a tulajdnoság/érték párosítás az alábbiak szerint alakul:
- Lágy sortörés - bekezdésen belüli sortörés Abban az esetben, ha egy bekezdésen belül új sort szeretnénk kezdeni, akkor a dokumentumszerkesztésben is alkalmazzuk a "lágy sortörés"-t, másnéven "új sor"-t.
- behúzás művelete A böngészőablak bal- és jobb szélétől történő eltávolodás meghatározására szolgál a margin-left/right tulajdonság, amely után pixelben adhatjuk meg az elrugaszkodás mértékét.
- első sor behúzása Ez is sűrűn alkalmazott szövegszerkesztési művelet. A html nyelvben a text-indent kiváltására szolgál a html nyelvben. A bekezdés első sorának behúzása mindig a "nem-első-soroktól" számítva történik.
- Térköz Bekezdés előtti-, és bekezdés utáni távolsát meghatározása a feladata. Az érték meghatározása képpontban történik.
- Bekezdés háttérszínének meghatározása Minden bekezdésnek meghatározhatunk különböző háttérszínt. A színek definiálására három lehetőség adódik:
- angol kifejezés segítségével
- rgb kód meghatározásával
- hexadecimális szám segítségével.
- A bekezdés szélétől történő elrugaszkodás Végül, de nem utolsó sorban nézzük meg, milyen tulajdonság/érték páros meghatározásával tudjuk beállítani a szöveg és a bekezdés széle közötti távolságot.
- Bekezdéseken belüli sorköz A bekezdéseken belüli sortávolságot a line-height tulajdonság segítségével tudjuk meghatározni. Az egyszeres (szimpla) sortávolság a 100%. A mintában a szimpla- a másfeles- és a dupla sorköz látható.
|
|
| forrás | eredmény |
Tulajdonság/érték: text-align:center
|
|
| forrás | eredmény |
Tulajdonság/érték: text-align: right
|
|
| forrás | eredmény |
Ekkor alkalmazzuk a stílusban a text-align:justify tulajdonság/érték párosítást.
|
|
| forrás | eredmény |
Tulajdonság/érték: text-align:left
|
|
| forrás | eredmény |
Ezt itt a <br/> címkével tehetjük meg. Ez egy páratlan tag, azaz nincs nyitó- és záró címkepár.
|
|
| forrás | eredmény |
Tulajdonság/érték: margin-left/right: szám pt
|
|
| forrás | eredmény |
Tulajdonság/érték: text-indent: szám pt
|
|
| forrás | eredmény |
Tulajdonság/érték: margin-top/margin-bottom: szám pt
|
|
| forrás | eredmény |
Tulajdonság/érték: background-color: angol név/rgb kód/hexadecimális érték
|
|
| forrás | eredmény |
Ez a tulajdonság a padding tulajdonság, amelyet értékként egy szám követ, ami a pixelben történő távolság meghatározására szolgál.
Tulajdonság/érték: padding: szám pt
|
|
| forrás | eredmény |
Tulajdonság/érték: line-height: XXX%
|
|
| forrás | eredmény |
- Töltsd le a forrásállományt és formázd a feladatsor és a minta segítségével! Forrás: innen
- Készíts egy "3Sz" követelményeknek megfelelő alapweboldalt.
- Nyisd meg benne a forrásállományt, majd bontsd bekezdésekre úgy, hogy mindegyik versszak és a cím is külön bekezdésben legyen. A versszakokon belül a versorokat lágy sortörés segítségével oldd meg.
- Állítsd a versszakok közötti távolságot 30 pt-ra, a versszakokon belüli sorköz legyen szimpla.
- A szöveg - a cím kivételével - a böngészőablak bal szélétől számítva 200 pt-ra kezdődjön
- Biztosítsd a minta szerinti keretet - 10 pt.
- Minden páratlan számú versszak háttérszíne legyen világosszöld, a karakterek színe pedig rgb(9,33.248) kódolású.
- A cím legyen Algerian, félkövér, kiskapitális, ill. 40 pt méretű. Pozícionáld a minta szerinti helyre.
- Az első versszak, első négy sorában húzd alá a jelzőket!.
Minta: innen
Feladatsor
Bekezdésformázás, csak szöveggel - felelet
Az alábbi minta, nyersszöveg és feladatsor segítségével készítsd el a formázott weboldalt: Minta
