1 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 ...
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. 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 , , és 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:
Kettes sor. Harmas sor. 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 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ı:
Egyes sor. Kettes sor. Harmas sor.
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: Bold,Underlined, illetve Italic. Az elıbbi parancsok persze kombinálhatók is: Félkövér Dılt Vastag. dılt is Megint csak vastag 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. Alapméret Bár nem mindig szerencsés, de a betők típusa is változtatható. Ehhez szintén a 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! Arial Times New Roman CE 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! kék szöveg
8.1. ábra Böngészıablak Ahhoz, hogy egy szöveg az eredeti formázás szerint nézzen ki a
tagot kell használni. (PRE=Preformatted - elıre formázott) Az elızı fájl helyesen így néz ki:
Egyes sor.
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
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)
Heading
Heading
Heading
Heading
Heading
Heading
1
2 3 4 5 6
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.:
Ezt nem szabad megtörni!
Másik lehetıség a
használata, amely különbözı részekre (fejezetekre, bekezdésekre) tagolja a szöveget.
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 és a 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 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
és a
. 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 Alapértelmezés.
zárva. Ez középre van rendezve Ez jobbra van zárva. (zárva).
Kódolása: Kódolása: Kódolása:
balra
jobbra
középre
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 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 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 Hivatkozás a BME honlapjára 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 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. Hivatkozás belsı dokumentumra 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. Azonos mappában 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. almappában fellép egy mappát fellép és almappába lép 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: Ez a fájl teteje. köztes szöveg Itt is. Meg itt is. Itt lehet a tetejére ugrani.link külsı szerveren lévı dokumetum adott pontjára 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.
Elsö elem
Második elem
Harmadik elem
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
taget -re, akkor a következı lesz a lista.
Elsö elem
Második elem
Harmadik elem
A böngészıben megjelenı kép:
Rendezett lista esetén az
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
-vel jelöljük, (Definition Term) míg magyarázatukat
-vel. (Definition Description) (minta17.html)
1. fogalom
az 1. fogalom magyarázata
2. fogalom
a 2. fogalom magyarázata
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ő:
és
. Minden egyes sort
és
közé kell zárni, míg minden egyes cella tartalmát
és
közé. A példán egy 3*3cellás táblázatot mutatunk be.
tagbe különbözı paramétereket lehet beleírni. A táblázat igazítása:
Ez az alapértelmezés. Természetesen lehet középre (center), illetve jobbra (right) is igazítani. A keret vastagsága.
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
paramáterrel történhet ahol C az oszlopok száma A táblázatot lehet színezni.
Ez a hagyományos színekkel vagy kódokkal történik Lehet egy kép is a háttér. Lásd: A keret is lehet színezhetı
Így zöld lesz a keret színe. Térköz a cellákon belül
. 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
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
szimbólum után kell írni. Szabályozható, hogy hová kerüljön a cím
felülre kerül alapértelmezés.
.
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:
- 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ó!
Ez a cím
Ez a táblázat eleme
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.
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
1. sor 4. elem
2. sor 1.-2. elem
2. sor 3. elem
2. sor 4. elem
Minden egyes cella tartalmát darabonként is igazíthatjuk
Balra rendez - alapértelmezés
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.
elem tartalma
. Hosszú szövegeknél elıfordulhat, hogy egy sornál több is lehet 1-1 cella tartalma. Ilyenkor jól jöhet a
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
és a 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: , ahol IMG = image = kép/látvány; SRC = source = forrás. Záróelem nincs, akár a 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 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. 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
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)