szabad muszaki foiskola - web programozas

Author: kovacslaszlo

Post on 08-Mar-2016

12 views

Category:

Documents


2 download

Embed Size (px)

DESCRIPTION

Szabad_Muszaki_Foiskola_-_Web_programozas.pdf

TRANSCRIPT

  • 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

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

    3.2. bra A kdrszlet eredmnye a bngszprogramban

    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.

    4.1. bra A kdrszlet eredmnye a bngszprogramban

  • 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.

    4.2. bra A kdrszlet eredmnye a bngszprogramban

  • 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.

    4.3. bra A kdrszlet eredmnye a bngszprogramban

  • 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.4. bra A kdrszlet eredmnye a bngszprogramban

    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.1. bra A kdrszlet eredmnye a bngszprogramban

    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

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

    webbngszbe, ekkor az 5.2. brn lthat eredmnyt kapjuk.

    5.2. bra A kdrszlet eredmnye a bngszprogramban

    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

    5.3. brn lthat eredmnyt kapjuk.

  • 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. brn lthat eredmnyt kapjuk.

    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

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

    webbngszbe, ekkor az 5.5. brn lthat eredmnyt kapjuk.

    5.5. bra A kdrszlet eredmnye a bngszprogramban

    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

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

    5.6. brn lthat eredmnyt kapjuk.

    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

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

    5.7. brn lthat eredmnyt kapjuk.

    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

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

    webbngszbe, ekkor az 5.8. brn lthat eredmnyt kapjuk.

    5.8. bra A kdrszlet eredmnye a bngszprogramban

    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

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

    webbngszbe, ekkor az 5.9. brn lthat eredmnyt kapjuk.

  • 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

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

    webbngszbe, ekkor az 5.10. brn lthat eredmnyt kapjuk.

    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.

    6.1. bra A kdrszlet eredmnye a bngszprogramban

  • 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

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

    webbngszbe, ekkor az 7.1. brn lthat eredmnyt kapjuk.

    7.1. bra A kdrszlet eredmnye a bngszprogramban

  • 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

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

    8.1. brn lthat eredmnyt kapjuk.

    8.1. bra A kdrszlet eredmnye a bngszprogramban

    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

    webbngszbe, ekkor az 8.2. brn lthat eredmnyt kapjuk.

    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

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

    webbngszbe, ekkor az 8.3. brn lthat eredmnyt kapjuk.

    8.3. bra A kdrszlet eredmnye a bngszprogramban

    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

    webbngszbe, ekkor az 9.1. brn lthat eredmnyt kapjuk.

    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

    webbngszbe, ekkor az 9.2. brn lthat eredmnyt kapjuk.

    9.2. bra A kdrszlet eredmnye a bngszprogramban

    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

    9.3. brn lthat eredmnyt kapjuk.

    9.3. bra A kdrszlet eredmnye a bngszprogramban

  • 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

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

    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

    9.5. brn lthat eredmnyt kapjuk.

    9.5. bra A kdrszlet eredmnye a bngszprogramban

  • 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 kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor az

    10.1. brn lthat eredmnyt kapjuk.

    10.1. bra A kdrszlet eredmnye a bngszprogramban

    A kvetkez feladat hrom fggleges keretet mutat be.

  • 47

    Fggleges keretek

    10.2. kdrszlet Fggleges keretfeladat

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

    webbngszbe, ekkor az 10.2. brn lthat eredmnyt kapjuk.

    10.2. bra A kdrszlet eredmnye a bngszprogramban

    A kvetkez plda esetben vegyes keretmegoldst mutatunk be:

  • 48

    Vegyes keret plda

    10.3. kdrszlet Vegyes keretfeladat

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

    webbngszbe, ekkor az 10.3. brn lthat eredmnyt kapjuk.

    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 kdblokkunk forrsszvegt mentsk el. Tltsk be az XHTML fjlt a webbngszbe, ekkor az

    12.1. brn lthat eredmnyt kapjuk.

    12.1. bra A kdrszlet eredmnye a bngszprogramban

    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

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

    webbngszbe, ekkor az 12.2. brn lthat eredmnyt kapjuk.

    12.2. bra A kdrszlet eredmnye a bngszprogramban

    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

    12.3. bra A kdrszlet eredmnye a bngszprogramban

  • 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

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

    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