Témakörök
 
Index

Szövegformázás!

Mobilváltozat!


Asztali változathoz,
kattints a képre!

Asztali változat







1. Gyakori szövegformázó címke és stílus

A html lapon megadható, leggyakoribb szövegformázó parancs:
- a nyitó <p> és záró </p> ( részletesen, lásd a bekezdések formázása témakorben.)
- valamint amit csak a mondat végén alkalmazunk a sorlezáró (sorkizáró) utasítás: <br />

A Css azaz stíluslappon megadható, leggyakoribb szövegformázó és stílusparancs.
A törzsre (body) vonatkozó leggyakoribb szabályok. A body-val sok dolgot végretudunk hajtani a weblapon.
Semmiképp ne hagyjuk ki, a body-hoz megírt meghatározások közül:
- háttérszín. ( Tetszés szerint választható )
- betűtípus. ( Választhatunk többféle betűtípust, de a talp nélküli betűket könnyebb olvasni),
- betűméretet. ( Olvashatósági szempontok miatt állitsuk 100%-ra,)

Megjegyzés: 100% = 1em, 130% =1.3em stb.

A teljes body stílus meghatározása, CSS-lapon azaz a stíluslaon:
Következő példában, a kék színnel kiemelt részeket tetszés szerint megváltoztathatjuk.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0.1px; background-color: #ccc; }

Méretek

H4 { font-size: 22px; } - Monitor felbontásának, képpont mérete.
- Egy átlag 12-es btűméret kb. 10 - 16 px.
- Egy hüvelyk körülbelül. 72 px vagy képpont.
   
H4 { font-size: 1em; } - Böngésző programok alapértelmezett betűmérete.
H4 { margin: 0.5in; } - inches, 1in = 2.54cm
H4 { font-size: 12pt; } - points, 1pt = 1/72 in
H4 { font-size: 1pc; } - picas, 1pc = 12pt
H4 { line-height: 3cm; } - centiméter. Egy centiméter, körülbelül. 28.5 - 32 px*/
H4 { word-spacing: 4mm; } - miliméter.

Vissza a lap elejére


 

2. Bekezdések

Nyitó, azaz kezdő <p> címke, és a záró </p> címke között helyezkednek el.
Az XHTML lapon lévő nyitó <p> és záró </p> közé írt szöveg is formázható.

Első példa:A szöveg jobb oldalon lesz látható. (right)
XHTML -lapon történő meghatározás megírása a kezdő <p> címkében.
- balra : left (Ezt nem kell megadni, a böngésző programok autómatikusan balra helyezik a szöveget.)
- középre : center
- jobbra : right

Az első sorban látható, hogyan kell alkalmazni.
A második sorban kék színnel látható, hogy hova kerül a szöveg, ha helyesen adjuk meg a meghatározást.

<p align="right"> Szöveg igazítása jobbra </p>

Szöveg igazítása jobbra.

