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)
Új tulajdonságok:
  • 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
A mintafeladat megoldásához szükséges forrásállományok:
  • egy bekezdéses állomány: innen
  • két bekezdéses állomány: innen
Mintafeladat

  1. 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.
  2. Alapértelmezetten az adott bekezdés a böngészőablak
    • teljes szélességében,
    • balra igazított formában fog megjelenni.
    Szokjunk hozzá hozzá ahhoz is, hogy ha az adott bekezdés összes karakterére alkalmazni szeretnénk a karakterformai beállításokat - például, ahogy az alábbi mintában a karakterméret 18 pt -, akkor nem kötelező a <span>...</span> címke használata, hanem megtehetjük azt a bekezdés nyitó címkéjének a stílusbeállításával.
    forrás eredmény
  3. Középre igazítás
  4. 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.
    Tulajdonság/érték: text-align:center
    forrás eredmény
  5. Jobbra igazítás
  6. 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.
    Tulajdonság/érték: text-align: right
    forrás eredmény
  7. sorkizárt igazítás
  8. 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.
    Ekkor alkalmazzuk a stílusban a text-align:justify tulajdonság/érték párosítást.
    forrás eredmény
  9. balra zárás
  10. 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:
    Tulajdonság/érték: text-align:left
    forrás eredmény
  11. Lágy sortörés - bekezdésen belüli sortörés
  12. 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.
    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
  13. behúzás művelete
  14. 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.
    Tulajdonság/érték: margin-left/right: szám pt
    forrás eredmény
  15. első sor behúzása
  16. 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.
    Tulajdonság/érték: text-indent: szám pt
    forrás eredmény
  17. Térköz
  18. 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.
    Tulajdonság/érték: margin-top/margin-bottom: szám pt
    forrás eredmény
  19. Bekezdés háttérszínének meghatározása
  20. 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.

    Tulajdonság/érték: background-color: angol név/rgb kód/hexadecimális érték
    forrás eredmény
  21. A bekezdés szélétől történő elrugaszkodás
  22. 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.
    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
  23. Bekezdéseken belüli sorköz
  24. 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ó.
    Tulajdonság/érték: line-height: XXX%
    forrás eredmény
Gyakorló feladatok

  1. Töltsd le a forrásállományt és formázd a feladatsor és a minta segítségével!
  2. Forrás: innen
    Minta: innen
    Feladatsor
    1. Készíts egy "3Sz" követelményeknek megfelelő alapweboldalt.
    2. 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.
    3. Állítsd a versszakok közötti távolságot 30 pt-ra, a versszakokon belüli sorköz legyen szimpla.
    4. 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
    5. Biztosítsd a minta szerinti keretet - 10 pt.
    6. 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ú.
    7. A cím legyen Algerian, félkövér, kiskapitális, ill. 40 pt méretű. Pozícionáld a minta szerinti helyre.
    8. Az első versszak, első négy sorában húzd alá a jelzőket!.
PHP Code Snippets Powered By : XYZScripts.com