A HTML nyelvA HTML nyelv

BevezetésBevezeté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

AlapelvekAlapelvekMi is az a HTML?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 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 oldalakat helyezhetünk el a Világhálón. Alkalmazása igen egyszerű, amint azt a következőkben majd látni fogjuk. egyszerű, amint azt a következőkben majd látni fogjuk. Megírásához nem kell más, mint egy egyszerű szövegszerkesztő Megírásához nem kell más, mint egy egyszerű szövegszerkesztő program, ami felismeri a TXT fájlokat. Legmegfelelőbb erre program, ami felismeri a TXT fájlokat. Legmegfelelőbb erre Windows alatt a Jegyzettömb, azaz a Notepad. Windows alatt a Jegyzettömb, azaz a Notepad.

• A HTML oldalt tehát egyszerű szövegfájlként kell megírni, melyet 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 a mentéskor HTM vagy HTML formátumban mentünk el. Az így elkészített dokumentumot az úgynevezett Internet böngészők elkészített dokumentumot az úgynevezett Internet böngészők ( Microsoft Internet Explorer, Netscape Navigator, NeoPlanet ( Microsoft Internet Explorer, Netscape Navigator, NeoPlanet stb. ) képesek értelmezni és megnyitni. Így -a legtöbb stb. ) képesek értelmezni és megnyitni. Így -a legtöbb programozási nyelvvel ellentétben- nincs szükségünk külön programozási nyelvvel ellentétben- nincs szükségünk külön fordítóra! Parancsszavait -a tageket- az angle brackets ( < és > ) fordítóra! Parancsszavait -a tageket- az angle brackets ( < és > ) jelek közé kell beírni. jelek közé kell beírni.

• Ezeket kivéve a HTML nyelv mégis nagyszerű, hiszen megközelíti 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 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 ( Windows, OS/2, Linux, Apple Macintosh stb. ) számára egyaránt érthető, s ezért számunkra megtekinthető.érthető, s ezért számunkra megtekinthető.

AlapelvekAlapelvekA nyelv szintaktikájaA nyelv szintaktikája

