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

A HTML nyelv. Bevezetés AlapelvekAlapelvek A nyelv struktúrájaA nyelv struktúrája Főbb utasításokFőbb utasítások Szöveg formázásaSzöveg formázása Lista.

Hasonló előadás


Az előadások a következő témára: "A HTML nyelv. Bevezetés AlapelvekAlapelvek A nyelv struktúrájaA nyelv struktúrája Főbb utasításokFőbb utasítások Szöveg formázásaSzöveg formázása Lista."— Előadás másolata:

1 A HTML nyelv

2 Bevezetés AlapelvekAlapelvek A nyelv struktúrájaA nyelv struktúrája Főbb utasításokFőbb utasítások Szöveg formázásaSzöveg formázása Lista és táblázat szerkesztéseLista és táblázat szerkesztése GrafikákGrafikák Linkek szerkesztéseLinkek szerkesztése ŰrlapkészítésŰrlapkészítés MultimédiaMultimédia

3 Alapelvek Mi is az a HTML? HTML, azaz Hyper-Text Markup Language.HTML, azaz Hyper-Text Markup Language. A HTML nyelv az Internethez készült. Használatával hiperaktív oldalakat helyezhetünk el a Világhálón. Alkalmazása igen egyszerű, amint azt a következőkben majd látni fogjuk. Megírásához nem kell más, mint egy egyszerű szövegszerkesztő program, ami felismeri a TXT fájlokat. Legmegfelelőbb erre Windows alatt a Jegyzettömb, azaz a Notepad.A HTML nyelv az Internethez készült. Használatával hiperaktív oldalakat helyezhetünk el a Világhálón. Alkalmazása igen egyszerű, amint azt a következőkben majd látni fogjuk. Megírásához nem kell más, mint egy egyszerű szövegszerkesztő program, ami felismeri a TXT fájlokat. Legmegfelelőbb erre Windows alatt a Jegyzettömb, azaz a Notepad. A HTML oldalt tehát egyszerű szövegfájlként kell megírni, melyet a mentéskor HTM vagy HTML formátumban mentünk el. Az így elkészített dokumentumot az úgynevezett Internet böngészők ( Microsoft Internet Explorer, Netscape Navigator, NeoPlanet stb. ) képesek értelmezni és megnyitni. Így -a legtöbb programozási nyelvvel ellentétben- nincs szükségünk külön fordítóra! Parancsszavait -a tageket- az angle brackets ( ) jelek közé kell beírni.A HTML oldalt tehát egyszerű szövegfájlként kell megírni, melyet a mentéskor HTM vagy HTML formátumban mentünk el. Az így elkészített dokumentumot az úgynevezett Internet böngészők ( Microsoft Internet Explorer, Netscape Navigator, NeoPlanet stb. ) képesek értelmezni és megnyitni. Így -a legtöbb programozási nyelvvel ellentétben- nincs szükségünk külön fordítóra! Parancsszavait -a tageket- az angle brackets ( ) jelek közé kell beírni. Ezeket kivéve a HTML nyelv mégis nagyszerű, hiszen megközelíti a platformfüggetlenséget : a különböző operációs rendszerek ( Windows, OS/2, Linux, Apple Macintosh stb. ) számára egyaránt érthető, s ezért számunkra megtekinthető.Ezeket kivéve a HTML nyelv mégis nagyszerű, hiszen megközelíti a platformfüggetlenséget : a különböző operációs rendszerek ( Windows, OS/2, Linux, Apple Macintosh stb. ) számára egyaránt érthető, s ezért számunkra megtekinthető.

4 Alapelvek A nyelv szintaktikája A HTML nyelv szintaktikája nagyon egyszerű. Szokták WYSIWYG (What You See Is What You Get) típusú nyelvnek is nevezni. Parancsszavai az úgynevezett tagek, melyeket a kisebb-nagyobb ( ) jelek közé kell beírnunk. Maga a nyelv tulajdonképpen szövegformázásra, képek beillesztésére és hivatkozások elhelyezésére alkalmas. Éppen ezért a formázó elemeket mindig a formázandó rész elé kell beírnunk. A legtöbb parancsszó (tag) rendelkezik zárópárral, melyet a formázandó rész után helyezünk el. (Kivétel például a sortörés -, melynek nincs zárópárja.) Ezen zárópárokat úgy képezzük, hogy a tag elé - természetesen még a jelek között - egy / jelet írunk. Például a zárópárja. A legtöbb tag rendelkezik különböző tulajdonságokkal ( opciókkal ). Ilyenek például a vízszintes ( ballra, jobbra, középre ) és a függőleges ( fentre, lentre, középre ) elhelyezés. Ezeket a tag neve után, attól szóközzel elválasztva kell begépelnünk. Az opciók értékeit idézőjelek közé zárva szokás beírni.A HTML nyelv szintaktikája nagyon egyszerű. Szokták WYSIWYG (What You See Is What You Get) típusú nyelvnek is nevezni. Parancsszavai az úgynevezett tagek, melyeket a kisebb-nagyobb ( ) jelek közé kell beírnunk. Maga a nyelv tulajdonképpen szövegformázásra, képek beillesztésére és hivatkozások elhelyezésére alkalmas. Éppen ezért a formázó elemeket mindig a formázandó rész elé kell beírnunk. A legtöbb parancsszó (tag) rendelkezik zárópárral, melyet a formázandó rész után helyezünk el. (Kivétel például a sortörés -, melynek nincs zárópárja.) Ezen zárópárokat úgy képezzük, hogy a tag elé - természetesen még a jelek között - egy / jelet írunk. Például a zárópárja. A legtöbb tag rendelkezik különböző tulajdonságokkal ( opciókkal ). Ilyenek például a vízszintes ( ballra, jobbra, középre ) és a függőleges ( fentre, lentre, középre ) elhelyezés. Ezeket a tag neve után, attól szóközzel elválasztva kell begépelnünk. Az opciók értékeit idézőjelek közé zárva szokás beírni. A HTML nyelv nem különbözteti meg a kis- és nagybetűket. Mégis célszerű a tag-eket csupa nagybetűvel írni, hiszen ez sokkal áttekinthetőbbé teszi oldalunk forrását, mely megkönnyíthet egy későbbi szerkesztést.A HTML nyelv nem különbözteti meg a kis- és nagybetűket. Mégis célszerű a tag-eket csupa nagybetűvel írni, hiszen ez sokkal áttekinthetőbbé teszi oldalunk forrását, mely megkönnyíthet egy későbbi szerkesztést. A nyelv megkötéseket alig tartalmaz, csak néhány elrendezési követelménye van. Ezek persze nagyon fontosak, betartásuk kötelező.A nyelv megkötéseket alig tartalmaz, csak néhány elrendezési követelménye van. Ezek persze nagyon fontosak, betartásuk kötelező.

