HTML Programozás Az Alapoktól

HTML programozs az alapoktl
- 1. -
rta: Vri Csaba

2007. mrcius
- 2. -
1. Mi az a HTML dokumentum?
A HTML dokumentum egy standard szvegfjl .html vagy .htm kiterjesztssel, mely specilis formz utastsokat tartalmaz. (HTML = Hyper Text Markup Language)
Legegyszerbben a Jegyzettmbbel hozhatjuk ltre, szerkeszthetjk s menthetjk el, de ajnlott valamilyen
HTML szerkeszt program, pldul az EditPlus 2 hasznlata. Megjelentsre leggyakrabban az Internet
Explorert, a Netscape-et, vagy a Firefox-ot hasznljuk de a standard HTML dokumentumot sok ms bngsz is rtelmezni tudja.
2. Mi az a TAG?
A TAG (ejtsd: teg, a tovbbiakban egyszeren tag) a HTML dokumentumok formz utastsa. Minden
estben a kisebb s a nagyobb relcis jelek kz kell tenni:
<TAG>
Minden tag-nek van nyit s zr rsze. A zr rszben az azonost el egy / jelet kell tenni:
</TAG>
A HTML 4.01-ben tag-eket rhatjuk kis s nagy betvel is a bngsz ugyangy kezeli majd mindkettt. A
tag nyit rszbe az azonost utn megadhatunk gynevezett paramtereket is. Ezek a paramterek a tag-re
vonatkoz tulajdonsgokat lltjk be. A paramter neve s az egyenlsgjel utn a paramter rtkt dupla
idzjelek kz kell tenni. A paramtereket egy szkzzel vlasztjuk el egymstl. A knnyebb
ttekinthetsg rdekben a legtbb HTML szerkeszt oldalhoz hasonl szneket hasznlunk a HTML
kdoknl.
<TAG paramter="rtk" paramter="rtk">
A style paramter egy olyan specilis paramter, melyben tovbbi paramtereket adhatunk meg. A style
rtkben a paramterek s rtkk kztt csak egy kettspontot kell rakni s az rtket a kvetkez
paramtertl egy pontosvesszvel s szkzzel kell elvlasztani. A style-al tulajdonkppen a CSS -t
hasznljuk, de erre most nem fogunk kitrni.
<TAG paramter="rtk" style="paramter:rtk; paramter:rtk">
A tag nyit s zr rsze kz kerl az a rsz, amelyre a tag vonatkozik. Ha pldul egy szveget kk sznnel
s 5-s betnagysggal szeretnnk kirni:
<BET szn="kk" betnagysg="5">Ide jn s szveg...</BET>
- 3. -
3. A HTML dokumentum alapszerkezete

Minden HTML oldal a kvetkezkppen pl fel:
<HTML>
<HEAD>
<TITLE> [..................]</TITLE>
</HEAD>
<BODY>
[..................]
[..................]
[..................]
</BODY>
</HTML>
Jl lthat, hogy minden nyit tag-nek megvan a zr prja, s hogy mindig azt a tag-et zrjuk le elszr,
amelyiket utoljra megnyitottuk. A HTML oldalak mind ilyen keretes szerkezetek! Nhny tag esetben a
zr tag-et elhagyhatjuk, de erre majd mindig kln felhvom a figyelmet!
Most vegyk sorra ezt a 4 alapvet tag-et:
<HTML> :
Azt jelzi, hogy a kzte lv szveget a HTML szabvny szerint kell rtelmeznie a bngsznek. Ennek a tag-nek nincsenek paramterei, s mindig ktelez lezrni.
<HEAD> :
Ez a HTML oldal fejrsze. Sok hasznos informcit elhelyezhetnk benne, de egyelre

mg csak a kvetkez tag-et tegyk bele:
<TITLE> : A HTML oldal cme, vagy ha gy tetszik fejlce, ami a bngsz fejlcben jelenik meg.
Paramterei nincsenek, s mindig ktelez lezrni!
<BODY> :
A HTML oldal trzse. A nyit s zr tag kz bert szveget a bngsz megprblja

rtelmezni, majd megjelenteni. Mindig le kell zrni.
4. Megjegyzsek beszrsa
A megjegyzs tag-et olyan szvegek elhelyezsre hasznljuk, melyet bngsz nem veszi figyelembe, nem
jelent meg csak a szerkeszts kzben lehet r szksgnk:

- 4. -
5. Az oldalunk specifikcijnak megadsa

Az oldalunk specifikcija az els dolog amit HTML szerkesztsnl megadunk. Ezzel mondjuk meg a bngsznek, hogy melyik HTML specifikcit hasznlja a dokumentum. Hrom fajtja van:
HTML Strict DTD :
Szigor szabvnykvetshez hasznlatos DTD (dokumentumtpus definci

- Document Type Definition). Megjelentsi hibk nem megengedettek.
Hasznlhat stlus meghatrozsokkal (Cascading Style Sheets-CSS).
HTML Transitional DTD : A 'Transitional DTD'-vel meghatrozott weboldal tartalmazhat olyan paramtereket s tag-eket, amelyek a W3C szerint stlusmeghatrozsokkal helyettestendk.
HTML Frameset DTD :
A Frameset DTD hasznland keretes (frames) weboldalak esetn. A

'Frameset DTD' azonos a 'Transitional DTD'-vel, de itt a <body> tag-et a
<frameset> tag helyettesti.
A HTML Strict DTD :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
A HTML Transitional DTD :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
A HTML Frameset DTD :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
- 5. -
6. A httr s a sznek belltsai

