8. Vig Zoltán Honlapkészítés Az Internet kialakulása során viszonylag késın jelent meg az a szolgáltatás amelyet World Wide Webnek, WWW-nek, webnek nevezünk és sokak ma azonosítják magával az Internettel. A web az interneten mőködı, egymással úgynevezett hiperlinkekkel összekötött dokumentumok rendszere. A rendszert webböngészı program segítségével lehet elérni. Ez a program képes megjeleníteni az egyes dokumentumokat, weblapokat. A felhasználó a lapokon található hiperlinkek segítségével további lapokat kérhet le, amelyeken újabb hiperlinkek a (továbbiakban linkek) lehetnek. A rendszer háló -jellegét is ez adja; a dokumentumok a háló csomópontjai, míg a hiperlinkek a háló szálai, amelyeken keresztül egy vagy több lépésben tetszıleges csomóponthoz eljuthatunk. A Web alapelveit Tim Berners-Lee, a CERN részecskefizikai kutatóközpont munkatársa dolgozta ki 1989-ben. Eredeti célja a CERN-ben és más intézményekben folytatott kutatások közötti automatizált információmegosztás volt. Az alapötlet egy globális információs hálózat létrehozása volt a számítógépek, a számítógépes hálózat és a hipertext képességeinek ötvözésével. Mára kiderült, az ötlet jó volt, megvalósítása teljesen átalakította az információfeldolgozást, a webvilág napjainkban válik a korábbi médiumokat integráló, transzformáló (és régi megvalósítási formáikat kiszorító) erıvé. A világháló több szempontból eltér az akkori hipertextes rendszerektıl: A WWW-ben megengedett az egyirányú link, nem kell kétirányú. Ez lehetıvé teszi, hogy valakinek az anyagára hivatkozzunk, anélkül, hogy az illetıt felkeresnénk. A WWW nem volt szabadalmazott, bizonyos alkalmazásokkal szemben, mint például a HyperCard és a Gopher. Ez lehetıvé tette, hogy a függetlenül fejlesszék a szervereket és a klienseket, és licenc megkötések nélkül bıvítsék kiterjesztésekkel. A legnagyobb áttörés lehetıségét mégis talán az jelentette, hogy a dokumentumok elérési rendszerét, címeit úgy alakította ki, hogy a már meglévı internetre kötött számítógépek címzési mechanizmusát egészítette ki. 1993. április 30-án, a CERN bejelentette, hogy a Világháló mindenki számára szabad és ingyenes. Azóta sok weboldal készült, mára a www az internet integrátor szolgáltatásává vált. A többi (korábban megjelent) internetes szolgáltatásnak megjelentek a webes változatai. Ilyenek a web alapú levelezési rendszerek, a fájlok fel és letöltését szervezı -az ftp szolgáltatást helyettesítı- oldalak, de ide sorolhatók az internetes csevegést weboldalon megvalósító alkalmazások, kiváltva a korábbi chatprogramok feladatát. A Web fejlıdése napjainkra még ezen a szinten is túlmutat. Nemcsak az internet szolgáltatásait integrálja saját rendszerébe, hanem az internethez korábban nem kötött, más fejlıdési történeten átment médiaelemeknek is megjelennek a webes változatai. A tévé és rádiócsatornák által üzemeltetett oldalak nagy része online mősorszolgáltatást és archívumot is tartalmaz, az újságok weboldalain pedig gyorsabban informálódhatunk, mint ugyanannak a lapnak nyomtatott verziójából. A web teremtette médiaátalakulás azonban nem áll itt meg. Megjelennek azok a rádiók televíziók amelyek kizárólag a hálózaton mőködnek. Ezen médiumok idıben kötött mősorrendje megszőnik, értelmetlenné válik a napi tévé- s rádiómősor fogalma. Mindenki azt a mősort és akkor tölti le amelyik neki tetszik. A nyomtatott sajtóval konkuráló webes hírportálok esetében ez a változás mondhatni, már végbe is ment, elég ha az eladott napi és hetilapok csökkenı példányszámaira gondolnunk. A webvilág alapszabványokra épül, amelyeket bár folyamatosan fejlesztenek, lényege már az elsı weboldal megjelenésekor adott volt. 8.1. A dokumentumok címzési rendszere Ahhoz, hogy meg tudjunk tekinteni egy dokumentumot tudnunk kell hogy hol található. A honlapok esetén erre egy szabványos címzési rendszert használnak. Az ilyen címeket URL-nek (Uniform Resource Locatornak) nevezik. A legkönnyebben egy példán keresztül érthetı meg az URL szerkezete: http://mpt.bme.hu/html/szakok/omt.html egy URL Az URL részei a következık: http:// a http jelöli a protokoll típusát, lényegében azt, hogy a letöltött adatok milyen adatátviteli szabályok szerint kerüljenek átvitelre, megjelenítésre. A http jelentése A hipertext átviteli protokol (Hyper Text Transfer Protocol), megadja, hogyan küld egymásnak információt a böngészı és a kiszolgáló. Más protokollok is megjelenhetnek itt, például a http protokoll biztonságos (titkosított adatátvitelő) verziója a https vagy a fájlátvitelt szabályozó ftp (File Transfer Protocol) A protokoll jelzése és az ezt minden esetben követı kettıspont után legtöbbször két / jelet látunk. A címzés részleteinek elhagyása mellett errıl annyit érdemes tudni, hogy az ezt közvetlenül követı információk az intenetes címet jelölik. Ha a dokumentumunk nem az interneten hanem a saját gépünkön található akkor az URL valahogy így kezdıdhet: file:///c:/documents... mpt.bme.hu Az URL következı része az ún. domain név. Ez azonosítja az internetre kötött számítógépet, amelyen a keresett dokumentum található. Az Internet kialakulásakor a számítógépeknek csak ún IP címük volt ami 4 bájtból állt. Ezt a címet négy pontokkal elválasztott számmal szokták leírni. Pl.: 152.66.135.60 Ezen címek megjegyzése nem volt egyszerő ezért bevezették a domainnév szolgáltatást (DNS, Domain Name Service) Ennek köszönhetıen a az IP címek könnyebben megjegyezhetı domain nevekkel helyettesíthetık. A megfeleltetés (általában) kölcsönösen egyértelmő; egy domain név megfelel egy IP címnek: appi.bme.hu=152.66.135.60 (akár a böngészıbe írva ki is lehet próbálni) Speciális esetekben egy domainhoz több IP is tartozik (több szerverbıl álló internetes szolgáltatások) illetve egy IP-hez több domain is köthetı (pl.: egy szerveren több honlap üzemel). A domain neveknél a betőcsoportokat szintén pontok választják el. Logikailag az elsı csoport (a domain név kezdete) a legkisebb egységet az utolsó csoport a legnagyobb kategóriát jelenti. Ezt, az utolsó betőcsoportot nevezik elsı szintő domainnek is. Ez magyar domainek esetén a.hu végzıdést jelenti, ahogy a legtöbb országnál is egy kétbetős országkóddal végzıdik a cím. A címzési rendszert megalkotó Egyesült Államok esetén ettıl eltérıen a (szerver-) számítógép jellegére utaló elsı szintő domainneveket használnak. Ilyenek a.com végzıdéső kereskedelmi (commercial), a.net végzıdéső (network)hálózati tartalmakat tároló szerverek és a szervezetek (organization) adatait tartalmazó.org végzıdéső domainek. A teljesség igénye nélkül fellelhetık még az oktatás (.edu), a katonai (.mil), állami (.gov) és információs (.info) egységek végzıdései is a domainnevekben. A domainnév nem teljesen földrajzi egységhez kötött így találhatunk magyar nyelvő tartalmakat is például.com végzıdéső domain alatt. /html/szakok/omt.html Az URL a domait (vagy IP címet) követı része utal a dokumentum elhelyezkedésére a szerveren. A webszolgáltatást az adott számítógépen biztosító webszerver program egyik beállítása az a mappa ami alatt
találhatók a weben közzétett dokumentumok. Ezen belépési pont (webserver root) alatt több mappát hozhatunk létre, ágyazhatunk egymásba. A példában a webszerveren beállított kezdımappában található egy html nevő mappa, azon belül pedig egy szakok nevő almappa. Ebben a szakok nevő mappában található az omt.html dokumentum amelyet a böngészınk jelenít meg. A mappák egymásba ágyazottságát a / jelek mutatják. Ez az adatfelépítés hasonlít a Windows (korábban a DOS) dokumentum elérési útjaira, azzal az eltéréssel, hogy a mappák egymásbaágyazására ott a \ jel míg internetes környezetben a / jel utal. Az url végén általában a dokumentum (fájl) áll ez korábban túlnyomóan htm vagy html kiterjesztéső fájl volt aminek tartalmáról, szekesztésérıl a késıbbiekben részletesen szó lesz. Jelenleg számos adatbázisalapú webszerver mőködik, ahol más fájltípusokat is láthatunk de tartalmukban, a böngészınek küldött adataikban legtöbbször a html kódot használják. Az URL-eknél megoldható, hogy a dokumetum fájl megadása nélkül is letöltsünk információkat. Ennek az alapja hogy az egyes mappákban index.htm(l) vagy default.htm néven elhelyezhetünk alapértelmezett dokumentumot, amely a mappa megadásával betöltıdik. Unix/linux rendszereknél az index.html-t, Windows alapú webszervereknél a default.htm elnevezést használják. Ez elıbbi sokkal elterjedtebb. Így ha a böngészınkbe például a http://mpt.bme.hu/ URL-t írjuk akkor a megjelenı dokumentum a szerver vebes tárterületének alapmappájában található index.html dokumentumot tölti be. Ugyanezt a érjük el a http://mpt.bme.hu/index.html url megadásával. 8.2. A hiprtext és a hipermédia Az írott szövegek megjelenésüktıl a gondolatok, adatok rögzítését szolgálták. Az ilyen formában rögzített információ rögzítése és feldolgozása során is lineáris folyamatot jelent. A szövegeket az elejétıl a végükig olvassuk, de feldolgozásuk során asszociációk, kapcsolódó összefüggések, korábbi emlékek is megfordulnak gondolataink között. Így a lineárisan befogadott információ gondolataink hálózatába kerül, ismereteinkben ilyen asszociatív hálózati formában él tovább. A hagyományos írásos dokumentumok tehát a linearitás korláta miatt nem tudják leképezni pontosan az ember gondolkodását. Erre már évezredekkel korábban rájöttek és megpróbáltak olyan dokumentum rendszereket alkotni, amelyben információk kapcsolhatók egymáshoz kitörve az írásos anyagok linearitásából. A számos próbálkozás jelentısebb innovációi az alábbi listán olvashatók: 220 körül Origenész összeállítja Hexapla címen az Ószövetség hat különbözı fordítását A Biblia egyes nehezebben érthetı helyeihez főzött magyarázatok a szkholia-k. 360 körül Szt. Athanasziosz a húsvéti ünnepek alkalmából rendszeresen körleveleket bocsájt ki, amiket aztán tovább fordítanak. A szentírási kánon története szempontjából igen jelentıs irat Athanasziosz 39. levele, amelyben felsorolja az Ószövetség szentírási könyveit, valamint mind a 27 újszövetségi szentírási könyvet. 1440 - a Gutenberg biblia megjelenése. 1945 - Vannevar Bush, Roosevelt elnök tudományos tanácsadója leírja a Memex koncepcióját az As We May Think (Út az új gondolkodás felé) címő cikkében. 1963 - Engelbart publikálja az A Conceptual Framework of the Augmentation of Man's Intellect címő írását, ami ettıl kezdve a szakma egyik legidézettebb tanulmánya. 1965 - Ted Nelson megalkotja a hypertext fogalmát 1967 - Andries van Dam kifejleszti a Hypertext Editing Systemet, amit a FRESS (File Retrival and Editing System) bemutatása követ 1968-ban a Brown University-n. Ebben a rendszerben már kulcsszavakhoz köthetı kapcsolatokat lehetett elszigetelt dokumentumok között létrehozni. 1978 - a MIT-en egy csoport elkészíti a videodisc-kel mőködı Aspen Movie Map programot, ami az elsı multimediális alkalmazásnak tekinthetı. 1989 márciusa - a Centre Européen pour la Recherche Nucléaire CERN egyik informatikusa, Tim Berners-Lee arra gondolt, hogy a tudósok egymás közötti információcseréjének megkönnyìtésére egy rendszert dolgozzon ki. A rendszer neve World Wide Web (WWW) lett. Erre azért volt szükség, mert egészen addig a kutatóközpontban csak karakteres terminálok miatt, az atomfizikai kísérletek eredményeinek grafikus megjelenítése kissé nehézkes volt. 1990- Az ECHT (European Conference on HyperText) - európai értekezlet a hipertextrıl megrendezése. 1992 után rohamos fejlıdésnek indult és hamarosan az egész világot átfogó, rendkívül népszerő információhálóvá nıtt, mely mára az Internet egységes felületét nyújtja A kronológia kiemelendı eleme a Guttenberg biblia megjelenése, amely nagy példányszámban megjelent alkotás és hivatkozásaival, szövegrészletre történı utalásaival már szakított az írott anyagok hagyományos lineáris információfeldolgozási menetével. A technika korlátai még századokig nem tette lehetıvé olyan rendszerek kialakulását amelyek használatával egyes szövegrészletek átvezethettek további dokumentumokra. Erre a személyi számítógépek és az ıket összekötı hálózat tömeges elterjedéséig kellet várni. A hipertext az ilyen asszociációkat megvalósító rendszerek összefoglaló neve. A kifejetés megalkotója, Ted Nelson definíciója szerint: "írott vagy képi anyagok olyan komplex összeköttetése, amit papíron nem lehet kényelmesen megalkotni. A feldolgozott anyaggal foglalkozó tudósok megjegyzéseit és lábjegyzeteit is tartalmazza. A definíció 1965-ös megjelenése után még közel 35 évet kellet várni míg a CERN fejlesztıi a gyakorlatban is használható rendszert alkottak. A hipertext technikai megvalósítása mostanra legelterjedtebb formában a hipertext leíró nyelv (HyperText Markup Language, HTML) használatával valósult meg. Ez a nyelv a már említett World Wide Web rendszer alapja lett. A WWW megvalósításában már túlmutat a nelsoni definíción, elemei között a szöveges és képi anyagok mellett más médiaelemek (hang, video, animációk) is opcionálisan szerepeltek. Ezért a hipertexttel párhuzamosan terjedt el a hipermédia kifejezés amely a hipertextes anyagok médiaelemeket integráló változatát jelenti. Napjainkban a World Wide Web használata egyértelmően hipermédia használatot jelent, amely kialakulása, fejlıdése elválaszthatatlan a személyi számítógépek és az azokon a kilencvenes évek óta futó grafikus operációs rendszerektıl. 8.3. A hipertext leíró nyelv HTML A HTML egy angol rövidítés. Eredetiben a HyperText Markup Language (=Hipertext leíró nyelv) -et jelent. Eredeti verzióját a World Wide Web Consortium adta ki és a hivatalos szabványt ma is ez a szervezet írja tovább - a gyakorlati technikák alapján. A továbbiakban a HTML 4.01-es szabványát tárgyaljuk, mely a jelenlegi egyik legelterjedtebb a mai interneten.
A HTML nyelv alapja, mint sok minden informatikai apróságnak, a hétköznapi angol nyelv kifejezései. Maga a nyelv "TAG"-ekbıl áll. (kiejtése: "teg"!) <EzEgyTag> Ez a közbülsı szöveg, amelyre vonatkozik. </EzEgyTag> Ezek a TAG-ek sokfélék lehetnek, a nyelv alapjai azonban egyszerőek. Egy HTMLlap megírás után egybıl megtekinthetı bármelyik Internetes böngészıben - akár kapcsolat nélkül is. Így a továbbiakban olvasható példák kipróbálhatók. A módszer a következı lehet: A html kódot írjuk be egy szöveges dokunetumok pl txt fájlok szerkesztésére alkalmas szövegszerkesztıbe ( pl:.jegyzettömb) Mentsük el a dokumentumot úgy, hogy a kiterjesztése htm vagy html legyen. Nyissuk meg a fájlt a böngészıben A Windows 95-ös környezet felett, akkor általában hosszabb és többtagú fájlnevekben érdemes menteni. Az internet erre meglehetısen kényes. Saját érdekünkben és azért is, hogy a fájl minden környezetben jól megtekinthetı legyen az oldal, egyszerőbb, tagolatlan és ékezet nélküli neveket használjunk. Ezekkel az ismerettekkel a legegyszerőbb weblap el is készíthetı: hello world! Egyszerőbb lapok esetén ez minden egyes gépen ugyanígy néz ki. Nem szabad elfelejteni, hogy egy weblapot mindig és tagek közé kell tenni. Ami viszont fontos, hogy a HTML-nyelvben lényegtelen a kisbető-nagybető különbsége. Tehát a, <html>, <Html> és <HtmL> ugyanazt jelentik! Problémát okozhat, hogy a szöveget nem túl egyszerő formázni. Például kipróbálva a a következı fájlt: Egyes sor. Kettes sor. Harmas sor. Ekkor a 7.1. ábrán látható kép fog megjelenni egy böngészı ablakában: 8.1. ábra Böngészıablak Ahhoz, hogy egy szöveg az eredeti formázás szerint nézzen ki a <PRE> tagot kell használni. (PRE=Preformatted - elıre formázott) Az elızı fájl helyesen így néz ki: <PRE> Egyes sor. Kettes sor. Harmas sor. </PRE> Mindazonáltal egyszerőbb megoldás a formázást a böngészıre bízni. Minden sor végén egyszerően egy <BR> taget kell tenni, melynek hatására a böngészı automatikusan új sort kezd. Vigyázat! Ennek a tagnek kivételesen nincsen zárótagje! Tehát a helyes - és egyszerő - forma a következı: <PRE>Egyes sor.<br>kettes sor.<br>harmas sor.</pre> Természetesen az egyes sorokat külön bekezdésben is írhatjuk, de így egyetlen sorban is elérjük a megfelelı hatást. A dolog igen egyszerő, hiszen lehet egy bető félkövér (Bold = B), aláhúzott (Underlined = U), illetve döntött (Italic = I) A megfelelı tagek ezek szerint: <B>Bold</B>,<U>Underlined</U>, illetve <I>Italic</I>. Az elıbbi parancsok persze kombinálhatók is: <B><I>Félkövér Dılt </I></B> <B>Vastag. <I> dılt is</i> Megint csak vastag</b> A betők méretének változtatása a következık szerint történik. Itt is lehetséges a szövegszerkesztıknél megszokott az abszolút méretezés, de szerencsésebb használni a relatív méretezést, ami egy közepes beállításhoz képesti eltérést tesz lehetıvé. A közepes méret a 3-as, a skála 0-tıl 7-ig terjedhet. <FONT SIZE=3> Alapméret </FONT> Bár nem mindig szerencsés, de a betők típusa is változtatható. Ehhez szintén a <FONT> tagre van szükség, de ezúttal a paramétere a SIZE helyett a FACE-re lesz szükség, de alkalmazásánál hontos figyelembe venni, hogy a honlap készítıjének gépen éppen megvan az a betőtípus, de a leendı felhasználóén nincsen! <font face="arial">arial</font> <font face="times Nem Roman CE">Times New Roman CE</font> Ha valamelyik betőtípus hiányzik, akkor az alapértelmezett betőtípust kapjuk helyette. A betők színének változtatása az alábbiak szerint történhet. Alapértelmezésben minden weblapnak vannak beépített színei. A színezéshez a COLOR paramétert kell használni! A színek nevei a legegyszerőbb angol nevek lehetnek, például: black=fekete, green=zöld, blue=kék, gray=szürke, yellow=sárga, purple=bordó,... Persze a fenti paramétereket lehet keverve is használni, ráadásul a sorrend is lényegtelen! <font face="arial" size="3" color="blue">kék szöveg</font> A példa szerint szöveg stílusa "Arial" mérete a normál- (3-as mérető) és kék színő! Ha a hagyományos színek kevésnek bizonyulnak, akkor lehetıségünk van mesterségesen kevert színek elıállítására is. A módszer lényege a három alapszín (R=red; G=green; B=blue) keverése. Bármelyik szín erıssége 0-tól 255-ig állítható, sajnos hexadecimális kóddal. (00-tól FF-ig) A kódsor elejére egy "#" jelet kell rakni. Néhány hagyományos és érdekes szín kódja a következı: black = "#000000" = fekete green = "#00FF00" = zöld blue = "#0000FF" = kék
gray = "#C0C0C0"= szürke red = "#FF0000" = vörös yellow = "#FFFF00" = sárga A böngészıkben vannak eleve beépített stílusok, amit érdemes ki is használni. Ezek a címformátumok, pontosabban - jobb magyar kifejezés híján - a "Heading"parancsok. 6 eleve beépített formátum van, sorszám szerint 1-tıl 6-ig. Az 1-es a legerısebb bekezdés-formátum, míg a 6-os a legkisebb. Nézzük az alábbi (bal oldali) példa megjelenését (a jobb oldalon) <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> Ha egy cím túl hosszú, de semmiképpen nem szeretnénk, ha megtörné a böngészı, akkor érdemes használni a NOWRAP paramétert is, pl.: <H1 NOWRAP> Ezt nem szabad megtörni! </H1> Másik lehetıség a <DIV> használata, amely különbözı részekre (fejezetekre, bekezdésekre) tagolja a szöveget. </DIV> Paraméterei: ALIGN="center/left/right" - igazítás; DATAFORMATAS="text/html" - adatformátum sima szöveg vagy html-kód; TITLE="mit írjon ki" az egér fölé érkezésekor. Az automatikus sortördelés letiltható a <NOBR> és a </NOBR> parancsokkal. Ez feloldható menet közben a <WBR> közben! Ezeket az eleve beépített mintákat persze módosíthatjuk is, de késıbb kerül bemutatásra Egy-egy külön gondolatot érdemes egy-egy külön bekezdésbe írni. Új sort már tudunk kezdeni a <BR> tag segítségével, de ez valamivel több, mint egy egyszerő új sor, mivel itt egész bekezdéseket lehet írni, ráadásul rendezni is lehet! Minden hagyományos szövegszerkesztı és táblázatkezelı programban megszokhattuk, hogy lehet balra (left), jobbra (right) és középre (center) rendezni. Az web a legkülönfélébb típusú konfigurációkon fut, ezért igen gyakran elıfordulhat, hogy a legkülönfélébb képernyıfelbontású monitorokon jelenik meg az a - számunkra megfelelıen elrendezett - szöveg, amit mi meg szeretnénk jeleníteni. Ekkor lesz értelme, hogy bekezdésekben gondolkozzunk, mivel minden egyes paragrafust másként tudunk elrendezni. A paragrafust keretbe záró tag a <P> és a </P>. Itt az új sorral ellentétben van lezárójel is! Automatikusan minden paragrafus balra zárt, de az ALIGN="hogyan" paraméter segítségével lehet másféleképpen is. Ez balra van zárva. Alapértelmezés. Ez középre van rendezve (zárva). Ez jobbra van zárva. Kódolása: <P ALIGN="left"> balra </P> Kódolása: <P ALIGN="center"> középre </P> Kódolása: <P ALIGN="right"> jobbra </P> Bár az internettıl sokáig idegen volt, de mára már megszokottá vált a hasábszerő elrendezés. Az ennek megfelelı beállítás az ALIGN="justify" kóddal tehetı meg. Szintén javasolt alkalmazni a <nobr> és a </nobr> tag-eket, melyek segítségével megakadályozhatjuk, hogy egy fontos szöveg (például név) belsejét megtörje a böngészı. A vízszintes vonalak beillesztése a <HR> taggel történhet Ennek a tegnek nincsen záróeleme, mivel csak egy szimpla vízszintes vonalat húz. Paraméterei lehetnek többek között: COLOR="színkód". (vonal színe) - Csak az Explorerben! ALIGN="left/center/right" (merre rendezze a vonalat) NOSHADE (ne legyen 3-dimenziós árnyéka a vonalnak) SIZE=n (milyen vastag legyen a vonal - pixelben; alapértelmezés: 1) TITLE="kiírás" (mit írjon ki a böngészı, amikor a vonal fölé kerül az egér) WIDTH="n" (milyen hosszú legyen a vonal százalékban vagy pixelben. Alapértelmezés: 100%) Linkek: kapcsolatok más dokumentumokkal Az WWW kialakulásának célja a kapcsolatok, avagy a hiperlinkek megvalósítása volt. Ez a gyakorlatban azt jelenti, hogy egy objektumhoz (szöveg, kép vagy részlete, nyomógomb, stb) hozzárendelhetünk egy másik objektumot, azaz linket hozhatunk létre. Ha a www.bme.hu honlapra akarunk hivatkozni, akkor a következıt kell beírni a weblap megfelelı helyére <A HREF="http://www.bme.hu/"> Hivatkozás a BME honlapjára </A> Megjelenéskor ez a "Hivatkozás a BME honlapjára " nevő szöveg általában aláhúzva jelenik meg és a már jól ismert Windows-cursor átalakul mutató kézzé.tehát, mint a példán is látható, az<a> tag hivatkozást jelent. Ha egy site nyitóoldalára szeretnénk hivatkozni, mint a fenti példában is, egyszerően be kell írni a TELJES nevét. Némileg módosul a helyzet, ha a honlap belsı felépítését is ismerve egy konkrét, a honlapon található dokumentumra kívánunk hivatkozni. Ekkor a pontos URL megadása szükséges. <A HREF="http://www.bme.hu/doc/list.html"> Hivatkozás belsı dokumentumra </A> Ezek a hivatkozások ún. abszolút hivatkozások, azaz a szerkesztett oldal bárhol legyen is a hivatkozás abszolút értelemben megadja a céldokumentumot Saját honlapunk oldalai között szeretnénk hivatkozásokat létrehozni célszerőbb relatív hivatkozásokat használni. Ezzel megoldható hogy a honlapunk belsı hivatkozásai más szerverre költöztetve is mőködıképesek maradnak. Az abszolút és relatív hivatkozások megértéséhez példaként képzeljük el hogy valakit útba szeretnénk igazítani. Két lehetıség közül választhatunk: Megmondjuk neki a pontos címet ez az abszolút hivatkozás Elmagyarázzuk hogy a jelenlegi helyrıl hogy jut el a célállomásához ez a relatív hivatkozás
Ha azon az adott mappán belül szeretnénk hivatkozni, ahol a kiindulási fájl található, akkor elegendı a fájl nevét megadni. <A HREF="masik.html"> Azonos mappában </A> Más almappába a mappa nevének megadásával léphetünk. A mappaváltásokat a / jellel jelölhetjük akár az URL-eknél. Ha ki akarunk lépni (felfele) az adott mappából erre.. (két pont) kódot alkalmazzuk. <A HREF="almappa/masik_mappa/a.html"> almappában </A> <A HREF="../b.html"> fellép egy mappát </A> <A HREF="../harmadik_mappa/c.html"> fellép és almappába lép </A> Egy adott (nagymérető) fájlon belül is tudunk ugrani. Ehhez a fájlon belül kell létrehozni egy "címkét". Ez tulajdonképpen egy láthatatlan könyvjelzı, amit bármikor fel tudunk lapozni. Kódja: <A NAME="könyvjelzınév"></A> <a name="teteje">ez a fájl teteje.</a> <BR>köztes szöveg <BR>Itt is. <BR>Meg itt is. <A href="#teteje">itt lehet a tetejére ugrani.</a> <A href="http://a.b.com/mappa/index.html#top">link külsı szerveren lévı dokumetum adott pontjára</a> Természetesen nem csak http- szabvány szerinti fájlra utalhatunk, hanem ftp-re, illetve E-mail-re is. Az web fejlesztésének kezdetekor szöveges volt szinte minden hozzáférés, éppen ezért az áttekinthetıség kedvéért rendkívüli fontossággal bír mindenféle lista és felsorolás. A legegyszerőbb a rendezés nélküli lista. (Unordered List = UL) Ennek minden egyes eleme a listatag. (List Item =LI) Ennek a tag-nek nincsen zárórésze. <ul> <li> Elsö elem <li> Második elem <li> Harmadik elem </ul> A böngészıben megjelenı kép: A példában rendezett listát is létrehozhatunk (Ordered List = OL). Ha az elıbbi fájlban kicseréljük az <ul> taget <ol>-re, akkor a következı lesz a lista. <ul> <li> Elsö elem <li> Második elem <li> Harmadik elem </ul> A böngészıben megjelenı kép: Rendezett lista esetén az <LI> egyik paramétere megszabja a lista típusát. Type = 1 - a listaelemek számok. Type = a - a listaelemek kisbetők. Type = A - a listaelemek nagybetők Type = i - a listaelemek kicsi római számok. Type = I - a listaelemek nagy római számok. Definíciós listát is készíthetünk, ahol egyszerőbb fogalmakat lehet megmagyarázni. (Definition List = DL). Az egyes elemeket és fogalmakat<dt>-vel jelöljük, (Definition Term) míg magyarázatukat <DD>-vel. (Definition Description) (minta17.html) <dl> <dt>1. fogalom <dd>az 1. fogalom magyarázata <dt>2. fogalom <dd>a 2. fogalom magyarázata </dl> A böngészıben megjelenı kép: Táblázatok A HTML nyelv egyik legjobban megjeleníthetı objektumát, a táblázatokat a legkomplexebb szerkesztıprogramok is alkalmazzák. Ennek oka hogy táblázatokkal és azok képfájlokkal való kitöltésével a igen bonyolult oldalak is megvalósíthatók. Ebben az esetben sem a képek, sem a táblázat kódja nem kézzel készül, hanem a szerkesztıprogram maga generálja. A táblázat tagje igen egyszerő: <TABLE> és </TABLE>. Minden egyes sort <TR> és </TR> közé kell zárni, míg minden egyes cella tartalmát <TD> és </TD> közé. A példán egy 3*3cellás táblázatot mutatunk be. <table> <tr>
<td>1. sor 1. cella</td> <td>1. sor 2. cella</td> </tr> <tr> <td>2. sor 1. cella</td> <td>2. sor 2. cella</td> </tr> <tr> <td>3. sor 1. cella</td> <td>3. sor 2. cella</td> </tr> </table> A böngészıben megjelenı kép: A<TABLE> tagbe különbözı paramétereket lehet beleírni. A táblázat igazítása: <TABLE ALIGN="left"> Ez az alapértelmezés. Természetesen lehet középre (center), illetve jobbra (right) is igazítani. A keret vastagsága. <TABLE BORDER=1> Ez az alapértelmezés A vastagság képpontokban mérendı és egész szám lehet. Szokásos érték: 1 és 5 között. Ha 0-át állítunk be a keret nem fog látszani Az oszlopok számát akkor érdemes megadni ha speciális alakú táblázatunk, egyesített blokkjaink szerepelnek ennel megadása a <TABLE COLS=c> paramáterrel történhet ahol C az oszlopok száma A táblázatot lehet színezni. <TABLE BGCOLOR="red"> Ez a hagyományos színekkel vagy kódokkal történik Lehet egy kép is a háttér. Lásd: <IMG SRC="képurl"> A keret is lehet színezhetı <TABLE BORDERCOLOR="green"> Így zöld lesz a keret színe. Térköz a cellákon belül <TABLE CELLPADDING=2>. Ez a cellahatár és az adat távolságát mutatja meg. Alapérték a 0. Térköz a cellák között CELLSPACING használatával módosítható. Alapérték: 0. Ha: a táblázatnak nem kell kitöltenie az ablak egészét, hanem a <TABLE WIDTH="60%"> paraméter segítségével megadható, hogy hány százalékot töltsön ki. Ha csak egy szám szerepel a WIDTH után, akkor százalék helyett képpontnak értelmezi a böngészı. További lehetıségek Egy táblázatnak címet is adhatunk. Ezt a <TABLE> szimbólum után kell írni. Szabályozható, hogy hová kerüljön a cím <CAPTION ALIGN="TOP"> felülre kerül - alapértelmezés. </CAPTION>. Szöveg elhelyezése a cellán belül: bottom = alulra és középre, center = középre, left = balra, right = jobbra. Függıleges helyzetet szabályozhatjuk a VALIGN paraméterrel. Minta: <CAPTION VALIGN="TOP"> - Alapértelmezés = A táblázat címe a táblázat fölé kerül. Másik lehetséges érték: BOTTOM = a cím alulra kerül. A két paraméter persze együtt is használható! <table border="2"> <caption> Ez a cím </caption> <tr><td> Ez a táblázat eleme</td></tr> </table> Szükség esetén két vagy több cellát is összevonhatunk, mint ez a következı mintán látható! A cellafeszítés (colspan) tipikus használata látható itt. <table border="2" cols=4> <tr> <td> 1. sor 1. elem </td> <td> 1. sor 2. elem </td> <td> 1. sor 3. elem </td> <td> 1. sor 4. elem </td> </tr> <tr> <td colspan="2"> 2. sor 1.-2. elem </td> <td> 2. sor 3. elem </td> <td> 2. sor 4. elem </td> </tr> </table> Minden egyes cella tartalmát darabonként is igazíthatjuk <TD ALIGN="LEFT"> Balra rendez - alapértelmezés </TD> Lehet középre (center) vagy jobbra (right) is rendezni. Egyenként is lehetıségünk van a cellák szélességének állítására is az egész táblázat szélességére alkalmazott WIDTH paraméterrel. Minden egyes cellához lehet rendelni egy címet is, mely akkor jelenik meg, ha az illetı cella fölé kerül az egér. <TD TITLE="cim"> elem tartalma </TD>. Hosszú szövegeknél elıfordulhat, hogy egy sornál több is lehet 1-1 cella tartalma. Ilyenkor jól jöhet a <TD VALIGN="CENTER"> paraméter </TD>, ahol valign = vertical
align = függıleges rendezés. Lehetséges értékek: center = közép; top = fent; bottom = alul; baseline = a betők szintjének aljához igazítja az objektumot. Ha nem akarjuk, hogy egy cellában a szöveget megtörje, akkor használhatjuk a NOWRAP=TRUE paramétert a TD tag-ben. Ekkor a cellatartalom nem kerül törésre. Alapértelmezés: NOWRAP=FALSE. (azaz a cellatartalom törhetı.) Cellánként is lehetıség nyílik háttérszín (BGCOLOR), illetve háttérgrafika (BACKGROUND) definiálására. Értelemszerően létezik a táblázatnak a törzse is. Ez a <TBODY> és a </TBODY> közé kerülhet. Képek és videók Kevés weblap található képek és látványosabbnál látványosabb animációk, esetleg videók nélkül. A kép vagy más médiaobjektum beszúrása is hasonló, mint az eddigi legtöbb parancs: <IMG SRC="objektum_neve.kit">, ahol IMG = image = kép/látvány; SRC = source = forrás. Záróelem nincs, akár a <BR> tagnél. Ha a forrásfájl azonos könyvtárban van a weblappal, akkor csak a fájl nevét kell beírni. Ha az adott weblap környezetébıl kell vennünk egy forrásfájlt, akkor a hiperhivatkozásoknál megismert módszert, abszolút vagy relatív hivatkozást kell használnunk. Fontos tudnivaló, hogy a szövegszerkesztıkkel eltérıen a képek és egyéb animációk nem épülnek be a dokumentumba, hanem hivatkozásként szerepelnek. A böngészı a hivatkozást és paramétereit megtalálva az oldal megjelenítése során a paramétereknek megfelelıen kihagyja az objektum helyét és megkezdi ennek automatikus letöltését, ennek befejeztével megjeleníti az objektumot. A folyamat lassú letöltési sebességnél könnyen megfigyelhetı. A szerkesztés során a fentiek miatt a következı lépéseket kövessük: Készítsük elı az objektumot, a képeket méretezzük át a megjelenítésnek (legalább közelítıen) megfelelı méretre. Mentsük el az objektumot a végleges helyére. Ez mindenképp a html oldalaink fımappája,vagy az alatti mappa legyen. A fájlok elnevezésénél a html fájloknál megszokott (ékezetek, speciális karakterek és szóközök nélküli) neveket használjunk. Relatív hivatkozáskén hivatkozzunk az objektumra. Más szerveren található objektumra való hivatkozásnál a fenti mőveleteket nem kell végrehajtani, de ott abszolút hivatkozást használjunk. Az így beilleszthetı támogatott objektumok listája az alábbi:.avi Audio-Visual Interleaved (AVI).bmp Windows Bitmap (BMP).emf Windows Enhanced Metafile (EMF).gif Graphics Interchange Format (GIF).jpg,.jpeg Joint Photographic Experts Group (JPEG).mov Apple QuickTime Movie (MOV).mpg,.mpeg Motion Picture Experts Group (MPEG).png Portable Network Graphics (PNG).wmf Windows Metafile (WMF).xbm X Bitmap (XBM) Az objektumok ellrendezési paraméterei: A képet/objektumot követı szöveg helyzetét az ALIGN paraméter rendezi. Értékei: Absbottom (=abszolút alja), Absmiddle (=abszolút közép), Baseline (=alapvonal), Bottom (=alja), Left (=balra), Middle (=középre), Right (=jobbra), Texttop (=szöveg közepére), valamint Top (=tetejére). Hasznos lehet, ha a objektum(ok) miatt egy ténylegesen üres sort behúzunk. Ilyen esetekben érdemes használni a jól ismert <BR CLEAR=ALL> tag-et, mely után a szöveg csak a kép alatt folytatódik. Ha túl nagy a objektum, akkor érdemes a letöltés elıtt egy sima helyettesítı szöveget kiiratni az ALT="text" paraméterrel, ahol értelemszerően a text helyett kell beírni a szöveget. Megadható a objektum keretének vastagsága is a BORDER paraméterrel - pixelben megadott egész szám. Megadható a kép szélessége (WIDTH), valamint magassága (HEIGHT) - persze szintén képpontban, hogy a kép letöltésétıl függetlenül a böngészı már tudja rendezni az oldalt, de ezt a paraméterpárt lehet használni a kép átméretezéséhez is. A objektum térközének beállítása alul és felül (VSPACE), illetve balra és jobbra. (HSPACE). Gyakori megoldás, hogy a jó minıségő de nagy mérető (és ezért lassan letöltıdı) kép helyett elıször egy gyenge felbontású, de még éppen, hogy látszató "piszkozatot" löknek ki a weblapra. A LOWSRC paraméter már csak azért is hasznos, mert így a nem kívánt kép teljes letöltését nem kell megvárni. Természetesen itt is meg kell adni a teljes forrást. <img src="img/m1.gif" width="400" height="300" alt="helyette" align="center" border="2"> A fenti html kódrészlet az img mappából az m1.gif képet tölti be az eredeti méretétıl (és arányaitól) függetlenül 400 képpont szélességgel és 300 képpont magassággal. A kép vetultéséig a helyette felirat olvasható. A kép középre rendezetten, két képpont vastagságú kerettel jelenik meg. Betölthetı fájlok a böngészıkbe egyaránt: GIF, JPG, JPEG és PNG. Ha animált GIFeket szeretnénk betölteni, akkor sem hell változtatnunk a kódon Egyéb speciális objektumparaméterek videolejátszásnál: Egy videórészletet többször is le lehet játszani a LOOP paraméter segítségével. Alapértelmezés LOOP=1. Végtelen lejátszást érhetünk el a LOOP="-1" (esetleg a LOOP="infinite") adat segítségével. Használható paraméter a LOOPDELAY, mely ezredmásodpercben szabályozza, hogy két lejátszás között mennyi idı teljen el. (nem minden böngészı támogatja) Frame-ek A HTML-oldalak egyik gyakran használt eleme a keretek (angolul: FRAME-ek) használata. A framekkel a böngészıablak osztható fel téglalap alakú területekre amelyekbe más-más html oldal tölthetı. Leggyakrabban ezzel ott találkozunk ha (általában a bal oldalon található) menüre kattintunk egy honlapon és a jobb oldalon megjelenı dokumentum függetlenül görgethetı a menü elmozdulása nélkül. A framek felépítése beleillik a html logikájába. Amint ez a forráskódban is látható, a kereteket két tag: a <FRAMESET> és a <FRAME> definiálja. A <FRAMESET>-ben százalékosan, illetve pixelesen is megadható a keretek aránya, ill. mérete. Szükség
esetén több keret is egymásba ágyazható. A vízszintes felosztáshoz a "rows" paremétert kell használni, míg a függıleges felosztáshoz a "cols" szükséges. A paraméterek értékei lehetnek százalékok és képpontban értelmezett számértékek. A * a maradék területet tölti ki: <FRAMESET cols="100,200,*"> a 100 és 200 képpontos frame mellett fennmaradó terület lesz a harmadik frame szélessége <FRAMESET rows="30,3*,2*;*"> A 30 képpontos felsı frame alatti területet három framere osztja 3:2:1 arányban <FRAMESET rows="50%,50%"> <FRAME SRC="fel1.html"> <FRAME SRC="fel2.html"> </FRAMESET> << fel1.html << fel2.html Egyéb paraméterek is lehetségesek: A BORDER=n paraméter a keretek közötti helyet adja meg képpontban. (Alapértelmezés: 1) A keret színét a BORDERCOLOR="színkód" határozza meg Ha nem szeretnénk keretvonalat, akkor a FRAMEBORDER="no" paraméter kell. (Ellentéte: FRAMEBORDER="yes", ez az alapértelmazett beállítás) A kereteken belül egyenként beállíthatók a tartalom görgetési paraméterei. A paraméter lehetséges értékei: SCROLLING = NO, YES, illetve AUTO. (NO = tilos a scroll; YES = mindig megjelenik a gördítısáv; AUTO = Csak akkor jelenik meg a sáv, ha az szükséges - ez az alapérték.) A NORESIZE (külön érték nélküli) paraméter megakadályozza, hogy a felhasználó átméretezhesse a weblap kereteit, változtasson az eredeti felosztás arányain. Ezt a paramétert és a görgetés letiltását alkalmazzák a grafikusan készített menük alkalmazásakor. Itt is van lehetıség a keret színének megadására a BORDERCOLOR="színkód" (vagy név) segítségével, de szerencsésebb a szín megadása a FRAMESET tagben. A MARGINHEIGHT=pixelszám segítségével az egyes keretek tetejétıl és aljától való távolságot lehet megadni. Hasonlóan a keret bal és jobb oldalától való távolságot a MARGINWIDTH=pixelszám paraméterrel állítható. A TITLE="kiírandó szöveg" paraméter hatására a beírt szöveg meg fog jelenni a státuszsorban a böngészı alján, ha az egérrel fölé megyünk. A NAME paraméterrel adható hivatkozási név a keretnek. Hatnálata: NAME="ablak_neve". Több speciálisan definiált értéke van, melyek azt határozzák meg, hogy hová kell megnyitnia az új fájlt egy rákattintáskor. Ezt csak úgy tudjuk használni, hogy a megnyitásra használt <A HREF="fájlneve.html"> tagbe bele kell illeszteni a TARGET="ablak neve" paramétert is. Így az egyi keretben kattintva a másik keretbe tölthetünk ve egy oldalt Az ablakokat tetszılegesen el lehet nevezni de néhány foglalt névek speciális feladata van. Az ablakok foglalt nevei: A "_self" paraméter esetén a megfelelı frame helyébe töltıdik az oldal "_blank" = egy tiszta, névtelen lapban nyitja meg; "_parent" = a lapot a közvetlen szülıjében nyitja meg, ahonnan eredtek a linkek; "_top" = az ablak teljes méretében nyitja meg az új linket. Az alábbi példa a framek mőködését mutatja Az index.html file (ezt töltjük be) <FRAMESET cols="150,*"> <FRAME name= elso SRC="f1.html"> <FRAME name= masodik SRC="f2.html"> </FRAMESET> Az f1.html tartalma <A target= masodik HREF="f3.html"> Az f3.html betöltése a masodik keretbe (eredetileg az f2 volt ott) </A> <A target= _blank HREF="f4.html"> Az f4.html betöltése egy új böngészıablakba</a> <A target= _parent HREF="f5.html"> Az f5.html a jelenlegi ablakba (mind az f1 mind az f2 helyett) </A> <A HREF="f6.html"> Az f6.html betöltése a jelenlegi keretbe (elso) </A> <A target= elso HREF="f6.html"> Az f6.html betöltése a jelenlegi keretbe (elso) </A> Dokumentum általános jellemzıi A dokumentum általános beállításaihoz az oldal szerkezetét az alábbiak szerint kell változtatni: <HEAD> Ide kerülnek a fejléc beállításai </HEAD> <BODY> Ide kerül a dokumentum teste (az eddig ismertetett formázások) </BODY> a Látható, hogy maga a -tartomány két részre oszlik. Van egyrészt egy fejléc<head> és </HEAD> között, valamint egy szövegtörzs a <BODY> és a </BODY> között. Eddig csak ez utóbbival foglalkoztunk.
A fejléc megléte nem kötelezı, de alkalmazása célszerő. A következı elemeket tartalmazhatja: <TITLE> A Dokumentum címe </TITLE> Ez a cím kerül a böngészıablak fejlécére. A<META> kezdető elemeknek nincsen zárórésze és nem is jelennek meg. Használata kizárólag a fejlécben engedélyezett. Elemei lehetnek Description: pár szavas leirás Keywords: A lapra jellemzı kulcsszavak a keresırobotoknak. Generator: Milyen programmal lett a lap elkészítve. Author: A szerzı neve, esetleg E-mail címe Robots: Parancsok a keresırobotok számára. Lehetséges értékek: "index/noindex" indexelhetı vagy nem; "follow/nofollow" követhetık a hivatkozások vagy nem. Mivel úgyis mindkettıt használni kell, ezért célszerő helyettük írni a "deny" szót (tilos mindkettıt), illetve az "all" szót, amely mindkét tevékenységet engedi. Expires: Lejárat ideje. Ha pl. csak minden hónap elsején frissíti a lapját, akkor érdemes a mindig következı frissítési dátumot beírni. Ha mindig a legfrissebb tartalmat akarja láttatni, akkor idıpont helyett egyszerően a "NOW" (=most) szót kell beírni. Valamennyi <META name=...> kezdető tagben használható a lang="en", vagy a lang="hu" paraméter, ami a nyelvet jelöli) <HEAD> <TITLE>Ez a cim</title> <META name="description" content="lap leirása"> <META name="keywords" content="kulcsszavak"> <META name="generator" content="mivel lett keszitve"> <META name="author" content="szerzı neve"> <META name="robot" content="index,follow"> <META http-equiv="expires" content="now"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> </HEAD> <BODY> </BODY> Egy másik fontos elem a <BODY> és a </BODY> közé ékelt szövegtörzs nyitóeleme. Rengeteg lehetıséget tartalmaz és igen sokféleképpen lehet alkalmazni. Lehetséges paraméterei közül csak a lényegesebbek kerülnek itt felsorolásra: BGCOLOR="színkód" background color; A háttérszín neve vagy kódja. ALINK="színkód" - active link; Az éppen aktív link(ek) színkódja vagy neve. VLINK="színkód" - visited link; A már meglátogatott linkek színkódja vagy neve. LINK= "színkód" - link's color. A még meg nem látogatott linkek színkódja vagy neve. TEXT="színkód" - text color; A sima (linkek nélküli) szöveg színkódja vagy neve. BACKGROUND="url" - Háttérkép neve (esetleges útvonallal). TITLE="szöveg" - Ez a szöveg lesz kiírva az egérmutató fölé (mintegy segítségként), ha az ablak fölé ér. NOWRAP="TRUE" - Szöveg nem törhetı meg automatikusan. Alapértelmezés: NOWRAP="FALSE". SCROLL="NO" - Eltünteti az oldalsó scrollozó-csíkot. Alapértelmezés: SCROLL="YES". Lehetséges érték még: "AUTO" (automatikus). BOTTOMMARGIN=n - Alsó margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0. TOPMARGIN=n - Felsı margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0. LEFTMARGIN=n - Bal oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0. RIGHTMARGIN=n - Jobb oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0. <ISINDEX> : Nem tartalmaz semmi szöveget és nincsen záróelemet sem. A böngészı számára jelzi, hogy kereshetı (indexelhetı) dokumentumról van szó. Javasolt helyette a "robots" META-tag használata. <LINK> : Jelzi a dokumentum kapcsolatát más dokumentumokkal, stíluslappal címszalaggal, stb. Kell záróelem. Paraméterei: DISABLED - megtiltja az elem használatát; HREF="url" - élıkapocs létrehozása; MEDIA="SCREEN" vagy MEDIA="PRINT" vagy MEDIA="ALL" - meghatározza a dokumentum kimenetét, lehetıségek: képernyı,nyomtató, minden (alapértelmezés) A példán a háttér és a szövegek, linkek szineinek az egész oldalra történı beállítását láthatjuk <HEAD> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080> Ide jön az oldal szövege </BODY> Kérdıívek a HTML dokumentumban Egy weblapon kérdıíveket is közzé tehetünk, amelyek használata elsı pillantásra nem feltétlenül egyszerő! A <FORM METHOD="mód" ACTION="mit tegyen vele"> és a </FORM> közötti utasítások határozzák meg az őrlapot. Az ACTION határozza meg a feldolgozást végzı programot. Ez többnyire a kiszolgáló szerverén a /cgi-bin/ könyvtárban van, de lehet e-mailben is elküldeni. Ez utóbbi sokkal egyszerőbb és nem kell hozzá semmilyen feldolgozó-program. Olvasása a legegyszerőbb is lehetséges. Ha egy feldolgozó-programot kell megcímezni, akkor kiterjesztése többnyire PHP vagy ASP szokott lenni. A METHOD a kitöltött őrlap továbbítási módját határozza meg. Ez lehet GET (Hozzáfőzi az őrlapot az url-hez - idınként túl hosszúra nyúlhat az url!), illetve POST (adatcsomagban - biztonságos!)
POST adatküldés esetén a kódolás típusának az ENCTYPE="TEXT/PLAIN" paramétert érdemes választani, mert így minden levelezıprogram jól megérti a küldött adatokat. Az <INPUT NAME="név" TYPE="típus" ALIGN="igazítás"> utasítással határozható meg egy kitöltendı őrlapmezı. A NAME természetesen a mezınév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. Ez gyakorlatilag szabadon megválasztható, de javasolt a html-nél megismert elnevezési szabályokat. Az ALIGN igazítást jelent. Lehetséges értékei: left, right, center. Itt is használható a TITLE, mely itt is az egér hatására megjelenı szöveget jelenti. A TYPE pedig az adattípus, melyet vár a beviteli mezı. Lehetséges típusok: TEXT -szöveg, PASSWORD - jelszó (nem jelenik meg bevitelkor!), HIDDEN-rejtett (ez sem jelenik meg), CHECKBOX - kapcsoló (több is kiválasztható egyszerre), RADIO - kapcsoló (egyszerre csak egyet lehet kiválasztani), RANGE - numerikus adat, FILE - csatolandó fájl, SUBMIT - adattovábbító gomb, RESET - megsemmisítı (inicializáló) gomb, BUTTON - egyéb nyomógomb. Az <INPUT> utasításban további opciók is szerepelhetnek, a fı opciók értékeitıl függıen: A VALUE kiegészítı opcióval megadott értéket veszi fel alapértelmezésként a szöveges vagy numerikus beviteli mezı. Értékét nem kell megadni. TEXT típusú mezı esetén egy további opció, a SIZE="méret" opció határozza meg az ablak szélességét, a MAXLENGTH="érték" pedig a maximális hosszt. Lehetséges paraméter a READONLY, mley nevébıl adódóan csak olvashatóvá teszi a fájlt. A CHECKBOX és a RADIO típusú mezık további paramétere lehet a CHECKED opció, mely bekapcsolja a kapcsolót - alapértelmezésként. A RANGE típusú mezı esetén megadható az a tartomány, melybe a bevitt értéknek bele kell esnie, a MAX="maximum" és a MIN="minimum" további opciókkal. A FILE típusú mezıben megadott fájl az ACCEPT kiegészítı opcióval megadott MIME módon csatolódik az elküldendı kérdıívhez. A SUBMIT és a RESET gombokhoz tartozó kiegészítı opció a VALUE="felirat", amely a gombok feliratát jelöli ki. Egyébként a SUBMIT gomb lenyomásának hatására küldi el az őrlapadatokat a kérdıív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezıket. A BUTTON gombot nem feltétlenül kell használni, mivel gyakorlatilag semmilyen szerepe nincsen. Hosszabb szöveg bevitelére alkalmas a<textarea NAME="név" ROWS="magaság" COLS="szélesség" VALUE="szöveg"> és a </TEXTAREA> utasításpár, amely egy beviteli ablakot nyit megadott szélességben és sorban. A VALUE az alapértelmezésként megjelenítendı szöveget adja meg. Egy kérdésre adandó válasz egyszerő - menübıl történı - kiválasztását teszi lehetıvé a kérdıíven a <SELECT NAME="név" SIZE="sor"> és a </SELECT> utasításokkal létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> utasítással adhatjuk meg. Az OPTION fontos paramétere a VALUE="érték", ami a szöveges/karakteres mezıknél igen hasznos lehet. Érdemes használni, de nem szabad egy kérdıíven túl sok választást megadni, mert akkor tapasztalatom szerint az internetes felhasználó nem hajlandó végigcsinálni a kérdıívet. A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a SELECT-ben választható menüpontok egy görgethetı menüben. Hiánya esetén, hagyományos legördülı menübıl lehet választani. A MULTIPLE opció esetén több menüpont is kijelölhetı egyszerre. Az <OPTION SELECTED> formájú utasítás adja meg az alapértelmezett választást. Érdekes paraméterként lehet alkalmazni az ACCESSKEY=gomb-ot, amelynél a böngészıben lehet megadni az őrlapra ugráshoz használt ALT+gomb kombinációt! Komolyabb kérdıívek kitöltése elıtt: mindig többszörösen próbáljuk ki a kész kérdıívet. Lehetıleg ne csak a saját gépünkörıl, hanem minél több helyrıl. Ha lehetıségünk van rá, akkor érdemes több fajta böngészıben és minél több operációs rendszerben is kipróbálni. Az alábbi kódrészlet és kép a kérdıívek alapelemeit tartalamzza <form method="post" action="mailto:xy@abc.hu" enctype="text/plain"> <p><input type="checkbox" name= check value="rendel" checked> ez egy checkbox </p><p> Ez egy szöveges mezı<input type="text" name="szoveg" size="50" value="az a szöveg van benne alapesetben"> </p><p> <input type="radio" value= elso vál" name= radio1" checked>radiobutt1 </p><p> <input type="radio" value= masodik val" name= radio1">radiobutt2 </p> <input type="submit" value= küld"> 8.2. ábra Kérdıív minta megjelenése 8.4. Honlapszerkesztés Ms Frontpage programmal A honlapok készítésének sokkal kényelmesebb módja valamely szerkesztıprogram használata. Az alap szerkesztési feladatok ellátására egyik legelterjedtevv a Microsoft Frontpage. A program kezelése túlnyomóan a szövegszerkesztık hasnálatával azonos,ezért csak az eltérések közlésére szorítkozunk.
A munkakörnyezet Munkaablak A legutóbbi verziójú office programokban megtalálható funkció, amely egyes feladatok részletes beállítását teszi lehetıvé a menü használata nélkül. Itt jelenhet meg például a használt stílusok listája, a legutóbb megnyitott fájlok, vagy a súgó. Az adott funkció a munkaablak tetején található legördülı menübıl választható ki. A munkaablak a jobb felsı sarkában található x-el bezárható, újbóli bekapcsolása a NÉZET menübıl történhet meg. (Az ábrán nincs bekapcsolva) Státuszsor Az ablak alján található információs csík a dokumentum adatait mutatja. Itt szerepel az például az oldal adott sávszélességen számított ketöltési ideje, a kurzor pozíciója, a billentyőzet nyelve és a szövegbeviteli funkciók állapotjelzései. 8.3. ábra Frontpage kezelıi felület Menü Innét tudjuk az összes mőveletet, parancsot elérni. Ezek legrészletesebb beállításait is itt tudjuk megtenni. Szerkezete összetett, ezért egy-egy feladat menübıl történı végrehajtása hosszadalmas, kevéssé hatékony megoldást jelenthet. A menüben egyes parancsok végén található. Ez azt jelenti, hogy rákattintáskor a parancs nem rögtön hajtódik végre, hanem egy beállítópanelt vagy dialógusablakot kapunk, amelyen a paramétereket részletesen beállíthatjuk. Más parancsoknál piktogramok szerepelnek. Ezek szerepehogy az eszköztáron található parancsokat be tudjuk azonosítani. Egyes menüelemknél a CTRL SHIFT, TAB, ALT felirat mellett szereplı funkcióbillentyőket, betőket láthatunk. Ezek az ún. billentyőkombinációk, melyek lenyomásával a parancs azonnal végrehajtható, a menü vagy az eszköztár használata nélkül. Bár kevés billentyőkombináció van parancsok összességéhez képest, használatukkal jelentıs mértékben növelhetı a munka hatékonysága. Eszköztárak Az eszköztárak a tematikusan csoportosított panelek amely gombjainak megnyomásával egy-egy parancs, változtatás könnyen és gyorsan megtehetı. Az eszköztárak használatával kevesebb paraméter állítására van lehetıségünk, de gyorsabb használatot érhetünk el. Számos eszköztár létezik amely egy-egy terület parancsait csoportosítja. Ezek szabadon mozgathatók, áthelyezhetık, ki- és bekapcsolhatók. Elhelyezésük leginkább a menü alatt ajánlatos, külön sorokban, hogy gombjaik ne takarják egymást. Amennyiben sikerül eltőntetni egy fontos eszköztárat az a NÉZET/ESZKÖZTÁRAK menübıl az eszköztár kiválasztásával visszaállítható. Alapesetben a szokásos és a formázás eszköztárat jelenítsük meg, nélkülük a szövegszerkesztés igencsak nehézzé válik. Az eszköztárak gombjai az ESZKÖZÖK/TESTRESZABÁS menüpontban egyénileg is beállíthatók. Munka/szerkesztési terület Az ablakunk legnagyobb területő része, itt szerkeszthetjük a, írhatjuk, formázhatjuk a dokumentumunkat. Megjelenésének beállításai a NÉZET menübıl állíthatók, illetve a bal alsó sarokban egy kattintással is válthatunk a nézetek között. az esetek legtöbbjénél a normál elrendezés használata javasolt, de a html nézet válsztásával program által generált kódot is szerkeszthetjük. Szövegformázás a Frontpage programmal Karakterformázás A szerkesztett szöveg betőtípusát és betőméretét az olvasó elvárásainak megfelelıen kell kiválasztani. A karakterek méretezése eltér a szövegszerkesztıkétıl, itt a 1-6-ig méretezett html betőméretek szerepelnek, de tájékoztató jelleggel szerepelnek mellette a pontban mért ekvivalens értékek is. A rugalmas átméretezhetıséget a TrueType vagy más vektorosan képzett betőtípusok biztosítják, amelyeket a Windows operációs rendszer számára fejlesztettek ki. Használatuk azért elınyös, mert ezen operációs rendszer különbözı programjai pontosan úgy tudják megjeleníteni ezeket a típusokat. Fontos, hogy a szerkesztés során figyelembe vegyük, az adott karaktertípusnak a honlap letöltıjének is rendelkezésre kell hogy álljon, más esetben egy helyettesítı betőtípussal jeleníti meg az oldalt. Bekezdésformázás A frontpage által szerkesztett html dokumentum bekezdésekre oszlik, a bekezdést határoló jel:. Mikor ENTERT üt le, mindig új bekezdés kezdıdik. Ez a kódban egy <p> és egy</p> taget jelent. A bekezdések igazítását (jobbra, balra, középre zárt, sorkizárt) a megfelelı ikonok teszik lehetıvé, vagy a FORMÁTUM/BEKEZDÉS /IGAZÍTÁS menüponton át dolgozhat. A bekezdés többi jellemzıjét (sorköz, térköz) a menübıl állítható (FORMÁTUM/BEKEZDÉS...). A jellemzık megadásánál hasznos figyelni a mintára, amely azonnal mutatja a változtatást. Felsorolás és számozás A Frontpage egyszerő módszert kínál a pontokba szedett szöveg, illetve számozott listák létrehozására. A lista sorait külön bekezdésekként kell begépelni,
természetesen számozás nélkül. A bekezdéseket ezután jelöli ki, majd a FORMÁTUM/FELSOROLÁS ÉS SZÁMOZÁS parancsot kiadva válassza ki a kívánt formátumot. A Word a számmal és betővel kezdıdı bekezdéseket automatikusan úgy veszi, hogy azok egy számozott lista tagjai (ez idınként nagyon bosszantó is tud lenni!). Ha kell (természetesen) ezt törölhetjük. Számozott listánkat a magunk kedvére módosíthatjuk (FORMÁTUM/FELSOROLÁS ÉS SZÁMOZÁS /SZÁMOZOTT), egy már elkezdıdött számozást folytathatunk, vagy elölrıl kezdhetünk egy egészen újat (a megfelelı részek kipipálásával). A nem számozott listánkat is egyénire szabhatjuk: a legkülönbözıbb pontokat és jeleket tehetjük minden új gondolatunk elé (FORMÁTUM/FELSOROLÁS ÉS SZÁMOZÁS /TESTRESZABÁS/ SZIMBÓLUM). A listák ilyen kialakításakor a kódban a megfelelı unordered list (UL) és ordered list (OL) tagek kerülnek beállításra Blokkmőveletek A szövegrész máshova helyezésének több módja van. A legegyszerőbb és egyben a legnagyobb odafigyelést igénylı kijelölt szöveg megfogása és mozgatása. Ha messzebbre kell a kijelölt részt vinni, akkor a vágólap használata célszerőbb. Mozgatásnál a KIVÁGÁS, másolásnál pedig a MÁSOLÁS ikon vagy menü segíthet (SZERKESZTÉS/KIVÁGÁS, SZERKESZTÉS/MÁSOLÁS). 8.4. ábra vágólapmőveletek 8.5. ábra Hivatkozások A dialógusablak célkeret gombjára kattintva megadható a frame-eknél ismertetett target paraméter. Oldal alapparamétereinek beállítása A body és head tagekben beállított paraméterek az oldal üres területére jobb gombos kattintással megjelenı, lap tulajdonságai menüpont választásával történik. Vágólap mőveletek a menüben (azonos szimbólumok a szokásos eszköztáron is megtalálhatók) Az író (villogó) kurzort a beszúrási pontra állítva a BEILLESZTÉS ikonnal helyezhetjük el a vágólap tartalmát az új helyen. A mőveletekhez használhat gyorsbillentyőket is: Kivágás: CTRL+X, másolás: CTRL+C, beillesztés: CTRL+V. Egyes programokban (ilyen az Office csomag minden alkalmazása is) a vágólap másolás mőveletére a CRTL+INSert, beillesztésre, a SHIFT+INSert is használható. Linkek létrehozása Linkeket a kapcsolni kívánt szövegrész vagy objektum kijelölése után a BESZÚRÁS/HIPERHIVATKOZÁS, az eszköztár földgömb ikonja vagy a CTRL+K billentyőkombináció lenyomásával lehet létrehozni. A megjelenı dialógusablakban kikereshetjük a kapcsolni kívánt dokumentumot (relatív link). Fontos hogy a szerkesztett dokumentumot az elsı ebbıl kivezetı link létrehozása elıtt elmentsük a végleges helyére mert a relatív link léterhozásához ez logikailag mindenképp szükséges. Abszolút hivatkozásoknál begépelhetjük a kívánt webcímet. Kényelmesebb megoldás a dialógusablak megnyitása után Explorer böngészıben betöltve a linkelni kívánt oldalt, majd visszakattintunk a frontpage programra ahol a címsor automatikusan kitöltésre kerül. (ez a funkció más böngészı használatával nem mőködik) 8.6. ábra Oldal beállításai
Itt állíthatók be a szöveg, a háttér és a linkek színei. A meta tagek részletei is itt állíthatók. Tanácsok a Fronptage használatához A Frontpage vagy más WYSIWYG jellegő weblapszerkesztıkkel jóval hatékonyabb munkát végezhetünk. Gyorsabban, könnyebben készülnek el az oldalk mint a html kód szerkesztésével. Ennek a kényelemnek viszont ára van. Ezek s szerkesztıprogramok a szerkesztési lépéseinkkel párhuzamosan generálják a html kódot de ez a kód messze nem optimális. Például minden táblázat cellájánál definiálják az összes formázási paramétert és a cella szövegének végén lezárják ezeket a tageket, függetlenül attól hogy a következı cellák esetleg teljesen azonos formázásúak. Így ha például egy nagyobb táblázat optimális kódja néhány tíz kilobájt lenne ez a frontpage programmal a megabájtos méretet is meghaladhatja. Ez letöltéskor komoly használhatósági problémát jelent. Másik probléma hogy a generált kód kisebb specialitásai miatt nem minden böngészıben ugyanúgy jelenik meg a weblap. Ennek kiküszöbölése a kód változtatásával lehetséges. A fentiek miatt célszerő a html nézet rendszeres használata és a kód szerkesztési lehetıségének kihasználása. Egy weboldal elkészültekor, utolsó lépésként mindenként fussuk át a generált kódot, esetleg kézzel javítsunk bele és úgy mentsük el. Ha a normál nézetben ezután szerkesztjük a kód ismét módosul feltehetıen nem optimális elemekkel. Tantárgyi honlapok: kb 20800 karakter 8.5. Ellenırzı kérdések Mi az URL? Soroljon fel tag-eket és jelentésüket! Definiálja a leíró nyelv fogalmát! Írjon le egy html kédrésrletet amiben abszolút hivatkozás szerepel. Ismertesse a kód részeinek jelentését, szintaktikai szabályait. Definiálja a relatív és az abszolút hivatkotások (linkek) közötti különbséget Ismertesse a html nyelvben használatos színkódok szerkezetét, adja meg a zöld, a lila és az 50%-os telítettségő szürke szín kódjait.
9. Vig Zoltán - http://vigzoltan.hu