• A HTML nyelv szintaktikája nagyon egyszerű. Szokták WYSIWYG A HTML nyelv szintaktikája nagyon egyszerű. Szokták WYSIWYG (What You See Is What You Get) típusú nyelvnek is nevezni. (What You See Is What You Get) típusú nyelvnek is nevezni. Parancsszavai az úgynevezett tagek, melyeket a kisebb-nagyobb (< és Parancsszavai az úgynevezett tagek, melyeket a kisebb-nagyobb (< és >) jelek közé kell beírnunk. Maga a nyelv tulajdonképpen >) 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 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 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, 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 melyet a formázandó rész után helyezünk el. (Kivétel például a sortörés - <br>, melynek nincs zárópárja.) Ezen zárópárokat úgy képezzük, - <br>, melynek nincs zárópárja.) Ezen zárópárokat úgy képezzük, hogy a tag elé - természetesen még a < és > jelek között - egy / jelet hogy a tag elé - természetesen még a < és > jelek között - egy / jelet írunk. Például a <p> zárópárja </p>. A legtöbb tag rendelkezik írunk. Például a <p> zárópárja </p>. A legtöbb tag rendelkezik különböző tulajdonságokkal ( opciókkal ). Ilyenek például a vízszintes 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 ) ( 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 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. 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 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 célszerű a tag-eket csupa nagybetűvel írni, hiszen ez sokkal áttekinthetőbbé teszi oldalunk forrását, mely megkönnyíthet egy áttekinthetőbbé teszi oldalunk forrását, mely megkönnyíthet egy későbbi szerkesztést. későbbi szerkesztést.

• A nyelv megkötéseket alig tartalmaz, csak néhány elrendezési 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ő.követelménye van. Ezek persze nagyon fontosak, betartásuk kötelező.

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

Egy egyszerű oldal Egy egyszerű oldal felépítése a megismert felépítése a megismert

tagekkeltagekkel<html> <html> <head> <head> <title>Az oldal címe</title> <title>Az oldal címe</title> </head> </head>

<body bgcolor="yellow" text="black" link="blue" <body bgcolor="yellow" text="black" link="blue" vlink="green" alink="red"> vlink="green" alink="red">

A dokumentumtörzs. A dokumentumtörzs. <br>1. Link <br>1. Link <br>2. Link <br>2. Link

</body> </body> </html></html>

Szöveg formázásaSzöveg formázása• HTML oldalunk szövegét kétféle módon formázhatjuk. 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 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 lehetőségünk van arra is, hogy az adott dokumentumra vonatkozóan alapértelmezett formázási utasításokat vonatkozóan alapértelmezett formázási utasításokat adjunk meg. adjunk meg.

• Legcélszerűbb, ha az oldal legelején ( még a <BODY> Legcélszerűbb, ha az oldal legelején ( még a <BODY> tagben ) megadjuk a szöveg színét ( TEXT opció ). tagben ) megadjuk a szöveg színét ( TEXT opció ). Emellet létezik külön parancs a betű típusának és Emellet létezik külön parancs a betű típusának és méretének megadására is. A karaktertípus méretének megadására is. A karaktertípus változtatásakor célszerű figyelembe venni, hogy a változtatásakor célszerű figyelembe venni, hogy a honlap látogatója nem feltétlenül rendelkezik a honlap látogatója nem feltétlenül rendelkezik a megadott betűtípussal! Ezért érdemes például: Times megadott betűtípussal! Ezért érdemes például: Times New Roman, Arial, Courier New, Tahoma, MS Sans New Roman, Arial, Courier New, Tahoma, MS Sans típusokat használni. Ha mégis a felhasználó számára típusokat használni. Ha mégis a felhasználó számára ismeretlen karaktertípust adnánk meg, akkor a ismeretlen karaktertípust adnánk meg, akkor a böngésző automatikusan az ő alapértelmezett készletét böngésző automatikusan az ő alapértelmezett készletét fogja használni. fogja használni.

Szöveg formázásaSzöveg formázása

• A betűformázás parancsszava a <FONT>, A betűformázás parancsszava a <FONT>, melyet a formázott szövegrész végén a melyet a formázott szövegrész végén a </FONT> tag zár le. Opciói lehetnek :</FONT> tag zár le. Opciói lehetnek :

FACE="betűnév" - A betű típusát határozza FACE="betűnév" - A betű típusát határozza meg. meg.

SIZE="méret" - A karakterek méretét adja SIZE="méret" - A karakterek méretét adja meg képpontban ( pixelben ). meg képpontban ( pixelben ).

COLOR="#színkód" - Egy adott szövegrész COLOR="#színkód" - Egy adott szövegrész színét lehet megváltoztatni vele, ahol a színt színét lehet megváltoztatni vele, ahol a színt megadhatjuk angol nevével és hexadecimális megadhatjuk angol nevével és hexadecimális kódjával is.kódjával is.

Szöveg formázásaSzöveg formázása• A karakterek tulajdonságait befolyásolják még a <B> A karakterek tulajdonságait befolyásolják még a <B>

( bold - félkövér ), az <U> ( underline - aláhúzott ), az <I> ( bold - félkövér ), az <U> ( underline - aláhúzott ), az <I> ( italic - dőlt ) és az <S> ( striked - áthúzott ) tagek. ( italic - dőlt ) és az <S> ( striked - áthúzott ) tagek.

• A betűk függőleges elhelyezkedését is változtathatjuk. A A betűk függőleges elhelyezkedését is változtathatjuk. A <SUP> parancs felső indexet, a <SUB> pedig alsó indexet <SUP> parancs felső indexet, a <SUB> pedig alsó indexet eredményez. A felsoroltak mindegyike rendelkezik eredményez. A felsoroltak mindegyike rendelkezik zárópárral. zárópárral.

• Honlapunk szövegét bekezdésekre is tagolhatjuk. Ezen Honlapunk szövegét bekezdésekre is tagolhatjuk. Ezen bekezdéseket a <P> és a </P> tag szegélyezi. A bekezdéseket a <P> és a </P> tag szegélyezi. A böngészők az egyes bekezdéseket mindig elkülönítik böngészők az egyes bekezdéseket mindig elkülönítik egymástól, köztük szünetet hagynak. Maga a <P> parancs egymástól, köztük szünetet hagynak. Maga a <P> parancs az ALIGN="igazítás" opcióval rendelkezik. Értékei az ALIGN="igazítás" opcióval rendelkezik. Értékei lehetnek: "left" - balra rendez ( alapértelmezett ), "center" - lehetnek: "left" - balra rendez ( alapértelmezett ), "center" - középre rendez, "right" - jobbra rendez és "justify" - középre rendez, "right" - jobbra rendez és "justify" - sorkizártan rendez. sorkizártan rendez.

• Ezeken kívül még sok szövegformázási lehetőségünk van, 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 például a különböző szövegrészek látványos (árnyékolt vagy vonallal) való elválasztása.vagy vonallal) való elválasztása.

Lista szerkesztéseLista szerkesztése• A HTML nyelvben a listák szerkesztése is igen A HTML nyelvben a listák szerkesztése is igen

