2. A HTML NYELV ALAPJAI 2.1. Bevezetés Az Internet publikálás és alkalmazásfejlesztés nyelve. A HTML összes lehetőségét felhasználva jól megszerkesztett weboldalakat hozhatunk létre. A HTML (Hypertext Markup Language, 1989) az SGML (Standard Generalized Markup Language, 1986.) nyelvből ered. Eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki. Idők folyamán multimédiális tartalommal dinamikusan fejlődött tovább. Jelenleg a HTML 4.0 verziónál tartunk. 2.1.1 HTML-dokumentumok előállítása A HTML-dokumentumok előállítása nem nehéz feladat. Az előállítás szempontjából a következő eszközökre lesz szükségünk: Szövegszerkesztő A HTML-dokumentum megszerkesztésére szolgál. Megfelel bármilyen egyszerű szövegszerkesztő, amely formázás nélküli ASCII-szöveget állít elő (általában minden operációs rendszerben megtalálható), például a Notepad. Webböngésző A HTML-dokumentumok megjelenítésére szolgál. Célszerű alkalmazni a szélleskörűen használt webböngészőket mint például a: Microsoft Internet Explorer Netscape Navigator. 1
Ha a számítógépünkön rendelkezünk a felsorolt eszközökkel akkor a HTMLdokumentumok előállítása a következő lépésekből áll: 1. Hivjunk be egy tetszöleges szövegszerkesztőt amely ASCII-szövegként ment, például a Notepad-et 2. Nyissunk meg a szerkesztőben egy új állományt és gépeljük be a HTMLdokumentum szövegét. 3. A begépelt szöveget mentsük el tetszőlegesen kiválsztott néven.html kiterjesztéssel. 4. Hívjuk be a webböngészőnket és töltsük be a megszerkesztett HTMLdokumentumot. Megjegyzés: A web maga nem egyéb mint az internet HTML-dokumentumainak összessége, amelyek linkekkel vannak egymással összekötve. Mindenki, aki hozzáféréssel rendelkezik egy szerverhez felkínálhatja a HTML-dokumentjait a World Wide Weben való publikálásra. 2.2 Alap HTML tag-ek A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML tag"-ket formázóutasításokat. Ezeket az utasításokat a böngészőprogram értelmezi és végrehajtja. A HTML dokumentum elemekből áll, minden elemnek van nyitó és záró tag-je, amelyek szöveget fognak körül. A megjegyzéseket egy <!-- nyitó és egy --> záró tag között kell elhelyezni. Példa HTML elemre: <title> Szabadka </title> A HTML dokumentumban a szövegblokkot tehát két tag veszi körül, az első tag-et nyitó tag-nek a befejezőt pedig záró tag-nek nevezzük. A HTML tag egy kisebb jel < (vagy </ ) és egy nagyobb jel > közötti azonosítóból áll. Példa HTML tag-re: <head> A záró tag azonos azonosítója (</head>) megegyezik a hozzátartozó nyitó tag (<head>) azonosítójával, a különbség csak abból áll, hogy a kisebb jelet egy perjel követi (</). A HTML tag-nél nem különböztetjük meg a kisbetűket és nagybetűket! 2
A HTML dokumentum: <html> nyitó tag-el kezdődik és a </html> záró tag-el záródik. A dokumentum látható része a <body> és a </body> tag pár között helyezkedik el. A nyitó tag-ek a tag-azonosítón kívül különféle attribútum értéket is tartalmazhatnak (a záró tag-ek nem!): attribútum= érték alakban! Az attribútumokkal tovább szabályozhatjuk a körülfogott szöveg formázását. A továbbiakban a nyitó tag-ket az attribútumokkal adjuk meg. Fontos megjegyzés: A HTML programban a HTML elemek egymásba ágyazhatók, de egymást nem lapolhatják át! Ez azt jelenti, hogy az utoljára megnyitott utasítást kell legelőször lezárnunk. Jó példa: <azonosító1> <azonosító2> Szövegrész tartalom </azonosító2> </azonosító1> Rossz példa: <azonosító1> <azonosító2> Szövegrész - tartalom </azonosító1> </azonosító2> 2.3 A HTML dokumentumok alapszerkezete Egy tetszőleges dokumentumot az tesz HTML dokumentummá, hogy a <html> nyitó tag és a </html> záró tag öleli körül. Egy HTML dokumentum három szerkezeti egységre bontható: 1. Az első rész arról ad információt, hogy a dokumentumunk a HTML nyelv melyik verziójában íródott 1. Példa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 1 A következő példa esetében ezt bemutatjuk, a többi példáknál viszont, az egyszerűség kedvéért, az első résztől eltekintünk. 3
2. A második rész egy fejléc elem: <head>... </head> amely olyan információkat tartalmaz, amelyek az egész dokumentumra vonatkoznak. A <head> és a </head> fejléc tag-ek között helyezzük el a: <title>... </title> elemet melynek szöveges tartalma a böngésző címsorában jelenik meg (nem a Web lapon!). 3. A harmadik rész a dokumentum törzse test elem: <body{alink, background, bgcolor, link, onload, onunload, text, vlink}>... </body> ide kerül az a tartalom, amelyet meg szeretnénk jeleníteni a böngészőkben. Példa : 2.1. ábra A Feladat 01 kódrészlete A következő ábra a fenti kódrészlet eredményét mutatja az IE 6.0 böngészőprogramban. 2.2. ábra A Feladat 01 kódrészlet eredménye a böngészőprogramban 4
Az előbbi példánál jól látható a három szerkezeti egység. Az első két sor a dokumentum típusát jelzi. A fejrész a <head> és </head> tag- ek között található. A dokumentum törzse pedig a <body> és </body> tag- ek között helyezkedik el. A dokumentum típus jelzése után egy <html> tag jelzi a dokumentum kezdetét, melynek záró tag- je az utolsó tag a HTML dokumentumban (</html>). 2.4 A szövegformázó elemek A HTML dokumentumokban az információ egyik fő hordozója a szöveg. Formázására számos elem létezik, melyeket 2 csoportba sorolhatjuk: Karakter formázó HTML tag-ek, Sor és bekezdés formázó HTML tag-ek. 2.4.1. Karakter formázó HTML tag-ek Szöveges dokumentumok kezelésénél igen fontos feladat a szövegek formázása. E feladat elvégzésére a HTML nyelvben számos tag áll rendelkezésünkre. A fontok beállítására a <font> tag-ket használjuk (a {}zárójeleket az alkalmazásnál elhagyjuk): <font{size,color,face}> </font> size= szám - attribútum a font relatív nagyságát adja meg, color= színkód - attribútum meghatározza a font színét, face= név - attribútum a font betűtípusát határozza meg (pl. Ariel, Courier). 2.3. ábra A Feladat 02 kódrészlete 5
A következő ábra a fenti kódrészlet eredményét mutatja az IE 6.0 böngészőprogramban. 2.4. ábra A Feladat 02 kódrészlet eredménye a böngészőprogramban Félkövér karaktereket a: dőlt karaktereket az: áthúzott karaktereket a: alsó indexet a: felső indexet a: aláhúzott karaktereket az: <b> </b> <i> </i> <strike> </strike> <sub> </sub> <sup> </sup> <u> </u> elemek segítségével tudunk létrehozni. 2.5. ábra A Feladat 03 kódrészlete 6
2.6. ábra A Feladat 03 kódrészlet eredménye a böngészőprogramban 2.4.2. Sor és bekezdés formázó HTML tag-ek A HTML nyelv a: <p{align}> tag-et használja a paragrafus (bekezdés) létrehozására. Az új paragrafus előtt üres sort hagy. A <p> tag használata esetében a záró paragrafustag felírása nem kötelező! A:<br {clear}> tag soremelési tag záró tag nélkül. Amikor a WWW megjelenítő egy <br> elemhez ér, akkor az utána következő szöveget új sorban a bal margónál kezdi. 2.7. ábra A Feladat 04 kódrészlete 7
2.8. ábra A Feladat 04 kódrészlet eredménye a böngészőprogramban A hx tag a címszintet jelöli: <hx {align}>...</hx> Az x egy szám 1 és 6 között. A HTML nyelvben 6 címszint létezik. Az első szintű fejléc jelenik meg legnagyobb, a hatodik szintű fejléc pedig a legkisebb betűmérettel. A szintek megjelenítésekor nincs megadva pontosan a betűtípus és a fontméret, ezért a különböző böngészők másként jelenítik meg azokat. A <hx> tag alkalmazása után üres sor következik. 2.9. ábra A Feladat 05 kódrészlete 8
2.10. ábra A Feladat 05 kódrészlet eredménye a böngészőprogramban A: <pre {width}> </pre> elem segítségével előre formázott szöveget tudunk létrehozni. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük a HTML dokumentumba. Vonalakat a <hr> elem segítségével tudunk létrehozni: <hr { width, size, color, align}>...</hr> A width és size attribútumokkal a vonal hosszát ( pixel vagy százalék) és pixelben mért vastagságát adhatjuk meg. Példa (2.11. ábra): A sorformázó elemekkel létrehozott szövegblokkot az align attribútum segítségével: jobbra: align= right, balra: align= left és középre: align= center igazíthatók. A <center>..</center> elem közé írt szöveg középre igazítva jelenik meg. 9
2.11. ábra A Feladat 06 kódrészlete 2.12. ábra A Feladat 06 kódrészlet eredménye a böngészőprogramban 10
2.13. ábra A Feladat 07 kódrészlete 2.14. ábra A Feladat 07 kódrészlet eredménye a böngészőprogramban 2.5. Listák létrehozása A HTML nyelvben: egyszerű és sorszámozott listát használunk, melyek egymásba ágyazhatók így komplex listák hozhatók létre. 11
2.5.1 Egyszerű listák Akkor használjuk, ha nincs szükség a listaelemek számozására. A listát: <ul {compact, type} > </ul> elemmel tudjuk megnyitni (Unordered List). Az <ul> nyitó tag lehetséges attribútumai a következők (alapértelmezett disc ): A Listaelemeket: < ul type ="square"> < ul type ="circle"> < ul type ="disc"> <li{type, value}> </li> elemmel tudjuk elhelyezni a listában bajusz mögött (List Item). 2.15. ábra A Feladat 08 kódrészlete 2.16. ábra A Feladat 08 kódrészlet eredménye a böngészőprogramban 12
2.5.2. Sorszámozott listák Sorszámozott listát akkor használunk ha szükséges a listaelemek számozása. A sorszámozott listát: <ol {compact, start, type}> </ol> elemmel valósíthatjuk meg (Ordered List). Type attribútummal megadható a sorszámozás típusa (alapértemezett 1,2,3,...): <ol type="a,b,c,..."> <ol type="a,b,c,..."> <ol type="i,ii,iii,..."> <ol type=" i,ii,iii, "> <ol type=" 1,2,3..."> 2.17. ábra A Feladat 0 kódrészlete 2.18. ábra A Feladat 09 kódrészlet eredménye a böngészőprogramban 13
2.6 Képek beágyazása A képek beágyazására az: <img {align, alt, border, height, hspace, ismap, longdesc, src, name, usemap, vspace, width}> elem szolgál (záró tag nélkül). Több attribútuma is van tehát, például: src= elérési_út/fájlnév.kit - a képfájl helyét (URL-jét) tartalmazza, height= szám - megadja a kép magasságát képpontokban, width= szám - a kép szélességét adja meg képpontokban, border= szám -képkeret vastagsága képpontokban. Ha a képfájl a HTML dokumentummal megegyező könyvtárban található, akkor csak a fájlnevet kell megadnunk. Példa: guru.gif Ha a képfájl a HTML dokumentumhoz képest egy másik könyvtárban található, akkor a fájlnevet egy útvonallal kell kiegészíteni. Példa: images/guru.gif Ha a képfájl egy másik Web címen található, akkor a teljes http címet kell megadnunk. 2.19. ábra A Feladat 10 kódrészlete 14
2.20. ábra A Feladat 10 kódrészlet eredménye a böngészőprogramban 2.7 Hiperhivatkozások létrehozása A hiperhivatkozások létrehozására az: <a {acceskey, charset, cords, href, hreflang, name, onblur, onfocus, rel, rev, shape, tabindex, target, type}> </a> elemet használjuk. A nyitó tag legfontosabb attribútuma a href (hypertext reference), ami azt a Web címet azonosítja, ahová a hiperhivatkozás aktivizálása esetében kell elugrania a böngészőnek. Tehát a szövegmezőre rákattintva a href-ben megadott web címre kerülünk. 2.21. ábra A Feladat 11 kódrészlete 15
2.22. ábra A Feladat 11 kódrészlet eredménye a böngészőprogramban 2.8 Táblázatok létrehozása Egy HTML táblázatot a: <table {align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width}> </table> elemmel hozunk létre. A táblázat egészére érvényes egyes attribútumokat a nyitó <table> tag-ben adjuk meg a következőképpen: border= szám keretméret, cellpaddig= szám pixelben meghatározza az üres hely nagyságát a cellákon belül az adatok körül, cellspacing= szám pixelben meghatározza az üres hely nagyságát a cellák között, width= szám táblázatméret, bgcolor= színkód háttérszín. Egy HTML táblázat táblázatsorokból és cellákból áll. A táblázatsorokat a: <tr {align, bgcolor, char, charoff, valign}> </tr> elemmel hozunk létre és ezek között kell az adott táblázatsor egyes celláit meghatározni. A táblázatcellákat a: <td {abbr, align, axis, bgcolor, char, colspan, headers, height, id, nowrap, rowspan, scope, valign, width}> </td> elem segítségével hozunk létre. 16
2.23. ábra A Feladat 12 kódrészlete 2.24. ábra A Feladat 12 kódrészlet eredménye a böngészőprogramban A rowspan és a colspan attribútumok segítségével sorokat és oszlopokat lehet összevonni egy táblázatban: Colspan= szám vizszintesen egyesít több egymással szomszédos cellát, Rowspan= szám - függőlegesen egyesít több egymással alatti cellát, A cellák tartalmazhatnak szöveget, képet, de akár egy új táblázatot is. A táblázatnak a címét a: <caption {align}> </caption> elemmel adhatjuk meg, a cím a táblázat felett jelenik meg. A HTML táblázatok egymásba ágyazhatók, egy cellába elhelyezhető egy másik táblázat tartalma is. Összetett Web lapot megjeleníthetünk táblázatként is. 17
2.25. ábra A Feladat 12a kódrészlete 2.26. ábra A Feladat 12a kódrészlet eredménye a böngészőprogramban A táblázat fejlécének létrehozására a: thead {align, char, charoff, valign}> </thead> elem szolgál. A fejlécben lévő adatok félkövér karakterekkel íródnak ki. A táblázat láblécének létrehozására a: tfoot {align, char, charoff, valign}> </tfoot> elem szolgál. A láblécben lévő adatok is félkövér karakterekkel íródnak ki. 18
HTML táblázatok programtörzse: 1 sor és 2 cella: 2 sor és 2 cella: <body> <table> <tr> <td> </td> <td> </td> </tr> </table> </body> <body> <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> A táblázat törzsét: tbody {align, char, charoff, valign}> </tbody> elemmel hozhatjuk létre (a lábléc után kell megadni) A: <colgroup {align, char, charoff, span, valign, width}> </colgroup> elem segítségével a táblázat több oszlopát tudjuk egyszerre létrehozni. Az itt megadott attribútumok az összes létrehozott oszlopra érvényesek! A: <col {align, char, charoff, span, valign, width}> </col> elem segítségével megadhatjuk a táblázat egy oszlopát a: <colgroup> {align, char, charoff, span, valign, width} > </ colgroup > elemen belül. A: <th {abbr, align, axis, bgcolor, char, charoff, colspan, headers, height, id, nowrap, rowspan, scope, valign, width}> </th> elemet használjuk a cella megadására, ha azt akarjuk, hogy a cella úgy viselkedjen mintha fejléc lenne. A cella szövege félkövér lesz. Példa: <tr><th> Fejléc </th></tr> 19
2.27. ábra A Feladat 13 kódrészlete 2.28. ábra A Feladat 13 kódrészlet eredménye a böngészőprogramban 20
2.29. ábra A Feladat 14 kódrészlete 2.30. ábra A Feladat 14 kódrészlet eredménye a böngészőprogramban 21
2.9 HTML keretek A HTML keretek alkalmazásával a Web lapot részekre (régiókra) oszthatjuk. A régiókban az egy-egy önálló HTML dokumentum tartalmát jeleníthetjük meg. A keretek alkalmazása akkor célszerű, ha a Web oldal egyes részeinek a tartalma nem változik (így akkor nem kell mindig újra tölteni). A HTML kereteket az ún. frameset dokumentumban a: <frameset {cols, onload, rows, unload}> </ frameset > elem segítségével adjuk meg. Meghatározza a keretek számát és méretét. A <frameset> tag használata esetében nem használhatunk <body> tagot! A <frameset> nyitó tag cols és rows attribútumában az egyes keretek mérete függöleges és vizszintes irányban (% -ban vagy pixelben) adható meg. Az oszlop- és sorhatárok megadhatók pixelben vagy %. A maradék képernyőterületre * karakter használatával lehet hivatkozni. A: <frame> elem szolgál a tényleges kerettartalmak megadására. Egy <frameset> elem annyi <frame> elemet tartalmaz, ahány részre osztottuk a Web oldalt. A kerethatároló vonalak egér segítségével elmozdíthatók a böngészőben. Az: <iframe {frameborder, height, longdesc, marginheight, marginwidth, name, scrolling. scr, width} > </ iframe> elem Web oldalon belüli keret létrehozását teszi lehetővé. Felhasználható egy HTML oldal beágyazására egy másik HTML oldalba. A 2.31. ábra a Feladat 15a kódrészletét mutatja be (két vizszintes keret esetében), 2.32. ábrán pedig kódrészlet eredményét láthatjuk a böngészőprogramban. A 2.33. ábra a Feladat 15b kódrészletét mutatja be (három függőleges keret esetében), 2.34. ábrán pedig kódrészlet eredményét láthatjuk a böngészőprogramban. 22
2.31. ábra A Feladat 15a kódrészlete 2.32. ábra A Feladat 15a kódrészlet eredménye a böngészőprogramban 2.33. ábra A Feladat 15b kódrészlete 2.34. ábra A Feladat 15b kódrészlet eredménye a böngészőprogramban 23
2.10. Kérdőívek A kérdőívek (szövegablakok, adat- és jelszóbeviteli mezők, gombok, választógomb csoportok) a párbeszédet teszik lehetővé. Minden űrlap elem a: <form {accept, accept-chareset, action, enctype, method, name, onreset, onsubmit, target}> </ form> elem között kell, hogy elhelyezkedjen amely a kitöltendő űrlap tartalmát jelöli ki. A tartalmat az action attribútumban megadott program dolgozza fel. Ha a felhasználónak egy lista készletből szeretnénk választási lehetőséget adni akkor ezt a: <select {disabled, multiple, name, onblur, onchange, onfocus, size, és az: tabindex}> <select> <option {disable, label, selected, value}> < option > elem párral tudjuk megtenni. A <select>... </select> elem jelzi a lista kezdetét, alapbeállításban egy legördülő menüt eredményez. Minden választási lehetőség lejátszására a multiple attribútumot használjuk. A <select> listába az <option> </option> elem segítségével tudunk elemeket elhelyezni. Egyszerű gombot a: <button{acceskey, disabled, name, onblur, onfocus, tabindex, type, value}>... </button> elem segítségével tudunk létrehozni. A gombhoz scripteket rendelhetünk, melyek gombnyomással aktiválódnak. 24
2.35. ábra A Feladat 16 kódrészlete 2.36. ábra A Feladat 16 kódrészlet eredménye a böngészőprogramban Az adatbeviteli mezőket az: <input {accept, accesskey, align, alt, checked, disabled, ismap, maxlength, name, onblur, onchange, onfocus, onselect, readonly, size, scr, tabindex, type, type="button, type="checkbox, type="file, type="hidden, type="image, type="password, type="radio, type="reset, type="submit, type="text, usemap, value} >... </input> elemmel hozhatjuk létre. 25
A type attribútum határozza meg tehát a beviteli mező fajtáját (text, password, stb.). A: <textarea {accesskey, cols, align, disabled, name, onblur, onchange, onfocus, onselect, readonly, rows, tabindex}>...</textarea> elemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. 2.37. ábra A Feladat 17 kódrészlete 2.38. ábra A Feladat 17 kódrészlet eredménye a böngészőprogramban Az információk csoportosítására a: <fieldset>...</fieldset> elemet használjuk, mely tagok közötti szövegblokkot a böngésző (a többi szövegtől elkülönítve) bekeretezve jeleníti meg. A: <legend {accesskey, align}>...</legend> elem alkalmazásával a keret bal felső szélén címkeszöveget is írhatunk. 26
A mezők a: <label {accesskey, for, onblur, onfocus}>...</label> elemmel feliratozhatók 2.39. ábra A Feladat 18 kódrészlete 2.40. ábra A Feladat 18 kódrészlet eredménye a böngészőprogramban 27
2.11. Objektumok beágyazása Egy HTML dokumentum multimediális tartalommal (ActiveX komponensek, applettek, kép, videó és hangállomány) rendelkezhet. Az objektumok beágyazására az: <object{align, archive, classid, codebase, codetype, data, declare, height, hspace, name, standby, tabindex, type, usemap, vspace, width}>... </object> elemet használjuk. A grafikus objektumokat részekre bonthatjuk, e részekhez kapcsolatok rendelhetők (mappolás).a: <map{name}>...</map> elem segítségével megvalósíthatjuk azt, hogy egy kép bizonyos részei önálló hyperlink-ként viselkedjenek. Az: <area {accesskey, alt, coords, href, nohref, onblur, onfocus, tabindex, target, title} >... </area> elem segítségével a képet tetszőleges részekre feloszthatjuk és minden ilyen részhez egy-egy hyperlink-et hozzárendelünk. 2.12 Scriptek Scripteknek azokat a kis programokat nevezzük, amelyek a HTML oldalakkal együtt, vagy azokba ágyazva töltődnek le a kliens számítógépére. A scripteket a böngészőprogramok futtatják. A HTML dokumentum fejlécében a: <script{charset, defer, language, scr, type} >... </script> elemet használjuk a script kód elhelyezésére. Segítségükkel futatni tudjuk a JavaScript, JScript és VBScript programokat. 28
Nem minden böngésző támogatja a scriptek használatát. Azok számára, akik ilyen böngészőt használnak, alternatív megoldást nyújt a <nonscript>... </nonscript> elem. Az elem nyitó és záró tag- ek közé szöveges megjegyzést tehetünk. Ez a szöveg akkor jelenik meg, ha a böngésző nem tudja futtatni a scriptet. 2.13. Appletek beillesztése a HTML-dokumentumba A Java Appletek beillesztése a HTML-dokumentumba az: <applet {code, width, height}>...</applet> tag-el végezhető. A code attributúmmal a lefordított.class kiterjesztésű Java-applet nevét adjuk meg. A width attributúmmal az Applet széllességét határozzuk meg képpontokban (pixel). A height attributúmmal az Applet magasságát határozzuk meg képpontokban (pixel). 2.14. Stíluslapok A W3C (World Wide Web Consortium) hozta létre a CSS (Cascading Style Sheet) specifikációt. Alapvető célja: bevezetni a stíluslapok alkalmazását a HTML dokumentum formázási utasításai helyet, szétválasztani a HTML dokumentum tartalmi részét a megjelenítési stíluselemektől. A stíluslapokat a HTML dokumentum fejrészében a <style> {media, type}>... < /style> elem segítségével definiáljuk. A type attribútum a stíluslapra történő hivatkozás formáját adja meg (text/css). A következő egyszerű példa három stílusdefiníciót tartalmaz amelyek a font típusára, színére és nagyságára vonatkozik alkalmazva a br, pre és code tag-ra. <style type="text/css"> <! br { font-face: arial; color: black; font-size: 12px" } pre { font-face: arial; color: red; font-size: 18px" } code { font-face: courier; color: blue; font-size: 15px" } --> </style> 29
2.15. Statikus Web oldalak A Web oldalak fejlesztésének első időszakában csak statikus Web oldalakkal találkozhattunk. A statikus Web oldal egy egyszerű szövegszerkesztőben megírt,.htm (vagy.html) kiterjesztésű HTML kódrészletből ált. A Web oldal tartalma (szöveg, kép, linkek) változatlan maradt, függetlenül attól, hogy ki, mikor és milyen módon látogat el a Web oldalra. A statikus Web oldal lekérésének és megjelenítésének a folyamata a következő ábrán látható. (1) A HTML dokument szerkesztése Web szerver (3) A Web szerver kiválasztja a.htm fájlt (4) A Web szerver a HTML dokumentumot a böngészõ felé küldi (2) A felhasználó lekéri a Web lapot A felhasználó számítógépe (5) A böngészõprogram értelmezi a HTML dokumentumot és megjeleníti a képernyõn 2.41. ábra A statikus Web oldal lekérésének és megjelenítésének a folyamata Melléklet: A továbbiakban bemutatjuk a HTML nyelv 4.0 verziójának össz elemét. 30