szabad muszaki foiskola - web programozas

Szabadkai Mszaki Fiskola

WEB PROGRAMOZS

Szabadka

Mester Gyula, 2004.

2

Elsz

A kzirat a Web technolgik XHTML, CSS s PHP korszer tmakreinek alapjaival

foglalkozik. A tantrgy keretben a hallgatk megismerkednek a WEB programozs alapjaival,

nll feladatok megoldsn keresztl elsajttjk a WEB programozs, a dinamikus weboldalak

ksztsnek technikjt. Az XHTML s CSS fejldst a Word Wide Web Consortium (W3C, 1994) vllalta. A tmakrket

a szerz az 2002/2003. tanvtl kezdve oktatja. A tmakr feldolgozsa a nemzetkzi szakirodalom

utbbi vekben publiklt eredmnyein s a W3C ajnlsain alapszik. Az olvas a kziratban

szerepl ismeretek elsajttsval korszer tuds birtokba kerl, de szembe kell nzni azzal a

tnnyel is, hogy a tudsanyag rvid idn bell elavul. A kzirat elektronikus formban elrhet a

szerz honlapjn:

http://www.gmesterweb.com/e-tananyag

Az els tmakr az XHTML jellnyelv alapjaival foglalkozik s 14 fejezetbl ll. Az els fejezet

az XHTML alapfogalmaival, alapszablyaival s a dokumentumtpus defincikkal foglalkozik. A

kziratban az XHTML-1.0- Transitional DTD-t hasznljuk. Az XHTML dokumentumok alapszerkezete a msodik fejezet tartalma. A harmadik fejezetben

pedig XHTML nyelv attribtumait trgyaljuk. A szvegblokk XHTML formzsa a negyedik

fejezet tartalma. A szveges dokumentum XHTML sorformzsval pedig az tdik fejezetben

foglalkozunk. A hatodik fejezetben a hiperhivatkozsokat a hetedik fejezetben pedig a kpek

begyazst trgyaljuk. A nyolcadik fejezet a listk ltrehozsval foglalkozik. Kitrnk a: sorszm

nlkli listk, sorszmozott listk s a ler listk vizsglatra. A kilencedik fejezet az XHTML

tblzatokat, a tizedik fejezet pedig a kereteket trgyalja. A Java-appletek beillesztse az XHTML dokumentumba a tizenegyedik fejezetben tekintjk t. A

tizenkettedik fejezet pedig az XHTML rlapokkal foglalkozik. A kvetkez fejezet a begyazott,

kls szkriptekkel s az esemnyszkriptekkel foglakozik. Az utols fejezet az XHTML

kdrszletek ellenrzst mutatja be. A msodik tmakr az CSS (Cascading Style Sheet- lpcszetes stluslapok) alapjaival foglalkozik

s 5 fejezetbl ll. Az XHTML a dokumentum megjelentst a stluslapokra bzza. A stluslapok

segtsgvel az XHTML dokumentum szerzje a Web oldal minden megjelensbeli jellemzjt

bellthatja az ignyeknek megfelelen. A CSS specifikcinak tbb verzija ltezik. A mai

3

bngszk kezelni tudjk az els kt verzit (CSS1 s CSS2). A W3C jelenleg a harmadik verzi

fejlesztsn dolgozik (CSS3).

A bevezets utn a msodik fejezetben a beptett- s csatolt stluslapok felptst trgyaljuk. A

harmadik fejezet a stlusosztlyokkal foglalkozik. A negyedik fejezet ttekinti a szvegformzst

stluslapok alkalmazsval. Az tdik fejezet pedig a eltrszn httrszn tematikt trgyalja. A

tmakr vgn egy ellenrztt XHTML s CSS tfog feladatot mutatunk be. A knyvben

nagyszm pldt mutatunk be a Jegyzettmb s a megfelel bngszprogram felhasznlsval.

A harmadik tmakr a PHP alapjaival foglalkozik s 11 fejezetbl ll. Az alapfogalmak ttekintse

utn a PHP programfejleszts eszkzeit tekintjk t. Kvetkez fejezet tartalma programkszts a

PHP fejleszti krnyezetben. A negyedik fejezet a PHP nyelv alkotelemeit trgyalja. Az tdik

fejezet a vezrlszerkezetekkel foglalkozik, tartalma: feltteles utastsok, elgazsok,

ciklusszerkezetek.

A hatodik fejezetben a PHP fggvnyekkel foglalkozunk, majd az llomnyok begyazst s a

tmbk hasznlatt tekintjk t. A harmadik tmakr kilencedik fejezete a PHP s MySQL

adatbzis-kezelst trgyalja. Majd kln foglalkozunk a PHP szkriptek hozzfrs-korltozsval s

a MySQL, Apache s PHP teleptsvel s konfigurlsval.

Kln szeretnk ksznetet mondani a jegyzet lektornak Dr. Pletl Szilveszter fiskolai tanrnak.

Krem az olvaskat, hogy szrevteleiket a:

[email protected]

cmre juttassk el.

Szabadka, 2004. december. Mester Gyula

4

_______________________________________________________________________________

XHTML jellnyelv

________________________________________________________________________________

1. Az XHTML nyelv alapfogalmai 1.1 Bevezets Az XHTML (Extensible HyperText Markup Language) egy struktrban gazdag jellnyelv, amely

a megjelentst a stluslapokra bzza, modulris alapokra pl s egyttmkdik az XML

(Extensible Markup Language) alap felhasznli alkalmazsokkal. Az XHTML jellnyelv

megjelense s alkalmazsa az Internet fejldsnek egy fontos lpcsfokt jelenti. Az XHTML

fejldst a Word Wide Web Consortium (W3C, 1994) vllalta. A W3C ajnlsok formjban adja