egyszerű. Létezik hozzá külön tag is, de listánkat egyszerű. Létezik hozzá külön tag is, de listánkat elkészíthetjük úgy is, hogy magunk adjuk meg 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 szóközönként a bal margótól mért távolságát az egyes listaelemeknek. Ez persze hosszadalmas, ezért listaelemeknek. Ez persze hosszadalmas, ezért érdemes a parancsszavas megoldást választani. érdemes a parancsszavas megoldást választani.

• A listákat kétféle kategóriába sorolhatjuk: lehetnek A listákat kétféle kategóriába sorolhatjuk: lehetnek rendezettek (ordered) és lehetnek rendezetlenek rendezettek (ordered) és lehetnek rendezetlenek (unordered).(unordered).

• A rendezetteket az <OL> vezeti be, míg a A rendezetteket az <OL> vezeti be, míg a számozatlant (rendezetlen - unordered) az <UL> tag. számozatlant (rendezetlen - unordered) az <UL> tag. Természetesen mindkét felsorolási mód rendelkezik Természetesen mindkét felsorolási mód rendelkezik zárópárral. Emellett mindkettőben az <LH> parancs zárópárral. Emellett mindkettőben az <LH> parancs adja meg a listafejlécet, melyet az </LH> zár. Az egyes adja meg a listafejlécet, melyet az </LH> zár. Az egyes listaelemeket az <LI> tag jelzi, zárópárja nincs: egy listaelemeket az <LI> tag jelzi, zárópárja nincs: egy listaelem addig tart, amíg nem következik egy másik listaelem addig tart, amíg nem következik egy másik <LI> parancs.<LI> parancs.

Lista szerkesztéseLista szerkesztése• A rendezett listánál az elemek sorszámokat kapnak. A számozás kezdetét 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 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 lista számozását kívánjuk folytatni, akkor az újabbnál (természetesen az <OL> tagen belül) a CONTINUE tulajdonságot adjuk meg.<OL> tagen belül) a CONTINUE tulajdonságot adjuk meg.

• Példa:Példa:Rendezett lista kezdősorszámmal Rendezett lista kezdősorszámmal <ol seqnum="3"> <ol seqnum="3"> <lh>Rendezett lista fejléce</lh> <lh>Rendezett lista fejléce</lh> <li>Számozott listaelem <li>Számozott listaelem <li>Számozott listaelem <li>Számozott listaelem <li>Számozott listaelem <li>Számozott listaelem </ol></ol>Előző rendezett lista sorszámozásának folytatása Előző rendezett lista sorszámozásának folytatása <ol continue> <ol continue> <lh>Rendezett lista fejléce</lh> <lh>Rendezett lista fejléce</lh> <li>Számozott listaelem <li>Számozott listaelem <li>Számozott listaelem <li>Számozott listaelem </ol></ol>

Lista szerkesztéseLista szerkesztése• A másik típus, melyet az <UL> tag vezet be, a A másik típus, melyet az <UL> tag vezet be, a

DINGBAT="karakter", az SRC="elérési út/ DINGBAT="karakter", az SRC="elérési út/ képnév.kiterjesztés" és a WRAP="irány" képnév.kiterjesztés" és a WRAP="irány" opciókkal formázható.opciókkal formázható.

• A DINGBAT="karakter" tulajdonság a A DINGBAT="karakter" tulajdonság a bajuszkaraktert -amely a listaelemek előtt bajuszkaraktert -amely a listaelemek előtt szerepel- adja meg.szerepel- adja meg.

• Az SRC="elérési út/ képnév.kiterjesztés" Az SRC="elérési út/ képnév.kiterjesztés" paranccsal az elem előtt álló képecskét paranccsal az elem előtt álló képecskét határozhatjuk meg.határozhatjuk meg.

• A WARP="irány" utasítással a többoszlopos A WARP="irány" utasítással a többoszlopos listák igazítását változtathatjuk. Értékei listák igazítását változtathatjuk. Értékei lehetnek: "horiz" - vízszintesen és "vert" - lehetnek: "horiz" - vízszintesen és "vert" - függőlegesen.függőlegesen.

Lista szerkesztéseLista szerkesztése• Rendezetlen ( számozatlan ) lista Rendezetlen ( számozatlan ) lista

<ul> <ul> <lh>Számozatlan lista fejléce</lh> <lh>Számozatlan lista fejléce</lh> <li>Számozatlan listaelem <li>Számozatlan listaelem <li>Számozatlan listaelem <li>Számozatlan listaelem <li>Számozatlan listaelem <li>Számozatlan listaelem <ul wrap="horiz"> <ul wrap="horiz"> <lh>Beágyazott lista fejléce</lh> <lh>Beágyazott lista fejléce</lh> <li>Számozatlan listaelem <li>Számozatlan listaelem <li>Számozatlan listaelem <li>Számozatlan listaelem

