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

Webszerkesztés A HTML alapjai. A Hyper Text Markup Language A forráskódban alapvetően a lapon megjelenő szöveget és a megjelenést meghatározó utasításokat.

Hasonló előadás


Az előadások a következő témára: "Webszerkesztés A HTML alapjai. A Hyper Text Markup Language A forráskódban alapvetően a lapon megjelenő szöveget és a megjelenést meghatározó utasításokat."— Előadás másolata:

1 Webszerkesztés A HTML alapjai

2 A Hyper Text Markup Language A forráskódban alapvetően a lapon megjelenő szöveget és a megjelenést meghatározó utasításokat látjuk Az utasítások jelek között foglalnak helyet A megjelenő szöveg a jeleken kívül A HTML elemeket tag-nek is hívják Egyéb elemek (kép, hang) is található a weblapokon Ezek mindig külön fájlban vannak A forráskód hivatkozik rájuk

3 A HTML elemekről általában Egy lap forráskódja egyszerű szöveges állomány Bármilyen txt formátum létrehozására lépes szövegszerkesztővel készíthetünk, szerkeszthetünk HTML forráskódot HTML elemek általános alakja: erre a szövegre hat az elem Az záró tag kikapcsolja a „/” jel nélküli nyitó pár által bekapcsolt funkciót Egy tag csak a nyitó és záró forma között elhelyezkedő tartalomra hat

4 Példák tag-ekre A paraméter értékét mindig idézőjelbe tesszük alma Egy elemnek akár több paramétere is lehet Nyitólap Vannak olyan elemek, amelyeknek nincs záró párjuk A HTML kódban nem, de az XHTML-ben akkor is le kell zárni őket: (üres tag-ek) A tag-ek egymásba ágyazva fordulnak elő lapjainkon alma Egy nyitó tag-et vagy egy másik nyitó tag követ, vagy a saját záró párja, tehát sohasem használhatjuk őket átlapoltan

5 Kisbetűk, nagybetűk a forráskódban A tag-ek írásmódja: A HTML nem érzékeny a kis- és nagybetűkre Mindegy, hogy Href, HREF, href XHTML-ben csak a kisbetűs írásmód helyes href Fájlnevek írásmódja Ha a webhelyünket kiszolgáló szerver megkülönböztet kis- és nagybetűket (pl.: Unix, Linux) akkor nem mindegy Eger.htm / eger.htm

6 A forráskód váza

7 Karakterformázás, a font tag paraméterei Size betűméret: 5 A méret 1-től 7-ig terjedő egész érték lehet Color kék szöveg A karakterszín beállításhoz RGB kódolást használunk A színkód 16-os számrendszerben (hexadecimális) van megadva A színkód helyett használhatunk szabályos neveket is  kék szöveg 216 Web Safe Color Chart: Face courier betűk Egyszerre több paraméter is megadható: courier new, 5-ös méret, kék A szöveg alapértelmezett betűszínét a tag-gel is beállíthatjuk

8 Karakterstílusok A és a tag-ek az alapértelmezett betűmérethet képest értendő, nem az aktuálishoz képest Több szóköz nem használható a szavak közötti hézag növelésére ( )

9 Bekezdések formázása, címsorok A szövegszerkesztésben megszokott négyféle igazítást használhatjuk A sorkizárás a szöveg utolsó sorában nem érvényesül A sortörés helyén a üres elemet kell használnunk, ez nem jelent új bekezdést is Címsorok: …, ahol x = (betűméretek: 24, 18, 14, 12, 10, 8 félkövér) …

10 Képek a weblapon Az Interneten a gif és a jpg formátumú képek használatosak A gif formátum egyszerre csak 256 színt kezel, viszont az animált gif formátum segítségével rövid, rajzfilmjellegű alkotásokat illeszthetünk a lapokra a kis fájlméret megtartása mellett A jpg formátum adatvesztő tömörítő eljárással dolgozik, de megfelelően alkalmazva a kis veszteséget ellensúlyozza a kis fájlméret

11 Képek a weblapon Képek beillesztéséhez az tag-et használjuk Nincs záró párja XHTML: Az abszolút elérési úttal adódhatnak problémák, érdemes relatív elérési utat használni „../kep/kutya.jpg”

12 Az tag paraméterei src A megjelenítendő kép elérési útvonala alt Az a szöveg, ami akkor jelenik meg, amikor megállunk az egérrel a kép felett width, height A kép szélességét és magasságát adhatjuk meg Paraméter nélkül eredeti méretben jelenik meg border A képek körbefogó szegélyének mérete Paraméter nélkül nincs szegély hspace, vspace A képek és a környező szöveg távolságát adhatjuk meg align Szöveghez viszonyított függőleges igazítás  top  center  bottom

13 Háttér beállítása Szín beállítása háttérként A szín megadása a korábban ismertetett módon történik Kép beállítása háttérként A kép első példánya a bal felső sarokba kerül, majd a többi írásirányban folyamatosan kitölti a böngésző ablakát Görgetés esetén a kép a tartalommal együtt mozog Görgetés esetén a kép nem mozog együtt a tartalommal Háttérhang alkalmazása A loop paraméter határozza meg a hang ismátlődését A „-1” érték jelenti a folyamatos ismétlődést, különben az érték által megadott számban ismétlődik

14 Felsorolás Az elem nyitó és záró formája között kell elhelyeznünk A felsorolás elemeit a tag jelöli, nincs záró párja A type paraméter lehetséges értékei: disc circle square

15 Többszintű felsorolás Nincs hozzá külön elem Egymásba ágyazott felsorolásokkal oldható meg

