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

HTML
DOWNLOAD

Méret: px

Mutatás kezdődik a ... oldaltól:

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

Erzsébet Csenge Somogyiné
9 évvel ezelőtt
Látták:

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

2 Ű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, tanév, őszi félév 2

radio jelölőnégyzet: checkbox küldés gomb: submit Web

3 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, tanév, őszi félév 3

4 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, tanév, őszi félév 4

5 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, tanév, őszi félév 5

6 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, tanév, őszi félév 6

value="ferfi" id="ferfi"> <label for="ferfi">férfi</label> </form>

7 Ű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, tanév, őszi félév 7

name="nev"> <input type="submit" value="küldés"> </form> Web

8 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, tanév, őszi félév 8

9 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, tanév, őszi félév 9

10 Példa Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 10

11 Űrlap források Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 11

com/articles/prettyaccessibleforms http://www.lukew.

12 HTML szabványok HTML 4.01 transitional, strict, frameset XHTML 1.0: nincs frameset XHTML 1.1: csak egyféle van Validátor: Firefox: Tidy HTML Validator kiterjesztés Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 12

1: csak egyféle van Validátor: http://validator.w3.

13 Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 13

0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.

14 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, tanév, őszi félév 14

15 Külső stíluslap <link rel="stylesheet" type="text/css" href="stilus.css"> <style url("stilus.css"); </style> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 15

css"> <style type="text/css"> @import url("stilus.

16 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, tanév, őszi félév 16

17 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, tanév, őszi félév 17

18 "Joker" elemek div, span csak a stílusos formázás miatt kellenek, jelentésük nincs [DEMO] Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 18

19 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, tanév, őszi félév 19

20 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, tanév, őszi félév 20

") </script> külső <script type="text/javascript" src="message.

21 Á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, tanév, őszi félév 21

22 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, tanév, őszi félév 22

23 CSS Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 23

24 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, tanév, őszi félév 24

25 Méretek width, height min-width, max-width Explorer hiba: Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 25

26 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, tanév, őszi félév 26

27 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, tanév, őszi félév 27

28 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, tanév, őszi félév 28

29 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, tanév, őszi félév 29

30 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, tanév, őszi félév 30

31 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, tanév, őszi félév 31

32 Média típusok Ma már nem csak képernyőn nézünk screen { p.test {font-family: verdana, sans-serif; fontsize: 14px} print { p.test {font-family: times, serif; font-size: 10px} screen, print { p.test {font-weight: bold} } Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 32

33 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, tanév, őszi félév 33

34 Linkek Validátor: 10 (!) cikk: Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 34

Hasonló dokumentumok

(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