Web technológiák. Barabás Péter, Általános Informatikai Tanszék, Miskolci Egyetem. Barabás Péter Web technológiák 1

Méret: px
Mutatás kezdődik a ... oldaltól:

Download "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írás

1 Web technológiák Barabás Péter, Általános Informatikai Tanszék, Miskolci Egyetem Barabás Péter Web technológiák 1

2 Témakörök 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

3 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

4 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

5 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 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

6 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

7 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

8 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

9 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 :25:27 GMT"> Barabás Péter Web technológiák 9

10 HEAD II. Content-Type <META http-equiv="content-type" content="text/html; charset=iso "> Expires <META http-equiv="expires" content="tue, 20 Aug :25:27 GMT"> HTTP header-ben: Expires: Tue, 20 Aug :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=" t08:49:37+00:00"> Barabás Péter Web technológiák 10

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 Szövegek Fehér karakterek ( white spaces ) ASCII space ( ) ASCII tab ( ) ASCII form feed (&#x000c;) 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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: 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

30 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"> </td> </tr> <tr> <td>13</td> <td>14</td> </tr> </table> Barabás Péter Web technológiák 30

31 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

32 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

33 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

34 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

35 Minta táblázat II. Barabás Péter Web technológiák 35

36 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

37 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 ">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

38 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

39 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> <!-- --> Barabás Péter Web technológiák 39

40 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

41 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

42 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

43 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

44 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

45 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

46 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

47 Globális elnevezési sémák HTML dokumentumok esetén: 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 f12502" data="http://www.acme.com/ole/clock.stm"> This application is not supported. </OBJECT> Barabás Péter Web technológiák 47

48 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

49 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

50 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

51 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

52 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: Barabás Péter Web technológiák 52

53 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

54 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

55 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

56 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

57 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

58 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

59 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

60 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

61 Ű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=" "> </LABEL> <INPUT type="text" id=" "><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

62 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

63 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

64 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

65 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

66 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

67 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

68 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

69 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

70 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

71 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

72 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

73 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

74 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

75 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

76 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

77 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

78 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

79 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=" "> </LABEL> <INPUT type="text" id=" "><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

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 formok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!

Részletesebben

Internet technológiák

Internet technológiák Szabadkai Műszaki Szakfőiskola Internet technológiák dr Zlatko Čović chole@vts.su.ac.rs 1 XHTML űrlapok 2 XHTML űrlapok Minden űrlap jelölőelem a: form{action, enctype, method} Űrlaptartalom /form jelölőelem

Részletesebben

HTML alapok 1. Minimális HTML file: cím ... Formátum parancsok:

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok: HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal

Részletesebben

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

Webprogramozás HTML alapok 2. 3. előadás

Webprogramozás HTML alapok 2. 3. előadás Webprogramozás HTML alapok 2. 3. előadás Hivatkozások - linkek Link: más webes tartalomra történő irányítás Hivatkozások - linkek abszolút hivatkozás fizika kar weboldala

Részletesebben

WEB TECHNOLÓGIÁK 2.ELŐADÁS

WEB TECHNOLÓGIÁK 2.ELŐADÁS Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 2.ELŐADÁS 2014-2015 tavasz A HTML nyelv alapjai Mi a HTML? A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró nyelv,

Részletesebben

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt

Részletesebben

Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz)

Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) HTML (Hyper Text Markup Language)...2 A HTML dokumentumokról...2 Néhány

Részletesebben

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik

Részletesebben

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 alapok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!

Részletesebben

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML Széchenyi István Egyetem Műszaki Tudományi Kar Informatikai és Villamosmérnöki Intézet Távközlési Tanszék Villamosmérnöki szak HTML HTML segédlet számítógép hálózatok tárgy gyakorlatához A jegyzet teljes

Részletesebben

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek

Részletesebben

Képek a HTML oldalon

Képek a HTML oldalon Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép

Részletesebben

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt. Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a

Részletesebben

TEXTAREA++ a JavaScript ereje