</ul></ul>

Lista szerkesztéseLista szerkesztése• A listák ötödik fajtáját leíró listáknak nevezzük. Ezek a A listák ötödik fajtáját leíró listáknak nevezzük. Ezek a

<DL> és a </DL> tagek közé kerülnek. A Mindezeken <DL> és a </DL> tagek közé kerülnek. A Mindezeken kívül használhatunk még könyvtárlistát és menülistát is. 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 Ezen típusok a számozatlan (unordered - rendezetlen) lista speciális fajtái. A könyvtárlista a <DIR> taggel indul és speciális fajtái. A könyvtárlista a <DIR> taggel indul és </DIR> paranccsal zárul, míg a menülistát a <MENU> és </DIR> paranccsal zárul, míg a menülistát a <MENU> és a </MENU> utasítások keretezik. Ezek a normál a </MENU> utasítások keretezik. Ezek a normál számozatlan listától abban különböznek, hogy a számozatlan listától abban különböznek, hogy a könyvtárlista elemei 20 karakternél, a menülisták elemei könyvtárlista elemei 20 karakternél, a menülisták elemei pedig egy sorosnál nem lehetnek hosszabbak. pedig egy sorosnál nem lehetnek hosszabbak.

• fejléc megadását a már ismert <LH> utasítás végzi. Az fejléc megadását a már ismert <LH> utasítás végzi. Az egyes elemeket a <DT> parancs vezeti be, a hozzájuk egyes elemeket a <DT> parancs vezeti be, a hozzájuk tartozó leírást a <DD> tag után kell beírnunk. A két tartozó leírást a <DD> tag után kell beírnunk. A két utasítás egyike sem rendelkezik zárópárral. Az egyes utasítás egyike sem rendelkezik zárópárral. Az egyes listaelemek végét a leírást bevezető <DD> utasítás jelzi, listaelemek végét a leírást bevezető <DD> utasítás jelzi, ami a következő <DT> parancsig tart.ami a következő <DT> parancsig tart.

Táblázat szerkesztéseTáblázat szerkesztése• Amennyiben oldalunkon táblázatot is el akarunk Amennyiben oldalunkon táblázatot is el akarunk

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

Táblázat szerkesztéseTáblázat szerkesztése• A táblázatok a <TABLE> tagon belül több beállítást is kaphatnak. Ezek a A táblázatok a <TABLE> tagon belül több beállítást is kaphatnak. Ezek a

következők: következők:

ALIGN="vízszintes elhelyezés" - A táblázat vízszintes elhelyezését állíthatjuk 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 be vele. Értékei lehetnek: left, center, right. Ez az opció gyakorlatilag minden más táblázatelemnél is használható. 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 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. 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 BORDER="vastagság" - A táblázat és a cellák szegélyének vastagságát állítja be, melyet pixelben adhatunk meg. be, melyet pixelben adhatunk meg. BORDERCOLOR="#színkód" - Az táblázatszegély színét adja meg. ( Nem BORDERCOLOR="#színkód" - Az táblázatszegély színét adja meg. ( Nem minden böngésző ismeri. ) minden böngésző ismeri. ) CELLPADDING="távolság" - A cellák tartalmának távolságát adja meg a CELLPADDING="távolság" - A cellák tartalmának távolságát adja meg a szegélytől pixelben. szegélytől pixelben. CELLSPACING="távolság" - Két szomszédos cella szegélyének 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. érintkezésénél azok egymáshoz viszonyított távolságát adja meg pixelben. ( Lásd a példát! ) ( 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 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. használt kép helyét adja meg. WIDTH="szélesség" - A táblázat széleségét határozza meg. Megadható 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.pixelben és a böngésző ablak nagyságának százalékában.

Táblázat szerkesztéseTáblázat szerkesztése

• Ezeken kívül a <TD>, a <TR> és a <TH> tag Ezeken kívül a <TD>, a <TR> és a <TH> tag ismeri a BGCOLOR, az ALIGN és a VALIGN ismeri a BGCOLOR, az ALIGN és a VALIGN opciókat.opciókat.

• Gyakran szükségünk lehet cellák egyesítésére is. Gyakran szükségünk lehet cellák egyesítésére is. Ezt a <TH> és a <TD> utasítás opcióiként Ezt a <TH> és a <TD> utasítás opcióiként tehetjük meg. tehetjük meg.

• Parancsszavai:Parancsszavai:

COLSPAN="oszlopok száma" - Az értékben COLSPAN="oszlopok száma" - Az értékben megadott számú cellát egyesíti vízszintesen. megadott számú cellát egyesíti vízszintesen.

ROWSPAN="sorok száma" - Megadott számú ROWSPAN="sorok száma" - Megadott számú sort, azaz a függőlegesen szomszédos cellákat sort, azaz a függőlegesen szomszédos cellákat egyesíti.egyesíti.

Grafikák, képek Grafikák, képek beillesztésebeillesztése

Különböző képekkel, GIF animációkkal, grafikákkal szebbé, elegánsabbá tehetjük HTML 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 oldalunkat. Ezeket igazán egyszerű beilleszteni a dokumentum szöveges részei közé. A beszúráshoz az <IMG> tagot használjuk. Ennek kötelező tulajdonsága az SRC="elérési beszúráshoz az <IMG> 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 ú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 természetesen nem elhagyható. Képünket formázzák az alábbi opciók is, melyek azonban nem kötelezők: 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 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. 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 BORDER="határvonal vastagsága" - A képet magába foglaló keret határvonalának vastagságát

állítja be. állítja be. ALT="megjelenő szöveg" - Az Alternate Text adható meg vele, melyet a felhasználó akkor lát, 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. 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 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 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. 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 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. 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, 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. szintén pixelben.

USEMAP="#azonosító" - Képünkhöz több hivatkozás kapcsolása esetén használhatjuk. 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 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!) 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 NAME="névazonosító" - A kép azonosító nevét adja meg, mellyel a JavaScript program hivatkozni tud rá.hivatkozni tud rá.

