Weblapok és készítésük
World Wide Web Az egyik legelterjedtebb internetes szolgáltatás (röviden: www) Kommunikációját a HTTP (Hyper-Text Transfer Protocoll) szabvány valósítja meg. A www-vel weboldalakhoz férhetünk hozzá ezek tartalmazhatnak szöveget, képet, videót és hanganyagot az oldalak hivatkozások (link) segítségével vannak összekapcsolva (hipertextes környezet)
Weboldalak típusai Statikus weboldal Dinamikus weboldal tartalmuk nem változik meg, amíg a kódját át nem írják az oldal a kóddal együtt jelenik meg a böngészőben Dinamikus weboldal tartalma az aktuális letöltéskor jön létre (előfordulhat, hogy minden letöltéskor más lesz) nem az adott oldal kódja fog megjelenni, hanem a letöltéskor létrejövő aktuális állapot (eredmény) kódja
Böngészők A weboldalak megjelenítéséhez használt (kliens)program Böngésző (browser) program: a HTML nyelvű dokumentumokat HTTP protokollon keresztül letölteni és megjeleníteni képes program. A weboldalak eléréséhez szükség van azok URL-jére (Uniform Resource Locator) megadja a keresett fájl elérési útját az interneten formája: számítógépnév/könyvtárnév/fájlnév a szolgáltatás jellegét is megadja: HTTP vagy FTP
Kommunikáció és webszerverek A kommunikáció kliens-szerver alapú a felhasználói igényeket a kliens program közvetíti a szerver felé A kliens program (böngésző) feladata: az URL-ben megadott protokoll (webszerverhez kapcsolódáskor HTTP) segítségével az URL-ben megadott szerver elérése, majd a keresett objektum (weboldalt, fájlt) megjelenítése
Kommunikáció és webszerverek webszerver = távoli gép, amely kiszolgálja a kliens igényeit itt találhatóak az elérni kívánt weboldalak HTML fájljai
Weblapkészítéssel kapcsolatos problémák Betűkészlet és betűtípus a dokumentumban használt betűkészlet általában igazodik az információt közlő nemzet specialitásaihoz ékezetes karakterek megjelenítése kódokkal 5-6 karakter a betűk a böngészőből aktiválódnak, nem a hálózatról máshogy jelenhetnek meg, mint a készítőnél elterjedt betűtípusok használatával kiküszöbölhető
Weblapkészítéssel kapcsolatos problémák HTML nyelv folyamatos fejlődése folyamatosan bővül újabb nyelvi elemekkel a különböző böngészők a fejlődést más-más mértékben követik előfordulnak olyan elemek, amik csak néhány böngészőben működnek Felbontás Az elkészített oldal egysége más felbontás mellett széteshet (képek mérete, felbontás megadása) Lépést kell tartani az újabb technológiákkal
Weboldal készítésének általános szempontjai legyen tartalmas töltődjön be gyorsan legyen esztétikus ügyeljünk a felbontás-különbségből adódó problémákra bár akadnak extrák bőven, de a lényeg a szöveg és grafika egyszerű kombinációja megadja a szükséges információt (címnek megfeleljen a tartalma)
Weblapkészítés fontosabb követelményei Mivel a weblap is kiadvány, elkészítésénél nem árt figyelembe venni néhány szabályt: az összefüggő szöveg megfelelő tagolása legyen rajta figyelemfelkeltő objektum logikus linkek, megfelelő címek hosszabb szövegnél az elején összefoglalás aktuális információk (pl.: hírek) megosztásánál gyors frissítés (érvényességi idő) helyes szóhasználat, nyelvhelyesség és helyesírás színek összhangja
A HTML nyelv A www-n megjelenő dokumentumok leíró nyelve a fájlok kiterjesztése .html vagy .htm HTML = HyperText Markup Language (hipertext jelölő nyelv) Szövegtől jól elkülöníthető parancsok találhatóak a dokumentumban (tag) a tag-eket < > közé tesszük a legtöbb tag-ből van nyitó (< >) és záró (</ >)
Tag-ek használati szabályai Formája: <parancsnév opció1=paraméter1 opció2=paraméter2> szöveg </parancsnév> a parancsnevet mindig kötelező megadni az opciók megadása és száma az adott tag-től függ a tag-ek zárójelként fogják közre a formázandó szöveget, egymás után több is használható
Tag-ek használati szabályai a tag-ek végrehajtási sorrendje = megadás sorrendje lezárásuk fordított sorrendben (az első parancsot a legvégén zárjuk le) a záró tag (ha van) mindig csak a parancs nevét tartalmazza
HTML alapszerkezet <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Fejrész: az ide kerülő dolgok egyáltalán nem, vagy nem a weboldal tartalmaként jelennek meg. Pl.: <TITLE>-lel megadható a böngésző címsorának felirata Törzsrész: ide kerül minden, amit szeretnénk megjeleníteni a weboldalon
A <BODY> tag opciói bgcolor="szín" : háttérszín megadása backgorund="elérési út\képnév.kit " : háttérkép megadása text="szín" : szöveg alapértelmezett színe a teljes dokumentumban link="szín" : még nem látogatott link színe alink="szín" : az épp aktuális (rákattintástól betöltésig) link színe vlink="szín" : már látogatott link színe
Szín megadása Szín nevével a megfelelő szín angol nevével világosabb árnyalathoz a LIGHT, sötétebbhez a DARK előtag használható Hexadecimális kóddal Az RGB összetevőket megadhatjuk 16-os számrendszerben is, összesen 6 számjeggyel. A kód #-el kezdődik, 2-2 számjegy adja meg a piros, a zöld, és a kék szín összetevőit (Pl.: lila - #FF00FF)
Karakterformázás <FONT> </FONT> : karakterekre vonatkozó beállítások: opciói: size="szám": betűméret face="betűtípus": betűtípus megadása color="szín": betűszín megadása Egyéb formázási lehetőségek: <B> </B> - félkövér <S> </S> - áthúzott <I> </I> - dőlt <SUB> </SUB> - alsó index <U> </U> - aláhúzott <SUP> </SUP> - felső index
Bekezdésformázás Címsorok (előre formázott címstílusok különböző méretekben) <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Opciója: align="igazítás" Igazítási lehetőségek: left: balra, ez az alapértelmezett center: középre right: jobbra justify: sorkizárt
Bekezdésformázás <P> </P> - bekezdés opciója: align="igazítás" <PRE> </PRE> - előformázott szöveg, úgy van tördelve, hogy jegyzettömbben opciója: width="szám" – adott szélességű tördelés <BR> - sortörés, nincs zárótag <HR> - vízszintes vonal, nincs zárótag opciói: width="szám" – vonal hossza align="igazítás" – vonal elhelyezése size= "szám" – vonal vastagsága
Bekezdésformázás <BLOCKQUOTE> </BLOCKQUOTE> – beljebb kezdi a szöveget és alatta nagyobb helyet hagy ki, idézetek megadásához <!--szöveg--> – megjegyzés készítése, a beírt szöveg nem jelenik meg az oldalon (kód átláthatóságához) <MARQUEE> </MARQUEE> – balról jobbra mozgat szövegrészt (nem biztos, hogy minden böngésző megjeleníti)
Hivatkozások <a href="webcím/fáljnév elérési úttal"> megjelenő szöveg</a> - hivatkozás megadása, lehet teljes webcím vagy fájlnév) opciója: target="hely" – a hivatkozás megnyitásának helye (új lap = blank) <a name="cimke"> – oldal 1 pontjának címkézése <a href="#cimke"> szöveg </a> – címkére ugrás (pl.: oldal tetejére ugráshoz) <a href="mailto:user@mail.hu"> Emailküldés </a> – email küldése
Kép beillesztése <IMG SRC="elérési út\filenév.kit"> opciói: width="érték" – szélesség (pixelben vagy százalékban) height="érték" – magasság (pixelben vagy százalékban) align="igazítás" – szövegen belüli igazítás border="szám" – kép körüli keret vastagsága alt="szöveg" – egeret kép fölé helyezve sárga dobozban kiírja az adott szöveget vspace="érték" – kép tetejének és aljának távolsága a szövegtől hspace="érték" – kép jobb és bal oldalának távolsága a szövegtől
Felsorolás és számozás Háromféle lista létezik: rendezett (számozott) rendezetlen (felsorolás) definíciós Közös tulajdonságok: listafejléc készíthető <LH> </LH> közé írva a rendezett és rendezetlen listánál minden elem <LI> </LI> közé kerül
Felsorolás és számozás <OL> </OL> – rendezett (számozott) lista opciói: seqnum="szám" – listaszámozás kezdőértéke continue – előző lista folytatása (nincs értéke) <UL> </UL> – rendezetlen lista (felsorolás) opciója: type="square/circle" – felsorolás típusa (tömött négyzet vagy üres karika, elhagyva pötty)
Felsorolás és számozás <DL> </DL> – definíciós lista a szöveget bekezdéscímre és a címhez tartozó leírásra tagolja, utóbbit alapértelmezetten beljebb kezdve a bekezdés címéhez: <DT> </DT> a bekezdéscímhez tartozó (beljebb húzott) szöveghez: <DD> </DD>
Speciális karakterek és kódjaik nem törhető szóköz Á Á á á < É É é é > Í Í í & & Ó Ó ó ó — gondolatjel Ö Ö ö ö " idézőjel Ú Ú ú ú © © Ü Ü ü ü ® ®
Táblázatkészítés <TABLE> </TABLE> – ezzel jelezzük a táblázatot, de önmagában nem elég hozzá opciói: bgcolor="szín" – háttérszín megadása align="igazítás" – táblázat elhelyezkedése width="szám" – szélesség (pixel/százalék) height="szám" – magasság (pixel/százalék) cellpadding="szám" – hely nagysága a szöveg és cellaszegély között cellspacing="szám" – cellák távolsága egymástól border="szám" – táblázat szegélyének vastagsága
Táblázatkészítés <TR> </TR> – sorok megadása (először sort adjuk meg, majd a benne található oszlopokat) opciói: bgcolor="szín" – sor celláinak háttérszíne align="igazítás" – szöveg vízszintes igazítása a sorban valign="igazítás" – szöveg függőleges igazítása a sorban értékei: top – felülre igazít middle – középre igazít bottom – alulra igazít
Táblázatkészítés <TD> </TD> – oszlopok megadása (a sor nyitó és záró tag-ja közé annyi kerül, ahány oszlop kell a táblázatba) opciói: bgcolor="szín" – oszlop celláinak háttérszíne align="igazítás" – szöveg vízszintes igazítása a sorban valign="igazítás" – szöveg függőleges igazítása a sorban colspan="szám" – összevonandó oszlopok száma rowspan="szám" – összevonandó sorok száma
Táblázatkészítés <TH> </TH> – oszlopfejléc megadása sor tag-jei közé opciói: align="igazítás" valign="igazítás" bgcolor="szín" <CAPTION> </CAPTION> – táblázatfelirat készítése, a közvetlenül a <TABLE>-tag alá Üres cella készítése: <TD> </TD>