VisszaElőreKisebb betűméretNagyobb betűméretNormál betűméretOldal nyomtatása

HTML alapok

Vissza

Kód tördelése és a megjelenés

A HTML oldalak készítésénél meg kell szoknunk azt, hogy a HTML kód tördelése (mennyi üres helyet teszünk, hol nyomunk entert) nem befolyásolja az oldal megjelenését. Ez alól kivételt jelent, ha a <pre> taget használjuk.

Interaktív példa

A <pre> tag tartalmaként megadott szöveget a böngésző azonos szélességű betűkkel jeleníti meg. Hagyományos szöveg írásához ne használjuk, de például programkód megjelenítésére jó lehet.

Ha tehát a szöveget bekezdésekre kívánjuk tagolni, ahhoz egy újabb taget kell megtanulnunk.

Vissza

Bekezdések <p>

A <p> tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a <p> és </p> elemek közé kell tenni. A záró </p> tag elvileg nem kötelező, de mi azt ajánljuk, hogy mindig szerepeltessük azt.

A böngészőprogramok a bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak, ennek mértékét is a stíluslapok segítségével adhatjuk meg.

A <p> tag fontosabb paraméterei
Paraméter Érték Leírás Megj.
align left | center | right | justify

A bekezdés igazítását állíthatjuk be.

left: balra
center: középre
right: jobbra
justify: sorkizárt

Elavult loose

CSS alternatíva

text-align

left | center | right | justify

A bekezdés igazítását állíthatjuk be.

left: balra
center: középre
right: jobbra
justify: sorkizárt

CSS

A táblázatban láthatjuk, hogy a HTML 4.01 szabványban már nem javasolják a bekezdés igazítására szolgáló align paraméter használatát, az igazítást ezért inkább stílusokkal adjuk meg. Ehhez a text-align paramétert kell használnunk.

Ügyeljünk arra, hogy a HTML paraméter esetén a HTML tagben kell szerepeltetni a paramétert és az értéket, ahol a paraméter után egyenlőségjelet kell tennünk, a paraméter értékét pedig idézőjelek közé kell tennünk. Például: <p align="left">   Amennyiben több paramétert is megadunk, azokat üres hellyel kell elválasztani.

Például: <p align="left" title="Üdvözlő szöveg">

A stíluslapos megoldás esetén a kívánt stílust a tag style paraméterében kell megadni. A CSS paraméter megadása után egy kettőspontot kell tennünk, majd meg kell adnunk a paraméter értékét. Például: <p style="text-align: left"> Amennyiben több paramétert is megadunk, azokat pontosvesszővel kell elválasztani.

Például: <p style="text-align: left; color:red">

Bekezdések igazítása HTML paraméterekkel
Kód <p align="left"> Balra igazított bekezdés</p>
Eredmény

Balra igazított bekezdés

Kód <p align="center"> Középre igazított bekezdés</p>
Eredmény

Középre igazított bekezdés

Kód <p align="right"> Balra igazított bekezdés</p>
Eredmény

Jobbra igazított bekezdés

Kód <p align="justify"> Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés.</p>
Eredmény

Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés.

Bekezdések igazítása Stíluslapokkal
Kód <p style="text-align: left"> Balra igazított bekezdés</p>
Eredmény

Balra igazított bekezdés

Kód <p style="text-align: center"> Középre igazított bekezdés</p>
Eredmény

Középre igazított bekezdés

Kód <p style="text-align: right"> Jobbra igazított bekezdés</p>
Eredmény

Jobbra igazított bekezdés

Kód <p style="text-align: justify"> Sorkizárt bekezdés</p>
Eredmény

Sorkizárt bekezdés

Vissza

Sortörés <br>

Amennyiben a szövegen belül egy sortörést szeretnénk elhelyezni, a <br> taget kell használnunk. Ez is egy olyan tag, amelynek nincs záró párja.

Sortörés
Kód Eredmény
Ez az első sor<br> Ez pedig a második Ez az első sor
Ez pedig a második

A <br> tagnek is vannak paraméterei, de azokkal kicsit később, a képek témakörben fogunk megismerkedni. Hogy miért pont a képeknél? Majd kiderül...

Interaktív példa
Feladat

Próbáld ki az összes igazítási módot, HTML paraméterrel és stílusmegadással is! Próbáld ki a <br> tag hatását is!

