Kép és multimédia objektumok

 Képeket az <img> elemmel adhatunk meg, ami egy önlezáró elem.

 A leggyakrabban használt kép formátumok a JPEG (Joint Photographic Experts Group, főleg
fotók esetében használjuk, hátterük nem lehet átlátszó), a GIF (Graphic Interchange Format,
256 szín megjelenítésére alkalmas, gyorsabban töltődik be, lehet átlátszó a háttere) és a PNG
(Portable Network Graphics, lehetővé teszi az átlátszó hátteret, jól optimalizálhatók)
 Az alábbi példa az <img> fontosabb tulajdonságait is tartalmazza:
<img src="vizeses.jpg" border="0" alt="Vízesés az alpokban” height="100" width="200" >
 Az alt vagy title tulajdonság egy alternatív címet tartalmaz, amely csak bizonyos esetekben
jelenik meg (pl. ha a böngésző nem grafikus vagy ha az egeret a kép fölé visszük),
 a src a kép forrását tartalmazza (ez egy URL),
 a height és width a kép megjelenítésére szánt helyet (ha ezek nincsenek, akkor a kép teljes
méretben jelenik meg),
 végül a border a kép köré húzott szegély vastagságát jelenti.
Képből link készítése
 Azonosító segítségével: <a href="#leves">
<img border="0" src="leves.jpg" width="300" height="200"></a> - a képre kattintva
<a name="leves"></a> ugrik a recepthez
 A képre kattintva hivatkozunk egy weboldalra:
 <a href="http://www.fakanal.hu">
<img border="0" src="leves.jpg" width="300" height="200"></a>
Külső objektumok
 Ezeknek a böngésző egy megjelenítési területet biztosít (ez általában egy téglalap).
 Ahhoz, hogy egy ilyen külső alkalmazás fusson a böngészőben, a futtató "motor"-nak jelen
kell lennie. Ezt a böngésző kiterjesztéseivel érik el (plugin).
 A mechanizmus bármilyen programnyelven futtatott alkalmazásra érvényes, ha megfelelő
kiterjesztés csatolható a böngészőhöz: Flash, Java, Python, stb.
 A külső kód illesztéséhez használható elem:<object>, ami egy inline önlezáró elem.
Listák
 Egymással összefüggő felsorolásokat tartalmaznak.
 Általában két szinten definiáljuk őket: egy közrefogó elem segítségével, amely a lista típusát
határozza meg és egy másik, a lista elemeit meghatározó elem segítségével.
 A három fontos listatípus:
 rendezett listák (ordered list), elem: <ol> , Közrefogott elem: <li> (list)
 rendezetlen listák (unordered list), elem: <ul> , Közrefogott elem: <li>
 definíciós listák (definition list), elem: <dl> , Közrefogott elemek: <dt> (definition
term) és <dd> (definition description)
 A listaelemek számozásának típusát a type tulajdonsággal, a számozás indító pontját pedig a
start tulajdonsággal állíthatjuk be (a start opcionális, és számot tartalmaz, még akkor is, ha a
lista elemeinek sorrendjét betűkkel jelöljük, pl. sart=”3”).
 Rendezetlen listáknál a type paraméter értéke:
 disc (teli kör)
 square (teli négyzet)
 circle (üres kör)
Táblázatok
 A táblázatok sor/oszlop elrendezés szerint jelenítenek meg tartalmakat. A fontosabb felépítő
elemek az alábbiak:
 <table> - magát a táblázatot definiálja
 <tr> (table row) a táblázat egy sorát definiálja
 <th> (table heading), <td> (table data) - a táblázat egy celláját definiálják, a heading
cellák fejléceket jelentenek, a data cellák valamilyen tartalmat.
A <table> elem fontosabb tulajdonságai:
 BORDER – keretszélesség (képpontban)
 WIDTH – szélesség (képpontban vagy százalékban)
 HEIGHT – magasság
 CELLSPACING - cellaköz
 CELLPADDING – cellamargó (a cella tartalma és a keret közti távolság, képpontban)
 BACKGROUND – táblázat háttere
A <td>, <TR> elemek néhány tulajdonsága
 ROWSPAN – soregyesítés, magasság
 COLSPAN – oszlopegyesítés, szélesség
 NOWRAP – egysoros cella, sortörés nélkül
 WIDTH - szélesség
 HEIGHT – magasság
 ALIGN – vízszintes igazítási mód
 VALIGN – függőleges igazítási mód
Űrlapok
 Információk begyűjtésére alkalmazzák.
 Kérdések formájában megfogalmazhatók és arra az oldalunkra látogatók válaszolni tudnak.
 Az űrlapok elemeit azonban felhasználhatjuk más célra is, így a gombokkal, legördülő listákkal
vezérelhetjük weblapunk megjelenését.
 Az űrlapon begyűjtött adatok feldolgozása történhet:
 CGI programmal (Common Gateway Interface) – ez egy szerveren keresztül futó