TEXTAREA++ a JavaScript ereje TEXTAREA++ a JavaScript ereje Bártházi András email: andras@barthazi.hu web: http://barthazi.hu tevékenységek: Weblabor szerkesztő NJSZT-WFSZ titkár stb. :) Fejlődő web A JavaScript a reneszánszát éli

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

HTML, Javascript és az objektumok

HTML, Javascript és az objektumok Javascript referencia Bevezetés A Javascript egy HTML fájlokba tervezett objektum-orientált nyelv. Alapjai a C és C++ nyelvek, így ezekre sokban hasonlít. Ez a dokumentum egy gyors összefoglaló a nyelvrõl,

Részletesebben

Webshop készítése ASP.NET 3.5 ben I.

Webshop készítése ASP.NET 3.5 ben I. Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)

Részletesebben

A Http és a PHP kapcsolata. Web-Sky Consulting Kft Tóth Imre 2009

A Http és a PHP kapcsolata. Web-Sky Consulting Kft Tóth Imre 2009 A Http és a PHP kapcsolata Web-Sky Consulting Kft Tóth Imre 2009 Előadások címei 1. PHP nyelv alapjai 2. Objektumorientáltság a PHP-ben 3. A Http és a PHP kapcsolata 4. Adatbázis kezelés a PHP-ben 5. MVC

Részletesebben

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők Web alapok Az Internet, számítógépes hálózatok világhálózata, amely behálózza az egész földet. Az internet főbb szolgáltatásai: web (www, alapja a kliens/szerver modell) elektronikus levelezés (e-mail)

Részletesebben

2008/09 ősz 1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás Alapfogalmak

Részletesebben

Weblap készítése. Fapados módszer

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal

Részletesebben

WAP. A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa.

WAP. A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa. WAP A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa. A WAP lehetővé tette, hogy a mobiltelefon tulajdonosok

Részletesebben

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:

Részletesebben

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width

Részletesebben

1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom

1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom 1. A HTML leíró nyelv 2. Stíluslapok - CSS 3. HTML sablonok Tartalom 1. A HTML leíró nyelv...1 2. Stíluslapok - CSS...1 3. HTML sablonok...1 1. A HTML megjelenítő nyelv...3 1.1. Bevezető...3 1.1.1. HTML

Részletesebben

A HTML nyelv alapjai

A HTML nyelv alapjai A HTML nyelv alapjai Legalább mit kell ismernie egy webprogamozónak? Weblap tartalmának, szerkezetének kialakítása: HTML (HyperText Markup Language) Weblap formázása: CSS (Cascading Style Sheets) Kliensoldali

Részletesebben

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20.

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. XML Sass Bálint sass@digitus.itk.ppke.hu Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML DOKUMENTUMFORMÁTUMOK

Részletesebben

JavaServer Pages (JSP) (folytatás)

JavaServer Pages (JSP) (folytatás) JavaServer Pages (JSP) (folytatás) MVC architektúra a Java kiszolgálón Ügyfél (Böngésző) 5 View elküldi az oldal az ügyfélez View (JSP) Ügyfél üzenet küldése a vezérlőnek 1 3 4 Kérelem továbbítása a megjelenítőnek

Részletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

Környezeti változók, űrlapok kezelése

Környezeti változók, űrlapok kezelése Környezeti változók, űrlapok kezelése Környezeti változók, űrlapok kezelése...1 Az állapot nélküli (stateless) hálózati alkalmazások jellegzetességei...1 Környezeti változók...2 A PHP előre definiált változói...2

Részletesebben

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik Honlapkészítés 1. Előadás Bevezető, HTML Paksy Patrik Miből áll össze egy honlap? Oldal szerkezete Grafika Tartalom Tervezzünk 800*600-as / 1024*768-as képfelbontásra! Ezek a ma használt legkisebb méretek!

Részletesebben

Bevezetés Működési elv AJAX keretrendszerek AJAX

Bevezetés Működési elv AJAX keretrendszerek AJAX AJAX Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek

Részletesebben

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK HTML ALAPOK Abonyi-Tóth Andor, ELTE IK Fontos szabványok HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