Vissza

Címsorok <h1> ..<h6>

A címsorok (heading) - mint ahogy a szövegszerkesztésnél is megszokhattuk - az oldalak logikai felosztását teszik lehetővé. A HTML nyelvben ezeket a <h1> <h2> <h3> <h4> <h5> <h6> tagekkel adhatjuk meg. Például h1 az oldal címe, h2 egy alcím, h3 egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsort használhatunk.

Címsorok
Kód Eredmény
<h1> 1-es címsor </h1>

1-es címsor

<h2> 2-es címsor </h2>

2-es címsor

<h3> 3-as címsor </h3>

3-as címsor

<h4> 4-es címsor </h4>

4-es címsor

<h5> 5-ös címsor </h5>
5-ös címsor
<h6> 6-os címsor </h6>
6-os címsor

A címsorokat a bekezdéseknél bemutatott módszerrel igazíthatjuk balra, középre, jobbra, illetve sorkizárttá is tehetjük.

Interaktív példa

Vissza

Szövegformázás

Nézzük, hogy a szöveg formázására milyen lehetőségeink vannak. Itt találunk fizikai és logikai formázást lehetővé tévő tageket is. Nem ismertetünk minden taget, csak a gyakrabban használtakat.

Vissza

Fizikai formázás

Az itt található tagek a szövegek fizikai formázását teszik lehetővé.

Szövegformázás (fizikai)
Tag Leírás példa Megj.
b félkövér szöveg félkövér szöveg  
big nagyobb szöveg nagyobb szöveg  
i dőlt szöveg dőlt szöveg  
pre előre formázott szöveg
előre formázott szöveg
 
small kisebb szöveg kisebb szöveg  
strike áthúzott szöveg áthúzott szöveg Elavult loose
alternatíva: text-decoration: line-through; CSS
sub alsó index alsó index a szövegben  
sup felső index felső index a szövegben  
u aláhúzott szöveg aláhúzott szöveg Elavult loose
alternatíva: text-decoration: underline; CSS

Vissza

Logikai formázás

A logikai formázás esetén a szöveget tartalmi szempontok szerint csoportosítjuk. Vagyis itt nem kifejezetten a szöveg kinézetét állítjuk be, az ilyen jellegű formázás eredménye böngészőfüggő.

Szövegformázás (logikai)
Tag Leírás példa Megj.
cite idézet idézet  
code programkód programkód  
em kiemelt szöveg kiemelt szöveg  
strong erősen kiemelt szöveg erősen kiemelt szöveg  
Interaktív példa

Vissza

Szöveg betűtípusának, méretének, színének megadása <font>

Láttuk, hogy alap formázásokat el tudunk végezni különböző tagekkel. De mi van, ha mi szeretnénk meghatározni, hogy a megjelenő szöveg betűtípusa milyen legyen? Erre használhatnánk a <font> taget, de ezt már nem javasolják a szabvány készítői, inkább a stíluslapokkal történő megadás a követendő.

Betűméret megadása
Paraméter Érték Leírás Megj.
size

abszolút: 1..7

relatív:
+szám
-szám

a betű méretének megadása. Ez történhet abszolút módon, amikor egy konkrét betűméretet állítunk be, 1-től 7-ig

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.

Megjegyzés:

Az alap betűméret beállítására a <basefont> Elavultloose tag szolgál. Ennek a tagnek nincs záró párja.

Példa
<basefont size="2">

Elavult loose

CSS alternatíva

font-size

abszolút:

xx-small
x-small
small
medium
large
x-large
xx-large

érték [pt,pc, in,cm,mm]

relatív:

larger smaller

érték
[em,ex, px]

érték %

Az abszolút megadásánál választhatunk a 7 fokozat közül (nagyság szerinti sorrendben: xx-small, x-small, small, medium, large, x-large, xx-large ), vagy különböző mértékegységek szerint adhatjuk meg a méretet.

A használható mértékegységek:

pt: pont (1/72 inch)
pc: pica (12 pont)
in: inch (hüvelyk)
cm: centiméter
mm: milliméter

A relatív megadásnál használhathatjuk a larger (nagyobb) és smaller (kisebb) betűtípust is, valamint a következő relatív mértékegységeket:

em: valahányszoros magasság
ex: x-magasság (az x-betű magasságának valahányszorosa)
px: pixel (képpont)