5 A nyelv struktúrája Egy HTML nyelven megírt oldalnak ( honlapnak ) mindig a taggel kell kezdődnie. A fentebb említett taget egy parancsnak kell lezárnia. Ezek közé kerül a HTML dokumentum két része: a fejléc és a dokumentumtörzs vagy szövegtörzs. Az előbbit a vezeti be, és a zárja le. Az utóbbit a és a tagek szegélyezik.. A fejléc ( Head ) tartalmazza az oldal címét, melyet a böngésző a címsorában jelenít meg. ( A címsor az ablak legfelső része. ) Ezt a címsort tehát a taggel tölthetjük ki. Természetesen ezt is le kell zárni, mégpedig a parancssal. A dokumentumtörzs kezdetét a, végét a tag jelzi. Maga a honlap tulajdonképpen ide kerül. Itt kell elhelyezni a dokumentum szöveges részét, de ide kell beilleszteni a képeket és a hivatkozásokat is.

6 Egy egyszerű oldal felépítése a megismert tagekkel Az oldal címe Az oldal címe A dokumentumtörzs. A dokumentumtörzs. 1. Link 1. Link 2. Link 2. Link

7 Szöveg formázása HTML oldalunk szövegét kétféle módon formázhatjuk. Egyrészt közvetlenül, a tagek beírásával. Másrészt lehetőségünk van arra is, hogy az adott dokumentumra vonatkozóan alapértelmezett formázási utasításokat adjunk meg.HTML oldalunk szövegét kétféle módon formázhatjuk. Egyrészt közvetlenül, a tagek beírásával. Másrészt lehetőségünk van arra is, hogy az adott dokumentumra vonatkozóan alapértelmezett formázási utasításokat adjunk meg. Legcélszerűbb, ha az oldal legelején ( még a tagben ) megadjuk a szöveg színét ( TEXT opció ). Emellet létezik külön parancs a betű típusának és méretének megadására is. A karaktertípus változtatásakor célszerű figyelembe venni, hogy a honlap látogatója nem feltétlenül rendelkezik a megadott betűtípussal! Ezért érdemes például: Times New Roman, Arial, Courier New, Tahoma, MS Sans típusokat használni. Ha mégis a felhasználó számára ismeretlen karaktertípust adnánk meg, akkor a böngésző automatikusan az ő alapértelmezett készletét fogja használni.Legcélszerűbb, ha az oldal legelején ( még a tagben ) megadjuk a szöveg színét ( TEXT opció ). Emellet létezik külön parancs a betű típusának és méretének megadására is. A karaktertípus változtatásakor célszerű figyelembe venni, hogy a honlap látogatója nem feltétlenül rendelkezik a megadott betűtípussal! Ezért érdemes például: Times New Roman, Arial, Courier New, Tahoma, MS Sans típusokat használni. Ha mégis a felhasználó számára ismeretlen karaktertípust adnánk meg, akkor a böngésző automatikusan az ő alapértelmezett készletét fogja használni.

8 Szöveg formázása A betűformázás parancsszava a, melyet a formázott szövegrész végén a tag zár le. Opciói lehetnek :A betűformázás parancsszava a, melyet a formázott szövegrész végén a tag zár le. Opciói lehetnek : FACE="betűnév" - A betű típusát határozza meg. SIZE="méret" - A karakterek méretét adja meg képpontban ( pixelben ). COLOR="#színkód" - Egy adott szövegrész színét lehet megváltoztatni vele, ahol a színt megadhatjuk angol nevével és hexadecimális kódjával is.