Web Technológiák. Répási Tibor egyetemi tanársegéd. Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM)

Web Technológiák. Répási Tibor egyetemi tanársegéd. Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2108 Mai

Részletesebben

Mester Gyula 2003 Internet

Mester Gyula 2003 Internet Internet Windows környezetben A HTML nyelv alapjai Kliensoldali programozás Szerveroldali programozás XML WAP Bevezetés Alapfogalmak Az Internet főbb szolgáltatásai Windows környezetben 1.1. Bevezetés

Részletesebben

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok HTML Ismerkedés a JavaScripttel webprogramozó A weblapokat HTML nyelven készíthetjük el. A HTML egyszer leírónyelv, nem alkalmas válaszolni a felhasználóknak, nem tud döntéseket hozni, nem tud végrehajtani

Részletesebben

Kövér betűk (bold) 1-es fejléc

Kövér betűk (bold) 1-es fejléc A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek

Részletesebben

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 2 Ismétlés Ismétlés 3 Fájl/Adatbázis 3 4 Szerver 2 CGI

Részletesebben

< WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás

< WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás < WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás Tartalomjegyzék Üdvözlet, olvasó! 03 Internetes ismeretterjesztő 04 Nettöri röviden 05 Szerveroldali programok 06 Kliensoldali programok 07 Tartalmi

Részletesebben

1. Gyakorlat: Telepítés: Windows Server 2008 R2 Enterprise, Core, Windows 7

1. Gyakorlat: Telepítés: Windows Server 2008 R2 Enterprise, Core, Windows 7 1. Gyakorlat: Telepítés: Windows Server 2008 R2 Enterprise, Core, Windows 7 1.1. Új virtuális gép és Windows Server 2008 R2 Enterprise alap lemez létrehozása 1.2. A differenciális lemezek és a két új virtuális

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával A Microsoft OFFICE EXCEL táblázatkezelő program alapjai 2013-as verzió használatával A Microsoft Office programcsomag táblázatkezelő alkalmazása az EXCEL! Aktív táblázatok készítésére használjuk! Képletekkel,

Részletesebben

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Tartalomjegyzék 1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Géptől gépig... 11 Számok a gépeknek... 13 Nevek az embereknek... 14 Programok egymás

Részletesebben

ECDL Webszerkesztés, syllabus 2.0

ECDL Webszerkesztés, syllabus 2.0 2014 ECDL Foundation (ECDL-F) és Neumann János Számítógép-tudományi Társaság (NJSZT) Minden jog fenntartva. Jelen kiadványt, ill. annak részeit tilos reprodukálni, bármilyen formában vagy eszközzel közölni

Részletesebben

Az MS Word szövegszerkesztés modul részletes tematika listája

Az MS Word szövegszerkesztés modul részletes tematika listája Az MS Word szövegszerkesztés modul részletes tematika listája A szövegszerkesztés alapjai Karakter- és bekezdésformázás Az oldalbeállítás és a nyomtatás Tabulátorok és hasábok A felsorolás és a sorszámozás

Részletesebben

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt> 1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen

Részletesebben

Webes űrlapok és az XForms ajánlás

Webes űrlapok és az XForms ajánlás Debreceni Egyetem Informatikai Kar Webes űrlapok és az XForms ajánlás Témavezető: Dr. Adamkó Attila egyetemi adjunktus Készítette: Hetei György programtervező Informatikus Debrecen 2010 Bevezetés 3 A HTML

Részletesebben

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 hang videó gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add

Részletesebben

A Java nyelv. Dialógus ablakok. Elek Tibor

A Java nyelv. Dialógus ablakok. Elek Tibor A Java nyelv Dialógus ablakok Elek Tibor Dialógus ablakok Szerepe: felbukkanó ablak (üzenet, input) Felépítése, használata majdnem ua., mint JFrame Tulajdonos: lehet tulajdonosa, amellyel együtt ikonizálódik,

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

Java Server Pages - JSP. Web Technológiák. Java Server Pages - JSP. JSP lapok életciklusa

