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 I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 2
form, input szöveges <form> Vezetéknév: <input type="text" name="vezeteknev"> <br> Keresztnév: <input type="text" name="keresztnev"> </form> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 3
Rádió gomb <form> <input type="radio" name="nem" value="no">nő</input> <br> <input type="radio" name="nem" value="ferfi">férfi</input> </form> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 4
Jelölőnégyzet <form> <input type="checkbox" name="bicikli"> Van biciklim <br> <input type="checkbox" name="auto"> Van autóm </form> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 5
label elem <form> <input type="radio" name="nem" value="no" id="no"> <label for="no">nő</label> <br> <input type="radio" name="nem" value="ferfi" id="ferfi"> <label for="ferfi">férfi</label> </form> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 6
Űrlap adatok elküldése <form name="input" action="feldolgoz.php" method="get"> Felhasználói név: <input type="text" name="nev"> <input type="submit" value="küldés"> </form> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 7
Lenyíló lista <form> <select name="autok"> <option value="audi">audi <option value="fiat">fiat <option value="skoda">skoda <option value="suzuki" selected="selected">suzuki </select> </form> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 8
Több soros szöveges mező <textarea rows="10" cols="30">kezdőszöveg</textarea> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 9
Példa Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 10
Űrlap források http://www.webaim.org/techniques/forms/controls.php http://www.websemantics.co.uk/tutorials/accessible_forms/ http://www.alistapart.com/articles/prettyaccessibleforms http://www.lukew.com/resources/articles/webforms_lukew.pdf Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 11
HTML szabványok HTML 4.01 transitional, strict, frameset XHTML 1.0: nincs frameset XHTML 1.1: csak egyféle van Validátor: http://validator.w3.org/ Firefox: Tidy HTML Validator kiterjesztés Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 12
Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 13
Stílusok külső stíluslap: link vagy style belső stílus: style soron belüli: style tulajdonság (érdemes kerülni) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 14
Külső stíluslap <link rel="stylesheet" type="text/css" href="stilus.css"> <style type="text/css"> @import url("stilus.css"); </style> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 15
Beágyazott stíluslap <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>... </head> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 16
Soron belüli stílus <p style="color: red; margin-left: 20px"> Ez egy bekezdés</p> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 17
"Joker" elemek div, span csak a stílusos formázás miatt kellenek, jelentésük nincs [DEMO] http://www.opendesigns.org/preview/?template=1181 Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 18
Fejrész (head) title meta: keywords, description,... base href link: külső fájlok (CSS, JavaScript, RSS) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 19
Szkriptek belső: <script type="text/javascript"> document.write("a böngésző támogatja a JavaScriptet.") </script> külső <script type="text/javascript" src="message.js"></script> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 20
Általános tulajdonságok class, id, style, title dir, lang accesskey, tabindex esemény tulajdonságok: onxxx Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 21
URL kódolás Űrlapba bármit be lehet írni, az URL viszont nem bír el bármit: kódolni kell pl. szóköz: %20 Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 22
CSS Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 23
Listák list-style-type: disc, circle, square, none, decimal, lower-roman, upper-alpha,... list-style-image: url('arrow.gif') list-style-position: inside, outside közös: list-style: square inside url('arrow.gif') Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 24
Méretek width, height min-width, max-width Explorer hiba: Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 25
A megjelenítés módja display: block, inline vagy none elem függő az alapértemezés (block vagy inline) p {display: inline} div {display: none} <p>első bekezdés.</p> <p>második bekedés.</p> <div>nem látható div elem.</div> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 26
Lebegtetés legtöbbször képnél alkalmazzák a "szöveg körbefuttatására" [DEMO: kép aláírással] [DEMO: horizontális menü] Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 27
Felesleges táblázatok nélküli oldalkialakítás Elavult technikák: keretek, tárbázat az oldalszerkezet kialakítására, távtartó gif-ek, stb. [DEMO: oldalszerkezet] Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 28
Pozícionálási sémák alapértelmezett: static relatív: odébb toljuk az elemet, ettől a helye nem lesz tartalommal kitötve, üresen marad [DEMO: cím árnyékkal] abszolút pozíció: kikerül a sémából, a helye is fel lesz használva fix: az ablakhoz képest (keretek helyett használható!) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 29
Láthatóság visibility: visible vagy hidden eltérés a display:none-től: itt a helye megmarad felhasználás: több "füles" dialógusablak: div-ek egymáson, és mindig csak egy látszik Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 30
Látszólagos osztályok speciális hatást tudunk elérni, amit máshogy nem tudnánk csak megjelenítés alatt derül ki, mit és hogyan kell formázni legismertebb a linkek viselkedése: a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 31
Média típusok Ma már nem csak képernyőn nézünk weboldalakat @media screen { p.test {font-family: verdana, sans-serif; fontsize: 14px} } @media print { p.test {font-family: times, serif; font-size: 10px} } @media screen, print { p.test {font-weight: bold} } Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 32
Külön stíluslapok fontosabb eszközök: all, aural, handheld, print, projection, screen lehet teljesen külön, vagy csak részben szétválasztva <link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 33
Linkek Validátor: http://jigsaw.w3.org/css-validator/ 10 (!) cikk: http://weblabor.hu/cikkek/cssalapjai1 http://css.lap.hu http://www.opendesigns.org/ Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 34