HTML/CSS knyv

rta: TFeri.hu

HTML-CSS knyv s referencia

Elsz az j verzihoz

Mg 2004-ben, amikor jelen knyvem eredetijt befejeztem, nem gondoltam volna, hogy
ennyire sikeres lett. Sokan s sokszor dicsrtk. Ksznet rte!
Legtbben azt rjk, hogy egy kifejezetten rthet, jl megszerkesztett s sszefogott munka.
Nem mellkes, hogy sokan referenciaknt alkalmazzk, pldul akr az rettsgire
kszlshez, akr vizsgkhoz is. Most, hogy tbbedszerre jrarom a knyvet, remlem, hogy
legalbb ilyen sikeres lesz, mint a rgi verzi.
rmmel hallottam azt is, hogy tananyag lett ez az rs szmos iskolban - kzte szmos
kzp- s fiskola, illetve egyetem.

Jogvdelem

Jelen m teljes vagy rszleges msolata, annak brminem (elektronikus, rsbeli vagy
nyomtatott) terjesztse a szerz elzetes rsbeli engedlye nlkl tilos!
Minden tovbbi vita elkerlse vgett krem, keressen meg a http://tferi.hu/kapcsolat
oldalon lertak alapjn!

Nos, ennyi bevezet utn jjjn a lnyeg: a knyv - kibvtett tartalommal!

(c) TFeri.hu, 2016.

Tartalom
1. fejezet
A HTML logikja

2. fejezet Betk formzsa

3. fejezet Fejezetek s formzsaik

1 / 45
HTML/CSS knyv

rta: TFeri.hu

4. fejezet Kapcsolatok
5. fejezet Listk
6. fejezet kezetek
7. fejezet Tblzatok
8. fejezet Kpek s videk
9. fejezet Keretek (frame-ek)
10. fejezet Egyb formzsok
11. fejezet Body s Meta
12. fejezet Trkpek
13. fejezet Krdvek
14. fejezet Egyb elemek

Mellklet HTML-sznkioszts
Mellklet HTML-karakterek
Mellklet HTML nyelvi kdok
A tanfolyamon feldolgozott HTML elemek rvid ttekintse

<!--: Megjegyzs (Description)

<!DOCTYPE: HTML-dokumentum tpusnak lersa (DOCument TYPE)
A: Kapcsolat - l link (Active link)
ACRONYM: Acronim beszrsa (ACRONYM)
ADDRESS: Postacm - kirsmd (postal ADDRESS)
APPLET: Futtathat elem helye (APPLET)
AREA: Kliens-oldali trkp helynek meghatrozsa (AREA)
B: Flkvr bet (Bold)
BANNER: Cmszalag - nem scrollozhat (Banner)
BASE: A dokumentum bziscmnek meghatrozsa (BASE)
BASEFONT: Alaprtelmezett betkszlet (BASic FONT)
BGSOUND: Httrhang (BackGround SOUND)
BIG: Nagyobb betmret (BIGger font size)
BLINK: Villog betk (BLINK)
BLOCKQUOTE: Szvegblokk (BLOCK QUOTE)
BODY: Az egsz dokumentum trzsrsze - NEM tblzat (BODY)
BR: Sortrs (BReak)
BUTTON: Nyomgomb (BUTTON)
CAPTION: Tablzat cme (CAPTION)
CENTER: Kzpre helyezs (CENTER)
CITE: Idzet kirsa (CITE)
CODE: Programkd kirsmd (CODE)
COL: Oszlop egy tblzatban (COLoumn)

2 / 45
HTML/CSS knyv

rta: TFeri.hu

