Weblapok és készítésük

Az előadások a következő témára: "Weblapok és készítésük"— Előadás másolata:

1 Weblapok és készítésük

2 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)

3 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

4 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

5 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

6 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

7 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ő

8 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

9 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)

10 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

11 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ó (</ >)

12 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ó

13 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

14 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

15 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

16 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)

17 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

18 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

19 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

20 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)

21 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 küldés </a> – küldése

22 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

23 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

24 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)

25 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>

26 Speciális karakterek és kódjaik
nem törhető szóköz Á Á á á < É É é é > Í Í í & & Ó Ó ó ó — gondolatjel Ö Ö ö ö " idézőjel Ú Ú ú ú Ü Ü ü ü

27 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

28 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

29 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

30 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>