Grafikák, képek Grafikák, képek beillesztésebeillesztése

A felsoroltak közül igen célszerű a WIDTH és a HEIGHT A felsoroltak közül igen célszerű a WIDTH és a HEIGHT opciók alkalmazása. Ha ugyanis a böngésző valamilyen 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 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 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 szövegbe illesztés esetén a szépen felépített külalak összeomlik. A keret megadásával elkerülhetjük ezt: összeomlik. A keret megadásával elkerülhetjük ezt: ilyenkor a böngészőben megjelenik az üres keret, ilyenkor a böngészőben megjelenik az üres keret, anélkül, hogy a szöveg és a kép elrendezésbeli viszonya anélkül, hogy a szöveg és a kép elrendezésbeli viszonya változott volna. változott volna.

Honlapunkon elhelyezhetünk úgynevezett multimédiás Honlapunkon elhelyezhetünk úgynevezett multimédiás fájlokat is. Ilyenek például a videók ( AVI, MPEG, MOV 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ó 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 esik. A fent leírt módszerrel az egyszerű grafikus objektumok illeszthetők a HTML oldalba. A képek objektumok illeszthetők a HTML oldalba. A képek formátumára viszont ügyelni kell, mert a legtöbb formátumára viszont ügyelni kell, mert a legtöbb böngésző csak a JPG és a GIF kiterjesztésű böngésző csak a JPG és a GIF kiterjesztésű állományokat hajlandó beszúrni.állományokat hajlandó beszúrni.

Linkek szerkesztéseLinkek szerkesztése• Egy HTML oldal nem is létezhetne linkek nélkül. Az Egy HTML oldal nem is létezhetne linkek nélkül. Az

egész HMTL programozás alapját ezek képezik. egész HMTL programozás alapját ezek képezik. Segítségükkel a felhasználó egy egyszerű kattintással Segítségükkel a felhasználó egy egyszerű kattintással mozoghat a nagy terjedelmű honlap több oldala között. mozoghat a nagy terjedelmű honlap több oldala között. A hivatkozásoknak külsőségeik alapján kettő, 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 működésük alapján három fajtája van. Külsőségek szerint a linkek lehetnek szövegesek, de lehetnek szerint a linkek lehetnek szövegesek, de lehetnek képek illetve azok bizonyos részei is (Image Map). képek illetve azok bizonyos részei is (Image Map). Működés tekintetében vannak olyanok, melyek egy Működés tekintetében vannak olyanok, melyek egy másik fájlra, dokumentumra mutatnak, vannak, amik a másik fájlra, dokumentumra mutatnak, vannak, amik a dokumentum egy adott részére és vannak, melyek egy dokumentum egy adott részére és vannak, melyek egy másik dokumentum adott részére viszik a látogatót. másik dokumentum adott részére viszik a látogatót. Szerkesztésük természetesen elnevezésüknél jóval Szerkesztésük természetesen elnevezésüknél jóval egyszerűbb.egyszerűbb.

• A linkeket az <A> és a </A> parancsok közé kell A linkeket az <A> és a </A> parancsok közé kell beírnunk. Az <A> tag kötelező opciója a beírnunk. Az <A> tag kötelező opciója a HREF="hivatkozott oldal.htm".HREF="hivatkozott oldal.htm".

Linkek szerkesztéseLinkek 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 TARGET="megjelenítés helye" - A hivatkozott oldal

megjelenítésének helyét, módját adja meg. Értékei: "_blank", 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 "_top", "_parent" és "keret azonosítója". A "_top" esetén minden keret felülíródik, "_blank" esetén egy teljesen új keret felülíródik, "_blank" esetén egy teljesen új böngészőablakban jelenik meg a linkelt dokumentum. A böngészőablakban jelenik meg a linkelt dokumentum. A "_parent" keretek esetén a "szülőkeret - anyakeret" ablakába, 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 "keret azonosítója" esetén az adott keretbe (frame-be) töltődik be az oldal. az oldal.

• onMouseOver="JavaScript parancs(ok)" - Egér a link felett onMouseOver="JavaScript parancs(ok)" - Egér a link felett JavaScript esemény bekövetkezésekor elvégzendő utasítások JavaScript esemény bekövetkezésekor elvégzendő utasítások szerkesztője. szerkesztője.

• onMouseOut="JavaScript parancs(ok)" - Szorosan összefügg a onMouseOut="JavaScript parancs(ok)" - Szorosan összefügg a fentebbivel, az Egér elhagyta a linket esemény kezelője. fentebbivel, az Egér elhagyta a linket esemény kezelője.

• onClick="JavaScript parancs(ok)" - Az Egérklikkelés eseményt onClick="JavaScript parancs(ok)" - Az Egérklikkelés eseményt kezeli, hatása hasonló a HREF opció hatásához.kezeli, hatása hasonló a HREF opció hatásához.

Linkek szerkesztéseLinkek szerkesztése• Amikor tehát egy másik HTML fájl legelejére Amikor tehát egy másik HTML fájl legelejére

szeretnénk ugrani, az <A HREF="másik.htm"> szeretnénk ugrani, az <A HREF="másik.htm"> utasításra van szükségünk. Ha a már betöltött oldal 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 <A egy adott pontjára szeretnénk ugrani, akkor egy <A HREF="#azonosító"> -hez hasonló parancsot HREF="#azonosító"> -hez hasonló parancsot használunk. Ekkor azonban szükség van még egy használunk. Ekkor azonban szükség van még egy azonosítóra is, mellyel a meglinkelt szövegtöredéket azonosítóra is, mellyel a meglinkelt szövegtöredéket azonosítani akarjuk. Ez <A azonosítani akarjuk. Ez <A NAME="azonosító">Azononsítani kívánt NAME="azonosító">Azononsítani kívánt szövegtöredék</A> alakú.szövegtöredék</A> alakú.

• A legbonyolultabb esetben egy fájl meghatározott A legbonyolultabb esetben egy fájl meghatározott részére szeretnénk a felhasználót eljuttatni, ilyenkor részére szeretnénk a felhasználót eljuttatni, ilyenkor az <A HREF="másik.htm#azonosító"> sort az <A HREF="másik.htm#azonosító"> sort alkalmazzuk. Ez még önmagában kevés, ugyanis a alkalmazzuk. Ez még önmagában kevés, ugyanis a fentebb leírtakhoz hasonlóan itt is kell a hivatkozott fentebb leírtakhoz hasonlóan itt is kell a hivatkozott fájlnak egy <A NAME="azonosító">Szövegtöredék fájlnak egy <A NAME="azonosító">Szövegtöredék </A> részt tartalmaznia.</A> részt tartalmaznia.

Linkek szerkesztéseLinkek szerkesztése• A linkeknek van még néhány speciális fajtája is. Ezek közül A linkeknek van még néhány speciális fajtája is. Ezek közül

talán a legfontosabb az E-mailt küldő hivatkozás. Ezt a típust talán a legfontosabb az E-mailt küldő hivatkozás. Ezt a típust a HREF="mailto:e-mail cím" utasítással valósíthatjuk meg. 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, 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 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 kettősponttal és két perrel ( // ) elválasztva. Például egy ftp cím szintaxisa: HREF="ftp://www.szerver_neve.hu". cím szintaxisa: HREF="ftp://www.szerver_neve.hu". Alapértelmezésben a linkek a http protokollt használják Alapértelmezésben a linkek a http protokollt használják ("http://www.interetcim.hu"), ennek ellenére azt is kötelező ("http://www.interetcim.hu"), ennek ellenére azt is kötelező megadni.megadni.

• A hivatkozások további formázása a <BODY> tagban opciók A hivatkozások további formázása a <BODY> tagban opciók formájában (is) lehetséges a már megismert módon.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 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 szövegrész, hanem egy kép (vagy animáció) hivatkozásként működését jelenti. Ekkor az <A HREF="..."> parancs és működését jelenti. Ekkor az <A HREF="..."> parancs és zárópárja közé odakerül a kép információit hordozó tag, zárópárja közé odakerül a kép információit hordozó tag, vagyis egy <IMG SRC="kép/animáció">, illetve ehhez vagyis egy <IMG SRC="kép/animáció">, illetve ehhez hasonló utasítássor.hasonló utasítássor.

ŰrlapkészítésŰrlapkészítés

• Az űrlapok az interaktivitás egyik legfontosabb Az űrlapok az interaktivitás egyik legfontosabb elemei, a kommunikációt segít(het)ik elő.elemei, a kommunikációt segít(het)ik elő.

• Az űrlapok/kérdőívek összes eleme egy Az űrlapok/kérdőívek összes eleme egy <FORM> elemen belül helyezkedik el, ahol az <FORM> elemen belül helyezkedik el, ahol az egyes gombokat vagy szövegmezőket más-más egyes gombokat vagy szövegmezőket más-más elemekkel definiáljuk.elemekkel definiáljuk.

• Az információ beviteli lehetőségeket az Az információ beviteli lehetőségeket az <INPUT> tag használatával érhetjük el.<INPUT> tag használatával érhetjük el.

Űrlapkészítés parancsaiŰrlapkészítés parancsai• ACTION= URL:ACTION= URL:Az űrlap elküldésekor végrehajtandó feladat, amelyet Az űrlap elküldésekor végrehajtandó feladat, amelyet

egy URL segítségével adhatunk meg. Az egyszerűbb eset az, amikor 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 e-mail címre az adott űrlap kitöltése után az eredményt egy e-mail címre továbbítjuk. Ekkor az URL a "mailto:valaki@valalhol" típusú lesz. továbbítjuk. Ekkor az URL a "mailto:valaki@valalhol" típusú lesz. A második esetben az adott űrlapot egy szerveren futó CGI program A második esetben az adott űrlapot egy szerveren futó CGI program dolgozza fel. dolgozza fel.

• METHOD= küldéstípus (elhagyható):METHOD= küldéstípus (elhagyható): Ha az ACTION paraméterrel Ha az ACTION paraméterrel egy CGI programra hivatkozunk, akkor ezzel adhatjuk meg, hogy a egy CGI programra hivatkozunk, akkor ezzel adhatjuk meg, hogy a megjelenítő milyen módon küldje át az adatokat a szervernek. (GET megjelenítő milyen módon küldje át az adatokat a szervernek. (GET vagy POST) Ha emailben küldünk adatokat, akkor a vagy POST) Ha emailben küldünk adatokat, akkor a METHOD="POST" paramétert kell használnunk.METHOD="POST" paramétert kell használnunk.

• ENCTYPE= kódolás típusa:ENCTYPE= kódolás típusa: Az elküldött adatok kódolási Az elküldött adatok kódolási módszerét állíthatjuk be. Egyik esetben a kérdőív egyes mezőinek 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, 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 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 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.)programok által történő feldolgozást könnyíti meg.)