Ezen felül pedig %-os formában is megadhatjuk a méretet.

A relatív méretmegadásnál az elem (az őt tartalmazó elemétől) örökölt értékéhez képest kerül megállapításra a méret.

Ha az lap teljes egészére vonatkozóan akarjuk megadni az alapméretet, akkor a body tagnél meg kell adnunk a font-size paramétert.

Például: <body style="font-size:12pt">

CSS
Példák
Kód

<font> Alapértelmezett méret </font> <br>
<font size="2"> 2-es méret </font> <br>
<font size="4"> 4-es méret </font> <br>
<font size="+2"> 2-el növelt méret </font> <br>
<font size="-1"> 1-el csökkentett méret </font> <br>
<font size="-2"> 2-vel csökkentett méret /font>

Eredmény Alapértelmezett méret
2-es méret
4-es méret
2-el növelt méret
1-el csökkentett méret
2-vel csökkentett méret
Kód

<p style="font-size:xx-small"> Szöveg 1</p>
<p style="font-size:x-small"> Szöveg 2</p>
<p style="font-size:small"> Szöveg 3</p>
<p style="font-size:medium"> Szöveg 4</p>
<p style="font-size:large"> Szöveg 5</p>
<p style="font-size:x-large"> Szöveg 6</p>
<p style="font-size:xx-large"> Szöveg 7</p>

Eredmény

Szöveg 1

Szöveg 2

Szöveg 3

Szöveg 4

Szöveg 5

Szöveg 6

Szöveg 7

Kód

<p style="font-size:12pt"> Példa (12pt)</p>
<p style="font-size:2pc"> Példa (1pc)</p>
<p style="font-size:2em"> Példa (2em)</p>
<p style="font-size:0.75em"> Példa (0.75em)</p>
<p style="font-size:3ex"> Példa (3ex)</p>
<p style="font-size:14px"> Példa (14px)</p>
<p style="font-size:75%"> Példa (75%)</p>
<p style="font-size:100%"> Példa (100%)</p>
<p style="font-size:150%"> Példa (150%)</p>

Eredmény

Példa (12pt)

Példa (1pc)

Példa (2em)

Példa (0.75em)

Példa (3ex)

Példa (14px)

Példa (75%)

Példa (100%)

Példa (150%)

Interaktív példa
Figyelem!

Ne használj különleges, egyedi betűtípusokat, mert azon betűtípusok, amelyek nincsenek az adott gépre felinstallálva, nem fognak megjelenni. Ezeket a szöveget a böngésző egy másik (alap) betűtípussal jeleníti meg.

Betűtípus megadása
Paraméter Érték Leírás Megj.
face

betűtípus | betűcsalád

betűtípus1 (betűcsalád1), betűtípus2 (betűcsalád2), ...

A szöveg betűtípusát állíthatjuk be. Ha a megadott betűtípus telepítve van a számítógépen (kliensen), akkor a böngésző aszerint jeleníti meg a szöveget, különben pedig egy alapértelmezett betűtípust használ.

Vesszővel elválasztva több betűtípust is felsorolhatunk.

Ha egyik betűtípus sincs telepítve a gépen, akkor a böngészőben beállított alapértelmezett betűtípus szerint történik a megjelenítés.

A beállítható általános betűcsaládok, amelybe tartozó betűtípust fog választani a böngésző.

serif (pl: Times)
sans-serif (pl: Helvetica)
cursive (pl: Zapf-Chancery)
fantasy (pl: Western)
monospace (pl: Courier)

Elavult loose

CSS alternatíva

font-family

betűtípus |  betűcsalád

betűtípus1 (betűcsalád1), betűtípus2 (betűcsalád2), ...

Itt is betűtípust és betűcsaládot adhatunk meg.

Ha a betűtípus neve üres helyet tartalmaz, akkor idézőjelek közé kell tenni.

pl. font-family: "Times New Roman"

 

CSS
Példák
Kód <font face="Times New Roman, Times, serif"> Serif (talpas) betűtípus
használata </font>
Eredmény Serif (talpas) betűtípus használata
Kód <p style="font-family: Arial, Helvetica, sans-serif"> Sans-serif (talpnélküli) betűtípus használata</p>
Eredmény

Sans-serif (talpnélküli) betűtípus használata