9 Szöveg formázása A karakterek tulajdonságait befolyásolják még a ( bold - félkövér ), az ( underline - aláhúzott ), az ( italic - dőlt ) és az ( striked - áthúzott ) tagek.A karakterek tulajdonságait befolyásolják még a ( bold - félkövér ), az ( underline - aláhúzott ), az ( italic - dőlt ) és az ( striked - áthúzott ) tagek. A betűk függőleges elhelyezkedését is változtathatjuk. A parancs felső indexet, a pedig alsó indexet eredményez. A felsoroltak mindegyike rendelkezik zárópárral.A betűk függőleges elhelyezkedését is változtathatjuk. A parancs felső indexet, a pedig alsó indexet eredményez. A felsoroltak mindegyike rendelkezik zárópárral. Honlapunk szövegét bekezdésekre is tagolhatjuk. Ezen bekezdéseket a és a tag szegélyezi. A böngészők az egyes bekezdéseket mindig elkülönítik egymástól, köztük szünetet hagynak. Maga a parancs az ALIGN="igazítás" opcióval rendelkezik. Értékei lehetnek: "left" - balra rendez ( alapértelmezett ), "center" - középre rendez, "right" - jobbra rendez és "justify" - sorkizártan rendez.Honlapunk szövegét bekezdésekre is tagolhatjuk. Ezen bekezdéseket a és a tag szegélyezi. A böngészők az egyes bekezdéseket mindig elkülönítik egymástól, köztük szünetet hagynak. Maga a parancs az ALIGN="igazítás" opcióval rendelkezik. Értékei lehetnek: "left" - balra rendez ( alapértelmezett ), "center" - középre rendez, "right" - jobbra rendez és "justify" - sorkizártan rendez. Ezeken kívül még sok szövegformázási lehetőségünk van, például a különböző szövegrészek látványos (árnyékolt vagy vonallal) való elválasztása.Ezeken kívül még sok szövegformázási lehetőségünk van, például a különböző szövegrészek látványos (árnyékolt vagy vonallal) való elválasztása.

10 Lista szerkesztése A HTML nyelvben a listák szerkesztése is igen egyszerű. Létezik hozzá külön tag is, de listánkat elkészíthetjük úgy is, hogy magunk adjuk meg szóközönként a bal margótól mért távolságát az egyes listaelemeknek. Ez persze hosszadalmas, ezért érdemes a parancsszavas megoldást választani.A HTML nyelvben a listák szerkesztése is igen egyszerű. Létezik hozzá külön tag is, de listánkat elkészíthetjük úgy is, hogy magunk adjuk meg szóközönként a bal margótól mért távolságát az egyes listaelemeknek. Ez persze hosszadalmas, ezért érdemes a parancsszavas megoldást választani. A listákat kétféle kategóriába sorolhatjuk: lehetnek rendezettek (ordered) és lehetnek rendezetlenek (unordered).A listákat kétféle kategóriába sorolhatjuk: lehetnek rendezettek (ordered) és lehetnek rendezetlenek (unordered). A rendezetteket az vezeti be, míg a számozatlant (rendezetlen - unordered) az tag. Természetesen mindkét felsorolási mód rendelkezik zárópárral. Emellett mindkettőben az parancs adja meg a listafejlécet, melyet az zár. Az egyes listaelemeket az tag jelzi, zárópárja nincs: egy listaelem addig tart, amíg nem következik egy másik parancs. A rendezetteket az vezeti be, míg a számozatlant (rendezetlen - unordered) az tag. Természetesen mindkét felsorolási mód rendelkezik zárópárral. Emellett mindkettőben az parancs adja meg a listafejlécet, melyet az zár. Az egyes listaelemeket az tag jelzi, zárópárja nincs: egy listaelem addig tart, amíg nem következik egy másik parancs.

11 Lista szerkesztése A rendezett listánál az elemek sorszámokat kapnak. A számozás kezdetét a SEQNUM="kezdő sorszám" opcióval adhatjuk meg. Ha egy már definiált lista számozását kívánjuk folytatni, akkor az újabbnál (természetesen az tagen belül) a CONTINUE tulajdonságot adjuk meg.A rendezett listánál az elemek sorszámokat kapnak. A számozás kezdetét a SEQNUM="kezdő sorszám" opcióval adhatjuk meg. Ha egy már definiált lista számozását kívánjuk folytatni, akkor az újabbnál (természetesen az tagen belül) a CONTINUE tulajdonságot adjuk meg. Példa:Példa: Rendezett lista kezdősorszámmal Rendezett lista fejléce Rendezett lista fejléce Számozott listaelem Számozott listaelem Előző rendezett lista sorszámozásának folytatása Rendezett lista fejléce Rendezett lista fejléce Számozott listaelem Számozott listaelem

12 Lista szerkesztése A másik típus, melyet az tag vezet be, a DINGBAT="karakter", az SRC="elérési út/ képnév.kiterjesztés" és a WRAP="irány" opciókkal formázható.A másik típus, melyet az tag vezet be, a DINGBAT="karakter", az SRC="elérési út/ képnév.kiterjesztés" és a WRAP="irány" opciókkal formázható. A DINGBAT="karakter" tulajdonság a bajuszkaraktert -amely a listaelemek előtt szerepel- adja meg.A DINGBAT="karakter" tulajdonság a bajuszkaraktert -amely a listaelemek előtt szerepel- adja meg. Az SRC="elérési út/ képnév.kiterjesztés" paranccsal az elem előtt álló képecskét határozhatjuk meg.Az SRC="elérési út/ képnév.kiterjesztés" paranccsal az elem előtt álló képecskét határozhatjuk meg. A WARP="irány" utasítással a többoszlopos listák igazítását változtathatjuk. Értékei lehetnek: "horiz" - vízszintesen és "vert" - függőlegesen.A WARP="irány" utasítással a többoszlopos listák igazítását változtathatjuk. Értékei lehetnek: "horiz" - vízszintesen és "vert" - függőlegesen.