Második példa:
A css, azaz stíluslapon megadható, kezdő <p> és záró </p> címkék közötti szöveg formázása.
X = betűméret: helyére írhatunk tizedes számértéket is ( 0.5em, 0.6em, 0.9em stb. tetszés szerint)
Y = betűszín: helyére az általunk megfelelő színnek a kódját írjuk be. ( #000, #ccc, stb.)
text-align: = szöveg-igazítás. Ezután adjuk meg, hogy a szöveg hól helyezkedjen el.

Példa: p { font: Xem Arial ; color: #YYY; text-align: right;}

Vissza a lap elejére


 

3. A dőlt és a félkövér betűk.

em = dőlt
A kezdő <em>címke és a záró <em>címke közé írt szavak és mondatok, dőlt betűvel jelennek meg. (ez nem összekeverendő a betűméreteknél használt em értékkel.)
strong = félkövér
A kezdő <strong> címke és a záró <strong> címke közé írt szavak és mondatok, félkövér betűvel jelennek meg.

Megjegyzés:
A fenti példákat, a html - lapunkon megírt mondatoknál kell alkalmazni.
Legtöbb böngésző ezeket így ismeri, de néhány nem.
Ezért, a stíluslapon hozzunk létre az <em> címkére és a <strong> címkére vonatkozó meghatározást, mely minden böngészőre alkalmazható.

Példa.
strong {font-weight: bold;}
em { font-style: italic ; }.

Láthatunk négy meghatározást, normal, dőlt és félkövér.
Amelyik szinpatikus, írjuk be a CSS-lapra azaz stíluslapra.

Normal betűkhöz p{ font-weight : normal;} <p>Szöveg megjelenése</p>
Dőlt betűkhöz em{ font-style: italic;} <p><em>Szöveg megjelenése</em></p>
Ferde betűkhöz .ferde{ font-style: oblique;} <p><span class="ferde">Szöveg megjelenése</span></p>
Félkövér betűkhöz: strong{font-weight: bold;} <p><strong>Szöveg megjelenése</strong></p>

A stíluslapon, ezzel a megoldással a kijelölt szövegrészhez pluszként megadható:
- betűszín
- háttérszín
- aláhúzás
- szegély, azaz keretet is.


Nézzünk egy példát:
A normál félkövér ( bold ) betűkhöz: Most adunk hozzá színt ( kéket )és aláhúzási vonalat, mely 2px vastag folytonos vonal ( solid ) és színe fekete (black)
strong {font-weight: bold; color: #33C; border-bottom: 2px solid black;}

Vissza a lap elejére


 

4. Hagyjunk, üres sorokat.

Minden bekezdés azaz idézetblokk, a HTML lapon így kezdődik : <p>, és ezzel zárul, </p>

A bekezdéseinket záró </p> címke és a következő bekezdésünknél lévő kezdő <p> címke között, automatikusan üres sort hagynak a böngésző programok.
Röviden: minden záró </p> címke és kezdő <p> címke között, üres sor lesz látható.

Üres sor megjelenítésére használjuk a következő meghatározást is, melyet szintén a kezdő és záró p címkék, közé kell beírni: Szóközt, azaz szünetet a jelek között nem alkalmazunk.
<p>&nbsp;</p>

Sor, vagy szövegrész lezárása utasítás: <br />
Fő feladata: szöveg, vagy mondat végének lezárása.
Hosszú szövegek írásánál (html lapon), az a célunk, hogy amikor a mondatunkat befejeztük, és ez a mondat nem tölti ki az egész sort, de mi azt akarjuk, hogy a következő mondat új sorban kezdődjön, akkor a mondat végénél be kell írni ezt a parancsot <br />

Megjegyzés:
Sorlezáró utasításból a mondatunk végén kettőt helyezünk el egymás mellett.<br /> <br />
Az első lezárja a mondatot és azt a sort, ahol a mondatunkat befejeztük.
A második sorlezáró utasítás egy üres sort zár le, melynek hatására a szövegsorok között egy üres sor jön létre.

Vissza a lap elejére


 

5. Lábléc ( footer )

Úgy alakítják ki, hogy ne legyen hivalkodó.
Ezért kisebb és világosszürke betűkkel jelenítik meg.

Itt találhatók:
- a jogi tudnivalók,
- a cég adatvédelmi elvei
- szerzői jogi megjegyzések, néha a weblap tervezőjének honlapjára mutató, vagy a webmester e-mail címét előhívó hivatkozás.
A láblécnek nem szentelünk különösebb figyelmet, ha csak nem valamilyen konkrét információt keresünk

Egyszerű példa:
#footer { font-size: 80%; color: #999; border-top: 2px dotted #ccc; margin-top: 4em; }

A footer definíció és felhasználás:
A <footer> címke egy dokumentum vagy táblázati oszlopok számára, egy láblécet definiál.
A <footer> elemnek információkat kell tartalmaznia a dokumentumról vagy tábla oszlop elemről.
Egy dokumentumban, több <footer> elem is szerepelhet.
A <footer> elem belsejében lévő információknak, lehetőleg egy cím, azaz, <address> címkén belül kell lenniük.

A <footer> elem jellemzően, a következőket tartalmazza:

Példa egy lábléc, azaz, footer szakaszra, a dokumentumban:

  <footer>
    <address>
      <p>Dokumentumot írta: Zöld Elefánt</p>
      <p>Elérhetőség: <a href="mailto:Valaki@example.com">Valaki@example.com</a>.</p>
    <address>
  </footer>
	

Legtöbb böngésző megjeleníti <footer> elemet, a következő alapértelmezett értékkel:
footer { display: block;}

Megjegyzés: Az Internet Explorer 8 és korábbi verziói nem támogatják a lábléc azaz footer címkét.

Vissza a lap elejére


 

6. Sormagasság

Sormagasság utasítás = line-height

HTML lapon, minden bekezdés azaz idézetblokk, ezzel kezdődik <p> és ezzel zárul </p>
Css,azaz stíluslapon megadott sortávolság, az összes bekezdésben megírt szövegsorra, egyformán vonatkozik.

A távolságot megadhatjuk: em, px, vagy százalékos értékben is.
Vegyünk egy példát:
A szövegsorok közötti távolságot állítsuk másfélszeresére.
Ha em - ben adjuk meg akkor 1.5em, ha százalékban, akkor 150% - ra kell beállítani az értékeket.

A css - azaz stíluslapon így néz ki: p { line-height: 150%; }

Vissza a lap elejére


 

7. Szövegfolyam és megjegyzésjelek

Szövegfolyam:
Böngésző programok a megírt dokumentumunkat, beleértve a meghatározásokat is, balról jobbra és fentről lefelé olvassák.

Megjegyzésjelek:
Ha dokumentumunkban olyan megjegyzéseket szeretnénk elhelyezni, melyek ne jelenjenek meg a weblapot nézők előtt, de nekünk akár a későbbiekben is fontos információval szolgáljon, akkor ezeket megjegyzésjelek közé írjuk.

Minden címkétől és elemtől független, azaz különálló sorként kell elhelyezni.

Megjegyzésjelek közé írt szöveget a böngésző programok nem veszik figyelembe, azaz nem jelenítik meg.

Megjegyzések megírása:Szóközt, azaz szünetet a jelek között nem alkalmazunk

XHTML lapon: <!-- írjuk ide a megjegyzésünket -->

Stíluslapon: /* írjuk ide a megjegyzésünket */

Vissza a lap elejére


 

8. Szöveg igazítása

 

Egysoros szöveg középre igazítása

Függőlegesen középre pozícionálhatjuk az egysoros szöveget tetszőleges magasságú div szakaszban, a jelölőelem line-height px-es értékének megadásával.
Ebben az esetben:
- Az értéket px - ben határozhatjuk meg.
- A div szakasznak nem adhatunk keretet (border), csak háttérszínt vagy háttérképet.
- A line-height: ...px értékének meg kell egyezni a div szakasz magasságának height: ...px értékével.
Vízszintesen középre, a text-align: center utasítással.

Stílus megírása:
#kozep_kozep {height: 90px; background-color: #999; }
#kozep_kozep p { text-align:center; line-height: 90px;}

Egysoros szöveg, függőlegesen és vízszintesen, középre igazítása

 

A sorkizárt szövegrészek "justify".

Első példában normál, a másodikban sorkizárt megjelenítés látható.
Mindkét példában, ugyan azon tartalmi szövegrész olvasható.

1. Normál szövegmegjelenés.

Ha újságcikk formátumot akarunk beállítani a szövegfolyamnak, azaz a szövegfolyam sorai töltsék ki az általunk behatárolt terület szélességét úgy, hogy az adott szövegsor utolsó betűje érintse a jobb oldalt. Ennek beállításához, a kezdő "p" címkében kell elhelyezni az align="justify" meghatározást, vagy azonosítót rendelünk a kezdő címkéhez, és ezen azonosítóhoz írjuk a stílusmeghatározást.

Stílus megírása XHTML fájlban: Első példa:<p align="justify"> Szöveg megírása.</p>. Második példa:<p class="sorkizart"> Szöveg megírása.</p>. Stílus: .sorkizart{text-align:justify;} Értelme akkor van, ha szövegfolyamunk több sorból áll.

2. Sorkizárt szövegmegjelenés.

Ha újságcikk formátumot akarunk beállítani a szövegfolyamnak, azaz a szövegfolyam sorai töltsék ki az általunk behatárolt terület szélességét úgy, hogy az adott szövegsor utolsó betűje érintse a jobb oldalt. Ennek beállításához, a kezdő "p" címkében kell elhelyezni az align="justify" meghatározást, vagy azonosítót rendelünk a kezdő címkéhez, és ezen azonosítóhoz írjuk a stílusmeghatározást.

Stílus megírása XHTML fájlban: Első példa:<p align="justify"> Szöveg megírása.</p>. Második példa:<p class="sorkizart"> Szöveg megírása.</p>. Stílus: .sorkizart{text-align:justify;} Értelme akkor van, ha szövegfolyamunk több sorból áll.

 


Vissza a lap elejére


 

9. Szavak formázása, kiemelése ( span )

Formázni, kiemelni kívánt szavak, a dokumentumunk szövegsoraiban helyezkednek el.
Ilyenkor, a span elemmel jelölhetjük ki a formázandó szavakat.

Példa az XHTML - lapon történő megírásra:
<p> A király, <span class="kiemelem"> Alibaba </span> a ma élő leggazdagabb ember. Tehetség terén nagy vetélytársa a <span class="kiemelem"> Negyven rabló </span></p>

Ebben a példában az Alibaba és a Negyven rabló, szavakat formázhatjuk a css fájl segítségével.
Mindkét szóhoz a kiemelem azonosítót rendeltük, ezért mindkét szöveg,egyforma formátumban jelenik meg.
E két szóhoz, háttérszínnek most zöld színt, a betűknek kék színt adunk, de mindenki tetszés szerinti megjelenési formát készíthet.

A stíluslapon a következő meghatározásokat kell megadni:
.kiemelem {font-weight: bold; color: #009; background-color: lime;}

A következő sorban azt láthatjuk, hogyan jelenik meg a monitoron.
A király, Alibaba a ma élő leggazdagabb ember. Tehetség terén nagy vetélytársa a Negyven rabló.

Vissza a lap elejére


 

10. Szövegbetűk, egymástól való távolsága.

Ha azt szeretnénk, hogy szavaink betűi egymástól, egy általunk meghatározott távolságra legyenek.
Akkor a letter - spacing, meghatározás után beírt értékkel, növelhetjük a betűk egymástól való távolságát.

Például: { letter-spacing: 1.8em; }

Példa Betűtávolság


 

11. Szavak, szövegrészek egymástól való távolsága.

{word-spacing:20px;}

A szavak - szövegrészek, meghatározott távolságra vannak egymástól


 

12. Szöveg dekoráció

Vissza a lap elejére


 

13. Mennyivel kezdődjön beljebb, vagy kijjebb az első szövegsor.

{text-indent:60px;}

Ezzel, meghatározhatjuk a behúzás mértékét, azaz a szövegrész első sora, mennyivel kezdődjön beljebb, a további szövegsorok elejétől. Ezen bekezdés első soránál is megfigyelhető, hogy az első sor, a megadott px - értéknek megfelelően beljebb kezdődik, mint a bekezdés további sorai.

{text-indent: -60px; padding-left: 60px;}

Ezzel, meghatározhatjuk a kihúzás mértékét, azaz a szövegrész első sora, mennyivel kezdődjön kijjebb, a további szövegsorok elejétől. Ezen bekezdés első soránál is megfigyelhető, hogy az első sor, a megadott px - értéknek megfelelően kijjebb kezdődik, mint a bekezdés további sorai.


 

14. További szövegformázó elem. ( pre )

A pre blokszíntű elem.
Sorközökhöz és szavak egymástól való távolságának beállításához használjuk.

Normál esetben, amikor a szóközbillentyűvel egynél több szóközt írunk egymás után, vagy a RETURN (ENTER) billentyűt lenyomva hozunk létre új sort, a böngésző ezeket nem veszi figyelembe.
A pre használatakor, a böngésző programok megtartják a dokumentum szerinti szóközöket és sortöréseket.
A pre elemet, gyakran használják versekhez, és egyszerű keretek nélküli táblázatok készítéséhez, néha a hosszú kódok, jobb olvashatósága végett.
Az így kijelölt szövegrész, minden szava, az általunk meghatározott távolságra lesz.

Most nézzünk három példát a pre címkére:
- Az első bemutatja, hogyan kell a valóságban alkalmazni.
- A második példában ugyan azt a szöveget írtam, de több szóközt alkalmaztam.
- A harmadik példában messzebb írtam a szavakat egymástól, nézzük mi is történik.

Első példa: <pre> itt egy előre formázott szöveg </pre>

Második példa: Szavak közötti távolságot megnöveljük, a szóközbillentyűvel.

     itt egy előre  formázott szöveg  
Harmadik példa: Szavak közötti távolságot tovább növeljük, a szóközbillentyűvel.
     itt       egy       előre        formázott        szöveg     

Vissza a lap elejére


 

15. Vonalak megjelenítése

Vonalak típusa:
Normál vonal, linear.
Folytonos vonal, solid
Dupla vonal, double
Pontozott vonal, dotted.
Bemélyített vonal, groove
Kidomborodó vonal, ridge
Kiemelkedő vonal, outset
Süllyesztett vonal, inset

Vonalak vastagsága:
- képpontban ( px ) ez a gyakoribb.
- betűméretben ( em )
- százalékban ( % )
- vagy kulcsszavakkal: vastag - thick, közepes - medium, vékony - thin

Vonal, megjelenési helye.
Címsorokhoz, kijelőlt szöveg, és egyéb részekhez.
Az ( Y ) helyett, írd a megfelelő vonal elnevezését.
- Szöveg fölé: border-top: 2px YYYYYY;
- Szöveg jobb oldalára: border-right: 2px YYYYYY;
- Szöveg aljára: border-bottom: 2px YYYYYY;
- Szöveg bal oldalára: border-left: 2px YYYYYY;
- Körbekeretezés: border: 2px YYYYYY;

Példa:
h4 - es címsor aláhúzása, pontozott vonallal.
Ennek helyes magyar megfelelője = keret-alul: 3px vastag, pontozott vonallal, és a pontok színkódja.
Az ( Y ) helyett, írd a neked megfelelő színkódot.

CSS, azaz stíluslapon, így kell meghatározni: h4 { border-bottom: 3px dotted #YYYYYY; }

 


Szövegrészek, és területek vízuális elválasztása
( <hr></hr> ) címkékkel.

A weboldal jobb áttekinthetőségét, egyszerű vonal beillesztésével növelhetjük.
Adott szövegrészeket, vagy területeket választhatunk el, a hr címke beillesztésével.

Az elválasztó vonal stílusát is meghatározhatjuk (hosszát, színét, stb.) :
- A kezdő <hr> címkében
- Egyedi "id"azonosítóhoz.
- A "class" osztályazonosítóhoz

Példa: <hr></hr>


Példa: <hr align="center" width="90%"></hr>


Példa:
XHTML oldali leírás: <hr id="elvalaszto"></hr>
CSS, azaz stílusfájl meghatározás: #elvalaszto{width: 70%; border: 2px solid red;}


Példa:
XHTML oldali leírás: <hr class="elvalaszto"></hr>
CSS, azaz stílusfájl meghatározás: .elvalaszto{width: 80%; border: 2px dashed green;}


Példa:
XHTML oldali leírás: <hr class="elvalaszto" />
CSS, azaz stílusfájl meghatározás: .elvalaszto{width: 60%; border: 2px solid blue;}


Vissza a lap elejére

 


 

16. Gyors betűméret növelés <big>

1em betűmérettel megemeli a kijelölt szövegrészt
Nem kell külön stílus meghatározást írni, mint például a span jelölőelemhez

Példa:
<h4> Normál megjelenésű betűk, <big> kijelölt szöveg, megnövelt betűméretei </big> </h4>

Normál megjelenésű betűk, kijelölt szöveg, megnövelt betűméretei

Vissza a lap elejére


17. Visszafelé olvasható szöveg. <bdo dir="rtl">

[Html4] - Még nem teljesen támogatott. (IE. és MA megjeleníti)

Ha a szöveg olvasása jobbról - balra történik (például a héber), használja ezt a címkét: <bdo>, és az attribútum dir="rtl"

Példa:
<h4> <bdo dir="rtl"> Visszafelé olvasható szöveg </bdo> </h4>

Visszafelé olvasható szöveg

Vissza a lap elejére


 

18. Szövegrészek idézőjelekkel történő kijelölése. <q>

Leginkább programok leírásánál alkalmazzuk, hogy a böngészők ne vegyék figyelembe, azaz ne utasításként kezeljék.
De alkalmazhatjuk szövegrészekhez is

Példa:
<p>Szövegün egy adott részének <q>idézőjelekkel történő kijelölése</q> </p>

Szövegün egy adott részének idézőjelekkel történő kijelölése

Megjegyzés a kezdő idézőjelre:
Explorer lentre helyezi.
Mozilla fentre helyezi

Vissza a lap elejére


 

19. Betűk stílusa és változata.

Betűk stílusa:
Amelyik szinpatikus, írjuk be a CSS-lapra azaz stíluslapra.

Dőlt ( italic ) betűkhöz: {font-style: italic;}
Normal ( normal ) betűkhöz: {font-style : normal;}

Betű-változat:
Félkövér ( bold ) betűkhöz: {font-weight: bold;}
Normal ( normal vastagságú ) betűkhöz: {font-weight: normal;}

kis-kapitális: {font-variant: small-caps; } (Minden betűt nagybetűvel ír, és a kezdőt enyhén kiemeli )

A stíluslapon ezzel a megoldással, ha úgy gondoljuk, a kijelölt szövegrészhez, pluszként meghatunk színt, és szegélyt, azaz keretet is, vagy aláhúzást.

Vissza a lap elejére


 

Szöveg betűinek transzformálása

{text-transform:uppercase;}

Minden betűt, nagybetűre változtat.

{font-variant: small-caps; }

Minden betűt, nagybetűre változtat, de a kezdőt kiemeli.

{text-transform:lowercase;}

Minden betűt, kisbetűre változtat.

{text-transform:capitalize;}

Minden kezdő betűt, nagybetűre változtat.


 

Szöveg mozgatása

<marquee>
A mozgatandó szöveget vagy képet,
a kezdő és záró marque jelölőelem közé helyezzük el!
</marquee>

<marquee> A mozgatandó szöveget vagy képet, a kezdő és záró marque jelölőelem közé helyezzük el! Szöveg mozgatása. Nem csak szöveget, képet is beilleszthetünk! </marquee>

 

Egyebek

szöveg normal, stílus meghatározása: {font-weight: normal;}

szöveg bold, stílus meghatározása: {font-weight: bold;}

Továbbiakat nem alkalmazzuk, csak ismertetésre kerülnek

szöveg bolder, stílus meghatározása: {font-weight: bolder;}

szöveg lighter, stílus meghatározása: {font-weight: lighter;}

szöveg 100, stílus meghatározása: {font-weight: 100;}

szöveg 200, stílus meghatározása: {font-weight: 200;}

szöveg 300, stílus meghatározása: {font-weight: 300;}

szöveg 400, stílus meghatározása: {font-weight: 400;}

szöveg 500, stílus meghatározása: {font-weight: 500;}

szöveg 600, stílus meghatározása: {font-weight: 600;}

szöveg 700, stílus meghatározása: {font-weight: 700;}

szöveg 800, stílus meghatározása: {font-weight: 800;}

szöveg 900, stílus meghatározása: {font-weight: 900;}

 

 

 

 

url(Nincs-hatterkep.xxx)