6.1 Httr belltsa
Az oldal httert s httrsznt a <BODY> tag-ben lehet paramterknt megadni. Ha httrkpet is hasznlunk, akkor ajnlott a httrsznt a kphez hasonlra belltani, gy biztos nem lesz soha olvashatsgi problmnk (pldul, ha ki van kapcsolva a kpek letltse a bngszben). A httr sznt meg lehet adni a hexa
kdjval (pl. #FF01DC) vagy ha van a rvid angol nevvel (pl. crimson):
<BODY bgcolor="#FF01DC">
<BODY bgcolor="crimson">
Ajnlott olyan httrkpet megadni, ami nem tlsgosan tarka, gy a szveg mindenhol jl olvashat lesz. A
httrkpet relatv (pl.: images/hatter.jpg) s abszolt (pl.: http://valami.hu/konyvtar/hatter.jpg) linkkel is
megadhatjuk:
<BODY bgcolor="#FF01DC" background="hatter.jpg">
A httrkp tulajdonsgait a style paramterrel mdosthatjuk:
<BODY background="hatter.jpg" style="background-repeat:no-repeat;
background-attachment:fixed">
A style-ba a kvetkez paramterek kerlhetnek:
background-position: :
A httrkp pozcijt hatrozhatjuk meg vele.

left = balra, center = kzpre, right = jobbra
background-repeat: :
Ha kisebb a kp mint a kpernynk, akkor mozaikszeren beillessze-e a kpet. A no-repeat rtkre csak egyszer illeszti be a
kpet.
background-attachment: : A httrkp mozgatsa. Ha rtkknt fixed-et runk a httrkpnk az oldal grgetsnl sem fog elmozdulni.
6.2 A szvegek sznnek belltsa

Az oldal szneit is a <BODY> tag-be rt paramterekkel tudjuk belltani:
text="XX" :
Az oldalon lv szvegek alaprtelmezett sznnek megadsa.
link="XX" :
Az linkek alaprtelmezett sznnek megadsa.
vlink="XX" : A mr felkeresett linkek sznnek megadsa.

alink="XX"
Az aktv hivatkozsok sznnek megadsa.
- 6. -
7. Httrzene belltsa
Ha meg szeretnnk adni az oldalunk httrzenjt, azt a <HEAD> rszben tehetjk meg a <BGSOUND> tagel. Paramterknt kell berni a zene elrsi tvonalt:
<HEAD>
<BGSOUND src="hatterzene.wav" loop="-1">
</HEAD>
Ha a loop rtke -1, akkor a zeneszmot a vgtelensgig fogja ismtelgetni. Ha valamilyen 0-nl nagyobb
szmot runk be, akkor a megadott szmszor fogja megismtelni a zent.
8. Margk belltsa
A margkat a httrhez hasonlan a <BODY> tagban tudjuk a paramterekkel belltani:
<BODY topmargin="10" leftmargin="10">
A margk belltsnl hasznlhat paramterek:
topmargin="XX" :
A fels s az als marg mrete pixelben.
leftmargin="XX" :
A jobb s a bal oldali marg mrete pixelben.
marginheight="XX" : Ugyanaz, mintha a topmargin-t hasznltuk volna.

marginwidth="XX" : Ugyanaz, mintha a leftmargin-t hasznltuk volna.
- 7. -
9. Bekezds, sortrs s szkz

9.1 Bekezdsek ltrehozsa
Bekezdseket a <P> (paragraph) tag-el tudunk ltrehozni. Mindig le kell zrni! Paramterknt azt szoktuk
megadni, hogy a bekezdsen bell balra, kzpre vagy jobbra legyen igaztva a szveg (left = balra,
center = kzpre, right = jobbra, justify = sorkizrt).
<P align="center">A szveg helye</P>
A bekezdseinket a mr korbban megismert style paramterrel is formzhatjuk:
<P align="center" style="margin-left:10; line-height:150%">
A szveg helye</P>
A style-ban a kvetkez paramtereket adhatjuk meg:
text-align:XX :
A bekezds vizszintes igaztst adhatjuk meg. (left, right, center,

justify)
margin-left:XX :
Behzs a szveg eltt. Pixelben kell megadni.
margin-right:XX :
Behzs a szveg utn. Pixelben kell megadni.
margin-top:XX :
Trkz a szveg fltt. Pixelben kell megadni.
margin-bottom:XX :
Trkz a szveg alatt. Pixelben kell megadni.
text-indent:XX :
Az els sor behzsa. Pixelben kell megadni.
line-height:XX% :
Sortvolsg. Szzalkban kell megadni, az egyszeres sortvolsg a 100%.
9.2 Sortrs s mestersges szkz

A HTML dokumentumban lv, egymst kvet szkzket a bngsz egyetlen szkznek fogja fel.
Ugyanez a helyzet a sortrssel is: hiba kezdnk j sort a szvegszerkesztben, a bngsz csupn egy szkzt fog beilleszteni a sortrs helyre.
Ahhoz teht, hogy igazi sortrst illetve sok egymst kvet szkzt helyezznk el a dokumentumban, specilis vezrl elemekre van szksgnk:
<BR> :
Sortrs beszrsa. Nem kell lezrni!
: Egy mestersges szkz beszrsa, melyet mr megjelent a bngsz.
- 8. -
10. A bettpusok mdostsa

A szvegek bettpust gy tudjuk mdostani, hogy a szveget a <FONT> tag kz rakjuk. Le kell zrni.
<FONT size="5" color="navy" face="arial">A szveg helye</FONT>
A <FONT> tag-be rhat paramterek:
size="X" :
A szveg szabvnymrett adhatjuk meg 1-7 -ig. 1 = 8 pt, 2 = 10pt, 3 = 12 pt,

4 = 14 pt, 5 = 18 pt, 6 = 24 pt, 7 = 36 pt
color="XX" : A szveg sznt adhatjuk meg a hexa kdjval (pl: #FF01DC) vagy rvid angol nevvel (pl: crimson).
face="XX" :
A szveg bettpust adhatjuk meg (pl. arial, vagy courier new). Csak alap bettpusokat adjunk meg, ami minden szmtgpen megtallhat.
A bettpust a <SPAN> tag s a style paramter segtsgvel is formzhatjuk:

<SPAN style="font-variant:small-caps">A szveg helye</SPAN>
A style-ban megadhat paramterek:
text-decoration:XX :
rtkknt megadhatjuk: overline = flhzott

blink = villog
font-variant:small-caps : Kiskapitlis.
font-transform:XX :
rtkknt megadhatjuk: uppercase = nagybets

capitalize = nagy kezdbets
visibility:hidden :
Rejtett.
letter-spacing:XX :
A szveg betkzt adhatjuk meg pt-ban.

Pl. a 2 pt az ktszeresre srtett, a -2 pt a ktszeresre ritktott.
Lteznek gynevezett szvegformz tag-ek, melyek kz kell rni a szveget. Mindig le kell zrni ket!
Szvegformz tag-ek:
<B>
Flkvr
<VAR>
Vltoz
<I>
Dlt
<KBD>
Billentyzet
<U>
Alhzott
<DEL>
thzott
<EM>
Kiemelt
<SAMP>
Minta
<SUB>
Als index
<CODE>
Kd (Courier New font)
<SUP>
Fels index
<CITE>
Idzet, alrs
<DFN>
Definci
<STRIKE>
Ugyanaz mint a <DEL>
- 9. -
11. Fejlcek
Az elz fejezetekben mr megtudtuk, hogy lehet nagy s vastag betkkel fejlceket kszteni a WEB-oldalaink szmra. Ltezik azonban egy egyszerbb megolds is, a szabvnyos fejlcek hasznlata. Ehhez a
<H1>...<H6> tag-eket kell hasznlni, melyek kzl a H1 a legnagyobb, s a H6 a legkisebb:
<H2>dvzllek az oldalamon!</H2>
A fejlcet az align paramterrel formzhatjuk (left = bal, center = kzpre, right = jobbra,
justify = sorkizrt):
<H4 align="center">Ez egy kzpre igaztott fejlc</H4>
12. Listk
A HTML-ben hromfle listt hozhatunk ltre. A rendezett listt, a rendezetlen listt, s a defincis listt.
12.1 A rendezett lista:

Az els a rendezett, ms nven szmozott lista, angolul "ordered list". Innen ered az tag neve is: <OL>. A
szmozott lista sorait az <LI> tag utn, kln sorokba kell rnunk:
<OL>
<LI>A lista 1. pontja
</OL>
Az <OL> tag-ben a kvetkez paramtereket adhatjuk meg:
type="X" :
A szmozs stlust llthatjuk be. Megadhat rtkek: 1 = szmokkal

A = nagy betkkel
a = kis betkkel
I = nagy rmai szmokkal
i = kis rmai szmokkal
start="XX" : A kezd sorszmot adhatjuk meg vele.
- 10. -
Az egyes sorok jabb listkat is tartalmazhatnak, teht a listkat egymsba lehet gyazni. Ekkor rdemes az
egyes szintekhez klnbz tpusokat rendelni:
<OL type="I">
<OL type="1">
<LI>A lista 1. alpontja
</OL>
</OL>
12.2 Rendezetlen lista:

A listk msodik tpusa a rendezetlen, ms nven felsorolt lista, angolul "unordered list", amibl az <UL> tag
neve is ered. Felptse hasonl a rendezett listhoz, csak annyiban klnbzik tle, hogy itt az egymsba
gyazott szintek automatikusan ms jellst kapnak (teli kr, res kr, teli ngyzet):
<UL>
<UL>
<UL>
<LI>A lista 3. alpontjnak 1. alpontja
<LI>A lista 3. alpontjnak 2. alpontja
</UL>
</UL>
</UL>
Az <UL> tag-be megadhat paramterek:
type="X" :
A szmozs stlust llthatjuk be. Megadhat paramterek: circle = res kr

disc = teli kr
square = ngyzet
- 11. -
12.3 Defincis lista:

A listkhoz tartozik ugyan, de kicsit eltr az elz tpusoktl az n. defincis lista, angolul "definition list".
A tag-je: <DL>. A listn bell egy "szakasz" mindig kt rszbl ll: a meghatrozsbl ("definition term",
azaz <DT>) s a lersbl ("definition description", azaz <DD>). Ezt a tpust akkor hasznljuk, ha kifejezseket szeretnnk megmagyarzni, vagy egy-egy rvidebb szveghez hosszabb megjegyzst kvnunk fzni.
Szerkezete a kvetkez:
<DL>
<DT>1. Fogalom
<DD>Az 1. fogalom meghatrozsa.
<DT>2. fogalom
<DD>A 2. fogalom meghatrozsa.
</DL>
- 12. -
13. Kpek
A kp beszrshoz be kell rni az <IMG> tag-et (nem kell lezrni) s benne paramterknt meg kell adni a
kp elrsi tvonalt, ami lehet abszolt s relatv is:
<IMG src="alkonyvtar/kepneve.jpg">
<IMG src="http://www.valami.hu/kepneve.jpg">
Az <IMG> tag-ben megadhat paramterek:
border="XX" :
A kp keretnek vastagsgt adhatjuk meg pixelben.
hspace="XX" :
A vzszintes trkzt adhatjuk meg pixelben.
vspace="XX" :
A fggleges trkzt adhatjuk meg pixelben.
alt="XX"
Egy alternatv szveget adhatunk meg, ami akkor jelenik meg, ha nem jelenthet
meg a kp, vagy ha a kurzort a kp fltt tartjuk.
align="XX"
A kp vzszintes igaztst adhatjuk meg. left = balra

right = jobbra
bottom = az alapvonalra
middle = a kp kzepe lesz az
alapvonalra illesztve
top = a kp teteje a szveg tetejvel lesz
egy vonalban
width="XX"
A kp szlessget adhatjuk meg pixelben.
height="XX"
A kp magassgt adhatjuk meg pixelben.
A kpet style paramterrel is formzhatjuk. Megadhat paramterek:

border-color:XX :
A kp keretnek sznt llthatjuk be a szoksos mdokon.
float:XX :
A krbefuttats irnyt adhatjuk none = nincs krbefuttats

meg:
left = a kp bal oldralra kerl s a
szveg jobbrl folyja krbe
right = a kp jobb oldralra kerl s a
szveg balrl folyja krbe
vertical-align:XX :
A fggleges igaztst adhatjuk baseline = az alapvonalhoz igazts

meg:
middle = a kp kzepe lesz az
alapvonalra illesztve
top = a kp teteje a szveg tetejvel
lesz egy vonalban
bottom = az alapvonalra
- 13. -
margin-left:XX :
A kp bal oldali margjt adhatjuk meg pixelben
margin-right:XX :
A kp jobb oldali margjt adhatjuk meg pixelben
margin-top:XX :
A kp fels margjt adhatjuk meg pixelben
margin-bottom:XX : A kp als margjt adhatjuk meg pixelben

border-style:XX :
A keret fajtjt adhatjuk meg: dotted = pontvonal

dashed = szaggatott
solid = folytonos
double = dupla
groove = bevgott
ridge = kill
inset = bemlytett
outset = kidomborod
14. Vzszintes elvlasztvonal

Vzszintes vonalat a <HR> tag-el lehet ltrehozni. Nem kell lezrni:
<HR color="blue" size="10" width="50%" align="right">
A <HR> tag-be rt paramterekkel tudjuk vltoztatni a vzszintes vonal tulajdonsgait.
A megadhat paramterek:
color="XX" :
A vonal sznt adhatjuk meg.
width="XX" :
A vonal szlessgt adhatjuk meg pixelben vagy szzalkban.
size="XX" :
A vonal vastagsgt adhatjuk meg pixelben.
align="XX" :
A vonal vzszintes igaztst adhatjuk meg. (left = balra, center = kzpre,

right = jobbra)
noshade :
Ezzel megszntethetjk a vonal rnykolst.
- 14. -
15. Hivatkozsok s knyvjelzk

15.1 Hivatkozsok
Linkeket az <A> tag segtsgvel hozhatunk ltre. (Mindig le kell zrni!). Az <A> tag-ben lv href paramterrel tudjuk megadni a hivatkozs cljt. Ez lehet abszolt vagy relatv hivatkozs is:
<A href="http://www.valami.hu.hu/cloldal.htm">Link szvege.</A>
<A href="oldalak/cloldal.htm">Link szvege.</A>
A hivatkozs alaprtelmezetten ugyanabban az ablakban nylik meg, mint amiben van. Ezen a target paramterrel vltoztathatunk:
<A target="_blank" href="http://www.valami.hu">Link szvege.</A>
A target-ben megadhat paramterek:
_self :
Azonos keret.
_top :
Teljes ablak.
_blank :
j ablak.
_parent :
Szlkeret.
15.2 Knyvjelzk:
Ha a weboldalunkon van egy nagyon hossz szveg, akkor annak ajnlott az elejre linkeket rakni, amik a
szveg bekezdseire mutatnak. Ezt a knyvjelzkkel tehetjk meg. Ehhez elszr minden bekezdsnek egy
azonostt (id) kell adnunk. Ezutn a hivatkozsunkban nem egy oldal cmt hanem a bekezds azonostjt adjuk meg. Ekkor a hivatkozsba runk egy #-et s a knyvjelz nevt (a bekezds azonostjt).
<A href="#azonosito_1">1. knyvjelz szvege</A>
<P id="azonosito_1">
....
</p>
<p id="azonosito_2">
....
</p>
<p id="azonosito_3">
....
</p>
- 15. -
16. Idzetek, blokkok elklntse

Az oldalon tallhat szvegeket a <BLOCKQUOTE> tag-el klnthetjk el egymstl. A tag-ek kz kerl
szveg margja a jobb s bal oldalon is nagyobb lesz, s a szveg alatt s felett is kihagy egy sort a bngsz.
<BLOCKQUOTE>
...Ide jn a szveg...
</BLOCKQUOTE>
17. Tblzatok
Tblzatokat a <TABLE> tag-el tudunk ltrehozni. Ezutn a <TR>tag-el ltrehozzuk a tblzat sorait, majd a
<TD> tag-el a sort cellkra osztjuk. Ha egy cellba nem runk semmit, akkor a keret nem fog rendesen megjelenni. Ezrt az res cellkba mindig tegynk egy mestersges szkzt:
<TABLE>
<TR>
<TD>Az els sor els cellja</TD>
<TD>Az els sor msodik cellja</TD>
</TR>
<TR>
<TD>A msodik sor els cellja</TD>
<TD>A msodik sor msodik cellja</TD>
</TR>
</TABLE>
A <table> tag-ben megadhat paramterek:
align="XX" :
A vonal vzszintes igaztst adhatjuk meg. (left = balra,

center = kzpre, right = jobbra)
border="XX" :
A szeglyek vastagsgt adhatjuk meg pixelben.
cellspacing="XX" :
A cellk kztt rs nagysga pixelben.
cellpadding="XX" :
A cellkon belli marg nagysga pixelben.
width="XX%" :
A tblzat szlessgt adhatjuk meg pixelben vagy szzalkban.
height="XX%" :
A tblzat magassgt adhatjuk meg pixelben vagy szzalkban.
bgcolor="XX" :
A tblzat httrsznt adhatjuk meg.
background="XX" :
A tblzat httrkpt adhatjuk meg.
bordercolorlight="XX" : A keret vilgos rsznek sznt adhatjuk meg.
- 16. -
bordercolordark="XX" :
A keret stt rsznek sznt adhatjuk meg.
A style paramterrel tovbbi tulajdonsgokat adhatunk meg:

border-width:XX :
A tblzat kls szeglynek a vastagsgt adhatjuk meg pixelben.
border-color:XX :
A tblzat kls szeglynek a sznt adhatjuk meg.
cellpadding:XX :
A cellkon belli marg nagysga pixelben.
A <TR> tag-en bell megadhat paramterek:

align="XX" :
A sor tartalmnak vzszintes igaztsa. (left = balra,

center = kzpre, right = jobbra)
valign="XX" :
A sor tartalmnak fggleges igaztsa. (top = fellre,

middle = kzpre, bottom = alulra )
bgcolor="XX" :
A sor httrsznt adhatjuk meg.
bordercolor="XX" :
A sor keretnek a sznt adhatjuk meg.
bordercolorlight="XX" : A sor keretnek a vilgos sznt adhatjuk meg.

A sor keretnek a stt sznt adhatjuk meg.
A <TD> tag-en bell megadhat paramterek:

align="XX" :
A cella tartalmnak vzszintes igaztsa.
left = balra
center = kzpre
right = jobbra
valign="XX" :
A cella tartalmnak fggleges igaztsa.
top = fellre
middle = kzpre
bottom = alulra
width="XX" :
A cella szlessgt adhatjuk meg.
colspan="XX" :
A cella hny cella helyt foglalja el vzszintesen.
rowspan="XX" :
A cella hny cella helyt foglalja el fgglegesen.
height="XX" :
A cella magassgt adhatjuk meg.
background="XX" :
A cella httert adhatjuk meg.
bgcolor="XX" :
A cella httrsznt adhatjuk meg.
bordercolor="XX" :
A cella keretnek a sznt adhatjuk meg.
- 17. -
bordercolorlight="XX" : A cella keretnek a vilgos sznt adhatjuk meg.

A cella keretnek a stt sznt adhatjuk meg.
18. Keretek
A keretek segtsgvel egy bngszablakban tbb HTML oldalt is megjelenthetnk. Keretes oldalt ktflekppen hozhatunk ltre, kerettel s begyazott kerettel.
18.1 Keretes szerkezet oldalak

Keretes szerkezet oldalaknl elszr ltre kell hozni egy kln HTML oldalt mely a kereteket tartalmazza.
Ebben az oldalban fog megnylni a tbbi oldal. A keretes szerkezet oldalunkat a <FRAMESET> tag-el hozhatjuk ltre. (Le kell zrni)
A <FRAMESET> tag-en bell a kvetkez paramtereket kell megadni:
cols="XX, XX, *" :
A keretes oldal oszlopainak szlessge. Megadhatjuk pixelben s szzalkban is. Az egyik oszlop szlessgnek megadhatjuk a *-ot, gy az a keret kiegszti az oldal szlessgt 100%-ra.
framespacing="XX" : A keretek kzti tvolsg pixelben.

border="X" :
A keretek kzt legyen-e kerete. (0 = nem, 1 = igen)
bordercolor="XX" :
A keret sznt adhatjuk meg.
Miutn ltrehoztuk az oszlopokat, azokat sorokra oszthatjuk, szintn a <frameset> tag-el. Ezt a tag-et viszont az oszlop kt tag-je kz kell rni!
A <frameset> tag-en ezt a paramtert kell megadni:
rows="XX, XX, *" : Az oszlopok sorainak a magassga. Megadhatjuk pixelben s szzalkban is.
Az egyik sor magassgnak megadhatjuk a *-ot, gy az a keret kiegszti az
oldal magassgt 100%-ra.
Ezutn az oszlopokban ltrehozott kereteket kell definilnunk. Ezt a <FRAME> tag-el tehetjk meg.
A <FRAME> tag-en bell a kvetkez paramtereket kell megadni:
name="XX" :
A keret nevt adhatjuk meg.
src="XX" :
A keretben megjelentend oldal elrsei tvonala.
frameborder="X" : A keretek kzt legyen-e keret. (0 = nem, 1 = igen)

scrolling="XX" :
Grgethet legyen-e a keret. (yes = igen, no = nem, auto = csak akkor grgethet, ha nem ltszik a teljes oldal)
marginwidth=XX" : A keret jobb s bal oldali margja pixelben.
- 18. -
marginheight=XX" : A keret fenti s lenti margja pixelben.

A keretes szerkezet oldalnl a linkek ltalban egy msik keretben nylnak meg. Ezt gy tudjuk belltani,
hogy a hivatkozs target paramterbe rtkknt a keret nevt adjuk meg.
Plda egy keretes szerkezet oldalra:
Log
Fejlc
Men
Foldal
Lbjegyzet
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="150, *" framespacing="0" border="no">
<frameset rows="50, *">
<frame name="logo" src="logo.htm" frameborder="1" scrolling="no">
<frame name="menu" src="menu.htm" frameborder="1" scrolling="no">
</frameset>
<frameset rows="50, *, 25">
<frame name="fejlec" src="fejlec.htm" frameborder="1" scrolling="no">
<frame name="fooldal" src="fooldal.htm" frameborder="1" scrolling="no">
<frame name="labjegyzet" src="labj.htm" frameborder="1" scrolling="no">
</frameset>
</FRAMESET>
<HTML>
- 19. -
18.2 Begyazott keretek

Az elz pldban ltrehozott oldalt begyazott keretek segtsgvel is ltrehozhatjuk. Ehhez elszr a keretek szerkezethez hasonl tblzatot kell kszteni a mr tanult mdon. Miutn ltrehoztuk a tblzatot a tblzat celliban el kell kszteni a begyazott kereteket. Ezt az <IFRAME> (inline frame) tag-el tehetjk meg.
Az <IFRAME> tag-be a kvetkez paramtereket kell megadni:
name="XX" :
A begyazott keret nevt adhatjuk meg.
src="XX" :
A begyazott keretben megjelentend oldal elrsei tvonala.
width="XX" :
A begyazott keret szlessge pixelben vagy szzalkban.
height="XX" :
A begyazott keret magassga pixelben vagy szzalkban.
frameborder="X" :
A begyazott keretnek legyen-e kerete. (0 = nem, 1 = igen)
framespacing="XX" : A begyazott keret s a tartalma kzti tvolsg pixelben.

scrolling="XX" :
Grgethet legyen-e a keret. (yes = igen, no = nem, auto = csak akkor

grgethet, ha nem ltszik a teljes oldal)
marginwidth="XX" : A begyazott keret jobb s bal oldali margja pixelben.

marginheight="XX" : A begyazott keret fenti s lenti margja pixelben.
align="XX" :
A begyazott keret igaztsa:
left = balra,
right = jobbra
top = fellre
texttop = szveg tetejhez
middle = kzpen
absmiddle = kzpvonalra
baseline = alapvonalra
bottom = alulra
absbottom = szveg aljhoz
center = kzpre
- 20. -
Egy plda begyazott keretek hasznlatra:

<TABLE>
<TR height="80%">
<TD align="center" valign="top" rowspan="2">
<A href="egy.htm" target="fokeret">Men 1</A>
<BR>
<A href="ketto.htm" target="fokeret">Men 2</A>
</TD>
<TD align="center">
<IFRAME name="fokeret" src="egy.htm" width="100%" height="100%"
frameborder="0" framespacing="0" border="0" marginheight="0"
marginwidth="0"></IFRAME>
</TD>
</TR>
</TABLE>
19. rlapok
Az rlap tartalmazhat lthat, s nem lthat (rejtett) elemeket. Lthat elemek pldul a szvegbeviteli mezk, legrdl listk, s a gombok, mg a rejtett elemekben olyan informcikat trolhatunk, amelyekre az
rlap feldolgozsakor szksgnk lehet, de nem szeretnnk, ha az rlapot kitlt szemly tudomsra jutna.
Miutn az rlapot kitltttk, elkldjk egy feldolgoz programnak. Ez a feldolgoz program egyesvel beolvassa az rlap elemeit s rtkeiket, majd elvgzi rajtuk az ltalunk megadott utastsokat. Pldul eltrolhatjuk az adatokat egy adatbzisban, brmilyen formban kirathatjuk az adatokat a kpernyre, vagy akr el
is kldhetjk az adatokat egy email cmre.
Az rlapot a <FORM> tag-ek kz kell rni. Amit ezen bell runk, az az rlap rsze lesz.
A <FORM> tag-ben megadhat paramterek
action="XX.XXX" : A feldolgoz oldal neve, ami HTML vagy CGI oldal.
method="XXX" :
Az rlap elemeinek tadsi mdja. (GET vagy POST)
name="XX" :
Az rlap nevt adhatjuk meg.
19.1 Szveges beviteli mezk s jelsz mezk

Szveges beviteli mezt az <INPUT type="text"> tag-el hozhatunk ltre. Nem kell lezrni.
Jelsz mezt az <INPUT type="password"> tag-el hozhatunk ltre. Ugyanaz mint a szveges mez,
csak a bert szvegbl csak csillagok vagy krk ltszanak:
<INPUT type="text" name="szveg1" size="15" value="Alap szveg">
<INPUT type="password" name="jelszo" size="15">
- 21. -
Megadhat paramterek:
size="XX" :
A szveges beviteli mez hosszt adhatjuk meg.
value="XX" :
A szveges beviteli mez alaprtke.
name="XX" :
A beviteli mez neve.
maxlength="XX" : A maximlisan berhat karakterek szmt adhatjuk meg.

disabled :
A mez rvnytelentse. Ha a tag-be rjuk, nem lehet rni a mezbe.
19.2 Rejtett mezk

Rejtett mezt a <INPUT type="hidden"> tag-el hozhatunk ltre. A value paramterbe rjuk azt az rtket, amira a feldolgozprogramnak szksge lesz:
<INPUT type="hidden" value="valami@valami.hu">
19.3 Kijell ngyzetek

A kijell ngyzet az <INPUT type="checkbox"> tag-el hozhatunk ltre. Nem kell lezrni.
A ngyzetek kzl brmelyiket kivlaszthatjuk (akr az sszeset is), de resen is hagyhatjuk ket. Ha tbb
meznek ugyanazt a nevet adjuk, a form feldolgozsakor a kivlasztott mezk rtkeit vesszvel elvlasztva
kapjuk vissza. Teht a mezk rtkei a feldolgozs utn (ha mindet kivlasztottuk):
<INPUT type="checkbox" name="negyzet1" value="negyzet1" checked>
value="XX" : A kijell ngyzet rtke.
name="XX" : A kijell ngyzet neve.
checked :
A kijell ngyzet kivlasztsa. Ha a tag-be rjuk, a ngyzet alaprtelmezetten ki lesz

vlasztva.
disabled :
A ngyzet rvnytelentse. Ha a tag-be rjuk, nem lehet rkattintani.
19.4 Rdigombok
A rdigombok hasonlak a kijellngyzetekhez, de a type paramterben radio -t kell rtkknt megadni. Ha ugyanazt a nevet adjuk nekik, akkor maximum egyet vlaszthatunk ki kzlk! A checked paramter megadsakor itt is alaphelyzetben ki lesz vlasztva az adott gomb. Ha tbb helyre is berjuk, hogy
checked, akkor az utols lesz az rvnyes!
<INPUT type="radio" name="radiogomb1" value="radiogomb1">
A megadhat paramterek ugyanazok mint a kijell ngyzeteknl.
- 22. -
19.5 Gombok
4 -fle gombot hozhatunk ltre az input tag-ben.
1. Egyszer gomb: Ennek a gombnak alaprtelmezetten nincs semmilyen funkcija, majd ksbb JavaScripttel lesz valami haszna. Az <INPUT type="button> tag-el hozhatjuk ltre:
<INPUT type="button" name="gomb1" value="Gombfelirat">
2. Alaphelyzet gomb: Ez a gomb visszalltja az rlap minden elemt az alaprtelmezett rtkre:
<INPUT type="reset" name="alaphelyzet" value="Gombfelirat">
3. Elkld gomb: Ezzel a gombbal elkldhetjk a mr megadott feldolgoz proramnak kitlttt rlapot:
<INPUT type="submit" name="gomb1" value="Elkld">
4. Feltlts gomb: Ezzel a gombbal fjlokat tlthetnk fel:
<INPUT type="file" name="gomb1" value="Feltlts">
19.6 Legrdl listk

Legrdl listt az <SELECT> tag-el lehet ltrehozni. (Le kell zrni.)
name="XX" : A kijell legrdl lista neve.
size="XX" : Megadhatjuk, hogy egyszerre hny menelemet lssunk.
multiple : Ha a tag-be rjuk, akkor tbb menelemet is kivlaszthatunk.
checked :
A kijell ngyzet kivlasztsa. Ha a tag-be rjuk, a ngyzet alaprtelmezetten ki lesz vlasztva.
disabled : A lista rvnytelentse. Ha a tag-be rjuk, nem lehet rkattintani.

A lista menpontjait az <OPTION> tag-el adhatjuk meg. (Nem kell lezrni) A tag utn kell megadni a menelemek szvegt:
<SELECT name="lista1" size="1">
<OPTION value="15"> Els menelem
<OPTION value="20"> Msodik menelem
<OPTION value="25" selected> Harmadik menelem
<OPTION value="30"> Negyedik menelem
</SELECT>
- 23. -
value="XX" : A menelem rtke.
selected :
Ha a tag-be rjuk, akkor tbb a menelem lesz alaprtelmezetten kivlasztva.
19.7 Szveges terletek

Nagyobb szveges terletet a <TEXTAREA> tag-el hozhatunk ltre:
<TEXTAREA name="szoveges"> Az alap szveg </TEXTAREA>
Vigyzzunk arra, hogy a nyit s zr rsz kztt a szkzket s a sortrseket is figyelembe veszi a bngsz! Az alaprtket ide kell bernunk, s nem a value paramterbe, mint az elz esetekben!
name="XX" : A szveges terlet neve.
cols="XX" : Hny karakter szles legyen a szveges terlet.
disabled : A szveges terlet rvnytelentse. Ha a tag-be rjuk, nem lehet rni bele.
19.8 rlap elemek csoportostsa

Az rlapon tallhat elemeket (beviteli mezk, kijell ngyzetek, gombok, stb.)idnknt nem rt csoportostani. Ehhez a <FIELDSET> tag-et kell hasznlnunk:
<FIELDSET>
Nv: <INPUT type="text" name="nev">
Jelsz: <INPUT type="password" name="jelszo">
<INPUT type="submit" value="Elkld">
</FIELDSET>
Ennek a keretnek adhatunk egy cmkt is, melynek szvegt a FIELDSET tag-en bell, a <LEGEND> tag
nyit s zr rsze kz kell rnunk. A cmkt az align paramterrel igazthatjuk balra, kzpre vagy
jobbra:
<FIELDSET>
<LEGEND align="center">rja be nevt s a jelszavt</LEGEND>
Nv: <INPUT type="text" name="nev">
Jelsz: <INPUT type="password" name="jelszo">
<INPUT type="submit" value="Elkld">
</FIELDSET>
- 24. -
20. Fnyjsg ltrehozsa

Elfordulhat, hogy az oldalunkra el szeretnnk helyezni egy kis reklm-blokkot, amiben egy reklmszveg
ide-oda mozog, esetleg eltnik az egyik oldalon, s jra megjelenik a msikon. Ilyen fnyjsgot a
<MARQUEE> tag-el hozhatunk ltre.
<MARQUEE width="200" height="30"> A mozg szveg</MARQUEE>
A nyit s lezr rsz kz rt szveg automatikusan mozogni fog, alapesetben jobbrl balra haladva. A szvegen kvl kpeket is elhelyezhetnk a blokkban!
<MARQUEE width="200" height="30">
<IMG src="kep.jpg">
</MARQUEE>
A <MARQUEE> tag-ben megadhat paramterek:
width="XX" :
A fnyjsg szlessge pixelben vagy szzalkban.
height="XX" :
A fnyjsg magassga pixelben vagy szzalkban.
direction="XX" :
A mozgs irnya:
left = balra
right = jobbra
behaviour="XX" :
A fnyjsg viselkedse. Az
alaprtelmezett a grdl.
slide = besz
alternate = ide-oda mozg
scrolldelay="XX" : A mozgs sebessge ezredmsodpercekben megadva.

scrollamount="XX" : A mozgs lptke pixelben megadva.
loop="XX" :
Ha azt szeretnnk hogy ne a vgtelensgig mozogjon a szveg, akkor ezzel

megadhatjuk, hogy hnyszor ismtldjn.
bgcolor="XX" :
A fnyjsg httrsznt adhatjuk meg.
hspace="XX" :
A jobb s bal oldali marg mrete pixelben.
vspace="XX" :
A fenti s lenti marg mrete pixelben.
- 25. -
21. Bepl tartalmak

Az HTML weboldalunkon elhelyezhetnk klnbz bepl multimdis tartalmakat is. Ilyenek pldul a
flash animcik s a videk. Bepl tartalmat a <EMBED> tag-el hozhatunk ltre.
21.1 Videk
Videt a mr megismert tag-el helyezhetnk el, s majd a tag-ben lv paramterekkel llthatjuk be. Ajnlott AVI s MPEG videkat hasznlni.
<EMBED src="video.avi" style="border:2 black dotted"></EMBED>
src="XX.avi" :
A vide elrsi tvonalt adhatjuk meg.
width="XX" :
A vide szlessge pixelben.
height="XX" :
A vide magassga pixelben.
autostart="XX" :
Bellthatjuk, hogy a vide az oldal betltsekor automatikusan elinduljon-e.

(true = igen, false = nem)
controller="XX" : A vide alatt megjelenjenek-e a kezel gombok (play, stop stb.) (true = igen,
false = nem)
playcount="XX" :
Alaprtelmezetten a bngsz a vgtelensgig ismtelgeti a videt. Itt megadhatjuk, hogy hnyszor jtssza le.
hspace="XX" :
vspace="XX" :
align="XX" :
A vzszintes igaztst adhatjuk meg a mr tanult mdon.
border="XX" :
A vide keretnek tulajdonsgait adhatjuk meg szkzzel elvlasztva.
21.2 Flash animcik

Flash animcit ugyangy helyezhetnk el az oldalunkon, mint videt, csak itt az <EMBED> tag kiegszl
nhny j paramterrel.
<EMBED src="animaco.swf" quality="high" style="border:1"></EMBED>
Az elbb tanultakon kvl mg megadhat paramterek:
quality="XX" :
Az animci minsgt adhatjuk meg. (high = magas, medium = kzepes,

low = alacsony)
type="XX" :
Az animci tpust adhatjuk meg. (application/x-shockwave-flash)
pluginpage="XX" : Megadhatjuk, hogy az animci plugin-je honnan tlthet le.
- 26. -
22. A grdtsv tsznezse

Elfordulhat, hogy a keretes szerkezet oldalunknl a tartalom kilg a keretbl, s ezrt megjelenik a grdtsv. Nagyon csnya, ha mondjuk egy vilgos sznekbl ll oldalon a grdtsv sttszrke. Erre a megolds a grdtsv tsznezse, melyet a <BODY> tag-be rt style paramterrel tehetnk meg.
<BODY style="scrollbar-face-color: #336666; scrollbar-highlight-color:
669999; scrollbar-3dlight-color: #000033; scrollbar-darkshadow-color:
#003333; scrollbar-shadow-color: #000000; scrollbar-arrow-color:
#FFFFFF; scrollbar-track-color: #EFEFEF;">
shadow-color
arrow-color
3dlight-color
track-color
darkshadow-color
highlight-color
face-color
23. Kurzor belltsa

Minden HTML objektum fltt bellthatjuk, hogy milyen kurzor jelenjen meg. Ezt a style-ban a cursor
paramterrel llthatjuk be.
<IMG src="kep.jpg" style="cursor:hand">
Megadhat kurzorok:
default :
Alaprtelmezett kurzor
hand :
Kz, ltalban hivatkozsokat jell.
help :
Sg
crosshair :
Clkereszt pontos kijellshez.
move :
thelyezs
text :
Szveg kijells.
s-resize :
Fggleges tmretezs.
w-resize :
Vzszintes tmretezs.
wait :
Homokra, vrakozst jelent.
- 27. -
24. A HTML fejlce

Egy HTML oldalnak mindig van a <BODY>-n kvl fejrsze is, amit a <HEAD> tag jell. A fejrsz olyan informcikat tartalmaz a dokumentumrl, amiket a bngsznek nem kell megjelentenie a felhasznl szmra.
24.1 A <BASE> tag

<BASE> : Meghatrozza az oldalon szerepl sszes link alap URL-jt.:
<HEAD>
<BASE href="http://www.valami.hu/">
</HEAD>
24.2 A <LINK> tag

<LINK> : Ez a tag hatrozza meg az aktulis dokumentum s egy msik dokumentum viszonyt.
Az elemet kls dokumentumok, pl. stluslapok meghvshoz hasznljuk.
<HEAD>
<LINK rel="stylesheet" type="text/css" href="theme.css">
</HEAD>
A <LINK> tag-ben megadhat paramterek:
charset="XX" :
A cl URL karakterkdolst hatrozza meg.
href="XX" :
A cl dokumentum helye.
hreflang="XX" : A cldokumentum nyelvt hatrozza meg. Pldul: hu

media="XX" :
Meghatrozza, milyen mdon legyen a dokumentum megjelentve. (all,

braille, print, projection, screen, speech)
rel="XX" :
Meghatrozza az aktulis dokumentum s a cl dokumentum viszonyt.

alternate, appendix, bookmark, chapter, contents,
copyright, glossary, help, home, index, next, prev,
section, start, stylesheet, subsection
type="XX" :
A cldokumentum MIME tpust hatrozza meg. (Pldul: text/css,

text/javascript, image/gif)
- 28. -
24.3 A <TITLE> tag

<TITLE> : Ezzel a tag-el adhatjuk meg a HTML oldalunk cmt. Le kell zrni.
<HEAD>
<TITLE> Az HTML oldalunk cme <TITLE>
</HEAD>
24.4 A <SCRIPT> tag

<SCRIPT> : Egy scriptet (pl. JavaScript) definil. Ez lehet ms fjlban lev, kls script, vagy a kezd s
zr <script> tag kztt elhelyezett, begyazott script.
<HEAD>
<SCRIPT type="text/javascript">
<!-... a script helye ...
//-->
</SCRIPT>
</HEAD>
A <SCRIPT> tag-ben megadhat paramterek:
type="XX" :
A script MIME tpusnak meghatrozsa (text/ecmascript

text/javascript, text/jscript, text/vbscript, text/vbs,
text/xml).
charset="XX" : Meghatrozza a script karakterkdolst.

defer="XX" :
Jelzi, hogy a script nem generl megjelentend tartalmat. A bngsz folytathatja

a HTML kd rtelmezst s felptheti az oldalt.
src="XX" :
Megadhatjuk azt a kls fjlt, amelyik a scriptet tartalmazza.
- 29. -
24.5 A <META> tag

<META> : Ez a tag informcikat tartalmaz a dokumentumrl a bngsz belltshoz, keresk szmra
s egyb adatokat.
<HEAD>
<META name="DESCRIPTION" lang="HU" content="Az oldal lersa">
</HEAD>
A <META> tag-ek:
1.
<META name="KEYWORDS" lang="HU" content="XX">

A oldal tartalmra jellemz kulcsszavak, amiket a kereskbe berva a keres oldalunkat is meg kell
tallja. Maximlis hossza: 200/1000 karakter
2.
<META name="DESCRIPTION" lang="HU" content="XX">

Az oldal tartalmnak lersa rviden. Gyakran ezt a szveget jelentik meg a keresk a tallati oldalon oldalad lersaknt. Maximlis hossza: 200-256 karakter. Tancsos a szvegbe bekombinlni a
legfontosabb keresszavakat is.
3.
<META http-equiv="Content-Type" content="text/html;

charset=iso-8859-2">
Ezzel a tag-el lehet belltani, milyen karakterkszletet hasznljon a kliensgp bngszje az oldal
megjelentsekor. Ha az adott karakterkszlet nincs a gpen teleptve, az alaprtelmezett karakterkszlett fogja hasznlni. Csak egy karakterkszletet lehet kijellni.
A leggyakrabban hasznlt karakterkszletek:
iso-8859-1 = nyugat-eurpai [iso]
iso-8859-2 = kzp-eurpai [iso]
windows-1250 = kzp-eurpai [windows] (Nem ajnlott!)
4.
<META name="ROBOTS" content="INDEX,NOFOLLOW">

Ez a tag a robotok oldalkvetst s oldalindexelst irnytja. Ngy mdon lehet ezt az elemet alkalmazni. A tag CONTENT szekcija az albbi rtkeket veheti fel (tbb rtknl vesszvel elvlasztva):
index = oldalt indexeli
noindex = oldalt ne indexelje
follow = oldal linkjeit kvesse
nofollow = oldal linkjeit ne kvesse
Hasznlhat mg az ALL = INDEX,FOLLOW, s a NONE = NOINDEX,NOFOLLOW rtk is.
- 30. -
5.
<META name="REVISIT-AFTER" content="10 days">

Itt hatrozhatja meg, hny nap mlva ltogassa meg oldaladat a keresrobot jra frisstsek utn kutatva. Csak ilyen elem a hasznlatval biztosthatod a vltozsok keresk ltali nyomon kvetst.
Nem minden keresrobot hajtja vgre ezt a parancsot.
6.
<META name="EXPIRES" content="XX">

Ezzel az elemmel is azt hatrozhatod meg, hny nap mlva ltogassa meg oldaladat a keresrobot
jra frisstsek utn kutatva. Csak ilyen elem a hasznlatval biztosthatod a vltozsok keresk ltali nyomon kvetst. Nem minden keresrobot hajtja vgre ezt a parancsot.
7.
<META name="AUTHOR" content="XX">

Itt lehet a lap szerzjnek a nevt megadni.
8.
<META name="DATE" content="XX">

Itt lehet a dokumentum ksztsnek idejt megadni.
9.
<META name="COPYRIGHT" content="XX">

Itt lehet a dokumentum tartalmnak copyright (szerzi jogi) adatait megadni.
10. <META name="PUBLISHER" content="XX">

Itt adhat meg inf a publikl intzmnyrl.
Maximlis karakter: 64
11. <META name="MADE" content="XX">
Itt adhat meg a szerz email cme.
12. <META name="REPLY TO" content="XX">
Itt adhat meg a reply email cmed.
13. <META name="GENERATOR" content="XX">
Itt a ksztskor hasznlt webszerkeszt szoftver neve adhat meg. Szmos webszerkeszt szoftver
ezt a sort automatikusan hozzfzi a forrskdhoz.
14. <META name="SUBJECT" content="XX">
Meghatrozhatod weblapod tmjt. Egyes keresknek segt az adatbzisban a megfelel tma-kategriba besorolni lapodat.
15. <META name="PAGE-TYPE" content="XX">
Itt meghatrozhatod dokumentumod tpusa. Pldul: "Privat Home Page"
- 31. -
16. <META name="AUDIENCE" content="XX">

Itt adhatod meg, milyen ltogati rtegnek szl a dokumentum. Pl: "ALL, CHILDREN, YOUNGS,
SENIOR"
17. <META http-equiv="REFRESH" content="5; URL=http://www.valami.hu">
Itt valsthat meg automatikus tovbbirnyts egy msik URL-re, pl. az oldal/webhely elkltzse
esetn. Meghatrozhat, az oldal betltse utn hny msodperccel irnytson t a msik oldalra.
Pl: "5" = 5 msodperc
Figyelem: A keresrobotok nem kvetik ez a parancsot, vagy az ugyanilyen hats javascriptes parancsokat. Ilyen tirnytssal a kvetkez oldalt kizrod a keres indexelsbl.
Megjegyzs: ha nem kerlhet el a hasznlata, rdemes az oldalon a kvetkez oldalra mutat linket
is elhelyezni, mivel a keresrobotok a linkeket kvetik, valamint a bngszk sem mindig hajtjk
vgre ezt a parancsot)
18. <META http-equiv="PRAGMA" content="NO-CACHE">
Ez a parancs a proxy szervernek tiltja, hogy az oldalt trolja. Minden alkalommal a trol webszerverrl fogja lekrni.
19. <META http-equiv="CACHE-CONTROL" content="NO-CACHE">
Itt tilthatod le a kliens bngsznek s a proxy szervernek, hogy az oldal tartalmt tmeneti memriban trolja. Az oldalt minden elrskor a webrl fogja lekrni. Hasznos gyakran frissl oldaltartalmaknl, pl: webkamera.
20. <META http-equiv="CONTENT-LANGUAGE" content="english">
Ezzel a metatag-al meghatrozhatod dokumentumod nyelvt. A keresk knnyebben megtalljk oldaladnak a megfelel adatbzist, illetve nyelvre szktett keressnl nem fogjk oldaladat tves tallatknt kilistzni.
- 32. -
25. Az XHTML
Az XHTML-t azrt hoztk ltre, hogy flvltsa a HTML-t. Ma mr a legtbb bngsz tmogatja. Elbb-utbb mindenkiben felmerl, hogyan teheti elkszlt oldalait az XHTML szabvny elrsainak megfelelv.
Albb nhny szempontban megprblom sszefoglalni a legfontosabb tennivalkat.
Az XHTML sokkal szorosabb szabvnykvetst ignyel a korbbi HTML vltozatoknl. Vge lesz a bngszk ltal romjaibl felptett lapoknak, de a szabvnyossg megteremti az egysges megjelens, a bngszfggetlensg feltteleit is.
Vannak HTML ag-ek s paramterek, amiket az XHTML mr nem tmogat. Ezeket ltalban CSS stlusokkal helyettesteni lehet.
Meglv kdjainkat ltalban minden tovbbi nlkl trhatjuk gy, hogy az megfeleljen az XHTML kvetelmnyeinek. Ehhez az albbiakban olvashatsz nhny szempontot:
1. A tag-eket mindig kis betvel rjuk
Mivel az XML kis/nagybet rzkeny s az XHTML ebbl a nyelvbl van levezetve, itt mr nem mindegy,
az elemek neveit kis-, vagy nagybetvel rjuk - a csupa kisbets rsmd az elfogadott. Ez vonatkozik a
HTML tag-ek s paramtereik neveire is.
Helytelen:
<P Align="right">Ez egy <B>bekezds.</B></P>
Helyes:
<p align="right">Ez egy <b>bekezds.</b></p>
2. Minden elemet le kell zrni
A HTML-ben eddig elfogadott volt bizonyos zrtagjnak elhagysa, ilyenek pldul a <p>, <li> elemek.
Az XHTML-ben nincsenek lezratlan elemek, ezrt az elem zrtagjt mindig ki kell tenni.
Helytelen:
<p>Els bekezds
<p>Msodik bekezds
<ul>
<li>Els listaelem
<li>Msodik listaelem
</ul>
Helyes:
<p>Els bekezds</p>
<p>Msodik bekezds</p>
<ul>
<li>Els listaelem</li>
<li>Msodik listaelem</li>
</ul>
- 33. -
3. A zr tag nlkli elemeket is le kell zrni

Vannak olyan elemek is, amelyeknek nincsen zrtagjuk, de a szably ezekre is vonatkozik. Ezeket gy zrjuk le, hogy a / jelet a elemet bezr relcijel > el tesszk gy: />.
Mivel ez egyes bngszkben hibs rtelmezst okozhat, ajnlott a / jel eltt egy szkzt hagyni.
Helytelen:
<img src="kep.jpg" width="140" height="100">
<br>Valami szveg
Helyes:
<img src="kep.jpg" width="140" height="100" />
<br />Valami szveg
4. A paramterek rtke mindig izzjelek kzt legyen
A HTML-ben a paramterek rtkei kzl azokat nem volt ktelez idzjelbe tenni, amelyek csak szmokat
tartalmaztak. Ez is megvltozott: minden rtket idzjelbe kell tennnk.
Helytelen:
<img src="kep.jpg" width=140 height=100 />
Helyes:
<img src="kep.jpg" width="140" height="100" />
5. Az tag-ek egymsba gyazsnak pontossga
Sok HTML elemet lehet egymsba illesztbe is hasznlni, pldul kijellhetek egy szvegrszre egyszerre
<b> bold s <i> italic szvegformzst is.
Fontos: az elemek zr tagjai fordtott sorrendben kerljenek sorra, mint a nyittagok.
Helytelen:
...szveg <b><i> ez itt mr ki van emelve <b><i> mg tbb szveg...
Helyes:
...szveg <b><i> ez itt mr ki van emelve <i><b> mg tbb szveg...
- 34. -
6. A rvid paramterek nem megengedettek

Eddig engedlyezve volt a checked, selected, vagy a readonly stb, rvid paramterek hasznlata.
Az XHTML ezt nem engedi meg, ki kell mindenhol rni: checked="checked", selected="selected", s readonly="readonly".
Helytelen:
<input type="radio" name="radiogomb" value="igen" checked />
Helyes:
<input type="radio" name="radiogomb" value="igen" checked="checked" />
7. Linkekben & helyet &
A linkekben ezentl nem lehet hasznlni az & karaktert, helyette az & - kell kirni.
Helytelen:
<a href="http://lapom.hu/index.php?egyik=elso&masik=masodik">
Helyes:
<a href="http://lapom.hu/index.php?egyik=elso&ampmasik=masodik">
8. Name helyett id
Eddig az elemek egyedi azonostsra a name attribtumot hasznltuk, amit a bngszk ltalnosan le is
kezeltek. Ezutn t kell trni a hasonl clra val id attribtumra. Mivel viszont egyelre vannak bngszk, amelyek csak korltozottan tmogatjk az id hasznlatt, tancsos mindkt paramtert hasznlni.
Helytelen:
<img src="kep.gif" width="50" height="50" name="kep_1" />
Helyes:
<img src="kep.gif" width="50" height="50" name="kep_1" id="kep_1" />
9. Mdosul az oldalunk specifikcija
Miutn mr az XHTML szabvnyait hasznltunk az oldalunk specifikcija is megvltozott:
XHTML Strict DTD, XHTML Transitional DTD s XHTML Frameset DTD. Ezek az elnevezsek
ugyanazt jelentik, mint a HTML specifikcik.
- 35. -
Tartalomjegyzk:
1. Mi az a HTML dokumentum?......................................................................................................................2
2. Mi az a TAG?............................................................................................................................................2
3. A HTML dokumentum alapszerkezete.........................................................................................................3
4. Megjegyzsek beszrsa...............................................................................................................................3
5. Az oldalunk specifikcijnak megadsa.....................................................................................................4
6. A httr s a sznek belltsa.......................................................................................................................5
6.1 Httr belltsa.....................................................................................................................................5
6.2 A szvegek sznnek belltsa..............................................................................................................5
7. Httrzene belltsa.....................................................................................................................................6
8. Margk belltsa..........................................................................................................................................6
9. Bekezds, sortrs s szkz........................................................................................................................7
9.1 Bekezdsek ltrehozsa.........................................................................................................................7
9.2 Sortrs s mestersges szkz.............................................................................................................7
10. Bettpusok mdostsa................................................................................................................................8
11. Fejlcek.........................................................................................................................................................9
12. Listk.............................................................................................................................................................9
12.1 Rendezett lista......................................................................................................................................9
12.2 Rendezetlen lista................................................................................................................................10
12.3 Defincis lista...................................................................................................................................11
13. Kpek..........................................................................................................................................................12
14. Vzszintes elvlasztvonal..........................................................................................................................13
15. Hivatkozsok s knyvjelzk.....................................................................................................................14
15.1 Hivatkozsok......................................................................................................................................14
15.2 Knyvjelzk.......................................................................................................................................14
16. Idzetek, blokkok elklntse....................................................................................................................15
17. Tblzatok...................................................................................................................................................15
18. Keretek........................................................................................................................................................17
18.1 Keretes szerkezet oldalak.................................................................................................................17
18.2 Begyazott keretek.............................................................................................................................19
19. rlapok.......................................................................................................................................................20
19.1 Szveges beviteli mezk s jelsz mezk.........................................................................................20
19.2 Rejtett mezk.....................................................................................................................................20
19.3 Kijell ngyzetek.............................................................................................................................21
19.4 Rdigombok.....................................................................................................................................21
19.5 Gombok..............................................................................................................................................22
19.6 Legrdl listk.................................................................................................................................22
19.7 Szveges terletek.............................................................................................................................22
- 36. -
19.8 Az rlap elemek csoportostsa..........................................................................................................23

20. Fnyjsg ltrehozsa.................................................................................................................................24
21. Bepl tartalmak.......................................................................................................................................25
21.1 Videk................................................................................................................................................25
21.2 Flash animcik.................................................................................................................................25
22. A grdtsv tsznezse.............................................................................................................................26
23. Kurzor belltsa.........................................................................................................................................26
24. A HTML fejlce..........................................................................................................................................27
24.1 A <BASE> tag....................................................................................................................................27
24.2 A <LINK> tag....................................................................................................................................27
24.3 A <TITLE> tag.................................................................................................................................28
24.4 A <SCRIPT> tag...............................................................................................................................28
24.5 a <META> tag....................................................................................................................................29
25. Az XHTML.................................................................................................................................................32

HTML Programozás Az Alapoktól

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Programozás Az Alapoktól

Uploaded by

Copyright:

Available Formats

HTML programozs az alapoktl

HTML programozs az alapoktl

rta: Vri Csaba

HTML programozs az alapoktl

HTML programozs az alapoktl

3. A HTML dokumentum alapszerkezete

Ez a HTML oldal fejrsze. Sok hasznos informcit elhelyezhetnk benne, de egyelre

A HTML oldal trzse. A nyit s zr tag kz bert szveget a bngsz megprblja

HTML programozs az alapoktl

5. Az oldalunk specifikcijnak megadsa

Szigor szabvnykvetshez hasznlatos DTD (dokumentumtpus definci

A Frameset DTD hasznland keretes (frames) weboldalak esetn. A

A HTML Strict DTD :

HTML programozs az alapoktl

6. A httr s a sznek belltsai

A httrkp pozcijt hatrozhatjuk meg vele.

6.2 A szvegek sznnek belltsa

Az oldalon lv szvegek alaprtelmezett sznnek megadsa.

Az linkek alaprtelmezett sznnek megadsa.

vlink="XX" : A mr felkeresett linkek sznnek megadsa.

Az aktv hivatkozsok sznnek megadsa.

HTML programozs az alapoktl

A fels s az als marg mrete pixelben.

A jobb s a bal oldali marg mrete pixelben.

marginheight="XX" : Ugyanaz, mintha a topmargin-t hasznltuk volna.

HTML programozs az alapoktl

9. Bekezds, sortrs s szkz

A bekezds vizszintes igaztst adhatjuk meg. (left, right, center,

Behzs a szveg eltt. Pixelben kell megadni.

Behzs a szveg utn. Pixelben kell megadni.

Trkz a szveg fltt. Pixelben kell megadni.

Trkz a szveg alatt. Pixelben kell megadni.

Az els sor behzsa. Pixelben kell megadni.

Sortvolsg. Szzalkban kell megadni, az egyszeres sortvolsg a 100%.

9.2 Sortrs s mestersges szkz

Sortrs beszrsa. Nem kell lezrni!

&nbsp; : Egy mestersges szkz beszrsa, melyet mr megjelent a bngsz.

HTML programozs az alapoktl

10. A bettpusok mdostsa

A szveg szabvnymrett adhatjuk meg 1-7 -ig. 1 = 8 pt, 2 = 10pt, 3 = 12 pt,

A bettpust a <SPAN> tag s a style paramter segtsgvel is formzhatjuk:

rtkknt megadhatjuk: overline = flhzott

rtkknt megadhatjuk: uppercase = nagybets

A szveg betkzt adhatjuk meg pt-ban.

Kd (Courier New font)

Ugyanaz mint a <DEL>

HTML programozs az alapoktl

12.1 A rendezett lista:

A szmozs stlust llthatjuk be. Megadhat rtkek: 1 = szmokkal

start="XX" : A kezd sorszmot adhatjuk meg vele.

HTML programozs az alapoktl

12.2 Rendezetlen lista:

A szmozs stlust llthatjuk be. Megadhat paramterek: circle = res kr

HTML programozs az alapoktl

12.3 Defincis lista:

HTML programozs az alapoktl

A kp keretnek vastagsgt adhatjuk meg pixelben.

A vzszintes trkzt adhatjuk meg pixelben.

A fggleges trkzt adhatjuk meg pixelben.

A kp vzszintes igaztst adhatjuk meg. left = balra

A kp szlessget adhatjuk meg pixelben.

A kp magassgt adhatjuk meg pixelben.

A kpet style paramterrel is formzhatjuk. Megadhat paramterek:

: Egy mestersges szkz beszrsa, melyet mr megjelent a bngsz.