Java Server Pages - JSP. Web Technológiák. Java Server Pages - JSP. JSP lapok életciklusa Web Technológiák Java Server Pages - JSP Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101

Részletesebben

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/

Részletesebben

Web-fejlesztés NGM_IN002_1

Web-fejlesztés NGM_IN002_1 Web-fejlesztés NGM_IN002_1 Szindikálás, aggregálás - RSS, Atom Tartalom betáplálás Gyakran frissül! webszájtok Új felhasználói igények el!fizetési igény az új tartalomra a tartalom újrafelhasználása eltér!

Részletesebben

5-ös lottó játék. Felhasználói dokumentáció

5-ös lottó játék. Felhasználói dokumentáció 5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az

Részletesebben

Elektronikus levelek. Az informatikai biztonság alapjai II.

Elektronikus levelek. Az informatikai biztonság alapjai II. Elektronikus levelek Az informatikai biztonság alapjai II. Készítette: Póserné Oláh Valéria poserne.valeria@nik.bmf.hu Miről lesz szó? Elektronikus levelek felépítése egyszerű szövegű levél felépítése

Részletesebben

7. Előadás. Makrók alkalmazása. Salamon Júlia. Előadás I. éves mérnök hallgatók számára

7. Előadás. Makrók alkalmazása. Salamon Júlia. Előadás I. éves mérnök hallgatók számára 7. Előadás Makrók alkalmazása. Salamon Júlia Előadás I. éves mérnök hallgatók számára Feltételes ciklusok Ha a ciklusváltozó intervallumát, előre nem tudjuk mert például a program futása során megszerzett

Részletesebben

Szövegszerkesztés alapok WORD Formázások

Szövegszerkesztés alapok WORD Formázások Szövegszerkesztés alapok WORD Formázások A formázás sorrendje 1. Begépelem a szöveget folyamatosan 2. Helyesírást ellenőrzök 3. Entert (bekezdés) vagy Shift + Entert ütök 4. Formázok KIJELÖLÖM A FORMÁZANDÓ

Részletesebben

Kompozit alkalmazások fejlesztése. IBM WebSphere Portal Server

Kompozit alkalmazások fejlesztése. IBM WebSphere Portal Server Kompozit alkalmazások fejlesztése IBM WebSphere Portal Server Portletek -összefoglaló Portlet: portálba integrálható kisalkalmazás Szabványok JSR 168 Portlet 1.0 (IBM API) JSR 286 Portlet 2.0 Dióhéjban

Részletesebben

Memória játék. Felhasználói dokumentáció

Memória játék. Felhasználói dokumentáció Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.

Részletesebben

SQL*Plus. Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP (dolgozó), DEPT (osztály) "közönséges" felhasználók

SQL*Plus. Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP (dolgozó), DEPT (osztály) közönséges felhasználók SQL*Plus Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP dolgozó), DEPT osztály) "közönséges" felhasználók Adatszótár: metaadatokat tartalmazó, csak olvasható táblák táblanév-prefixek:

Részletesebben

4. modul HTML ÉS TARTALOMFELTÖLTÉS 2009.

4. modul HTML ÉS TARTALOMFELTÖLTÉS 2009. I N F O R M A T I K A ALAP 4. modul HTML ÉS TARTALOMFELTÖLTÉS 2009. Copyright MaggaM Kft. 2009 Minden jog fenntartva Tartalomjegyzék: HTML alapok... 4 A HTML nyelv története... 5 A HTML nyelv szerkezete...

Részletesebben

Adatbázis-kezelés ODBC driverrel

Adatbázis-kezelés ODBC driverrel ADATBÁZIS-KEZELÉS ODBC DRIVERREL... 1 ODBC: OPEN DATABASE CONNECTIVITY (NYÍLT ADATBÁZIS KAPCSOLÁS)... 1 AZ ODBC FELÉPÍTÉSE... 2 ADATBÁZIS REGISZTRÁCIÓ... 2 PROJEKT LÉTREHOZÁSA... 3 A GENERÁLT PROJEKT FELÉPÍTÉSE...