• Ha az adott űrlap tartalmát emailen keresztül küldjük el, akkor Ha az adott űrlap tartalmát emailen keresztül küldjük el, akkor célszerű text/plain kódolást beállítani, és így olvasható marad a célszerű text/plain kódolást beállítani, és így olvasható marad a szöveg.szöveg.

Űrlapkészítés parancsaiŰrlapkészítés parancsai• A TYPE paraméter segítségével határozzuk meg, hogy A TYPE paraméter segítségével határozzuk meg, hogy

milyen űrlapelem-típust használunk.milyen űrlapelem-típust használunk.

• <INPUT TYPE=TEXT>:<INPUT TYPE=TEXT>:Egy egyszerű szövegbekérő ablak, amelyek rövid szövegek Egy egyszerű szövegbekérő ablak, amelyek rövid szövegek fogadására alkalmasfogadására alkalmas

• <INPUT TYPE=SUBMIT>:<INPUT TYPE=SUBMIT>:Ez az elem hozza létre az űrlap elküldéséhez szükséges 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 nyomógombot. A gomb feliratát a value paraméterrel állíthatjuk be. állíthatjuk be.

• <INPUT TYPE=RESET>:<INPUT TYPE=RESET>:Ez az elem abban lesz a segítségünkre, hogy létrehoz a Ez az elem abban lesz a segítségünkre, hogy létrehoz a fentiekhez hasonló nyomógombot, amelynek az a feladata, fentiekhez hasonló nyomógombot, amelynek az a feladata, hogy az összes mező értékét az alapértékre állítsa vissza.hogy az összes mező értékét az alapértékre állítsa vissza.