Interaktív példa
Szín megadása
Paraméter Érték Leírás Megj.
color

szín

színkód
[#RRGGBB]

A betűk színét is többféleképpen be lehet á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. Például #898134.

A #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 (hexadecimális) számrendszerben. A leggyengébb fokozat a 00, a legerősebb az FF. A harmadik és negyedik karakter a zöld szín (G=green) erőssége, az ötödik és hatodik pedig a kéké (B=blue).

A #898134 kód eredménye pedig ez a szín lesz.

Elavult loose

CSS alternatíva

color

szín

színkód

[#RRGGBB, rgb(0-255,0-255,0-255),
rgb(%,%,%)]
 

Itt is használhatóak a fenti színnevek és színkódok. Ezen kívül lehetőségünk van arra, hogy tízes számrendszerben adjuk meg a színkódot, az rgb(szám,szám,szám) formában, ahol a számok 1 és 255 közöttiek lehetnek. Például az rgb(137,129,52) színkód eredménye ugyanaz a szín, amit az imént 16-os számrendszerben adtunk meg.

Ezen kívül a színkódot megadhatjuk százalékos formában is, például az rgb(50%,50%,50%) szín eredménye egy szürke árnyalat lesz.

Amíg a HTML kód esetén a szöveg színét a font tag paramétereként állíthattuk be, a stíluslapoknál számos tag esetén beállíthatjuk a színt, akár egy teljes bekezdésre vonatkozóan is (<p> ) . Ha csak néhány karakter tulajdonságát akarjuk megváltoztatni, akkor használhatjuk a <span> taget, lásd a példákat.

Ha pedig egy szakasz tulajdonságait akarjuk beállítani, amelyben több bekezdés, táblázat, kép, stb. is lehet, használhatjuk a div taget. Ekkor a kívánt tartalmat <div> és </div> elemek közé kell zárni, majd meg kell adni a szakaszra vonatkozó stílusdefiníciót.

CSS
Tipp!

A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az Color Schemer segítségével on-line módon is megtudhatod a színek kódját.

Példák
Kód <font color="red"> Piros szöveg</font> <br>
<font color="#FF0000"> Ez is piros szöveg</font> <br>
<font color="#0000FF"> Ez már kék</font> <br>
<font color="#FF00FF"> Ez pedig lila</font> <br>
<font color="#800080"> Ez pedig sötétlila</font>
Eredmény Piros szöveg
Ez is piros szöveg
Ez már kék
Ez pedig lila
Ez pedig sötétlila
Kód <p style="color:red"> A teljes bekezdés piros</p>
<p style="color:#0000FF"> A teljes bekezdés kék</p>
<p style="color:rgb(40%,40%,40%)"> A teljes bekezdés szürke</p>
<p style="color:rgb(40%,40%,40%)">
A kedvenc színeim: <span style="color:#FF0000"> vörös</span> és <span style="color:#008000"> zöld</span> .
Eredmény

A teljes bekezdés piros

A teljes bekezdés kék

A teljes bekezdés szürke

A kedvenc színeim: vörös és zöld.

Interaktív példa

Vissza

A paraméterek kombinálása

Most, hogy már több paraméterrel is megismerkedtünk, nézzünk példát arra is, hogy a fenti tulajdonságokat hogyan állíthatjuk be egyszerre egy adott szövegre vonatkozóan. Korábban már szóltunk arról, hogy a HTML paraméterek esetén üres hellyel kell elválasztani egymástól a paramétereket, stíluslapok esetén pedig pontosvesszőt kell tennünk az egyes paraméterek közé, most nézzük meg ezt a gyakorlatban is.

Példák
Kód <p> <font size="3" color="#FF0000" face="Arial, Verdana, sans-serif"> HTML paraméterekkel formázott szöveg</font> </p>
Eredmény

HTML paraméterekkel formázott szöveg

Kód <p style="font-size:large; font-family: Arial, Helvetica, sans-serif; color: rgb(50,20,80);"> Stílussal formázott bekezdés </p>
Eredmény

Stílussal formázott bekezdés

Vissza

  Előző témakör Témakör kezdőlap Következő témakör

Motor: webANYAg 2006. (© Fekete Milán), Menu by TwinHelix Designs
Tartalom, arculat: © Abonyi-Tóth Andor