Részletesebben

1. Kommunikáció és a Web szerverek. 2. A HTML szerkesztés alapjai. 3. A lap környezete

1. Kommunikáció és a Web szerverek. 2. A HTML szerkesztés alapjai. 3. A lap környezete 1. Kommunikáció és a Web szerverek A WWW kommunikációját a HTTP (HyperText Transfer ProtocolI) kommunikációs protokoll valósítja meg. A kliens-szerver rendszerek esetében a felhasználói igényeket a kliens

Részletesebben

Akadálymentes weboldalkészítés dióhéjban

Akadálymentes weboldalkészítés dióhéjban Akadálymentes weboldalkészítés dióhéjban Készítette: Mezei Ádám Info-kommunikációs Akadálymentességi Műhelykonferencia 2008. november 20 Mi az oka, hogy NEM akadálymentes honlapokat készítünk? 1) Nem gondolunk

Részletesebben

Programozás és adatbázis kezelés PHP ben

Programozás és adatbázis kezelés PHP ben Programozás és adatbázis kezelés PHP ben Készítette: Pető László I. A programozási környezet A PHP platformfüggetlen programozási nyelv. A szkriptek futtatása szerveroldalon történik. Ezt a szerepet leggyakrabban

Részletesebben

Web programozás I. 4. előadás

Web programozás I. 4. előadás Web programozás I. 4. előadás CSS Pozícionálás http://www.brainjar.com/css/positioning/def ault.asp Design kialakívása http://www.albinoblacksheep.com/livedesign/ http://www.dynamicdrive.com/style/ http://www.opendesigns.org/

Részletesebben

Internetes böngésző fejlesztése a mobil OO világban

Internetes böngésző fejlesztése a mobil OO világban Internetes böngésző fejlesztése a mobil OO világban Novák György és Pári Csaba Témavezető: Bátfai Norbert Debreceni Egyetem Matematikai és Informatikai Intézet Kitűzött cél A PC-s világban megszokotthoz

Részletesebben

DAT adatcserefájl AutoCAD MAP DWG mapobject konvertáló program dokumentáció

DAT adatcserefájl AutoCAD MAP DWG mapobject konvertáló program dokumentáció H - 1161 Budapest Rákóczi út 76. Tel./Fax.: +36-1-4010159 http://www.pageos.hu toni@pageos.hu DAT adatcserefájl AutoCAD MAP DWG mapobject konvertáló program dokumentáció A program használható a TOPOBASE

Részletesebben

NeoCMS tartalommenedzselő szoftver leírása

NeoCMS tartalommenedzselő szoftver leírása NeoCMS tartalommenedzselő szoftver leírása A NeoSoft Informatika NeoCMS márkanévvel ellátott rendszere könnyen, gyorsan testre szabható tartalommenedzselő rendszer, mely egyedileg átalakítható, és így

Részletesebben

Rohonczy János: World Wide Web - Világháló

Rohonczy János: World Wide Web - Világháló Rohonczy János: World Wide Web - Világháló Rohonczy János (ELTE) 2005. v.1.0 1 IP cím (4 byte-os) Pl.: 157.181.192.88 hálózatazonosító (cím osztályok).állomásazonosító A osztály 0.0.0.0-127.255.255.255

Részletesebben

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam Operáció rendszer ECDL tanfolyam Alapok A Windows áttekintése Asztal Tálca Start menü Lomtár használata Súgó használata Felhasználói fiókok kezelése Kijelentkezés, felhasználóváltás Fájlok és mappák Sajátgép

Részletesebben

Gazdasági informatika

Gazdasági informatika Gazdasági informatika Nyugat-Magyarországi Egyetem Faipari Mérnöki Kar Informatikai és Gazdasági Intézet Soós Sándor 2007. november 22-23. Internet - HTML Gazdasági informatika I. Soós Sándor 1 Napjaink

Részletesebben

4. Gyakorlat: Csoportházirend beállítások

