Információs technológiák 7. Ea: Nagyvilági teletext. Hon-laposítás
|
|
- Adél Lakatos
- 5 évvel ezelőtt
- Látták:
Átírás
1 Információs technológiák 7. Ea: Nagyvilági teletext Hon-laposítás 165/1 B ITv: MAN
2 Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/2
3 HTML alapok 1. A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML-tag"-eket formázóutasításokat, valamint más megjelenítendő objektumokra történő hivatkozásokat is. Megjelenítése böngésző programmal lehetséges Kötött szerkezetű Fejléc Head Dokumentumtörzs Body A HTML utasítások a szövegben < és > jelek között szerepelnek Formázási lehetőségek: mint egy szövegszerkesztőben Betűtípus, méret, szín, háttérszín, bekezdés, táblázat 165/3
4 HTML alapok 2. <HTML> <HEAD> <TITLE> Az oldal címe </TITLE> </HEAD> <BODY> Helló Világ! </BODY> </HTML> 1. Jegyzettömb, beírás 2. Mentés: pl. prb.htm 3. 2x Megnézés böngészőben 165/4
5 Az igazi kód 165/5 B ITI T MAN
6 HTML alapok 3. Almalap elkészítése 1. Félkövér szöveg Oldal címe Normál szöveg több sorban Kép Link 165/6 B ITI T MAN
7 HTML alapok 4. Almalap elkészítése 2. <HTML> Félkövér <HEAD><TITLE> Almalap </TITLE></HEAD> <BODY> Sortörés <p> <b> Az alma: </b> <br> - Finom,<br> Bekezdés - Mókás,<br> - Szeletelt</p> <p> <img src="alma.jpg" width="170" height="176"> <br><br> AlmaInfo: <a href=" alma honlapja</a> </p> </BODY> </HTML> 165/7 Kép beszúrás: fájl neve, szélesség, magasság Link beszúrás: hivatkozás, megjelenő szöveg
8 Fejlécelemek (Head) <TITLE> Cím </TITLE> <BASEFONT SIZE=12> <META NAME="mező" CONTENT="érték"> <META NAME="Author" CONTENT="BitMan"> <META NAME="robot" CONTENT="deny"> Index/noindex, follow/nofollow, deny, all <META NAME="generator" CONTENT="jegyzettömb"> <META NAME="Keywords" CONTENT="oktatás, humor, bringa, zene"> <META NAME="Description" CONTENT="A legklasszabb lap a világon!"> 165/8
9 Dokumentumtörzs elemek (Body) <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" > Háttérkép Háttérszín Szövegszín Linkszín Bejárt link színe 165/9
10 165/10 FFF FFF CCC CCC FFC C00 FF9 900 FF6 600 FF C C00 CC9 900 FFC C33 FFC C66 FF9 966 FF6 633 CC3 300 CC0 033 CCF F00 CCF F CCC C00 FFF F00 CC9 933 CC CC0 000 FF0 000 FF3 366 FF F F00 CCF F66 99C C CCC C33 FFF F CC3 333 FF3 333 CC3 366 FF6 699 FF F F00 99F F66 66C C CCC C66 FFF F CC6 666 FF CC3 399 FF6 6CC FF F F00 66F F C C00 99F F33 CCC C99 FFF F99 CC9 966 CC6 600 CC9 999 FF9 999 FF3 399 CC FF3 3CC FF0 0CC 00C C00 33C C C C66 CCF F99 FFF FCC FFC C99 FF9 933 FFC CCC FF9 9CC CC CC C C33 66C C66 00F F00 33F F33 66F F66 99F F99 CCF FCC CC9 9CC C C99 FFC CFF FF9 9FF FF6 6FF FF3 3FF FF0 0FF CC6 6CC CC3 3CC C C C C99 99F FCC CCF FFF 339 9FF 99C CFF CCC CFF CC9 9FF 996 6CC CC CC0 0CC 00F F33 33F F C C66 33F F99 99F FFF 99C CCC 006 6CC 669 9CC 999 9FF 999 9CC 993 3FF 660 0CC CC3 3FF CC0 0FF 00F F66 66F F99 33C C F FFF 66C CCC FF 666 6CC CC CC6 6FF 990 0FF 00F F99 66F FCC 33C C99 33F FFF 33C CCC FF 333 3CC CC 996 6FF 660 0FF 00F FCC 33F FCC 00F FFF 00C CCC CC 336 6CC 000 0FF 000 0CC FF 330 0FF 00C C CC 33C CFF 66C CFF 669 9FF 336 6FF 003 3CC 330 0CC 00C CFF 009 9FF 006 6FF 003 3FF Biztonságos színek és Hexa kódjuk. B I T MAN
11 Címszintek Címek, alcímek 6 szint mélységben <H1 ALIGN="irány"> Szöveg </H1> <H2 ALIGN="irány"> Szöveg </H2> NOWRAP Sortörés kikapcsolása <hr /> Vízszintes vonal <HTML><HEAD><TITLE> HTML próbalap </TITLE> </HEAD> <BODY> <H1 ALIGN="left"> Szöveg </H1> <H2 ALIGN="center"> Szöveg </H2> <H3 ALIGN="right"> Szöveg </H3> </BODY> </HTML> 165/11 B ITI T MAN
12 A dokumentum tagolása <DIV CLASS="osztály" ALIGN="irány"> </DIV> NOWRAP Sortörés kikapcsolása <P ALIGN="irány"> </P> Bekezdés <BR> Sortörés Nem tördelhető szóköz 165/12
13 Karakterformátumok <b>szöveg</b><br> félkövér <i>szöveg</i><br> dőlt <u>szöveg</u><br> aláhúzott <s>szöveg</s><br> áthúzott <tt>szöveg</tt><br> fixpontos <big>szöveg</big><br> nagyméretű <small>szöveg</smallbig><br> kisméretű H<sub>2</sub>SO<sub>4</sub><br> alsó index 16<sup>30</sup><br> felső index <FONT FACE="név" COLOR="szín" SIZE=szám> </FONT> 165/13
14 Karakterformátumok <HTML> <HEAD><TITLE> HTML próbalap </TITLE></HEAD> <BODY> <p> <font size="5" face="arial" color="red"> Arial, 5-ös méretű, piros szöveg. </font></p> <p> <font size="3" face="times" color="blue"> Times, 3-as méretű, kék szöveg. </font></p> </BODY> </HTML> 165/14
15 Felsorolás számozás <ul> <li>retek</li> <li>paprika</li> <li>hagyma</li> </ul> <ol> <li>retek</li> <li>paprika</li> <li>hagyma</li> </ol> 165/15
16 Képek <IMG SRC="elérési_út/fájlnév.kit"> <IMG ALIGN="irány" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mméret" UNITS="egység" USEMAP="#jelző" ISMAP ALT="szöveg">. (H)(V)SPACE térköz (margó) Width, height kép mérete Units méretegység (pixel) Usemap, Ismap terület-érzékeny link Alt: Szöveges leírás 165/16
17 Usemap <MAP NAME="jelző"> <AREA SHAPE="alak" COORDS="koordináták" HREF="hivatkozás">... </MAP> <AREA SHAPE="circle" COORDS="kpx,kpy,sugár" <AREA SHAPE="rect" COORDS="bfx,bfy,jax,jay" <AREA SHAPE="polygon" COORDS="c1x,c1y,c2,c2y " 165/17
18 Usemap (2) <img src="logo1.jpg" usemap="#m1" width=960 height=240> <map name="m1"> <area shape="circle" coords="233,52,20" href=" "> <area shape="rect" coords="800,6,900,50" href=" "> </map> 165/18
19 Táblázatok Táblázat kezdete Sor 165/19 <TABLE> <TBODY> <TR> <TD> ID </TD> <TD>NÉV</TD> <TD>SZÜLÉV</TD> <TD>CÍM</TD> </TR> <TR><TD>1</TD> <TD>Béla</TD> <TD>1990</TD> <TD>Budapest</TD></TR> <TR><TD>2</TD> <TD>Géza</TD> <TD>1992</TD> <TD>Győr</TD></TR> <TR><TD>3</TD> <TD>Jenő</TD> <TD>1993</TD> <TD>Miskolc</TD></TR> </TBODY> </TABLE> Oszlop
20 Táblázatok (2) <TABLE cellspacing=1 cellpadding=6 width=282 border=1 BgColor="FFFF99"> <TBODY> <TR BgColor="FFFF33"> <TD width="15%"><p>id</p></td> <TD width="24%"><p>nev</p></td> <TD width="29%"><p>szulev</p></td> <TD width="32%"><p>cim</p></td></tr> <TR> Háttérszín <TD><P align=right>1</p></td> <TD><P>Béla</P></TD> <TD><P>1975</P></TD> Cellák közti távolság Cella szélesség <TD><P>Budapest</P></TD></TR> Teljes szélesség Cellamagasság Külső szegély, és mérete 165/20
21 Hiperhivatkozások a webhelyen index.html 165/21
22 Weblapon belüli linkek <HTML> <HEAD><TITLE> HTML próbalap </TITLE></HEAD> <BODY> Szöveg<br> <a name="hsz">hasznos szöveg</a> <br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> <a href="#hsz">ugrás a Hasznos szöveghez</a> <br> Szöveg<br> </BODY> </HTML> 165/22
23 Webhelyen belüli és külső linkek <a href="mam.htm">mai menü</a> <a href="fotok/foto.htm">fotók</a> <a href=" a W3Schools weblapra</a> <a href=" target="_blank" >Link a W3Schools weblapra</a> 165/23
24 Frame-ek (keretek) Ne használd! Terület felbontása kisebb egységekre <HTML> <HEAD><TITLE>Brekk</TITLE></HEAD> <frameset cols="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </HTML> 165/24
25 Frame-ek (keretek) <HTML> <HEAD><TITLE>Kakukk</TITLE></HEAD> <frameset rows="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </HTML> 165/25
26 IFrame Ezt használhatod! Weblap a weblapban <HTML> <HEAD><TITLE>Retek</TITLE></HEAD> <BODY> <iframe src="frame_a.htm" width="150" height="150"> </iframe> </BODY> </HTML> 165/26 B ITI T MAN
27 HTML űrlap <html> <head> <title> Bejelentkezés </title> </head> <body> <form> <p>kérem a nevemet: <br> <input type = text name="tm" size=17> </form> </body> </html> 165/27
28 HTML űrlap Beviteli elemek <input type= xxx > text password checkbox radio select submit reset 165/28 B ITI T MAN
29 HTML űrlap Beviteli elemek (2) <form> <p>kérem a nevemet: <br> <input type=text name="tm" size=17> </p> <p>kérem a jelszavamat: <br> <input type=password name="tm2" size=17> </p> <p>naplózás: <input type=checkbox name="tm3"> Titkosítás: <input type=checkbox name="tm4" checked="checked"> </p> 165/29
30 HTML űrlap Beviteli elemek <p>betűméret: S<input type=radio name="tmr" value="s"> M<input type=radio name="tmr" value="m"> L<input type=radio name="tmr" value="l" checked="checked"> XL<input type=radio name="tmr" value="xl"></p> Módszer: <SELECT NAME="menu"> <OPTION> Lassan, ráérek. <OPTION> Tempósan, sietek! <OPTION> Még nem vagy kész? </SELECT><br><br><br> <p><input type=submit name="kuldes" value="belépek"> <input type="reset" value="töröl"></p> </form> 165/30 B ITI T MAN
31 Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/31
32 CSS Cascading Style Sheets CSS egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. Vízesés stílusú lap Egymásba ágyazható stíluslapok Szövegek formázására, rétegek kezelésére HTML kódelemek módosítására 165/32 Forrás: Weblabor
33 A tartalom és a megjelenés szétválása től HTML Struktúra Adat Dizájn HTML Struktúra Adat CSS Dizájn 165/33
34 CSS példa Formázás HTML parancsokkal <html><head><title>css példa</title></head> <body> <h1><font size="4" color="#a00000">bevezetés</font></h1> <p><font size="2" color="#00a000">a vers...</font></p> <h1><font size="4" color="#a00000">tárgyalás</font></h1> <p><font size="2" color="#00a000">a költő...</font></p> <h1><font size="4" color="#a00000">összefoglalás</font></h1> <p><font size="2" color="#00a000">végezetül...</font></p> </body> </html> 165/34
35 CSS példa Formázás css-el <html> <head> <title>css példa</title> <style type="text/css"> h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; } </style> </head> <body> <h1>bevezetés</h1> <p>a vers...</p> <h1>tárgyalás</h1> <p>a költő...</p> <h1>összefoglalás</h1> <p>végezetül</p> </body></html> 165/35
36 CSS példa Formázás css-el <html> <head> <title>css példa</title> <link rel="stylesheet" href="kulso.css" type="text/css"> </head> <body> <h1>bevezetés</h1> <p>a vers...</p> <h1>tárgyalás</h1> <p>a költő...</p> <h1>összefoglalás</h1> <p>végezetül</p> </body></html> 165/36
37 A CSS és a HTML viszonya Beágyazott stíluslap 165/37 HTML fejlécben, a style elemben (előző oldal példája) Külső stíluslap Külön fájlban (több weblaphoz egy stíluslap) HTML fejlécben, link hivatkozással: <head> <link rel="stylesheet" href="kulso.css" type="text/css"> </head> Elemhez rendelve <h1 style="font-size: 20px; color: #a00000;">bevezetés</h1> Importálva <style type="text/css"> url( --> </style>
38 Stílusok formátuma kiválasztó { tulajdonság } kiválasztó: mely HTML elemekre vonatkozzon a definíció, tulajdonság: a megjelenés paraméterei. Szinte tetszőleges sorrendiség: kiválasztó { tulajdonság } kiválasztó { tulajdonság } kiválasztó, kiválasztó { tulajdonság; tulajdonság; } 165/38
39 Kiválasztók Elem h1, h2, h3 { color: #a00000; } Osztály <style type="text/css">.fontos { color: #ff0000; } </style> <body> <p class="fontos" >A retekmag olyan...</p> 165/39
40 Kiválasztók (2) Azonosító Csak egyszer, egy elemre használható! <style type="text/css"> #st1 { color: #ff0000; } </style> <body> <p id="st1" >A retekmag olyan...</p> 165/40
41 Kiválasztók (3) Helyzet-érzékeny mód Pl. táblázatban, a félkövér betűk legyenek sötétkékek <style type="text/css"> table b { color: #0000a0; } </style> Tulajdonság alapján Pl. Beviteli mezőben a jelszó legyen kék <style type="text/css"> input[type="password"] { color: #0000a0; } </style> 165/41
42 Bekezdések megjelenése Betűkészletek 165/42 body { font-family: Arial, Helvetica, sans-serif; } Általános: serif, sans-serif, cursive, fantasy, monospace Dőlt betűforma body { font-style: italic; } Választék: normal, italic, oblique Félkövér betűk body { font-weight: bold; } Választék: lighter, normal, bold Betűméret body { font-size: 14px; } { font-size: 1.5em; } xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger body { font: italic bold 14px Arial, Helvetica, sans-serif; }
43 Bekezdések megjelenése (2) Szín h1 { color: black; } vagy { color: #FFFFFF; } Betűk közötti távolság h1 { letter-spacing: 10px; } (lehet negatív is) Igazítás h1 { text-align: center; } Választék: left, center, right, justify Link dekorációja a { text-decoration: none; } Választék: none, underline, overline, line-through, blink Szöveg első sorának behúzása p { text-indent: 40px; } 165/43
44 Bekezdések megjelenése (3) Betű transzformáció h1 { text-transform: uppercase; } Választék: none, capitalize, uppercase, lowercase Árnyékolás h1 { text-shadow: 5px 5px 3px #000000; } távolság lefelé, távolság jobbra, elmosóttság sugara, szín Szavak közti távolság p { word-spacing: 10px; } (lehet negatív is) Sormagasság p { line-height: 20px; } 165/44
45 Doboz modell /45 1 margó: a befoglaló doboz és a keret közti távolság 2 keret 3 kitöltés: a keret és a tartalom közti távolság 4 az elem magassága (IE: a doboz magassága!) 5 az elem szélessége (IE: a doboz szélessége!)
46 Doboz modell soron belül Jelenség: a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elem, akkor több helyen is kettétörik a doboz! 165/46
47 Háttér Háttérszín 165/47 body { background-color: white; } Háttérkép body { background-image: url(hattér.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; } background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right background-attachement: fixed, scroll background-repeat: repeat, repeat-x, repeat-y, no-repeat body { background: white url(hattér.gif) no-repeat fixed center center; }
48 Keret IE Körben egyforma p { border: 2px solid blue; } szélesség, stílus, szín Oldalanként más-más p { border-left: 1px solid red; border-top: 3px double blue; border-right: 2px dotted green; border-bottom: 2px dashed black; } Stílus választék: none, hidden, dotted, dashed, solid, double, groove, ridge, inset outset 165/48
49 Keret Firefox Körben egyforma P { border-style:solid; border-color:#ffcc00; border-width: 5px;} Fontos a sorrend is! 165/49 B ITI T MAN
50 Keret Firefox Oldalanként más-más p { border-top-style:dotted; border-top-color:#ffcc00; border-top-width: 2px; border-right-style:solid; border-right-color:#cc00ff; border-right-width: 5px; border-bottom-style:dashed; border-bottom-color:#009900; border-bottomwidth: 4px; border-left-style:double; border-left-color:#ffcccc; border-left-width:10px; } 165/50
51 Körvonalak Kereten belül, az elem előtt (felett) Minden vonal mindig egyforma p { outline-width: 2px; outline-style: solid; outline-color: #000000; } szélesség, stílus, szín p { outline: 2px solid #000000; } 165/51
52 Margók Egyforma 165/52 body { margin: 0px; } Különböző p { margin: 0px 1px 2px 3px; } Felül, jobbra, alul, bal oldalon Csak kétféle body { margin: 10px 0px; } Függőleges, vízszintes Profi p { margin-left: 3px; margin-top: 0px; margin-right: 1px; margin-bottom: 2px; }
53 Kitöltés Egyforma body { padding: 5px; } Különböző p { padding: 0px 1px 2px 3px; } Felül, jobbra, alul, bal oldalon Csak kétféle body { padding: 10px 0px; } Függőleges, vízszintes Profi p { padding-left: 3px; padding-top: 0px; padding-right: 1px; 165/53 padding-bottom: 2px; }
54 Listaelemek (felsorolás, számozás) ul, ol (dd) ul { list-style-type: disc } ul { list-style-position: inside } ul { list-style-image: url(pont.gif) } ul { list-style: square inside url(pont.gif) } Stílus választék: none, disc, circle, square, decimal, decimalleading-zero, lower-roman, upper-roman, lower-alpha, upperalpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha Pozíció: inside, outside 165/54
55 Listaelemek (példa) <html><head><title>css példa</title> <style type="text/css"> ul { list-style-type: circle; list-style-position: inside; } ol { list-style-type: upper-roman; list-style-position: outside; } </style> </head> <body> <ul><li>retek</li><li>paprika</li> <li>hagyma</li><li>karfiol</li></ul> <ol><li>retek</li><li>paprika</li> <li>hagyma</li><li>karfiol</li></ol> </body> </html> 165/55
56 Pozícionálás Elemek helyzetének megadása h1 { position: static; } Választék: static ahol tartunk, relative ahol tartunk eltolással, absolute a dokumentumban rögzítve, fixed a képernyőhöz rögzítve #fejlec { position: relative; top: -15px; left: 10px; } #lablec { position: absolute; bottom: 10px; right: 10px; } #cimke { position: fixed; bottom: 10px; right: 10px; } 165/56
57 left right Elhelyezkedés méret A pozíció és a méret összefügg top top, bottom, height left, right, width height bottom width Ha kettőt megadunk, a harmadik kiadódik! 165/57 #szoveg { position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background: #eeeeee; } #szoveg { position: absolute; top: 10px; left: 10px; height: 380px; width: 780px; background: #eeeeee; }
58 Méretkorlátok Helyfoglaláshoz, vagy kilógás megakadályozására #content { min-height: 500px; } Választék: min-height, max-height, min-width, maxwidth Túlcsordulás.box { width: 200px; height: 200px; overflow: auto; } Választék: visible a túllógás is látszódjon, hidden a kilógás elrejtése, scroll görgetősáv használata, auto görgetősáv, de csak ha kell 165/58
59 Rétegek A sík harmadik dimenziója Z tengely Alapérték: 0 Z Y X #message { z-index: 1; } 1. réteg: háttérkép 2. réteg: B betű 3. réteg: BitMan 165/59
60 Rétegek (példa) <html><head><title>css példa</title></head> <body> <p><img src = "hatter.jpg" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "Első réteg" /></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">BitMan</p> <p><img src = "BM.png" style = "position: absolute; top: 70px; left: 60px; z-index: 2" alt = "Második réteg" /></p> </body> </html> 165/60
61 CSS példák (1) <HTML><HEAD> <STYLE type="text/css"> H1 { font-family: Arial; font-size: 18pt; Color:red } P { font-size: 12pt; line-height:20pt } </STYLE> </HEAD><BODY> <H1>Csodás napunk van.</h1> <P>Süt a nap, a hőmérséklet 23 fok, Celsiusban. Néhány bárányfelhő béget a csodás égszínkék égbolton, a madarak szerelmesen csicseregnek a zöld levelű fák ágain. </P> </BODY> </HTML> 165/61
62 CSS példák (2) <HTML><HEAD> <STYLE type="text/css"> * {font-size:12pt} I {color:blue} I, B {font-size:18pt} H1 I {color:red} H1 > B {color:green} I + B {color:yellow} </STYLE> </HEAD><BODY> <H1><B>Ma</B> csodás <I>napunk <B>van</B></I>.</H1> <I>Holnap</I> <B>is</B> <B>csodás</B> nap lesz. </BODY> </HTML> 165/62
63 CSS példák (3) <HTML><HEAD> <STYLE type="text/css"> H3.red { font-family: Arial; font-size: 10pt; color:red} H3.green { font-family: Times New Roman; font-size: 14pt; color:green} </STYLE> </HEAD> <BODY> <H3 class="red">csodás napunk van.</h3> <H3 class="green">csodás napunk van.</h3> </BODY> </HTML> 165/63
64 Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/64
65 JavaScript Objektum-orientált script nyelv, Közvetlenül a HTML kódba helyezhető Programozási lehetőségekkel bővíti a statikus HTML-t Lehetőségek: Interaktivitás Űrlapok adatellenőrzése, feldolgozása Sok olyan Csili-vili megoldás, ami valamire jó Sok olyan látványos Csili-vili megoldás, ami semmire sem jó!! Nem Java, de kicsit azért hasonlít! 165/65
66 JavaScript a weboldalon <html> <body> Ez egy hagyományos HTML dokumentum. <br> <script language="javascript"> document.write("ez itt JavaScript!") </script> <br>ismét HTML. </body> </html> 165/66
67 JavaScript a weboldalon (2) <html><head><title>teszt</title> <script language="javascript"> <!-- alert("helló világ!"); //--> </script> </head><body> </body></html> HTML megjegyzés Bárhol lehet a dokumentumban, akár több helyen is. 165/67
68 JavaScript a weboldalon (3) <html><head><title>teszt</title> <SCRIPT SRC=jsc1.js></SCRIPT> </head><body> var a = "12"; jsc1.js <SCRIPT> var b = 5; function Teszt() { Teszt(); document.writeln(a + b+"<br>"); </SCRIPT> document.writeln(b + a+"<br>"); </body></html> document.writeln(a-b+"<br>"); document.writeln(a*b+"<br>"); document.writeln(a/b+"<br>"); } 165/68
69 Adatok, változók Négyféle típus Objektum Számérték (egész, valós) Szöveg (karaktersorozat) Logikai érték (true, false) Változó Var kulcsszó (de elmaradhat!) Globális vagy lokális hatókör Var a = "szöveg"; Var b = 23; 165/69 jel = true; (Var nélkül bárhol deklaráljuk, globális!)
70 Változók <html><head><title>teszt</title> <script type="text/javascript"> var v1 = "Globális változó"; function Teszt() { var v1 = "Lokális változó"; document.writeln(v1); // lokális v1 document.writeln(this.v1); // globális v1 } </script> </head><body> <SCRIPT language="javascript"> Teszt(); </SCRIPT> </body></html> 165/70 Függvény Utalás a globális változóra Függvény hívás
71 Operátorok Aritmetikai operátorok: + összeadás - kivonás * szorzás / osztás % modulo (egész osztás maradéka) Relációs operátorok: < kisebb <= kisebb v. egyenlő > nagyobb >= nagyobb v. egyenlő!= nem egyenlő == egyenlő === egyforma típus és érték 165/71 a=5, b="5" a == b igaz, a === b hamis
72 Operátorok (2) Logikai operátorok && AND OR! NOT Specialitások a++; b--; a növelése 1-el, b csökkentése 1-el b - = 4; b = b 4; a = b = a+b; 165/72 a = 12, b = 5; c = (a<b?a:b); (Ha a<b igaz, akkor c=a, egyébként c=b) document.writeln(c);
73 Automatikus típuskonvertálás <html><head><title>teszt</title> <script type="text/javascript"> var a = "12"; var b = 5; function Teszt() { document.writeln(a + b+"<br>"); document.writeln(b + a+"<br>"); document.writeln(a-b+"<br>"); document.writeln(a*b+"<br>"); document.writeln(a/b+"<br>"); } </script> </head><body> <SCRIPT language="javascript"> Teszt(); </SCRIPT> </body></html> 165/73
74 Utasítások Feltételes utasítás if (feltétel) utasítás; [else if (feltétel) utasítás;] [else utasítás;] if (a < b) x = a; else x = b; if (a == 2) For ciklus for ([kezdő kifejezés]; [ciklusfeltétel]; [léptető kifejezés]) utasítás; for (i=1; i<11; i++) document.writeln(i); Do ciklus do utasítás; while (feltétel); do {document.writeln(a); a++;} while (a<20); While ciklus while (feltétel) utasítás; while (a<25) {document.writeln(a); a++;} 165/74
75 Függvények function fgvnév(paraméter1, paraméter2,...) { utasítások 165/75 [return érték;] } function Kiir() { } document.writeln("eredmény: "+a+"<br>"); function napszak(ora) { } if (ora<12) return "délelőtt" else if (ora > 12) return "délután" else return "dél" B ITI T MAN
76 Dialógus ablakok Üzenet <head> <script type="text/javascript"> function figy() { alert("én szóltam!")} </script> </head> <body> <form> <input type="button" onclick="figy()" value="ne kattints ide!"> </form> </body> 165/76 B ITI T MAN
77 Dialógus ablakok Kérdés <head> <script type="text/javascript"> function kerd() { if (confirm("menjünk?")) { document.write("megyünk.") } else { document.write("nem megyünk.")} } </script></head> <body> <form> <input type="button" onclick="kerd()" value="menjünk?"> </form></body> 165/77
78 Dialógus ablakok Adatbevitel <head> <script type="text/javascript"> function bedat() { var name=prompt( "Hogy hívnak?","bogyó") if (name!=null && name!=""){ document.write( "Hello " + name + "! Én Bigyó vagyok!")} } </script></head> <body><form> <input type="button" onclick="bedat()" value="ismerkedjünk!"> </form></body> 165/78
79 Események Tipikus események egy weblapon egérkattintás egér mozgatása valamely pont fölött űrlapbeviteli mező kiválasztása vagy elhagyása űrlap elküldése vagy alaphelyzetbe állítása weblap vagy kép betöltődése Eseménykezelők segítségével dinamikus weboldalak hozhatók létre 165/79
80 Gyakran használt eseménykezelők Weboldal betöltésekor, elhagyásakor onload, - böngésző típusának lekérdezése onunload, - kilépés kezelése Űrlap kezelés onfocus belépés egy űrlap elembe onblur űrlap elem elhagyása onchange űrlap elem tartalma megváltozik onsubmit űrlap elküldése 165/80
81 Gyakran használt eseménykezelők (2) Egérmozgás onmouseover az egér egy elem fölé kerül onmouseout egér elhagyja az elemet Időzítő események gethours(), getminutes(), getseconds() settimeout 165/81
82 Fontosabb JavaScript objektumok String length(), touppercase(), match(), indexof(), replace() Date gettime() getfullyear(), getmonth(), getdate(), getday() Array concat(), sort(), push(), pop(), Math random(), max(), min(), round() 165/82
83 Böngésző objektumok window a hierarchia csúcsán áll böngészőablakot képvisel document weblap navigator a böngészőről tárol információt screen a kliens gép képernyőjéről rendelkezik információkkal history korábban meglátogatott web oldalak címét tárolja location az éppen aktuális oldal címét tartalmazza reload() vagy replace() függvényei segítségével új oldal tölthető be 165/83
84 Window objektum Metódusok open, showmodeldialog, showmodelessdialog, close, navigate Tulajdonságok document, event, history, location, navigator Események onload, onbeforeunload, onunload, onfocus, onblur Kollekció frames 165/84
85 Document objektum Metódusok open, write, close, createelement, insertadjacentelement, insertbefore Tulajdonságok body, cookie, title Események onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx Kollekciók all, frames, forms 165/85
86 Sztring műveletek Megadás: var s1 ="retek", s2 = 'málna'; Számból sztring: d=szám.tostring(); Sztringből szám: e=s1*1; Sztring hossza: h=s1.length; Részsztring: d=s1.substr(3,7); Nagybetűssé alakítás: d=s1.touppercase(); Kisbetűssé alakítás: d=s1.tolowercase(); Adott sorszámú karakter: d=s1.charat(5); 165/86
87 Példa <html><head><title>teszt</title> </head><body> Négyzet kerülete és területe:<br><br> <form name="fel"> Oldal: <input size=10 name="ert"> <input type=button value="duplakatt: terület" ondblclick="document.fel.ert.value=document.fel.ert.value* document.fel.ert.value"> <input type=button value="katt: kerület" onclick="document.fel.ert.value=document.fel.ert.value*4"> </form> </body></html> 165/87
88 Példa 165/88
89 Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/89
90 Előzmény A hagyományos weboldalak működési módja: A kliens HTTP kérést küld a szervernek egy weberőforrás lekérésére (tipikusan GET vagy POST) A szerver feldolgozza a kérést, és előkészíti a választ A szerver visszaküldi a választ (tipikusan (X)HTML) A kliens oldalon a TELJES oldal frissül (akkor is, ha annak egy részén egyáltalán nem történt változás) Nagy (részben felesleges) adatforgalom, hosszabb várakozási idő Ezt nevezik szinkron működési módnak 165/90
91 Előzmény A hagyományos weboldalak működési módja: 165/91
92 Igény Az adatforgalom csökkentésével gyorsítható az oldal működése Ha nem a teljes oldalt, csak annak a szükséges részét töltjük át a szerverről, és a kliensben dolgozzuk fel a visszakapott eredményt, gyorsul a működés, csökken az adatforgalom. Ez az aszinkron működési mód. Ennek megoldására alkalmas a JavaScript, így sok JavaScript alapú rendszer jött létre. 165/92
93 Megoldás Aszinkron működési mód: Egy JavaScript esemény hatására HTTP kérés küldődik (aszinkron módon) a szerverre A szerver feldolgozza a kérést, és előkészíti a választ A visszaküldött (szöveges vagy XML formátumú) választ a JavaScript alapú kezelő függvény értelmezi, és ennek alapján aktualizálja az oldal megfelelő részeit A legelterjedtebb megoldás: AJAX - Asynchronous JavaScript and XML 165/93
94 Megoldás Aszinkron működési mód: 165/94
95 AJAX Az Ajax interaktív web-alkalmazások létrehozására szolgáló webfejlesztési technika ben publikálták, de ekkor már kb. 10 éve léteztek ilyen célú megoldások. Előzmények: IFRAME (HTML) 1996 JavaScript XMLHttpRequest objektum (IE5) /95
96 AJAX Az Ajax az alábbi szabványos, elterjedt technológiák együttese: HTML, XHTML megjelenítés, CSS megjelenítés DOM dinamikus felhasználói felület és interakció XMLHttpRequest aszinkron átvitel a kliens és a szerver között XML/XSLT adatcsere és adatmanipuláció JSON adatcsere JavaScript keretrendszer, mely összefogja a fenti technológiákat 165/96
97 DOM A Dokumentum Objektum Modell (Document Object Model / DOM) egy platform- és nyelvfüggetlen standard objektummodell amely a HTMLL, XHTML, XMLL valamint rokon formátumaiknak a szerkezetét és az objektumaikkal történő interakciókat modellezi. A DOM egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A dokumentum tartalmát, illetve a dokumentum valamennyi összetevőjét magában foglalja. A beépített objektumok kezelése böngészőnként eltérő lehet, továbbá plusz tulajdonságok is lehetnek különböző böngészők esetén. 165/97
98 DOM 165/98
99 XML Az XML (extended Markup Language) a webes világban elterjedt HTML rokona. Úgynevezett "markup", azaz jelölőnyelv, vagyis olyan adatformátum, ahol az adat és az adatra vonatkozó metainformáció (ideértve az adatszerkezetet vagy a megjelenítési, formázási utasításokat) egy közös állományban található. 165/99
100 XML - példa <konyvek> <konyv> <szerzo>brian W. Aldiss</szerzo> <cim>amíg világ a világ</cim> </konyv> <konyv> <szerzo>brian W. Aldiss</szerzo> <cim>az arénában</cim> </konyv> <konyv> <szerzo>isaac Asimov</szerzo> <cim>alapítvány</cim> </konyv>... </konyvek> 165/100
101 XSLT Az XSLT, mint extensible Stylesheet Language Transformation, az az eszköz mely segítségével leírhatjuk az XML formátumú dokumentumokon elvégezendő transzformációkat. Ez a transzformáció leíró alkalmas XML-ből XML-be, de XML-ből bármilyen más szöveges formátumba történő transzformáció megadására is. A transzformációk megadása a dokumentum adott részeihez rendelt template-ekbe rendezett feldolgozási utasítások megadásával történik. 165/101
102 XSLT - példa <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <head> <title>kedvenc könyveim</title> </head> <body> <h2>néhány ajánlott olvasnivaló</h2> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="konyvek"> <ul id="lista"> <xsl:apply-templates /> </ul> </xsl:template> <xsl:template match="konyv"> <li><em><xsl:value-of select="cim" /></em> by <xsl:value-of select="szerzo" /></li> </xsl:template> </xsl:stylesheet> 165/102
103 A tartalom és a megjelenés szétválása 1997 Jelen Jövő HTML/JavaScript Struktúra Dizájn Adat Tulajdonság HTML/XHTML Struktúra Adat CSS Dizájn XML Adat XSLT Struktúra CSS Dizájn JavaScript Tulajdonság JavaScript Tulajdonság Forrás: Ken Westin 165/103
104 AJAX keretrendszerek jquery MooTools Prototype, Script.aculo.us YUI Library ASP.NET AJAX Spry framework (Adobe) Dojo Toolkit Ext JS 165/104
105 Az XMLHttpRequest API, illetve objektum Nem standard, de a legtöbb böngésző támogatja (böngészőfüggő eltérések) Használható JavaScript, Jscript, VBScript-ből Segítségével aszinkron kapcsolat hozható létre a kliens és szerver között A kérés feldolgozását követően a szerver válasza lehet: egyszerű szöveg XML objektum (JSON jelöléssel megadva) 165/105
106 XMLHttpRequest (folyt. 1) Az XMLHttpRequest objektum metódusai: open( method, URL ) open( method, URL, async ) open( method, URL, async, username ) open( method, URL, async, username, password ) send( content ) getresponseheader( headername ) setrequestheader( label, value ) getallresponseheaders() abort() 165/106
107 XMLHttpRequest (folyt. 2) Az XMLHttpRequest objektum mezői: readystate: 0 a kérés még nincs inicializálva 1 a kérés inicializálva van 2 a kérés el lett küldve 3 a kérés feldolgozás alatt áll 4 megérkezett a válasz onreadystatechange ennek ertékeként kell megadni a választ kezelő függvény nevet, mely meg fog hívódni a readystate minden egyes változásakor status a válasz HTTP kódja (200 = "OK") statustext a HTTP válasz kódjának szöveges változata responsetext a válasz karaktersorozatként responsexml a válasz XML formájában 165/107
108 XMLHttpRequest működése JavaScript a HTTP kérések küldéséért/válasz fogadásáért felelős speciális objektum lekérése (XMLHttpRequest) a kérés inicializálása (a keres objektum segítségével): a választ fogadó függvény kijelölése a kérés objektum onreadystatechange attribútumának beállítása GET (vagy POST) keres inicializálása (open függvény) adat elküldése (send függvény) a válasz kezelése: várakozás readystate==4-re (illetve HTTP 200 válaszra) válasz kinyerése responsetext (vagy responsexml) segítségével válasz feldolgozása HTML JavaScript kód betöltése 165/108 a kérést generáló HTML elem/esemény kijelölése B ITI TMAN N
109 Kérés objektum lekérése function getrequestobject(){ if (window.xmlhttprequest){ // IE7+, Firefox, Chrome, Opera, Safari return (new XMLHttpRequest()); } else if (window.activexobject){ // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a böngésző nem támogatja egyik típusú kérésobjektumot sem return(null); } } 165/109
110 Kérés inicializálása function sendrequest(url){ } xmlhttp=getrequestobject(); // a valaszt kezel}o handler bealltasa: xmlhttp.onreadystatechange=handleresponse; xmlhttp.open("get",url,true); xmlhttp.send(null); Az open és send függvények paraméterei: open paraméterei: metódus (GET, POST, PUT), szerver-oldali erőforrás URL-je, true=aszinkron kérésküldés send paraméterei: POST adat (GET esetében null) 165/110
111 A válasz kezelése function handleresponse() { } if(xmlhttp.readystate==4) { // A szerverről érkező válasz kinyerése (responsetext adattag értéke) alert(xmlhttp.responsetext); } 165/111
112 Egyszerű példa szerver oldal nélkül <html> ajaxexample.htm <body><head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>egyszerű AJAX példa</title> </head> <script src="ajaxexample.js" type="text/javascript"></script> <form> <input type="button" name="button" value="üzenet" onclick="sendrequest('message-data.htm');"/> </form> </body> </html> Válasz: (Normális esetben a szerver küldi!) 165/112 message-data.htm
113 ajaxexample.js var xmlhttp; function getrequestobject(){ if (window.xmlhttprequest){ // IE7+, Firefox, Chrome, Opera, Safari return (new XMLHttpRequest()); } else if (window.activexobject){ // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a böngésző nem támogatja egyik típusú kérésobjektumot sem return(null); } } 165/113 B ITI T MAN
114 ajaxexample.js (folytatás) function sendrequest(url){ xmlhttp=getrequestobject(); // a választ kezelő handler (függvény) beállítása: xmlhttp.onreadystatechange=handleresponse; xmlhttp.open("get",url,true); xmlhttp.send(null); } function handleresponse(){ // ha szervertől várjuk a választ, a HTTP hibakódot is ellenőrizhetjük (status adattag) //if((xmlhttp.readystate==4) && (xmlhttp.status==200)) if(xmlhttp.readystate==4) { // A szerverről érkező válasz kinyerése (responsetext adattag segítségével) alert(xmlhttp.responsetext); } } B ITI T MAN 165/114
115 ajaxexample.js futtatás 165/115
116 JSON JavaScript Object Notation Kis méretű, szöveg alapú szabvány ember által olvasható adatcserére. A JavaScript nyelvből alakult ki egyszerű adatstruktúrák és asszociatív tömbök reprezentálására (a JSON-ban objektum a nevük). A JavaScripttel való kapcsolata ellenére nyelv független, több nyelvhez is van értelmezője. A JSON-t legtöbbször egy szerver és egy kliens számítógép közti adatátvitelre használják (legtöbbször AJAX technológiával), az XML egyik alternatívájaként. Általánosságban strukturált adatok tárolására, továbbítására szolgál. 165/116
117 XML JSON <xml> <csalad> <csaladnev>kiss</csaladnev> <gyereknev>ádám</gyereknev> <gyereknev>éva</gyereknev> <gyereknev>laci</gyereknev> <csalad> <csalad> <csaladnev>nagy</csaladnev> <gyereknev>istván</gyereknev> <gyereknev>mátyás</gyereknev> <gyereknev>izabella</gyereknev> <csalad> </xml> { "csalad": [ // lista jele { // asszociatív tömb jele "csaladnev": "Kiss", // normál kulcs:érték "gyereknev": ["Ádám", "Éva", "Laci"] // kulcs: [lista] }, { "csaladnev": "Nagy", "gyereknev": ["István", "Mátyás", "Izabella"] } ] } 165/117
118 Egyszerű JSON példa szerver oldal nélkül <html> ajaxexample_json.htm <body><head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>egyszerű JSON pl.</title> </head> <script src="ajaxexample_json.js" type="text/javascript"></script> <form> <input type="button" name="button" value="infó" onclick="sendrequest('resp_json');"/> </form> <h2><span id="title"></span></h2><br> <span id="firstname"></span> <span id="lastname"></span><br> <span id="address"></span><br> <span id="phonenr"></span> </body> </html> 165/118
119 Egyszerű JSON példa szerver oldal nélkül { } "firstname": "Mici", "lastname": "Mackó", "address": { "streetaddress": "Odvas Tölgyfa utca 21.", "city": "Százholdas Pagony", "state": "Kerekerdő", "postalcode": "210021" }, "phonenumbers": [ " ", " " ] resp_json 165/119
120 ajaxexample_json.js var xmlhttp; function getrequestobject(){ if (window.xmlhttprequest){ // IE7+, Firefox, Chrome, Opera, Safari return (new XMLHttpRequest()); } else if (window.activexobject){ // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a böngésző nem támogatja egyik típusú kérésobjektumot sem return(null); } } 165/120 B ITI T MAN
121 ajaxexample_json.js (folytatás_1) function sendrequest(url){ xmlhttp=getrequestobject(); // a választ kezelő handler (függvény) beállítása: xmlhttp.onreadystatechange=handleresponse; xmlhttp.open("get",url,true); xmlhttp.send(null); } 165/121 B ITI T MAN
122 ajaxexample_json.js (folytatás_2) function handleresponse(){ if(xmlhttp.readystate==4) { var info = eval('(' + xmlhttp.responsetext + ')'); } 165/122 A "szerverről" érkező válasz esetünkben egy JSON kifejezés, ezt kiértékelve egy JavaScript objektumot kapunk document.getelementbyid("title").innerhtml="adatlap"; document.getelementbyid("firstname").innerhtml="<b>név: </b>"+info.firstname; document.getelementbyid("lastname").innerhtml=info.lastname; document.getelementbyid("address").innerhtml="<b>cím: </b>"+info.address.postalcode+" "+info.address.state+", "+info.address.city+", "+info.address.streetaddress; var tmp= "<b>telefonszám(ok):</b><ul>"; for(i=0;i<info.phonenumbers.length;i++){ tmp=tmp+"<li>"+info.phonenumbers[i]+"</li>" } tmp+="</ul>" document.getelementbyid("phonenr").innerhtml=tmp; } B ITI T MAN
123 ajaxexample_json.js futtatás 165/123
124 Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/124
125 jquery JavaScript függvénykönyvtár Ingyenes, nyílt forráskódú Jellemzői: Eseménykezelés CSS manipuláció Effektek és animációk kezelése AJAX támogatás JavaScript Pluginek A jquery célja az, hogy amennyire csak lehetséges, leválassza a JavaScript kódot a HTML-ből, és különböző eseményvezérlőkön, és azonosítókon keresztül kommunikáljon a weblap HTML elemeivel. Jelmondata: "write less, do more" 165/125
126 jquery Használata Letöltés: Verzió: ( ) Beillesztés egy html oldalba: <HEAD> <script type="text/javascript" src="jquery js"></script> </HEAD> Kipróbálása: <BODY> <SCRIPT> $(document).ready(function(){ alert('a JQuery használható!'); }); </SCRIPT> 165/126
127 JQuery Használata: A jquery használatához alapszintű HTML és CSS ismeret szükséges hiszen ezen elemek manipulálására szolgál. A jquery úgy épül fel, hogy kiválasztunk elemeket és azokra hívunk meg függvényeket. Az eseményhez kötés is úgy történik, hogy megívunk egy függvényt, aminek átadjuk, hogy egy esemény (pl. kattintás) hatására mit csináljon az adott elem. 165/127
128 jquery példa <!DOCTYPE HTML PUBLIC "HTML 4.0 Transitional"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="jquery js"></script> </HEAD> <BODY> <div id="katt" > <font color="red"> Kattints ide </font> </div> <img id="kep" src="light.jpg" alt="" width="400" height="225" style="position: relative; left: 10px;" /> 165/128 JQuery betöltése katt azonosítójú terület kep azonosítójú terület
129 jquery példa (folytatás) <script> $('#katt').click(function() { $("#szoveg").hide(); $('#kep').animate({opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { $("#szoveg").html("<h3>"+ "Az animációhoz kattints ismét a linkre" + "</h3>").fadein("slow"); }); }); </script> A katt területre kattintva elrejti a szoveg -et, és animálja a kep -et. Az animáció után kiírja lassan a szoveg -et. <font color="blue"> <div id= "szoveg" style="display: none;"></div> </font> </BODY> </HTML> 165/129 szoveg azonosítójú terület
130 jquery példa 165/130
131 Alapvető szintaxis $(szelektor).művelet() $ - jquery szintaxis része szelektor - kiválasztja a megfelelő HTML eleme(ke)t művelet - a kiválasztott eleme(ke)n végrehajtásra kerülő művelet (action) Annak elkerülése, hogy a jquery kód az oldal betöltés előtt hajtódjon végre: $(document).ready(function(){ // jquery függvény... }); 165/131
132 jquery - szelektorok Szintaktikájában a CSS-re hasonlít. Id alapú kiválasztás: # Osztály alapú kiválasztás: A kiválasztó (a $ függvény) visszaad egy objektumot és ezen hívhatunk függvényeket. Kiválasztás példák: $("p") - az összes p elem kiválasztása $(".gomb") - az összes "gomb" "class"-ú elem $("p.piros") - a class="piros" stílusosztályhoz tartozó p elemek kiválasztása $("p#elso") - p elem, melynek id attribútuma "elso" $("[href]") - az összes href attribútumú elem $("#menu li.active") - A "menü" "id"-jű <ul>-en belüli 165/132 összes <li> elem, amelynek "aktiv" a class paramétere
133 jquery - AJAX függvények (ízelítő) $(selector).load(url,data,callback) - (távoli) adat betöltése a kiválasztott elemekbe $.ajax(options) - adat betöltése egy XMLHttpRequest objektumba $.get(url,data,callback,type) - adat betöltese HTTP GET segítségével $.post(url,data,callback,type) - adat betöltese HTTP POST segítségével $.getjson(url,data,callback) - JSON kifejezéssel megadott adat betöltése HTTP GET segítségével $.getscript(url,callback) - (távoli) JavaScript állomány betöltése és végrehajtása 165/133
134 jquery - AJAX függvények (ízelítő).click() Kattintás.animate() Animáció.hide() Elem elrejtése.show() Elem megjelenítése.toggle() A fenti kettő keveréke, ha látszik az elem elrejti, ha nem akkor megjeleníti..fade() Elem elhalványítása.fadetoggle() Állapottól függő elhalványítás 165/134
135 jquery AJAX hívás példa AjaxSuggest.htm - a szövegmezőbe írva, a billentyű elengedésekor lesz elküldve (clienthint.js) a kérés, ami a szerverről lekéri azokat a tippeket (női keresztnevek), amelyek a már beírt karaktersorozattal kezdődnek (gethint.php). A szerver a tippeket az egyszerűség kedvéért egy tömbből olvassa a valós életben inkább adatbázisban vannak az adatok 165/135
136 jquery AJAX hívás példa (folytatás) <html> ajaxsuggest.htm <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script src="clienthint.js"></script> </head> <body> <form> Keresztnév: <input type="text" id="txt1" onkeyup="showhint(this.value)" /> </form> <p>tipp: <span id="txthint"></span></p> </body> </html> 165/136
137 jquery AJAX hívás példa (folytatás) var xmlhttp function showhint(str){ if (str.length==0) { document.getelementbyid("txthint").innerhtml=""; return; } xmlhttp=getxmlhttpobject(); if (xmlhttp==null) { alert ("Az ön böngészője nem támogatja az XMLHTTP-t!"); return; } var url="gethint.php"; url=url+"?q="+str; //url=url+"&sid="+math.random(); xmlhttp.onreadystatechange=statechanged; xmlhttp.open("get",url,true); xmlhttp.send(null); } 165/137 clienthint.js B ITI T MAN
138 jquery AJAX hívás példa (folytatás) function statechanged(){ clienthint.js if ((xmlhttp.readystate==4)&&(xmlhttp.status==200)) { document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext; } } function GetXmlHttpObject(){ if (window.xmlhttprequest) { // IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.activexobject) { // IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } 165/138
139 jquery AJAX hívás példa (folytatás) <?php $a[ ]="Anna"; $a[]="brigitta"; $a[]="cecília"; $a[]="dalma"; $a[]="emma"; $a[]="éva"; $a[]="fanni"; $a[]="gabriella"; $a[]="helga"; $a[]="iringó"; $a[]="johanna"; $a[]="katalin"; $a[]="linda"; $a[]="nóra"; $a[]="orsolya"; $a[]="piroska"; 165/139 $a[]="andrea"; $a[]="réka"; $a[]="csilla"; $a[]="bernadett"; $a[]="erika"; $a[]="eszter"; $a[]="szidónia"; $a[]="tünde"; $a[]="zsuzsa"; $a[]="viola"; $a[]="lilla"; $a[]="erzsébet"; $a[]="emese"; $a[]="mária"; $a[]="viktória"; $q=$_get["q"]; gethint.php A tömb feltöltése nevekkel A q paraméter kinyerése az URL-ből B ITI T MAN
140 jquery AJAX hívás példa (folytatás) if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (mb_strtolower($q,'utf- 8')==mb_strtolower(substr($a[$i],0,strlen($q)),'UTF-8')) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint.", ".$a[$i]; } } } } if ($hint == ""){ $response="nincs tipp"; } else { $response=$hint; } echo $response; 165/140?> gethint.php Kikeressük a tömbből az összes találó tippet, amennyiben q>0 Kimenet beállítása a "nincs tipp" szövegre, amennyiben nem volt találat, különben pedig a megfelelő válasz beállítása. A válasz kiírása (visszaküldése) B ITI T MAN
141 Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/141
142 Regisztrálás ingyenes tárhelyen - keresés 165/142
143 Regisztrálás ingyenes tárhelyen /143
144 Regisztrálás ingyenes tárhelyen /144
145 Regisztrálás ingyenes tárhelyen /145
146 Regisztrálás ingyenes tárhelyen /146
147 Webhely létrehozása Ha szövegen kívül más is került egy oldalra (kép, video, hang), akkor a word létrehozza az oldalnév_elemei (pl. index_elemei) könyvtárat, és ide ment bizonyos fájlokat! A létrehozott könyvtár teljes tartalmát fel kell másolni a webhelyre: 165/147 Weplapok (index.html és a többi htm fájl) Képek Fájlok (.doc,.pdf,.xls ) Könyvtárak (index_elemei, és a többi _elemei könyvtár) Az ingyenes webhelyeknek általában van saját megoldásuk erre a célra, itt egyesével másolhatók a fájlok. Jobb megoldás: TotalCommander használata
148 165/148
149 FTP kapcsolat Total Commanderrel Honlapom ftp.uw.hu kakukk Tetszőleges név lehet! Az ftp szerver neve! ******** Regisztrált felhasználói neved! Regisztrált jelszavad! Végén OK, aztán: Kapcsolódás 165/149
150 Szerver oldal Helyi merevlemez Ez az oldal először természetesen üres! 1. Kijelölni a szükséges fájlokat. 2. Megnyomni a Másolás gombot. 165/ Ellenőrizni, hogy működik-e? Tehát megnyitni böngészővel a weboldalt, és kipróbálni!
151 165/151
152 Információs technológiák Ellenőrző kérdések 165/152
153 Ellenőrző kérdések Lehet-e képhez linket készíteni? A: Nem B: Igen, de csak belsőt C: Igen 30 mp 2. Hogyan kell linket készíteni wordben? A: Beszúrás \ Weblink B: Beszúrás \ Hiperhivatkozás C: Beszúrás \ Link D: Beszúrás \ Hiperlink 165/153
154 Ellenőrző kérdések Mit jelöl a HTML rövidítés? A: Hibrid Text Manual Language B: Hyper Text with Menu Language C: Hibrid Text Multi Language D: Hypertext Markup Language 30 mp 4. Mi az elnevezése a weblapok programnyelvének? A: HTTP B: FTP C: HTML D: URL 165/154
155 Ellenőrző kérdések Igaz vagy Hamis az állítás? A <br> félkövér kód HTML-ben. A <br> páros HTML tag. HTML-ben képet a <pict> utasítással szúrunk be. A <head> és a <body> páros HTML tag-ek. A HTML kódot bármilyen szövegszerkesztővel meg lehet írni. HTML-ben linket az <a> taggel lehet beszúrni. HTML-ben a formázó utasításokat / jelek közé kell tenni. Ha HTML-ben beírom a <b> utasítást, a szöveg mindaddig félkövér lesz, még a hatást le nem zárom a <br> utasítással. A <body> utasítás előbb szerepel a HTML kódban, mint a <head> utasítás. 165/ mp
156 Ellenőrző kérdések Igaz vagy Hamis az állítás? A word nem alkalmas weblapok készítésére. Egy webhely kiinduló lapjának elnevezése tetszőleges lehet. Bármilyen weblapot hozunk létre, a word a képeket mindig az index_elemei könyvtárba helyezi el. A Total Commander a weblap megtekintéséhez szükséges. A linknél beállítható a wordben, hogy új lapon jelenjen meg a hivatkozott dokumentum. A weblapot tartalmazó fájl neve, és a lap címe mindig ugyanaz. A böngésző program weblapokat jelenít meg a felhasználó saját gépén. 165/ mp
157 Ellenőrző kérdések Hogyan kell elmenteni wordben a weblapot? A: webarchivum B: weblap C: website D: webhely 30 mp 8. Melyik a helyes elnevezése a weblap kiinduló oldalának? A: idnex.html B: index.hmtl C: index.html D: index.mhtl 165/157
158 Ellenőrző kérdések Kell-e külső webhelyre mutató hivatkozást készíteni a beadandó internetes feladatban? A: nem B: Igen, legalább 5-öt C: Igen, legalább 8-at D: Igen, legalább 10-et 30 mp 10. Ha kép is kerül a kiinduló weblapra, a word milyen könyvtárat hoz létre? A: weblap-elemei B: weblap_elemei C: index_elemei D: index-elemei 165/158
159 Ellenőrző kérdések Mi kell egy ingyenes webhely regisztrációjához? A: Ímél cím ( cím) B: Elküldött sms C: Meglévő saját tárhely D: Egy kiinduló weboldal feltöltése 30 mp 12. Hány weboldalt kell készíteni a beadandó internetes feladatban? A: min:3, max: 6 B: min:4, max: 8 C: min:5, max:8 D: min:4, max: /159
160 Ellenőrző kérdések Milyen sorrendben jelennek meg az alábbi HTML kódelemek? Kezdje a számozást a legkorábbival. </HEAD> </HTML> <BODY> </TITLE> 30 mp 14. Hány alapértelmezett címszint létezik a HTML-ben? A: 3 B: 6 C: 7 D: Melyik a sortörés kódja HTML-ben? A: <lb> B: <br> C: <rb> D: <div> 165/160
161 Ellenőrző kérdések Melyik paranccsal lehet beállítani egy táblázat cella magasságát HTML-ben? A: cellspacing B: cellpadding C: width D: height 17. Milyen típus(ok) állhat(nak) a kipontozott helyen? <form> <p>kérem a nevemet: <br> <input type= name="tm" size=17> </p> A: text B: password C: checkbox D: submit 165/ mp
162 Ellenőrző kérdések Alakítson ki két kategóriát, és sorolja az alábbi parancsokat az egyes kategóriákba! 60 mp Kategóriák: Parancsok: A: font-size: 20px; B: font size = 20 C: color: #a00000; D: color = blue E: <sub> F: z-index: 2; 165/162
163 Ennyi! 165/163 B ITI T MAN
164 Felhasznált irodalom Weblabor.hu: A fejlesztői forrás W3schools.com: The world s largest web development site Rimár Miklós: Html, css szakdolgozat KBB TE Ruff Laura-Ildikó: Web programozás elektronikus jegyzetek 165/164
165 VÉGE VÉGE 165/165
B I T M A N B I v: T M A N
Web technológiák 1. Gy: HTML, CSS B I v: T 2015.02.12 M A N 1/64 Témakörök HTML CSS 2/64 HTML alapok 1. A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML-tag"-eket formázóutasításokat,
RészletesebbenAJAX AJAX. AJAX: Asynchronous JavaScript and XML. az alábbi technológiákon alapul: AJAX-ot támogató keretrendszerek
Áttekintés AJAX Bevezetés Működési elv AJAX-ot támogató keretrendszerek 1 / 25 2 / 25 AJAX AJAX: Asynchronous JavaScript and XML az alábbi technológiákon alapul: (X)HTML, CSS XML JavaScript Motiváció:
RészletesebbenBevezeté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észletesebbenAJAX-ot támogató keretrendszerek
AJAX Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek AJAX AJAX: Asynchronous JavaScript and XML az alábbi technológiákon alapul: (X)HTML, CSS XML JavaScript 2005-ben vált népszerűvé
RészletesebbenInformatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem
Informatika 1 CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc Budapesti M szaki Egyetem 2014. november 4. CSS CSS: Cascading Style Sheets CSS CSS: Cascading Style Sheets Cél: a tartalom és a megjelenítés
RészletesebbenInformatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13.
Informatika 1 9. el adás Kovács Kristóf, Pálovics Róbert Budapesti M szaki Egyetem 2013. november 13. CSS HTML formázasára, elhelyezésére szolgál Cél az újrafelhasználhatóság és könny módosítás CSS kód
RészletesebbenNONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv. programozás alapjai. Haramia László
NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv programozás alapjai Haramia László JavaScript szerepe Netscape fejlesztette ki LiveScript Interaktív weboldalak dinamikus kezelhetősége
RészletesebbenWeb technológiák 2. Gy: JavaScript, AJAX B IT MAN. 81/1 v:
Web technológiák 2. Gy: JavaScript, AJAX 81/1 v: 2015.10.01 A Web világa 1. A HTML, a CSS és a JavaScript a legnépszerűbb programozási nyelvek a világon. A Web ezekre épül. A böngészők értelmezik és megjelenítik
RészletesebbenMultimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
RészletesebbenHTML kódok. A www jelentése World Wide Web.
HTML kódok A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. A honlap felépítése (csak
RészletesebbenWeb 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észletesebbenHTML alapok. A HTML az Internetes oldalak nyelve.
A HTML az Internetes oldalak nyelve. HTML alapok Karakteres szövegszerkesztővel (pl. Jegyzettömb) szerkeszthető. FONTOS, hogy az elkészült oldal kiterjesztése ne txt, hanem html legyen! Felépítése: Két
RészletesebbenB I T M A N B I v: T M A N
Adatbázis Rendszerek II. 5. Ea: MySQL - PHP B I v: T 2014.03.08 M A N 1/70 Témakörök HTML, PHP alapok (gyorstalpaló) Melós (miniprogram) PHP előkészületek PHP adatbázis alapok A kategória tábla PHP programja
RészletesebbenSzabadkai 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észletesebbenWCSS (Wap CSS), Wireless CSS
WCSS (Wap CSS), Wireless CSS A WCSS (WAP Cascading Style Sheet vagy WAP CSS) mobil változata a CSS-nek. WAP speciális kiterjesztéseket tartalmaz. Azok a CSS2 jellemzők és tulajdonságok, amelyek nem hasznosak
RészletesebbenHTML ÉS PHP ŐSZI FÉLÉV
1 HTML ÉS PHP ŐSZI FÉLÉV 2012-10-10 CSS kezdőlépések 2 A CSS és a HTML viszonya 2012-10-10 Hol található CSS kód? 3 Közvetlenül a tag-ek style paraméterében: bekezdés Ekkor a
RészletesebbenTamás Ferenc: CSS táblázatok 2.
Tamás Ferenc: CSS táblázatok 2. Ez az írás azoknak készült, akik már értik a HTML és a CSS nyelveket, csak használat közben kellene egy adott tulajdonság vagy érték. Kérem, hogy senki se ezzel kezdje a
RészletesebbenHTML kódolás Web-lap felépítése. Az egész törzsre érvényes utasítás. <HTML> web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól
HTML kódolás Web-lap felépítése web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól fejléc kezdő utasítás: a böngészőnek és a kereső robotoknak szóló elemek Fejléc elemek,
RészletesebbenWebkezdő. A modul célja
Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie
RészletesebbenMemó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észletesebbenHTML 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Á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(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észletesebbenTermé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észletesebbenTili-Toli játék. Felhasználói dokumentáció
Tili-Toli játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével tili-toli játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az oldal
Részletesebben12.óra jquery Framework #1. Gyimesi Ákos
12.óra jquery Framework #1 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com 12.óra jquery Framework #1 Miről lesz szó? JavaScript nyelv alapjai plusz: a JavaScript objektummodellje JavaScript
RészletesebbenAz 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észletesebbenWeb technológiák 1. Gy: HTML, CSS B IT MAN. 117/1 v:
Web technológiák 1. Gy: HTML, CSS 117/1 v: 2016.09.19 A Web világa 1. A HTML, a CSS és a JavaScript a legnépszerűbb programozási nyelvek a világon. A Web ezekre épül. A böngészők értelmezik és megjelenítik
RészletesebbenWebprogramozás szakkör
Webprogramozás szakkör Előadás 3. (2013.03.19) Bevezető HTML felelevenítés HTML elemei Tag-ek, például: , , , Tulajdonságok, például: size, bgcolor Értékek, például: 4, black, #FFFFF
RészletesebbenHTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár
Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)
RészletesebbenAz alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.
JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript
RészletesebbenSzá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észletesebbenSakk 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észletesebbenWeblap 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észletesebben3. modul - Szövegszerkesztés
3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán
RészletesebbenInternet, 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"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell
"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell Bevezető - platform- és nyelvfüggetlen programozási interfész - tartalom-, szerkezet- és stílus-elérés/módosítás
RészletesebbenJquery. Konstantinusz Kft.
Konstantinusz Kft. 2011 1 Tartalomjegyzék 1 Tartalomjegyzék... 2 2 Bevezetés... 3 3 Használata... 4 3.1 A $ függvény... 4 3.2 Elemek kiválasztása... 5 3.3 Fontosabb függvények... 6 3.3.1 Animációk... 7
RészletesebbenWebszerkeszté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észletesebbenHTML sablon tervezése
3. Laboratóriumi gyakorlat HTML sablon tervezése A gyakorlat célja: Egy összefüggő HTML illetve CSS nyelvet használó oldal tervezése, amely később sablonként is használható. Felkészüléshez szükséges anyagok:
RészletesebbenKö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észletesebbenWEBSZERKESZTÉ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észletesebbenWebprogramozá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észletesebben5-ö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észletesebbenA 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észletesebbenINFO1 WEB, HTML, CSS
INFO1 WEB, HTML, CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc 2015. november 3. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc INFO1 WEB, HTML, CSS 2015. november 3. 1 / 41 Bevezetés 1 Bevezetés 2
RészletesebbenInformációs technológiák 1. Gy: HTML alapok
Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN 2017.09.28 Hogyan kezdjünk hozzá? Készítsünk egy mappát, legyen a neve mondjuk: Web Ez lesz a munkakönyvtárunk, ide kerül majd minden létrehozott
RészletesebbenInformációs technológiák 2. Gy: CSS, JS alapok
Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés
RészletesebbenCSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa
CSS3 alapismeretek Bevezetés a CSS-be Mi is az a CSS? A CSS az angol Cascading Style Sheets kifejezés rövidítése, ami magyarul talán egymásba ágyazott stíluslapoknak lehetne fordítani. Hasonlóan a HTML-hez,
RészletesebbenWEBFEJLESZTÉ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észletesebbenHTML é 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észletesebbenPHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT
alapjai, bevezetés Vincze Dávid Miskolci Egyetem, IIT vincze.david@iit.uni-miskolc.hu PHP Personal Home Page (Tools) Script nyelv -> interpretált Elsősorban weboldal (dinamikus) tartalmak előállítására
Részletesebben2008/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észletesebbenAjax és Echo 2. Bokor Attila
Ajax és Echo 2 Bokor Attila attila.bokor@netvisor.hu Tartalom Ajax áttekintés Echo2 Echo2 kiegészítések Asynchronous JavaScript and XML Webfejlesztési technika interaktív webalkalmazásokhoz Kifejezés közösen
RészletesebbenWeb-fejlesztés NGM_IN002_1
Web-fejlesztés NGM_IN002_1 Rich Internet Applications RIA Vékony-kliens generált (statikus) HTML megjelenítése szerver oldali feldolgozással szinkron oldal megjelenítéssel RIA desktop alkalmazások funkcionalitása
RészletesebbenHTML, XML szerkesztés
HTML, XML szerkesztés Vezető: Majzik Zsuzsa Előadó: Rigó Ernő http://gdf.tricon.hu/html Előzmények 1960-as évek: GML IBM SGML Standard Generalized Markup Language 1986-os
RészletesebbenLenyíló menük készítése. Összetett programok készítése
Lenyíló menük készítése Összetett programok készítése webprogramozó Akkor érdemes használni, ha a webhelyünk túl sok lehet séget tartalmaz ahhoz, hogy azok kényelmesen elférjenek egy oldalon. Pár oldal
RészletesebbenVillamosmé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észletesebbenWeb programoz as 2009 2010
Web programozás 2009 2010 Áttekintés A web rövid története Kliens szerver architektúra Néhány alapfogalom Kliens- illetve szerver oldali technológiák áttekintése Áttekintés: miről lesz szó (kurzus/labor/vizsga)
Részletesebben1. 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észletesebbenHTML. 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észletesebbenWEB-PROGRAMOZÁS II. 1. Egészítse ki a következő PHP kódot a következők szerint: a,b,c,d: <?php. interface Kiir { public function kiir();
WEB-PROGRAMOZÁS II 1. Egészítse ki a következő PHP kódot a következők szerint: a,b,c,d: a) Legyen a Felhasznalo osztálynak egy osztály szintű publikus változója, amelyben számolja a létrehozott példányai
Részletesebbenbb témakörök Programozás JavaScript nyelven A JavaScript szerepe Kliensoldali szkript alkalmazása JavaScript a weboldalon
bb témakörök Programozás JavaScript nyelven A JavaScript nyelv szerepe A JavaScript nyújtotta lehet ségek A JavaScript beillesztése a weboldalakra A JavaScript szerepe weblapok dinamikus kezelhet sége
RészletesebbenKé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észletesebbenw 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(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észletesebbenMegoldás (HTML) <!DOCTYPE HTML> <html>
Búbos banka 20 pont A következő feladatban egy weboldalt kell készítenie a búbos banka rövid bemutatására a feladatleírás és a minta szerint. A feladat megoldása során a következő állományokat kell felhasználnia:
RészletesebbenMicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
RészletesebbenStíluslapok használata (CSS)
2. Laboratóriumi gyakorlat Stíluslapok használata (CSS) A gyakorlat célja: Bevezetés a CSS stíluslapok használatába. Felkészüléshez szükséges anyagok: 1. A 3-as segédlet (CSS) 2. A bibliográfia HTML illetve
RészletesebbenKelda WebGrafika Iroda Példa HTML, CSS formázásra
A dokumentumban a http://webgrafikairoda.hu/szovegestartalom/ oldal html és css kódját mutatjuk be, ezzel azonnal használható, gyakorlatias segítséget nyújtva weboldalak szöveges tartalmának szerkesztéséhez.
RészletesebbenHTML. Dr. Nyéki Lajos 2016
HTML Dr. Nyéki Lajos 2016 HTML és SGML HTML (Hypertext Markup Language) SGML (Standard Generalized Markup Language) ISO 8879:1986 A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren:.html;
RészletesebbenCOMET webalkalmazás fejlesztés. Tóth Ádám Jasmin Media Group
COMET webalkalmazás fejlesztés Tóth Ádám Jasmin Media Group Az előadás tartalmából Alapproblémák, fundamentális kérdések Az eseményvezérelt architektúra alapjai HTTP-streaming megoldások AJAX Polling COMET
RészletesebbenMicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
RészletesebbenPHP. Adatbázisok gyakorlat
PHP Adatbázisok gyakorlat Mi a PHP? A PHP (PHP: Hypertext Preprocessor) egy nyílt forráskódú, számítógépes szkriptnyelv, legfőbb felhasználási területe a dinamikus weboldalak készítése. A PHP-kódunk általában
RészletesebbenAlgoritmus terv. 1. Algoritmus általános áttekintése. 2. Inputok és outputok definiálása. 3. Folyamatok meghatározása. 4. Programozási utasítások
Ez a kép most nem jeleníthető meg. Algoritmus terv 1. Algoritmus általános áttekintése 2. Inputok és outputok definiálása 3. Folyamatok meghatározása 4. Programozási utasítások Készült az Agora Alapítvány
RészletesebbenInternet 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észletesebbenDOBOZOK. A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)
CSS DOBOZOK DOBOZOK A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content) TARTALOM Ez maga az elem, amelyik a dobozt létrehozza. KITÖLTÉS A tartalom
RészletesebbenWEB 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észletesebbenHTML parancsok (html tanfolyam témakörei)
HTML parancsok (html tanfolyam témakörei) 1. Bevezető HTML, HEAD, TITLE parancs 2. Karakter formázás: félkövér, dölt, aláhúzott, fejléc: H1, H2, h6 csökkenő betűméret új bekezdés, új
RészletesebbenECDL Táblázatkezelés. www.nomina3p.hu 1. 4.1.1 A táblázatkezelés első lépései. 4.1.2 Beállítások elvégzése
4.1 Az alkalmazás 4.1.1 A táblázatkezelés első lépései 4.1.2 Beállítások elvégzése 4.1.1.1 A táblázatkezelő alkalmazás megnyitása és bezárása. 4.1.1.2 Egy és több munkafüzet (dokumentum) megnyitása. 4.1.1.3
RészletesebbenWeb technológiák 1. Gy: HTML, CSS B IT MAN. 107/1 v:
Web technológiák 1. Gy: HTML, CSS 107/1 v: 2016.01.24 A Web világa 1. A HTML, a CSS és a JavaScript a legnépszerűbb programozási nyelvek a világon. A Web ezekre épül. A böngészők értelmezik és megjelenítik
RészletesebbenSakk-játék. 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ó Sakk-játék Feladat: JavaScript és CSS segítségével sakk-játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez
RészletesebbenWeb 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észletesebbenTartalomjegyzék BEVEZETÉS... IX WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1. II. Háttér beállítása I. Elsõ weblapunk III. Karakterformázás...
Tartalomjegyzék BEVEZETÉS.............. IX Kedves Olvasó.................... ix Kedves érettségizõ!................. x A mintafeladatok használata......... x WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1 I. Elsõ
RészletesebbenWWW 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észletesebbenAJAX Framework építés. Nagy Attila Gábor Wildom Kft. nagya@wildom.com
AJAX Framework építés Wildom Kft. nagya@wildom.com Mi az AJAX? Asynchronous JavaScript and XML Ennél azért kicsit több: Koncepció váltás a felhasználói interface tervezésben Standard kompatibilis HTML!
Részletesebben2. A HTML NYELV ALAPJAI
2. A HTML NYELV ALAPJAI 2.1. Bevezetés Az Internet publikálás és alkalmazásfejlesztés nyelve. A HTML összes lehetőségét felhasználva jól megszerkesztett weboldalakat hozhatunk létre. A HTML (Hypertext
RészletesebbenPHP. Telepítése: Indítás/újraindítás/leállítás: Beállítások: A PHP nyelv
PHP A PHP rövidítés jelentése hivatalosan: PHP Hypertext Preprocessor. Ez egy kiszolgáló-oldali parancsnyelv, amit jellemzően HTML oldalakon használnak. A különbség a két nyelv között az, hogy a kiszolgáló
RészletesebbenWeb-fejlesztés NGM_IN002_1
Web-fejlesztés NGM_IN002_1 Alap reprezentációs technológiák HTML Hyper Text Markup Language SGML alkalmazás Dokumentum-struktúra leírásra nem lap leírás! hiperszöveg dokumentum szemantika fejlécek listák
RészletesebbenWEB TECHNOLÓGIÁK 3.ELŐADÁS
Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 3.ELŐADÁS 2014-2015 tavasz Stíluslapok (CSS) használata Mi a CSS? 2 A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok
RészletesebbenTáblázatok. Utolsó módosítás: 11/22/ :07:23
Táblázatok Utolsó módosítás: 11/22/2004 13:07:23 A táblázat megadása a tag használatával lehetséges. A és tageken belül, a elemekkel adhatjuk meg a táblázat sorait. A elemek a sorokon
RészletesebbenWebtárhely létrehozása a WWW.freeweb.hu helyen. Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu. 2. Jobb oldalon regisztrálni (tárhelyigénylés).
Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu Kép 2. Jobb oldalon regisztrálni (tárhelyigénylés). 3. 4. Értelemszerűen kitölteni a regisztrációs lapot, és elküldeni. 5. Postafiókomra érkező levélben
RészletesebbenS z á m í t ó g é p e s a l a p i s m e r e t e k
S z á m í t ó g é p e s a l a p i s m e r e t e k 7. előadás Ami eddig volt Számítógépek architektúrája Alapvető alkotóelemek Hardver elemek Szoftver Gépi kódtól az operációs rendszerig Unix alapok Ami
Részletesebben3. 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észletesebbenA 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észletesebbenHTML szerkesztés. HTML bevezetés
HTML szerkesztés HTML bevezetés Az internet fogalma: egy világméretű számítógép-hálózat, amely kisebb hálózatok összekapcsolódásából áll össze, a hálózatok hálózata, mely adatok továbbítását teszi lehetővé
RészletesebbenHTML, 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észletesebbenWebshop 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észletesebbenGoogle Web Toolkit. Elek Márton. Drótposta kft.
Google Web Toolkit Elek Márton Drótposta kft. Tartalom A GWT általában Java forrás, Web mód, Hosted mód Speciális szolgáltatások History kezelés, távoli eljárás hívás, Külső függvénykönyvtárak GWT-Ext,
RészletesebbenTartalom. A JavaScript haladó lehet ségei. Megjelenés. Viselkedés. Progresszív fejlesztés. A progresszív fejlesztés alapelvei
Tartalom A JavaScript haladó lehet ségei webprogramozó A szöveg, amit a látogató az oldalainkon olvashat Szövegként írjuk meg HTML elemekkel osztjuk egységekre Megjelenés A szöveg kinézete és elrendezése
Részletesebben