Űrlapkészítés parancsaiŰrlapkészítés parancsai• <INPUT TYPE=PASSWORD>:<INPUT TYPE=PASSWORD>:

Ha ezt a mezőt alkalmazzuk, akkor a begépelt karakterek helyett a Ha ezt a mezőt alkalmazzuk, akkor a begépelt karakterek helyett a * karakter fog megjelenni. (ezért alkalmazható a jelszó (password) * karakter fog megjelenni. (ezért alkalmazható a jelszó (password) bekéréséhez.) .bekéréséhez.) .

• <INPUT TYPE=CHECKBOX>:<INPUT TYPE=CHECKBOX>:Egyszerű logikai értékek kijelölésére szolgál, ennek megfelelően Egyszerű logikai értékek kijelölésére szolgál, ennek megfelelően két értéket vehet fel: igaz (checked) vagy hamis. két értéket vehet fel: igaz (checked) vagy hamis.

• <INPUT TYPE=RADIO>:<INPUT TYPE=RADIO>:Az előbbi elemhez képest a RADIO gomb alkalmazása több 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. 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.)(legalábbis az azonos NAME paraméterűek közül.)

• <TEXTAREA>:<TEXTAREA>:Ha hosszabb szöveget szeretnénk bevinni, akkor a <textarea> Ha hosszabb szöveget szeretnénk bevinni, akkor a <textarea> </textarea> parancsot kell használnunk, a sorok (rows) és oszlopok </textarea> parancsot kell használnunk, a sorok (rows) és oszlopok (cols=column) számának megadásával.(cols=column) számának megadásával.

