Segdlet a HTML nyelv megismershez
Alapfogalmak:
A HTML dokumentum Egy egyszerû szvegfjl, amit brmilyen
szvegszerkesztõ programmal meg tudunk nyitni. Tartalmazhat szveget,
kpeket, hivatkozsokat tblzatokat s sok egyb sszetevõt. A fjlban
tallhat utastsokat a bngszõprogram hajtja vgre, nincs szksg
-ltalban- semmifle klsõ programra se.
1
Az llomnyokrl A HTML dokumentumban szmos olyan elemet
hasznlhatunk, melyeknl egy msik llomnyra hivatkozunk (pl.: Kpek,
letlthetõ fjlok, stb.), vagyis hasznljuk azt. Ilyen esetben mindig meg
kell hatrozni a bngszõ szmra, hogy az adott elem hol tallhat a
szmtgpen, hiszen azzal csak gy kpes dolgozni. Ezt a mûveletet
nevezzk tvonal megadsnak. Ktfajta tvonal megadsrl beszlhetnk: -
Abszolt (Teljes megads) ; - Relatv (A merevlemez valamely helyhez kpest
adjuk meg)
Abszolt tvonal megads: A hasznland llomny helyt pontosan
meghatrozzuk gy, hogy az adott merevlemez gykrknyvtrbl indulunk
ki (pl.: "C:\Dokumentumok\Kepek\nyitokep.jpg" , "D:\Web\Letoltesek\jatek.rar"
, stb.). Ezt a megadsi mdot merevsge miatt inkbb kerljk, ha lehet.
Relatv tvonal megads: Ennl a megadsi mdnl ahhoz a webfjlhoz kpest
adjuk meg az llomny helyt, amibõl arra hivatkozunk (pl.:
"nyitokep.jpg" ,"Letoltesek\jatek.rar" , stb.).
1
A TAG-ek fogalma A HTML nyelv gynevezett TAG-ekbõl (ejtsd:teg) pl fel,
amely a HTML nyelv egy-egy elemre utal. (Ezek felfoghatk tulajdonkppen
utastsoknak is)
-Egyszerû TAG elem: "<"TAG">", vagyis: "<"+"TAG elem neve"+">"
(Pldul: , , stb.) -Bellthat TAG
elem:"<"TAG"+tulajdonsgok+">", ahol a tulajdonsgok az adott TAG
elemre vonatkoz belltsi lehetõsgeket jelentik.(Pldul: A TAG,
amivel formzott szveget kszthetnk.)
Tbbsgben olyan TAG elemekkel tallkozhatunk, amik rendelkeznek nyit s
zr elemmel is, s a kzrefogott szvegen rvnyesl az adott TAG
hatsa. Ilyen pldul a -pros, ami az egsz webfjlunkat fogja
kzre. (?: Lthat, hogy a zr TAG elem abban klnbzik nyit prjtl,
hogy "/" jellel kezdõdik.) Emellett lteznek olyan elemek is, melyek
nem rendelkeznek zr elemmel.(Ilyen pldul a soremelõ TAG)
1
Sznek hasznlata A HTML nyelvben a sznrtket ktflekppen adhatjuk
meg: - Angol megfelelõjvel, a Color="szn" formban, ahol a szn rtkei a
kvetkezõk lehetnek:
- Egy hexadecimlis (16-os szmrendszer-beli) rtk segtsgvel,
melynl sajt szneket keverhetnk ki. Egy szn hrom alapsznbõl, a
Red- piros, a Green- zld s a Blue- kk sznbõl pl fel. Mindhrom
sszetevõ rtke 0-255 kztt lehet, attl fggõen, hogy az adott
sznrsz milyen mrtkben befolysolja a kikeverendõ sznt. (Pl. Ha Red=255;
Green=0, Blue=0 rtkeket vesz fel, akkor a szntiszta piros sznt kapjuk
rtkl.) A HTML nyelvben az egyes sznek rtket (pl. Red) nem 0-255
alakban kell megadni, hanem e tartomny 16-os szmrendszerbeli megfelelõjt
kell venni, teht a 00-FF tartomnyt (ahol 00- a 0 ,az FF pedig a 255
hexadecimlis megfelelõje), gy a kapott sznrtk egy 6 szmjegyû sznkd
lesz, hiszen hrom alapsznnk van.
Aranyszablyok, jtancsok - A bngszõk nem mutatnak egynl tbb,
egyms mellett lvõ szkzt (Megolds) - Ajnlatos a webdokumentumjaikat
mindig ".html" kiterjesztssel menteni. (A msik, ".htm" kiterjesztst a
rgebbi opercis rendszerek (pl. Microsoft Windows 3.1) hasznltk.) -
Amennnyiben olyan TAG-ot hasznlunk, amelynl tbb tulajdonsgot llthatunk
be, akkor az egyes tulajdonsgokat szkz billentyûvel (SPACE) kell
elvlasztanunk.(pldul: Font, Img elemek) - A HTML nyelvben mindig az a
formzsi bellts rvnyesl, ami a legkzelebb van a formzand
elemhez. Ttelezzk fel egy plda kedvrt, hogy egy tblzatnak
meghatroztuk a szvegsznt stlus segtsgvel. tmenetileg azonban ezt
fellrhatjuk, ha pldul egy cellban tallhat szveget TAG kz
tesznk, vagy a cella nyit tagjban (td) hivatkozunk egy msik
stlusra (pldul: ).
1
Egy HTML oldal felptse:
Egy webfjlt HTML TAG-el kell kezdeni, gy tudatjuk a bngszõvel, hogy a
fjl webfjl
Fejlc nyit TAG
Fejlc zr TAG Dokumentum trzsnek nyit TAG-je, ahol nhny
dokumentumra vonatkoz belltsokat is megadhatunk. Dokumentum trzsnek
zr TAG-je
A webdokumentum vgnek jelzsre szolgl zr TAG
A fejlcben megadhat fõbb tulajdonsgok:
Az a szveg, ami a bngszõ ablaknak cmsorban megjelenik
A dokumentumban hasznlhat stlusok ltrehozsa
A webfjl nyelvnek megadsa a bngszõ szmra
A BODY TAG belltsi lehetõsgei
BgColor="sznrtk" A webfjl httrsznt hatrozza meg
BackGround="kpfjl" A webfjl httere nem egy sznrtk lesz, hanem a
megadott kpfjl
Text="sznrtk" A dokumentum alap szvegszne. (? A - TAG-el tmenetileg
fellrhatjuk)
Link="sznrtk" A hivatkozsok szvegszne. (De pl. - II -)
VLink="sznrtk" A megltogatott (mr rkattintottunk) hivatkozsok
szvegszne. (De pl. -II-)
Link="sznrtk" Az ppen kivlasztott hivatkozs szvegszne. (De pl. -
II -)
Megjelenst befolysol elemek
Mindre jellemzõ, hogy a begpelt szvegekre fejtik ki hatsukat
Sortrs elhelyezsre. A elem utn a szveg a kvetkezõ sor
elejn folytatdik
"szveg" A "szveg" a bngszõben ugyan gy jelenik meg, mint a
HTML kdban (pl.soremelsek,szkzk)
Trhetetlen szkz, egyms mellett tbb szkz is ltszdni fog
bngszõnkben
"abc" Trhetetlen sorok. A kzrezrt sorokat a bngszõ nem trheti meg
sortrsekkel (ha tl hossz)
Elemek igaztsa
Nyit- s zr elemmel is rendekeznek, hatsuk nem csak a rott szvegre,
hanem szmos egyb HTML elemre is kiterjed, addg amg azt egy msik
igaztsi md fell nem rja, vagy a lezr TAG (
) nem hatstalantja
HTML elemek: A HTML elemeket balra igaztja
HTML elemek: A HTML elemeket jobbre igaztja
HTML elemek: A HTML elemeket kzpre igaztja
Ezen kvûl ltezik egy soremels nlkli kzpre igaztsi md is:
"szveg" : Kzpre igaztja az elemeket a TAG hatsa nlkl
Szveg stlusok
Kzs jellemzõjk, hogy nyit s zr elemekkel is rendekeznek, valamint
egymsra pûlõen is hasznlhatjuk õket
"szveg" : B - Bold) E TAG kztt a szveg flkvr stlus lesz.
"szveg" : I - Italic) A kzrezrt szveg dõlt lesz.
"szveg" : U - Underline) A kzrezrt szveg alhzott lesz.
"szveg" : A kzrezrt szveg thzott lesz.
Egyszerû szveg formz eszkzk
"szveg" Als index lesz a kzrezrt szveg. (Hasznos pldul kpleteknl
az indexek jellsre)
"szveg" A szveg felsõ indexknt fog ltszani( - II - )
(? A TAG-ek utols betûjnek "hasa" jellemzi az index helyt. P-Felsõ
index; b-als index)
"szveg" Megnagyobbtott betûket eredmnyez
"szveg" sszenyomott betûket eredmnyez
"szveg" Fejlc. A 'szam' rtke 1-6ig lehet, ahol 1-a legnagyobb, 6-a
legkisebb betûnagysg
"szveg" Villog szveg. Figyelem! Csak Netscape bngszõben mûkdik
!
A Marquee TAG
elem
Elemmozgats. Figyelem!Csak Internet Explorerben mûkdik jl!
A tulajdonsgokat nem kzelezõ megadni. Csak akkor kell, ha a szabvnyos
belltsoktl eltrõ rtkeket szeretnnk.)
A mozgatst a kvetkezõ tulajdonsggal szablyozhatjuk
Direction : A mozgs irnyt hatrozza meg.
Direction="Left" Jobbrl balra mozgs
Direction="Right" Balrl jobbra mozgs
Behavior : Itt adhatjuk meg, hogy mi trtnjen akkor, amikor elrtk a
mozgsi tartomny szlt
Behavior="Slide" Amint elrte a mozg szveg a szlessg rtket, megll
(Beszs)
Behavior="Scroll" Amint elrte a mozg szveg a szlessg rtket, jra
kezdi a mozgst (Fnyjsg)
Behavior="Alternate" Amint elrte a mozg szveg a szlessg rtket,
irnyt vlt (Ide-oda mozgs)
ScrollDelay : A mozgsi sebessget hatrozza meg
ScrollDelay="szmrtk" A szmrtk egy konkrt szm
ScrollMount : Lpsszm megadsa. Azt jelenti, hogy mekkora egysggel
mozgatunk
ScrollMount="szmrtk" A szmrtk egy konkrt szm
Width : Azt hatrozza meg, hogy a mozgs milyen szles tartomnyban
trtnjk
Width="szmrtk" Az szmrtk lehet konkrt szm, vagy a gazdaterlet egy
szzalkrtke
Height : Megadja, hogy a mozgats milyen magas tartomnyban trtnjk
Height="szmrtk" Az szmrtk lehet konkrt szm, vagy a gazdaterlet
egy szzalkrtke
(?: Az utbbi kt rtkbõl kiderl, hogy a mozgs egy tglalapnak
megfelelõ terleten megy vgbe)
A Font TAG
szveg Formzott szveg ksztse
A szveg kinzett az albbi tulajdonsggal llthatjuk be
Face : A betûtpus megadsa. Ajnlatos, hogy ellenõrizzk tbb
bngszõben is, a kinzett!
Face="betûtpus" A betûtpus egy, a bngszõ ltal tmogatott tpus
(Pldul: 'Arial')
Color : A szveg szne. Lehet egy szn angol megfelelõje, vagy ltalunk
kikevert rtk
Color="szn" A szn 18 alapszn lehet, angolul. A kd pedig egy hexadecimlis
rtk
Size : A betûk mrete. Ha nem adjuk meg, akkor a bngszõ az alap
betûnagysgot hasznlja
Size="szmrtk" Ahol a szmrtk 1-7 kztti tartomnyban lehet, ahol 1 a
legkisebb, 7 a legnagyobb mret
Stlusok hasznlata
A stlusokat a webfjl HEAD rszben kell megadni.
A 'nev' a stlus neve, amely ktfle tpus lehet: Egy HTML elemre
vonatkoz. pldul:
(?: Itt a H1-es mretû fejlcre vonatkoz stluselemeket adhatjuk
meg)
ltalnos. pldul:
(?: Itt egy olyan stlust adtuk meg, amire a Class='stilusnev' mdon
hivatkozhatunk, brmely stlust tmogat HTML elemben)
Lthat, hogy a belltand stlus-tulajdonsgokat pontosvesszõvel(;) kell
elvlasztani egymstl Az elsõ esetben egy HTML TAG stlust vltoztattuk
meg gy, hogy a 'nev'-hez egy TAGnevet rtunk. A msodik esetben egy sajt,
ltalnos clû stlust ksztnk, amit brmely olyan HTML elem nyit TAG-jban
elhelyezhetnk, ahol ennek hatsa rvnyeslhet. (Pl. ... , ...) ltalnos
stlus megadsa esetn, a stlusnv el pontot kell elhelyeznnk. (Pldnkban:
.stilusnev)
Nzzk a megadhat stluselemeket kategrijuk szerint csoportostva
Szveg megadsa
text-align : A szveg vszintes igaztsa
text-align:left Balra igazts
text-align:center Kzpre igazts
text-align:right Jobbra igazts
text-align:justify Sorkizrs Csak Netscape 6, Internet Explorer 6, vagy
jjabb bngszõkben
vertical-align A szveg fggõleges igaztsa
vertical-align:baseline Alapvonal (Norml magassg)
vertical-align:sub Alapvonal al
vertical-align:super Alapvonal fl
vertical-align:top Felre
vertical-align:middle Kzpre
vertical-align:bottom Alura
vertical-align:text-top A szveg tetejhez
vertical-align:text-bottom A szveg aljhoz
text-decoration Vzszintes vonalak elhelyezse a szvegben, illetve villog
szveg ksztse
text-decoration:none Nincs semmi sem. Ez az alaprtelmezs
text-decoration:underline Alhzott szveg
text-decoration:overline A szveg fl hzott
text-decoration:line-through thzott szveg
text-decoration:blink Villog szveg Csak Netscape 4-es bngszõben
hasznlhat
text-transform Kis-, s nagybetûk hasznlatt teszi lehetõv
text-transform:capitalize Az sszes sz kezdõbetûjt nagybetûre cserli
text-transform:uppercase Az sszes betût nagybetûsre alaktja
text-transform:lowercase Az sszes betût kisbetûsre alaktja
text-indent A bekezdsek s ms elemek behzsnak mrtkt
szablyozhatjuk
text-indent:"szmrtk" A szmrtk egy konkt szm
letter-spacing A betûk kztti tvolsgot llthatjuk
letter-spacing:"szmrtk" A szmrtk egy konkt szm
line-height A sor eleje s a kvetkezõ sor teteje kzti tvolsg megadsa
line-height:"szmrtk" A szmrtk egy konkt szm
Betûkszletek megadsa
font-family A betûtpus megadsa. Ajnlatos, hogy ellenõrizzk tbb
bngszõben is, a kinzett!
font-family:"betûtpus" Biztosan elrhetõ betûtpusok: 'Serif', 'Sans-serif',
'Cursive', 'Fantasy', 'Monospace'
font-size A betûk mrett hatrozza meg
font-size:"szm+mrtkegysg" Lsd a Stlusok mrtkegysge rsznl
font-style A betûstlus megadsa
font-style:normal Norml kinzetû
font-style:italic Dõlt
font-style:oblique Ferde
font-variant Kiskapitlis betûk hasznlata
font-variant:normal A kisbetûk a hagyomnyos mdon jelennek meg
font-variant:small-caps A kisbetûk, kismretû nagybetûkknt jelennek meg
(kiskapitlissg
font-weight A szveg vastagsgt hatrozza meg
font-weight:normal Hagyomnyos megjelens
font-weight:bold Flkvr bellts
Sznek s httrkpek megadsa
color A szvegszn belltsa
color:"szn" Lehet egy szn angol megfelelõje, vagy ltalunk kikevert rtk
(A sznek)
background-color Az elem htternek sznt hatrozza meg
background-color:"szn" Lehet egy szn angol megfelelõje, vagy ltalunk
kikevert rtk (A sznek)
background-image Az elem htternek kvnt kp megadsa
background-image:"elrsi t" Az elrsi t mutatja meg, hogy hol tallhat a
kp a szmtgpen
background-repeat Itt adhat meg, hogy a httrkp ismtlõdjn-e (mozaik)
vagy sem
background-repeat:"repeat" Ismtlõdik, ha a kp kisebb, mint az elem
htternek fellete
background-repeat:"repeat-x" Csak vzszintesen ismtlõdik
background-repeat:"repeat-y" Csak fggõlegesen ismtlõdik
background-repeat:"no-repeat" Csak egy pldnyban mutatja a httrkpet,
nem ismtli
background-attachment Itt llthatjuk be, hogy a dokumentum grgetsekor
a httrkpet is grgessk-e
background-attachment:fixed A httrkp mozdulatlan marad, mikzben a
webdokumentumot grgetjk
background-attachment:scroll A httrkp a webdokumentummal egytt mozog
grgetskor
background-position A httrkp helyzett llthatjuk be
Margk s keretek Ezen tulajdonsgok a margk, keretek, valamint a
dokumentumban szereplõ elemek magassgt s szlessgt lltjk be
margin Az dokumentum mind a ngy oldaln tallhat marg egyszerre
llthatjuk be
margin:"szmrtk" A szmrtk egy konkrt szm
margin-left Az dokumentum bal oldali margjt lltja be
margin-left:"szmrtk" A szmrtk egy konkrt szm
margin-right A jobb oldali margt lltja be
margin-right:"szmrtk" A szmrtk egy konkrt szm
margin-top A felsõ margt lltja be
margin-top:"szmrtk" A szmrtk egy konkrt szm
margin-bottom Az als margt lltja be
margin-bottom:"szmrtk" A szmrtk egy konkrt szm
width Egy HTML elem (pldul egy kp) szlessgt adja meg
width:"szmrtk" A szmrtk egy konkrt szm
float Egy HTML elem szveggel trtnõ krbefuttatsnak lehetõsge
(pldul egy kpnl)
clear Egy HTML elem szveggel trtnõ krbefuttatst ezzel tudjuk
lezrni
Stlusok mrtkegysge
pt Pont. A betûkszletek szabvnyos mrtkegysge, mely a monitorral van
sszhangban (pldul: 12pt)
px Kppontnyi mretezst tesz lehetõv. Hasznos pl. szmolgpeknl, ahol
ez a legkisebb egysg (pldul: 20px)
% A gazdterlet egy szzalkrtke (pldul: 200%)
Megjegyzsek elhelyezse a kdban
A "zrjelek" kztti kdot, a bngszõ figyelmen kvûl hagyja
A bngszõk a elemek kztti rsz nem veszik figyelembe. Ez jl jhet
magyarz szvegknt, vagy ppen hibakeressnl, ahol a problmt gy is
megtallhatjuk, hogy egy-egy kdrszt tmenetileg "kiszednk
Hivatkozsok hasznlata
HTML elemek A HTML elemre kattintva egy megadott helyre illetve fjlra
ugrunk
A hivatkozs viselkedst befolysol tulajdonsgok:
Href Megadja, hogy a hivatkozs hova mutat, hova lpnk ha rkattintunk
Href="webcm" A webcm "http://"-el kezdõdik, s
egy Internetes oldalra, vagy fjlra hivatkozik
(Ha a webcm nem egy webdokumentum llomny (pl. jatek.rar), akkor ez a
hivatkozs annak a fjlnak a letltst eredmnyezi)
Href="horgonynv" Egy megadott horgonyra ugrik. (Ha az az aktulis
webfjlban van, akkor "#" jellel kezdõdik)
Target Megadja, hogy a bngszõ melyik ablakban nyissa meg , a hivatkozott
cmen tallhat llomnyt
Target="_self" Abban az ablakban, ahonnan hivatkoztak az llomnyra
Target="_blank" Egy j ablakban nyitja meg
Target="_parent" A szlõablakban nyitja meg
Kpek hasznlata
Kp elhelyezse a webfjlban, megadott tulajdonsgok szerint
A kpet az albbi tulajdonsgok hatrozzk meg:
Src Megadja, hogy hol tallhat a megjelentett kp a merevlemezen
Src="elrsi t" Az elrsi t lehet abszolt, vagy a befogad webfjlhoz
kpest relatv (Az llomnyokrl)
Width A kp szlessgt hatrozza meg
Width="szmrtk" A szmrtk egy konkrt szm
Height A kp magassgt hatrozza meg
Height="szmrtk" A szmrtk egy konkrt szm
Border A kp krl keretet lehet kialaktani
Border="szmrtk" A szmrtk egy konkrt szm, mely megadja a keret
vastagsgt
Alt Itt adhatjuk meg, hogy milyen szveg jelenjen meg az egr mellett, amikor
azt a kp fl hzzuk
Alt="szveg" Ahol a szveg a megjelenõ megjegyzs
Usemap Ha a kpet kptrkpknt kvnjuk hasznlni, akkor itt lehet megadni a
tulajdonos trkp nevt
Usemap="trkpnv" A trkpnv a MAP Tag ltal meghatrozott trkp neve
Longdesc Az Src-ben megadott kp letltsig egy kisebb mretû (felbonts)
kpet jelenthetnk meg
Longdesc="elrsi t" Az a kp helye, amit a bngszõ csak ideinglenesen
(amg az Srcben megadott tltõdik) mutat
Tblzatok hasznlata
BackGround Vagy a tblzat htternek egy kpllomnyt is megadhatunk
BackGround="elrsi t" Az llomny elrsi tja
(?: Egy tblzatnak vagy csak httrsznt vagy csak httrknt megadott
kpllomnyt adhatunk meg, mindkettõt nem lehet)
Width A tblzat szlessgt hatrozza meg
Width="szmrtk" A szmrtk lehet konkrt, vagy a gazdaterlet egy
szzalkrtke
Height A tblzat magassgt hatrozza meg
Height="szmrtk" A szmrtk lehet konkrt, vagy a gazdaterlet egy
szzalkrtke
Border A tblzat cellinak keretvastagsgt hatrozza meg
Border="szmrtk" A szmrtk egy konkrt szm (Pl.: Ha Border="0", akkor
nincsenek rcsvonalak)
NoWrap Ez a kapcsol a a cellk szvegnek trdelst tiltja le
CellPadding Meghatrozza a cellk tartalma s a cellk kerete kztti
tvolsgot
CellPadding="szmrtk" A szmrtk egy konkrt szm
CellSpacing Segtsgvel a cellk egymstl val tvolsgt llthatjuk
be
CellSpacing="szmrtk" A szmrtk egy konkrt szm
A tblzat sorai:
cellk j sort a elem bersval tudunk kezdeni
Nzzk a tblzat sorait meghatroz tulajdonsgokat
Align A sort tartalmaz cellk vzszintes igaztst llthatjuk be ezzel
Align="Left" A cellaelemeket balra igaztja
Align="Center" A cellaelemeket kzpre igaztja
Align="Right" A cellaelemeket jobbra igaztja
vAlign A sort tartalmaz cellk fggõleges igaztst llthatjuk be
ezzel
vAlign="Top" A cellaelemeket a cella tetejhez igaztja
vAlign="Center" A cellaelemeket fggõlegesen kzpre igaztja
vAlign="Bottom" A cellaelemeket a cella aljhoz igaztja
(?: Mindkt igaztsi mdot egyttesen is hasznlhatjuk)
A tblzat celli:
HTML elem j cellt a elem bersval nyithatunk
Kvetkezzenek a cella tulajdonsgok:
Align , vAlign Az igaztsi mdok ugyanazok, mint a sornl megismertek
Rowspan Sorok egyestse
Rowspan="szmrtk" Az aktulis sortl a szmrtkben megadott sort nyit
egybe
Colspan Cellk egyestse
Colspan="szmrtk" Az aktulis celltl a szmrtkben megadott cellt nyit
egybe
|