COLGROUP: Oszlopcsoport (COLoumn's GROUP)

COMMENT: Megjegyzs (COMMENT)
DD: Definci lersa (Definiton Description)
DEL: Trlt szveg (DELeted text)
DFN: Definilt kirsmd (DeFiNition)
DIR: Felsorols-szer lista ksztse (DIRectory)
DIV: Szveg tagolsa (DIV)
DL: Defincis lista (DL)
DT: Defincis lers (Definition Term)
EM: Kiemelt rsmd (EMphasize Text)
EMBED: Dokumentum beszrsa egy msikba (EMBED)
FIELDSET: Mezelem beszrsa (FIELD SET)
FONT: Bet tulajdonsgainak szablyozsa (FONT)
FORM: Krdvek ltrehozsa (FORM)
FRAME: Keret belltsa (FRAME)
FRAMESET: Keretezs indtsa (FRAMESET)
H1: Fejezetcm - a legnagyobb rtk (Heading 1)
H2: Fejezetcm - 2. legnagyobb (Heading 2)
H3: Fejezetcm - 3. legnagyobb (Heading 3)
H4: Fejezetcm - 4. legnagyobb (Heading 4)
H5: Fejezetcm - 5. legnagyobb (Heading 5)
H6: Fejezetcm - legkisebb (Heading 6)
HEAD: Az egsz dokumentum fejlce - NEM tblzat (HEADer)
HR: Vzszintes vonal (Horizontal Rule)
HTML: Az egsz dokumentum kerete (HyperText Markup Language)
I: Dnttt bet (Italic)
IFRAME: Lebeg keretek definilsa (In-line floating FRAMEs)
IMG: Kp vagy vide beszrsa (IMaGe)
INPUT: Beviteli mez rlapokon (INPUT field)
INS: Hozzadott szveg beszrsa (INSert text)
ISINDEX: Jelzi a keresknek, hogy a lap indexelhet (ISINDEX)
KBD: Billentyzetrl bevitt adat (KeyBoarD)
LABEL: Cmke defeinilsa (LABEL)
LEGEND: Megadja a FIELDSET elemt (LEGEND)
LI: Lista elem (List Item)
LINK: Kapcsolat ms dokumentummal (LINK)
LISTING: Elre listzott szveg (LISTING text)
MAP: Trkp grafikus elemekhez (MAP)
MARQUEE: Szveg mozgatsa (scrolling MARQUEE)
MENU: Listk men-szer felsorolsa (MENU)
META: Nem megjelen, de igen fontoselem (META tag)
NOBR: Sortrs letiltsa (NO BReaking)
NOFRAMES: Keretek tiltsakor megjelen adat (NOn-FRAMES version)
NOSCRIPT: Scriptek megjelentsre alkalmatlan bngszk szmra rt rsz
(NOn-SCRIPTing version)
OBJECT: Objektum beszrsa (OBJECT insert)

3 / 45
HTML/CSS knyv

rta: TFeri.hu

OL: Rendezett/sorszmozott lista (Ordered List)

OPTION: Kivlasztsos lista eleme krdveknl (OPTION)
P: Paragrafus/bekezds (Paragraph)
PARAM: Vltozk/paramterek meghatrozsa ms elemekhez (PARAMeters)
PLAINTEXT: Formzatlan szveg (PLAIN TEXT)
PRE : Elre formzott szveg (PREformatted)
Q: Kiemelt szveg (Quality text)
S: Keresztlhzott szveg (Strikethrought)
SAMP: Irodalmi szveg (SAMPle text)
SCRIPT: Ms nyelven rt kdrszlet (script) beszrsa (SCRIPT)
SELECT: Krdsre val kivlasztsi lehetsg krdveknl (SELECT)
SMALL: Kisebb betmret (SMALLer font size)
SPAN: rvnyessgi kr (SPAN)
STRIKE: Keresztlhzott szveg (STRIKEthrought text)
STRONG: Vastagtott szveg (STRONGer text)
STYLE: Stlus definilsa egy lapon bell (STYLE) - Csak a folytatsban szerepel!
SUB: Als index kirs (SUBscript)
SUP: Fels index kirs (SUPerscript)
TABLE: Tblzat (TABLE)
TBODY: Tblzat trzse (Table BODY)
TD: Tblzat adata (Table Data)
TEXTAREA: Hosszabb szveg beviteli mez krdvekben (TEXTAREA)
TFOOT : Tblzat lblce (Table FOOT)
TH: Tblzat fejlce (Table Head)
THEAD: Tblzat fejlce (Table HEAD)
TITLE: Dokumentum cme - NEM tblzat (TITLE)
TR: Tblzat sora (Table Row)
TT: rgpszer kirs (TeleType)
U: Alhzott bet (Underlined)
UL: Nem rendezett lista (Unordered List)
VAR: Vltoznv (VARiable)
WBR: Sortrs engedlyezse letiltott terleten. (WBR)
XMP: Mintaszveg (eXaMPle)

1. fejezet: A HTML logikja

4 / 45
HTML/CSS knyv

rta: TFeri.hu

A HTML egy angol mozaiksz. Eredetiben: HyperText Markup Language (=Hipertext jell
nyelv).
Eredeti verzijt a World Wide Web Consortium Cmk: w3.org adta ki s a hivatalos
szabvnyt ma is ez a szervezet rja tovbb - a gyakorlati technikk alapjn. Ezen knyv a HTML
4.01-es szabvnyt trgyalja, mely a jelenlegi egyik legelterjedtebb a mai interneten. Pontos
URL-je: http://www.w3.org/TR
/html401/ .
A HTML nyelv alapja, mint oly' sok minden informatikai aprsgnak, a htkznapi angol nyelv
kifejezsei. Maga a nyelv "TAG"-ekbl ll. (kiejtse: "teg"!)
Minta:

<EzEgyTag> Ez a kzbls szveg, amire vonatkozik. </EzEgyTag>

Ezek a bizonyos TAG-ek rendkvl sokflk lehetnek. Szerencsre a nyelv alapjai igen
egyszerek. Egy HTML-lap megrs utn egybl megtekinthet brmelyik Internetes
bngszben - akr kapcsolat nlkl is. Weblap szerkesztsre a legegyszerbb program egy
Jegyzettmb. Fontos, hogy a ksz file-nak HTM vagy HTML kiterjesztst adjunk s a nvben
legynk meglehetsen knyesek. Ha grafikus krnyezethez szoktunk, akkor ltalban hosszabb
s tbbtag file-nevekben szoktunk menteni. Az internet erre meglehetsen knyes. Sajt
rdeknkben s azrt is, hogy a file minden fle-fajta krnyezetben jl megtekinthet legyen az
oldal, egyszerbb, tagolatlan s kezet nlkli neveket hasznljunk. A knyvben vgig ilyen
file-okat hasznlunk!
Most nzzk meg a legegyszerbb weblapot!
Egyszer weblap: (minta1.html)

<HTML> Szia, itt vagyok! </HTML>

A dolog lnyege, hogy nem kell tagolni a szveget, nem kell semmi klns formtumos trkkt
ismerni, csak a ksz anyagot megnzni s mr mkdik is a weblap. Radsul egyszerbb
lapok esetn ez minden egyes gpen ugyangy nz ki. Nem szabad elfelejteni, hogy egy
weblapot mindig <HTML> s </HTML> tagek kz kell tenni. Ami viszont fontos, hogy a
HTML-nyelvben lnyegtelen a kisbet-nagybet klnbsge. Teht a
<HTML>
,
<html>
,
<Html>
s
<HtmL>
ugyanazt jelentik!
Problmt okozhat, hogy a szveget nem tl egyszer formzni. Pldul prbljuk ki a
kvetkez file-t: (minta2.html)

<HTML>

5 / 45
HTML/CSS knyv

rta: TFeri.hu

Egyes sor.
Kettes sor.
Harmas sor.
</HTML>
Ekkor a kvetkez fog megjelenni egy bngsz ablakban:

Ahhoz, hogy egy szveg az eredeti formzs szerint nzzen ki a<PRE> tagot kell hasznlni.
(PRE=Preformatted - elre formzott)
Az elz file helyesen gy nz ki: (minta3.html)

Ha nem vagyunk hajlandak szveg formzsval szrakozni, akkor egyszerbb megolds a

formzst a bngszre bzni. Minden sor vgn egyszeren egy<BR> taget kell tenni,
melynek hatsra a bngsz automatikusan j sort kezd.
Vigyzat!
Ennek a tagnek kivtelesen nincsen zrtagje! Teht a helyes - s egyszer - forma a
kvetkez:
(minta4.html )

<HTML><PRE>Egyes sor.<BR>Kettes sor.<BR>Harmas sor.</PRE></HTML>

Termszetesen az egyes sorokat kln bekezdsben is rhatjuk, de gy egyetlen sorban is

elrjk a megfelel hatst.

2. fejezet: Betk formzsa

6 / 45
HTML/CSS knyv

rta: TFeri.hu

A dolog igen egyszer, hiszen lehet egy bet flkvr (Bold = B), alhzott (Underlined = U),
illetve dnttt (Italic
= I)
A megfelel tagek ezek szerint:<B>Bold</B>,<U>Underlined</U>, illetve<I>Italic</I>.
Az elbbi parancsok persze kombinlhatk is: <B><I>Flkvr Dlt </I></B>
Egyetlen dologra kell vigyzni csupn: A sorrendet mindig be kell tartani. Gyakorlatban ez azt
jelenti, hogy mindig a legutoljra kinyitott tag zrtagjt kell lerni. Nzzk a kvetkez -
termszetesen betformzsi - pldt: (minta5.html)

<HTML>
<B>Vastag.
<I>Radsul alhzott</I>
Megint simn vastag</B>
</HTML>

me a file, ahogy az sszetartoz tagek lthatak.

Kicsit pontosabban fogalmazva: ez olyan, mint egy csom, egymsba csomagolt doboz.
Mivel minden dobozt be akarunk zrni, ezrt nyilvnvalan a legkisebbel kell kezdennk, majd
csak utna haladhatunk fokozatosan a nagyobbak fel. Persze, egy nagyobb dobozban lehet
tbb, kisebb doboz is, de itt is rvnyes, hogy elbb a kicsiket kell lezrni s csak utna a
nagyot.

1. feladat: rjon olyan fjlt, amelyben alhzott s dnttt szveg is van! ( fel1.html )

Ennl eggyel bonyolultabb a betk mretnek vltoztatsa. Termszetesen itt is lehetsges a

szvegszerkesztknl megszokott az abszolt mretezs, de szerencssebb hasznlni a relatv

7 / 45
HTML/CSS knyv

rta: TFeri.hu

mretezst, ami egy kzepes belltshoz kpesti eltrst tesz lehetv. A kzepes mret a
0-s: ( minta6.html )

<HTML>
<FONT SIZE=0> Alapmret </FONT>
</HTML>

A skla -7-tl +7-ig terjedhet.

2. feladat: rjon olyan fjlt, amelyben a betmretek fokozatosan nvekednek! ( fel2.html )

Br nem szerencss, de a betk tpusa is vltoztathat. Ehhez szintn a <FONT> tagre van
szksg, de ezttal a paramtere a
SIZE
helyett a
FACE
-re lesz szksg, de szeretnm kihangslyozni, hogy ez nem minden esetben szerencss,
mivel lehet, hogy a honlap ksztjnek gpen ppen megvan az a bettpus, de a leend
felhasznln nincsen! Mintaplda legyen a kvetkez:
(
minta7.html
)

<HTML>
<font face="Arial">Arial</font>
<font face="Times Nem Roman CE">Times New Roman CE</font>
</HTML>

Persze, ha valamelyik bettpus hinyzik, akkor az alaprtelmezett bettpust kapjuk helyette.

8 / 45
HTML/CSS knyv

rta: TFeri.hu

Ha mr a betk formzsnl tartunk, akkor nem rt tisztzni, hogyan lehet az eddig

meglehetsen egyhang dokumentumainkat kisznezni. Els krben a betknek adjunk j sznt.
Alaprtelmezsben minden weblapnak vannak beptett sznei, de ezeket nagyon egyszer
fellbrlni! A sznezshez a COLOR paramtert kell hasznlni! A sznek nevei a legegyszerbb
angol nevek lehetnek, pldul: black=fekete, green=zld, blue=kk, gray=szrke, yellow=sr
ga , purple
=bord
,...
Persze a fenti paramtereket lehet keverve is hasznlni, radsul a sorrend is lnyegtelen!
Nzzk a kvetkez pldt:

Ez igen! A fenti plda egy igen rvid kddal hozhat ltre: ( minta8.html )

<HTML>
<font face="Arial" size="+3" color="yellow">Ez igen!</font>
</HTML>

Teht a szveg stlusa "Arial" mrete a norml- (szabvnyos-)hoz kpest 3-mal nagyobb s
zld szn!
Ha a hagyomnyos sznek kevsnek bizonyulnak, akkor lehetsgnk van mestersgesen
kevert sznek ellltsra is. A mdszer lnyege a hrom alapszn (R=red; G=green; B=blue)
keverse. Brmelyik szn erssge 0-tl 255-ig llthat, sajnos hexadecimlis kddal. (00-tl
FF-ig) A kdsor elejre egy "#" jelet kell rakni. Nhny hagyomnyos s rdekes szn kdja a
kvetkez:

black = "#000000" = fekete green = "#00FF00" = zld

b

gray = "#C0C0C0"= szrke red = "#FF0000" = vrs

yell

Javaslom, hogy btran ksrletezzen mindenki! Mindezek ellenre a knyv referencijban tal
lhat egy sokkal rszletesebb sznkioszts!

3. fejezet: Fejezetek s formzsaik

9 / 45
HTML/CSS knyv

rta: TFeri.hu

A bngszkben vannak eleve beptett stlusok, amit rdemes ki is hasznlni. Ezek a

cmformtumok, pontosabban - jobb magyar kifejezs hjn - a "Heading"parancsok. 6 eleve
beptett formtum van, sorszm szerint 1-tl 6-ig. Az 1-es a legersebb bekezds-formtum,
mg a 6-os a legkisebb. Apr megjegyzs: a gyakorlatban 2-3 szint fejezetcmnl csak ritkn
alkalmazunk tbbet!
Nzzk az albbi (bal oldali) plda megjelenst (a jobb oldalon). ( minta9.html )

<HTML>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</HTML>

- Ha egy cm tl hosszra sikeredik, de semmikppen nem szeretnnk, ha megtrn a

bngsz, akkor rdemes hasznlni a NOWRAP paramtert is,
pl.: <H1 NOWRAP> Ezt nem szabad megtrni! </H1>

10 / 45
HTML/CSS knyv

rta: TFeri.hu

- Klnleges lehetsg a <BANNER> is, mivel ez egy soha nem scrollozhat cmszalagot
takar! </BANNER> Ezzel a tulajdonsggal nem
szabad visszalni, mert kisebb felbonts monitorokon lehet, hogy nem marad scrollozhat
rsz! Csak Netscape-ben!
- Msik lehetsg a <DIV> hasznlata, amely klnbz rszekre (fejezetekre,
bekezdsekre) tagolja a szveget. </DIV> Legfontosabb
paramterei: ALIGN=
"center/left/right"
- igazts;
DATAFORMATAS="text/html"
- adatformtum sima szveg vagy html-kd;
TITLE="mit rjon ki"
az egr fl rkezsekor.

- Az automatikus sortrdels letilthat a <NOBR> s a </NOBR> parancsokkal. Ez

feloldhat menet kzben a
<WBR>
taggel, de ennek nincsen zrtagje.

- Fontos megjegyzs, hogy soha ne egyetlen kpernymretre optimalizljuk a megjelenst

(pl.: 1024*768), mivel mindig sokfle monitor van egyszerre a piacon!

Ezeket az eleve beptett mintkat persze mdosthatjuk is, de ez csak pr fejezettel ksbb
kerl sorra!
Ha mr egy rsznek cmet adtunk, akkor rdemes megtlteni tartalommal is! Egy-egy kln
gondolatot rdemes egy-egy kln bekezdsbe rni. j sort mr tudunk kezdeni a <BR> tag
segtsgvel, de ez valamivel tbb, mint egy egyszer j sor, mivel itt egsz bekezdseket lehet
rni, radsul rendezni is lehet! Minden hagyomnyos szvegszerkeszt s tblzatkezel
programban megszokhattuk, hogy lehet balra (left), jobbra (right) s kzpre (center) rendezni.
Az internet eleve a legklnflbb tpus gpekbe van bektve, ezrt igen gyakran elfordulhat,
hogy a legklnflbb kpernyfelbonts monitorokon jelenik meg az a - szmunkra kivlan
elrendezett - szveg, amit mi meg szeretnnk jelenteni. Ekkor lesz rtelme, hogy
bekezdsekben gondolkozzunk, mivel minden egyes paragrafust msknt tudunk elrendezni. A
paragrafust keretbe zr tag a
<P>
s a
</P>
. Itt az j sorral ellenttben
van
lezrjel is! Automatikusan minden paragrafus balra zrt, de az
ALIGN="hogyan"
paramter segtsgvel lehet msflekppen is.

Ez pldul balra van zrva. Alaprtelmezs.

11 / 45
HTML/CSS knyv

rta: TFeri.hu

Kdolsa:
<P ALIGN="left"> duma </P>
Ez pldul kzpre van rendezve (zrva).
Kdolsa:
<P ALIGN="center"> centrum
Ez pldul
</P> jobbra van zrva.
Kdolsa:
<P ALIGN="right"> jobb </P>

Br az internettl sokig idegen volt, de megjelent a hasbszer elrendezs. (ALIGN="justify")

Ezt is lehet alkalmazni, de ettl sajnos relavv lassabb lehet a weblap megjelense egy kisebb
szmtsi kpessg lapon. Az egsz file (s kpe) egybefggen a kvetkez lesz:
(
minta10.html
)

<HTML>
<p align="left"> bal </p>
<p align="center"> centrum </p>
<p align="right"> jobb </p>
<p align="justify"> hasbosan </P>
</HTML>

Szintn javasolt nha napjn alkalmazni a <nobr> s a </nobr> tag-eket, melyek segtsgvel
megakadlyozhatjuk, hogy egy fontos szveg (pldul nv) belsejt megtrje a bngsz.

12 / 45
HTML/CSS knyv

rta: TFeri.hu

Szintn lehet alkalmazni a vzszintes vonalakat. A legegyszerbb <HR> tagnek nincsen

zreleme, mivel csak egy szimpla vzszintes vonalat hz. Paramterei lehetnek tbbek kztt:

- COLOR="sznkd". (vonal szne) - Csak az Explorerben! Egyes alternatv bngszk mr

hasznljk.
- ALIGN="left/center/right" (merre rendezze a vonalat)
- NOSHADE (ne legyen 3-dimenzis rnyka a vonalnak)
- SIZE=n (milyen vastag legyen a vonal - pixelben; alaprtelmezs: 1)
- TITLE="kirs" (mit rjon ki a bngsz, amikor a vonal fl kerl az egr)
- WIDTH="n" (milyen hossz legyen a vonal szzalkban vagy pixelben. Alaprtelmezs:
100%)

Termszetesen vannak mg betformzsok, de az legyen kicsit ksbb!

4. fejezet: Kapcsolatok

Az egsz internet lnyege a kapcsolatok, avagy a hiperlinkek meglte. Ez a gyakorlatban azt

jelenti, hogy egy sima egy objektumhoz (sima szveg, kp vagy rszlete, nyomgomb, stb)
hozzrendelhetnk az egsz internetrl egy msik objektumot. Ha pldul a sajt honlapomra
akarunk rni egy hivatkozst, akkor a kvetkezt kell berni a weblap megfelel helyre: ( minta
11.html
)

<A HREF="http://www.tferi.hu/"> Hivatkozs </A>

Megjelenskor ez a "Hivatkozs" nev szveg ltalban alhzva jelenik meg s a mr jl

ismert Windows-cursor

talakul mutat kzz:

Teht, mint a pldn is lthat, az<A> tag hivatkozst jelent. Ha simn egy egsz webkiktre

13 / 45
HTML/CSS knyv

rta: TFeri.hu

szeretnnk hivatkozni, mint a fenti pldban is, egyszeren be kell rni a TELJES nevt.
(ltalban mkdik http s www nlkl is, de lehet, hogy nmileg lassabban! Clszer minden
esetben a teljes verzit berni, mivel gy szinte biztosan j lesz.)
Nmileg mdosul a helyzet, ha a webkikt bels felptst is ismerve nem az egsz iskolra
szeretnnk hivatkozni, hanem pldul a "Szmtstechnika kezdknek" knyv kezdetre. Ekkor
a helyes hivatkozs a kvetkez lesz: ( minta12.html )

<A HREF="http://www.tferi.hu/konyv5/tftanul.html"> Knyv legeleje </A>

Ha azon az adott knyvtron bell szeretnnk hivatkozni, ahol a kiindulsi file tallhat, akkor
elegend a file nevt megadni. Pldul, ha az albbi minta13.html-bl szeretnnk hivatkozni az
elz fejezet vgn lv mint
a10.html
-re, akkor a kvetkez kdot kell hasznlni:
(
minta13.html
)

<A HREF="minta10.html"> Azonos knyvtrban </A>

Egy adott (nagymret) file-on bell is tudunk ugrani, de itt picivel bonyolultabb a dolog, ugyanis
a file-on bell kell ltrehozni egy "cmkt". Ez tulajdonkppen egy lthatatlan knyvjelz, amit
brmikor fel tudunk lapozni. Kdja: <A
NAME="knyvjelznv"></A>
Nzznk egy pldt:
(
minta14.html
)

<HTML>
<a name="teteje">Ez a file teteje.</a>
<BR>Itt szveg van.
<BR>Itt is.
<BR>Meg itt is.
<a href="ftp://ftp.microsoft.com/">Microsoft FTP-szerver.</a>
<a href="mailto:hivatalos@tferi.hu">E-mail a szerznek.</a>
<A href="#teteje">Itt lehet a tetejre ugrani.</A>
<A href="http://www.tferi.hu/konyv5/html/minta14.html#teteje">Ez picit bonyolultabb!</A>
</HTML>

Termszetesen nem csak http- szabvny szerinti file-ra utalhatunk, hanem ftp-re, illetve E-mail-r
e is. Ezen kvl ha ismerjk az adott szerver DOS-struktra szerinti felptst, akkor
hivatkozhatunk r a j reg DOS szerint is, mint a

14 / 45
HTML/CSS knyv

rta: TFeri.hu

CD
-parancsnl. Persze mg van szmos kisebb szabvny is (gopher, news, ...), de ezek mostanra
mr szinte teljesen kikoptak a htkznapi hasznlatbl.

3. feladat: rjon egy olyan fjlt, amelyben link van a szerz honlapjra (tferi.hu), a Microsoft-ra
(microsoft.com) s a Netscape-re (netscape.com)! ( fel3.html )
4. feladat: rjon egy olyan fjlt, melyben hivatkozik a Netscape FTP-re, valamint a szerznek
kld E-mailt (hivatalos@tferi.hu)! ( fel4.html )

5. fejezet: Listk

Az Internet kezdetekor szveges volt szinte minden hozzfrs, ppen ezrt az ttekinthetsg
kedvrt rendkvli fontossggal br mindenfle lista s felsorols.
A legegyszerbb a rendezs nlkli lista. (Unordered List =UL) Ennek minden egyes eleme a
listatag. ( List Item =LI) Ennek
a tag-nek nincsen zrrsze.
Lssuk a kvetkez pldt: ( minta15.html )

<HTML>
<ul>
<li> Els elem
<li> Msodik elem
<li> Harmadik elem
</ul>
</HTML>

15 / 45
HTML/CSS knyv

rta: TFeri.hu

Termszetesen
)az
(minta16.html
<ol>
</HTML>
</ol>
<li>
<ul>
Els
Msodik
Harmadik
<HTML>
taget
elem<ol>-re,
elem
elem
lehet rendezett
akkor a kvetkez
is a lista (Ordered List =OL). Ha az elbbi file-ban kicserljk
lesz a lista!

Type
List
</dl> =2.
Rendezett
Ugyanezen
elem
Defincis11.-fogalom
a
IiA
magyarzatukat
Description)
7.html
<dt>1.
<dl>
<dd>az
<dt>2.
<dd>a
</HTML>
=DL).
is,
<HTML>
fogalom
ami -listt
-lista
Az
afogalom
aparamterek
aalistaelemek
listaelemek
listaelemek
egyes
kezdrtket
esetn
is kszthetnk,
magyarzata
magyarzata
elemeket
aznagy
kicsi
megjelenhetnek
kisbetk.
szmok.
nagybetk
<LI>
adja
rmai
rmai
s
egyik
ahol
meg!
fogalmakat<DT>-vel
szmok.
szmok.
egyszerbb
paramtere
az <OL>fogalmakat
megszabja
elemnl
jelljk,
is,
alehet
radsul
lista
(Definition
megmagyarzni.
tpust.
<DD>-vel.
lehet
Term)
egy START=n
(Definition
mg(Definition
( minta1)

16 / 45
HTML/CSS knyv

rta: TFeri.hu

Termszetesen
e-ok), de ez nemezeket
egy ilyen
a mintkat
alapfoknmi
tanfolyam
kiegszt tudssal kicsit t is varilhatjuk, (lsd CSS-fil
dolga!
6. fejezet: kezetek

Nmi kiegszts az eredeti verzihoz: amikor a knyv eredetijt rtam, akkor ez a fejezet
mg kiemelt fontossg volt. Azta ez jcskn cskkent, ugyanis a kdlapok (ksbb lesz sz
rluk) olyan mrtkben elterjedtek, hogy gyakorlatilag megkerlhetetlenek. risi elnyk:
immron mr nem kell szenvedni az egyes kezetes karakterek kdjaival. gy ezt a fejezetet
inkbb csak, mit rdekessget ajnlom!

Az kezetek nem mindig s knnyedn hasznlhatak a HTML-nyelvben. Eleve a dolog azrt

problms, mert rengeteg nemzeti nyelv van a vilgon, viszont az internet alapvet nyelve a
meglehetsen kicsi karakterkszlettel rendelkez angol. Az egyik lehetsges megolds az,
hogy mindenki csak a sajt nemzeti nyelvn kszlt honlapokat lthatja. Nyilvnval, hogy ez
mereven ellentmond a web nemzetkzisgnek. Radsul eleve lehetetlenn teszi a
nyelvtanulst.

Msik verzi, hogy eleve minden nemzeti nyelv sszes karaktert beptjk a bngszk
sszes verzijba, de ezzel a kprsos keleti nyelvek (knai, japn, koreai, stb.) hatalmas
mennyisg jelkszlete miatt a mret drasztikus nvekedst rjk el. Lehetsges kzpt,
hogy minden alapvet (angol) karakternek van egy egyszer (1 byte-os) kdja (aki ismeri: ez az
ASCII kd). Gyakorlatilag ez a sima, egyszer "ekezet ne'lku:li i'ra'smo'd". Ezt persze rdemes
repl kezetekkel kombinlni, mint az elz pldban. Ha ennl tbbre vgyunk, akkor

17 / 45
HTML/CSS knyv

rta: TFeri.hu

trkkzni kell. Az kezetes betk viszonylag egyszerek, mivel az alapvet (angol) karakter
kr az &xacute; kombinci kell rni, ahol az "x" az adott karaktert jelli. De itt van egy tblzat
is - a jobb rthetsg kedvrt!

= &Aacute; = &Eacute; = &Iacute; = &Oacute;

= &aacute; = &eacute; = &iacute; = &oacute;

Mint a fentiekbl is lthat itt kivtelesen FONTOS a kisbet-nagybet klnbsge!

Ha rvid dupla kezet kell, akkor a &xuml; kombincit kell alkalmazni, mg az karakterhez a
&otilde;
kombinci kell vagy az

-hz az
&ucirc;

= &Ouml; = &Uuml; = &Otilde; = &Ucirc;

= &ouml; = &uuml; = &otilde; = &ucirc;

A legjobb jindulat ellenre is elfordulhat, hogy nem minden karakter jelenik meg pontosan,
mivel egyes Windows betkszletekben nem felttlenl tallhatk meg (az US-bl nzve)
igencsak egzotikus magyar kezetes karakterek. Termszetesen vannak mg specilis
karakterek, pldul a "<" s a ">" jeleket helyettest kdok is.

< = &lt; (less than) > = &gt; (greater than) = &nbsp; (space) = &cent; (cent-jel)

= &yen; (yen-jel) & = &amp; (angol s-jel) = &copy; (copyright) = &reg; (registered)

Ha valakinek eddig gondjai tmadtak az kezetes karakterekkel, akkor remlem, hogy ez a pr

mondat megoldja! 5. feladat: rja le a kvetkez kes magyar kifejezseket - HTML kddal: hos
szszr cipfz
, illetve
rvztr tkrfrgp
.
Mg egy apr megjegyzs, ami ksbb nyer fontossgot. Az elz mdszerrel gyakorlatilag

18 / 45
HTML/CSS knyv

rta: TFeri.hu

brmelyik nyelv karaktert le tudjuk rni, ha az bele van ptve a HTML-szabvnyba. Ha

nincsen, akkor a <HTML> tag utn kzvetlenl be kell gpelnnk a kvetkez rszletet -
PONTOSAN!.( minta18.html ) Magyarzat: ez a magyar nyelv betkszletet jelli, gy a
gpels kzben nem kell fiyelnnk az kezetes karakterekre.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>

Eme segtsggel mr nyugodtan gpelhetnk, mint az a 18. mintbl is lthat! A pontos

jelentsrl majd (sokkal) ksbb, mivel most fontosabb az alapok folytatsa.

5. feladat: Gpelje be a fenti kt szveget! ( fel5.html )

7. fejezet: Tblzatok

Nos, elrtk a HTML nyelv egyik legjobban megjelenthet objektumt: a tblzatokat. Maga a
tblzat tagje igen egyszer: <TABLE> s </TABLE>. Ezen bell viszont sok minden lehet.
Minden egyes sort <TR> s </TR> kz
kell zrni, mg minden egyes cella tartalmt
<TD>
s
</TD>
kz. Ha semmi klns bonyoltst nem szeretnnk, akkor mr el is kszthetjk az els
tblzatot!
(
minta19.html
)

<HTML>
<table>
<tr>
<td>1. sor 1. cella</td>

19 / 45
HTML/CSS knyv

rta: TFeri.hu

<td>1. sor 2. cella</td>

</tr>
<tr>
<td>2. sor 1. cella</td>
<td>2. sor 2. cella</td>
</tr>
<tr>
<td>3. sor 1. cella</td>
<td>3. sor 2. cella</td>
</tr>
</table>
</HTML> me az eredmny:

Ahhoz, hogy kicsit szebb tegyk a tblzatot, rdemes <TABLE> tagbe klnbz
paramtereket belerni.

- A legegyszerbb a tblzat igaztsa: <TABLE ALIGN="left"> Ez az alapeset. </TABLE>

Persze lehet kzpre (
center
), illetve jobbra (
right
) is igaztani.

- A msodik lehetsg a keret vastagsga. <TABLE BORDER=0> Ez az alapeset. </TABL

20 / 45
HTML/CSS knyv

rta: TFeri.hu

E> A
vastagsg kppontokban mrend s egsz szm lehet. Szoksos rtk: 1 s 5 kztt.

- A harmadik lehetsg ltszlag felesleges, mivel rdemes az oszlopokat megszmolni s

ezt a tblzat fejlcbe berni. <TABLE COLS=3> 3 oszlop lesz!</TABLE>
- Negyedszerre rdemes figyelembe venni, hogy a tblzatot lehet (s rdemes is)
sznezni. <TABLE BGCOLOR="red"> Ez a hagyomnyos sznekkel vagy kdokkal
trtnik </TABLE>.
- Lehet egy kp is a httr. Lsd: &lt;IMG SRC="kpurl"&gt;
- Persze nem csak a tblzat httert, de a kereteket is lehet sznezni! <TABLE
BORDERCOLOR="yellow">
gy zld lesz a keret szne.
</TABLE>
. Sajt tapasztalat, hogy a sznekkel mrtkkel kell bnni!

- Az egyes cellkat nem kell sszezsfolnunk, mivel a cellkat ki lehet blelni. <TABLE
CELLPADDING=2>
. Ez a cellahatr s az adat tvolsgt mutatja meg. Alapeset a 0.
</TABLE>
.

- Persze az egyes cellkat sem kell mindig sszezsfolni, gy a CELLSPACING

hasznlatval nagyobb lehet a cellahatrok kzti tvolsg. Alapeset: 0.

- Az egyik legfontosabb lehetsg maradt a legvgre: a tblzatnak nem kell kitltenie az

ablak egszt, hanem a <TABLE WIDTH="50%"> paramter segtsgvel megadhat,
hogy hny szzalkot tltsn ki. </TAB
LE>
Ha csak simn egy szm szerepel a
WIDTH
utn, akkor szzalk helyett kppont lesz az rtelmezs.

A fenti paramterek persze kombinlhatak! A kvetkez tblzat pldul jobbra igaztva, 2-es
keretvastagsggal, 2 oszloppal szrke httrsznnel s piros keretekkel kszlt a
bngszablak 60%-ra. A cellk blse 2, akrcsak a cellk kzti tvolsg is. ( minta20.html )

Paramter angolul Magyarul Lehetsges rtkek

ALIGN igazts left/right/center
BORDER keretvastagsg 0, 1, 2, 3, ...
COLS oszlopok szma 1, 2, 3, 4, ...
BACKGROUND httrszn szn neve vagy kdja, esetleg kp URL-je
BORDERCOLOR keretszn szn neve vagy kdja
WIDTH tblzat szlessge pixelszm vagy %

21 / 45
HTML/CSS knyv

rta: TFeri.hu

<html>
<table ALIGN=RIGHT BORDER=2 CELLSPACING=2 CELLPADDING=2
COLS=3 WIDTH="60%" BGCOLOR="#FFFF00" BORDERCOLOR="red">
<tr>
<td><b>Param&eacute;ter angolul</b></td>
<td><b>Magyarul</b></td>
<td><b>Lehets&eacute;ges &eacute;rt&eacute;kek</b></td>
</tr>
<tr>
<td>ALIGN</td>
<td>igaz&iacute;t&aacute;s</td>
<td>left/right/center</td>
</tr>
<tr>
<td>BORDER</td>
<td>keretvastags&aacute;g</td>
<td>0, 1, 2, 3, ...</td>
</tr>
<tr>
<td>COLS</td>
<td>oszlopok sz&aacute;ma</td>
<td>1, 2, 3, 4, ...</td>
</tr>
<tr>
<td>BACKGROUND</td>
<td>h&aacute;tt&eacute;rsz&iacute;n</td>
<td>sz&iacute;n neve vagy k&oacute;dja, esetleg k&eacute;p URL-je</td>
</tr>
<tr>
<td>BORDERCOLOR</td>
<td>keretsz&iacute;n</td>
<td>sz&iacute;n neve vagy k&oacute;dja</td>
</tr>
<tr>
<td>WIDTH</td>
<td>t&aacute;bl&aacute;zat sz&eacute;less&eacute;ge</td>
<td>pixelsz&aacute;m vagy %</td>
</tr>
</table>
</html>

22 / 45
HTML/CSS knyv

rta: TFeri.hu

6. feladat: Ksztsen nhny nyomtatott magyar napilaprl egy tblzatot, mely tartalmazza a
lap cmt s a webcmt! A tblzatnek legyen kerete! ( fel6.html )

Tovbbi lehetsgek

- Egy tblzatnak cmet is adhatunk. Ezt a <TABLE> szimblum utn kell rni a kvetkez
minta szerint: ( minta21.html )
Szablyozhat, hogy hov kerljn a cm
<
CAPTION ALIGN="TOP">
fellre kerl - alaprtelmezs.
</CAPTION>
.

- Tovbbi lehetsgek: bottom = alulra s kzpre, center = kzpre, left = balra, right =
jobbra.
- Fggleges helyzetet szablyozhatjuk a VALIGN paramterrel. Minta: <CAPTION
VALIGN="TOP">
- Alaprtelmezs = A tblzat cme a tblzat fl kerl. Msik lehetsges rtk:
BOTTOM
= a cm alulra kerl.

- A kt paramter persze egytt is hasznlhat!

<HTML>
<table border="2">
<caption> Ez a cm </caption>
<tr><td> Ez a tblzat eleme</td></tr>
</table>
</HTML>

23 / 45
HTML/CSS knyv

rta: TFeri.hu

- Szksg esetn kt vagy tbb cellt is sszevonhatunk, mint ez a kvetkez pldban

lthat! ( minta22.html ) A cellafeszts (colspan) tipikus hasznlata lthat itt:

<HTML>
<table border="2" cols=4>
<tr>
<td> 1. sor 1. elem </td>
<td> 1. sor 2. elem </td>
<td> 1. sor 3. elem </td>
<td> 1. sor 4. elem </td>
</tr>
<tr>
<td colspan="2"> 2. sor 1.-2. elem </td>
<td> 2. sor 3. elem </td>
<td> 2. sor 4. elem </td>
</tr>
</table>
</HTML>

Fgglegesen ugyanez: ROWSPAN .

- Minden egyes cella tartalmt darabonknt is igazthatjuk <TD ALIGN="LEFT"> Balra

rendez - alaprtemezs
</TD>
Lehet kzpre (
center
) vagy jobbra (
right
) is rendezni.

- Termszetesen egyenknt is lehetsgnk van a cellk szlessgnek lltsra is az

24 / 45
HTML/CSS knyv

rta: TFeri.hu

egsz tblzat szlessgre alkalmazott WIDTH paramterrel.

- Minden egyes cellhoz lehet rendelni egy cmet is, mely akkor jelenik meg, ha az illet
cella fl kerl az egr. <TD TITLE="cim"> elem tartalma </TD>.
- Hossz szvegeknl elfordulhat, hogy egy sornl tbb is lehet 1-1 cella tartalma. Ilyenkor
jl jhet a <TD VALIGN="CENTER"> paramter </TD>, ahol valign = vertical align =
fggleges rendezs. Lehetsges rtkek:
center
= kzp;
top
= fent;
bottom
= alul;
baseline
= a betk szintjnek aljhoz igaztja az objektumot.

- Ennek nmileg ellentmond, hogy ha semmikppen sem akarjuk, hogy egy cellban a
szveget megtrje, akkor hasznlhatjuk a NOWRAP=TRUE paramtert a TD tag-ben.
Ekkor a cellatartalom nem kerl trsre. Alaprtelmezs:
NOWRAP=FALSE
.
(azaz a cellatartalom trhet.)
- Cellnknt is lehetsg nylik httrszn (BGCOLOR), illetve httrgrafika (BACKGROU
ND )
definilsra, azrt csak vatosan a dszekkel...

- Kln lehetsgnk van <TH> tblzat fejlcnek - table heat </TH> s<TFOOT>
tblzat lblcnek - table foot
</TFOOT>
definilsra is, br ezt a nem-Microsoft bngszk nem tudjk igazn megjelenteni.

- rtelemszeren ltezik a tblzatnak a trzse is. Ez a <TBODY> s a </TBODY> kz

kerlhet.

- Ha egy tblzatot 3-dimenzs mdban (tbbfajta keretsznnel) szeretnnk ltni, akkor

erre is ad lehetsget a HTML nyelv jabb defincija, de csak a <TABLE> tagben. Ilyen
lehetsg a B
ORDERCOLORLIGHT
s a
BORDERCOLORDARK
, amint ez a kvetkez pldban is lthat:
(
minta23.html
)

<HTML>

25 / 45
HTML/CSS knyv

rta: TFeri.hu

<table border="4" cols="4" bordercolor="red" bordercolorlight="gray" bordercolordark="green">

... A tbbi lnyegben ugyanaz, mint az elz file-ban.

Ezek utn mr btran neki lehet llni tblzatok formzsnak s kitltsnek!

8. fejezet: Kpek s videk

Valamireval weblap semmit sem r kpek s ltvnyosabbnl ltvnyosabb animcik,

esetleg videk nlkl. A kp beszrsa is ugyanolyan egyszer, mint az eddigi legtbb
parancs:<IMG SRC="kpnv.kit">, ahol IMG = image = kp/ltvny; SRC = source = forrs.
Zrelem nincs, akr a <BR> tagnl. Ha a forrsfile azonos
knyvtrban van a weblappal, akkor simn be lehet rni a file nevt. Ha az adott weblap
krnyezetbl kell vennnk egy forrsfile-t, akkor a jl ismert DOS-struktra szerint utalhatunk
r; ellenben ha teljes hivatkozs kell URL-lel, akkor a
hiperhivatkozsoknl megismert
mdszert kell alkalmaznunk.

- Tmogatott formtumok - a W3.org szabvnygyi szervezet hivatalos forrsa szerint: .avi

26 / 45
HTML/CSS knyv

rta: TFeri.hu

Audio-Visual Interleaved (
AVI
)
.bmp Windows Bitmap (BMP)
.emf Windows Enhanced Metafile (EMF)
.gif Graphics Interchange Format (GIF)
.jpg, .jpeg Joint Photographic Experts Group (JPEG)
.mov Apple QuickTime Movie (MOV)
.mpg, .mpeg Motion Picture Experts Group (MPEG)
.png Portable Network Graphics (PNG)
.wmf Windows Metafile (WMF)
.xbm X Bitmap (XBM)
- A kpet kvet szveg helyzett az ALIGN paramter rendezi. rtkei: Absbottom
(=abszolt alja),
Absmiddle
(=abszolt kzp),
Baseline
(=alapvonal),
Bottom
(=alja),
Left
(=balra),
Middle
(=kzpre),
Right
(=jobbra),
Texttop
(=szveg kzepre), valamint
Top
(=tetejre).

- Hasznos lehet, ha a kp(ek) miatt egy tnylegesen res sort behzunk. Ilyen esetekben
rdemes hasznlni a jl ismert <BR CLEAR=ALL> tag-et, mely utn a szveg csak a kp
alatt folytatdik.
- Ha tl nagy a kp, akkor rdemes a letlts eltt egy sima helyettest szveget kiiratni az
ALT="text" paramterrel, ahol rtelemszeren a text helyett kell berni a szveget.
- Termszetesen meg lehet adni a kp keretnek vastagsgt is a szoksos BORDER
paramterrel - pixelben megadott egsz szm.

- rdemes megadni a kp szlessgt (WIDTH), valamint magassgt (HEIGHT) - persze

szintn kppontban, hogy a kp letltstl fggetlenl a bngsz mr tudja rendezni az
oldalt, de ezt a prost lehet hasznlni a kp tmretezshez is!

- Nha jl jhet egy kis helyet hagyni a grafikus elem alatt s felett (VSPACE), illetve balra
s jobbra. ( HS
PACE

27 / 45
HTML/CSS knyv

rta: TFeri.hu

).

- Gyakori megolds, hogy a kivl minsg (s ezrt lassan letltd) kp helyett elszr
egy gyenge felbonts, de mg ppen, hogy ltszat "piszkozatot" lknek ki a weblapra. A
LOWSRC
paramter mr csak azrt is hasznos, mert gy a nem kvnt kp teljes letltst nem kell
megvrni. Termszetesen itt is meg kell adni a teljes forrst.

Egy teljes kp letltst lehet ltni a kvetkez file-ban: ( minta24.html )

<HTML>
<img src="minta23.gif" width="444" height="270" alt="helyette" align="absmiddle" border="2">
</HTML>

Betlthet file-ok az Explorerbe s a Firefox-ba egyarnt: GIF, JPG, JPEG s PNG. Ha sima
animcis G
IF
-eket szeretnnk betlteni, akkor ez semmi gondot sem jelent. Pldul a bal oldalt lthat
"kukac" is gy forog. Ellenben a videk mr tbb gondot okozhatnak. Ilyenkor a kezdskor a
forrsfile megadsnl
SRC
helyett
DYNSRC
-t kell hasznlni. (
DYNSCR
= Dynamic Source). Hasznlhat file-kiterjesztsek az
MPG
,
MPEG
s az
AVI
, br ez utbbival a a rgebbi Firefox-oknak gondjai lehetnek.

- Egy viderszletet persze tbbszr is le lehet jtszani a LOOP paramter segtsgvel.

Alaprtelmezs LOOP=1. Vgtelen lejtszst rhetnk el a
LOOP="-1"

28 / 45
HTML/CSS knyv

rta: TFeri.hu

(esetleg a
LOOP="infinite"
) adat segtsgvel.

- Csak az Explorerben hasznlhat paramter a LOOPDELAY, mely ezredmsodpercben

szablyozza, hogy kt lejtszs kztt mennyi id teljen el.

9. fejezet: Keretek (frame-ek)

A HTML-oldalak egyik leghasznosabb
szomszdos dokumentum
rsze a keretek
is bizonytja.
(angolul: FRAME-ek)( hasznlata. Ezt a
minta26.html

<FRAMESET rows="50%,50%">
<FRAME SRC="fel1.html">
<FRAME SRC="fel2.html">
</FRAMESET>
</HTML>

29 / 45
HTML/CSS knyv

rta: TFeri.hu

FRAMEBORDER="yes"
NO
YES
AUTO
FRAMESET
TARGET="ablak
billentyzeten.)
adja
lthattuk.
Vigyzat!
bezrlag),
).termszetesen
(minta27.html
legegyszerbb
illetve
=
tmretezhesse
(vagy
tagben
tvolsgot
paramterrel
meg
melyek
Ezt
bele
paramtert
bonyolult
meg;
szljben
az
eltt
<FRAMESET
<FRAME
Ht
<BODY>
<NOFRAMES>
</HTML>
</FRAMESET>
</NOFRAMES>
</BODY>
Mg
Tny,
tilos
mindig
Csak
j
- csak
ez
meg
kell
egy
fog NORESIZE
MARGINHEIGHT=pixelszm
TITLE="kirand
linket.
valami:
<HTML>
Egyb
Ha
Persze
Az
Itt SRC
Hasonlan
A
"_blank"
nv)
AUTO.
ahogy
anem
akkor
keret
legfontosabb
azt
is
scroll;
jelenni
illeszteni
nem
szeretnnk
gy
als
megjelenik
szn
agy
kppontban
van neve"
SRC="fel1.html">
SRC="fel2.html">
lehet
segtsgvel,
hatrozzk
nyitja
is!
lap
akkor
Aparamterek
nyert!
alehetsg
ha
sznt
llthatjuk.
tudjuk
ajelenik
(vzszintes
flrertsek
szeretnnk
megadsa.
utn
Az
=
lehetsgnkBORDERCOLOR="sznkd"
COLS="100,*">
mai,
hivatkozsa.
a
lapunk
amegadni.
nem
egy
aascrollozs.
</NOFRAMES>,
meg,
ablakokat
tippek
rdemes
aweblap
keret duma"
termszetesen
modern
(kln
a
hasznlni,
a
tiszta,
felkszlni
meg
paramter
felttlenl
(=pixelben).
grdtcsk;
knnyen
ahonnan
meg,
van
vons
sorban
bal
de
keretvonalat,
Ha
a
is
kereteit.
elkerlse
rtk
nvtelen
hasznlni
csk,
arra
tetszlegesen
bngszkben
lehetsgesek:
s
vlemnyem
Az
A
a
hogy
valaki
keret
paramter
hogy
van!
jobb
ablakok
kell,
ttekinthetetlen
rgebbi
amg
nlkli)
eredtek
is,
ha
paramter
bngsz
hov
amint
aAlaprtelmezs:
Ellentte
hogy
szeretne
(ltalban:
oldaltl
az
sznnek
a
akkor
lapban
forrsfile-t
htravan.
vgett BORDER=n
asegtsgvel
megnyitsra
szksges
akkor
<kell
lehetsges
paramter
bngszkre
aez
az FRAMEBORDER="no"
lehetsges
szerint
linkek;
el
ne
Aerre
az
megnyitnia
nyitja
egyes
szeretnm
legaljn,
a
hatsra
lehet
felkszlni
val
aadjuk
megadsra
NOFRAMES>
albbi
kell
jobb
lehet!
Ez
mr NAME="ablak_neve".
szerencssebb
"_top"
meg;
tvolsgot
nevezni
-keretekkel
megakadlyozza,
a
hasznlt
rni.
az
-1.
meg
ez
hatrozza
SHIFT
nem
beptett
rtkei:
ha
pldban
is BORDERCOLOR="sznkd"
a(Ellentte:
egyes
az -aMARGINWIDTH=pixelszm
kihangslyozni,
"_parent"
bert
(Explorer
=
ilyen
az
minden
kell
paramter
az
j
alaprtk.)
s
as
egrrel
<A
file-t
a
szveg
ablak
keretek
taget RESIZE.
SCROLLING
ignyekre
kln
felkszlni!
rdemes
meg,
is
HREF="fileneve.html">
nevei:
mellette
a
frame
=
egy
lthat:
3-asig
is,
teljes
flje
is
aamint
(jelenleg:
atetejtl
hogy
melynek
lapot
trkkzznk.
rkattintskor.
"_self"
keretek
vastagsgt
is
hogy
is,
paramter
s
lv
mretben
megynk.
ezzel
ezt
a
akkor
aNetscape
Sok
felhasznl
akzvetlen
=s
mnusz
elbbiekben
kirand
zrrtke
kztti
beptett
nmagba
lni,
=
aljtl
knytelen
rtke
NO,
kell.
A-ha
nyitja
Figyelem!
fknt
a
2-esig
helyet
duma)
YES,
val
elg
tagbe
van,
nevek
meg
nyitja
is
elkszteni
pixeles rtk
a
sszegezve:

A "_self" paramter esetn a megfelel frame helybe tltdik az oldal.

A "_parent" paramter esetn a megfelel frame fl tltdik az oldal.
A "_top" esetn legfllre.
A "_blank" paramter esetn egy vadonatj bngsz ablakba.
Az "ablakneve" paramter hasznlata esetn a megadott nev keretben nylik meg a
hivatkozs.
A "_search" paramternl a link a bngsz keres-paneljba tltdik be. Minimum Explorer
5-nl hasznlhat.
A "_media" esetn a link a bngsz MediaBar nev rszbe (magyarul: multimdia panel)
tltdik be. Minimum Explorer 6-nl hasznlhat.
7. feladat: Ksztsen egy ilyen ktoldalon elhelyezked keretrendszert. Minta: fel7.html .

Ahogy haladott elre az let (meg az egyre jabb bngsz-szabvnyok), gy vltozik a HTML
is. Ennek egyik ldozata lett a FRAME. Helyette bejtt az iFRAME. Hasznlata vgtelen
egyszer, mivel egy virtulis keretet hoz ltre a weblapon bell. Pldul a kvetkez kdot kell
bepteni a weblapba:

30 / 45
HTML/CSS knyv

rta: TFeri.hu

<HTML>
...
<IFRAME SRC="http://www.tferi.hu/"></IFRAME>
...
</HTML>

Fontosabb paramterek:

- ALIGN: (left/right/top/middle/button): rendezs a szokott helyre. Elavult. A DIV hasznlata

javasolt helyette.
- FRAMEBORDER: (1/0): legyen keret (1) vagy nem (0).
- HEIGHT: (pixel vagy %): A keret magassga kppontban vagy %-ban.
- LONGDESC: megadja azt az oldalt, ahol az iFRAME hosszabb lersa tallhat.
- MARGINHEIGHT: marg magassga kppontokban.
- MARGINWIDTH: marg szlessge kppontokban.
- NAME: a keret neve. Ezzel lehet hivatkozni r linkelskor!
- SCROLLING: (yes/no/auto): a keret grgethetsge.
- SRC (URL): megadja az IFRAME keretbe beptett dokumentum cmt.
- WIDTH: (pixel vagy %): a keret szlessge kppontban vagy %-ban.

10. fejezet: Egyb formzsok

Szvegek dekorlsa

Termszetesen egyb formzsi lehetsgeink is lehetnek. Az albbi nhny sor csak pr

lehetsget mutat be:
<ADDRESS>

Postacmet jell ki.

</ADDRESS>

31 / 45
HTML/CSS knyv

rta: TFeri.hu

<BLINK> Ez itt villog, de csak Netscape-ben! </BLINK>

<BIG> Nagyobb karaktermret </BIG>
<BLOCKQUOTE>

Szvegblokk - rdemes kiprblni!

</BLOCKQUOTE>
<CITE> Idzet - ritkn hasznlhat</CITE>
<CODE> Programkd - a ms betstlus miatt rdemes hasznlni</CODE>
<COMMENT> Kommentls - semmi hatssal nincs a dokumentumra. Nem rdik ki </COMME
NT>
<DFN>Definlt szveg </DFN>
<EM> Kiemels - ritkn hasznlt</EM>
<KBD> Billentyzetrl begpelhet input rgp stlussal </KBD>
<S> Keresztlhzott szveg</s>
<SAMP>

Irodalmi szvegrszlet, illetve mintakarakter

</SAMP>
<SMALL> Kisebb betmret </SMALL>
<STRONG> Vastagtott megjelens </STRONG>
<SUB> Als index </SUB>
<SUP> Fels index </SUP>
<VAR> Vltoznevet jell ki </VAR>
<TT> rgpkarakterek</TT>

Marquee

rdekes, de sajnos csak az Explorerben megjelen lehetsg a szvegek feliratszer

mozgatsa a<MARQUEE> s a </MARQUEE> kztt. Elfordulhat, hogy egyes alternatv
bngszkben is megjelenik a hats kvnsgunk szerint, de ez nem tl valszn!
ltalban akkor lehet ltvnyos az effektus, ha az ablak nagyobb rszben lthat lesz a
mozgs, mint a lenti pldban: ( minta28.html )

<HTML>
<Marquee behavior=alternate bgcolor="teal" dataformatas=text loop=3 width="75%" title="dumls">
Ez a duma!
</marquee>
</HTML>

32 / 45
HTML/CSS knyv

rta: TFeri.hu

BEHAVIOR
BGCOLOR
DATAFORMATAS
DIR
DIRECTION
HEIGHT
HSPACE
VSPACE
LOOP
SCROLLAMOUNT
SCROLLDELAY
TITLE
WIDTH
Pr
ltal
jobbrl
8.
ablak
(Minta:
9.
)gndl
fel9.html
ap feladat:
paramter:
=meghatrozott
65%-t
ltr/rtl
=balra
linkjetova.
=
fel8.html
"cm"
"n"
==
"n"
Ksztsen
Ugyanezekkel
"n"
-"n"
=-=alternate/scroll/slide
szveg
(Minta:
=-foglalja
Hny
httrszn
-Az
left/right/up/down
-Hny
Mi
Mekkora
)=ablak
jelenjen
"n"
=
ismtls
irnyba/a
olvassi
egy
el,
text/html
"n"
%-ot,
- hny
Hny
de
kdja
-a
jobbrl
legyen
Hny
paramterekkel
meg,
az
vagy
utn
irnynak
szzalkban
szveg
millimsodperc
vagy
egsz
- adatformtum
pixel
balra
-ha
kppontot
alljon
scrollozs
-HTML-tag
mozgsirny
neve
az
alakzat
levgsa
elcsszssal
4-szer
egeret
le
meghatrozsa;
a ksztsen
foglalhat
mozgats.
jelenjen
irnya
kzpre
elhalad
mellett
utn
fl
-az
sima
=elz
visszk?
rajzolja
balra-jobbra/tlapozs
rajzoljon
- meg
el
bal/jobb/fel/le;
aszveg/html
egy
legyen
pr
(Vgtelen
hely
szabad
amintjra
HTML-tag
ltr=balrl
ajabb
szavas
jra
MARQUEE.
fgglegesen?
ismt
igaztva
hely
aobjektumot,
HTML-taget.
=ajobbra
szveget,
-1)
Alaprtelmezs:
vzszintesen?
aMARQUEE.
kpbl.
s srga
(alaprtelmezs);
(scroll)
melyben
amely
httere
a direction
az
left
egy
aktulis
legyen.
rtl =
webl
Basefont

Fontos karakterformzsi lehetsget tartalmaz a<BASEFONT> tag, mely egy dokumentum

alapvet karakterkszlett tartalmazhatja, amelyhez kpest a tbbi karakter hogyan nzzen ki.
Lehetsges paramterei - fleg az Explorerben: COLOR (szn) s FACE (karakterkszlet neve).
A fbb bngszk ismerik a SIZE (mret) paramtert. Tovbbi segtsget jelenthet a kvetkez
file ( minta29.html ):

<HTML>
<basefont color="blue" face="Arial, Courier" size="4">
Ez lesz az alaprtelmezs!
</basefont>
</HTML>
BGSound

Csak az Explorer ltal hasznlt lehetsg a <BGSOUND> (httrhang). Itt hangkrtyval

rendelkez gp segtsgvel lejtszathatjuk az oldalhoz rendelt httrhangot. Vlaszthat
kiterjesztsek: WAV, AU, MID s CD. Ktelez
paramter a forrs megjellse (SRC). Lehetsges paramter az ismtlsek szmt
szablyoz LOOP=n, melyben n egy sorszm. Abban az esetben, ha
n = -1
, akkor vgtelenszer ismtldik a httrhang. rdekes lehetsg a
BALANCE=n
paramter, ahol
n
-10000 s +10000 kztti rtk. Ez hatrozza meg a bal s jobb oldali hangszrk kzti
hangossg rtkt. Alaprtelmezs: 0. (Egyenl hangossg.) Tovbbi hasonl paramter a
VOLUME=n

33 / 45
HTML/CSS knyv

rta: TFeri.hu

, ami neve alapjn sejtheten a hangerrt felels.

n
rtke -10000 s 0 kztt lehet, ahol 0 a legnagyobb hanger.

11. fejezet: BODY s META

Az eddigi kpnl kicsit bonyolultabb, rnyaltabb fogalmazs szksges a teljes rtk HTML
lapokhoz. Ezentl a dokumentum sablonjhoz a kvetkezt ajnlom: ( minta30.html )

<HTML>
<HEAD>
<TITLE>Ez a cim</TITLE>
<META name="description" content="Lap leirsa">
<META name="keywords" content="Kulcsszavak">
<META name="generator" content="Mivel lett csinlva">
<META name="author" content="Szerz neve">
<META name="robot" content="index,follow">
<META http-equiv="Expires" content="Mon, 27 Nov 2000 14:25:27 GMT">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
Na, s csak itt jn a lnyeg!
</BODY>
</HTML>
Lthat, hogy maga a <HTML>-tartomny
<HEAD> s </HEAD> kt rszre
kztt,
<BODY>oszlik.
valamint
sVan
a </BODY>
egy
egyrszt
szvegtrzs
kztt.
egy fejlc
a
Eddig csak ez ut
<TITLE> A Dokumentum cme </TITLE>
A <META> kezdet elemeknek nincsen zrrsze s nem is jelennek meg, de ann
- Description : pr szavas leirs - szintn!
- Keywords : A lapra jellemz kulcsszavak a keresrobotoknak.
- Generator : Milyen programmal lett a lap elksztve. (Pl. Jegyzettm
- Author : A szerz neve, esetleg E-mail cme!
- Robots : Parancsok a keresrobotok"index/noindex"
szmra. Lehetsgesindexel
rt
- Expires "NOW"
: Lejrat ideje. Ha pl. csak minden hnap elsejn(=most
frissti
Valamennyi <META name=...>lang="en"
kezdet tagben hasznlhat
, vagy a a lang="hu" param

- A HTTP-EQUIV egy mr lehetsget rejt. Ugyanis itt megadhatjuk a bngsznek, hogy az

adott dokumentum mikor veszti rvnyt. gy ha a bngsz jabb parancsot kap a

34 / 45
HTML/CSS knyv

rta: TFeri.hu

dokumentum letltsre, akkor ha a cache-ben eltrolt hatrid eltt van mg a weblap, akkor
nem bajmoldik a letltssel, hanem beolvassa magbl a gpbl s mr kszen is van.
Clszer egy weblapnl nem tl tvoli idpontot megadni!
- A msik sor (<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-2">) pedig a magyar karakterkszlet hasznltra keszti el a gpet.
- Lehetsg nylik arra is, hogy egy dokumentumot llandan frisstsnk. A <META
HTTP-EQUIV="REFRESH" CONTENT=2> hasznlata pldul 2 msodpercenknt frisst egy
weblapot! (Tzsdei rfolyamoknl mg jl jhet.)
- Tbb rtelme lehet egy msik webhely automatikus betltsnek. A <META
HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://poszter.ini.hu/"> tag pldul az URL-ben
megadott webhelyet hozza be 5 msodperc elteltvel!
- Szintn rdemes hasznlni a <META HTTP-EQUIV="Reply-to" content="hivatalos@tferi.hu">
taget is, ami a lehetsges vlaszcmet adja meg.
Egy msik fontos elem a <BODY> s a </BODY> kz kelt szvegtrzs nyiteleme. Rengeteg
lehetsget tartalmaz s igen sokflekppen lehet alkalmazni. Lehetsges paramterei kzl
csak a lnyegesebbek kerlnek itt felsorolsra:
- BGCOLOR="sznkd" - background color; A httrszn neve vagy kdja.
- ALINK="sznkd" - active link; Az ppen aktv link(ek) sznkdja vagy neve.
- VLINK="sznkd" - visited link; A mr megltogatott linkek sznkdja vagy neve.
- LINK= "sznkd" - link's color. A mg meg nem ltogatott linkek sznkdja vagy neve.
- TEXT="sznkd" - text color; A sima (linkek nlkli) szveg sznkdja vagy neve.
- BACKGROUND="url" - Httrkp neve (esetleges tvonallal).
- BGPROPERTIES=FIXED - Vzjel megadsa. Ez gy nem grdthet!
- TITLE="szveg" - Ez a szveg lesz kirva az egrmutat fl (mintegy segtsgknt), ha az
ablak fl r.
- NOWRAP="TRUE" - Szveg nem trhet meg automatikusan. Alaprtelmezs: NOWRAP="
FALSE" .
- SCROLL="NO" - Eltnteti az oldals scrolloz-cskot. Alaprtelmezs: SCROLL="YES".
Lehetsges rtk mg:
"AUTO"
(automatikus).
- BOTTOMMARGIN=n - Als marg pixelben. Fellbrlja az alaprtelmezst. Csak egsz
szm lehet. Alaprtke: 15. Minimum: 0.
- TOPMARGIN=n - Fels marg pixelben. Fellbrlja az alaprtelmezst. Csak egsz szm
lehet. Alaprtke: 15. Minimum: 0.
- LEFTMARGIN=n - Bal oldali marg pixelben. Fellbrlja az alaprtelmezst. Csak egsz
szm lehet. Alaprtke: 10. Minimum: 0.
- RIGHTMARGIN=n - Jobb oldali marg pixelben. Fellbrlja az alaprtelmezst. Csak egsz
szm lehet. Alaprtke: 10. Minimum: 0.
Tovbbi elemek is lehetnek a weblap fejlcben:

- <ISINDEX> : Nem tartalmaz semmi szveget s nincsen zreleme sem. A bngsz

szmra jelzi, hogy kereshet (indexelhet) dokumentumrl van sz. Javasolt helyette a " r
obots
" META-tag hasznlata.

35 / 45
HTML/CSS knyv

rta: TFeri.hu

- <LINK> : Jelzi a dokumentum kapcsolatt ms dokumentumokkal, stluslappal

cmszalaggal, stb. Kell zrelem. Paramterei: DISABLED - megtiltja az elem
hasznlatt; HREF="url" -
lkapocs ltrehozsa;
MEDIA="SCREEN"
vagy
MEDIA="PRINT"
vagy
MEDIA="ALL"
- meghatrozza a dokumentum kimenett, lehetsgek: kperny,nyomtat, minden
(alaprtelmezs)

12. fejezet: Trkpek

Ha egy bonyolultabb kpnk van rengeteg utalssal s felirattal s/vagy rajzzal, akkor clszer
egy olyan rendszert kialaktani, amelynl egyes rszekre kattintva nyitdhat meg egy jabb
kapcsolat. Mintakppen nzzk meg a kvetkez kpet s file-t: ( minta31.html )

36 / 45
HTML/CSS knyv

rta: TFeri.hu

map.gif <HTML>
<IMG src="map.gif" usemap="minta31.html#terkep1">
<MAP name="terkep1">
< area shape="rect" coords="25,12,114,32" href="minta1.html">
<area shape="rect" coords="25,33,114,47" href="minta2.html">
<area shape="rect" coords="25,48,119,70" href="minta3.html">
<area shape="rect" coords="25,71,119,88" href="minta4.html">
<area shape="circle" coords="200,212,50" href="minta5.html">
<area shape="poly" coords="20,200,20,250,80,250,140,200,20,200" href="mailto:ferenctamas@freema
</MAP>
</HTML>

(Megjegyzs: a fenti kp a PhotoShop 5.0 s a CorelDraw 9 programokkal kszlt!)

A dolog lnyege, hogy a trkpnek s a feldolgozott utalsoknak nem kell azonos file-ban
lennie, de lassabb kapcsolat gpek miatt clszer azonos file-ba tenni a kt anyagot. Az els
fontos utasts az IMG SRC-ben lv USEMAP paramter. Itt meg kell adni a trkpfeldolgoz
file, valamint a trkp helyt.
A trkp feldolgozshoz kell a <MAP name="trkpneve"> tag. A konkrt lkapcsokat az <
area>
tag szablyozza. Paramterei:
- shape = rect (tglalap), circle (kr), poly(polygon), default (mindenhol mshol - egyb
helyen)
- coords = koordintk. Tglalap esetn kt tellenes sarok, kr esetn a kzppont s a
sugr, poligon esetn sorban a sarkok (az utols legyen azonos az elsvel!).
- href = lkapocs. Teljes utals is lehet, nem csak egyszer file.

37 / 45
HTML/CSS knyv

rta: TFeri.hu

- alt = alternatv szveg.

- target = Megnyitand file helye (pl.) megoszts esetn.
- title = az egrmutat hatsra kirand szveg.
- nohref = ennek a terletnek nincsen lkapcsa.
Mintk: Kapcsolatok (4. fejezet) .

10. feladat: Nem felttlenl knny egy ilyen trkp (els) elksztse, de nmi prblkozs
utn a fenti minta alapjn sikerlhet!

13. fejezet: Krdvek a HTML dokumentumban

Hadd kezdjem ezttal egy megjegyzssel: a krdvek helyes sszelltsa s

megfogalmazsa a gyakorlattal rendekelzknek nem tl nehz, csak idignyes feladat. n
magam is gy szokta elkszteni ket, hogy a egy weblapszerkesztvel elbb elksztem a
terepet (bocsnat, a krdvet), majd utna kezdem el egy kdszint szerkesztvel a
finomhangolst!

Egy weblapon krdveket is kzz tehetnk, amelyek hasznlata els pillantsra nem
felttlenl egyszer!
A <FORM METHOD="md" ACTION="mit csinljak vele"> s a </FORM> kztti utastsok
hatrozzk meg az rlapot.

- Az ACTION hatrozza meg a feldolgozst vgz programot. Ez tbbnyire a kiszolgl

szervern a /cgi-bin/ knyvtrban van, de lehet E-mailben is elkldeni. Ez
utbbi sokkal egyszerbb s nem kell hozz semmilyen feldolgoz-program. Olvassa a
legegyszerbb szvegszerkesztvel (rtsd: NotePad/Jegyzettmb) is lehetsges! Ha
mindenron egy feldolgoz-programot kell megcmezni, akkor kiterjesztse tbbnyire PHP
vagy ASP szokott lenni. Vigyzat! Az ilyen programok
rsa nem felttlenl egyszer!
Minta levlkldsre: <ACTION METHOD="mailto:hivatalos@tferi.hu">
Minta feldolgoz-programra: <ACTION METHOD="feldolgoz.php">
- A METHOD a kitlttt rlap tovbbtsi mdjt hatrozza meg. Ez lehet GET (Hozzfzi
az rlapot az url-hez - idnknt tl hosszra nylhat az

38 / 45
HTML/CSS knyv

rta: TFeri.hu

url
!), illetve
POST
(adatcsomagban - biztonsgos!)

- rdemes hasznlni POST adatklds esetn az ENCTYPE="TEXT/PLAIN" paramtert,

mert gy tapasztalatom szerint minden levelezprogram jl megrti a kldtt adatokat, mg az
egybknt igen knyes
www.freemail.hu
is!

- Az <INPUT NAME="nv" TYPE="tpus" ALIGN="igazts"> utastssal hatrozhat

meg egy kitltend rlapmez.

- A NAME termszetesen a meznv, amely alapjn a feldolgozprogram azonostja a

bevitt adatot. Ez gyakorlatilag szabadon megvlaszthat, de javasolt a klasszikus DOS
szabvnyait megtartani s nem tl sokat varilni a nevekkel. Tapasztalatom szerint nem minden
E-mail-en elkldtt rlap jn t tkletesen, ha tl sok a magyar elnevezs.
- Az ALIGN termszetesen igaztst jelent. Lehetsges rtkei: left, right, center.
- Itt is hasznlhat a TITLE, mely itt is az egr hatsra megjelen szveget jelenti.
Tapasztalatom szerint bonyolultabb rlapoknl sok mez rossz kitltse elkerlhet pr
TITLE
tag-gel.

- A TYPE pedig az adattpus, melyet vr a beviteli mez. Lehetsges tpusok: TEXT

-szveg,
PASSWORD - jelsz (nem jelenik meg bevitelkor!),
HIDDEN-rejtett (ez sem jelenik meg),
CHECKBOX - kapcsol (tbb is kivlaszthat egyszerre),
RADIO - kapcsol (egyszerre csak egyet lehet kivlasztani),
RANGE - numerikus adat,
FILE - csatoland fjl,
SUBMIT - adattovbbt gomb,
RESET - megsemmist (inicializl) gomb,
BUTTON - egyb nyomgomb. Az <INPUT> utastsban tovbbi opcik is
szerepelhetnek, a f opcik rtkeitl fggen:
- A VALUE kiegszt opcival megadott rtket veszi fel alaprtelmezsknt a szveges
vagy numerikus beviteli mez. rtkt nem kell megadni.
- TEXT tpus mez esetn egy tovbbi opci, a SIZE="mret" opci hatrozza meg az
ablak szlessgt, a MAXL
ENGTH="rtk"
pedig a maximlis hosszt. Lehetsges paramter a
READONLY
, mley nevbl addan csak olvashatv teszi a file-t.

- A CHECKBOX s a RADIO tpus mezk tovbbi paramtere lehet a CHECKED opci,

39 / 45
HTML/CSS knyv

rta: TFeri.hu

mely bekapcsolja a kapcsolt - alaprtelmezsknt.

- A RANGE tpus mez esetn megadhat az a tartomny, melybe a bevitt rtknek bele
kell esnie, a MAX="maximum" s a MIN="minimum" tovbbi opcikkal.
- A FILE tpus mezben megadott fjl az ACCEPT kiegszt opcival megadott MIME
mdon csatoldik az elkldend krdvhez. (Megjegyzs: Egy Browse nyomgombbal
tmogatott fjlkeres-ablakbl lehet a fjlt kivlasztani.)

- A SUBMIT s a RESET gombokhoz tartoz kiegszt opci a VALUE="felirat", amely a

gombok feliratt jelli ki. Egybknt a
SUBMIT
gomb lenyomsnak hatsra kldi el az rlapadatokat a krdv a feldolgoz programnak, a
RESET
gomb lenyomsa pedig az alaprtkekkel tlti fel a beviteli mezket.

- A BUTTON gombot nem felttlenl kell hasznlni, mivel gyakorlatilag semmilyen szerepe
nincsen!
- Hosszabb szveg bevitelre alkalmas a<TEXTAREA NAME="nv" ROWS="magasg"
COLS="szlessg" VALUE="szveg"> s a </TEXTAREA> utastspr, amely egy beviteli
ablakot nyit megadott szlessgben s sorban. A
VALUE
az alaprtelmezsknt megjelentend szveget adja meg.

- Egy krdsre adand vlasz egyszer - menbl trtn - kivlasztst teszi lehetv a
krdven a <SELECT NAME="nv" SIZE="sor"> s a </SELECT> utastsokkal
ltrehozott kivlasztsos men, melynek menpontjait az <OPTION>
utastssal adhatjuk meg. Az
OPTION
fontos paramtere a
VALUE="rtk"
, ami a szveges/karakteres mezknl igen hasznos lehet. rdemes hasznlni, de nem szabad
egy krdven tl sok vlasztst megadni, mert akkor tapasztalatom szerint az internetes
felhasznl nem hajland vgigcsinlni a krdvet.

- A SIZE opci azt hatrozza meg, hogy hny sorban jelenjenek meg a SELECT-ben
vlaszthat menpontok egy szkrollozhat menben. Hinya esetn, hagyomnyos legrdl
menbl lehet vlasztani. A
MULTIPLE
opci esetn tbb menpont is kijellhet egyszerre. Az <OPTION SELECTED> formj
utasts adja meg az alaprtelmezett vlasztst!

- rdekes paramterknt lehet alkalmazni az ACCESSKEY=gomb-ot, amelynl a

bngszben lehet megadni az rlapra ugrshoz hasznlt
ALT+gomb
kombincit!

40 / 45
HTML/CSS knyv

rta: TFeri.hu

- Hasznlhat a DISABLED is, ami az ppen aktulis elem aktv hasznlatt tiltja le.
- rdemes elgondolkozni az AUTOCOMPLETE="ON", illetve "OFF" hasznlatn egyes
szveges mezknl, persze a jelszmezket kivve. Nevbl rtheten ez engedlyezi a mez
automatikus kitltst, ha mr a felhasznl jrt ott!

- Lehetsgknt felmerlhet, hogy alkalomadtn el kell rejteni a fkuszt, magyarul azt a

helyet, ahov elszr rni lehet. (A dolog rtelme: a felhasznlnak muszj legalbb egyet
kattintania az rlap kitltse eltt!)
Ezt a HIDEFOCUS="true" rtkkel tehetjk lehetv. Alaprtelmezsben a fkusz
lthat, azaz HIDEFOCUS="false".
- Itt is felhasznlhat, igny szerint akr elemenknt is a LANG="nyelvi_kd". A
haznkban hasznlt legfontosabb nyelvi kdok:

hu = Hungarian/Magyar
en = English/ltalnos angol
en-us = English - United States /Amerikai angol
de = German - Standard/ltalnos nmet
de-at = German - Austria/Osztrk nmet
ro = Romanian/Romn
ru = Russian/Orosz
cz = Czeh/Cseh

Tovbbi nyelvi kdok ebbl az angol nyelv tblzatbl szedhetk ki: htmllang6.html.

Egy apr tancs a komolyabb krdvek kitltse eltt: mindig tbbszrsen prbljuk ki a ksz
krdvet. Lehetsleg ne csak a sajt gpnkrl, hanem minl tbb helyrl. Ha lehetsgnk
van r, akkor rdemes tbb verzij Explorerben, Netscape-ben s minl tbb opercis
rendszerben is kiprblni. A rendszerek kzl ne maradjon ki a Linux sem! Ha sajt magunknak
ez gondot okoz, akkor krjk meg ismerseinket az ellenrzsre. "les" megrendelvvel SOHA
ne ksrletezgessnk, csak az sszes prba utn!

A kvetkez plda egy nem kifejezetten egyszer krdvet mutat be: ( minta32.html )

<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Tams Ferenc</title>
</head>

41 / 45
HTML/CSS knyv

rta: TFeri.hu

<body>
<form method="post" action="MAILTO:ferenctamas@freemail.hu" enctype="text/plain">
<h1 align="center">Tams Ferenc</h1>
<h2 align="center">A szmtstechnika alapjai CD-ROM megrendellapja</h2>
<h3 align="center"><span style="background-color: #FF0000">EZ CSAK MINTA, NEM
MEGRENDELLAP!</span></h3>
<p align="center">&nbsp;</p>
<div align="center">
<center>
<table border="1" width="75%">
<tr>
<td width="60%">
<input type="checkbox" name="Konyv1" value="ON" checked disabled>
Tams Ferenc: A szmtstechnika alapjai knyv</td>
<td width="15%" align="right">4.777 KByte</td>
</tr>
<tr>
<td width="60%">
<input type="checkbox" name="PPT" value="ON" checked disabled>
Kivl minsg bemutat PowerPoint fjlok</td>
<td width="15%" align="right">300.000 KByte</td>
</tr>
<tr>
<td width="60%">
<input type="checkbox" name="Free" value="ON">
Ajnlott ingyenes programok</td>
<td width="15%" align="right">150.000 KByte</td>
</tr>
<tr>
<td width="75%" colspan="2">
<p align="center"><b>
<input type="checkbox" name="Rendel" value="Rendel" checked>
IGEN, megrendelem a fenti felttelekkel a CD-ROM-ot s
vllalom a kifizetst az ltalam vlasztott mdon!</b></p>
</td>
</tr>
<tr>
<td width="60%">Megrendel neve</td>
<td width="15%" align="right">
<input type="text" name="Nv" size="40" value="Teljes nv"></td>
</tr>
<tr>
<td width="60%">Irnytszm</td>
<td width="15%" align="right">
<input type="text" name="Irszam" size="20" value="8000"></td>
</tr>

42 / 45
HTML/CSS knyv

rta: TFeri.hu

<tr>
<td width="60%">Vros</td>
<td width="15%" align="right">
<input type="text" name="Vros" size="37" value="Vros"></td>
</tr>
<tr>
<td width="60%">Felhasznlsi terlet(ek)</td>
<td width="15%" align="right"><select size="2" name="MitCsinal" multiple>
<option selected value="nll tanuls">nll tanuls</option>
<option value="Kiscsoportos tanfolyam">Kiscsoportos tanfolyam</option>
<option value="ltalnos iskola">ltalnos iskola</option>
<option value="Kzpiskola">Kzpiskola</option>
<option value="Felsoktats">Felsoktats</option>
<option value="Egyb">Egyb</option>
</select></td>
</tr>
<tr>
<td width="60%">Fizetsi md</td>
<td width="15%" align="right">
<input type="radio" value="posta" name="Hogyan" checked>Postai&nbsp; utnvtellel
<p><input type="radio" value="bank" name="Hogyan">Banki tutalssal</td>
</tr>
<tr>
<td width="60%">&nbsp;Megjegyzs</td>
<td width="15%" align="right">
<textarea rows="2" name="S1" cols="20"></textarea></td>
</tr>
<tr>
<td width="75%" colspan="2" align="center">A CD-ROM ra <b>2000 Ft + FA</b>,
valamint <b>300 Ft</b> csomagolsi s postakltsg!
<h3><input type="submit" value="Megrendelem!" name="Elfizets">&nbsp;
Mindsszesen: <b><span style="background-color: #FF0000">2800 Ft</span></b>
<b>&nbsp;</b><input type="reset" value="Kilps" name="Kilps"></h3>
</td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html>

Mg valami: ne ilyen szint legyen az n els krdve, kedves olvas!

Csak lassacskn haladjon a pofonegyszertl a nehezebb fel!

43 / 45
HTML/CSS knyv

rta: TFeri.hu

11. feladat: Ksztsen egy krdivet, mely egy E-mail cmre postzza el a ltogat
megkrdezett nevt! Minta: fel11.html
12. feladat: Az elz krdvet bvtse gy, hogy egy jabb 4 soros szvegmezbe lehessen
berni a felhasznl teljes postacmt! Minta: fel12.html
13. feladat: Az elz krdvet bvtse gy, hogy a felhasznltl krje be a nemt is egy
vlasztmezvel (RADIO BUTTON)! Minta: fel13.html
14. feladat: A elz krdvet bvtse egy legrdl mezvel, melynek segtsgvel a
felhasznl megadhatja letkort vtizedekben! Minta: fel14.html

14. fejezet: Egyb elemek

Termszetesen nem csupn annyi eleme van a HTML-nyelvnek, amennyit ez a meglehetsen

szkre szabott knyv felsorol. ppen ezrt az albbiakban szeretnk nagyon rviden mg pr
elemet bemutatni.

- <!-- Megjegyzs --> Ez az az elem, amit alaprtelmezsben nem jelent meg a bngsz.

- -<!DOCTYPE> Megjegyzsknt jelzi, hogy a weblap melyik HTML-szabvnyt jelenti meg.

Plda:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
- ACRONYM: mozaikszavak megadsa, beszrsa. Pl.: <acronym title="Cascading Style
Sheet">CSS</acronym>
Kihalfleben van, mert egyre kevsb tmogatjk.
- APPLET: Futtathat program helynek beszrsa. Fontosabb paramterei:
ALIGN = ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT |
TEXTTOP | TOP (Igazts)
ALT = szveg (Helyettest szveg, ha nem sikerl lefuttatni.)
CODE = filenv (A lefordtott Java-class neve.)
CODEBASE = url (A bzis-url helye.)
HEIGHT = n (magassg)
HSPACE = n (Az applet vzszintes margja.)
NAME = nv (Az applet neve.)
SRC = url (A forrsfile teljes url-je.)
TITLE = cm (A kirt szveg, amit az egr felette lebegsekor rdik ki.)
VSPACE = n (Az applet fggleges margja.)
WIDTH = n (szlessg)
- BASE: A dokumentum bziscmnek meghatrozsa - keretek (FRAME) alkalmazsakor.
(BASE url) Paramterei: HREF=url s TARGET=ablak_nv | _blank | _parent | _self | _top

44 / 45
HTML/CSS knyv

rta: TFeri.hu

- BUTTON: Nyomgomb beszrsa. Hasznlata szinte teljesen azonos a krdvekben

megismertvel.

- CENTER: A nyit- s zrtag kztti elemet, vagy elemeket kzpre rendezi.

- COL: Tblzatban oszlop definilsa. Ritkn hasznlt!
- COLGROUP: Oszlopok kzs csoportjnak gyjtje. Ritkn hasznlt!
- DEL: Dokumentumbl trlt szveg kijellse.
- DIR: Felsorolsszer lista ksztse. Eleme: LI .
- EMBED: Dokumentum beszra egy msikba. Fontosabb paramterei, mint az APPLET-n
l.
- FIELDSET: Mezelem beszrsa. Csak LEGEND taget tartalmazhat kzvetlenl utna.
- IFRAME: Lebeg keretek jabb definilsi lehetsge. Paramterei lnyegben azonosak
a keretekvel .
- INS: A dokumentumhoz hozzadott mez beszrsa.
- LABEL: Cmkt definil a kontrolll elemek szmra.
- LEGEND: Megadja a FIELDSET elemt. Csak ezen bell lehet hasznlni!
- LISTING: Elre listzott szveg. Kb. azonos a PRE taggel.
- MENU: Listk men-szer felsorolsa. Eleme: LI .
- NOSCRIPT: A scriptek megjelentsre kptelen bngszk szmra a HTML-kdot
tartalmazza.
- OBJECT: Objektum beszrsa a HTML-dokumentumba. pl. kp, dokumentum applikci,
vezrls, stb. Fontosabb paramterei, mint az APPLET-nl.
- PARAM: Vltozkat hatroz(hat) meg egyb elemeknek, pldul: APPLET , EMBED , O
BJECT
.

- PLAINTEXT: Mindenfle formzs nlkli sima szveg megjelentse.

- Q: Kiemelt szveg megjelentse. Ritkn hasznlt!
- SCRIPT: Egy ms nyelven rt script beszrsa.
- SPAN: rvnyessgi kr definilsa.
- STRIKE: Keresztlhzott szveg kirsi md. Lsd: S tag.
- TBODY: Tblzat trzsnek definilsa. Ritkn hasznlt!
- THEAD: Tblzat fejlcnek definilsa. Ritkn hasznlt!
- XMP: Mintaszveg definilsa. Nem hasznlt. Javasolt helyette: PRE s SAMP .

45 / 45