Űrlapkészítés parancsaiŰrlapkészítés parancsai• <INPUT TYPE=IMAGE>:<INPUT TYPE=IMAGE>:

A SUBMIT gombot egy képpel is helyettesíthetjük, ekkor az IMAGE 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 mezőt kell alkalmaznunk. A képeknél tárgyalt szokásos paraméterek mindegyike alkalmazható. (width, height, border...) A 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 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 melyik koordinátájú pontján történt. (name.x illetve name.y formában)formában)

• <SELECT>:<SELECT>:Ezzel az elemmel listákat (vagy lehulló menüket) készíthetünk. 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 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 több elem is kiválasztható. A SELECT elem tetszőleges számú de legalább egy <OPTION> elemet kell hogy tartalmazzon.legalább egy <OPTION> elemet kell hogy tartalmazzon.

• <OPTION>:<OPTION>:Ezzel adhatjuk meg a lista tényleges elemeit. A VALUE tartalmazza 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 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 is jelen van, akkor a listában az adott elem már alapállapotban ki lesz jelölve.lesz jelölve.

MultimédiaMultimédia

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

MultimédiaMultimédia

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

<img border="0" src="htmlspeci.gif" <img border="0" src="htmlspeci.gif" width="400" height="60">width="400" height="60">

MultimédiaMultimédia• Hangok a weboldalonHangok a weboldalon

A háttérhangok használatához a BGSOUND taget kell A háttérhangok használatához a BGSOUND taget kell használnunk az oldal HEAD részében.használnunk az oldal HEAD részében.

A BGSOUND tag paraméterei:A BGSOUND tag paraméterei:SRCSRC A file neve (.wav, .au, .mid kiterjesztésű lehet)A file neve (.wav, .au, .mid kiterjesztésű lehet)LOOPLOOP A lejátszások száma, vagy pedig végtelen ("infinite")A lejátszások száma, vagy pedig végtelen ("infinite")

A fenti megoldást csak az Internet Explorer böngésző 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 támogatja. A Netscape böngésző számára más formátumban kell megadni a háttérhangot. kell megadni a háttérhangot.

<EMBED SRC="a hangfile neve" AUTOSTART=TRUE <EMBED SRC="a hangfile neve" AUTOSTART=TRUE HIDDEN=TRUE >HIDDEN=TRUE >

LOOPLOOP Folyamatos lejátszás esetén LOOP=TRUE paranccsal Folyamatos lejátszás esetén LOOP=TRUE paranccsal egészül ki a kód.egészül ki a kód.

VégeVége