Formázások

### A HTML Stuktúra
Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja. A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!) Tehát a következőkben a következő szerkezetet fogjuk használni:
<HTML> <HEAD> <TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE> </HEAD> <BODY> Ide jön a dokumentumtörzs. </BODY> </HTML> A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni. A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú. Az adott kódok eredményét azonnal kipróbálhatod, ha a legfelső ikonsorban elindítod az online szerkesztőt (Gyakorlás). Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. WordPad, WORD, Jegyzettömb) megírhatod a kódot, amit el kell mentened, majd a böngésződbe be kell olvasnod.
Ha ezt a kódot beírod a dokumentumtörzsbe |  | ez lesz az eredménye
<b>Kövér betűk (bold) </b> |  | Kövér betűk (bold)
<i>Dőlt betűk (italic)</i> |  | Dőlt betűk (italic)
<u>Aláhúzott betűk (underlined) </u> |  | Aláhúzott betűk (underlined)
<tt>Írógép betűk (teletype) </tt> |  | `Írógép betűk (teletype)`
### Fejléc <h1> ... <h6> (A fejlécek - mint ahogy a szövegszerkesztésnél is megszokhattuk - a html oldalak logikai felosztását teszik lehetővé. pl. h1 az oldal címe, h2 egy alcím, h3 annak az alcíme és így tovább. A HTML oldalak esetén 6 fejlécet használhatunk)
<h1>1-es fejléc </h1> |  | # 1-es fejléc
<h2>2-es fejléc </h2> |  | ## 2-es fejléc
<h3>3-as fejléc </h3> |  | ### 3-as fejléc
<h4>4-es fejléc </h4> |  | #### 4-es fejléc
<h5>5-ös fejléc </h5> |  | ##### 5-ös fejléc
<h6>6-os fejléc </h6> |  | ###### 6-os fejléc
Ha nem az alapértelmezett (balra) igazítást szeretnénk használni, megadhatjuk az igazítás típusát az align paraméter segítségével. (left=balra, center=középre, right=jobbra) pl.
<h1 align="center"> Ez egy középre igazított 1-es fejléc </h1> |  | # Ez egy középre igazított 1-es fejléc
<h3 align="right"> Ez egy jobbra igazított 3-as fejléc </h3> |  | ### Ez egy jobbra igazított 3-as fejléc
### Betűméret <font size=" "> A betűméretet kétféleképpen állíthatjuk be: abszolút és relatív módon. Az abszolút méretmegadásban 1 és 7 között állíthatjuk be a méretet, ahol a 7-es a legnagyobb az 1-es a legkisebb...
<font size ="4"> 4-es betűméret </font> |  | 4-es betűméret
<font size ="7"> 7-es betűméret </font> |  | 7-es betűméret
A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk. Azt, hogy mihez képest legyen nagyobb vagy kisebb az adott betűméret a <basefont size="méret"> tag segítségével állíthatjuk be.
<font size ="+2"> Kettővel nagyobb betűméret </font> |  | Kettővel nagyobb betűméret
<font size ="-1"> Eggyel kisebb betűméret </font> |  | Eggyel kisebb betűméret
### Betűtípus <font face=" "> A Face paraméter segítségével állítható be a kívánt betűtípus. Figyelem! Ne használj különleges, egyedi betűtípusokat, mert nagy valószínűséggel a látogatók semmit sem vesznek észre belőle. (ugyanis azon betűtípusok esetében, amelyek nincsenek az adott gépre felinstallálva, a böngésző a hagyományos betűtípusokat jeleníti meg.)
<font face ="Arial">Arial betűtípus. </font> |  | Arial betűtipus.
<font face ="Courier">Courier betűtípus. </font> |  | Courier betűtipus.
### Betűszín <font color=" "> A betűk színét is többféleképpen lehet beállítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl. red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be.
<font color=red> Piros </font> |  | Piros
<font color=#898134> Kevert </font> |  | Kevert
#898134 a szín úgynevezett RGB kódja. Az első két karakter a vörös (R=red) szín erősségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legerősebb az FF. A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue) A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az RGB picker segítségével online módon is megtudhatod a színek kódját.
Ezek kombinálása: (a fent megismert paramétereket egymás mögé is írhatjuk)
<font face="Arial" size="+4" color="Blue"> Ez csak próba </font> |  | Ez csak próba
### Vízszintes vonal <hr> Ha a dokumentumon belül valamilyen szakaszt el szeretnénk különíteni a többitől, használhatunk vízszintes elválasztó vonalat a <hr> tag használatával.
<hr> |  |
Az elválasztó vonal szélességét (width) és vastagságát (size) is megadhatjuk. Az igazítás (align) balra (left), jobbra (right), középre (center) történhet.
<hr size="3" align="center" width="150"> |  |
A vonal szélességét megadhatjuk képpontokban (ahogy a fenti példa mutatja), vagy pedig a rendelkezésre álló hely százalékában.
<hr size="3" align="center" width="80%"> |  |
### Bekezdések <p> A <p> elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a <p> és </p> elemek közé kell tenni. A bekezdést az align paraméterrel balra, középre, jobbra igazíthatjuk. A böngészők az egyes bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak. #### Igazítás (align): left(balra), center(közép), right(jobbra)
<P align="center"> Ez egy középre igazított bekezdés </P> |  | Ez egy középre igazított bekezdés
<P align="right"> Ez egy jobbra igazított bekezdés </P> |  | Ez egy jobbra igazított bekezdés
<P align="left"> Ez egy balra igazított bekezdés </P> |  | Ez egy balra igazított bekezdés
### Sortörés <br> Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a <br> taget kell használnunk.
Ez az első sor<br>Ez pedig a második |  | Ez az első sor Ez pedig a második
### Speciális karakterek, ékezetes betűk Előfordulhat, hogy az oldalon speciális jeleket szeretnénk megjeleníteni. (Speciális jelnek számít már a < és a > jel is, hiszen gondoljunk bele, ha a forráskódban használjuk ezeket a jeleket, akkor a böngésző úgy értelmezi, hogy valamilyen taget akarunk megadni, és nem fogja megjeleníteni. Ebben az esetben speciális karaktereket kell használnunk. Ugyanez a helyzet az ékezetes betűkkel is. Ha ékezetes betűket szeretnénk használni akkor a következő kódokat kell "megjegyeznünk":
&aacute;= á | &Aacute;= Á | &ouml;= ö | &Ouml;= Ö
&eacute;= é | &Eacute;= É | &uuml;= ü | &Uuml;= Ü
&iacute;= í | &Iacute;= Í | &otilde;= ő | &Otilde;= Ő
&oacute;= ó | &Oacute;= Ó | &ucirc;= ű | &Ucirc;= Ű
&uacute;= ú | &Uacute;= Ú |
Tehát ha pl. az árvíztűrő tükörfúrógép szöveget akarjuk megjeleníteni, akkor a következőket kell a kódba elhelyeznünk: &aacute;rv&iacute;zt&ucirc;r&otilde; t&uuml;k&ouml;rf&uacute;r&oacute;g&eacute;p Mielőtt teljesen elkoptatnátok a billentyűzeteteket és elmenne a kedvetek a magyar ékezetes betűk használatától, megnyugtatok mindenkit, hogy van egyszerűbb módja az ékezetes betűk megadásának. Az alternatívát a META tagek lehetőségei jelentik, amelyről egy külön fejezetben is foglalkozunk. Most elég csak annyit tudnunk, hogy a következő sorok valamelyikét be kell illesztenünk az oldal forráskódjába (mégpedig a <head> </head> tagek közé) és innentől kezdve bátran használhatjuk hagyományos módon az ékezetes betüket. Tehát a megoldás: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> vagy <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> sor használata a <HEAD> részben. ## Egyéb speciális karakterek
&lt; = < | &gt; = >
&amp; = & | &quot = "
&deg; = ° | &copy = ©
Tehát pl. a <<< Szia >>> szöveg megjelenítéséhez a &lt;&lt;&lt; Szia &gt;&gt;&gt; kódót kell használnunk.