16 Sorszámozás tag-gel Paraméterei: type A: nagybetűk a: kisbetűk I: nagy római számok i: kis római számok 1: arab számok start Hanyas sorszámmal kezdődik a sorszámozás

17 Többszintű sorszámozás

18 Hiperhivatkozások Általános alakja: ide kattints megfelelő paraméterezéssel Az ide kattints szöveg helyére feltétlen kell valamit írni (vagy egy képet beszúrni), hogy a böngészőben tudjunk hová kattintani Az tag legfontosabb paramétere a href, ami különböző lehet funkciójának megfelelően Tartózkodjunk az abszolút hivatkozásoktól

19 href Webhelyünk egy adott oldalára hivatkozás link a sonka oldalára Ez akár egy fájl is lehet: midi, jpeg, avi, stb. Egy interneten található oldalra való hivatkozás egy portáloldal Kötelező a protokolljelölés Hivatkozás címre Írj levelet Hivatkozás FTP-re ftp hely

20 href Ha képhez szeretnénk hiperhivatkozást rendelni, akkor az tag-et kell beágyazni az … elempárba Ha új ablakban szeretnénk megjeleníteni a hivatkozott oldalt sonka

21 Könyvjelzők A könyvjelző segítségével a lap egy megadott pontjára ugorhatunk, tehát előbb valamilyen módon meg kell jelölnünk ezt a helyet Itt a jelölt pont A lapon megjelenő szöveg és a könyvjelző neve között nincs összefüggés Könyvjelzőre hivatkozás Ugrás az italok nevű pontra Lássuk a virágokat

22 Táblázatok Három tag-re van szükség … Jelzi, hogy egy táblázat fog következni … A táblázat egy sorának meghatározására … A soron belül az egyes cellákat adja meg

23 Táblázatok

24 A tag paraméterei border A táblázat széleinek szegélyvastagsága bordercolor A táblázat szegélyének színe bordercolorlight 3D-s megjelenítésnél a bal szélső és felső szegélyek világosabb színe bordercolordark 3D-s megjelenítésnél a jobb szélső és alsó szegélyek sötétebb színe width A táblázat szélessége százalékban vagy képpontban height A táblázat magassága százalékban vagy képpontban align A táblázat vízszintes elhelyezkedése (left, right, center) bgcolor A táblázat háttérszíne background A táblázathoz rendelt háttérkép

25 A tag A … tag-ekkel definiáljuk a táblázat sorait Paraméterei: bordercolor A sor celláinak szegélyszíne bgcolor A sor celláinak háttérszíne align A szöveg vízszintes elhelyezkedése a cellában (left, right, center, justify) valign A szöveg függőleges elhelyezkedése a cellában (top, bottom, middle)

26 A tag A elem segítségével adjuk meg az egyes cellák jellemzőit. Paraméterei: bgcolor Az adott cellára vonatkozó háttérszín megadása background Az adott cellára vonatkozó háttérkép megadása align A szöveg vízszintes elhelyezése az adott cellán belül valign A szöveg függőleges elhelyezése az adott cellán belül

27 Keretek (frame) Egy keretes megjelenésű lap megalkotásához minimálisan eggyel több lapra lesz szükségünk, mint ahány keretet használunk Egy lap írja le a keretszerkezetet Ez a lap csak a böngészőablak részekre osztását írja le, illetve megadja, hogy melyik keretben melyik lap jelenjen meg Keretenként egy lap határozza meg a keretben megjelenő tartalmat

28 Keretek

29

30 Hivatkozás keretben Alapértelmezésként a hivatkozott lap a hivatkozást tartalmazó lap/keret tartalmát cseréli le Ha szeretnénk megadni, hogy a hivatkozott oldal melyik keretben jelenjen meg, akkor be kell állítani a „cél”-keretet Ezt nézd meg A target paraméter értékének annak a keretnek a nevét kell megadni, amelyben a hivatkozott lapot szeretnénk látni _top:  a keretszerkezet eltűnik és teljes ablakban jelenik meg a hivatkozott lap _blank:  a hivatkozott lap egy új böngészőablakban jelenik meg

31 Beágyazott keretek Dokumentum a dokumentumban A lapon megadunk egy téglalap alakú területet, amely önálló ablakként fog viselkedni Tetszőleges lapot jeleníthetünk meg benne Létrehozásához az tag-et használjuk A beágyazott keret helyét nem paraméterrel adjuk meg A beágyazott keret helyét az adja meg, hogy melyik bekezdésbe illesztjük be Az is lehetséges, hogy egy táblázat egyik celláját beágyazott kerettel töltjük ki

32 Az tag paraméterei name A beágyazott keretünk neve Ezt alkalmazzuk a hivatkozásokban width és height A beágyazott keretünk szélessége és magassága Megadhatjuk abszolút módon képpontban, vagy relatív módon százalékban src Annak a lapnak a neve és elérési útja, amelyet a beágyazott keretünkben szeretnénk megjeleníteni scrolling A görgetősáv viselkedését határozza meg Lehetséges értékei: no, yes, auto

33 Az tag paraméterei frameborder Jelenjen meg szegély vagy nem Lehetséges értékei: 1, 0 marginwidth és marginheight A beágyazott keretben lévő tartalom milyen közel mehet a keret két széléhez, illetve az aljához és tetejéhez hspace és vspace Vízszintesen és függőlegesen a keret és az esetleges környező tartalmak közötti távolságot adja meg align A beágyazott keret lapon belüli elhelyezkedését szabályozza  left, right, center  top, bottom, absmiddle: a keret melletti szöveghez viszonyítva


Letölteni ppt "Webszerkesztés A HTML alapjai. A Hyper Text Markup Language A forráskódban alapvetően a lapon megjelenő szöveget és a megjelenést meghatározó utasításokat."
Google Hirdetések