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 a www, azaz a World Wide Web. A www kommunikációját a HTTP (Hyper-Text Transfer Protocoll) kommunikációs szabvány valósítja meg. A www-vel olyan dokumentumokhoz (weboldal) férhetünk hozzá, amelyek tartalmazhatnak szöveget, képet, videót és hanganyagot, valamint az oldalak hivatkozások (link) segítségével össze is vannak kapcsolva. (hipertextes környezet)

3 Weboldalak típusai Statikus weboldal Dinamikus weboldal
Az oldal tartalma nem változik meg, amíg a kódját meg nem változtatják Az oldal a kóddal együtt jelenik meg a böngészőben Dinamikus weboldal A 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 böngészőprogramra van szükség.
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), ami 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 kliens-szerver rendszerek esetében a felhasználói igényeket a kliens program közvetíti a szerver felé. A kliens program feladata, hogy elérje az URL-ben megadott protokoll (webszerverhez kapcsolódáskor HTTP) segítségével a szintén az URL-ben megadott szervert, majd megjelenítse ezen a keresett objektumot (weboldalt, fájlt). ezek a kliens programok a böngészők A webszerver egy távoli gép, amely kiszolgálja a kliens igényeit, és itt találhatóak a HTML fájlok.

6 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) mivel a betűk a böngészőből aktiválódnak, nem a hálózatról, így előfordulhat, hogy máshogy jelennek meg, mint a készítőnél (elterjedt betűtípusok használata)

7 Weblapkészítéssel kapcsolatos problémák
HTML nyelv folyamatos fejlődése A HTML nyelv folyamatosan bővül újabb nyelvi elemekkel. A különböző böngészők ezt a fejlődést más-más mértékben követik. Így 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 úja technológiákkal (PHP, JavaScript, CSS)

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

9 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öveget megfelelően tagoljuk legyen rajta olyan objektum, ami magához vonzza a figyelmet 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 (ha szükséges, érvényességi idő követése) helyes szóhasználat, nyelvhelyesség és helyesírás színek összhangja

10 A HTML nyelv A www-n megjelenő dokumentumok leíró nyelve a HTML, a fájlok kiterjesztése .html vagy .htm HTML = HyperText Markup Language (hipertext jelölő nyelv) A HTML fájlokban a szövegtől jól elkülöníthető parancsok találhatóak, amiket tag-eknek hívunk a tag-eket < > közé tesszük a legtöbb tag-ből van nyitó (< >) és záró (</ >)

11 A HTML nyelv tag-ek használatának 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 a feladattól (és 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ó. A tag-ek végrehajtási sorrendje a megadás sorrendjében történik, lezárásuk pedig fordítva (az első parancsot a legvégén zárjuk le) A záró tag (ha van) mindig csak a parancs nevét tartalmazza.

12 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

13 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

14 Szín megadása Szín nevével Hexadecimális kóddal
a megfelelő szín angol nevét kell beírni (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, az első 2 számjegy a piros, a középső 2 a zöld, az utolsó 2 pedig a kék szín összetevőit adja meg. (Pl.: lila - #FF00FF)

15 Karakterformá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

16 Karakterformázás <FONT> </FONT> : betűkre 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

17 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

18 Bekezdésformázás <BLOCKQUOTE> </BLOCKQUOTE> – beljebb kezdi a szöveget és alatta nagyobb helyet hagy ki, idézetek megadásához használható <!–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)

19 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

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

21 Felsorolás és számozás
<OL> </OL> – rendezett (számozott) lista listán belül minden elem <LI> </LI> közé kerül listafejléc készíthető <LH> </LH> közé írva 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)

22 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 listafejléc készíthető <LH> </LH> közé írva a bekezdés címe <DT> </DT> között szerepel a bekezdéscímhez tartozó (beljebb húzott) szöveg <DD> </DD> közé kerül

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

24 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

25 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

26 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

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