Web technológiák Barabás Péter, Általános Informatikai Tanszék, Miskolci Egyetem Barabás Péter Web technológiák 1
Témakörök 1 2 3 HTTP/1.1 HTML4 Thi CSS is an example text. Go ahead and replace it 4 JavaScript, jquery 5 PHP, PHP-MySQL, PHP Frameworks 6 AJAX 7 WEB2.0 Barabás Péter Web technológiák 2
HTML története 1990-ben Tim Berners-Lee és Daniel W. Connolly alkotta meg a HTML-t. Berners-Lee megtervezte az SGML sablonra építve Connolly megírta a HTML DTD-t. HTML 0-s verziója a dokumentum tartalmára vonatkozó címkéket, valamint hiperhivatkozásokhoz, címsorokhoz, bekezdésekhez, listákhoz és menütételekhez használható jelölési definíciókat foglalt magában. Barabás Péter Web technológiák 3
HTML története II. HTML 1-es verziója: megtartotta a HTML 0-s verzió összes tulajdonságát, és kiegészítette azokat a sorokba illeszthető képek támogatásával, valamint a különböző karakterformázó képességekkel (pl. vastagítás, döntés). HTML 2-es verziója: verziója ugyancsak megtartotta az előző verziók tulajdonságait, kiegészítve azokat a form-ok (űrlapok) létrehozásának lehetőségével. Barabás Péter Web technológiák 4
HTML története III. HTML 3-as és 3.2-es verziója az előző verziók jellemzőit tovább bővítették az ábrák, táblázatok és vezérlőelemek képességeinek kiszélesítésével ill. az appletek, scriptek és színek támogatásával HTML 4.0 1997 végén jelent meg A megjelenéstől fogva a felhasználói programoknak és a dokumentumok szerzőinek ajánlatos az új verziót használni ill. az új verzió szerinti dokumentumokat előállítani. a korábbi verziókkal (2.0 és 3.2) való kompatibilitás megőrzésének érdekében a régebbi elemeket is támogatniuk kell. Barabás Péter Web technológiák 5
HTML 4 1 Nemzetköziség 2 Elérhetőség 3 Táblázatok 4 Összetett dokumentumok 5 Stíluslapok 6 Scriptek 7 Nyomtatás Barabás Péter Web technológiák 6
HTML struktúra Első sor: HTML verzió információ (DOCTYPE) Header rész (HEAD) Törzsrész (BODY, FRAMESET) Példa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <P>Hello world! </BODY> </HTML> Barabás Péter Web technológiák 7
DOCTYPE HTML 4.01 Strict DTD deprecated elemeket nem tartalmaz <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> HTML 4.01 Transitional DTD Strct + deprecated elemeket is tartalmaz <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> HTML 4.01 Frameset DTD Transitional + framek <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Barabás Péter Web technológiák 8
HEAD TITLE: oldal címe, kötelező META elemek Attribútumok: name content scheme http-equiv lang Példák: <META name="author" lang="fr" content="arnaud Le Hors"> <META http-equiv="expires" content="tue, 20 Aug 1996 14:25:27 GMT"> Barabás Péter Web technológiák 9
HEAD II. Content-Type <META http-equiv="content-type" content="text/html; charset=iso-8859-5"> Expires <META http-equiv="expires" content="tue, 20 Aug 1996 14:25:27 GMT"> HTTP header-ben: Expires: Tue, 20 Aug 1996 14:25:27 GMT Keywords Keresőmotorok számára <META name="keywords" lang="en-us" content="vacation,greece,sunshine"> Author <META name="author" content="john Doe"> Date <META name="date" content="1994-11-06t08:49:37+00:00"> Barabás Péter Web technológiák 10
BODY Attribútumok: id, class lang, dir title style onload, onunload onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, oneydown, onkeyup Deprecated elemek: formázási elemenk FONT, bgcolor, color, align, stb. Barabás Péter Web technológiák 11
ID, class ID: egyedi azonosító Szerepek: stíluslap kiválasztó hiperlink target elem referencia elérése script-ekben OBJECT element neve általános célú feldolgozás CLASS: egy v. több osztályt rendelhetünk egy elemhez Szerepek: stíluslap kiválasztó általános célú feldolgozás Barabás Péter Web technológiák 12
Blokkszintű és sorszintű elemek Tartalom: [blokkszintű elem] [blokkszintű elem] [sorszintű elem] [sorszintű elem] Formázás: blokkszintű elem: új sorban kezdődik sorszintű elem: nem kezdődik új sorban Szövegirány ( dir attribútum): blokkszintű elem: öröklődik a befoglalt elemekre sorszintű elem: nem öröklődik Stíluslapok elemek szintjének szabályozása Barabás Péter Web technológiák 13
DIV, SPAN dokumentum strukturálása DIV: blokkszintű sortörés előtte és utána SPAN: sorszintű id, class attribútumok stíluslapokhoz stíluslapokkal együtt használatos tableless design Barabás Péter Web technológiák 14
Címsorok 6 szint H1, H2, H3, H4, H5, H6 betűméret változik <body> <h1>címsor1</h1> <h2>címsor2</h2> <h3>címsor3</h3> <h4>címsor4</h4> <h5>címsor5</h5> <h6>címsor6</h6> </body> Barabás Péter Web technológiák 15
Lang attribútum lang attribútum: elem tartalmának nyelve szerző definiálhatja: keresőmotorok beszédszintetizátorok írásjelek minőségének javítására megfelelő idézőjelek kiválasztása elválasztáshoz helyesírás ellenőrzőkhöz nyelv kódok: elsődleges kód (nyelvkód) alkód (országkód) hu-hu, en-us, i-navajo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML lang="fr"> <HEAD> <TITLE>Un document multilingue</title> </HEAD> <BODY>...Interpreted as French... <P lang="es">...interpreted as Spanish... <P>...Interpreted as French again... <P>...French text interrupted by <EM lang="ja">some Japanese</EM> French begins here again... </BODY> </HTML> Barabás Péter Web technológiák 16
Dir attribútum dir = LTR RTL LTR: Left-to-right (default) RTL: Right-to-left Példa: <Q lang="he" dir="rtl">...a Hebrew quotation...</q> öröklődik és felüldefiniálható Bidirectional algorithm BDO: felülírás, kikényszerítés Barabás Péter Web technológiák 17
Szövegek Fehér karakterek ( white spaces ) ASCII space ( ) ASCII tab ( ) ASCII form feed () 0-hosszúságú space ( ) sortörés 1 db space-ként kerül renderelésre kivéve PRE elem esetén - space elhelyezése Barabás Péter Web technológiák 18
Strukturált szöveg EM STRONG CITE DFN CODE SAMP KBD VAR ABBR ACRONYM <body> <em>kiemelt elem</em><br> <strong>erősen kiemelt elem</strong><br> <cite>neumann János<cite> mondta:<br> <Q lang="hu-hu">az agy nyelve nem egyezik meg a matematika nyelvével.</q><br> <dfn>definíció</dfn><br> <code>kódrészlet</code><br> <samp>program minta kimenete</samp><br> A súgóhoz az <kbd>f1</kbd> billentyűt nyomja le.<br> <var>változó megadás</var><br> <abbr title="world Wide Web">WWW</abbr><br> <acronym title="hypertext Transport Protocol"> HTTP</acronym><br> </body> Barabás Péter Web technológiák 19
BLOCKQUOTE, Q, SUB, SUP BLOCKQUOTE blokk szintű idézet behúzottan jelenik meg DEPRECATED!!! Q sorszintű idézet idézőjelek határolják stíluslappal formázhatóak SUB: subscript: alsóindex SUP: supscript: felsőindex Barabás Péter Web technológiák 20
Sorok és paragrafusok P: paragrafus nyitás új sorban kezdődik nem tartalmazhat blokkszintű elemet nem kell lezárni BR sortörés sortörés megakadályozása: a szavak között Elválasztás: normál: - (- vagy -) lágy: ( vagy ) PRE: előformázott rész: ahogyan a forrásban szerepel úgy jelenik meg Barabás Péter Web technológiák 21
Listák Típusai: Sorszámozott listák (OL) Felsorolások (UL) Definíciók (DL) LI elemek DT, DD elemek <dl> <dt>definíció 1. <dd>1. definíció szövege <dt>definíció 2. <dd>2. definíció szövege <dt>definíció 3. <dd>3. definíció szövege </dl> <ul> <li>sorszámozott listák <li>felsorolások <li>definíciók </ul> <ol> <li>elem <li>elem <li>elem </ol> Barabás Péter Web technológiák 22
Táblázatok tartalom strukturálása, szerkezete, igazítása felirata lehet felolvasók számára előnyös sorok, oszlopok csoportosíthatók cellák normál header label: nem vizuális user agent-ek számára Barabás Péter Web technológiák 23
TABLE elem az összes többi elemet tartalmazza caption, sorok, tartalom, formázás renderelése folyamatos az UA nem várja meg, míg az összes adat megérkezik szerző feladatai: az oszlopok számát definiálni kell az oszlopok szélességét meg kell adni COLGROUP, COL relatív megadásnál a táblázat szélességét kell megadni dir: öröklött summary attribútum a nem vizuális megjelenítők számára Barabás Péter Web technológiák 24
CAPTION, THEAD, TFOOT, TBODY CAPTION: táblázat felirat azonnal a TABLE tag után kell következzen csak egy caption elemet lehet definiálni Strukturálás: scrollozható tartalom ismétlődő fejléc, stb. Elemek: THEAD: fejléc TFOOT: lábléc TBODY: törzs Legalább egy sort kell tartalmazzanak TFOOT a TBODY előtt TBODY nyitótag kötelező kivéve, ha nincs felosztás zárótagek elhagyhatók azonos számú oszlopból kell álljanak <TABLE> <THEAD> <TR>...header information... </TR> </THEAD> <TFOOT> <TR>... information... </TR> </TFOOT> <TBODY> <TR>...first row of block one data... </TR> <TR>...second row of block one data... </TR> </TBODY> <TBODY> <TR>...first row of block two data... </TR> <TR>...second row of block two data... </TR> <TR>...third row of block two data... </TR> </TBODY> </TABLE> Barabás Péter Web technológiák 25
COLGROUP COLGROUP: oszlopcsoportot hoz létre oszlopok száma: span attribútummal (span= 3 ) befoglalt COL elemekkel 1 COL elem = 1 v. több oszlop width attribútum: szélesség <COLGROUP span="40" width="20"> </COLGROUP> <COLGROUP> <COL width="20"> <COL width="20">...a total of forty COL elements... </COLGROUP> <COLGROUP width="20"> <COL span="39"> <COL id="format-me-specially"> </COLGROUP> <TABLE> <COLGROUP span="10" width="50"> <COLGROUP span="5" width="0*"> <THEAD> <TR><TD>... </TABLE> Barabás Péter Web technológiák 26
COL nem csoportosítja az oszlopokat strukturálisan! COLGROUP tartalma üres, csak attribútumait tudjuk állítani egy COLGROUP elemen belül és kívül is szerepelhet Barabás Péter Web technológiák 27
Oszlopok számának meghatározása Két módszer van rá: 1. ha a TABLE elem tartalmaz COLGROUP vagy COL elemet, akkor a UA veszi minden COL elem span attribútum értékét (default: 1) minden COLGROUP elemre, amely tartalmaz legalább egy COL elemet, átugorja a span attribútumot és minden COL elemre elvégzi az előbbi számítást minden üres COLGROUP elemre veszi a span attribútum értékét 2. ha a TABLE elem nem tartalmaz COLGROUP vagy COL elemet, akkor az oszlopok száma = a legtöbb oszlopot tartalmazó sorban szereplő oszlopok száma ennél kevesebb oszlopot tartalmazó sor kiegészül üres cellákkal Barabás Péter Web technológiák 28
Oszlopok szélességének kiszámítása Szélesség definiálható az alábbi módokon: fix szélesség (width= 30 ) százalékos megadás (width= 20% ) arányos (width= 3* ) Nincs szélesség információ incrementális renderelés Ø Példa szélesség számítása: 1.-2. oszlopok szélessége: 30px 3. oszlop minimális szükséges maradék helyet 6 részre osztja 2*+1*+3* = 6 4. oszlop: 2 részt kap 5. oszlop: 1 részt kap 6. oszlop: 3 részt kap <TABLE> <COLGROUP> <COL width="30"> <COLGROUP> <COL width="30"> <COL width="0*"> <COL width="2*"> <COLGROUP align="center"> <COL width="1*"> <COL width="3*" align="char" char=":"> <THEAD> <TR><TD>......rows... </TABLE> Barabás Péter Web technológiák 29
TR, TH, TD TR: sor elem, cellákat tartalmazhat záró tag elhagyható TH: fejléc cella elem félkövéren, középre igazítva jelenik meg felüldefiniálható záró tag nem kötelező TD: normál cella elem záró tag nem kötelező lehet üres rowspan attribútum: sorokat lehet összevonni vele colspan attribútum: oszlopokat lehet összevonni vele <table border="1" width="200" height="200"> <tr> <td>1</td> <td colspan="2">2-3</td> <td>4</td> </tr> <tr> <td rowspan="2">5-9</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>10</td> <td colspan="2" rowspan="2"> 11-12-15-16 </td> </tr> <tr> <td>13</td> <td>14</td> </tr> </table> Barabás Péter Web technológiák 30
Táblázatok formázása Keretek és vonalak a táblázatban a FRAME és a RULES attribútumokkal FRAME= Void : nincsenek oldalak Above : csak a felső oldalon Below : csak az alsó oldalon Hsides : a felső és alsó oldalakon Vsides : a jobb és bal oldalakon Lhs : csak a bal oldalon Rhs : csak a jobb oldalon Box, border : mind a négy oldalon RULES= None: nincsenek vonalak Groups: a vonalak sor- és oszlopcsoportok között jelennek meg Rows: csak sorok között Cols: csak oszlopok között All : a vonalak minden oszlop és sor között megjelennek BORDER=PIXELEK: táblázat keretének vastagsága Barabás Péter Web technológiák 31
Táblázat tartalom igazítása align: vízszintes igazítás Értékek: left, center, right, justify, char valign függőleges igazítás Értékek: top, middle, bottom, baseline char attribútum: tengely karakter, amihez az igazítás történik alapértelmezett érték:. (tizedespont) Barabás Péter Web technológiák 32
Mrgó és kitöltés CELLSPACING a cellák közötti szélességet határozza meg CELLPADDING a cella kerete és a tartalom közötti kitöltést határozza meg Barabás Péter Web technológiák 33
Minta táblázat <TABLE border="2" frame="hsides" rules="groups" summary="code page support in different versions of MS Windows."> <CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR><TH>Code-Page<BR>ID<TH>Name<TH>ACP<TH>OEMCP<TH>Windows<BR>NT 3.1<TH>Windows<BR>NT 3.51<TH>Windows<BR>95 <TBODY> <TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>* <TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X <TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X <TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X <TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X <TBODY> <TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X <TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X <TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X </TABLE> Barabás Péter Web technológiák 34
Minta táblázat II. Barabás Péter Web technológiák 35
Linkek Interaktivitás, hypertext Link: két vég (anchor) forrás (source) cél (destination): web erőforrás (kép, videó, HTML dokumentum, elem, stb.) Alapértelmezett viselkedés: webes erőforrás kinyerés klikkelésre, billenytyű leütésre Barabás Péter Web technológiák 36
A elem kezdő és nyitó tag is kötelező Fontosabb attribútumok: name és/vagy id href charset Tartalma: definiálja a link pozicióját...text before the anchor... <A name="anchor-one">this is the location of anchor one.</a>...text after the anchor... elnevezi a linket, tehát lehet cél vége más linknek name attribútum: href attribútum: forrás kijelölése #anchor-name: hivatkozás horgonyra horgony nevek egyediek case-sensitive linkek egymásba ágyazása tilos For more information about W3C, please consult the <A href="http://www.w3.org/" charset="iso-8859-1">w3c Web site</a>...text before the link... For more information, please consult <A href="./one.html#anchor-one"> anchor one</a>....text after the link... I just returned from vacation! Here's a <A name="anchor-two" href="http://www.somecompany.com/people/family.png"> photo of my family at the lake.</a>. Barabás Péter Web technológiák 37
LINK elem HEAD elemen belül többször is szerepelhet nincs tartalma Típusai (rel, rev): Alternate, Stylesheet Start, Next, Prev, Index Contents, Glossary, Copyright Chapter Section, Subsection, Appendix Help, Bookmark, Forward (rel) és reverse (rev) linkek Információk kereső motoroknak <HEAD> <TITLE>Reference manual</title> <LINK media="print" title="the manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps"> </HEAD> Barabás Péter Web technológiák 38
BASE elem Relatív URI feloldása a dokumentum BASE URI definiálása a HEAD részben kell szerepeljen minden olyan elem előtt, amely külső forrásra hivatkozik <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD> <BODY> <P>Have you seen our <A href="../cages/birds.gif">bird Cages</A>? </BODY> </HTML> <!-- http://www.aviary.com/cages/birds.gif --> Barabás Péter Web technológiák 39
Megjegyzések a HTML-ben <!- Ez itt egy egysoros megjegyzés! -> <!- Ez itt egy többsoros megjegyzés! -> a határoló jelek a '<!--' és '-->' Az ezek közé írt szöveget, a böngésző figyelmen kívül hagyja A dokumentum készítője itt különböző információkat, üzeneteket helyezhet el a maga és a dokumentum forráskódját olvasó személy számára. Barabás Péter Web technológiák 40
Objects, images, applets mulimédia elemek beágyazása általános tag: OBJECT specifikus tag-ek: kép esetén: IMG Java applet esetén: APPLET deprecated! helyette az OBJECT használatos másik HTML dokumentum IFRAME Barabás Péter Web technológiák 41
IMG képek beágyazására <IMG attrlist> kezdő tag: kötelező záró tag: hiányzik attribútumok: <BODY> <P>Here's a photo of my family at the lake: <IMG src="http://www.somecompany.com/family.png" alt="a photo of my family at the lake."> </BODY> <P>Here's a photo of my family at the lake: <OBJECT data="http://www.somecompany.com/family.png" type="image/png"> A photo of my family at the lake. </OBJECT> src: a kép helye (útvonala) alt: (alternate text) ha a kép nem jeleníthető meg longdesc: hosszabb leírás éréke egy URL, ahol a leírás található image map-ek esetén használatos leginkább <IMG src="sitemap.gif" alt="hp Labs Site Map" longdesc="sitemap.html"> Barabás Péter Web technológiák 42
OBJECT Általános objektum beágyazás: <OBJECT> kezdő tag: kötelező záró tag: kötelező Attribútumok: classid=uri objektum implementációjának helyét jelöli ki codebase=uri bázis útvonal kijelölése a relatív hivatkozásokhoz (classid, data, archive) codetype=content-type a tartalom típusát állíthatjuk be vele (classid megadása esetén) data=uri az objektum adatának helyét határozzuk meg vele type=content-type a tartalom típusát állíthatjuk be vele (a data megadása esetén) archive=uri-list URI lista, a szükséges (kapcsolódó) erőforrásokat, objektumokat adhatjuk meg vele, előtöltés! declare az objektumot deklarációnak állítja be, később kell az objektumot példányosítani standby=text az objektum implementációjának és adatának töltésekor megjelenő szöveg Barabás Péter Web technológiák 43
OBJECT II. Szerző által definiálható adatok: beágyazott objektum implementációja pl. futtatható java class renderelendő adat pl. a futtandó program által feldolgozandó adat egyéb értékek, amelyek a futáshoz szükségesek pl. paraméterek inicializáló értékei általában nem definiáljuk mindet HEAD elemben is szerepelhet nincs renderelendő tartalom részletesen a frame-eknél FORM elemekben is szerepelhet részletesen a form-oknál Barabás Péter Web technológiák 44
OBJECT III. Renderelés szabályai az UA megpróbálja feldolgozni az objektumot a tartamát nem dolgozza fel, viszont elemzi, hogy van-e benne pl. PARAM vagy MAP elem ha a UA nem tudja feldolgozni az objektumot megjeleníti a tartalmát <P> <!-- First, try the Python applet --> <OBJECT title="the Earth as seen from space" classid="http://www.observer.mars/theearth.py"> <!-- Else, try the MPEG video --> <OBJECT data="theearth.mpeg" type="application/mpeg"> <!-- Else, try the GIF image --> <OBJECT data="theearth.gif" type="image/gif"> <!-- Else render the text --> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> </OBJECT> </OBJECT> Barabás Péter Web technológiák 45
Objektum inicializálás PARAM Attribútumok: name: a paraméter neve (case-sensitive) value: a paraméter értéke valuetype: a paraméter típusa data: az érték stringként kezeledő (alapért.) ref: az érték egy URI, a paraméter érték helye object: az érték egy objektum azonosító, amely ugyanazon dokumentumon belüli objektumra hivatkozik (id) type: az érték tartalmának típusa (ref esetén) <OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> This user agent cannot render Python applications. </OBJECT> <OBJECT classid="http://www.bit.ly/gifappli" standby="loading Elvis..."> <PARAM name="init_values" value="./images/elvis.gif" valuetype="ref"> </OBJECT> Barabás Péter Web technológiák 46
Globális elnevezési sémák HTML dokumentumok esetén: http:// Objektumok esetén: java: Java applet clsid: ActiveX applet <OBJECT codetype="application/java-archive" classid="java:program.start" codebase=http://foooo.bar.com/java/myimplementation/> </OBJECT> <OBJECT classid="clsid:663c8fef-1ef9-11cf-a3db-080036f12502" data="http://www.acme.com/ole/clock.stm"> This application is not supported. </OBJECT> Barabás Péter Web technológiák 47
Objektum deklaráció, példányosítás Egy dokumentum tartalmazhat egy objektum több példányát is deklaráció és példányosítás szeparálható egyszer kell letölteni és használható minden példányosításnál egy objektum példányosítható tetszőleges helyről (pl. egy linkből) objektumok használhatóak más objektumok paramétereként, adataként futási időben declare attribútum + id hivatkozáskor példányosítódik <P><OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"> </OBJECT>...view the poem in KublaKhan.txt here... <P><OBJECT classid="http://foo.bar.com/poem_viewer" data="kublakhan.txt"> <PARAM name="font" valuetype="object" value="#tribune"> <P>You're missing a really cool poem viewer... </OBJECT> <P><OBJECT declare id="earth.declaration" data="theearth.mpeg" type="application/mpeg"> The <STRONG>Earth</STRONG> as seen from space. </OBJECT>...later in the document... <P>A neat <A href="#earth.declaration"> animation of The Earth!</A> Barabás Péter Web technológiák 48
IMAGE MAP Régiók definiálása egy képen vagy objektumon a régiókhoz specifikus akciók, funkciók definiálása a régió aktiválásakor lefut a definiált akció Image map típusok: kliens oldali: a felhasználó az egérrel a kliens-oldali image map-en aktivál egy régiót a pixel koordinátákat a UA kezeli, kiválasztja a területhez rendelt linket és követi szerver oldali: a felhasználó az egérrel a szerver-oldali image map-en aktivál egy régiót a pixel koordináták a szerverre továbbítódnak href attribútum használata az A elemben a szerver feldolgozza koordinátát és választ generál Barabás Péter Web technológiák 49
Kliens-oldali IMAGE MAP MAP elem kezdő- és zárótag is kötelező attribútumok: name: nevet rendel a térképhez AREA elem kezdőtag: kötelező zárótag: hiányzik attribútumok: shape: a régió alakját definiálja default rect circle poly coords: a régió pozicióját definiálja (relatív koordináták az objektum bal felső sarkához viszonyítva) rect: bal felső sarok (x,y), jobb alsó sarok (x,y) circle: középpont (x,y) és sugár (r) poly: x1,y1, x2,y2, xn,yn nohref: nincs link társítva a régióhoz usemap: image map elemhez rendelése, értéke a MAP neve (name) Barabás Péter Web technológiák 50
Kliens-oldali IMAGE MAP II. Példák <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">access Guide</a> <A href="shortcut.html" shape="rect" coords="118,0,184,28">go</a> <A href="search.html" shape="circle" coords="184,200,60">search</a> <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">top Ten</A> </MAP> </OBJECT> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <P>This is a navigation bar. </OBJECT> <MAP name="map1"> <AREA href="guide.html" alt="access Guide" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="search" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="go" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> </MAP> <P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar"> Barabás Péter Web technológiák 51
Szerver-oldali IMAGE MAP Használat: ha az image map túl bonyolult a kliens-oldali megvalósításhoz IMG és INPUT elemekhez definiálhatjuk IMG esetén: A elemen belül kell lennie ismap attribútumot definiálni kell <P><A href="http://bit.ly/competition"> <IMG src="game.gif" ismap alt="target"></a> INPUT esetén a type értéke image kell legyen a koordináták az URI részeként kerülnek a szerverre pl. ha a user az x=10 és y=27 koordinátára klikkel az URI: http://bit.ly/competition?10,27 Barabás Péter Web technológiák 52
FRAME egy dokumentumban több független dokumentum pl. banner + navigációs menü + fő dokumentum külön frame-ekben <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A simple frameset document</title> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET> <FRAME src="contents_of_frame3.html"> <NOFRAMES> <P>This frameset document contains </NOFRAMES> </FRAMESET> </HTML> Barabás Péter Web technológiák 53
FRAME-es dokumentum Standard dokumentum: HEAD, BODY Frame-es dokumentum: HEAD, FRAMESET BODY helyett FRAMESET DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Barabás Péter Web technológiák 54
FRAMESET a dokumentum elrendezés definiálható vele Attribútumok: rows a vízszintes frame-eket adhatjuk meg vele. értéke: pixel, százalék v. relatív hossz lista alapértelmezetten: 100%, azaz 1 sor cols a függőleges frame-eket adhatjuk meg vele. értéke: pixel, százalék v. relatív hossz lista alapértelmezetten: 100%, azaz 1 oszlop Egymásba ágyazhatóak Barabás Péter Web technológiák 55
Adatok megosztása frame-ek között OBJECT elem a HEAD elemben id attribútum kötelező Bármelyik FRAME hivatkozhat az adott id-jű objektumra <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>This is a frameset with OBJECT in the HEAD</TITLE> <!-- This OBJECT is not rendered! --> <OBJECT id="myobject" data="data.bar"></object> </HEAD> <FRAMESET> <FRAME src="bianca.html" name="bianca"> </FRAMESET> </HTML> <!-- In bianca.html --> <HTML> <HEAD> <TITLE>Bianca's page</title> </HEAD> <BODY>...the beginning of the document... <SCRIPT type="text/javascript"> parent.myobject.myproperty </SCRIPT>...the rest of the document... </BODY> </HTML> Barabás Péter Web technológiák 56
FRAME elem A tartalmat és megjelenést definiálhatjuk vele Attribútumok: name: a frame neve, target értékként használható longdesc: hosszabb leírása (URI) src: a kezdeti tartalom URI-ja noresize: a frame nem mértezhető át scrolling: scrollbar legyen-e (auto yes no) framborder: keret a frame-ek között legyen-e (0 1) marginwidth: a jobb és bal oldali margót állítja marginheight: a fenti és lenti margót állítja Barabás Péter Web technológiák 57
Target frame target attribútum definiálja, hogy hol nyíljon meg a dokumentum A, LINK, AREA, FORM elemeknél <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</title> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <HTML> <HEAD> <TITLE>A document with anchors with specific targets</title> </HEAD> <BODY>...beginning of the document... <P>Now you may advance to <A href="slide2.html" target="dynamic">slide 2.</A>...more document... <P>You're doing great. Now on to <A href="slide3.html" target="dynamic">slide 3.</A> </BODY> </HTML> Barabás Péter Web technológiák 58
NOFRAMES Alternatív tartalom ha a böngésző nem támogatja a frame-eket a böngésző a <NOFRAMES> </NOFRAMES> tagpár közötti tartalmat jeleníti meg Barabás Péter Web technológiák 59
IFRAME Inline frame frame beszúrása a dokumentumba egy tetszőleges szöveges szekcióba Attribútumok: src: a tartalom forrása name: a frame neve width: a frame szélessége height: a frame magassága egyéb frame attribútumok <IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [Your user agent does not support frames or is currently configured not to display frames. However, you may visit <A href="foo.html">the related document. </A>] </IFRAME> Barabás Péter Web technológiák 60
Űrlapok (FORMS) Űrlapok: tartalma: vezérlők (control) + címkék (label) <FORM action="http://somesite.com/prog/adduser" method="post"> <P> <LABEL for="firstname">first name: </LABEL> <INPUT type="text" id="firstname"><br> <LABEL for="lastname">last name: </LABEL> <INPUT type="text" id="lastname"><br> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><br> <INPUT type="radio" name="sex" value="male"> Male<BR> <INPUT type="radio" name="sex" value="female"> Female<BR> <INPUT type="submit" value="send"> <INPUT type="reset"> </P> </FORM> Barabás Péter Web technológiák 61
Vezérlők (controls) Az űrlapokkal történő kommunikáció eszközei Jellemzők: neve: name attribútum tartalmazza kezdő érték: value attribútummal adhatjuk meg nem változik reset során a vezérlő felveszi a kezdő értéket aktuális érték: kezdetben egyenlő a kezdő értékkel később a user v. a scriptek módosíthatják Barabás Péter Web technológiák 62
Vezérlő típusok Gombok submit, reset, push Jelölőnégyzetek input (type=checkbox) Választógombok input (type=radio) Menük select, optgroup, option Szövegbeviteli mezők input (type=text), textarea File választó input (type=file) Rejtett vezérők input (type=hidden) Objektum vezérlők object Barabás Péter Web technológiák 63
FORM elem Vezérlő elemek konténere Kezdőtag, zárótag: kötelező Attribútumok: action az űrlap feldolgozó URI-ja method (get post) <FORM action=http://somesite.com/prog/adduser method="post">...form contents... </FORM> az űrlapadatok továbbítására alkalmazott HTTP metódus enctype az űrlap továbbítása során alkalmazott tartalom típus default: application/x-www-form-urlencoded accept a form feldolgozás során elfogadott tartalom típusok listája (pl. file filter esetén) accept-charset a szerver által alkalmazandó karakterkódolás lista Barabás Péter Web technológiák 64
INPUT elem Kezdőtag: kötelező, zárótag: hiányzik Attribútumok: type: a vezérlő típusa text, password, checkbox, radio, submit, reset, file, hidden, image, button value: a vezérlő kezdő értéke size: a vezérlő mértet pixelben kivéve text v. password elemeknél (karakterek száma) maxlength: text v. password elemeknél a max. karakter szám checked: radio v. checkbox elemeknél src: image esetén a kép helye Barabás Péter Web technológiák 65
TEXTBOX egysoros beviteli mező Attribútumok: size: karakterek száma maxlength: karakterek max hossz submit során: name=érték formában kerül a tartalom elküldésre Minta beviteli mező: <INPUT TYPE= text NAME= szoveg VALUE= kezdő érték SIZE= 20 MAXLENGTH= 50 > Barabás Péter Web technológiák 66
PASSWORD jelszavak bevitelére használható jelszavak rejtettek (******) VIGYÁZAT!!! a jelszó kódolatlanul küldődik a szerverre név=érték párként csak a közvetlen megfigyelő ellen nyújt védelmet Jelszó: <INPUT TYPE= password NAME= jelszo SIZE= 16 > Barabás Péter Web technológiák 67
CHECKBOX jelölő négyzet a user be tudja pipálni, vagy vissza (on/off) checked attribútummal bepipálható a vezérlő csak a bejelölt vezérlő kerül elküldésre a szerverre név=on formában, ha a value nem definiált név=érték formában, ha a value definiált <INPUT TYPE="checkbox" NAME="hobbi" VALUE="sport">sport <INPUT TYPE="checkbox" NAME="hobbi" VALUE="film">film <INPUT TYPE="checkbox" NAME="hobbi" VALUE="zene">zene Barabás Péter Web technológiák 68
RADIO BUTTON választógomb a user be tudja jelölni a jelölés egy másik gombra kattintással szüntethető meg gombcsoport: csak egy gomb lehet aktív ugyanazon névvel kell rendelkezzenek checked attribútummal bejelölhető a vezérlő csak a bejelölt vezérlő kerül elküldésre a szerverre név=on formában, ha a value nem definiált név=érték formában, ha a value definiált <INPUT TYPE="radio" NAME="hobbi" VALUE="sport">sport <INPUT TYPE="radio" NAME="hobbi" VALUE="film">film <INPUT TYPE="radio" NAME="hobbi" VALUE="zene">zene Barabás Péter Web technológiák 69
SUBMIT és RESET gomb SUBMIT a form adatait elküldi a feldolgozónak egy form több submit gombot is tartalmazhat értéke elküldődik: név=érték formában ha a name attribútum definiált GET esetén feldogozó-script?név=érték&név=érték POST esetén név=érték&név=érték a kérés törzsben RESET a form vezérlők értékeit induló értékre állítja <INPUT type="submit" value="send" name="kuld"> <INPUT type="reset"> Barabás Péter Web technológiák 70
IMAGE input elem képet tartalmazó submit gomb src attribútum: kép helye alt szöveg: ha a kép nem megjeleníthető az egér koordináták is elküldődnek a szerverre név.x=x-koordináta&név.y=y-koordináta formában ha nem definiált a name attribútum x=x-koordináta&y=y-koordináta formában <INPUT type="image" src="new_data.jpg" name="kep"> URL a kattintás után: feldolgozó-script?kep.x=13&kep.y=12 Barabás Péter Web technológiák 71
BUTTON input elem nincs alapértelmezett viselkedése kliens-oldali scriptet kell társítani hozzá onxxx eseménykezelők amikor az esemény bekövetkezik, a script lefut Másik alternatíva: BUTTON elem type: submit, reset, button gazdagabb renderelési opciók (tartalma miatt) <INPUT type="button" value="push button" name="push"> Barabás Péter Web technológiák 72
HIDDEN vezérlő nem látszik a felületen értéke elküldésre kerül (név=érték) Használat: információ tárolás a kliens-szerver információcseréhez HTTP állapotmentesség miatt <INPUT type="hidden" value="rejett érték" name="rejtett"> Barabás Péter Web technológiák 73
FILE input elem fájl feltöltéskor használható fájl választót hoz létre a dokumentumban név=választott fájl neve küldődik el <INPUT type="file" name="allomany"> Barabás Péter Web technológiák 74
SELECT, OPTGROUP, OPTION SELECT: egy választó menüt hoz létre name: a menü neve size: az egyszerre megjelenítendő sorok száma multiple: többszörös kiválasztást engedélyez OPTION: menüelemek definiálása selected: menüelem előre kiválasztása value: kezdőérték beállítására OPTGROUP: a menüelemek csoportosítása label attribútum: a csoport cimkéje Elküldendő adatok: a kiválasztott menüelemek select-név=érték v. select-név=tartalom formában Barabás Péter Web technológiák 75
SELECT, OPTGROUP, OPTION II. Példa <SELECT multiple size="4" name="component-select"> <OPTION selected value="component_1_a">component_1</option> <OPTION selected value="component_1_b">component_2</option> <OPTION label="c2">component_3</option> <OPTION>Component_4</OPTION> <OPTION>Component_5</OPTION> <OPTION>Component_6</OPTION> <OPTION>Component_7</OPTION> </SELECT> Barabás Péter Web technológiák 76
SELECT, OPTGROUP, OPTION III. Példa <SELECT name="comos"> <OPTION selected label="none" value="none">none</option> <OPTGROUP label="portmaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1">portmaster 3 with ComOS 3.7.1</OPTION> <OPTION label="3.7" value="pm3_3.7">portmaster 3 with ComOS 3.7</OPTION> <OPTION label="3.5" value="pm3_3.5">portmaster 3 with ComOS 3.5</OPTION> </OPTGROUP> <OPTGROUP label="portmaster 2"> <OPTION label="3.7" value="pm2_3.7">portmaster 2 with ComOS 3.7</OPTION> <OPTION label="3.5" value="pm2_3.5">portmaster 2 with ComOS 3.5</OPTION> </OPTGROUP> <OPTGROUP label="irx"> <OPTION label="3.7r" value="irx_3.7r">irx with ComOS 3.7R</OPTION> <OPTION label="3.5r" value="irx_3.5r">irx with ComOS 3.5R</OPTION> </OPTGROUP> </SELECT> Barabás Péter Web technológiák 77
TEXTAREA többsoros beviteli mező Kezdőtag, zárótag: kötelező Attribútumok: rows: látható sorok száma cols: látható oszlopok (karakter darabszám) száma scrollozható readonly: nem módosítható tartalom <TEXTAREA name="thetext" rows="20" cols="80"> First line of initial text. Second line of initial text. </TEXTAREA> Barabás Péter Web technológiák 78
LABEL elem azokhoz a vezérlőkhöz rendelhető, melyeknek nincs alapértelmezetten címkéjük Kezdő-, zárótag: kötelező Attribútum: for: a kapcsolódó vezérlő ID-je <FORM action="http://somesite.com/prog/adduser" method="post"> <P> <LABEL for="firstname">first name: </LABEL> <INPUT type="text" id="firstname"><br> <LABEL for="lastname">last name: </LABEL> <INPUT type="text" id="lastname"><br> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><br> <INPUT type="radio" name="sex" value="male"> Male<BR> <INPUT type="radio" name="sex" value="female"> Female<BR> <INPUT type="submit" value="send"> <INPUT type="reset"> </P> </FORM> Barabás Péter Web technológiák 79