Alapadatok
Év, oldalszám:2003, 19 oldal
Nyelv:magyar
Letöltések száma:585
Feltöltve:2009. május 31.
Méret:532 KB
Intézmény:
-
Megjegyzés:
Csatolmány:-
Letöltés PDF-ben:Kérlek jelentkezz be!
Értékelések
Nincs még értékelés. Legyél Te az első!Mit olvastak a többiek, ha ezzel végeztek?
Tartalmi kivonat
Károly Róbert Főiskola Gyöngyös Kupás Péter OKTATÁSI SEGÉDLET Gyöngyös, 2003 Tartalomjegyzék 1. Általában a weblapok készítéséről . 3 1.1 Leíró nyelvek . 3 1.2 Szerkesztőprogramok . 3 2. Weblapok szerkezete 4 2.1 A HTML elemek szerkezete . 4 2.2 Weblap szerkezete . 4 3. Szövegformázó HTML elemek 6 3.1 Bekezdés szintű elemek . 6 3.2 Karakter szintű elemek . 6 3.3 Színek megadási módjai . 7 3.4 Felsorolások, többszintű és sorszámozott listák . 7 4. Hivatkozások 7 4.1 Az URL. 7 4.2 Logikai azonosítók: id és class paraméterek . 8 4.3 Linkek és könyvjelzők . 8 5. Táblázatok 9 6. Objektumok beillesztése 9 6.1 Általános objektumbeillesztés. 9 6.2 Képek, videók, hangok . 9 6.3 Kliens oldali térképek . 9 7. Keretek 9 7.1 Keretes oldal felépítése . 9 8. Űrlapok 10 9. Stíluslapok 10 9.1 Általában a stíluslapokról, stíluslap csatolása . 10 9.2 Formázási lehetőségek . 12 10. Scriptek beillesztése . 12 10.1
Általában a scriptekről 12 10.2 Scriptek beillesztése 13 10.3 Néhány rövid JavaScript példa 13 11. Tanácsok weblapkészítéshez . 14 11.1 Elrendezés 14 11.2 Letöltés, méretek 14 11.3 Formázás 14 12. Szerkesztés a Microsoft Frontpage 2002 programmal . 14 12.1 Áttekintés, nézetek 14 12.2 Új weblap létrehozása, tulajdonságainak beállítása 15 12.3 Új webhely létrehozása 16 12.4 Szövegformázás, listák, stíluslapok 16 12.5 Táblázatok kezelése 17 12.6 Keretek létrehozása 17 12.7 Hivatkozások létrehozása, kezelése 18 12.8 Webhely navigációs szerkezetének kialakítása, hivatkozáspultok 18 1 1. Általában a weblapok készítéséről 1.1 Leíró nyelvek A böngésző program által megjelenített weblapok szerkezetét, tartalmának és formájának egy részét a lapok döntő többségben egy HTML (HyperText Markup Language) nyelven megírt kód határozza meg. Ez egy ASCII karakterekből álló szöveges fájl, amit a
böngésző program értelmezni tud A megjelenés és a megjelenített objektumok finomítására azután egyéb nyelveken megírt kódokkal, (pl JavaScript) van lehetőség. A HTML kód a megjelenítendő szövegen kívül formázó elemeket, egyéb objektumokat beágyazó elemeket, és hivatkozásokat tartalmaz más lapokra. Az újabb böngésző programok képesek az XML (Extensible Markup Language) és az XHTML (Extensible HTML) nyelvű kódok értelmezésére is, így ezeken a nyelveket is lehet weblapot készíteni, de egyelőre főleg csak speciális funkciók megvalósításakor használatosak. A HTML, az XML és az XHTML nyelvek a SGML (Standard Generalized Markup Language, ISO 8879) célzottan egyszerűsített változatai, mivel ez az általános jelölő nyelv túlzottan bonyolultnak bizonyult egyes feladatok elvégzésére. Az HTML nyelvet szöveges és képi tartalom gyors, platformfüggetlen közzétételére, XML nyelvet nagyobb mennyiségű adat elektronikus
továbbítására, az XHTML nyelvet pedig a két funkció ötvözésére fejlesztették ki. A mai mobil eszközök közül már sok képes megjeleníteni XHTML nyelven megírt lapokat, így valószínűleg a WAP-ot a jövőben ez a technológia váltja majd fel. Az újabb és újabb igények kielégítésére való törekvés és a technikai fejlődés miatt a HTML nyelv is változik idővel. Hosszú ideig a 32-es szabványt használta mindenki, de ma már a 4.0-ás szabványnak megfelelően készülnek a lapok A nyelv létrehozásának egyik fő célja, a platformfüggetlenség itt annyiban sérül, hogy régebbi böngészők néhány 4.0-ás szabványban megjelenő újabb elemet nem képesek értelmezni 1.2 Szerkesztőprogramok Egy weblap elkészítéséhez elég egy egyszerű karakteres szövegszerkesztő is, hiszen (többnyire) HTML kódot kell csak begépelnünk. Ilyen pl a Windows rendszerek Jegyzettömb-je. Igazán tartalmas és mutatós lapok elkészítésénél azonban
igencsak kényelmetlen a használatuk, hiszen rengeteg munkát és odafigyelést igényel a kód pontos, szintaktikailag helyes beírása. Segítségként számos olyan program érhető el, ami segíti a HTML kód elkészítését. Ezekben a kódszerkesztő programokban párbeszédpaneleken keresztül adhatjuk meg bizonyos HTML elemek, objektumok paramétereit, majd a program maga generálja a kódot, amibe később természetesen lehetőségünk van javítani. Néhány shareware program: Macromedia HomeSite 5.0, HTML Builder XP v40 Enterprise, CoffeeCup, CuteHTML, Ace HTML, stb. Freeware programok: Evrsoft FirstPage 2000, Arachnophilia. Weblapot készíthet az is, aki nem ismeri a HTML nyelv rejtelmeit, hiszen olyan programok is rendelkezésre állnak, melyekkel szövegszerkesztőkben megszokott, WYSIWYG módon szerkeszthetünk, a program maga készíti el a kódot. Előnye ezeknek a programoknak a könnyű kezelhetőségük, hátrányuk, hogy menürendszerük általában nem nyújtja
a lehetőségek teljes skáláját, a generált kód pedig eléggé áttekinthetetlen, így nehéz benne a finombeállításokat elvégezni. Fizetős program pl a Microsoft 3 Frontpage 2002, shareware a Macromedia Dreamweaver MX és freeware a (magyar) HTMLpad 2.0, valamint a Netscape Navigator böngésző mellett használható Netscape Composer. 2. Weblapok szerkezete 2.1 A HTML elemek szerkezete A HTML kód logikailag két fő részből tevődik össze: egyik a megjelenítendő szöveg, másik a szöveg megjelenését, egyéb objektumok beágyazását szabályozó és a hivatkozásokat létrehozó HTML elemek. A legtöbb HTML elem szerkezete a következő: <utasítás paraméter1=”érték1” paraméter2=”érték2”> </utasítás> Ekkor az utasítás és paraméterei a helyén lévő szövegre, vagy egyéb hivatkozott objektumra vonatkozik. Például: <p align=”center”>Ez a bekezdés középre igazítottan jelenik meg</p> Az elem kezdő és
befejező részeit nyitó és záró tag-nak nevezzük. A szabvány szerint néhány elemnél nem kötelező a záró tag használata, de ajánlatos mindig használni ezeket a jobb áttekinthetőség érdekében, valamint azért, mert az XHTML nyelvben mindig kötelező a záró tag. Olyan elemek is vannak, melyeknek nincs záró tag-je, pl a következő elem egy sortörést hoz létre a bekezdésen belül <br> Az elemek egymásba is ágyazhatók, de átfedés nem megengedett: Helyes: <utasítás1><utasítás2></utasítás2></utasítás1> Helytelen: <utasítás1><utasítás2></utasítás1></utasítás2> A kódban elhelyezett több egymás utáni szóköz, tabulátor, enter a böngészőben egyetlen szóközként jelenik meg, tehát a szöveg tördelését is HTML elemekkel kell megoldani. Az elemek beírásakor váltogathatjuk a kis és nagybetűket, nem jelent különbséget az értelmezéskor, de szintén az XHTML szabályai
miatt érdemes a kisbetűs írásmódot megszokni. A kódban a <!-- és --> jelek között elhelyezett a böngésző nem jeleníti meg, így ide nyugodtan írhatunk a későbbi megértést segítő megjegyzéseket. 2.2 Weblap szerkezete A kód első sora a használt HTML nyelv verziószámát írja le. Ha az oldalon nem használunk stíluslapokat, akkor ez a következő sort jelenti: <!doctype html public ’’-//w3c//dtd html 4.0//en”> Ha stíluslapot is használunk: <!doctype html public ’’-//w3c//dtd html 4.0 transitional//en”> Ha kereteket tartalmaz a lap: 4 <!doctype html public ’’-//w3c//dtd html 4.0 frameset//en”> <html></html> A kódnak a <html> elemmel kell folytatódnia és ennek záró tag-jével </html> kell végződnie. <head></head> A <head> és </head> tag-ek között, az un. fejlécben az egész lapra vonatkozó adatokat helyezhetünk el. Többek között:
<title></title> A <title> elem tartalmazza a dokumentum címét, az ide írt szöveg jelenik meg a böngészőablak címsorában, javasolt hossza max. 60 karakter Minden dokumentum <head> szekciója pontosan egy <title> elemet tartalmazhat. A kereső programok többsége a megadott keresési feltételek szerint a dokumentumok <title> elemében is keres <meta> Paraméterek: name=”paraméter neve”, http-equiv=”fejléc információ neve”, content=”paraméter értéke”. Példák: <meta name=”author” content=”Kis Virág”> (szerző) <meta name="copyright" content="Csak oktatási célra tölthető le az oldal"> (jogok) <meta name=”keywords” content=”papagájtartás, nyúltenyésztés, kertépítés”> (kulcsszavak a keresők számára) <meta name=”description” content=”Az oldal állattartással foglalkozik”> (leírás) <meta name="generator"
content="microsoft frontpage 5.0"> (szerkesztőprogram neve) <meta http-equiv="content-language" content="hu"> (nyelv) <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> (magyar karaktereket is tartalmazó karakterkódolás egyik szabványa) <meta http-equiv="content-type" content="text/html; charset=windows1250"> (magyar karaktereket is tartalmazó karakterkódolás másik szabványa) <meta http-equiv="expires" content="22 jan 2000 17:10"> (lejárat ideje) <meta http-equiv="refresh" content="700”> (frissítés ideje másodpercben) <meta http-equiv="refresh" content="5; url=http://matek.gyfkhu”> (adott másodperc után a megadott cím töltődik be) A fejlécben még egyéb elemek is szerepelhetnek, de ezekről későbbi fejezetekben lesz szó. <body></body> Paraméterek:
background=”háttérkép URL-je”, bgcolor=”háttérszín”, text=”szöveg színe”, link=”még nem látogatott link színe”, vlink=”már látogatott link színe”, alink=”aktív link színe” A fejléc után, ha a lap nem tartalmaz kereteket, akkor a <body></body> tag-ek között helyezkedhet el az a tartalom, amit megjeleníteni szeretnénk. 5 A fejléc után, ha a lap kereteket tartalmaz, akkor a <frameset></frameset> tag-ek között kell a keretek szerkezetét megadni. A keretekről egy későbbi fejezet szól Tehát egy egyszerű lapot a következő kóddal lehet például létrehozni: <!doctype html public ’’-//w3c//dtd html 4.0//en”> <html> <head> <meta http-equiv="content-language" content="hu"> <meta name="author" content="Nagy Ivó"> <meta name="keywords" content="adótanácsadás"> <meta http-equiv="content-type"
content="text/html; charset=iso-8859-2"> <title>Adó&Tanács Kft</title> </head> <body bgcolor=”blue” text=”white”> Ez lesz a kft. honlapja! </body> </html> 3. Szövegformázó HTML elemek 3.1 Bekezdés szintű elemek Az ebben a főfejezetben tárgyalt szövegformázó HTML elemeket használhatjuk a szöveg megjelenésének szabályozására, de a stíluslapok segítségével sokkal finomabban, rugalmasabban és egységesebben lehet, a formázást elvégezni. Így a HTML 4-es szabvány már nem ajánlja ezen elemek használatát A <body> törzsben elhelyezkedő formázó elemek lehetnek bekezdés szintűek, vagy karakter szintűek. A bekezdés szintű elemek egy, vagy több bekezdésre, illetve egyéb objektumra vonatkoznak, utánuk új bekezdés kezdődhet, és többnyire tartalmazhatnak más bekezdés szintű elemeket és karakter szintű elemeket. <h1></h1>-től <h6></h6>-ig Paraméterek:
align=”vízszintes igazítás” (left|right|center|justify) Fejlécek, címsorok 6 szintje, ami a szöveg logikai tagolásában segíthet. <p></p> Paraméterek: align=”vízszintes igazítás” (left|right|center|justify) <pre></pre> Paraméterek: width=”karakterek maximális száma egy sorban” <hr> Paraméterek: align=”vízszintes igazítás” (left|right|center), noshade, size=”vastagság pixelben”, width=”szélesség pixelben, vagy %-ban” stb. (később itt jön a többi elem) 3.2 Karakter szintű elemek Speciális karakterek kódjai: 6 Ð ¢ Ó Ö ¨ Ù « Ü ® ß ± â ´ å · è º ë ½ î À ñ Ã ô Æ ÷ É ú Ì ý Ï HTML kód Ð ¢ Ó ¥ Ö ¨ Ù « Ü ® ß ± â ´ å · è º ë ½ î À ñ Ã
ô Æ ÷ É ú Ì ý Ï Unicode Ð ¢ Ó ¥ Ö ¨ Ù « Ü ® ß ± â ´ å · è º ë ½ î À ñ Ã ô Æ ÷ É ú Ì ý Ï ¡ Ò ¤ Õ § Ø ª Û Þ ° á ³ ä ¶ ç ¹ ê ¼ í ¿ ð Â ó Å ö È ù Ë ü Î ÿ HTML kód Unicode ¡ Ò ¤ Õ § Ø ª Û ­ Þ ° á ³ ä ¶ ç ¹ ê ¼ í ¿ ð Â ó Å ö È ù Ë ü Î ÿ ¡ Ò ¤ Õ
§ Ø ª Û ­ Þ ° á ³ ä ¶ ç ¹ ê ¼ í ¿ ð Â ó Å ö È ù Ë ü Î ÿ Ñ £ Ô ¦ × Ú ¬ Ý ¯ à ² ã µ æ ¸ é » ì ¾ ï Á ò Ä õ Ç ø Ê û Í þ HTML kód Unicode Ñ £ Ô ¦ × © Ú ¬ Ý ¯ à ² ã µ æ ¸ é » ì ¾ ï Á ò Ä õ Ç ø Ê û Í þ Ñ £ Ô ¦ × © Ú ¬ Ý ¯ à ² ã µ æ ¸ é
» ì ¾ ï Á ò Ä õ Ç ø Ê û Í þ   3.3 Színek megadási módjai 3.4 Felsorolások, többszintű és sorszámozott listák 4. Hivatkozások 4.1 Az URL Az Internet World Wide Web szolgáltatásának nagy népszerűsége a grafikus felület mellett jelentős mértékben annak köszönhető, hogy hálózatban közzétett dokumentumok nem egymástól elkülönülten jelennek meg, hanem hivatkoznak egymásra és a fizikai összeköttetésen túl hatalmas méretű logikai háló is létrejöhetett. Ebben a hálóban idővel hihetetlen mennyiségű és különféle módokon elérhető információ halmozódott fel, szükség van tehát egy egységes címzésre, amely a dokumentumok elérését lehetővé teszi. Ezt a funkciót az URL (Uniform Resource Locator) látja el Egy abszolút URL három részből tevődik össze: 7 1. Az objektum elérési módja, a
kapcsolat típusa, vagyis a protokoll 2. Az objektumot tartalmazó számítógép, kiszolgáló domain neve, vagy IP címe 3. Az objektum helye a kiszolgálón belül Példák: file:///C|/Dokumentumok/proba.html - itt fájl a helyi gépen található ftp://ftp.szerverhu/pub/fontoszip - itt az ftp protokoll útján tölthetjük le a fájlt http://www.cegnevhu/arak/aktualishtm - itt a http protokollon át weblapot érünk el telnet://szerver.hu - itt egy távoli gépre jelentkezhetünk be mailto:valaki@szervernev.hu - itt levélküldést kezdeményezhetünk az adott címre Az eddig felsoroltak abszolút címek voltak, de léteznek relatív URL-ek is, ahol a kiindulás alapja mindig az aktuális könyvtár, pl: dokumentumok/1998/szabalyzat.htm - itt az aktuális könyvtárból nyíló alkönyvtárakban elhelyezkedő dokumentumra hivatkozunk .//images/portrejpg - itt két szinttel az aktuális könyvtár fölül nyíló könyvtárban lévő képre hivatkozunk 4.2 Logikai azonosítók: id
és class paraméterek A HTML 4-es verziójában szinte minden elemhez egyedi azonosítót rendelhetünk, így ezek alapján hivatkozhatunk is rájuk. Ezt a funkciót az id és class paraméterek valósítják meg. id: Egy elem dokumentumbeli előfordulását azonosítja be, egyedinek kell lennie a dokumentumon belül. class: Egy elemet rendelhetünk hozzá egy, vagy több osztályhoz. Az azonosítók linkek célpontjaként, stíluslapokban, és scripteknél használhatók nagyon eredményesen. Részletes leírás e témáknál találhatók 4.3 Linkek és könyvjelzők A weblapokon más lapokra, vagy objektumokra mutató hivatkozási, vagy célpontok leggyakrabban szövegrészek, vagy képek. Egy szövegrészt, vagy képet kiinduló, vagy célponttá lehet tenni, ha az <a> és </a> tag-ek közé zárjuk. <a></a> Paraméterek: name=”egyedi név az oldalon belül”, href=”a hivatkozott dokumentum URL címe”, rel=”kapcsolat-típus”,
rev=”kapcsolat-típus”, title=”a linkre mutató egér mellett megjelenő rövid szöveg”, hreflang=”a címzett oldal nyelve”, type=”a címzett objektum MIME neve”, charset=”a címzett objektum karakterkódolása”, title=”linkre mutatáskor megjelenő szöveg” Ha egy <a> elemnél csak a name=”akarmi” paramétert adjuk meg, akkor egy könyvjelzőt hozunk létre, vagyis hivatkozásoknak egy lehetséges célpontját. Ekkor erre a könyvjelzőre az <a href= ”#akarmi”></a> linkkel lehet hivatkozni az adott dokumentum egy másik pontjáról. Erre a könyvjelzőre másik dokumentumból is hivatkozhatunk, csak akkor a #akarmi elé a könyvjelzőt tartalmazó lap URL-jét is oda kell írni Az előző fejezetben megismert id és class paraméterek is használhatók linkek célpontjának kijelölésében. Példák: <p><a href="#cel1">Oldalon belüli link1</a></p> <p><a href="#cel2">Oldalon
belüli link2</a></p> 8 <p><a href="http://www.jatekcenterhu">Másik lapra mutató link</a></p> <p><a href="http://www.jatekcenterhu/indexhtml#cel3"> Másik lapra könyvjelzőjére mutató link</a></p> <p><a name="cel1">Cél1</a></p> <p id="cel2">Cél2</p> Megoldható, hogy egy kép egyes területei különböző helyekre mutató linkek legyenek. Erről a kliens oldali térképek fejezetben lesz szó <base> Paraméterek: href=”URL” Ez az elem a kód fejlécébe kerülhet, és a relatív URL-ek alapját lehet vele rögzíteni. Ez akkor hasznos, ha egy lapot eredeti helyéről átteszünk egy másik helyre, a hivatkozott fájlokat pedig nem 5. Táblázatok 6. Objektumok beillesztése 6.1 Általános objektumbeillesztés 6.2 Képek, videók, hangok 6.3 Kliens oldali térképek 7. Keretek 7.1 Keretes oldal felépítése Keretek
használatával a böngésző ablakát téglalap alakú részekre oszthatjuk és ott különböző weblapokat jeleníthetünk meg. Leginkább akkor használjuk, ha az egyik keret listájából választva különféle tartalmakat szeretnénk egy másik keretben megjeleníteni. Segítségével látványos oldalak készíthetők Egy kereteket tartalmazó oldal kódjában a <body> </body> rész helyett a <frameset> </frameset> elem található. Maga a kereteket tartalmazó oldal nem tárol megjelenítendő objektumokat, csak a kereteket definiálja. <frameset> </frameset> Paraméterek: rows=”sorok méretei”, cols=”oszlopok méretei” A sorok és oszlopok méreteit pixelben, százalékosan és arányokkal is megadhatjuk, pl. <frameset rows=”15%,*,3” cols=”,100,2”>. A <fremeset> elemek egymásba is ágyazhatók, így nem csak rácsos szerkezetű felbontásokat készíthetünk, hanem (táblázat celláinak egyesítéséhez és
felosztásához hasonlóan) tetszőleges téglalapszerkezet kialakítható. <frame> Paraméterek: name=”hivatkozási név linkek számára”, src=”az adott keretbe töltődő lap URL-je”, noresize (határvonal nem mozgatható), scrolling=”görgethetőség” (yes|no|auto), frameborder=”látható-e a határ” (1|0), marginwidht=”margó szélessége”, marginheight=”margó magassága” 9 Egy keret tartalmának megadására szolgál ez az elem, így annyi <frame> elemet kell a kódban elhelyezni, ahány keretet definiáltunk a <frameset> elemekkel. <noframes></noframes> Paraméterek: nincsenek E két tag közé kell írni azt a tartalmat, amit meg szeretnénk jeleníteni, ha a böngésző nem képes a keretes lapot kezelni. Példa az eddigiekre: <frameset rows="70,*"> <frame src="elso.htm" name="elso"> <frameset cols="100,*"> <frameset rows="*,"> <frame
src="masodik.htm" name="masodik"> <frame src="harmadik.htm" name="harmadik"> </frameset> <frame src="negyedik.htm" name="negyedik"> </frameset> <noframes> <body> <p>Az oldalak megtekintéséhez olyan oldalra van szükség, amelyik meg tud jeleníteni kereteket.</p> </body> </noframes> </frameset> <iframe></iframe> Paraméterek: width=”szélésség”, height=”magasság”, valamint a <frame> paraméte- rei Ez az elem egy maghatározott méretű keretet helyez el az oldalon, tehát nem az egész oldalt osztjuk fel keretekre. Példa: <p><a href=”1.htm” target=”szoveg”> 1 rész</a><br> <a href=”2.htm” target=”szoveg”> 2 rész</a><br></p> <p><iframe name=”szoveg” src=”1.htm” width=”80%” height=”400”> A böngésző nem képes a beillesztett keret
megjelenítésére. </iframe></p> 8. Űrlapok 9. Stíluslapok 9.1 Általában a stíluslapokról, stíluslap csatolása A HTML nyelv tartalmaz formázó elemeket is, de egyrészt az ezek által nyújtott lehetőségek eléggé korlátozottak, másrészt, ha a megjelenítendő szöveg mellé lépennyomon formázó elemeket helyezünk el (esetleg többszörösen egymásba ágyazva), akkor a kód igencsak áttekinthetetlenné válik. Ezen problémák megszüntetésére alkották meg a stílusleíró nyelveket, melyek közül a CSS (Cascading Style Sheet) stíluslapok a 10 legelterjedtebbek. Segítségükkel árnyaltabb és egységesebb lesz a különféle HTML elemek, objektumok formázása Ma az CSS 10 és a CSS 20 szabvány létezik Egy stíluslap formátumot definiáló utasítások sorozata, pl: h2 {font-style: italic} td {color: red} Az első utasításban h2 a szelektor, és {font-style: italic} a deklaráció rész. A stílusleírásokat négyféle módon
érvényesíthetjük, illetve csatolhatjuk a HTML elemekhez: 1) A fejlécben a <link> elemmel külső stíluslap csatolható az oldalhoz. 2) A fejlécben elhelyezett <style> tag-ek között adunk meg beágyazott stíluslapot 3) A fejlécben elhelyezett <style> tag-ek között a @import kulcsszóval importálunk külső stíluslapot. 4) A törzsrészben egy HTML elem <style> paraméterével adjuk meg a stílusjegyeket. A következő kód mind a négy esetre mutat példát: <html> <head> <title>Stíluslapok</title> <link rel=stylesheet type="text/css" href="stilus-a.css" title="valami"> <style type="text/css"> @import url("pelda/stilus2.css"); <!-h1 {color: yellow} --> </style> </head> <body> <h1>Akármi 1</h1> <h2>Akármi 2</h2> <p style="color: green">Akármi 3</p> </body> </html> CSS
stíluslapok támogatottsága: Böngészőprogram Microsoft Internet Explorer 5.0 és annak újabb verziói Microsoft Internet Explorer 4.0 és annak újabb verziói Microsoft Internet Explorer 3.0 és annak újabb verziói Netscape Navigator 5.0 és annak újabb verziói Netscape Navigator 4.0 és annak újabb verziói Netscape Navigator 3.0 és annak újabb verziói 11 CSS 1.0 igen igen igen igen igen nem CSS 2.0 igen igen nem igen igen nem 9.2 Formázási lehetőségek A stíluslapon megadhatjuk egyes HTML elemek formátumát, a hogyan az előbbi példákban ez történt. Ezen kívül az egyes elemeken belül osztályokat hozhatunk létre: td.piros {color: red} Az itteni beállítás akkor fog érvényre jutni, ha egy táblázat cellájának nyitó tagjában a class paraméter értékeként a piros szerepel: <td class=”piros”></td>. Bármely elem esetén használható általános osztályokat is definiálhatunk, pl: .piros {color: red} Ekkor szintén a class
paraméter értékét kell piros-ra állítani. Az osztályokon kívül egyedi azonosítókkal csak egy-egy HTML elem konkrét előfordulására érvényes formázásokat rögzíthetünk. Pl: td#utolso {font-size: small} #elso {font-size: x-small} alkalmazása az id paraméter segítségével id=”utolso”></td>, vagy <p id=”elso”></p>. Ezek lehetséges, pl: <td 10. Scriptek beillesztése 10.1 Általában a scriptekről A scriptek olyan kisebb programok, amelyek segítségével kibővíthetjük a HTML nyelv adta lehetőségeket. Ezek vagy a HTML kódban helyezkednek el, vagy külön fájlban és a HTML kódba csak egy utalással ágyazzuk be, letöltés után pedig a böngésző programban futnak. Többféle nyelven írhatunk scripteket, a legelterjedtebb a JavaScript, de a VBScriptek is gyakoriak. A JavaScriptet a Netscape cég fejlesztette ki, a fejlődést mutatják az 10-ás, 11-es és az 12-es verziók megjelenése Az újabb böngésző programok
mind tudnak 1.2-es verziót is futtatni, de a HTML kódban fel kell tüntetni a verziószámot A JavaScript nyelvet a Java nyelv alapján fejlesztették, de lényeges különbségek vannak a két nyelv között, a JavaScript pl. egyszerűbb, de sok olyan szolgáltatása van, amit egy hétköznapi felhasználó is igénybe tud venni weblapszerkesztés közben. Interpretált nyelv, vagyis a böngésző sorról sorra értelmezi és hajtja végre A kódja érzékeny a kis- és nagybetűkre, eltérően a HTML kódtól A JavaScript nyelv használatának előnyei: Erőforrások megosztása: Az interaktivitás megvalósítása nem a szervert és a hálózatot terheli, pl. egy űrlap kitöltésének szintaktikai ellenőrzéséhez nem kell a beírt adatokat elküldeni a szervernek, azt ott elvégezni, és visszaküldeni az eredményt, hanem a kliens gépén helyben megtörténhet az ellenőrzés. Bővülő interaktivitási lehetőségek: A felhasználó egérkattintása, egérmozgatása,
szövegbevitele, stb. alapján eseménykezelők által folyamatokat indíthatunk el, így téve élőbbé az oldalt 12 Biztonságos: A nyelv specifikációja nem tesz lehetővé semmiféle biztonságot veszélyeztető folyamat elindítását. A konkrét implementációkban néha előfordul azonban hiányosság e téren, de ezeket az újabb verziókban rendre javítják. A scriptek HTML elemekre az adott elem name, vagy id paraméterével hivatkoznak. Másik irányban a HTML-beli eseménykezelők hivatkoznak script programrészre, legtöbbször meghívnak egy függvényt. <noscript> </noscript> Paraméterek: nincsenek. Ezen az elemen belül helyezzük el azt a tartalmat, amit a scriptet lefuttatni nem tudó böngésző jelenítsen meg. 10.2 Scriptek beillesztése <script><script> Paraméterek: type=”a script nyelve”, src=”script fájl URL-je”, defer (nem fog a script az oldalra írni) Ez az elem akárhányszor előfordulhat a fejlécben és a
törzsben is. A scriptek alapértelmezett neve megadható a fejléc <meta http-equiv=”content-script-type” content=”text/javascript”> sorával. Ez a név felülbírálható, az egyes <scrip> elemeknél. 10.3 Néhány rövid JavaScript példa A böngésző Vissza gombjának funkcióját megvalósító kód: <a href="javascript:history.back()">Vissza </a></p> A dokumentum utolsó módosításának megjelentetése: <script language="JavaScript" > <!-document.write("Utolsó módosítás " + documentlastModified) // --> </script> Hozzáadás a kedvencekhez link, ami a böngésző Kedvencek/Hozzáadás a kedvencekhez menüjét aktivizálja a szövegre kattintáskor: <a href="#" onClick="kedvenc(); return false;" onMouseOver= "window.status=Add a kedvencekhez; return true;"> Hozzáadás a kedvencekhez </a> Ehhez készítsük el a következő JavaScript fájlt
és kedvenc.js néven tegyük a hivatkozó weblappal egy könyvtárba : function kedvenc() { window.externalAddFavorite( http://www.megapixelhu, Megapixel, Számítógép kis- és nagykereskedés ); } Végül a <head> szekcióba tegyük be a JavaScript fájlra való utalást: <script type="text/javascript" src="kedvenc.js"></script> 13 11. Tanácsok weblapkészítéshez 11.1 Elrendezés Bátran merítsünk ötleteket más, az adott témához illeszkedő lapokból. A weblap tartalmának elrendezéséhez táblázatokat használjunk. A táblázatok szélei nem feltétlenül kell látszódniuk, így a szerkezet rejtve maradhat Több táblázat is egymásba ágyazható. (Magasság méretének beállítását csak az Internet Explorer tudja értelmezni.) A HTML forráskód legyen áttekinthető, a kódban használjuk a <!-- és --> jeleket megjegyzések beszúrására. Gyakran ellenőrizzük a hivatkozásainkat. Az egy könyvtárszerkezetben
lévő weblapjaink között mindig relatív, kívülre abszolút linket használjunk. Teszteljük oldalainkat többféle böngészővel és operációs rendszerrel. Keretek helyett sok esetben táblázatokat is használhatunk. 11.2 Letöltés, méretek Kép beillesztésénél a HTML kódba írjuk be a kép méretét, hogy a lap szerkezete már akkor a végleges formát kapja, amikor a képek még nem töltődtek le. Kisebb mintaképek létrehozásához ne a height és width paramétereket használjuk, mert ekkor az egész képet le kell töltenie a böngészőnek. Ne dolgozzunk kizárólag képekkel. Képernyőről kép nem csak a különféle képlopó programokkal vehető le, hanem a PintScreen billentyűvel az egész képernyő kitehető a vágólapra, majd pl. a Paint programba beillesztve szerkeszthető Tüntessük fel a letöltendő objektumok méretét. 11.3 Formázás A PRE elemen belüli félkövér, vagy dőlt karakterek nem biztos, hogy minden böngészőben ugyanúgy
jelennek meg, ezzel számolni kell. Nagyobb üres helyek létrehozásához ne a BR, vagy P elemek többszöri ismétlését használjuk, hanem a PRE elem üres sorait. Jelezzük az oldalon, ha speciális böngészőre van szükség a hibátlan megjelenéshez. Kiemelésre ne használjunk aláhúzást, mert általában ez linket jelöl. Néha érdemes kétféleképpen is biztosítani egy adott funkciót. Pl középre igazítás: <center><div align="center"></div></center>. 12. Szerkesztés a Microsoft Frontpage 2002 programmal 12.1 Áttekintés, nézetek A FrontPage 2002 program WYSIWYG szerkesztő, ami azt jelenti, hogy amit a képernyőn szerkesztés közben látunk, az ugyanúgy fog megjelenni a böngészőben is. Ez jó közelítéssel igaz, ha a böngésző programunk a Microsoft Internet Explorer aktu14 ális legújabb változata, ha azonban Netscape, vagy egyéb más programot használunk böngészésre, akkor tapasztalhatjuk, hogy a
FrontPage által generált kódot ezek néha eltérően értelmezik. Óvatosan kell tehát bánni a böngésző specifikus elemek használatával A grafikus szerkesztőfelület mellett természetesen a generált kódot is megtekinthetjük, és abban módosíthatunk. A többi szerkesztőprogramhoz képest a FrontPage 2002 annyival nyújt többet, hogy segítségével a lapok szerkesztésén túl a webhelyet is felügyelhetjük, azaz pl. ellenőrizhetjük a hiperhivatkozásokat, szabályozhatjuk a közzétételt stb A program lehetőséget ad keretek és stíluslapok létrehozására és kezelésére is A szerkesztett dokumentumokat és a megnyitott webhelyet hatféle nézetben jeleníthetjük meg. A FrontPage nézetei a webhellyel kapcsolatos információk különböző szempontok alapján történő megjelenítésével megkönnyítik a webhely kezelését. A Nézet/Nézetsáv menüvel szabályozható, hogy a nézetváltást lehetővé tévő Nézetsáv látszódjék-e a képernyő bal
szélén. A nézetek a következők: Lap nézet: A FrontPage weblapok létrehozására, szerkesztésére és megtekintésére szolgáló nézete. A Lap nézeten belül az adott lapot háromféleképpen jeleníthetjük meg: Normál, ahol a WYSIWYG szerkesztés megvalósítható, a HTML, ahol a kódot tekinthetjük meg, és a Minta, ahol ellenőrizhető, hogy egy böngésző program hogyan jeleníti meg a lapot. Mappák: A FrontPage azon nézete, amely a webhelytartalom rendszerezését teszi lehetővé. A Mappák nézetben a Windows Intézőben megszokott módon hozhatunk létre, törölhetünk, másolhatunk és helyezhetünk át fájlokat. Jelentések: A webhely tartalmának elemzését lehetővé tevő nézet. Ebben a nézetben kiszámíthatjuk a webhely fájljainak összesített méretét, megtekinthetjük azokat a fájlokat, amelyek nem kapcsolódnak egyetlen másik fájlhoz sem, azonosíthatjuk a lassú és az elévült weblapokat, feladat vagy felelős szerint csoportosíthatjuk a
fájlokat stb. Navigálás: A webhely navigációs szerkezetének létrehozására, megjelenítésére, kinyomtatására és módosítására szolgáló nézet. A Navigálás nézet egy mappaszerű nézetet is tartalmaz, amelyből áthúzhatja a weblapokat a webhelyszerkezetbe Hivatkozások: A webhely hivatkozásainak állapotát jeleníti meg. Ez a nézet mind a belső, mind a külső hivatkozásokat tartalmazza, és grafikusan jelzi az ellenőrzött és a megszakadt hivatkozásokat. Feladatok: A webhely elkészítéséhez vagy karbantartásához szükséges feladatok listáját tartalmazza. A Nézet/Munkaablak menüvel jeleníthető meg a képernyő jobb szélén az a Munkaablak sáv, ahol új weblapot, vagy webhelyet hozhatunk létre, a vágólapot kezelhetjük és kereshetünk. 12.2 Új weblap létrehozása, tulajdonságainak beállítása Lap nézetben tegye a következők valamelyikét: a) Weblap létrehozása üres lapból 1. A Fájl menüben mutasson a Létrehozás pontra,
majd kattintson a Lap vagy webhely parancsra. 2. Az Új weblap vagy webhely munkaablak Új csoportjában kattintson az Üres lap hivatkozásra. b) Weblap létrehozása sablonból 15 1. A Fájl menüben mutasson a Létrehozás pontra, majd kattintson a Lap vagy webhely parancsra. 2. Az Új weblap vagy webhely munkaablakban lévő Új dokumentum sablon alapján csoportban kattintson a Weblapsablonok hivatkozásra. 3. A megfelelő fülre kattintva válassza azt a lapot, amely a használni kívánt sablont tartalmazza, majd kattintson a sablonra A Fájl/Tulajdonságok menüben a következő beállítási lehetőségek adottak: Általános: Cím, amit a kód fejrészében a <title> tag-ek fognak majd közre. Alaphely, ami a kódban a <base> tag-ek közé kerül, és ami a relatív címek kiindulópontja lesz. Alapértelmezett megjelenési hely, ami a <base> elem target paramétere lesz. Háttérhang, ami megszólal, a lap betöltődésekor. Platform, ami megadja, hogy
a parancsfájlokat író tervezésidejű vezérlők az ügyfélgépen vagy a kiszolgálón hajtsák-e végre a parancsfájlokat. Kiszolgáló és Ügyfél, ami megadja, hogy a kiszolgáló-parancsfájlokat író tervezésidejű vezérlők melyik parancsnyelvet használják. Stílus, ami a <body> elem style paramétereként jelentkezik a kódban. Háttér: A Háttérkép a <body> elem background paramétere lesz. A Vízjel bejelölése esetén a <body> elem kap egy bgproperties="fixed" paramétert és háttér nem mozog görgetés esetén (nem minden böngésző támogatja). Az Élőpontos hivatkozások engedélyezése esetén megadható, hogyan változzon meg egy link szövege, ha a kurzort fölé visszük (DHTML effektus). További Színek szintén a <body> elem paramétereiként jelentkeznek Margók: A felső és a baloldali margó beállítása, ami <body> elem style paramétere lesz. Egyéni: A fejléc <meta> elemeit lehet itt
beállítani. Nyelv: A lap nyelvének magyarra történő beállítása a <meta http-equiv="ContentLanguage" content="hu"> sort eredményezi a fejlécben. A HTML kódolás beállítása adja pl. a <meta http-equiv="Content-Type" content= "text/html; charset=iso8859-2"> sort 12.3 Új webhely létrehozása Lépések: 1. A Fájl menüben mutasson a Létrehozás pontra, majd kattintson a Lap vagy webhely parancsra. 2. Az Új weblap vagy webhely munkaablak Új dokumentum sablon alapján csoportjában kattintson a Webhelysablonok hivatkozásra. 3. Kattintson a használni kívánt webhelysablonra 4. Az új webhely elérési útja beviteli mezőbe írja be az új webhely URL-címét, vagy a Tallózás gombra kattintva hozzon létre új webhelyet a merevlemezen, a hálózaton vagy az Interneten. Az aktuális webhely szerkezeti felépítését a Navigálás nézetben lehet felépíteni, később ez a szerkezet a hivatkozáspultok
létrehozásánál használható. 12.4 Szövegformázás, listák, stíluslapok Lap nézetben a Word szövegszerkesztőhöz hasonló módon formázhatjuk a karaktereket és bekezdéseket a Formázás eszköztár ikonjai, vagy a Formátum menü menüpontjai segítségével. A generált kódban ekkor vagy a formázó <b>, <i>, <font> stb 16 elemeket, vagy valamely elem paramétereként előforduló style paramétert a megfelelő formázó értékkel találjuk (itt csak az adott elemre vonatkozó belső stílus jött létre). Pl: <p align="right">Ez egy jobbra zárt bekezdés, benne <b>félkövér</b> szó és egy<span style="letter-spacing: 3pt">ritkított</span> szöveg.</p> Néhány objektum létrehozásakor, beillesztésekor, vagy később a Tulajdonságok párbeszédpanelen lévő Stílus gombra kattintva állíthatók be az adott objektumra vonatkozó (belső) stílusjegyek. Ilyenek objektumok pl a
táblázatok, képek, űrlapok, felsorolások stb A Formátum/Felsorolás és számozás menüben hozhatunk létre egyszerű és többszintű felsorolásokat, számozott listákat. A Grafikus listajelek panellapon, ha egy témát használunk a weblap létrehozásánál, akkor választhatjuk az Aktuális téma képeinek használata bejelölését az adott téma szín és formavilágának megőrzése érdekében. Listajelekként bármilyen képfájl beállítható a Tallózás gombra kattintással Az egyes listaelemeket alacsonyabb, illetve magasabb szintre vihetjük, ha kijelölés után kétszer a Behúzás növelése, vagy Behúzás csökkentése ikonra kattintunk. Az Összezárható listaformátum engedélyezése szöveget bejelölve olyan többszintű listát hozhatunk létre, melynél az alacsonyabb szintek elrejthetők, vagy megmutathatók a listaelemekre való kattintással. A generált kódban felfedezhetjük, hogy ez egy JavaScript beillesztésével valósul meg. Beágyazott
stíluslap hozható létre a Formátum/Stílus menüben, ahol HTML elemekhez kapcsolt stílusjegyeket határozhatunk meg, vagy saját bekezdés és karakterstílusokat hozhatunk létre. Stíluslapot hozhatunk létre, vagy stíluslap-sablont választhatunk a Munkaablak Weblapsablonok menüjére kattintva, majd a Stíluslapok panellapot választva Külső stíluslapot csatolhatunk a laphoz a Formátum/Csatolt stíluslapok menüben 12.5 Táblázatok kezelése Lap nézetben a kurzor aktuális pozíciójánál táblázatot létrehozni a Táblázat/Beszúrás/Táblázat menüvel lehet. A létrehozó panelen lehet a sorok, oszlopok számát, igazítást, szegélyméretet, cellamargót, cellaközt és szélességet beállítani Ezután a Táblázat tulajdonságai és a Cella tulajdonságai panellapon még további jellemzők adhatók meg. A Táblázat menüben elérhető menüpontokkal a Word szövegszerkesztőhöz hasonló módon lehet cellákat egyesíteni, felosztani, sorokat és
oszlopokat kijelölni, beszúrni, törölni stb. 12.6 Keretek létrehozása A Munkaablakban válasszuk a Weblapsablonok menüt, majd a Kereteket tartalmazó lapok panellapot. Itt kiválaszthatjuk azt az elrendezést, ami legjobban illik elképzeléseinkhez, de később természetesen akármilyenre átformázható ez az alap. Az egyes keretekbe már létező lapokat is megadhatunk kezdőlapként, de újakat is létrehozhatunk. A keretek további kezelése a Keretek menü segítségével oldható meg 17 Beágyazott keret (<iframe> a HTML kódban) a Beszúrás/Beágyazott keret menüvel hozható létre. 12.7 Hivatkozások létrehozása, kezelése Lap, azon belül Normál nézetben jelöljük ki a hivatkozási pontként felhasználni kívántszöveget, vagy képet és válasszuk a Beszúrás/Hiperhivatkozás menüt. A Hivatkozott címnél a következők közül választhatunk: Létező fájl, vagy weblap: Az aktuális webhely, a helyi gép, vagy a helyi hálózat valamelyik
lapjára hivatkozhatunk., de a Keresés a weben ikonra kattintva az Interneten elérhető bármelyik lapot kijelölhetjük (ha online kapcsolattal rendelkezünk) Ha a kijelölt lap egyik könyvjelzőjére szeretnénk hivatkozni, akkor a Könyvjelző gombot kell választani. Ha a kijelölt lap kereteket tartalmaz és az egyik keretre akarunk hivatkozni, akkor a Célkeret gombot válasszunk. Ha keretes lap egyik keretéből hivatkozunk, itt szabályozhatjuk azt is, hogy a hivatkozott lap hol nyíljon meg: Azonos keret ( self), Teljes lap ( top), Új ablak ( blank), Szülőkeret ( parent). Dokumentum adott pontja: Itt az aktuális dokumentum könyvjelzői és keretei közül választhatunk Új dokumentum: Egy még nem létező lapra lehet itt hivatkozni és ezáltal létrehozni, ahol megválasztható, hogy most akarjuk ezt szerkeszteni, vagy később. Elektronikus levélcím: E-mail címre mutató hivatkozást hozható létre. Megváltoztatható a hivatkozás formátuma, ha rá mutatunk
egérrel (ezzel is kiemelve a linket). Ehhez a Lap tulajdonságai panellap Háttér lapján jelöljük be az Élőpontos hivatkozás engedélyezése négyzetet és állítsuk be a stílust. Kódszinten ez DHTML effektust jelent. Mindenfajta hivatkozásnál megadható az Elemleírás, ami a title paraméter értéke lesz a kódban. A belső hivatkozások megtekinthetők, ha a Hivatkozások nézetben a Mappalistán kiválasztunk egy lapot. A hivatkozások ellenőrizhetők és javíthatók a Jelentések nézetben. Kliens oldali térkép létrehozásával megoldható, hogy egy kép különböző részei más-más objektumokra hivatkozzanak. 12.8 Webhely navigációs szerkezetének kialakítása, hivatkozáspultok Egy webhely navigációs szerkezetét a Navigálás nézetben alakíthatjuk ki. Meglévő weblap hozzáadása az aktuális szerkezeti felépítéshez: A Mappalistán kattintson a felvenni kívánt weblapra, és húzza azt a szerkezeti ábra kívánt helyére. Weblap áthelyezése
a szerkezeti felépítésen belül: Kattintson az áthelyezendő weblapra, majd húzza egy másik helyre, például egy másik weblap alá vagy mellé. Weblap elnevezése: Kattintson jobb gombbal a weblapra, a helyi menüben válassza az Átnevezés parancsot, majd módosítsa a nevet. Új weblap felvétele meglévő weblap alá: Kattintson jobb gombbal a meglévő weblapra, mutasson az Új pontra, majd a helyi menüből válassza a Lap parancsot. Weblap törlése a szerkezeti felépítésből: Kattintson a weblapra, majd nyomja le a DELETE billentyűt (az eljárás a webhelyről nem törli a weblapot). A módosítások mentése nézetváltás nélkül: Kattintson jobb gombbal a nézet hátterére, és a helyi menüből válassza a Módosítások alkalmazása parancsot. Hivatkozáspultot a következő lépésekkel hozhatunk létre: 18 1. Lap nézetben vigye a kurzort oda, ahová a hivatkozáspultot be szeretné szúrni 2. A Beszúrás menüben kattintson a Navigációs elem
parancsra 3. A jobb oldali ablakban kattintson a Webhelyszerkezetre épülő hivatkozáspult elemre, majd a Tovább gombra. 4. Válassza ki a hivatkozáspulthoz használni kívánt hivatkozáspult-stílust, vagy ha a weblapon már használ valamilyen témát, kattintson A lap témájának használata feliratú ábrára. (Ha már használ valamilyen témát a webhelyen, a hivatkozáspult gombjai átveszik a téma betűtípusát, színeit és egyéb stíluselemeit. Ha A lap témájának használata feliratú ábrára kattint, és a weblapon nem használ semmilyen témát, a hivatkozáspult a weblap alapértelmezett szövegstílusát fogja használni) 5. Kattintson a Tovább gombra 6. Válassza ki, milyen legyen a hivatkozáspult tájolása a weblapon (vízszintes vagy függőleges), majd kattintson a Befejezés gombra. 7. A lapra felveendő hivatkozások csoportban jelölje ki a hivatkozáspulton megjeleníteni kívánt hivatkozástípust, majd kattintson az OK gombra (A
hivatkozáspulthoz tartozó szerkezeti felépítést a weblapok Navigálás nézetben megjelenített elrendezése alapján határozza meg a program) 19
Általában a scriptekről 12 10.2 Scriptek beillesztése 13 10.3 Néhány rövid JavaScript példa 13 11. Tanácsok weblapkészítéshez . 14 11.1 Elrendezés 14 11.2 Letöltés, méretek 14 11.3 Formázás 14 12. Szerkesztés a Microsoft Frontpage 2002 programmal . 14 12.1 Áttekintés, nézetek 14 12.2 Új weblap létrehozása, tulajdonságainak beállítása 15 12.3 Új webhely létrehozása 16 12.4 Szövegformázás, listák, stíluslapok 16 12.5 Táblázatok kezelése 17 12.6 Keretek létrehozása 17 12.7 Hivatkozások létrehozása, kezelése 18 12.8 Webhely navigációs szerkezetének kialakítása, hivatkozáspultok 18 1 1. Általában a weblapok készítéséről 1.1 Leíró nyelvek A böngésző program által megjelenített weblapok szerkezetét, tartalmának és formájának egy részét a lapok döntő többségben egy HTML (HyperText Markup Language) nyelven megírt kód határozza meg. Ez egy ASCII karakterekből álló szöveges fájl, amit a
böngésző program értelmezni tud A megjelenés és a megjelenített objektumok finomítására azután egyéb nyelveken megírt kódokkal, (pl JavaScript) van lehetőség. A HTML kód a megjelenítendő szövegen kívül formázó elemeket, egyéb objektumokat beágyazó elemeket, és hivatkozásokat tartalmaz más lapokra. Az újabb böngésző programok képesek az XML (Extensible Markup Language) és az XHTML (Extensible HTML) nyelvű kódok értelmezésére is, így ezeken a nyelveket is lehet weblapot készíteni, de egyelőre főleg csak speciális funkciók megvalósításakor használatosak. A HTML, az XML és az XHTML nyelvek a SGML (Standard Generalized Markup Language, ISO 8879) célzottan egyszerűsített változatai, mivel ez az általános jelölő nyelv túlzottan bonyolultnak bizonyult egyes feladatok elvégzésére. Az HTML nyelvet szöveges és képi tartalom gyors, platformfüggetlen közzétételére, XML nyelvet nagyobb mennyiségű adat elektronikus
továbbítására, az XHTML nyelvet pedig a két funkció ötvözésére fejlesztették ki. A mai mobil eszközök közül már sok képes megjeleníteni XHTML nyelven megírt lapokat, így valószínűleg a WAP-ot a jövőben ez a technológia váltja majd fel. Az újabb és újabb igények kielégítésére való törekvés és a technikai fejlődés miatt a HTML nyelv is változik idővel. Hosszú ideig a 32-es szabványt használta mindenki, de ma már a 4.0-ás szabványnak megfelelően készülnek a lapok A nyelv létrehozásának egyik fő célja, a platformfüggetlenség itt annyiban sérül, hogy régebbi böngészők néhány 4.0-ás szabványban megjelenő újabb elemet nem képesek értelmezni 1.2 Szerkesztőprogramok Egy weblap elkészítéséhez elég egy egyszerű karakteres szövegszerkesztő is, hiszen (többnyire) HTML kódot kell csak begépelnünk. Ilyen pl a Windows rendszerek Jegyzettömb-je. Igazán tartalmas és mutatós lapok elkészítésénél azonban
igencsak kényelmetlen a használatuk, hiszen rengeteg munkát és odafigyelést igényel a kód pontos, szintaktikailag helyes beírása. Segítségként számos olyan program érhető el, ami segíti a HTML kód elkészítését. Ezekben a kódszerkesztő programokban párbeszédpaneleken keresztül adhatjuk meg bizonyos HTML elemek, objektumok paramétereit, majd a program maga generálja a kódot, amibe később természetesen lehetőségünk van javítani. Néhány shareware program: Macromedia HomeSite 5.0, HTML Builder XP v40 Enterprise, CoffeeCup, CuteHTML, Ace HTML, stb. Freeware programok: Evrsoft FirstPage 2000, Arachnophilia. Weblapot készíthet az is, aki nem ismeri a HTML nyelv rejtelmeit, hiszen olyan programok is rendelkezésre állnak, melyekkel szövegszerkesztőkben megszokott, WYSIWYG módon szerkeszthetünk, a program maga készíti el a kódot. Előnye ezeknek a programoknak a könnyű kezelhetőségük, hátrányuk, hogy menürendszerük általában nem nyújtja
a lehetőségek teljes skáláját, a generált kód pedig eléggé áttekinthetetlen, így nehéz benne a finombeállításokat elvégezni. Fizetős program pl a Microsoft 3 Frontpage 2002, shareware a Macromedia Dreamweaver MX és freeware a (magyar) HTMLpad 2.0, valamint a Netscape Navigator böngésző mellett használható Netscape Composer. 2. Weblapok szerkezete 2.1 A HTML elemek szerkezete A HTML kód logikailag két fő részből tevődik össze: egyik a megjelenítendő szöveg, másik a szöveg megjelenését, egyéb objektumok beágyazását szabályozó és a hivatkozásokat létrehozó HTML elemek. A legtöbb HTML elem szerkezete a következő: <utasítás paraméter1=”érték1” paraméter2=”érték2”> </utasítás> Ekkor az utasítás és paraméterei a helyén lévő szövegre, vagy egyéb hivatkozott objektumra vonatkozik. Például: <p align=”center”>Ez a bekezdés középre igazítottan jelenik meg</p> Az elem kezdő és
befejező részeit nyitó és záró tag-nak nevezzük. A szabvány szerint néhány elemnél nem kötelező a záró tag használata, de ajánlatos mindig használni ezeket a jobb áttekinthetőség érdekében, valamint azért, mert az XHTML nyelvben mindig kötelező a záró tag. Olyan elemek is vannak, melyeknek nincs záró tag-je, pl a következő elem egy sortörést hoz létre a bekezdésen belül <br> Az elemek egymásba is ágyazhatók, de átfedés nem megengedett: Helyes: <utasítás1><utasítás2></utasítás2></utasítás1> Helytelen: <utasítás1><utasítás2></utasítás1></utasítás2> A kódban elhelyezett több egymás utáni szóköz, tabulátor, enter a böngészőben egyetlen szóközként jelenik meg, tehát a szöveg tördelését is HTML elemekkel kell megoldani. Az elemek beírásakor váltogathatjuk a kis és nagybetűket, nem jelent különbséget az értelmezéskor, de szintén az XHTML szabályai
miatt érdemes a kisbetűs írásmódot megszokni. A kódban a <!-- és --> jelek között elhelyezett a böngésző nem jeleníti meg, így ide nyugodtan írhatunk a későbbi megértést segítő megjegyzéseket. 2.2 Weblap szerkezete A kód első sora a használt HTML nyelv verziószámát írja le. Ha az oldalon nem használunk stíluslapokat, akkor ez a következő sort jelenti: <!doctype html public ’’-//w3c//dtd html 4.0//en”> Ha stíluslapot is használunk: <!doctype html public ’’-//w3c//dtd html 4.0 transitional//en”> Ha kereteket tartalmaz a lap: 4 <!doctype html public ’’-//w3c//dtd html 4.0 frameset//en”> <html></html> A kódnak a <html> elemmel kell folytatódnia és ennek záró tag-jével </html> kell végződnie. <head></head> A <head> és </head> tag-ek között, az un. fejlécben az egész lapra vonatkozó adatokat helyezhetünk el. Többek között:
<title></title> A <title> elem tartalmazza a dokumentum címét, az ide írt szöveg jelenik meg a böngészőablak címsorában, javasolt hossza max. 60 karakter Minden dokumentum <head> szekciója pontosan egy <title> elemet tartalmazhat. A kereső programok többsége a megadott keresési feltételek szerint a dokumentumok <title> elemében is keres <meta> Paraméterek: name=”paraméter neve”, http-equiv=”fejléc információ neve”, content=”paraméter értéke”. Példák: <meta name=”author” content=”Kis Virág”> (szerző) <meta name="copyright" content="Csak oktatási célra tölthető le az oldal"> (jogok) <meta name=”keywords” content=”papagájtartás, nyúltenyésztés, kertépítés”> (kulcsszavak a keresők számára) <meta name=”description” content=”Az oldal állattartással foglalkozik”> (leírás) <meta name="generator"
content="microsoft frontpage 5.0"> (szerkesztőprogram neve) <meta http-equiv="content-language" content="hu"> (nyelv) <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> (magyar karaktereket is tartalmazó karakterkódolás egyik szabványa) <meta http-equiv="content-type" content="text/html; charset=windows1250"> (magyar karaktereket is tartalmazó karakterkódolás másik szabványa) <meta http-equiv="expires" content="22 jan 2000 17:10"> (lejárat ideje) <meta http-equiv="refresh" content="700”> (frissítés ideje másodpercben) <meta http-equiv="refresh" content="5; url=http://matek.gyfkhu”> (adott másodperc után a megadott cím töltődik be) A fejlécben még egyéb elemek is szerepelhetnek, de ezekről későbbi fejezetekben lesz szó. <body></body> Paraméterek:
background=”háttérkép URL-je”, bgcolor=”háttérszín”, text=”szöveg színe”, link=”még nem látogatott link színe”, vlink=”már látogatott link színe”, alink=”aktív link színe” A fejléc után, ha a lap nem tartalmaz kereteket, akkor a <body></body> tag-ek között helyezkedhet el az a tartalom, amit megjeleníteni szeretnénk. 5 A fejléc után, ha a lap kereteket tartalmaz, akkor a <frameset></frameset> tag-ek között kell a keretek szerkezetét megadni. A keretekről egy későbbi fejezet szól Tehát egy egyszerű lapot a következő kóddal lehet például létrehozni: <!doctype html public ’’-//w3c//dtd html 4.0//en”> <html> <head> <meta http-equiv="content-language" content="hu"> <meta name="author" content="Nagy Ivó"> <meta name="keywords" content="adótanácsadás"> <meta http-equiv="content-type"
content="text/html; charset=iso-8859-2"> <title>Adó&Tanács Kft</title> </head> <body bgcolor=”blue” text=”white”> Ez lesz a kft. honlapja! </body> </html> 3. Szövegformázó HTML elemek 3.1 Bekezdés szintű elemek Az ebben a főfejezetben tárgyalt szövegformázó HTML elemeket használhatjuk a szöveg megjelenésének szabályozására, de a stíluslapok segítségével sokkal finomabban, rugalmasabban és egységesebben lehet, a formázást elvégezni. Így a HTML 4-es szabvány már nem ajánlja ezen elemek használatát A <body> törzsben elhelyezkedő formázó elemek lehetnek bekezdés szintűek, vagy karakter szintűek. A bekezdés szintű elemek egy, vagy több bekezdésre, illetve egyéb objektumra vonatkoznak, utánuk új bekezdés kezdődhet, és többnyire tartalmazhatnak más bekezdés szintű elemeket és karakter szintű elemeket. <h1></h1>-től <h6></h6>-ig Paraméterek:
align=”vízszintes igazítás” (left|right|center|justify) Fejlécek, címsorok 6 szintje, ami a szöveg logikai tagolásában segíthet. <p></p> Paraméterek: align=”vízszintes igazítás” (left|right|center|justify) <pre></pre> Paraméterek: width=”karakterek maximális száma egy sorban” <hr> Paraméterek: align=”vízszintes igazítás” (left|right|center), noshade, size=”vastagság pixelben”, width=”szélesség pixelben, vagy %-ban” stb. (később itt jön a többi elem) 3.2 Karakter szintű elemek Speciális karakterek kódjai: 6 Ð ¢ Ó Ö ¨ Ù « Ü ® ß ± â ´ å · è º ë ½ î À ñ Ã ô Æ ÷ É ú Ì ý Ï HTML kód Ð ¢ Ó ¥ Ö ¨ Ù « Ü ® ß ± â ´ å · è º ë ½ î À ñ Ã
ô Æ ÷ É ú Ì ý Ï Unicode Ð ¢ Ó ¥ Ö ¨ Ù « Ü ® ß ± â ´ å · è º ë ½ î À ñ Ã ô Æ ÷ É ú Ì ý Ï ¡ Ò ¤ Õ § Ø ª Û Þ ° á ³ ä ¶ ç ¹ ê ¼ í ¿ ð Â ó Å ö È ù Ë ü Î ÿ HTML kód Unicode ¡ Ò ¤ Õ § Ø ª Û ­ Þ ° á ³ ä ¶ ç ¹ ê ¼ í ¿ ð Â ó Å ö È ù Ë ü Î ÿ ¡ Ò ¤ Õ
§ Ø ª Û ­ Þ ° á ³ ä ¶ ç ¹ ê ¼ í ¿ ð Â ó Å ö È ù Ë ü Î ÿ Ñ £ Ô ¦ × Ú ¬ Ý ¯ à ² ã µ æ ¸ é » ì ¾ ï Á ò Ä õ Ç ø Ê û Í þ HTML kód Unicode Ñ £ Ô ¦ × © Ú ¬ Ý ¯ à ² ã µ æ ¸ é » ì ¾ ï Á ò Ä õ Ç ø Ê û Í þ Ñ £ Ô ¦ × © Ú ¬ Ý ¯ à ² ã µ æ ¸ é
» ì ¾ ï Á ò Ä õ Ç ø Ê û Í þ   3.3 Színek megadási módjai 3.4 Felsorolások, többszintű és sorszámozott listák 4. Hivatkozások 4.1 Az URL Az Internet World Wide Web szolgáltatásának nagy népszerűsége a grafikus felület mellett jelentős mértékben annak köszönhető, hogy hálózatban közzétett dokumentumok nem egymástól elkülönülten jelennek meg, hanem hivatkoznak egymásra és a fizikai összeköttetésen túl hatalmas méretű logikai háló is létrejöhetett. Ebben a hálóban idővel hihetetlen mennyiségű és különféle módokon elérhető információ halmozódott fel, szükség van tehát egy egységes címzésre, amely a dokumentumok elérését lehetővé teszi. Ezt a funkciót az URL (Uniform Resource Locator) látja el Egy abszolút URL három részből tevődik össze: 7 1. Az objektum elérési módja, a
kapcsolat típusa, vagyis a protokoll 2. Az objektumot tartalmazó számítógép, kiszolgáló domain neve, vagy IP címe 3. Az objektum helye a kiszolgálón belül Példák: file:///C|/Dokumentumok/proba.html - itt fájl a helyi gépen található ftp://ftp.szerverhu/pub/fontoszip - itt az ftp protokoll útján tölthetjük le a fájlt http://www.cegnevhu/arak/aktualishtm - itt a http protokollon át weblapot érünk el telnet://szerver.hu - itt egy távoli gépre jelentkezhetünk be mailto:valaki@szervernev.hu - itt levélküldést kezdeményezhetünk az adott címre Az eddig felsoroltak abszolút címek voltak, de léteznek relatív URL-ek is, ahol a kiindulás alapja mindig az aktuális könyvtár, pl: dokumentumok/1998/szabalyzat.htm - itt az aktuális könyvtárból nyíló alkönyvtárakban elhelyezkedő dokumentumra hivatkozunk .//images/portrejpg - itt két szinttel az aktuális könyvtár fölül nyíló könyvtárban lévő képre hivatkozunk 4.2 Logikai azonosítók: id
és class paraméterek A HTML 4-es verziójában szinte minden elemhez egyedi azonosítót rendelhetünk, így ezek alapján hivatkozhatunk is rájuk. Ezt a funkciót az id és class paraméterek valósítják meg. id: Egy elem dokumentumbeli előfordulását azonosítja be, egyedinek kell lennie a dokumentumon belül. class: Egy elemet rendelhetünk hozzá egy, vagy több osztályhoz. Az azonosítók linkek célpontjaként, stíluslapokban, és scripteknél használhatók nagyon eredményesen. Részletes leírás e témáknál találhatók 4.3 Linkek és könyvjelzők A weblapokon más lapokra, vagy objektumokra mutató hivatkozási, vagy célpontok leggyakrabban szövegrészek, vagy képek. Egy szövegrészt, vagy képet kiinduló, vagy célponttá lehet tenni, ha az <a> és </a> tag-ek közé zárjuk. <a></a> Paraméterek: name=”egyedi név az oldalon belül”, href=”a hivatkozott dokumentum URL címe”, rel=”kapcsolat-típus”,
rev=”kapcsolat-típus”, title=”a linkre mutató egér mellett megjelenő rövid szöveg”, hreflang=”a címzett oldal nyelve”, type=”a címzett objektum MIME neve”, charset=”a címzett objektum karakterkódolása”, title=”linkre mutatáskor megjelenő szöveg” Ha egy <a> elemnél csak a name=”akarmi” paramétert adjuk meg, akkor egy könyvjelzőt hozunk létre, vagyis hivatkozásoknak egy lehetséges célpontját. Ekkor erre a könyvjelzőre az <a href= ”#akarmi”></a> linkkel lehet hivatkozni az adott dokumentum egy másik pontjáról. Erre a könyvjelzőre másik dokumentumból is hivatkozhatunk, csak akkor a #akarmi elé a könyvjelzőt tartalmazó lap URL-jét is oda kell írni Az előző fejezetben megismert id és class paraméterek is használhatók linkek célpontjának kijelölésében. Példák: <p><a href="#cel1">Oldalon belüli link1</a></p> <p><a href="#cel2">Oldalon
belüli link2</a></p> 8 <p><a href="http://www.jatekcenterhu">Másik lapra mutató link</a></p> <p><a href="http://www.jatekcenterhu/indexhtml#cel3"> Másik lapra könyvjelzőjére mutató link</a></p> <p><a name="cel1">Cél1</a></p> <p id="cel2">Cél2</p> Megoldható, hogy egy kép egyes területei különböző helyekre mutató linkek legyenek. Erről a kliens oldali térképek fejezetben lesz szó <base> Paraméterek: href=”URL” Ez az elem a kód fejlécébe kerülhet, és a relatív URL-ek alapját lehet vele rögzíteni. Ez akkor hasznos, ha egy lapot eredeti helyéről átteszünk egy másik helyre, a hivatkozott fájlokat pedig nem 5. Táblázatok 6. Objektumok beillesztése 6.1 Általános objektumbeillesztés 6.2 Képek, videók, hangok 6.3 Kliens oldali térképek 7. Keretek 7.1 Keretes oldal felépítése Keretek
használatával a böngésző ablakát téglalap alakú részekre oszthatjuk és ott különböző weblapokat jeleníthetünk meg. Leginkább akkor használjuk, ha az egyik keret listájából választva különféle tartalmakat szeretnénk egy másik keretben megjeleníteni. Segítségével látványos oldalak készíthetők Egy kereteket tartalmazó oldal kódjában a <body> </body> rész helyett a <frameset> </frameset> elem található. Maga a kereteket tartalmazó oldal nem tárol megjelenítendő objektumokat, csak a kereteket definiálja. <frameset> </frameset> Paraméterek: rows=”sorok méretei”, cols=”oszlopok méretei” A sorok és oszlopok méreteit pixelben, százalékosan és arányokkal is megadhatjuk, pl. <frameset rows=”15%,*,3” cols=”,100,2”>. A <fremeset> elemek egymásba is ágyazhatók, így nem csak rácsos szerkezetű felbontásokat készíthetünk, hanem (táblázat celláinak egyesítéséhez és
felosztásához hasonlóan) tetszőleges téglalapszerkezet kialakítható. <frame> Paraméterek: name=”hivatkozási név linkek számára”, src=”az adott keretbe töltődő lap URL-je”, noresize (határvonal nem mozgatható), scrolling=”görgethetőség” (yes|no|auto), frameborder=”látható-e a határ” (1|0), marginwidht=”margó szélessége”, marginheight=”margó magassága” 9 Egy keret tartalmának megadására szolgál ez az elem, így annyi <frame> elemet kell a kódban elhelyezni, ahány keretet definiáltunk a <frameset> elemekkel. <noframes></noframes> Paraméterek: nincsenek E két tag közé kell írni azt a tartalmat, amit meg szeretnénk jeleníteni, ha a böngésző nem képes a keretes lapot kezelni. Példa az eddigiekre: <frameset rows="70,*"> <frame src="elso.htm" name="elso"> <frameset cols="100,*"> <frameset rows="*,"> <frame
src="masodik.htm" name="masodik"> <frame src="harmadik.htm" name="harmadik"> </frameset> <frame src="negyedik.htm" name="negyedik"> </frameset> <noframes> <body> <p>Az oldalak megtekintéséhez olyan oldalra van szükség, amelyik meg tud jeleníteni kereteket.</p> </body> </noframes> </frameset> <iframe></iframe> Paraméterek: width=”szélésség”, height=”magasság”, valamint a <frame> paraméte- rei Ez az elem egy maghatározott méretű keretet helyez el az oldalon, tehát nem az egész oldalt osztjuk fel keretekre. Példa: <p><a href=”1.htm” target=”szoveg”> 1 rész</a><br> <a href=”2.htm” target=”szoveg”> 2 rész</a><br></p> <p><iframe name=”szoveg” src=”1.htm” width=”80%” height=”400”> A böngésző nem képes a beillesztett keret
megjelenítésére. </iframe></p> 8. Űrlapok 9. Stíluslapok 9.1 Általában a stíluslapokról, stíluslap csatolása A HTML nyelv tartalmaz formázó elemeket is, de egyrészt az ezek által nyújtott lehetőségek eléggé korlátozottak, másrészt, ha a megjelenítendő szöveg mellé lépennyomon formázó elemeket helyezünk el (esetleg többszörösen egymásba ágyazva), akkor a kód igencsak áttekinthetetlenné válik. Ezen problémák megszüntetésére alkották meg a stílusleíró nyelveket, melyek közül a CSS (Cascading Style Sheet) stíluslapok a 10 legelterjedtebbek. Segítségükkel árnyaltabb és egységesebb lesz a különféle HTML elemek, objektumok formázása Ma az CSS 10 és a CSS 20 szabvány létezik Egy stíluslap formátumot definiáló utasítások sorozata, pl: h2 {font-style: italic} td {color: red} Az első utasításban h2 a szelektor, és {font-style: italic} a deklaráció rész. A stílusleírásokat négyféle módon
érvényesíthetjük, illetve csatolhatjuk a HTML elemekhez: 1) A fejlécben a <link> elemmel külső stíluslap csatolható az oldalhoz. 2) A fejlécben elhelyezett <style> tag-ek között adunk meg beágyazott stíluslapot 3) A fejlécben elhelyezett <style> tag-ek között a @import kulcsszóval importálunk külső stíluslapot. 4) A törzsrészben egy HTML elem <style> paraméterével adjuk meg a stílusjegyeket. A következő kód mind a négy esetre mutat példát: <html> <head> <title>Stíluslapok</title> <link rel=stylesheet type="text/css" href="stilus-a.css" title="valami"> <style type="text/css"> @import url("pelda/stilus2.css"); <!-h1 {color: yellow} --> </style> </head> <body> <h1>Akármi 1</h1> <h2>Akármi 2</h2> <p style="color: green">Akármi 3</p> </body> </html> CSS
stíluslapok támogatottsága: Böngészőprogram Microsoft Internet Explorer 5.0 és annak újabb verziói Microsoft Internet Explorer 4.0 és annak újabb verziói Microsoft Internet Explorer 3.0 és annak újabb verziói Netscape Navigator 5.0 és annak újabb verziói Netscape Navigator 4.0 és annak újabb verziói Netscape Navigator 3.0 és annak újabb verziói 11 CSS 1.0 igen igen igen igen igen nem CSS 2.0 igen igen nem igen igen nem 9.2 Formázási lehetőségek A stíluslapon megadhatjuk egyes HTML elemek formátumát, a hogyan az előbbi példákban ez történt. Ezen kívül az egyes elemeken belül osztályokat hozhatunk létre: td.piros {color: red} Az itteni beállítás akkor fog érvényre jutni, ha egy táblázat cellájának nyitó tagjában a class paraméter értékeként a piros szerepel: <td class=”piros”></td>. Bármely elem esetén használható általános osztályokat is definiálhatunk, pl: .piros {color: red} Ekkor szintén a class
paraméter értékét kell piros-ra állítani. Az osztályokon kívül egyedi azonosítókkal csak egy-egy HTML elem konkrét előfordulására érvényes formázásokat rögzíthetünk. Pl: td#utolso {font-size: small} #elso {font-size: x-small} alkalmazása az id paraméter segítségével id=”utolso”></td>, vagy <p id=”elso”></p>. Ezek lehetséges, pl: <td 10. Scriptek beillesztése 10.1 Általában a scriptekről A scriptek olyan kisebb programok, amelyek segítségével kibővíthetjük a HTML nyelv adta lehetőségeket. Ezek vagy a HTML kódban helyezkednek el, vagy külön fájlban és a HTML kódba csak egy utalással ágyazzuk be, letöltés után pedig a böngésző programban futnak. Többféle nyelven írhatunk scripteket, a legelterjedtebb a JavaScript, de a VBScriptek is gyakoriak. A JavaScriptet a Netscape cég fejlesztette ki, a fejlődést mutatják az 10-ás, 11-es és az 12-es verziók megjelenése Az újabb böngésző programok
mind tudnak 1.2-es verziót is futtatni, de a HTML kódban fel kell tüntetni a verziószámot A JavaScript nyelvet a Java nyelv alapján fejlesztették, de lényeges különbségek vannak a két nyelv között, a JavaScript pl. egyszerűbb, de sok olyan szolgáltatása van, amit egy hétköznapi felhasználó is igénybe tud venni weblapszerkesztés közben. Interpretált nyelv, vagyis a böngésző sorról sorra értelmezi és hajtja végre A kódja érzékeny a kis- és nagybetűkre, eltérően a HTML kódtól A JavaScript nyelv használatának előnyei: Erőforrások megosztása: Az interaktivitás megvalósítása nem a szervert és a hálózatot terheli, pl. egy űrlap kitöltésének szintaktikai ellenőrzéséhez nem kell a beírt adatokat elküldeni a szervernek, azt ott elvégezni, és visszaküldeni az eredményt, hanem a kliens gépén helyben megtörténhet az ellenőrzés. Bővülő interaktivitási lehetőségek: A felhasználó egérkattintása, egérmozgatása,
szövegbevitele, stb. alapján eseménykezelők által folyamatokat indíthatunk el, így téve élőbbé az oldalt 12 Biztonságos: A nyelv specifikációja nem tesz lehetővé semmiféle biztonságot veszélyeztető folyamat elindítását. A konkrét implementációkban néha előfordul azonban hiányosság e téren, de ezeket az újabb verziókban rendre javítják. A scriptek HTML elemekre az adott elem name, vagy id paraméterével hivatkoznak. Másik irányban a HTML-beli eseménykezelők hivatkoznak script programrészre, legtöbbször meghívnak egy függvényt. <noscript> </noscript> Paraméterek: nincsenek. Ezen az elemen belül helyezzük el azt a tartalmat, amit a scriptet lefuttatni nem tudó böngésző jelenítsen meg. 10.2 Scriptek beillesztése <script><script> Paraméterek: type=”a script nyelve”, src=”script fájl URL-je”, defer (nem fog a script az oldalra írni) Ez az elem akárhányszor előfordulhat a fejlécben és a
törzsben is. A scriptek alapértelmezett neve megadható a fejléc <meta http-equiv=”content-script-type” content=”text/javascript”> sorával. Ez a név felülbírálható, az egyes <scrip> elemeknél. 10.3 Néhány rövid JavaScript példa A böngésző Vissza gombjának funkcióját megvalósító kód: <a href="javascript:history.back()">Vissza </a></p> A dokumentum utolsó módosításának megjelentetése: <script language="JavaScript" > <!-document.write("Utolsó módosítás " + documentlastModified) // --> </script> Hozzáadás a kedvencekhez link, ami a böngésző Kedvencek/Hozzáadás a kedvencekhez menüjét aktivizálja a szövegre kattintáskor: <a href="#" onClick="kedvenc(); return false;" onMouseOver= "window.status=Add a kedvencekhez; return true;"> Hozzáadás a kedvencekhez </a> Ehhez készítsük el a következő JavaScript fájlt
és kedvenc.js néven tegyük a hivatkozó weblappal egy könyvtárba : function kedvenc() { window.externalAddFavorite( http://www.megapixelhu, Megapixel, Számítógép kis- és nagykereskedés ); } Végül a <head> szekcióba tegyük be a JavaScript fájlra való utalást: <script type="text/javascript" src="kedvenc.js"></script> 13 11. Tanácsok weblapkészítéshez 11.1 Elrendezés Bátran merítsünk ötleteket más, az adott témához illeszkedő lapokból. A weblap tartalmának elrendezéséhez táblázatokat használjunk. A táblázatok szélei nem feltétlenül kell látszódniuk, így a szerkezet rejtve maradhat Több táblázat is egymásba ágyazható. (Magasság méretének beállítását csak az Internet Explorer tudja értelmezni.) A HTML forráskód legyen áttekinthető, a kódban használjuk a <!-- és --> jeleket megjegyzések beszúrására. Gyakran ellenőrizzük a hivatkozásainkat. Az egy könyvtárszerkezetben
lévő weblapjaink között mindig relatív, kívülre abszolút linket használjunk. Teszteljük oldalainkat többféle böngészővel és operációs rendszerrel. Keretek helyett sok esetben táblázatokat is használhatunk. 11.2 Letöltés, méretek Kép beillesztésénél a HTML kódba írjuk be a kép méretét, hogy a lap szerkezete már akkor a végleges formát kapja, amikor a képek még nem töltődtek le. Kisebb mintaképek létrehozásához ne a height és width paramétereket használjuk, mert ekkor az egész képet le kell töltenie a böngészőnek. Ne dolgozzunk kizárólag képekkel. Képernyőről kép nem csak a különféle képlopó programokkal vehető le, hanem a PintScreen billentyűvel az egész képernyő kitehető a vágólapra, majd pl. a Paint programba beillesztve szerkeszthető Tüntessük fel a letöltendő objektumok méretét. 11.3 Formázás A PRE elemen belüli félkövér, vagy dőlt karakterek nem biztos, hogy minden böngészőben ugyanúgy
jelennek meg, ezzel számolni kell. Nagyobb üres helyek létrehozásához ne a BR, vagy P elemek többszöri ismétlését használjuk, hanem a PRE elem üres sorait. Jelezzük az oldalon, ha speciális böngészőre van szükség a hibátlan megjelenéshez. Kiemelésre ne használjunk aláhúzást, mert általában ez linket jelöl. Néha érdemes kétféleképpen is biztosítani egy adott funkciót. Pl középre igazítás: <center><div align="center"></div></center>. 12. Szerkesztés a Microsoft Frontpage 2002 programmal 12.1 Áttekintés, nézetek A FrontPage 2002 program WYSIWYG szerkesztő, ami azt jelenti, hogy amit a képernyőn szerkesztés közben látunk, az ugyanúgy fog megjelenni a böngészőben is. Ez jó közelítéssel igaz, ha a böngésző programunk a Microsoft Internet Explorer aktu14 ális legújabb változata, ha azonban Netscape, vagy egyéb más programot használunk böngészésre, akkor tapasztalhatjuk, hogy a
FrontPage által generált kódot ezek néha eltérően értelmezik. Óvatosan kell tehát bánni a böngésző specifikus elemek használatával A grafikus szerkesztőfelület mellett természetesen a generált kódot is megtekinthetjük, és abban módosíthatunk. A többi szerkesztőprogramhoz képest a FrontPage 2002 annyival nyújt többet, hogy segítségével a lapok szerkesztésén túl a webhelyet is felügyelhetjük, azaz pl. ellenőrizhetjük a hiperhivatkozásokat, szabályozhatjuk a közzétételt stb A program lehetőséget ad keretek és stíluslapok létrehozására és kezelésére is A szerkesztett dokumentumokat és a megnyitott webhelyet hatféle nézetben jeleníthetjük meg. A FrontPage nézetei a webhellyel kapcsolatos információk különböző szempontok alapján történő megjelenítésével megkönnyítik a webhely kezelését. A Nézet/Nézetsáv menüvel szabályozható, hogy a nézetváltást lehetővé tévő Nézetsáv látszódjék-e a képernyő bal
szélén. A nézetek a következők: Lap nézet: A FrontPage weblapok létrehozására, szerkesztésére és megtekintésére szolgáló nézete. A Lap nézeten belül az adott lapot háromféleképpen jeleníthetjük meg: Normál, ahol a WYSIWYG szerkesztés megvalósítható, a HTML, ahol a kódot tekinthetjük meg, és a Minta, ahol ellenőrizhető, hogy egy böngésző program hogyan jeleníti meg a lapot. Mappák: A FrontPage azon nézete, amely a webhelytartalom rendszerezését teszi lehetővé. A Mappák nézetben a Windows Intézőben megszokott módon hozhatunk létre, törölhetünk, másolhatunk és helyezhetünk át fájlokat. Jelentések: A webhely tartalmának elemzését lehetővé tevő nézet. Ebben a nézetben kiszámíthatjuk a webhely fájljainak összesített méretét, megtekinthetjük azokat a fájlokat, amelyek nem kapcsolódnak egyetlen másik fájlhoz sem, azonosíthatjuk a lassú és az elévült weblapokat, feladat vagy felelős szerint csoportosíthatjuk a
fájlokat stb. Navigálás: A webhely navigációs szerkezetének létrehozására, megjelenítésére, kinyomtatására és módosítására szolgáló nézet. A Navigálás nézet egy mappaszerű nézetet is tartalmaz, amelyből áthúzhatja a weblapokat a webhelyszerkezetbe Hivatkozások: A webhely hivatkozásainak állapotát jeleníti meg. Ez a nézet mind a belső, mind a külső hivatkozásokat tartalmazza, és grafikusan jelzi az ellenőrzött és a megszakadt hivatkozásokat. Feladatok: A webhely elkészítéséhez vagy karbantartásához szükséges feladatok listáját tartalmazza. A Nézet/Munkaablak menüvel jeleníthető meg a képernyő jobb szélén az a Munkaablak sáv, ahol új weblapot, vagy webhelyet hozhatunk létre, a vágólapot kezelhetjük és kereshetünk. 12.2 Új weblap létrehozása, tulajdonságainak beállítása Lap nézetben tegye a következők valamelyikét: a) Weblap létrehozása üres lapból 1. A Fájl menüben mutasson a Létrehozás pontra,
majd kattintson a Lap vagy webhely parancsra. 2. Az Új weblap vagy webhely munkaablak Új csoportjában kattintson az Üres lap hivatkozásra. b) Weblap létrehozása sablonból 15 1. A Fájl menüben mutasson a Létrehozás pontra, majd kattintson a Lap vagy webhely parancsra. 2. Az Új weblap vagy webhely munkaablakban lévő Új dokumentum sablon alapján csoportban kattintson a Weblapsablonok hivatkozásra. 3. A megfelelő fülre kattintva válassza azt a lapot, amely a használni kívánt sablont tartalmazza, majd kattintson a sablonra A Fájl/Tulajdonságok menüben a következő beállítási lehetőségek adottak: Általános: Cím, amit a kód fejrészében a <title> tag-ek fognak majd közre. Alaphely, ami a kódban a <base> tag-ek közé kerül, és ami a relatív címek kiindulópontja lesz. Alapértelmezett megjelenési hely, ami a <base> elem target paramétere lesz. Háttérhang, ami megszólal, a lap betöltődésekor. Platform, ami megadja, hogy
a parancsfájlokat író tervezésidejű vezérlők az ügyfélgépen vagy a kiszolgálón hajtsák-e végre a parancsfájlokat. Kiszolgáló és Ügyfél, ami megadja, hogy a kiszolgáló-parancsfájlokat író tervezésidejű vezérlők melyik parancsnyelvet használják. Stílus, ami a <body> elem style paramétereként jelentkezik a kódban. Háttér: A Háttérkép a <body> elem background paramétere lesz. A Vízjel bejelölése esetén a <body> elem kap egy bgproperties="fixed" paramétert és háttér nem mozog görgetés esetén (nem minden böngésző támogatja). Az Élőpontos hivatkozások engedélyezése esetén megadható, hogyan változzon meg egy link szövege, ha a kurzort fölé visszük (DHTML effektus). További Színek szintén a <body> elem paramétereiként jelentkeznek Margók: A felső és a baloldali margó beállítása, ami <body> elem style paramétere lesz. Egyéni: A fejléc <meta> elemeit lehet itt
beállítani. Nyelv: A lap nyelvének magyarra történő beállítása a <meta http-equiv="ContentLanguage" content="hu"> sort eredményezi a fejlécben. A HTML kódolás beállítása adja pl. a <meta http-equiv="Content-Type" content= "text/html; charset=iso8859-2"> sort 12.3 Új webhely létrehozása Lépések: 1. A Fájl menüben mutasson a Létrehozás pontra, majd kattintson a Lap vagy webhely parancsra. 2. Az Új weblap vagy webhely munkaablak Új dokumentum sablon alapján csoportjában kattintson a Webhelysablonok hivatkozásra. 3. Kattintson a használni kívánt webhelysablonra 4. Az új webhely elérési útja beviteli mezőbe írja be az új webhely URL-címét, vagy a Tallózás gombra kattintva hozzon létre új webhelyet a merevlemezen, a hálózaton vagy az Interneten. Az aktuális webhely szerkezeti felépítését a Navigálás nézetben lehet felépíteni, később ez a szerkezet a hivatkozáspultok
létrehozásánál használható. 12.4 Szövegformázás, listák, stíluslapok Lap nézetben a Word szövegszerkesztőhöz hasonló módon formázhatjuk a karaktereket és bekezdéseket a Formázás eszköztár ikonjai, vagy a Formátum menü menüpontjai segítségével. A generált kódban ekkor vagy a formázó <b>, <i>, <font> stb 16 elemeket, vagy valamely elem paramétereként előforduló style paramétert a megfelelő formázó értékkel találjuk (itt csak az adott elemre vonatkozó belső stílus jött létre). Pl: <p align="right">Ez egy jobbra zárt bekezdés, benne <b>félkövér</b> szó és egy<span style="letter-spacing: 3pt">ritkított</span> szöveg.</p> Néhány objektum létrehozásakor, beillesztésekor, vagy később a Tulajdonságok párbeszédpanelen lévő Stílus gombra kattintva állíthatók be az adott objektumra vonatkozó (belső) stílusjegyek. Ilyenek objektumok pl a
táblázatok, képek, űrlapok, felsorolások stb A Formátum/Felsorolás és számozás menüben hozhatunk létre egyszerű és többszintű felsorolásokat, számozott listákat. A Grafikus listajelek panellapon, ha egy témát használunk a weblap létrehozásánál, akkor választhatjuk az Aktuális téma képeinek használata bejelölését az adott téma szín és formavilágának megőrzése érdekében. Listajelekként bármilyen képfájl beállítható a Tallózás gombra kattintással Az egyes listaelemeket alacsonyabb, illetve magasabb szintre vihetjük, ha kijelölés után kétszer a Behúzás növelése, vagy Behúzás csökkentése ikonra kattintunk. Az Összezárható listaformátum engedélyezése szöveget bejelölve olyan többszintű listát hozhatunk létre, melynél az alacsonyabb szintek elrejthetők, vagy megmutathatók a listaelemekre való kattintással. A generált kódban felfedezhetjük, hogy ez egy JavaScript beillesztésével valósul meg. Beágyazott
stíluslap hozható létre a Formátum/Stílus menüben, ahol HTML elemekhez kapcsolt stílusjegyeket határozhatunk meg, vagy saját bekezdés és karakterstílusokat hozhatunk létre. Stíluslapot hozhatunk létre, vagy stíluslap-sablont választhatunk a Munkaablak Weblapsablonok menüjére kattintva, majd a Stíluslapok panellapot választva Külső stíluslapot csatolhatunk a laphoz a Formátum/Csatolt stíluslapok menüben 12.5 Táblázatok kezelése Lap nézetben a kurzor aktuális pozíciójánál táblázatot létrehozni a Táblázat/Beszúrás/Táblázat menüvel lehet. A létrehozó panelen lehet a sorok, oszlopok számát, igazítást, szegélyméretet, cellamargót, cellaközt és szélességet beállítani Ezután a Táblázat tulajdonságai és a Cella tulajdonságai panellapon még további jellemzők adhatók meg. A Táblázat menüben elérhető menüpontokkal a Word szövegszerkesztőhöz hasonló módon lehet cellákat egyesíteni, felosztani, sorokat és
oszlopokat kijelölni, beszúrni, törölni stb. 12.6 Keretek létrehozása A Munkaablakban válasszuk a Weblapsablonok menüt, majd a Kereteket tartalmazó lapok panellapot. Itt kiválaszthatjuk azt az elrendezést, ami legjobban illik elképzeléseinkhez, de később természetesen akármilyenre átformázható ez az alap. Az egyes keretekbe már létező lapokat is megadhatunk kezdőlapként, de újakat is létrehozhatunk. A keretek további kezelése a Keretek menü segítségével oldható meg 17 Beágyazott keret (<iframe> a HTML kódban) a Beszúrás/Beágyazott keret menüvel hozható létre. 12.7 Hivatkozások létrehozása, kezelése Lap, azon belül Normál nézetben jelöljük ki a hivatkozási pontként felhasználni kívántszöveget, vagy képet és válasszuk a Beszúrás/Hiperhivatkozás menüt. A Hivatkozott címnél a következők közül választhatunk: Létező fájl, vagy weblap: Az aktuális webhely, a helyi gép, vagy a helyi hálózat valamelyik
lapjára hivatkozhatunk., de a Keresés a weben ikonra kattintva az Interneten elérhető bármelyik lapot kijelölhetjük (ha online kapcsolattal rendelkezünk) Ha a kijelölt lap egyik könyvjelzőjére szeretnénk hivatkozni, akkor a Könyvjelző gombot kell választani. Ha a kijelölt lap kereteket tartalmaz és az egyik keretre akarunk hivatkozni, akkor a Célkeret gombot válasszunk. Ha keretes lap egyik keretéből hivatkozunk, itt szabályozhatjuk azt is, hogy a hivatkozott lap hol nyíljon meg: Azonos keret ( self), Teljes lap ( top), Új ablak ( blank), Szülőkeret ( parent). Dokumentum adott pontja: Itt az aktuális dokumentum könyvjelzői és keretei közül választhatunk Új dokumentum: Egy még nem létező lapra lehet itt hivatkozni és ezáltal létrehozni, ahol megválasztható, hogy most akarjuk ezt szerkeszteni, vagy később. Elektronikus levélcím: E-mail címre mutató hivatkozást hozható létre. Megváltoztatható a hivatkozás formátuma, ha rá mutatunk
egérrel (ezzel is kiemelve a linket). Ehhez a Lap tulajdonságai panellap Háttér lapján jelöljük be az Élőpontos hivatkozás engedélyezése négyzetet és állítsuk be a stílust. Kódszinten ez DHTML effektust jelent. Mindenfajta hivatkozásnál megadható az Elemleírás, ami a title paraméter értéke lesz a kódban. A belső hivatkozások megtekinthetők, ha a Hivatkozások nézetben a Mappalistán kiválasztunk egy lapot. A hivatkozások ellenőrizhetők és javíthatók a Jelentések nézetben. Kliens oldali térkép létrehozásával megoldható, hogy egy kép különböző részei más-más objektumokra hivatkozzanak. 12.8 Webhely navigációs szerkezetének kialakítása, hivatkozáspultok Egy webhely navigációs szerkezetét a Navigálás nézetben alakíthatjuk ki. Meglévő weblap hozzáadása az aktuális szerkezeti felépítéshez: A Mappalistán kattintson a felvenni kívánt weblapra, és húzza azt a szerkezeti ábra kívánt helyére. Weblap áthelyezése
a szerkezeti felépítésen belül: Kattintson az áthelyezendő weblapra, majd húzza egy másik helyre, például egy másik weblap alá vagy mellé. Weblap elnevezése: Kattintson jobb gombbal a weblapra, a helyi menüben válassza az Átnevezés parancsot, majd módosítsa a nevet. Új weblap felvétele meglévő weblap alá: Kattintson jobb gombbal a meglévő weblapra, mutasson az Új pontra, majd a helyi menüből válassza a Lap parancsot. Weblap törlése a szerkezeti felépítésből: Kattintson a weblapra, majd nyomja le a DELETE billentyűt (az eljárás a webhelyről nem törli a weblapot). A módosítások mentése nézetváltás nélkül: Kattintson jobb gombbal a nézet hátterére, és a helyi menüből válassza a Módosítások alkalmazása parancsot. Hivatkozáspultot a következő lépésekkel hozhatunk létre: 18 1. Lap nézetben vigye a kurzort oda, ahová a hivatkozáspultot be szeretné szúrni 2. A Beszúrás menüben kattintson a Navigációs elem
parancsra 3. A jobb oldali ablakban kattintson a Webhelyszerkezetre épülő hivatkozáspult elemre, majd a Tovább gombra. 4. Válassza ki a hivatkozáspulthoz használni kívánt hivatkozáspult-stílust, vagy ha a weblapon már használ valamilyen témát, kattintson A lap témájának használata feliratú ábrára. (Ha már használ valamilyen témát a webhelyen, a hivatkozáspult gombjai átveszik a téma betűtípusát, színeit és egyéb stíluselemeit. Ha A lap témájának használata feliratú ábrára kattint, és a weblapon nem használ semmilyen témát, a hivatkozáspult a weblap alapértelmezett szövegstílusát fogja használni) 5. Kattintson a Tovább gombra 6. Válassza ki, milyen legyen a hivatkozáspult tájolása a weblapon (vízszintes vagy függőleges), majd kattintson a Befejezés gombra. 7. A lapra felveendő hivatkozások csoportban jelölje ki a hivatkozáspulton megjeleníteni kívánt hivatkozástípust, majd kattintson az OK gombra (A
hivatkozáspulthoz tartozó szerkezeti felépítést a weblapok Navigálás nézetben megjelenített elrendezése alapján határozza meg a program) 19