4. Gyakorlat: Csoportházirend beállítások 4. Gyakorlat: Csoportházirend beállítások 4.1. A Default Domain Policy jelszóra vonatkozó beállításai 4.2. Parancsikon, mappa és hálózati meghajtó megjelenítése csoport házirend segítségével 4.3. Alkalmazások

Részletesebben

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31 Web programozás 2011 2012 1 / 31 Áttekintés Mi a web? / A web rövid története Kliens szerver architektúra Néhány alapfogalom Kliens- illetve szerver oldali technológiák áttekintése Miről lesz szó... (kurzus/labor/vizsga)

Részletesebben

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok Oktatási segédanyag Weboldalszerkesztési gyakorlatok Bevezetés A korábbi oktatási segédanyagokban megismertük a weboldalszerkesztés gyakorlatát. Ennek a segédanyagnak a célja, hogy gyakorlati példákon

Részletesebben

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára A HONALPSZERKESZTÉS ALAPJAI 50 feladat a Debreceni Egyetem Informatikai Karának Informatikus Könyvtáros szakos hallgatói számára Készítette: Jávorszky Ferenc Debrecen 2010. 1 1. Készítsen honlapot, amelynek

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán

Részletesebben

Ozeki Weboffice. 1. ábra

Ozeki Weboffice. 1. ábra Ozeki Weboffice 1. A program indítása Először vegyük fel a szerkesztendő web oldalt az Edit your Website listába. A piros nyíllal jelölt mezőbe írjuk be a weboldal nevét, majd az OK gombbal érvényesítsük

Részletesebben

Web programozás I. tantárgyi információk

Web programozás I. tantárgyi információk Web programozás I. tantárgyi információk Nagy Gusztáv honlap: http://nagygusztav.hu jegyzet e-mail: nagy.gusztav@gamf.kefo.hu tantárgy honlapja: http://webprog.hu/ tantárgyi hírek (nem ETR kurzusfórum!)

Részletesebben

ECDL Információ és kommunikáció

ECDL Információ és kommunikáció 1. rész: Információ 7.1 Az internet 7.1.1 Fogalmak és szakkifejezések 7.1.2 Biztonsági megfontolások 7.1.3 Első lépések a webböngésző használatában 7.1.4 A beállítások elévégzése 7.1.1.1 Az internet és

Részletesebben

Tartalomjegyzék 2. RENDSZER FELÉPÍTÉSE... 3

Tartalomjegyzék 2. RENDSZER FELÉPÍTÉSE... 3 Tartalomjegyzék 1. BEVEZETŐ... 2 2. RENDSZER FELÉPÍTÉSE... 3 2.1. FELÜLET... 3 2.2. FELHASZNÁLÓI FUNKCIÓK... 4 2.2.1. Modulok... 4 2.2.2. Előzmények... 4 2.2.3. Lekérdezés működése, beállítások... 5 2.2.4.

Részletesebben

Témák. Bevezetés az informatikába 7. Előadás. Szövegfile-ok típusai. Szövegszerkesztők típusai. Mértékegységek. Szövegszerkesztők szolgáltatásai

Témák. Bevezetés az informatikába 7. Előadás. Szövegfile-ok típusai. Szövegszerkesztők típusai. Mértékegységek. Szövegszerkesztők szolgáltatásai Bevezetés az informatikába 7. Előadás Számítógépes dokumentumkészítés I Témák Szövegfile-ok típusai Szövegszerkesztők típusai Szövegszerkesztők szolgáltatásai Microsoft Word szövegszerkesztők Szövegfile-ok

Részletesebben

WEBFEJLESZTÉS 2. MUNKAMENET-KEZELÉS, HITELESÍTÉS

WEBFEJLESZTÉS 2. MUNKAMENET-KEZELÉS, HITELESÍTÉS WEBFEJLESZTÉS 2. MUNKAMENET-KEZELÉS, HITELESÍTÉS Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 PHP beadandó 2 Honlapról elérhető Labirintus-játék

Részletesebben

forrás: www.oktatovideok.hu Web és PHP leckék

