Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Weblapok és készítésük. 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.

Hasonló előadás


Az előadások a következő témára: "Weblapok és készítésük. 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."— 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 Az oldal tartalma nem változik meg, amíg a kódját meg nem változtatják 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 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) 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 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 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 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 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) 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) 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. 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) 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 az összefüggő szöveget megfelelően tagoljuk legyen rajta olyan objektum, ami magához vonzza a figyelmet legyen rajta olyan objektum, ami magához vonzza a figyelmet logikus linkek, megfelelő címek logikus linkek, megfelelő címek hosszabb szövegnél az elején összefoglalás 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) 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 helyes szóhasználat, nyelvhelyesség és helyesírás színek összhangja 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 tag-eket közé tesszük a legtöbb tag-ből van nyitó ( ) és záró ( ) a legtöbb tag-ből van nyitó ( ) és záró ( )

11 A HTML nyelv tag-ek használatának szabályai: Formája: szöveg Formája: szöveg 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 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 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 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. A záró tag (ha van) mindig csak a parancs nevét tartalmazza.

12 HTML alapszerkezet Fejrész: az ide kerülő dolgok egyáltalán nem, vagy nem a weboldal tartalmaként jelennek meg. Pl.: -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 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 a megfelelő szín angol nevét kell beírni (világosabb árnyalathoz a LIGHT, sötétebbhez a DARK előtag használható) 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) 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) Opciója: align="igazítás" Igazítási lehetőségek: left: balra, ez az alapértelmezettleft: balra, ez az alapértelmezett center: középrecenter: középre right: jobbraright: jobbra justify: sorkizártjustify: sorkizárt

16 Karakterformázás : betűkre vonatkozó beállítások: : 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 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: - félkövér - áthúzott - félkövér - áthúzott - dőlt - alsó index - dőlt - alsó index - aláhúzott - felső index - aláhúzott - felső index

17 Bekezdésformázás - bekezdés - bekezdés opciója: align="igazítás" opciója: align="igazítás" - előformázott szöveg, úgy van tördelve, hogy jegyzettömbben - előformázott szöveg, úgy van tördelve, hogy jegyzettömbben opciója: width="szám" – adott szélességű tördelés opciója: width="szám" – adott szélességű tördelés - sortörés, nincs zárótag - sortörés, nincs zárótag - vízszintes vonal, nincs zárótag - 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 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 – beljebb kezdi a szöveget és alatta nagyobb helyet hagy ki, idézetek megadásához használható – beljebb kezdi a szöveget és alatta nagyobb helyet hagy ki, idézetek megadásához használható – megjegyzés készítése, a beírt szöveg nem jelenik meg az oldalon (kód átláthatóságához) – megjegyzés készítése, a beírt szöveg nem jelenik meg az oldalon (kód átláthatóságához) – balról jobbra mozgat szövegrészt (nem biztos, hogy minden böngésző megjeleníti) – balról jobbra mozgat szövegrészt (nem biztos, hogy minden böngésző megjeleníti)

19 Hivatkozások megjelenő szöveg - hivatkozás megadása, lehet teljes webcím vagy fájlnév) megjelenő szöveg - 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) opciója: target="hely" – a hivatkozás megnyitásának helye (új lap = blank) – oldal 1 pontjának címkézése – oldal 1 pontjának címkézése szöveg – címkére ugrás (pl.: oldal tetejére ugráshoz) szöveg – címkére ugrás (pl.: oldal tetejére ugráshoz) küldés – küldése küldés – küldése

20 Kép beillesztése 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 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 – rendezett (számozott) lista – rendezett (számozott) lista listán belül minden elem közé kerül listán belül minden elem közé kerül listafejléc készíthető közé írva listafejléc készíthető közé írva opciói: seqnum="szám" – listaszámozás kezdőértéke continue – előző lista folytatása (nincs értéke) opciói: seqnum="szám" – listaszámozás kezdőértéke continue – előző lista folytatása (nincs értéke) – rendezetlen lista (felsorolás) – rendezetlen lista (felsorolás) listán belül minden elem közé kerül listán belül minden elem közé kerül listafejléc készíthető közé írva listafejléc készíthető közé írva opciója: type="square/circle" – felsorolás típusa (tömött négyzet vagy üres karika, elhagyva pötty) 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 – definíciós lista – 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 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ő közé írva listafejléc készíthető közé írva a bekezdés címe között szerepel a bekezdés címe között szerepel a bekezdéscímhez tartozó (beljebb húzott) szöveg közé kerül a bekezdéscímhez tartozó (beljebb húzott) szöveg 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 – ezzel jelezzük a táblázatot, de önmagában nem elég hozzá – 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 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 – sorok megadása (először sort adjuk meg, majd a benne található oszlopokat) – 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 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 értékei: top – felülre igazít middle – középre igazít bottom – alulra igazít

26 Táblázatkészítés – oszlopok megadása (a sor nyitó és záró tag-ja közé annyi kerül, ahány oszlop kell a táblázatba) – 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 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 – oszlopfejléc megadása sor tag-jei közé – oszlopfejléc megadása sor tag-jei közé opciói: align="igazítás" valign="igazítás" bgcolor="szín" opciói: align="igazítás" valign="igazítás" bgcolor="szín" – táblázatfelirat készítése, a közvetlenül a -tag alá – táblázatfelirat készítése, a közvetlenül a -tag alá Üres cella készítése: Üres cella készítése:

Letölteni ppt "Weblapok és készítésük. 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."
Google Hirdetések