program
 A kérdőíven megadott adatokat a rendszer egy e-mail címre postázza
Űrlap készítése
 Az űrlapot a <FORM> utasítással kezdjük, melynek két paraméterében meg kell adni, hogy az
eredményt hova továbbítsa és azt milyen módon tegye. A záró elem értelemszerűen
</FORM> utasítással történik.
 Pl. <FORM action=”mailto: gipszjakab@freemail.hu” method=post>…</FORM>
 Az utasítás paraméterezésében egy .CGI program elérési útja is megadható, de ekkor
célszerű a metódust GET-re változtatni.
Űrlapelemek
 Elküldést kezdeményező gomb: <INPUT type=submit>
 Amennyiben a gombon lévő „Kérdőív elküldése” feliratot meg akarjuk változtatni, úgy a
value=”felirat” paramétert kell megadnunk.
 Kérdőív adatainak törlése: <INPUT type=reset>
 Kiválasztónégyzet segítségével egy adott kérdésre igen/nem típusú választ adhatunk: <INPUT
type=checkbox name=név value=”érték bejelölés esetén”>
 Pl. Szüksége van Önnek erre a pénzre?
 <input type=checkbox name=pénz value=”kell”>

 Ha egy négyzetet már eleve bejelölten szeretnék megjeleníteni, úgy a checked paraméter is
be lehet szúrni.
 Pl.
 <input type=checkbox name=TV value=”van”> Televízió
 <input type=checkbox name=radió value=”van”> Rádió
 <input type=checkbox name=CD checked value=”van”> CD

 Választókapcsoló (rádiógomb) – itt mindig csak egyet lehet bejelölni, az egy csoportba
tartozó gombokat azonos névvel kell ellátni, mert különben nem fognak egymásra hatni:
<INPUT type=radio name=név value=”érték”>
 Pl.:
 <INPUT type=radio name=nem value=”férfi”>férfi
 <INPUT type=radio name=nem value=”nő”>nő
 <INPUT type=radio name=nem value=”trans”>nem tudom

 Egysoros szövegbeviteli mező: <INPUT type=text name=nev>

 Jelszóbekérő mező: <INPUT type=password name=jelszó>

 Választólista: lehet legördülő, vagy fix, egy ill. több

kiválasztható elemmel. A listát a <SELECT NAME=”név”>
utasítással kell kezdeni és a </SELECT> utasítással zárni. A
listán belül az <OPTION value=érték> listaelem
utasításokkal kell felsorolni a kiválasztható elemeket.
 Pl.:
 <select name=”autótípus”
 <option value=nincs> Nincs
 <option value=Audi> Audi
 <option value=bmw> BMW
 <option value=daewoo> Daewoo
  <option value=ford> Ford
 <option value=Mazda> Mazda
 <option value=Mercedes> Mercedes
 <option value=Mitsubishi> Mitsubishi
 ...
 <option value=egyebek> Egyéb
 </select>
 A választólista paraméterezhető is. Ha a <select> utasításban szerepeltetjük a size=sorok
száma paramétert, úgy nem lehulló, hanem megadott számú sorból álló listát kapunk.
 Ha azt szeretnénk, hogy a listából több elem kiválasztására is legyen lehetőség, úgy a
multiple paramétert kell alkalmazni.
 Ha valamit eleve kijelölté akarunk tenni, akkor az <option> utasításban használható a
selected paraméter.
 Többsoros szövegbeviteli mező: <textarea name=”név” rows=sorok száma cols= oszlopok
száma> előre megjelenített szöveg </textarea>
 Pl.:
 <textarea name=”szoveg” rows=5 cols=20>Ide írja az észrevételét</textarea>

 Fájlcsatolás: <input type=file>

 Pl.:
 Állomány csatolásához kattintson a Tallózás gombra!
 <input type=file>
 Elküldés gomb helyettesítése képpel: az <input type=submit> helyett az <input
type=image src=képfájl> utasítást kell alkalmazni.
 Egyszerű nyomógomb: <input type=”button” value=”gombfelirat”>
Űrlap strukturálása
 Lehetőség van az űrlapon belül különböző belső kereteket elhelyezni: <fieldset></fieldset>
tagot kell használni.
 Amennyiben a keretet el kívánjuk nevezni, úgy a megnevezést <legend> </legend> utasítások
közé kell írni.
 Pl.:<fieldset>
<legend>Személyes adatok</legend>
<br><b>Név: </b><input type="text" name="nev">
<br><b>Ha regisztrált felhasználó, írja ide jelszavát: </b><input type="password" name="jelszó">
<br><b>Neme: </b> <input type="radio" name="nem" value="férfi">férfi,&nbsp;
<input type="radio" name="nem" value="nő"> nő
</fieldset>