forrás: www.oktatovideok.hu Web és PHP leckék forrás: www.oktatovideok.hu Web és PHP leckék Tartalomjegyzék HTML alapok... 3 HTML űrlapok... 9 JavaScript alapok... 12 Apache PHP - MySQL... 16 PHP alapok... 21 Űrlapok feldolgozása PHP-vel... 26 Adatbázis

Részletesebben

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL http://bit.ly/a1lhps Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 372-2500/8466 http://abonyita.inf.elte.hu

Részletesebben

Fejlett programozási nyelvek C++ Iterátorok

Fejlett programozási nyelvek C++ Iterátorok Fejlett programozási nyelvek C++ Iterátorok 10. előadás Antal Margit 2009 slide 1 Témakörök I. Bevezetés II. Iterátor definíció III. Iterátorok jellemzői IV. Iterátorkategóriák V. Iterátor adapterek slide

Részletesebben

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010.

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. május 1. BEVEZETÉS Az útmutató célja az Országos Területrendezési

Részletesebben

PHP-MySQL. Adatbázisok gyakorlat

PHP-MySQL. Adatbázisok gyakorlat PHP-MySQL Adatbázisok gyakorlat Weboldalak és adatbázisok Az eddigiek során megismertük, hogyan lehet a PHP segítségével dinamikus weblapokat készíteni. A dinamikus weboldalak az esetek többségében valamilyen

Részletesebben

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat. A feladat megoldásához a Sharepoint Designer 2007 programot használjuk, mely ingyenesen letölthető a Microsoft weboldaláról. Az érettségi aktuális szoftverlistája alapján az Expression Web 2, az Expression

Részletesebben

ELTE SAP Excellence Center Oktatóanyag 1

ELTE SAP Excellence Center Oktatóanyag 1 ELTE SAP Excellence Center Oktatóanyag 1 ELTE SAP Excellence Center Oktatóanyag 2 ELTE SAP Excellence Center Oktatóanyag 3 A felhasználók három különböző képernyővel találkoznak Listák az adatmegjelenítéshez

Részletesebben

Szerver oldali Java programozás 2007-08/II. 1. óra. Elemkönyvtárak. Elemkönyvtárak használata Saját elemkönyvtár készítése. szenasi.sandor@nik.bmf.

Szerver oldali Java programozás 2007-08/II. 1. óra. Elemkönyvtárak. Elemkönyvtárak használata Saját elemkönyvtár készítése. szenasi.sandor@nik.bmf. Szerver oldali Java programozás 2007-08/II. 1. óra Elemkönyvtárak Elemkönyvtárak használata Saját elemkönyvtár készítése szenasi.sandor@nik.bmf.hu Adatbázisok elérése Témakörök Elemkönyvtárak használata

Részletesebben

WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT

WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT Fontos szabványok 1 HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

Excel III. Haladó ismeretek

Excel III. Haladó ismeretek Alkalmazott Informatikai Intézeti Tanszék MŰSZAKI INFORMATIKA Dr.Dudás László 0. Excel III. Haladó ismeretek Haladó szerkesztési ismeretek Az Excel számolótábla méretei Munkafüzet lap felosztása Sorok,

Részletesebben

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat WEBLAPFEJLESZTÉS Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció Célok Weboldalakkal szemben állított követelmények: - vonzó, egyszerű, igényes, harmonikus színvilág - felhasználóbarát

Részletesebben

Egészítsük ki a Drupal-t. Drupal modul fejlesztés

Egészítsük ki a Drupal-t. Drupal modul fejlesztés Egészítsük ki a Drupal-t Drupal modul fejlesztés Drupal 6.0 2008. február 13. Miért írjunk Drupal modult? Nincs az igényeinknek megfelelő modul Valamilyen közösségi igény kielégítése Valami nem úgy működik

Részletesebben

VII. Appletek, grafika

VII. Appletek, grafika VII. Appletek, grafika 1. Bevezetés A tantárgy elején említettük, hogy a Java alkalmazásokat két nagy csoportba sorolhatjuk. Ezek: alkalmazások (applications) alkalmazáskák (applets) Az eddig megírt programjaink

Részletesebben