ki s fejleszti az XHTML szabvnyait (http://www.w3.org). Az ajnlsokat s a szabvnyokat

munkacsoportok dolgozzk ki. gy elmondhat, hogy a HTML (HyperText Markup Language)

jellnyelv az SGML ( Standard Generalized Markup Language szabvnyostott ltalnos

jellnyelv) egy leegyszerstett rszhalmazaknt jtt ltre, a W3C pedig talaktotta a HTML-t

XHTML alkalmazss. A tovbbiakban az XHTML 1.0 SE (msodik kiads) verzijval

foglalkozunk (XHTML 1.0 ajnls: 2000. janur 26; fellvizsglva: 2002. augusztus 1.)

Az XHTM jellnyelv alkalmazsnak az elnyei a kvetkezk:

Az XHTML dokumentumok megfelelnek az XML kiterjeszthet jellnyelv elrsainak. Az XHTML dokumentumok kompatibilisek a HTML 4 jellnyelvben rt

dokumentumokkal.

Az XHTML dokumentumok alkalmazhatjk a szkripteket s appleteket. Az XHTML nyelv tisztbb s merevebb kdot biztost mint a HTML. Az XHTML jellnyelv tovbbfejldik (a HTML nem!), jelenleg az XHTML 2.0 verzi

fejlesztsnl tartunk.

Az XHTML dokumentumok elksztse szempontjbl a kvetkez eszkzkre lesz szksgnk:

5

a. Szvegszerkeszt A szvegszerkeszt az XHTML dokumentum megszerkesztsre szolgl. Megfelel brmilyen

egyszer szvegszerkeszt, amely formzs nlkli ASCII-szveget llt el, pldul a Jegyzettmb

(Notepad). Az XHTML dokumentum fejleszts leghatsosabb eszkze (a munka s a knyelem

szempontjbl) a:

Macromedia Dreamweaver MX 2004

hasznlata (rendelkezik kdsznezssel s kifejezs-szerkesztvel.)!

b. Webbngsz A bngsz az XHTML dokumentumok szmtgpen val megjelentsre szolgl program.

Clszer alkalmazni a szleskren hasznlt webbngszket mint pldul a:

Microsoft Internet Explorer

Netscape Navigator

Mozilla

Opera

1.2 Az XHTML jellnyelv alapszablyai Az XHTML jellnyelv alapszablyai kis szm, egyszer s jl rthet szintaktikai szablyokbl

ll: a.

Minden jellelem tartalmaz nyit- s zr jellelemet.

Teht minden megnyitott jellelemet be kell zrni! A nyit- s zr jellelem neve megegyez

kell, hogy legyen.

Helyes plda:

Internet alkalmazsfejleszts

Helytelen plda:

Internet alkalmazsfejleszts

b. Minden jellelem szablyosan egymsba gyazand.

Az egymsba gyazott jellelemeket a deklarls sorrendjvel ellenttesen kell lezrni. Teht az

utoljra megnyitott jellelem kerl elszr bezrsra. Helyes plda:

Nyugaton a helyzet vltozatlan Helytelen plda:

Nyugaton a helyzet vltozatlan

6

c. Az XHTML dokumentumok szablyosan formzandk.

Az XML ltal bevezetett j formzottsg kvetelmnyei:

- Az XHTML dokumentumban - gykr-jellelemet megelzen - DOCTYPE

(Document Type Definition dokumentumtpus- definci) deklarcit helyeznk el.

- A title dokumentumcm hasznlata ktelez.

- Az XHTML dokumentumban a:

gykr jellelem a legmagasabb szint jellelem.

- Az sszes (tetszleges szm) jellelemet a gykr jellelembe kell szablyosan

begyazni.

- Egy nyit- s zr jellelem kztt tetszleges szm tovbbi jellelemet (vagy

szveges adatot) helyezhetnk el. Az XHTML dokument alapfelptse a kvetkez:

...

1.1. kdrszlet Az XHTML dokument alapstruktrja A jl formzott XHTML dokumentum betartja az sszes XHTML szablyt! d.

A jellelem- s attribtumnevek kisbetvel randk.

Az XHTML jellelem- s attribtumnevek rzkenyek a kis s nagybetkre. Minden XHTML

jellelemet kisbetvel kell rni!

Helyes plda:

Leben und leben lassen Helytelen plda:

Leben und leben lassen

7

e. Az attribtum rtkeket mindig idzjelelek kzz randk.

A nyit jellelemben az attribtumok rtkeit mindig nyit- s zr idzjelek kztt szksges

megadni.

Helyes plda:

Helytelen plda:

f. Az res jellelemek per jellel (/) lezrandk.

Abban az esetben, ha az XHTML jellelemhez nem tartozik adat, a nyit- s zr jellelem

sszevonhat gy, hogy a perjelet a nyit jelljelem vgre helyezzk. Az res karakter (white

space) szkz megadsa a per jel (/) eltt ktelez!

Helyes plda:

Helytelen plda: g. Az attribtum-rtk prok teljessgkben kirandk.

Az XHTML nem tmogatja az attribtumok minimalizcijt! Helyes plda: Helytelen plda:

h.

A name attribtum helyett id attribtum hasznland.

Az XHTML-ben a name attribtumot lecserltk az id attribtummal! Helyes plda:

Helytelen plda:

1.3 Dokumentumtpus defincik A dokumentumban - gykr-jellelemet megelzen - DOCTYPE deklarcit kell elhelyezni. A

DTD dokumentumtpus definci (Document Type Definition), olyan XML lersok sszessge,

amelyek meghatrozzk a dokumentumtpus defincit hasznl dokumentum rvnyes struktrjt.

A DTD meghatrozza a dokumentum ltal elrhet jellelemeket s attribtumokat.

8

Az XHTML jellnyelvnl hrom tpus DTD-t ismernk:

a. XHTML-1.0-Strict

1.2. kdrszlet Az XHTML -1.0-Strict DTD

Az XHTML-1.0-Strict DTD (szigor megfelels dokumentumok) hasznlata akkor clszer ha

szigor jellnyelv struktrt hasznlunk s a megjelentst a stluslapokra bzzuk a CSS

technolgia alkalmazsval. Alkalmazsa esetben az XHTML dokumentumunk teljes egszben

megfelel a szabvnynak.

b. XHTML 1.0 Transitional

1.3. kdrszlet Az XHTML -1.0- Transitional DTD

Az XHTML-1.0- Transitional1 DTD (tmeneti dokumentumok) hasznlata akkor clszer, ha az

XHTML alkalmazsa mellet kompatibilitst szeretnnk elrni a meglv Weboldalakkal s a

rgebbi tpus bngszkkel.

c. XHTML 1.0 Frameset

1.4. kdrszlet Az XHTML -1.0- Frameset DTD

Az XHTML-1.0- Frameset DTD (keretes dokumentumok) hasznlata akkor clszer ha az XHTML

alkalmazsa mellet kompatibilitst szeretnnk elrni a HTML keretek alkalmazsval, amelyek a

Weblapot keretekre (rgikra) osztjk.

1 A knyv tovbbi rszben az XHTML-1.0- Transitional DTD-t hasznljuk.

9

2. Az XHTML dokumentumok alapszerkezete Egy XHTML dokumentum hrom szerkezeti egysgre bonthat:

a. Az els rsz egy deklarcis rsz, amely arrl ad informcit, hogy a dokumentumunk az XHTML nyelv melyik verzijban rdott:

2.1. kdrszlet Az XHTML dokument alapstruktrja

A deklarcis rsz els sora:

azt hatrozza meg, hogy a dokumentumunk egy XML dokument unicode (UTF-8) kdolssal.

A deklarcis rsz msodik sora:

meghatrozza, hogy a Weboldalunkon tmeneti DTD-t hasznlunk.

A deklarcis rsz harmadik sora:

meghatrozza, hogy itt kezdjk a Weboldalunk XHTML rszt s megadjuk a nvtr deklarcijt.

Fontos megjegyzs: A deklarcis rsz megadsa ktelez s nem hagyhat ki! A deklarcis rsz megadsa utn, kvetkezik az XHTML dokumentum fejlce s a trzse, amely

kz zrjuk a teljes dokumentumot. Az XHTML dokumentum a zr jellelemmel

fejezdik be.

b. A msodik rsz egy fejlc jellelem:

... amely olyan informcikat tartalmaz, amelyek az egsz dokumentumra vonatkoznak. A s

a fejlc jellelem kztt helyezzk el a dokumentumcmet a:

dokumentumcm jellelem segtsgvel, melynek szveges tartalma a bngsz cmsorban jelenik meg (nem a

Weblapon!). Plda:

My Life

2.2. kdrszlet Fejlc jellelem dokumentumcmmel

10

Fontos megjegyzs: Minden XHTML dokumentum tartalmaz jellelemet a

jellelembe begyazva.

c. A harmadik rsz a dokumentum trzse:

... ide kerl az a tartalom, amelyet meg szeretnnk jelenteni a bngszkben (szveg, kp,

hivatkozsok, listk stb.). A kvetkez egyszer pldadokumentum tartalmazza a deklarcis rszt, valamint a fejlc s trzs

jellelemet:

XHTML iskolaplda

Ez egy egyszer XHTML dokumentum.

2.3. kdrszlet Egy egyszer XHTML feladat kdrszlete A kdblokkunk forrsszvegt mentsk el a iskola-pelda.html nev llomnyba (a fjlnvvlaszts

tetszleges, a html kiterjeszts ktelez!). Tltsk be a megszerkesztett XHTML fjlt a

webbngszbe, ekkor a 2.1. brn lthat eredmnyt kapjuk.

2.1. bra A feladat kdrszlet eredmnye a bngszprogramban

11

3. XHTML nyelv attribtumai

A nyit jellelemek, a jellelem azonostn kvl, klnfle attribtum rtket is

tartalmazhatnak:

attribtum=rtk

alakban (a zr jellelemek nem tartalmazhatnak attribtumokat)! Az attribtumokkal tovbb

szablyozhatjuk a krlfogott szveg formzst. Az XHTML attribtumok listja:

accesskey class dir id lang style tabindex title

A tovbbiakban bemutatjuk az XHTML fontosabb attribtumait.

3.1 class attribtum

Az XHTML jellelemeknek olyan neveket adhatunk, amelyek bizonyos osztlyokhoz ktdnek,

gy mindezekre az jellelemekre rvidtett rsmddal stluslapokat alkalmazhatunk. A:

class=name attribtum alkalmazsa esetben a name azt az osztlynevet hatrozza meg, amelyikhez tartozik. 3.2 id attribtum

Az id=name

attribtum alkalmazsa estben a name egyedileg meghatrozza a jellelemet. Az XHTML

dokumentumban minden jellelem id attribtuma egyedi kell, hogy legyen! 3.3 title attribtum

A

title=string attribtum lehetv teszi, hogy a Weboldal rszeit megcmezzk. A string az a szveg, amely

megjelenik, ha a felhasznl az egrrel rmutat. 3.4 lang attribtum

Az

xml: lang=xx lang=xx attribtum, ahol az xx ktbets kd, meghatrozza a Weboldalnl hasznlt nyelvet (magyar: hu,

angol: en, el grg , fr francia stb.).

12

A kvetkez egyszer pldadokumentum a lang attribtum alkalmazst mutatja be:

XHTML lang attributum plda

The future is fuzzy

3.1. kdrszlet Az XHTML lang attribtum plda

A kdblokkunk forrsszvegt mentsk el a lang-pelda.html nev llomnyba. Tltsk be a

megszerkesztett XHTML fjlt a webbngszbe, ekkor a 3.1. brn lthat eredmnyt kapjuk.

3.1. bra A kdrszlet eredmnye a bngszprogramban

3.5 style attribtum

A

style=string attribtum helyi jelleg stilsmeghatrozst tesz lehetv. Az idzjelbe rjuk be a kvnt

stlusformt. Pldul:

style=color: red, border: solid A kvetkez egyszer pldadokumentum a style attribtum alkalmazst mutatja be:

13

XHTML style attribtum pelda

The future is fuzzy

3.2. kdrszlet A style attribtum alkalmazsa

A kdblokkunk forrsszvegt mentsk el a style-pelda.html nev llomnyba. Tltsk be a



4. Szvegblokk XHTML formzsa A tovbbiakban ttekintnk nhny szvegblokk formz XHTML jellelemet.

4.1 p s br jellelemek

Az XHTML nyelv a

szveg jellelemet hasznlja az j bekezds (paragrafus) ltrehozsra. Az j bekezds eltt res sort

hagy.

14

Ha egy bekezdsen bell j sort szeretnnk kezdeni, akkor a:

jellelemet hasznljuk soremelsre. Amikor a bngsz egy jellelemhez r, akkor az utna kvetkez szveget j sorban a bal margnl kezdi (4.1. bra). Megjegyzs: a br s a /

jelek kztti szkz hasznlata ktelez! Plda:

p s br jellelem plda

Minden XHTML dokumentum bekezdsekbl ll.

Ez egy j bekezds.

Itt pedig sortrs trtnikamelynek hatsra j sorban folytatdik a szveg.

4.1. kdrszlet A p s br jellelem plda A kdblokkunk forrsszvegt mentsk el. Tltsk be a megszerkesztett XHTML fjlt a

webbngszbe, ekkor a 4.1. brn lthat eredmnyt kapjuk.


15

4.2 hx jellelem Az XHTML nyelvben 6 cmsor-szint ltezik a cmek s alcmek jellsre:

cm ahol x egy szm 1 s 6 kztt, ami a cmszintet jelli. Az els (legfels) szint cm jelenik meg

legnagyobb, a hatodik szint cm pedig a legkisebb betmrettel. A cmek megjelentsekor nincs

megadva pontosan a bettpus s a fontmret, ezrt a klnbz bngszk msknt jelentik meg

azokat (4.2. bra). A jellelem alkalmazsa utn res sor kvetkezik. Plda:

hx jellelem plda

Fcmsor

Alcmsor

4.2. kdrszlet A hx jellelem plda

Tltsk be a megszerkesztett s elmentett XHTML fjlt a webbngszbe, ekkor a 4.2. brn

lthat eredmnyt kapjuk.


16

4.3 hr jellelem Vzszintes vonalakat a:

jellelem segtsgvel tudunk ltrehozni. A jellelem egy vzszintes elvlaszt vonalat helyez el a Weboldalon, a rendelkezsre ll szlessgben.

Plda:

hr jellelem plda

XHTML

4.3. kdrszlet A hx jellelem plda A kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor a

4.3. brn lthat eredmnyt kapjuk.


17

4.4 pre jellelem A

szveg jellelem segtsgvel elre formzott szveget tudunk ltrehozni. A szvegblokk ilyenkor

pontosan gy jelenik meg, ahogy azt begpeltk az XHTML dokumentumba (4.4. bra): Plda:

pre jellelem plda

$i= 2;

if ($i

18


4.6 div jellelem A:

szveg jellelem segtsgvel a Weboldalt rszekre tudjuk osztani. Ez akkor clszer, amikor az

Weboldalrszekre nll stlust szeretnnk alkalmazni. A div jellelemmel a kvetkez

attribtumokat hasznlhatjuk:

Az id=name attribtum alkalmazsval a name egyedileg meghatrozza a jellelemet. A class=name attribtum alkalmazsval a name azt az osztlynevet hatrozza meg,

amelyikhez tartozik a jellelem.

4.7 address jellelem Az

szveg jellelem segtsgvel a Weboldal szerzjnek az email cmt adjuk meg. Az address jellelem

ltalban a Weboldal kezdetn vagy vgn tallhat.

Plda:

Webmester

4.5. kdrszlet Az address jellelem alkalmazsa

19

5. Szveges dokumentum XHTML sorformzsa A XHTML dokumentumokban az informci egyik f hordozja a szveg. Szveges

dokumentumok kezelsnl igen fontos feladat a szvegek formzsa. A szveg formzsra a CSS

stlustechnikt alkalmazzuk, a szveg alapformzsra viszont az XHTML nyelvben szmos

jellelem ltezik. A tovbbiakban ttekintnk nhny szvegkarakter-formz XHTML

jellelemet.

5.1 b, strong, em s i jellelemek Flkvr karaktereket a:

szveg ltalnosnl vastagabb (kiemelt) szveget:

szveg ltalnosnl jobban hangslyozott szveget:

szveg dlt karaktereket pedig az:

szveg jellelemek segtsgvel tudunk ltrehozni (5.1 bra).

Plda:

b, strong, em s i jellelem plda

Internet

HTTP

Web

HTML

5.1. kdrszlet A b, strong, em s i jellelem plda

20

A kdblokkunk forrsszvegt mentsk el. Tltsk be a megszerkesztett XHTML fjlt a

webbngszbe, ekkor az 5.1. brn lthat eredmnyt kapjuk.


5.2 big s small jellelemek A krnyez szveghez viszonytva nagyobb betformtumot a:

szveg kisebb betformtumot pedig a:

szveg jellelem alkalmazsval hozhatunk ltre (5.2. bra):

Plda:

big s small jellelem plda

Az XHTML az Internet publikls s alkalmazsfejleszts

nyelve.

A HTML (Hypertext Markup Language) nyelvet eredetileg

szvegalap dokumentumok kezelsre fejlesztettk ki.

5.2. kdrszlet A big s small jellelem plda

21




5.3 sub s sup jellelemek

Alsindexet a: als index felsindexet pedig a: fels index jellelemek segtsgvel tudunk ltrehozni. Plda (5.3. bra):

sub s sup jellelem plda

H2O

x3

5.3. kdrszlet A sub s sup jellelem plda

A kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor az


22

5.3. bra Az kdrszlet eredmnye a

bngszprogramban

5.4 cite, dfn s var jellelemek

Idzeteket a: idzet

jellelem hasznlatval, defincikat:

definci jellelemek alkalmazsval hozhatunk ltre. Plda:

dfn plda

Az XHTML (Extensible HyperText Markup Language) egy struktrban

gazdag jellnyelv, amely a megjelentst a stluslapokra bzza, modulris

alapokra pl s egyttmkdik az XML (Extensible Markup Language) alap

felhasznli alkalmazsokkal.

5.4. kdrszlet A dfn jellelem plda

23

A kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor a


5.4. bra Az kdrszlet eredmnye a bngszprogramban

Vltoznevet pedig a:

vltoznv jellelemek alkalmazsval hozhatunk ltre.

Plda:

var jellelem plda

$x=2

5.5. kdrszlet Az var jellelem plda

24




5.5 tt, code, kbd, samp jellelemek Fixpontos betket eredmnyez a:

szveg jellelem hasznlata, ekkor a szveg azonos trfoglals, az rgp kimenethez hasonl

karakterekkel jelenik meg. Plda:

tt plda

print ("Hello from xHTML");

5.6. kdrszlet A tt jellelem plda

25



5.6. bra Az kdrszlet eredmnye a bngszprogramban

Kdrszleteket:

kdrszlet jellelemek segtsgvel tudunk ltrehozni. Plda:

code plda

$autok []= "Audi";

$autok []= "BMW";

$autok []= "Fiat";

$autok []= "Ford";

$autok []= "Honda";

$autok []= "Toyota";

print $autok[5];

5.7. kdrszlet A code jellelem plda

26



5.7. bra Az kdrszlet eredmnye a bngszprogramban Billentyfelirat jelzst:

szveg mintk bemutatst pedig:

plda jellelemek segtsgvel tudunk ltrehozni.

5.6 acronym jellelem Az:

rvidts jellelem egy szbl ll rvidtett fogalmak magyarzatra szolgl (5.8. bra). Plda:

acronym jellelem plda

USA

5.8. kdrszlet Az acronym jellelem plda

27




5.7 ins, del jellelemek Az

begyazott szveg jellelem begyazott szveg bemutatsra szolgl (a begyazott szveg alhzott).

Plda:

ins jellelem plda

Az XHTML kdrszlet ellenrzse igen fontos feladat. Az ellenrzssel

mdunkban van betartani a W3C ajnlsait s kikszblni a hibkat az XHTML

kdrszletekben.

5.9. kdrszlet Az ins jellelem plda



28

5.9. bra A kdrszlet eredmnye a bngszprogramban Szvegtrlst a:

kitrlt szveg jellelem segtsgvel valstjuk meg. A kitrlt szveg thzott. Plda:

del jellelem plda

Jelenleg az xHTML 1.0 verzi fejlesztsnl tartunk.

5.10. kdrszlet Az del jellelem plda



5.8 span jellelemek A

szveg in-line jellelem szerepe az, hogy komplett szvegblokkot magba zrva, a tbbi szvegtl

elklntett, nll stlust rendelhessnk hozz. Attribtumai: style=string, class =name vagy

id=name.

29

5.10. bra A kdrszlet eredmnye a bngszprogramban 6. Hiperhivatkozsok Az XHTML dokumentumok egymshoz csatolsbl addik az XHTML jellnyelv hatkonysga.

Az XHTML dokumentum rszeihez hivatkozsokat (linkeket) helyezhetnk el, amelyeket

aktivizlva, a hivatkozottal sszefggsben lv szveghez juthatunk el. A hiperhivatkozsok

ltrehozsra az:

jellelemet hasznljuk. A page.html a hivatkozott Weboldal URL cme. A nyit jellelem legfontosabb attribtuma a href (hypertext reference), ami azt a Webcmet

azonostja, ahov a hiperhivatkozs aktivizlsa esetben kell elugrania a bngsznek. Teht az

jellelembe rt szvegmezre rkattintva a href-ben megadott Webcmre kerlnk. A sajt

Weboldalaink esetben relatv, idegen Weboldalak esetben pedig abszolt URL cmeket

hasznlunk. Amikor a felhasznl az egrrel rmutat a hivatkozsra a megfelel URL cm

megjelenik, ha pedig rkattint megjelenik a krt Weboldal.

Plda hiperhivatkozs Weboldalra:

Hiperhivatkozs Weboldalra

Hiperhivatkozs Weboldalra

30

Volleyball

6.1. kdrszlet Hiperhivatkozs Weboldalra

Plda hiperhivatkozs Webcmre:

Hiperhivatkozs Webcmre

Hiperhivatkozs a W3C Web cmre

W3C Web site

6.3. kdrszlet Hiperhivatkozs Webcmre A kdblokkunk forrsszvegt mentsk el. Tltsk be a megszerkesztett XHTML fjlt a

bngszbe s a 6.1. brn lthat eredmnyt kapjuk.


31

Ha a felhasznl az egrrel rkattint a hivatkozsra, akkor megjelenik a krt Weboldal:

6.2. bra Az egrkattints eredmnye a bngszprogramban. A fent bemutatott eljrsok a kezd Weboldalra vezetnek bennnket ( az index.html vagy

default.html fjlokra), ha viszont a hivatkozsnak egy msik fjl valamely pontosan meghatrozott

rszre kell mutatnia, akkor hivatkozott Weboldalon n. horgonyt kell elkszteni ahov a

hivatkozs mutat:

ahol a jelz szveg, amely meghatrozza a hivatkozott Weboldalt. Az gy elksztett horgonyra val

hivatkozs felrhat kvetkezkppen:

ha a horgony ugyanabban a dokumentumban tallhat:

ha a horgony az XHTML dokumentummal megegyez knyvtrban tallhat:

ha a horgony egy msik Webcmen tallhat , akkor a teljes URL cmet kell felrnunk:

7. Kpek begyazsa A kpek begyazsra az:

jellelem szolgl. Tbb attribtuma is van teht, pldul:

src=image.url A kpfjl helyt (URL-jt) tartalmazza.

height - Megadja a kp magassgt kppontokban.

width - A kp szlessgt adja meg kppontokban.

border - kpkeret vastagsgt hatrozza meg kppontokban.

id=kpazonost

32

Ha a kpfjl a XHTML dokumentummal megegyez knyvtrban tallhat, akkor csak a fjlnevet

kell megadnunk.

Plda: guru.gif

Ha a kpfjl a XHTML dokumentumhoz kpest egy msik knyvtrban tallhat, akkor a fjlnevet

egy tvonallal kell kiegszteni.

Plda: images/guru.gif

Ha a kpfjl egy msik Web cmen tallhat, akkor megadjuk a teljes http cmet. Plda:

Kepek beagyazasa

7.1. kdrszlet Kpbegyazsi plda




33

8. Listk ltrehozsa Az XHTML nyelvben:

sorszm nlkli, sorszmozott s ler

listt hasznlunk, melyek egymsba gyazhatk, gy komplex listk hozhatk ltre. A Weboldal

tartalma leghatkonyabban listk alkalmazsval valsthat meg.

8.1 Sorszm nlkli listk Akkor hasznljuk, ha nincs szksg a listasorok szmozsra. A sorszm nlkli listt (unordered

list):

jellelem segtsgvel tudjuk megnyitni. A listaelemet (list item):

jellelem alkalmazsval tudjuk elhelyezni a listban bajusz mgtt. Ahny listaelemnk van,

annyi jellelemsort runk fel. A sorszm nlkli listk alaprtelmezett bajuszos

bekezdsjele: (disc). Sorszm nlkli listaplda kdrszlete (8.1. bra):

Sorszmozatlan lista

Sorszmozatlan lista

Els listasor

Msodik listasor

Harmadik listasor

8.1. kdrszlet Sorszmozatlan lista feladat

34




8.2. Sorszmozott listk Sorszmozott listt akkor hasznlunk ha szksges a listaelemek szmozsa. A sorszmozott listt

(ordered list):

jellelem hasznlatval valsthatjuk meg.

A listaelemeket jellelemsorokkal tudjuk elhelyezni a listban sorszm mgtt. Ebben

az esetben is ahny listasorunk van, annyi jellelemet runk fel. A sorszmozott listk

alaprtelmezett bekezdsjele: 1,2,3,.... Sorszmozott listaplda kdrszlete:

Sorszmozott lista

Sorszmozott lista

Els listasor

35

Msodik listasor

Harmadik listasor

8.2. kdrszlet Sorszmozott lista A kdblokkunk forrsszvegt mentsk el. Tltsk be a megszerkesztett XHTML fjlt a


8.2. bra A kdrszlet eredmnye a bngszprogramban Az utasts 1-tl kezdi a listasorok szmozst. A sorszmozott lista esetben a kezd sorszm

kzvetlenl megadhat a:

formj nyit jellelemmel, ahol az n a kezd sorszm. A stluslapokban a:

list-style-type: marker stlusjellelem bevitelvel a kvetkez formj bajusz vagy sorszmjellst kapjuk meg:

MARKER RTK: BAJUSZ/SORSZMJELLS marker ="disc" marker =" circle " marker =" square " marker ="decimal" 1, 2, 3, ... marker ="upper-alpha" A, B, C, ... marker ="lower-alpha" a, b, c, ... marker ="upper-roman" I, II, III, ... marker ="lower-roman" i, ii, iii, ...

8.1. tblzat

36

A stluslapokban a:

list-style-image: url(image.gif) stlusjellelem bevitelvel kp formj bajusz vagy sorszmjellst kapunk (az image.gif kpfjlt

hasznlja).

8.3. Ler listk Ler listt (definition list) akkor hasznlunk ha az egyes lista jellelemekhez tartozhat egy

hosszabb lers is. A ler listt a:

nyit-s zr jellelemek kz kell zrni. A listk egyes kifejezseit a:

(terms) jellelemekben, a kifejezsekhez tartoz lersokat pedig a:

jellelemekben tudjuk elhelyezni. Ler listaplda kdrszlete (8.3. bra):

Ler lista

Leir lista

Els kifejezs

Az els kifejezs hosszabb lersa

Msodik kifejezs

A msodik kifejezs hosszabb lersa

Harmadik kifejezs

A harmadik kifejezs hosszabb lersa

8.3. kdrszlet Ler lista feladat

37




9. XHTML tblzatok Egy XHTML tblzatot a:

jellelemmel hozunk ltre. A tblzat egszre rvnyes egyes attribtumokat a nyit jellelemben adjuk meg a

kvetkezkppen:

border=szm keretmret,

cellpadding=szm meghatrozza az res hely nagysgt a cellkon bell az adatok krl,

cellspacing=szm meghatrozza az res hely nagysgt a cellk kztt,

width=szm tblzatmret,

bgcolor=sznkd httrszn. Egy XHTML tblzat tblzatsorokbl s cellkbl ll. A tblzatsorokat a:

jellelemmel hozunk ltre s ezek kztt kell az adott tblzatsor egyes cellit meghatrozni.

38

A tblzatcellkat a:

jellelem segtsgvel hozunk ltre.

XHTML tblzatok programtrzse:

1 sor s 2 cella:

9.1. kdrszlet Az egysoros ktoszlopos

tblzat kdrszlete

2 sor s 2 cella:

9.2. kdrszlet A ktsoros ktoszlopos

tblzat kdrszlete

Plda: egysoros ktoszlopos tblzat

Egyszer tblzat

Cella 11

Cella 12

39

9.3. kdrszlet Az egysoros ktoszlopos tblzat kdrszlete A kdblokkunk forrsszvegt mentsk el. Tltsk be a megszerkesztett XHTML fjlt a


9.1. bra A kdrszlet eredmnye a bngszprogramban Plda: ktsoros hromoszlopos tblzat

Ktsoros s hrom oszlopos tblzat

Cella 11

Cella 12

Cella 13

Cella 21

40

Cella 22

Cella 23

9.4. kdrszlet A ktsoros hrom oszlopos tblzat A kdblokkunk forrsszvegt mentsk el. Tltsk be a megszerkesztett XHTML fjlt a



A tblzatnak a:

jellelemmel cmet adhatunk amely a tblzat felett jelenik meg.

Plda:

Egyszeru tablazat

41

XHTML tblzat

Cella 11

Cella 12

Cella 13

Cella 21

Cella 22

Cella 23

9.5. kdrszlet A ktsoros hromoszlopos tblzat cm s cella elrendezssel A kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor az



42

A rowspan s a colspan attribtumok segtsgvel sorokat s oszlopokat lehet sszevonni egy

tblzatban:

rowspan =szm az sszevont sorok szma colspan =szm az sszevont oszlopok szma

Plda:

sszevont oszlopos tblzat

XHTML tblzat

Cella 11+12

Cella 13

Cella 21

Cella 22

Cella 23

9.6. kdrszlet A ktsoros hromoszlopos tblzat, cm s cella elrendezssel valamint kt sszevont oszloppal


9.4. brn lthat eredmnyt kapjuk. A tblzat fejlcnek ltrehozsra a:

jellelem szolgl. A fejlcben lv adatok flkvr karakterekkel rdnak ki.

43

A tblzat lblcnek ltrehozsra a:

jellelem szolgl. A lblcben lv adatok is flkvr karakterekkel rdnak ki. A tblzat trzst:

jellelemmel hozhatjuk ltre (a lblc utn kell megadni).

A

jellelem segtsgvel a tblzat tbb oszlopt tudjuk egyszerre ltrehozni. Az itt megadott

attribtumok az sszes ltrehozott oszlopra rvnyesek! A

jellelem segtsgvel megadhatjuk a tblzat egy oszlopt a jellelemen bell.

9.4. bra A kdrszlet eredmnye a bngszprogramban Plda:

44

sszevont soros tblzat

XHTML tblzat

Cella 11+21 Cella 12 Cella 13 Cella 22 Cella 23

9.7. kdrszlet A ktsoros hromoszlopos tblzat, cm s cella elrendezssel valamint kt sszevont sorral A kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor az



45

A

jellelemet hasznljuk a cella megadsra ha azt akarjuk, hogy a cella gy viselkedjen mintha

fejlc lenne. A cella szvege flkvr lesz. Plda:

Fejlc 9.8. kdrszlet A fejlc kdrszlete

Az XHTML tblzatok egymsba gyazhatk, A cellk tartalmazhatnak szveget, kpet, de akr

egy j tblzatot is! sszetett Weblapot megjelenthetnk tblzatknt is.

10. XHTML keretek

Az XHTML keretek alkalmazsval a Weblapot rszekre (rgikra) oszthatjuk. A rgikban az

egy-egy nll XHTML dokumentum tartalmt jelenthetjk meg. A keretek alkalmazsa akkor

clszer, ha a Weboldal egyes rszeinek a tartalma nem vltozik (gy akkor nem kell mindig jra

tlteni).

A XHTML kereteket az n. frameset dokumentumban a:

jellelem segtsgvel adjuk meg. Meghatrozza a keretek szmt s mrett. A jellelem hasznlata esetben nem hasznlhatunk jellelemet!

A nyit jellelem cols s rows attribtumban az egyes keretek mrete fggleges vagy vzszintes irnyban, % -ban vagy pixelben adhat meg. A maradk kpernyterletre *

karakter hasznlatval lehet hivatkozni.

A:

jellelem szolgl a tnyleges kerettartalmak megadsra. Egy jellelem annyi jellelemet tartalmaz, ahny rszre osztottuk a Weboldalt. A kerethatrol vonalak egr segtsgvel elmozdthatk a bngszben.

Az

jellelem Weboldalon belli keret ltrehozst teszi lehetv. Felhasznlhat egy XHTML oldal

begyazsra egy msik XHTML oldalba.

46

A kvetkez feladat kt vzszintes keretet mutat be.

Vzszintes keretek

10.1. kdrszlet Vzszintes keretfeladat




A kvetkez feladat hrom fggleges keretet mutat be.

47

Fggleges keretek

10.2. kdrszlet Fggleges keretfeladat




A kvetkez plda esetben vegyes keretmegoldst mutatunk be:

48

Vegyes keret plda

10.3. kdrszlet Vegyes keretfeladat



10.3. bra A kdrszlet eredmnye a bngszprogramban 11. Java-appletek beillesztse az XHTML dokumentumba A Java magasszint, objektum-orientlt, internet-programozsi nyelv. A Javban ihatk Java-

appletek, amelyek nem nll Java-programok, mivel az Applet megjelentshez Java-kompatibilis

webbngszt ignyelnek. A Java-applet beillesztsre az XHTML dokumentumba a:

jelljellelemet hasznljuk.

49

A classid=java:file.class

attribtummal a lefordtott .class kiterjeszts Java-applet nevt adjuk meg.

A width=szlessg

attribtummal a kpernyn megjelen Applet szlessgt adjuk meg kppontokban (pixel). A

height=magassg attribtummal a kpernyn megjelen Applet magassgt adjuk meg kppontokban (pixel). A nyit s zr object jellelem kz a:

jellelem segtsgvel megfelel szm paramtert helyezhetnk el. A Java-applet futtatshoz, az Applet meghvsra a szvegszerkesztvel szerkesztennk kell teht

egy megfelel XHTML-dokumentumot (11.1. bra).

Udvozlet2

11.1. kdrszlet Java-applet XHTML dokumentum Mentsk el a megszerkesztett XHTML-dokumentumot tetszleges nven .html kiterjesztssel

ugyanabba a knyvtrba ahol a Java-applet is tallhat. Tltsk be a megszerkesztett XHTML fjlt

a Java-kompatibilis webbngszbe (vagy a Java Applet Viewer-be), ekkor az Applet vgrehajtdik

(11.1. bra). Amikor a webdokumentum szolgltatja megrja a Java-appletet, a megfelel XHTML

dokumentumba hivatkozst helyez el az Appletre, majd a Java-appletet s a XHTML

dokumentumot a szerveren helyezi el. Ha egy internetfelhasznl webbngszje segtsgvel

letlti az XHTML dokumentumot, akkor az Applet vgrehajtdik.

Fontos megjegyzs: Egy Java-applet csak a webbngszvel egyttmkdve tud lefutni!

50

11.1. bra Az Applet megjelense a bngszprogramban

12. XHTML rlapok Az rlapok (szvegablakok, adat- s jelszbeviteli mezk, gombok, vlasztgomb csoportok) az

XHTML dokumentumban a prbeszdet teszik lehetv. Feldolgozsukhoz kln programot kell

hasznlni (pldul PHP programokat).

12.1. rlapkszts Minden rlap jellelem a:

rlaptartalom jellelem kztt kell, hogy elhelyezkedjen amely a kitltend rlap tartalmt jelli ki. A tartalmat az action attribtumban megadott szkript program dolgozza fel:

action=script.url ahol a script.url a PHP szkript elrsi tvonala. A form jellelem action paramtere arra a PHP

fjlra mutat, amely feldolgozza az rlapon megadott adatokat. Ha az action attribtum csak a

fjlnak a nevt adja meg, akkor az XHTML s a PHP programot tartalmaz fjloknak egy

knyvtrban kell lennik. A:

method=POST attribtum meghatrozza a kitlttt rlap tovbbtsi mdjt a feldolgoz szkript program fel.

Lehetsges rtkei:

51

GET az URL-ben, POST adatcsomagban (biztonsgosabb md) tovbbtja az adatokat.

Ha nem tartjuk clszernek, hogy az rlap adatait egy szkript program dolgozza fel, akkor

vlaszthatjuk azt a megoldst, hogy a felhasznl ltal kitlttt adatokat elektronikus postval

tovbbtjuk. Ekkor a kldend szveg formattlsra felhasznljuk a kvetkez attribtumot:

enctype=text/plain Az action attribtumban pedig megadjuk az e-mail cmet ahov az adatokat tovbbtjuk:

action=mailto:e-mail cm

12.2. Adatbeviteli mezk Az adatbeviteli mezket az:

jellelemmel hozhatjuk ltre.

A name attribtum rtke a meznv, amely alapjn a feldolgoz szkript program azonostja a

bevitt adatot.

A type attribtum hatrozza meg a beviteli mez adattpust. Lehetsges adattpusok:

1. Nyomgomb: type=button

2. Kapcsol (tbb is kivlaszthat egyszerre): type=checkbox

A checkbox tpus mez esetben a:

checked=checked attribtum alkalmazsval alaprtelmezsknt bekapcsoljuk a kapcsolt.

3. Csatoland fjl: type=file

4. Rejtett adattpus (bevitelkor nem jelenik meg): type=hidden

5. Kp: type=image

6. Jelsz (bevitelkor nem jelenik meg): type=password

7. Rdikapcsol (egyszer csak egyet lehet kivlasztani): type=radio

52

A radio tpus mez esetben a:

checked=checked attribtum alkalmazsval alaprtelmezsknt bekapcsoljuk a rdikapcsolt.

8. Inicializl gomb: type=reset

A reset gomb lenyomsa alaprtkkel tlti fel az adatbeviteli mezket.

9. Adattovbbt gomb: type=submit

A submit gomb lenyomsnak hatsra kldjk el az rlapok adatait a feldolgoz szkript (PHP)

programnak. A submit s a reset gombokhoz tartoz:

value=felirat attribtum alkalmazsval a gombok feliratt hatrozzuk meg .

10. Szveg: type=text

A text s password adattpus beviteli mez esetn a beviteli ablak szlessgt a:

size=mret az ablakba bevihet maximlis szveghossz pedig a:

maxlenght=rtk attribtumokkal hatrozzuk meg. Plda:

Jelsz megads

Jelsz megads:

12.1. kdrszlet A jelsz megadsa

53




A: value=szveg

attribtum alkalmazsval a szveg adatot veszi fel alaprtelmezs-knt a szveges beviteli mez. A:

szveg jellelemmel hozhatjuk ltre a tbbsoros szvegbeviteli mezt. A name attribtum rtke a

meznv. A:

rows=rtk s

cols=rtk attribtumok a megnyl beviteli ablak sorainak szmt s szlessgt adjk meg. A:

value=szveg

attribtum alkalmazsval az alaprtelmezsknt megjelentend szveg adhat. Ha a felhasznlnak egy lista kszletbl szeretnnk vlasztsi lehetsget adni akkor ezt a:

szveg jellelem alkalmazsval tudjuk megtenni. A nyit jellelem jelzi a lista kezdett, alapbelltsban egy legrdl ment eredmnyez. A:

name=nv attribtum rtke a meznv, amely alapjn a feldolgoz szkript program azonostja a bevitt

listakszlet nevt.

54

A: size=sorok

attribtum meghatrozza, hogy hny sorban jelenjenek meg a vlaszthat listajellelemek.

Megadsval szkrollozhat ment kapunk (alaprtelmezs szerint legrdlt).

A listba az szveg

jellelem segtsgvel tudunk listajellelemeket elhelyezni. Egyszerre tbb listajellelem kijellsre a:

multiple=multiple attribtumot hasznljuk. Plda:

Legrdl men

Halasbolt:

csuka

harcsa

ponty

keszeg

12.2. kdrszlet A legrdl men kdrszlete

55




Egyszer gombot a:

... jellelem segtsgvel tudunk ltrehozni. A gombhoz szkripteket rendelhetnk, melyek

gombnyomssal aktivldnak. Az informcik csoportostsra a:

szvegblokk jellelemet hasznljuk, mely jellelem kztti szvegblokkot a bngsz (a tbbi szvegtl

elklntve) bekeretezve jelenti meg.

A:

cmkeszveg jellelem alkalmazsval a keret bal fels szln cmkeszveget is rhatunk. A mezk a:

felirat jellelemmel feliratozhatk. Plda:

56

rlap kitlts

Szemlyi adatok

Vezetknv Keresztnev Szletsi dtum

12.3. kdrszlet rlapkitlts


57

13. XHTML szkriptek

13.1 Alapfogalmak, begyazott s kls szkriptek Szkripteknek azokat a kis programokat nevezzk, amelyek a XHTML oldalakkal egytt, vagy

azokba gyazva tltdnek le a kliens szmtgpre. Teht a szkriptek lehetnek:

begyazottak az XHTML programba, vagy kls szkriptek.

A szkripteket a bngszprogramok futtatjk.

Az XHTML dokumentum fejlcben a:

Script-tartalom elemet hasznljuk a begyazott szkript kd elhelyezsre. A script elem segtsgvel futatni tudjuk

a JavaScript, JScript s VBScript programokat. A language-name meghatrozza a szkript nyelvet,

amelyet alkalmazunk.

Kls szkriptek hasznlata esetben:

Szkript-tartalom

a szkript meghvsra a kvetkez attribtumot hasznljuk:

src=script.url ahol a script.url a kls szkript elrsi tvonalt hatrozza meg.

A charset=code attribtum segtsgvel a kls szkript jellkszlett hatrozhatjuk meg ha a

code helybe a kls szkript jellkszletnek a nevt rjuk be.

Plda:

JavaScript-tartalom A fenti plda esetben JavaScript-tet hasznlunk, amelynek az elrsi tvonala:

http://subotica.net/prog Nem minden bngsz tmogatja a szkriptek hasznlatt. Azok szmra, akik ilyen bngszt

hasznlnak, alternatv megoldst nyjt a

Szveges megjegyzs elem. A nonscript elem nyit- s zr jelleleme kz teht szveges megjegyzst tehetnk. Ez a

szveg akkor jelenik meg, ha a bngsz nem tudja futtatni a szkriptet. Futtatsuk szempontjbl a szkripteket feloszthatjuk:

58

a. Automatikusan futtat szkriptek ezek akkor aktivldnak, ha a bngsz beolvassa ket.

A felhasznl ezekre a szkriptekre nem tud kihatni.

b. Esemnyszkriptek akkor aktivldnak, ha a felhasznl aktivlja ket.

13.2 Esemnyszkriptek Az XHTML dokumentumokban a kvetkez esemnyeket (events) hasznlhatjuk:

onload - aktivldik, ha a bngsz beolvassa a Web oldalt, a body elemmel hasznlhat.

onunload - aktivldik, ha a bngsz kitrli a Web oldalt, a body elemmel hasznlhat.

onclick - aktivldik, ha a felhasznl rkattint a Web oldal elemre.

ondblclick - aktivldik, ha a felhasznl ktszer rkattint a Web oldal elemre.

onmousedown - aktivldik, ha a felhasznl rmutat az XHTML elemre.

onmouseup - aktivldik, ha a felhasznl rmutatva az XHTML elemre, elengedi az egr

gombjt.

onmouseover - aktivldik, ha a felhasznl rmutat a Web oldal elemre.

onmouseout - aktivldik, ha a felhasznl az egrkurzorral elhagyja a Web oldal elemt.

onmousemove - aktivldik, ha a felhasznl az egrkurzorral elmozdul a Web oldal elemn.

onselect - aktivldik, ha a felhasznl kivlaszt valamilyen szveget a Web oldalon.

onfocus - aktivldik, ha a felhasznl kivlaszt valamilyen elemet a Web oldalon.

onblur aktivldik, ha a felhasznl elhagyja az elzleg fkuszlt elemet.

onkeypress - aktivldik, ha a felhasznl ber valamilyen jelet a Web oldal rlapjra.

onkeydown - aktivldik, mieltt a felhasznl felengedi a gombot.

onkeyup - aktivldik, amikor a felhasznl a bers utn felengedi a gombot.

onsubmit - aktivldik, ha a felhasznl megnyomja az rlap gombjt.

onreset - aktivldik, ha a felhasznl megsemmisti az rlapot.

onchange - aktivldik, ha a felhasznl megvltoztatja az rlapon az rtket.

14. XHTML kdrszletek ellenrzse Az XHTML kdrszlet ellenrzse igen fontos feladat. Az ellenrzssel mdunkban van betartani a

W3C ajnlsait s kikszblni a hibkat az XHTML kdrszletekben.

59

Az ellenrzshez a W3C Weboldaln tallhat oldalakat hasznlhatjuk, webcme:

http://validator.w3.org vagy valamilyen ellenrzsi programot, mint pl. a:

CSE HTML Validator Lite v 3.50 amelynek webcme:

http://www.htmlvalidator.com

A W3C ellenrzsi oldala olyan formot tartalmaz, ahov berhatjuk az oldalunk URL-jt. Az

ellenrz program az llomnyunkban megadott DTD-t fogja hasznlni. Ha kitltttk a formot a

weboldalunk ellenrzse megtrtnik. Az ellenrzs eredmnye lehet:

hibkat tartalmaz, vagy rvnyes, a W3C ajnlsainak megfelel oldal.

A kvetkez ellenrzsi pldnl bemutatjuk a CSE HTML Validator Lite v 3.50 ellenrz program

hasznlatt. A kitztt cl egy XHTML tblzat kdrszletnek az ellenrzse. A 14.1-es kdrszlet

bemutatja az ellenrztt XHTML dokumentumot (az ellenrzst a F6-os gombbal indtottuk el).

14.1. kdrszlet Ellenrztt hibs XHTML dokumentum

Az elvgzett ellenrzs utn vilgosan leolvashatk a hibajelzsek! A hibk kijavtsa s az jabb

ellenrzs utn mr lthat, hogy az XHTML dokumentumunk megfelel a W3C ajnlsainak (14.2-

es kdrszlet)!

60

14.2. kdrszlet Ellenrztt, a W3C ajnlsainak megfelel XHTML dokumentum

14.3. bra Az ellenrztt s kijavtott kdrszlet eredmnye a bngszprogramban

61

CSS technolgia

1. Bevezets

A W3C (World Wide Web Consortium) hozta ltre a CSS (Cascading Style Sheet- lpcszetes

stluslapok) specifikcit. A CSS technolgia alkalmazsnak alapvet clja:

bevezetni a stluslapok (Style Sheet) alkalmazst az XHTML dokumentum formzsi utastsai helyet,

sztvlasztani az XHTML dokumentum tartalmi rszt a megjelentsi stlusjellelemektl.

Az XHTML teht a dokumentum megjelentst a stluslapokra bzza. A stluslapok segtsgvel az

XHTML dokumentum szerzje a Web oldal minden megjelensbeli jellemzjt bellthatja az

ignyeknek megfelelen. A kaszkd (Cascading) elnevezs arra utal, hogy egy Web dokumentum

megjelentse tbb stluslap egyttes hatsnak eredmnye. A CSS specifikcinak tbb verzija ltezik. A mai bngszk kezelni tudjk az els kt verzit

(CSS1 s CSS2). A W3C jelenleg a harmadik verzi fejlesztsn dolgozik (CSS3).

2. Stluslapok felptse

2.1 Alapfogalmak

A stluslap a stlusinformcit nll stlusdefincik sorozataknt adja meg. A stlusdefinci

struktrja kt rszbl ll:

1. Ttelnv, amely meghatrozza, hogy a stlusinformci melyik jellelemekre vonatkozik. A

ttelnv lehet egy XHTML jellelem neve (ez esetben az jellelem nevt nem tesszk kisebb-

nagyobb jelek kz!), vagy egy globlis osztlynv.

2. Deklarcis blokk, amelyben pontosvesszkkel elvlasztva stlusdeklarcik szerepelnek. A

deklarcis blokkot kapcsos nyit- s csuk zrjelek kz zrjuk.

62

Minden stlusdeklarci szintaktikailag ngy rszbl ll (2.1 bra):

az attribtum nevbl, kettspontbl, az attribtum adott rtkbl s pontosvesszbl:

2.1. bra A stlusdefinci struktrja Egy egyszer stluslapstruktra pldt az 2.1. kdrszlet mutat be:

h1 {

color: red;

}

2.1. kdrszlet Egyszer stluslapstruktra plda

A 2.1. kdrszletben bemutatott stluslap egy stlusdeklarct tartalmaz, amely a h1 jellelemre

vonatkozik s azt rja el, hogy a hatkrbe tallhat sszes h1 jellelem szvegblokkja piros

sznnel jelenjen meg. A fenti plda esetben:

h1 a ttelnv, { color: red; } - a deklarcis blokk, color: - az attribtum neve kettsponttal, red; - az attribtum rtke pontosvesszvel.

A 2.2. kdrszletben bemutatott stluslap kt stlusdeklarct tartalmaz, amely a h1 jellelemre

vonatkozik s azt rja el, hogy a hatkrbe tallhat sszes h1 jellelem szvegblokkja 12

pontos betvel s piros sznnel jelenjen meg. Ez esetben az attribtumok nevt s rtkeit felsorols

kzben pontosvesszvel vlasztjuk el egymstl:

h1 {

font-size: 12px;

color: red;

}

2.2. kdrszlet Kt stlusdeklarcit tartalmaz plda

ttelnv{

attribtum: rtk;

}

63

Megjegyzs: Az utols attribtum rtk utn nem ktelez kirni a pontosvesszt. Ha szksges tbb jellelemre ugyanazt a deklarcis blokkot alkalmazni, akkor a ttelnv helyn

tbb jellelem nevt (csoportmegads) is megadhatjuk (2.3 kdrszlet). Ez esetben a ttelneveket

felsorols kzben vesszvel vlasztjuk el egymstl:

h1, h2, h3 {

font-size: 12px;

color:red;

}

2.3. kdrszlet Hrom jellelemre vonatkoz stlusdeklarci A 2.3 kdrszlet annyiban klnbzik az 2.2 kdrszlettl, hogy a deklarcis blokk a h1

jellelem mellett mg a h2 s h3 jellelemekre is vonatkozik. A CSS-XHTML kztti kapcsolatot megoldhatjuk:

Beptett stluslapokkal. Csatolt stluslapokkal. Jellelembe rendelt stluslappal. Importlt stluslap segtsgvel.

A kvetkez fejezetekben csak az els kt CSS-XHTML kapcsolat megvalstst trgyaljuk.

2.2 Beptett stluslapok

A beptett stluslapokat az XHTML dokumentum fejrszben a:

< style type = text/css > stlusdefincik jellelem segtsgvel definiljuk. A type attribtum a stluslapra trtn hivatkozs formjt adja

meg (text/css).

A kvetkez egyszer plda kt beptett stlusdefincit tartalmaz amelyek a font tpusra, sznre

nagysgra s a h1 s h2 jellelemekre vonatkozik. Az els stlusdefinci a h1 jellelemre vonatkozik s elrja, hogy az sszes h1 jellelem

szvegblokkja Ariel tpus, piros szn s 18 pontos nagysg betvel jelenjen meg. A msodik

stlusdefinci a h2 jellelemre vonatkozik s elrja, hogy az sszes h2 jellelem szvegblokkja

Verdana tpus, fekete szn s 12 pontos nagysg betvel jelenjen meg.

64

Beptett stluslap plda

h1 { font-family: Arial; color: #ff0000; font-size: 18px; }

h2 { font-family: Verdana; color: #000000; font-size:12px; }

Intelligence everywhere The future is Fuzzy

2.4. kdrszlet Beptett stluslap plda A kdblokkunk forrsszvegt mentsk el a beepitettstiluslappelda.html nev llomnyba. Tltsk

be a megszerkesztett XHTML fjlt a webbngszbe, ekkor a 2.2. brn lthat eredmnyt kapjuk.

2.2. bra A feladat eredmnye a bngszprogramban

65

2.3 Csatolt stluslapok

A beptett stluslapok alkalmazsa tbb Web dokumentum esetben kt okbl nem clszer:

minden Web dokumentumhoz kln-kln le kell tlteni a stlusdefinickat (idignyes s hlzatterhel),

A stlusdefinci megvltoztatsa megkveteli a vltoztatst kln-kln minden Web dokumentumban.

A csatolt (kls) stluslapok hasznlata idelis arra az esetre, ha a Web dokumentjainknl ugyanazt

a stlus szeretnnk alkalmazni. Ez esetben a kls stluslapot mint szvegllomnyt (Text Only, Text

Document vagy ASCII) megszerkesztjk majd egy .css kiterjesztssel troljuk. Az gy elksztett

(kls) stluslapra a fejlc jellelembe hivatkozunk a kvetkez mdon:

ahol a href=url.css a .ccs llomny (relatv) elrsi tvonala. Clszer az XHTML

dokumentumot s a .css fjlt ugyanabban a knyvtrban elhelyezni! A kvetkez plda esetben csatolt stluslapot alkalmazunk a 2.3. brkon lthat pldnl (a font

tpusra, sznre s nagysgra vonatkozik alkalmazva a h1 s h2 jellelemekre). A kls

stluslapot mint szvegllomnyt megszerkesztjk majd stiluslap.css nven troljuk:

h1 {

font-family: Arial;

color: #ff0000;

font-size: 36px;

}

h2 {

font-family: Verdana;

color: #000000;

font-size:18px;

}

2.5. kdrszlet A stiluslap.css szvegllomnya Az gy elksztett kls stluslapra az XHTML dokumentum fejlc jellelembe hivatkozunk a

kvetkez mdon:

66

ahol a href=stiluslap.css a .ccs llomny (relatv) elrsi tvonala. Pldnknl az XHTML

dokumentumot s a stiluslap.css fjlt ugyanabban a knyvtrban helyeztk el! Az XHTML

dokumentum kdrszlete a kvetkez:

Csatolt stluslap plda

Intelligence everywhere

The future is Fuzzy

2.6. kdrszlet Az XHTML dokumentum

A kdblokkunk forrsszvegt mentsk el a csatoltstiluslap.html nev llomnyba. Tltsk be a

megszerkesztet XHTML fjlt az IE 6.0 bngszprogramba, ekkor a 2.3. brn lthat eredmnyt

kapjuk.

2.3. bra Az XHTML kdrszlet eredmnye a bngszprogramban

67

Ha pedig a csatolt stluslapnl a h1 s h2 jellelemekre ugyanazt a stlust szeretnnk alkalmazni,

akkor a stluslap j szvegllomnya a kvetkez:

h1, h2 {

font-family: Arial;

color: #ff0000;

font-size: 18px;

}

2.7. kdrszlet A stiluslap.css j szvegllomnya gy a csoportmegadsos csatolt stluslap (2.4. bra) eredmnye az IE 6.0 bngszprogramban a

kvetkez:

2.4. bra Az j stluslap eredmnye a bngszprogramban 3. Stlus osztlyok

A CSS technolgia lehetv teszi a stlusosztlyok ltrehozst. A stlusosztlyokat az XHTML

dokumentum fejrsznek style jellelemben adhatjuk meg. Az gy megadott stlusdefinci az

sszes olyan szvegblokkra vonatkozik, amelynl a nyit jellelem tartalmazza a megadott

stlusosztly nevt. Szvegmegjelentskor a nyit jellelem CLASS attribtumban

hivatkozhatunk a stluslapon definilt osztlyra. Ltrehozhatunk osztlyokat, amelyek az utd osztlyok alapjul szolglnak. Ezt nevezzk

rkldsnek, amely lehetv teszi, hogy az osztlyokbl (sosztlyok) j osztlyokat

szrmaztassunk (utd osztlyok). A utd osztlyok rklik s kiterjeszthetik az sosztly

tulajdonsgait, kivve, ha fellrjuk ket. Pldul ha a body jellelemet kkre lltjuk, akkor, mivel

a b jellelem a body-n bell van, a b jellelem kk sznben s flkvren jelenik meg.

68

3.1. Stlusosztlyok ltrehozsa egy adott ttelnven bell

Egy adott ttelnven bell szmtalan stlusdefinict hozhatunk ltre, melyeket egy-egy

osztlyazonostval klntnk el egymstl.

Pldul a 3.1. kdrszleten lthat stlusdefinci hatkre csak a news osztlyhoz tartoz h1

jellelemekre vonatkozik.

h1.news {

color: red;

}

3.1. kdrszlet A news osztlyhoz tartoz h1 jellelemekre vonatkoz stlusdeklarci 3.2. Beptett stlusosztlyok ltrehozsa

Egy beptett osztly esetn a stlusdefinic elejn csak az osztlynevet adjuk meg. Ez esetben a

stlusdefinic az sszes olyan szvegblokkra vonatkozik, amelynl a nyit jellelem tartalmazza

az adott osztlynevet. Teht a 3.2. kdrszleten lthat stlusdefinic hatkre minden news

osztlyhoz tartoz jellelemre vonatkozik.

.news{

color: red;

}

3.2. kdrszlet A news osztlyhoz tartoz stlusdeklarci A stlusosztlyok alkalmazst bemutatjuk a kvetkez plda esetben:

Bepitett stlusosztly plda

.nagy {

font-size: 36px;

}

69

Intelligence everywhere

The future is Fuzzy

3.3. kdrszlet A stlusosztly feladat kdblokkja

Ltrehoztuk teht a kvetkez stlusosztlyt:

.nagy {

font-size: 36px;

}

3.4. kdrszlet A .nagy osztlyhoz tartoz stlusdefinic A fejrszbe beptett osztly esetn a stlusdefinic elejn csak a .nagy osztlynevet adtuk meg.

Szvegmegjelentskor a span nyit jellelem CLASS attribtumban hivatkoztunk a stluslapon

definilt .nagy osztlyra. A pldnknl teht a .nagy osztly csak a span jellelem ltal kzrefogott

szveg (The future is Fuzzy) betnagysgt lltja be 36 pontra. A kdblokkunk forrsszvegt mentsk el a stilusosztaly.html nev llomnyba. Tltsk be a


3.1. bra A stlusosztly feladat eredmnye a bngszprogramban Az XHTML dokumentumok stlusdefincija tbb osztlyt is tartalmazhat, amelyeket egymsba

gyazhatunk. Kt osztly alkalmazst szemlletesen bemutatjuk a kvetkez plda esetben:

70

Begyazott stlusosztly plda

.nagy { font-size: 36px; }

.szin { color: green; }

Intelligence everywhere The future is Fuzzy

3.5. kdrszlet A begyazott stlusosztly feladat kdblokkja A .nagy osztly utn ltrehoztuk a .szin stlusosztlyt is, amely zld szvegsznt llt be. A weblap

body rszben a .szin osztlyt alkalmazzuk az Intelligence everywhere szveg megjelentsre,

valamint begyaztuk a .nagy osztlyba a future szveg zld szn megjelentse cljbl. A

kdblokkunk forrsszvegt mentsk el a beagyazottosztaly.html nev llomnyba. Tltsk be a

megszerkesztet XHTML fjlt a webbngszbe, ekkor a 3.2. brn lthat eredmnyt kapjuk.

3.2. bra A begyazott stlusosztly feladat eredmnye a bngszprogramban

71

Az elz pldhoz viszonytva, most az Intelligence everywhere s a future szveg zld

sznben jelenik meg! Mivel a .szin osztly a .nagy osztlyba van gyazva, rkli a .nagy osztly

sszes belltsait (font-size: 36px). A .szin osztly csak azokat a bettpus-jellemzket vltoztatja

meg, amelyeket maga a .szin osztly ad meg (color:green).

4. Szvegformzs stluslapokkal

Az XHTML dokumentumban az informci egyik f hordozja a szveg. A szveg formzsa igen

fontos feladat s e clra a stluslapokat hasznljuk. A tovbbiakban rviden bemutatjuk a karakter

formzs CSS technolgijt.

4.1. Karakter formzs

Bettpusok kivlasztsa

A klnfle bettpusok felhasznlsval szleskr lehetsgeink vannak a megjelentend szveg

formzsra. A bettpusok kivlasztsnl a stlusdeklarci ltalnos alakja:

{font-family:name} ahol a nameegy vagy tbb kivlasztott bettpus neve. A font-family attribtummal teht egy

jellelem betkszlett adhatjuk meg. Pldk:

body {

font-family: Arial, Times New Roman,sans-serif;

}

4.1. kdrszlet Bettpusok kivlasztsa

h1, h2, h3 { font-family: Verdana, Courier,sans-serif; }

4.2. kdrszlet Bettpusok kivlasztsa

Clszer teht tbb bettpust kivlasztani mivel nem biztos, hogy minden bngsz rendelkezik a

fontkszletnkkel. A font-family rkldik.

Dltbets betformtum

Dltbets betformtumot eredmnyez a kvetkez stlusdeklarci:

72

{font-style : italic} vagy

{font-style: oblique}

Plda:

p { font-style: italic; }

4.3. kdrszlet Dltbets betformtum

A dltbets formtumot a kvetkez stlusdeklarcival vltoztathatjuk meg:

{font-style: normal} A font-style rkldik. Betvastagsg

A betvastagsgot a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{font-weight: value} ahol a value lehetsges rtkei: value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 A fenti rtkek esetben:

normal = 400

bold = 700

Plda:

p { font-weight: lighter; }

4.4. kdrszlet Betvastagsg megadsa

A flkvr bold - betformtumot a kvetkez stlusdeklarcival vltoztathatjuk meg:

{font-weight: normal} A font-weight rkldik.

Betmret

A betmretet (betnagysg) a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{font-size: value} ahol a value lehetsges rtkei:

73

value: absolute-size | relative-size | length | percentage absolute-size (abszolt-mret): xx-small | x-small | small | medium | large | x-large | xx-large |

Plda: p {

font-size: xx-large; }

4.5. kdrszlet Abszolt-betmret

relative-size (relatv-mret): larger | smaller Plda:

p { font-size: larger; }

4.6. kdrszlet Relatv-betmret

length:

Length centimeters ems inches millimeters picas pixels points

rvidts Cm em in mm pc px pt

4.1. tblzat Plda:

p { font-size: 16pt; }

4.7. kdrszlet Pontokban megadott betmret

percentage (szzalkrtk): a kivlasztott szzalkkal nveli vagy cskkenti a betnagysgot. Plda:

p { font-size: 80%; }

4.8. kdrszlet Szzalkrtkkel megadott betmret A font-size rkldik.

Kiskapitlis forma

A kiskapitlis formt (kisbets mret nagybetk) a kvetkez stlusdeklarci alkalmazsval

hatrozzuk meg:

{font-variant: value}

74

ahol a value lehetsges rtkei:

value: normal | small-caps Plda:

h2 { font-variant: small-caps; }

4.9. kdrszlet Kiskapitlis forma

A kiskapitlis formtumot a kvetkez stlusdeklarcival vltoztathatjuk meg:

p{font-variant: normal} A font-variant rkldik. 4.2. Szvegformzs

Sorkz

A sorok kztti tvolsgot a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{line-height: value} ahol a value lehetsges rtkei:

value: normal | number | length | percentage A normal rtk vltozatlanul hagyja a sorok kztti tvolsgot. A megadott szmot (number) a

betmret szorzszmaknt alkalmazzuk. A lenght a sormagassg abszolt rtkt jelenti. A

szzalkrtk (percentage) a betmretre vonatkozik. Pldk:

{ line-height: 1.2 } /* number */ 4.10. kdrszlet number sorkz llts

{ line-height: 1.2em } /* length */ 4.11. kdrszlet length sorkz llts

{ line-height: 150% } /* percentage */

4.12. kdrszlet percentage sorkz llts

A line-height rkldik.

Szkz

A szkzt a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{word-spacing: value}

75

ahol a value lehetsges rtkei:

value: normal |length rtke lehet negatv is, ez esetben cskethetjk a szavak kzti tvolsgot. Plda (em az m bet szlessge):

h1 { word-spacing: 1em; }

4.13. kdrszlet Szkzbellts

A word-spacing rkldik.

Betkz

A betkzt a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{letter-spacing: value} ahol a value lehetsges rtkei: value: normal |length Plda:

BLOCKQUOTE { letter-spacing: 0.1em; }

4.14. kdrszlet Betkz bellts

A letter-spacing rkldik.

Szvegdszts

A szveg kiegszt dsztst hatrozza meg, stlusdeklarcija:

{text-decoration: value} ahol a value lehetsges rtkei: value: none | [ underline || overline || line-through || blink ]

none semmi, underline alhzott, overline fellhzott, line-through thzott, blink villog.

76

Plda: {text-decoration: overline}

4.15. kdrszlet Szvegdszts

Vzszintes szvegblokk igazts

A szvegblokk vzszintes igaztst a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{text-align: value} ahol a value lehetsges rtkei: value: left | right | center | justify

left balra igaztott bekezds,

right jobbra igaztott bekezds,

center kzpre igaztott bekezds,

justify szvegblokk sorkiegyenltett elrendezse. Plda:

p { text-align: center; }

4.16. kdrszlet Kzpre igaztott bekezds

A text-align rkldik.

A bekezdsek els sornak behzsa

A bekezdsek els sornak behzst a bal margtl a kvetkez stlusdeklarci alkalmazsval

hatrozzuk meg:

{text-indent: value} ahol a value lehetsges rtkei:

value: length | percentage Plda:

p { text-indent: 2em; }

4.17. kdrszlet A bekezdsek els sornak behzsa a bal margtl

A text-indent rkldik.

77

Kisbet-nagybet csere

talaktja a szveg kis- s nagybetit. A kisbet-nagybet csert a kvetkez stlusdeklarci

alkalmazsval hatrozzuk meg:

{text-transform: value} ahol a value lehetsges rtkei: value: capitalize | uppercase | lowercase | none

capitalize minden sz els betjt nagybetvel rja ki, uppercase minden bett nagybetre cserl, lowercase minden bett kisbetre cserl, none semmi (megmaradnak az eredeti betmretek).

Plda:

h1 { text-transform: uppercase; }

4.18. kdrszlet A kisbet-nagybet csere

A text-transform rkldik.

5. Eltrszn-httrszn

5.1. Eltrszn

Az eltrsznt (szvegszn) a kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{color: value} ahol a value lehetsges rtkei megadhatk: Nvvel - colorname - 16 szabvnyos sznnvvel a kvetkez tblzat szerint:

Sznnevek s hexadecimlis/RGB rtkek tblzata

aqua #00ffff rgb(0,255,255)

gray #808080 rgb(128,128,128)

silver #c0c0c0 rgb(192,192,192)

navy #000080 rgb(0,0,128)

black #000000 rgb(0,0,0)

green #008000 rgb(0,128,0)

teal #008080 rgb(0,128,128)

olive #808000 rgb(128,128,0)

blue #0000ff rgb(0,0,255)

lime #00ff00 rgb(0,255,0)

white #FFFFFF rgb(255,255,255)

purple #800080 rgb(128,0,128)

fuchsia #ff00ff rgb(255,0,255)

maroon #800000 rgb(128,0,0)

yellow #ffff00 rgb(255,255,0)

red #ff0000 rgb(255,0,0)

4.2. tblzat

78

Plda: p {

color: navy; }

5.1. kdrszlet Eltrszn bellts szabvnyos sznnvvel

Hex rtkkel - #rrggbb - hexadecimlisan, ahol az rrggbb a szn hexadecimlis kdja a fenti

tblzat szerint.

Plda: p {

color: #000080; }

5.2. kdrszlet Eltrszn bellts Hex rtkkel

rgb rtkkel - rgb(r,g,b) - n. rgb sznekkel a fenti tblzat szerint. Plda:

p { color: rgb(0,0,128); }

5.3. kdrszlet Eltrszn bellts rgb sznekkel

Az alaprtelmezett eltrszn: fekete (black). A color attribtum teht egy jellelem szvegsznt

lltja be! A color rkldik.

5.2. Httrszn

Ez az attribtum egy jellelem httrsznt lltja be (nem pedig az egsz oldalt). A httrszn

belltst kvetkez stlusdeklarci alkalmazsval hatrozzuk meg:

{background-color: value} ahol a value lehetsges rtkei megadhatk: color - 16 szabvnyos sznnvvel vagy hexadecimlis mdon a fenti tblzat szerint. Pldk:

pre {

background-color: red;

} 5.4. kdrszlet Httrszn bellts szabvnyos sznnvvel

79

pre { background-color: #ff0000; }

5.5. kdrszlet Httrszn bellts Hex rtkkel

transparent tltsz (ltszik a mgtte lv szveg szne). Plda:

pre { background-color: transparent; }

5.6. kdrszlet tltsz httrszn bellts 5.3. Httrsznmegads kppel

Ha a httrsznt kppel adjuk meg stlusdeklarcija:

{background-image: url(image.gif)} Ez az attribtum egy jellelem (nem a teljes oldal) httrkpt lltja be. Plda:

p { background-image: url(marble.gif); }

5.7. kdrszlet Httrszn bellts kppel

A kp megadsa esetn az url utn berhatk a kvetkez n. uttagok:

repeat a kpet vzszintesen s fgglegesen ismtelve jelenti meg, Plda:

pre { background-image: url(marble.gif); background-repeat: repeat; }

5.8. kdrszlet repeat httrszn bellts kppel

repeat-x a kpet csak vzszintesen ismtelve jelenti meg, Plda:

body { background-image: url(marble.gif); background-repeat: repeat-x; }

5.9. kdrszlet repeat-x httrszn bellts kppel

80

repeat-y a kpet csak fgglegesen ismtelve jelenti meg, Plda:

body { background-image: url(marble.gif); background-repeat: repeat-y; }

5.10. kdrszlet repeat-y httrszn bellts kppel

no-repeat csak egyszer jelenti meg a kpet. Plda:

pre { background-image: url(marble.gif); background-repeat: no-repeat; }

5.11. kdrszlet no-repeat httrszn bellts kppel

5.4. Httrfggelk

A httrfggelk (httrkp) stlusdeklarcija:

{background attachment: value} ahol a value lehetsges rtkei:

value: scroll | fixed A scroll vagy fixed uttag meghatrozza, hogy ha van belltott httrfggelk (httrkp), az fixen

marad-e vagy a tartalommal egytt grdthet. Plda:

body { background-image: url(marble.gif); background-repeat: repeat; background- attachment: scroll; }

5.12. kdrszlet scroll httrfggelk bellts

pre { background-image: url(marble.gif); background-repeat: repeat; background- attachment: fixed; }

5.13. kdrszlet fixed httrfggelk bellts

Megjegyzs: A szvegformzst rendszerint egy stlusdeklarcval oldjuk meg.

81

XHTML s CSS tfog feladat Jegyzettmb segtsgvel ksztse a mellkelt Weblapot XHTML s CSS technolgik

alkalmazsval.

1.1. bra Feladatmegads

A Weblap tartalmazzon:

XHTML-1.0- Transitional DTD-t, csatolt stluslapot, 3 stlusosztlyt s 4 kapcsolatot.

Mutassa be a bngszben a feladatok XHTML s CSS forrskdjait, valamint a Weblapot.

Megoldsok:

A feladat XHTML kdblokkja:

XHTML s CSS

82

XHTML s CSS technolgik

XHTML

CSS

Dunajvrosi Fiskola

e-tananyag

Az XHTML (Extensible HyperText Markup Language) egy struktrban

gazdag jellnyelv, amely a megjelentst a stluslapokra bizza, modulris alapokra pl s egyttmkdik

az XML (Extensible Markup Language) alap felhasznli alkalmazsokkal. Az XHTML jellnyelv

megjelense s alkalmazsa az internet fejldsnek egy fontos lpcsfokt jelenti. A tovbbiakban az

XHTML 1.0 SE (msodik kiads) verzijval foglalkozunk (XHTML 1.0 ajnls: 2000. janur 26;

fellvizsglva: 2002. augusztus 1.)

A W3C (World Wide Web Consortium) hozta ltre a CSS (Cascading Style

Sheet- lpcszetes stluslapok) specifikcit. A CSS technolgia alkalmazsnak alapvet clja: bevezetni a

stluslapok (Style Sheet) alkalmazst az XHTML dokumentum formzsi utastsai helyet, s sztvlasztani

az XHTML dokumentum tartalmi rszt a megjelentsi stlusjellelemektl.

1.1. kdrszlet A feladat XHTML kdblokkja

A feladat CSS forrskdja:

h1 {

font-family: Verdana;

color:#ff0000;

font-size: 30;

}

.szoveg1{

83

font-family: Arial;

color:#800000;

font-size: 16;

}

.szoveg2{

font-family: Arial;

color:#008000;

font-size: 16;

}

1.2. kdrszlet A feladat stillap.css szvegllomnya

1.2. bra Ellenrztt, a W3C ajnlsainak megfelel XHTML dokumentum

84

_________________________________________________________

PHP nyelv

_________________________________________________________

1. Alapfogalmak

A PHP szerveroldali internet-programozsi, nylt forrskd, platformfggetlen szkript nyelv, a

dinamikus, interaktv weboldalak ltrehozsnak egyik legegyszerbb s leghatkonyabb eszkze.

A PHP rvidts a Hypertext Preprocessor elnevezsbl ered. A PHP forrsprogram elksztett

forrskdjt elszr interpreter segtsgvel rtelmezzk s a programfuts alatt lefordtjuk a

szmtgp gpi kdjra. A World Wide Web gyors fejldse s elterjedse kvetkeztben a PHP

els vltozatt Personal Home Page Tools nven Rasmus Lerdorf ksztette 1994-ben. A knyv

rsnak a pillanatban az ajnlott PHP verzi: 4.3.6. A PHP webes programozsi nyelv,

alkalmazsval az adatbzisok kezelse igen egyszer. A PHP programok jl hordozhatak s biztonsgosak. Egyttmkdnek klnbz szerverekkel,

opercis rendszerekkel s adatbzis kezelkkel. A PHP teht:

szerveroldali begyazott nyelv ingyenes keresztplatformos s szleskrben elterjedt.

A PHP egyik legelterjedtebb alkalmazsa az Apach webszerverbl s a MySQL

adatbzisrendszerbl ll PHP-Apache-MySQL egyttes (PHP Triad). A PHP Triad webcme:

http://www.sourceforge.net/projects/phptriad/

ahonnan a PHP-Apache-MySQL egyttes (phptriad2-2-1.exe) ingyenesen letlthet. Komolyabb

munka szempontjbl viszont clszerbb a PHP rtelmezt, az Apache webkiszolglt s a s

MySQL adatbziskezel programot kln kln telepteni!

85

A PHP szerveroldali begyazott nyelv. A PHP programok a szerveren futnak le oly mdon, hogy a

megfelel kiterjeszts llomnyt a PHP rtelmez:

tfsli,

rtelmezi,

azokat megfelel mdon vgrehajtja, s

a kimeneteket beilleszti a HTML-oldalba.

A felhasznl csak a programunk ltal generlt tartalmat ltja, s nem magt a PHP programot. A

szerveroldali programozs (Server-Side Scripting) esetben a szerveroldali szkriptek a Web

szerveren futnak le s dinamikus HTML oldalakat hoznak ltre. A szerveroldali programozs

elnye knnyen megrthet a kvetkez pldbl: Clkitzs: az aktulis dtum leolvassa a Web laprl.

Statikus HTML oldalon minden nap be kell rni az aktulis dtumot. A PHP technolgia lehetv teszi egy szkript megrst amely a beolvasott Web rlapon

megjelenti az aktulis dtumot. Mieltt a felhasznl beolvassa a Web lapot, a szerver lefutatja a

szkriptet s gy a beolvasott Web lapon mindig az aktulis dtum jelenik meg. A szerveroldali programozs tbb szempontbl is elnys a Web fejleszt szmra:

1. A szerveroldali szkriptek fejlesztse teljesen fggetlen a felhasznl ltal alkalmazott

bngsztl. gy a szerveroldali szkripteket olyan programnyelvben is fejleszthetjk amelyet a

felhasznl bngszje nem tmogat.

2. A szerveroldali szkriptek forrsnyelvi vltozata nem olvashat a felhasznl bngszjben. Ez

a tny igen fontos a forrsnyelvi vltozat vdettsge szempontjbl (biztostja a PHP

programfejleszt szerzi jogait.).

3. A letltend HTML dokumentum mrete cskken (mivel a bngszben csak a szerveroldali

szkriptek vgrehajtsi eredmnye ltszik). gy a Web oldal beolvassa is gyorsabb.

4. Egy szerveroldali komponens alkalmazsval leolvashatjuk a felhasznl gp opercis

rendszert s bngszprogramjt, gy a szerveroldalrl lekldtt HTML dokumentum a

kliens gp krnyezetre alakthat.

5. A PHP program az adatbzis szerverrl adatbzist hasznlhat fel a megjelentend Web lap

feldolgozsra.

A PHP nyelv alkalmazsnak legfontosabb lehetsgei:

hatkony fjlkezels, vltozk rugalmas hasznlata, a tmbk rugalmas hasznlata,

86

regulris kifejezsek hasznlata, kpek ksztse s manipulcija, adatbzisrendszerek igen szles krnek hasznlhatsga.

A ZDNet (www.zdnet.com) sebessgteszt eredmnyei a programnyelvek alkalmazsa

szempontjbl az egy msodperc alatt ellltott oldalak szmt tekintve:

PHP 47 oldal ASP 43 oldal Allaire (Macromedia) Coldfusion 29 oldal SUN Java JSP 13 oldal

2. A PHP programfejleszts eszkzei

A PHP programok elksztse szempontjbl a kvetkez eszkzkre lesz szksgnk: a. PHP-rtelmez

Elszr be kell szereznnk, teleptennk s belltanunk az opercis rendszernkhz megfelel

PHP-rtelmezt. A PHP hivatalos webhelye:

http://www.php.net ahonnan ingyenesen letlthet.

b. Szvegszerkeszt

A PHP forrsprogram megszerkesztsre szolgl. Megfelel brmilyen egyszer szvegszerkeszt,

amely formzs nlkli ASCII-szveget llt el (ltalban minden opercis rendszerben

megtallhat), pldul a Jegyzettmb (Notepad). A PHP forrsprogram fjlainak kiterjesztse:

.php

Knyelmesebb munka szempontjbl clszerbb a HTML-kit hasznlata, webcme:

http: //www.chami.com/html-kit)

vagy a ConText ingyenes kdszerkesztket alkalmazni amelyek rendelkeznek kdsznezssel s kifejezs-szerkesztvel.

A PHP programfejleszts leghatsosabb eszkze a:

Macromedia Dreamweaver MX 2004 hasznlata, webcme:

http: //www.macromedia.com

87

c. Webbngsz

A Webbngsz a PHP programok kimenetnek a kliens szmtgpen val megjelentsre

szolgl. Clszer alkalmazni a szleskren hasznlt webbngszket mint pldul a:

Opera Mozilla Microsoft Internet Explorer Netscape Navigator.

d. Webkiszolgl

Az Apache webkiszolgl a legnpszerbb nylt forrskd s platformfggetlen webkiszolgl. Az

Apache program ingyenesen letlthet az Internetrl az Apache cg Web cmrl:

http://www.apache.org

Ha az Apache webkiszolglt a sajt szmtgpnkre teleptjk, akkor is a szmtgpnk IP cme:

127.0.0.1 neve pedig:

localhost

lesz. Teht, ha a bngsznkkel az Apache webkiszolgl gykrknyvtrban lv

program_01.php fjlt szeretnnk megnyitni, akkor a fjlt kvetkez cmen rhetjk el:

http://localhost/program_01.php

e. Adatbziskezel

Szmos adatbziskezel program kzvetlenl alkalmazhat a PHP-vel. Legelterjedtebb

adatbziskezel program a nylt forrskd, gyors s egyszeren kezelhet:

MySQL A MySQL adatbzisrendszer webcme:

http://www.mysql.com

ahonnan a MySQL adatbziskezelprogram ingyenesen letlthet. A webalap:

phpMyAdmin

fellet nagy segtsget nyjt az adatbziskezelsnl, webcme:

http://www.phpmyadmin.net

Ingyenes szolgltatk PHP programok futtatsra: http://www.freeweb.hu

http://www.ultraweb.hu

http://www.free-php-hosting.com

http://www.free-php.cjb.net

88

3. Programkszts a PHP fejleszti krnyezetben

Ha a szmtgpnkn rendelkeznk megfelel szvegszerkesztvel amely ASCII-szvegknt

ment, pl. Jegyzettmb s helyesen teleptett PHP fejleszti krnyezettel, akkor bemutathatunk

hrom egyszer PHP programot. A tovbbiakban felttelezzk, az Apache webkiszolglt a sajt

szmtgpnkre teleptettk.

3.1. Els PHP programunk

Egy egyszer PHP program ellltsa a kvetkez lpsekbl ll:

1. Hvjuk be a Jegyzettmbt, nyissunk meg a szerkesztben egy j llomnyt s gpeljk be

pldaknt a kvetkez PHP forrskd szvegt.

1:

3.1. PHP szkript Az els PHP programunk forrskdja

A fenti pldbl lthat, hogy a PHP program nyiteleme: . A nyit- s zrelemek kzz rjuk be a PHP program utastsait. Az utasts vgn ktelez az ; utasts-

vgjel. A programunkban csak egy utastst hasznltunk a:

print (Hello from PHP);

fggvnyt, amely egy karakterlncot r ki a kpernyre. Gpels kzben gyeljnk arra, hogy a

PHP klnbsget tesz a kis- s nagybetk kztt! A forrsszveget mentsk el az Apache szerver

gykrknyvtrban (pl. c://apache/htdocs) hello nv alatt php kiterjesztssel. 2. A http://127.0.0.1/hello.php webcm begpelsvel tltsk be a megszerkesztet PHP fjlt a

webbngszbe, ekkor a PHP program a webkiszolgln vgrehajtdik s a kvetkez brn a

program kimenett lthatjuk a web-bngszben

3.1. bra A 3.1. PHP szkript kimenete a webbngszben

89

3.2. HTML oldal PHP programmal

A PHP kd beptse egy HTML oldalba egyszeren a PHP kdblokk bersbl ll az HTML

elemek kz. Egy HTML dokumentumba tetszleges szm PHP kdblokk rhat. A kvetkez

pldban, amely HTML s PHP kdot tartalmaz egy oldalon, bemutatjuk az aktulis dtum

leolvasst a Web laprl:

1. Hvjuk be a Jegyzettmbt, nyissunk meg a szerkesztben egy j llomnyt s gpeljk be a

kvetkez HTML s PHP forrskd szvegt.

1: 2: 3: PHP datumkezeles 4:

5: 6: A mai dtum: 7: 10: 11:

3.2. PHP szkript A HTML/PHP program forrskdja A PHP kdblokkban felhasznlt Date() fggvny a dtumot formzott karakterlnc formjban adja

vissza. A forrsszveget mentsk el az (aktv) Apache szerver gykrknyvtrban datum.php

nven.

2. A http://127.0.0.1/datum.php webcm begpelsvel tltsk be a megszerkesztet PHP fjlt a

webbngszbe. Mieltt a felhasznl beolvassa a Web lapot, a szerver lefutatja a szkriptet s gy a

beolvasott Web lapon mindig az aktulis dtum jelenik meg:

3.2. bra Az aktulis dtum megjelentse

90

3.3. Adatfeldolgozs

A kvetkez pldnl a HTML s PHP kdot kln llomnyban troljuk:

1. Hvjuk be a Jegyzettmbt, nyissunk meg a szerkesztben egy j llomnyt s gpeljk be egy

egyszer HTML rlap forrskdjnak a szvegt.

1: 2: 3: xHTML rlap 4: 5: 6: 7: 8: 9: 10: 11:

3.3. PHP szkript Az xHTML rlap forrskdja Egy HTML rlapot hoztunk ltre, amely egy tetszolegesnev szvegmezt s egy gombot

tartalmaz. A form jellelem action attribtuma a pingvin.php fjlra mutat, amely feldolgozza az

rlapon megadott adatot (a HTML s PHP fjloknak most egy knyvtrban kell lennik!). A

forrsszveget mentsk el az (aktv) Apache szerver gykrknyvtrban html_urlap.html nven. 2. rjuk meg a kvetkez pingvin.php nev PHP programot, amely kirja a felhasznl ltal

megadott adatot:

1:

91

3.3. bra A HTML rlap szvegmezjnek kitltse

4. Ekkor meghvdik a pingvin.php nev program a szerveren, amely a felhasznl bngszjben

kirja az dvzlszveget.

3.4. bra Az dvzlet megjelentse

Fontos megjegyzs: A HTML rlap action attribtumnak a pingvin.php rtke s a php program

pingvin.php neve megegyez kell hogy legyen! A fenti pldbl lthat, hogy a PHP programok alkalmazsval milyen egyszeren kezelhetek a

HTML rlapok.

4. A PHP nyelv alkotelemei

4.1 PHP opertorok

A PHP-ben az opertoroknak tbb tpusa is ltezik, amelyekkel alakthatjuk az adatokat.

92

Aritmetikai opertorok

A PHP-ben hasznlhat aritmetikai opertorok a kvetkezk:

PHP opertor A mvelet jelentse Plda Eredmny

+ sszeads $x=3 $x+5 8

- kivons $x=4 6-$x 2

* szorzs $x=2 4*x 8

/ oszts 20/4 5

% maradkkpzs 7%3 1

Relcis opertorok

A PHP-ben hasznlhat relcis (sszehasonlt) opertorok a kvetkezk:

A mvelet jelentse PHP opertor Plda rtk egyenl = = 6==7 hamis

rtk nem egyenl ! = 6!=7 igaz

rtk s tpus egyenl = = = = = =

kisebb < 6 7>6 igaz

kisebb vagy egyenl =7 hamis A PHP-ben hasznlhat a (.) karakterlnc sszefz opertor is. Plda:

Auto . mobil kifejezs rtke:

Automobil rtkad opertorok

A PHP-ben hasznlhat rtkad opertorok a kvetkezk:

PHP opertor A mvelet jelentse Plda Ezzel egyenrtk= rtkads $x=$y $x=$y

+= sszeads s rtkads $x+=$y $x=$x+$y

- = kivons s rtkads $x- = $x=$x-$y

*= szorzs s rtkads $x*=$y $x=$x*$y

/= oszts s rtkads $x/=$y $x=$x/$y

%= egsz oszts s rtkads $x%=$y $x=$x%$y

.= konkatenls $x.= szveg $x=$x. szveg

93

Fontos megjegyezni, hogy mi a klnbsg az =

s az = =

kztt. Az elsvel rtket rendelnk valamihez, a msodikkal pedig rtkeket hasonltunk ssze.

Logikai opertorok

A PHP-ben hasznlhat logikai opertorok a kvetkezk: PHP opertor A mvelet jelentse A mvelet jelentse

! negci Az egyetlen operandus sem igaz and logikai s mvelet Igaz a bal s a jobb oldal is

&& logikai s mvelet Igaz a bal s a jobb oldal is or logikai vagy mvelet Vagy a jobb vagy a bal oldal igaz || logikai vagy mvelet Vagy a jobb vagy a bal oldal igaz

xor logikai kizr vagy Vagy a jobb igaz, vagy a bal, de nem mind a kett

4.2. A mveletek kirtkelsi sorrendje

A mveletek elsbbsgt cskken sorrendben a kvetkez tblzatban mutatjuk be:

! ++ -- (tpus-talakts)

/ * %

+ - .

< >

= = = = = = ! = ! = =

&&

||

= + = - = / = % = . =

and

xor

or

4.3. Konstansok

A PHP-ben a konstansokat:

define()

fggvnnyel deklarljuk. A konstansok hasznlatval azt rjk el, hogy a program futsa sorn az

adott nv alatt trolt rtk nem vltozik. A konstans nevt mint karakterlncot s a trolt rtket

vesszvel elvlasztva a zrjelbe nagybetvel rjuk s nem tartalmaz dollrjelet. Plda:

define (Pi , 3.14159);

94

4.4. Vltozk

A PHP program az adatokat (szmokat, karakterlncokat, objektumokat, tmbket s logikai

rtkeket) vltozkban trolja. Minden vltoznak van neve s adattpusa. A vltoz deklarlshoz

egy dollrjel $ s egy tetszlegesen vlasztott nv szksges. A nv betket, szmokat s alhzs

karaktereket tartalmazhat, szmmal azonban nem kezddhet. Amikor a vltozt ltrehozzuk

rendszerint rtket is adunk a vltoznak. Pldk:

$x;

$y=10;

$z=Karakterlnc;

Pldk helyes s helytelen vltoznevekre:

Helyes:

$els = 10;

$reakci_id = 0.8;

Helytelen:

$1els = 10;

(szmmal nem kezddhet)

$reakci id = 0.8;

(szkzt nem tartalmazhat)

A vltozk nevnl a kis- s nagybetk nem egyenrtkek! Plda hrom klnbz vltozra:

$tl

$tl

$TL

Az inkrementl (nvel) opertor a vltoz rtkt nveli meg eggyel:

$a++;

Hasonlkppen mkdik cskkentsre:

$a--;

formban. Ezeket az opertorokat leginkbb ciklusokban hasznljuk gyakran valamely vltoz

rtknek lptetsre. A kvetkez pldban, a $szoveg vltozhoz, a Hello from PHP karakterlncot rendeljk:

1: 2: 3: PHP vltoz 4:

5:

95

6: 9: 10:

4.1. PHP szkript A PHP vltoz

A kdblokkunk forrsszvegt (4.1. PHP szkript) mentsk el az Apache webkiszolgl

gykrknyvtrba. Tltsk be a megszerkesztet fjlt a webbngszbe, ekkor a PHP program a

webkiszolgln vgrehajtdik s a kpernyn a kvetkez eredmnyt kapjuk:

Hello from PHP 4.5. Adattpusok

A PHP-ben 6 adattpussal rendelkeznk. A PHP automatikusan felismeri a vltozk adattpust.

Egy vltoz az rtkadskor klnfle szmadattpust vehet fel:

Integer (egsz tpus),

Double (lebegpontos).

Feltlthetjk szveges adattal:

String (karakterlnc, karakterek sorozata), logikai adattal:

Boolen (csak True vagy False logikai rtket vehet fel),

hozzrendelhetnk objektumot is:

O

szabad muszaki foiskola - web programozas

Documents