13 Lista szerkesztése Rendezetlen ( számozatlan ) listaRendezetlen ( számozatlan ) lista

    Számozatlan lista fejléce Számozatlan lista fejléce Számozatlan listaelem Számozatlan listaelem Beágyazott lista fejléce Beágyazott lista fejléce Számozatlan listaelem Számozatlan listaelem

    14 Lista szerkesztése A listák ötödik fajtáját leíró listáknak nevezzük. Ezek a és a tagek közé kerülnek. A Mindezeken kívül használhatunk még könyvtárlistát és menülistát is. Ezen típusok a számozatlan (unordered - rendezetlen) lista speciális fajtái. A könyvtárlista a taggel indul és paranccsal zárul, míg a menülistát a és a utasítások keretezik. Ezek a normál számozatlan listától abban különböznek, hogy a könyvtárlista elemei 20 karakternél, a menülisták elemei pedig egy sorosnál nem lehetnek hosszabbak.A listák ötödik fajtáját leíró listáknak nevezzük. Ezek a és a tagek közé kerülnek. A Mindezeken kívül használhatunk még könyvtárlistát és menülistát is. Ezen típusok a számozatlan (unordered - rendezetlen) lista speciális fajtái. A könyvtárlista a taggel indul és paranccsal zárul, míg a menülistát a és a utasítások keretezik. Ezek a normál számozatlan listától abban különböznek, hogy a könyvtárlista elemei 20 karakternél, a menülisták elemei pedig egy sorosnál nem lehetnek hosszabbak. fejléc megadását a már ismert utasítás végzi. Az egyes elemeket a parancs vezeti be, a hozzájuk tartozó leírást a tag után kell beírnunk. A két utasítás egyike sem rendelkezik zárópárral. Az egyes listaelemek végét a leírást bevezető utasítás jelzi, ami a következő parancsig tart.fejléc megadását a már ismert utasítás végzi. Az egyes elemeket a parancs vezeti be, a hozzájuk tartozó leírást a tag után kell beírnunk. A két utasítás egyike sem rendelkezik zárópárral. Az egyes listaelemek végét a leírást bevezető utasítás jelzi, ami a következő parancsig tart.

    15 Táblázat szerkesztése Amennyiben oldalunkon táblázatot is el akarunk helyezni, akkor van szükségünk a parancsra, melynek zárópárja a tag. E kettő közé kerül a táblázat valódi része. Minden sort ( Table row ) parancs vezet be, a zárópár nem kötelező. A sorok egyes celláit a paranccsal jelezhetjük. Egy cella mindig a következő utasításig tart. A táblázat címét a és a tag szegélyezi, természetesen már a utasításon belül. Az egyes oszlopok fejlécét a ( Table head ) paranccsal adhatjuk meg. Néhány böngésző ismeri még a ( táblázat fejléce ), a ( táblázat törzse ) és a ( táblázat lábléce ) tageket.Amennyiben oldalunkon táblázatot is el akarunk helyezni, akkor van szükségünk a parancsra, melynek zárópárja a tag. E kettő közé kerül a táblázat valódi része. Minden sort ( Table row ) parancs vezet be, a zárópár nem kötelező. A sorok egyes celláit a paranccsal jelezhetjük. Egy cella mindig a következő utasításig tart. A táblázat címét a és a tag szegélyezi, természetesen már a utasításon belül. Az egyes oszlopok fejlécét a ( Table head ) paranccsal adhatjuk meg. Néhány böngésző ismeri még a ( táblázat fejléce ), a ( táblázat törzse ) és a ( táblázat lábléce ) tageket.

    16 Táblázat szerkesztése A táblázatok a tagon belül több beállítást is kaphatnak. Ezek a következők:A táblázatok a tagon belül több beállítást is kaphatnak. Ezek a következők: ALIGN="vízszintes elhelyezés" - A táblázat vízszintes elhelyezését állíthatjuk be vele. Értékei lehetnek: left, center, right. Ez az opció gyakorlatilag minden más táblázatelemnél is használható. ALIGN="vízszintes elhelyezés" - A táblázat vízszintes elhelyezését állíthatjuk be vele. Értékei lehetnek: left, center, right. Ez az opció gyakorlatilag minden más táblázatelemnél is használható. VALIGN="függőleges elhelyezés" - A táblázat függőleges elhelyezkedését befolyásolja. Értékei: top, center ( egyes böngészőknél middle ), bottom. VALIGN="függőleges elhelyezés" - A táblázat függőleges elhelyezkedését befolyásolja. Értékei: top, center ( egyes böngészőknél middle ), bottom. BORDER="vastagság" - A táblázat és a cellák szegélyének vastagságát állítja be, melyet pixelben adhatunk meg. BORDER="vastagság" - A táblázat és a cellák szegélyének vastagságát állítja be, melyet pixelben adhatunk meg. BORDERCOLOR="#színkód" - Az táblázatszegély színét adja meg. ( Nem minden böngésző ismeri. ) BORDERCOLOR="#színkód" - Az táblázatszegély színét adja meg. ( Nem minden böngésző ismeri. ) CELLPADDING="távolság" - A cellák tartalmának távolságát adja meg a szegélytől pixelben. CELLPADDING="távolság" - A cellák tartalmának távolságát adja meg a szegélytől pixelben. CELLSPACING="távolság" - Két szomszédos cella szegélyének érintkezésénél azok egymáshoz viszonyított távolságát adja meg pixelben. ( Lásd a példát! ) CELLSPACING="távolság" - Két szomszédos cella szegélyének érintkezésénél azok egymáshoz viszonyított távolságát adja meg pixelben. ( Lásd a példát! ) BGCOLOR="#színkód" - A táblázat háttérszínét állítja be. BGCOLOR="#színkód" - A táblázat háttérszínét állítja be. BACKGROUND="elérési út/képnév.kiterjesztés" - A táblázat háttereként használt kép helyét adja meg. BACKGROUND="elérési út/képnév.kiterjesztés" - A táblázat háttereként használt kép helyét adja meg. WIDTH="szélesség" - A táblázat széleségét határozza meg. Megadható pixelben és a böngésző ablak nagyságának százalékában. WIDTH="szélesség" - A táblázat széleségét határozza meg. Megadható pixelben és a böngésző ablak nagyságának százalékában.

    17 Táblázat szerkesztése Ezeken kívül a, a és a tag ismeri a BGCOLOR, az ALIGN és a VALIGN opciókat.Ezeken kívül a, a és a tag ismeri a BGCOLOR, az ALIGN és a VALIGN opciókat. Gyakran szükségünk lehet cellák egyesítésére is. Ezt a és a utasítás opcióiként tehetjük meg.Gyakran szükségünk lehet cellák egyesítésére is. Ezt a és a utasítás opcióiként tehetjük meg. Parancsszavai:Parancsszavai: COLSPAN="oszlopok száma" - Az értékben megadott számú cellát egyesíti vízszintesen. COLSPAN="oszlopok száma" - Az értékben megadott számú cellát egyesíti vízszintesen. ROWSPAN="sorok száma" - Megadott számú sort, azaz a függőlegesen szomszédos cellákat egyesíti. ROWSPAN="sorok száma" - Megadott számú sort, azaz a függőlegesen szomszédos cellákat egyesíti.

    18 Grafikák, képek beillesztése Különböző képekkel, GIF animációkkal, grafikákkal szebbé, elegánsabbá tehetjük HTML oldalunkat. Ezeket igazán egyszerű beilleszteni a dokumentum szöveges részei közé. A beszúráshoz az tagot használjuk. Ennek kötelező tulajdonsága az SRC="elérési út/képnév.kiterjesztés", mely az adott grafika, illetve animáció helyét adja meg. Ez természetesen nem elhagyható. Képünket formázzák az alábbi opciók is, melyek azonban nem kötelezők: WIDTH="szélesség" - A keret szélességét adja meg pixelben, ahová a kép a böngészőben kerülni fog. WIDTH="szélesség" - A keret szélességét adja meg pixelben, ahová a kép a böngészőben kerülni fog. HEIGHT="magasság" - A fent említett keret magasságát adja meg pixelben. HEIGHT="magasság" - A fent említett keret magasságát adja meg pixelben. BORDER="határvonal vastagsága" - A képet magába foglaló keret határvonalának vastagságát állítja be. BORDER="határvonal vastagsága" - A képet magába foglaló keret határvonalának vastagságát állítja be. ALT="megjelenő szöveg" - Az Alternate Text adható meg vele, melyet a felhasználó akkor lát, ha az egérrel a kép fölött áll meg, illetve ha a kép valami miatt nem jelenik meg. ALT="megjelenő szöveg" - Az Alternate Text adható meg vele, melyet a felhasználó akkor lát, ha az egérrel a kép fölött áll meg, illetve ha a kép valami miatt nem jelenik meg. ALIGN="vízszintes elhelyezés" - A kép elhelyezkedését adhatjuk meg vele: szövegbe illesztett kép esetén a szöveghez, önállóan álló kép esetén a böngészőablakhoz viszonyítva. Értékei lehetnek: left, right, center. ALIGN="vízszintes elhelyezés" - A kép elhelyezkedését adhatjuk meg vele: szövegbe illesztett kép esetén a szöveghez, önállóan álló kép esetén a böngészőablakhoz viszonyítva. Értékei lehetnek: left, right, center. HSPACE="távolság vízszintesen" - A szövegbe illesztett kép viűízszintes távolságát adja meg a szövegtől pixelben. HSPACE="távolság vízszintesen" - A szövegbe illesztett kép viűízszintes távolságát adja meg a szövegtől pixelben. VSPACE="távolság függőlegesen" - Ugyanazon kép függőleges távolságát adja a szövegtől, szintén pixelben. VSPACE="távolság függőlegesen" - Ugyanazon kép függőleges távolságát adja a szövegtől, szintén pixelben. USEMAP="#azonosító" - Képünkhöz több hivatkozás kapcsolása esetén használhatjuk. Megadja azt az azonosítót, mellyel egy Image Map a képünket felismeri. Ez a Map forrás ugyanabban a dokumentumban van, ahol maga a kép. (Lásd a Linkek fejezetet!) USEMAP="#azonosító" - Képünkhöz több hivatkozás kapcsolása esetén használhatjuk. Megadja azt az azonosítót, mellyel egy Image Map a képünket felismeri. Ez a Map forrás ugyanabban a dokumentumban van, ahol maga a kép. (Lásd a Linkek fejezetet!) NAME="névazonosító" - A kép azonosító nevét adja meg, mellyel a JavaScript program hivatkozni tud rá. NAME="névazonosító" - A kép azonosító nevét adja meg, mellyel a JavaScript program hivatkozni tud rá.

    19 Grafikák, képek beillesztése A felsoroltak közül igen célszerű a WIDTH és a HEIGHT opciók alkalmazása. Ha ugyanis a böngésző valamilyen oknál fogva ( sérült állomány, rossz elérési út ) nem képes az oldalba szúrt képet megjeleníteni, akkor szövegbe illesztés esetén a szépen felépített külalak összeomlik. A keret megadásával elkerülhetjük ezt: ilyenkor a böngészőben megjelenik az üres keret, anélkül, hogy a szöveg és a kép elrendezésbeli viszonya változott volna. Honlapunkon elhelyezhetünk úgynevezett multimédiás fájlokat is. Ilyenek például a videók ( AVI, MPEG, MOV stb. fájlok ). Ezek beszúrásáról a későbbiekben még szó esik. A fent leírt módszerrel az egyszerű grafikus objektumok illeszthetők a HTML oldalba. A képek formátumára viszont ügyelni kell, mert a legtöbb böngésző csak a JPG és a GIF kiterjesztésű állományokat hajlandó beszúrni.

    20 Linkek szerkesztése Egy HTML oldal nem is létezhetne linkek nélkül. Az egész HMTL programozás alapját ezek képezik. Segítségükkel a felhasználó egy egyszerű kattintással mozoghat a nagy terjedelmű honlap több oldala között. A hivatkozásoknak külsőségeik alapján kettő, működésük alapján három fajtája van. Külsőségek szerint a linkek lehetnek szövegesek, de lehetnek képek illetve azok bizonyos részei is (Image Map). Működés tekintetében vannak olyanok, melyek egy másik fájlra, dokumentumra mutatnak, vannak, amik a dokumentum egy adott részére és vannak, melyek egy másik dokumentum adott részére viszik a látogatót. Szerkesztésük természetesen elnevezésüknél jóval egyszerűbb.Egy HTML oldal nem is létezhetne linkek nélkül. Az egész HMTL programozás alapját ezek képezik. Segítségükkel a felhasználó egy egyszerű kattintással mozoghat a nagy terjedelmű honlap több oldala között. A hivatkozásoknak külsőségeik alapján kettő, működésük alapján három fajtája van. Külsőségek szerint a linkek lehetnek szövegesek, de lehetnek képek illetve azok bizonyos részei is (Image Map). Működés tekintetében vannak olyanok, melyek egy másik fájlra, dokumentumra mutatnak, vannak, amik a dokumentum egy adott részére és vannak, melyek egy másik dokumentum adott részére viszik a látogatót. Szerkesztésük természetesen elnevezésüknél jóval egyszerűbb. A linkeket az és a parancsok közé kell beírnunk. Az tag kötelező opciója a HREF="hivatkozott oldal.htm".A linkeket az és a parancsok közé kell beírnunk. Az tag kötelező opciója a HREF="hivatkozott oldal.htm".

    21 Linkek szerkesztése A link tag szokványos tulajdonságai:A link tag szokványos tulajdonságai: HREF="célfájl" - A már megismert funkcióval rendelkezik. HREF="célfájl" - A már megismert funkcióval rendelkezik. TARGET="megjelenítés helye" - A hivatkozott oldal megjelenítésének helyét, módját adja meg. Értékei: "_blank", "_top", "_parent" és "keret azonosítója". A "_top" esetén minden keret felülíródik, "_blank" esetén egy teljesen új böngészőablakban jelenik meg a linkelt dokumentum. A "_parent" keretek esetén a "szülőkeret - anyakeret" ablakába, a "keret azonosítója" esetén az adott keretbe (frame-be) töltődik be az oldal. TARGET="megjelenítés helye" - A hivatkozott oldal megjelenítésének helyét, módját adja meg. Értékei: "_blank", "_top", "_parent" és "keret azonosítója". A "_top" esetén minden keret felülíródik, "_blank" esetén egy teljesen új böngészőablakban jelenik meg a linkelt dokumentum. A "_parent" keretek esetén a "szülőkeret - anyakeret" ablakába, a "keret azonosítója" esetén az adott keretbe (frame-be) töltődik be az oldal. onMouseOver="JavaScript parancs(ok)" - Egér a link felett JavaScript esemény bekövetkezésekor elvégzendő utasítások szerkesztője.onMouseOver="JavaScript parancs(ok)" - Egér a link felett JavaScript esemény bekövetkezésekor elvégzendő utasítások szerkesztője. onMouseOut="JavaScript parancs(ok)" - Szorosan összefügg a fentebbivel, az Egér elhagyta a linket esemény kezelője. onMouseOut="JavaScript parancs(ok)" - Szorosan összefügg a fentebbivel, az Egér elhagyta a linket esemény kezelője. onClick="JavaScript parancs(ok)" - Az Egérklikkelés eseményt kezeli, hatása hasonló a HREF opció hatásához. onClick="JavaScript parancs(ok)" - Az Egérklikkelés eseményt kezeli, hatása hasonló a HREF opció hatásához.

    22 Linkek szerkesztése Amikor tehát egy másik HTML fájl legelejére szeretnénk ugrani, az utasításra van szükségünk. Ha a már betöltött oldal egy adott pontjára szeretnénk ugrani, akkor egy -hez hasonló parancsot használunk. Ekkor azonban szükség van még egy azonosítóra is, mellyel a meglinkelt szövegtöredéket azonosítani akarjuk. Ez Azononsítani kívánt szövegtöredék alakú.Amikor tehát egy másik HTML fájl legelejére szeretnénk ugrani, az utasításra van szükségünk. Ha a már betöltött oldal egy adott pontjára szeretnénk ugrani, akkor egy -hez hasonló parancsot használunk. Ekkor azonban szükség van még egy azonosítóra is, mellyel a meglinkelt szövegtöredéket azonosítani akarjuk. Ez Azononsítani kívánt szövegtöredék alakú. A legbonyolultabb esetben egy fájl meghatározott részére szeretnénk a felhasználót eljuttatni, ilyenkor az sort alkalmazzuk. Ez még önmagában kevés, ugyanis a fentebb leírtakhoz hasonlóan itt is kell a hivatkozott fájlnak egy Szövegtöredék részt tartalmaznia.A legbonyolultabb esetben egy fájl meghatározott részére szeretnénk a felhasználót eljuttatni, ilyenkor az sort alkalmazzuk. Ez még önmagában kevés, ugyanis a fentebb leírtakhoz hasonlóan itt is kell a hivatkozott fájlnak egy Szövegtöredék részt tartalmaznia.

    23 Linkek szerkesztése A linkeknek van még néhány speciális fajtája is. Ezek közül talán a legfontosabb az t küldő hivatkozás. Ezt a típust a HREF="mailto:e- mail cím" utasítással valósíthatjuk meg. Persze ftp, gopher és wais típusú címekhez is vezethet link, ezeket mindig a kívánt cím elé kell beírni, attól egy kettősponttal és két perrel ( // ) elválasztva. Például egy ftp cím szintaxisa: HREF="ftp://www.szerver_neve.hu". Alapértelmezésben a linkek a http protokollt használják ("http://www.interetcim.hu"), ennek ellenére azt is kötelező megadni.A linkeknek van még néhány speciális fajtája is. Ezek közül talán a legfontosabb az t küldő hivatkozás. Ezt a típust a HREF="mailto:e- mail cím" utasítással valósíthatjuk meg. Persze ftp, gopher és wais típusú címekhez is vezethet link, ezeket mindig a kívánt cím elé kell beírni, attól egy kettősponttal és két perrel ( // ) elválasztva. Például egy ftp cím szintaxisa: HREF="ftp://www.szerver_neve.hu". Alapértelmezésben a linkek a http protokollt használják ("http://www.interetcim.hu"), ennek ellenére azt is kötelező megadni. A hivatkozások további formázása a tagban opciók formájában (is) lehetséges a már megismert módon.A hivatkozások további formázása a tagban opciók formájában (is) lehetséges a már megismert módon. A hivatkozások másik fajtája a képlink, amely nem egy szövegrész, hanem egy kép (vagy animáció) hivatkozásként működését jelenti. Ekkor az parancs és zárópárja közé odakerül a kép információit hordozó tag, vagyis egy, illetve ehhez hasonló utasítássor.A hivatkozások másik fajtája a képlink, amely nem egy szövegrész, hanem egy kép (vagy animáció) hivatkozásként működését jelenti. Ekkor az parancs és zárópárja közé odakerül a kép információit hordozó tag, vagyis egy, illetve ehhez hasonló utasítássor.

    24 Űrlapkészítés Az űrlapok az interaktivitás egyik legfontosabb elemei, a kommunikációt segít(het)ik elő.Az űrlapok az interaktivitás egyik legfontosabb elemei, a kommunikációt segít(het)ik elő. Az űrlapok/kérdőívek összes eleme egy elemen belül helyezkedik el, ahol az egyes gombokat vagy szövegmezőket más-más elemekkel definiáljuk.Az űrlapok/kérdőívek összes eleme egy elemen belül helyezkedik el, ahol az egyes gombokat vagy szövegmezőket más-más elemekkel definiáljuk. Az információ beviteli lehetőségeket az tag használatával érhetjük el.Az információ beviteli lehetőségeket az tag használatával érhetjük el.

    25 Űrlapkészítés parancsai ACTION= URL:Az űrlap elküldésekor végrehajtandó feladat, amelyet egy URL segítségével adhatunk meg. Az egyszerűbb eset az, amikor az adott űrlap kitöltése után az eredményt egy címre továbbítjuk. Ekkor az URL a típusú lesz.ACTION= URL:Az űrlap elküldésekor végrehajtandó feladat, amelyet egy URL segítségével adhatunk meg. Az egyszerűbb eset az, amikor az adott űrlap kitöltése után az eredményt egy címre továbbítjuk. Ekkor az URL a típusú lesz. A második esetben az adott űrlapot egy szerveren futó CGI program dolgozza fel. METHOD= küldéstípus (elhagyható):Ha az ACTION paraméterrel egy CGI programra hivatkozunk, akkor ezzel adhatjuk meg, hogy a megjelenítő milyen módon küldje át az adatokat a szervernek. (GET vagy POST) Ha ben küldünk adatokat, akkor a METHOD="POST" paramétert kell használnunk.METHOD= küldéstípus (elhagyható):Ha az ACTION paraméterrel egy CGI programra hivatkozunk, akkor ezzel adhatjuk meg, hogy a megjelenítő milyen módon küldje át az adatokat a szervernek. (GET vagy POST) Ha ben küldünk adatokat, akkor a METHOD="POST" paramétert kell használnunk. ENCTYPE= kódolás típusa:Az elküldött adatok kódolási módszerét állíthatjuk be. Egyik esetben a kérdőív egyes mezőinek nevei és az értékei közé = jelet rak, a szóközöket lecseréli + jelekre, a speciális karaktereket %xx alakú jelekké konvertálja, ahol az xx az adott karakter hexadecimális ASCII kódja. (ez a kódolás a CGI programok által történő feldolgozást könnyíti meg.)ENCTYPE= kódolás típusa:Az elküldött adatok kódolási módszerét állíthatjuk be. Egyik esetben a kérdőív egyes mezőinek nevei és az értékei közé = jelet rak, a szóközöket lecseréli + jelekre, a speciális karaktereket %xx alakú jelekké konvertálja, ahol az xx az adott karakter hexadecimális ASCII kódja. (ez a kódolás a CGI programok által történő feldolgozást könnyíti meg.) Ha az adott űrlap tartalmát en keresztül küldjük el, akkor célszerű text/plain kódolást beállítani, és így olvasható marad a szöveg.Ha az adott űrlap tartalmát en keresztül küldjük el, akkor célszerű text/plain kódolást beállítani, és így olvasható marad a szöveg.

    26 Űrlapkészítés parancsai A TYPE paraméter segítségével határozzuk meg, hogy milyen űrlapelem- típust használunk.A TYPE paraméter segítségével határozzuk meg, hogy milyen űrlapelem- típust használunk. : : Egy egyszerű szövegbekérő ablak, amelyek rövid szövegek fogadására alkalmas : : Ez az elem hozza létre az űrlap elküldéséhez szükséges nyomógombot. A gomb feliratát a value paraméterrel állíthatjuk be. : : Ez az elem abban lesz a segítségünkre, hogy létrehoz a fentiekhez hasonló nyomógombot, amelynek az a feladata, hogy az összes mező értékét az alapértékre állítsa vissza.

    27 Űrlapkészítés parancsai : : Ha ezt a mezőt alkalmazzuk, akkor a begépelt karakterek helyett a * karakter fog megjelenni. (ezért alkalmazható a jelszó (password) bekéréséhez.). : : Egyszerű logikai értékek kijelölésére szolgál, ennek megfelelően két értéket vehet fel: igaz (checked) vagy hamis. : : Az előbbi elemhez képest a RADIO gomb alkalmazása több válaszlehetőséget kínál fel, amelyek közül egyet lehet kiválasztani. (legalábbis az azonos NAME paraméterűek közül.) : : Ha hosszabb szöveget szeretnénk bevinni, akkor a parancsot kell használnunk, a sorok (rows) és oszlopok (cols=column) számának megadásával.

    28 Űrlapkészítés parancsai : : A SUBMIT gombot egy képpel is helyettesíthetjük, ekkor az IMAGE mezőt kell alkalmaznunk. A képeknél tárgyalt szokásos paraméterek mindegyike alkalmazható. (width, height, border...) A mező különlegessége az, hogy azt is elküldi, hogy a kattintás a kép melyik koordinátájú pontján történt. (name.x illetve name.y formában) : : Ezzel az elemmel listákat (vagy lehulló menüket) készíthetünk. Ha a MULTIPLE paramétert is megadjuk, akkor a listából egyszerre több elem is kiválasztható. A SELECT elem tetszőleges számú de legalább egy elemet kell hogy tartalmazzon. : : Ezzel adhatjuk meg a lista tényleges elemeit. A VALUE tartalmazza a kiválasztás esetén elküldött értéket. Ha a SELECTED paraméter is jelen van, akkor a listában az adott elem már alapállapotban ki lesz jelölve.

    29 Multimédia A multimédia egyik nagyon fontos eleme a honlapkészítésnek. A következőkben nézzük meg, hogy hangok, illetve mozgóképek elhelyezésére milyen lehetőségeink vannak a különböző böngészőkben. (A különböző böngészők sok esetben kisebb-nagyobb eltérésekkel jelenítik meg oldalainkat. Ez a probléma a multimédia témakörben halmozottan jelentkezik.)

    30 Multimédia Animált gifek:Animált gifek: Ha valamilyen animációt szeretnénk az oldalunkon elhelyezni, a legegyszerűbb ha animált gif formátumot használunk. Az animált GIF gyakorlatilag egy több képkockát (frame) tartalmazó képformátum, ahol a különböző képek megjelenése között megadott idő telik el. (Ez az idő a grafikai programok többségében beállítható.)

    31 Multimédia Hangok a weboldalonHangok a weboldalon A háttérhangok használatához a BGSOUND taget kell használnunk az oldal HEAD részében. A BGSOUND tag paraméterei: SRCA file neve (.wav,.au,.mid kiterjesztésű lehet) LOOPA lejátszások száma, vagy pedig végtelen ("infinite") A fenti megoldást csak az Internet Explorer böngésző támogatja. A Netscape böngésző számára más formátumban kell megadni a háttérhangot. LOOPFolyamatos lejátszás esetén LOOP=TRUE paranccsal egészül ki a kód. LOOPFolyamatos lejátszás esetén LOOP=TRUE paranccsal egészül ki a kód.

    32 Vége


Letölteni ppt "A HTML nyelv. Bevezetés AlapelvekAlapelvek A nyelv struktúrájaA nyelv struktúrája Főbb utasításokFőbb utasítások Szöveg formázásaSzöveg formázása Lista."
Google Hirdetések