"Εθαπμογέρ Διαδικηύος"

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download ""Εθαπμογέρ Διαδικηύος""

Αγαθίας Αλεξανδρίδης
8 χρόνια πριν
Προβολές:

"Εθαπμογέρ Διαδικηύος" Πλαίζια http://www.elizabethcastro.

1 "Εθαπμογέρ Διαδικηύος" Πλαίζια Φόπμερ Ιυάννινα 2008 Ι. Παπαδόποςλορ 1

2 Πλαίζια <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <frameset> </frameset> ιδιόηηηες: rows="20, *, 10%" ύτορ ππώηηρ γπαμμήρ: 20px (απόλςηη ηιμή) ύτορ δεύηεπηρ γπαμμήρ: όζο πεπιζζεύει από ηην ππώηη και ηην ηπίηη ύτορ ηπίηηρ γπαμμήρ: 10% ηος ύτοςρ ηος παπαθύπος ηος θςλλομεηπηηή cols="15%, 25, *, 35" πλάηορ ππώηηρ ζηήληρ: 15% ηος πλάηοςρ ηος παπαθύπος ηος θςλλομεηπηηή πλάηορ δεύηεπηρ ζηήληρ: 25px (απόλςηη ηιμή) πλάηορ ηπίηηρ ζηήληρ: όζο πεπιζζεύει από ηην ππώηη, ηη δεύηεπη και ηην ηέηαπηη πλάηορ ηέηαπηηρ ζηήληρ: 35px (απόλςηη ηιμή) Ιυάννινα 2008 Ι. Παπαδόποςλορ 2

3 Πλαίζια <frame> </frame> ιδιόηηηερ: name="όνομα" για σπήζη από ζενάπια JavaScript ή από ζςνδέζμοςρ μέζυ ηηρ ιδιόηηηαρ target src="διεύθςνζη URL" Σο URL ηηρ ζελίδαρ πος θα εμθανιζηεί απσικά ζηο πλαίζιο Ιυάννινα 2008 Ι. Παπαδόποςλορ 3

Πλαίζια άλλερ ιδιόηηηερ ηος frame frameborder longdesc 1 0 URL εμθάνιζη ή απόκπςτη ηος πεπιθυπίος ηος πλαιζίος ένα URL ππορ ηην πεπιγπαθή ηος πεπιεσομένος ηος πλαιζίος, για θςλλομεηπηηέρ πος δεν

4 Πλαίζια άλλερ ιδιόηηηερ ηος frame frameborder longdesc 1 0 URL εμθάνιζη ή απόκπςτη ηος πεπιθυπίος ηος πλαιζίος ένα URL ππορ ηην πεπιγπαθή ηος πεπιεσομένος ηος πλαιζίος, για θςλλομεηπηηέρ πος δεν ςποζηηπίζοςν πλαίζια marginheight pixels εύπορ ηος πάνυ και κάηυ πεπιθυπίος ηος πλαιζίος marginwidth pixels εύπορ ηος απιζηεπού και δεξιού πεπιθυπίος ηος πλαιζίος noresize noresize όηαν ηεθεί, δεν επιηπέπεηαι η αλλαγή μεγέθοςρ ηος πλαιζίος scrolling yes no auto καθοπιζμόρ λειηοςπγίαρ ηηρ ηαινίαρ κύλιζηρ (ενεπγή, ανενεπγή, αςηόμαηη) Ιυάννινα 2008 Ι. Παπαδόποςλορ 4

Πλαίζια Try It Editor: http://www.w3schools.com/html/tryit.asp?

5 Πλαίζια Try It Editor: <frameset cols="20%,2*,3*,20%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <frame src="frame_a.htm" /> </frameset> Ιυάννινα 2008 Ι. Παπαδόποςλορ 5

6 Πλαίζια <frameset rows=" 50, *, 30% "> <frame src="frame_a.htm" /> <frameset cols=" 20%, 50%, * "> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <frame src="frame_a.htm" /> </frameset> <frame src="frame_b.htm" /> </frameset> Ιυάννινα 2008 Ι. Παπαδόποςλορ 6

7 Πλαίζια <frameset rows="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> πεπιζζόηεπα παπαδείγμαηα online: Ιυάννινα 2008 Ι. Παπαδόποςλορ 7

8 Εμβόλιμα πλαίζια: iframe <html><body> <iframe src="frame_a.htm"> </iframe> <p>some older browsers don't support iframes. If they don't, the iframe will not be visible.</p> </body></html> Ιυάννινα 2008 Ι. Παπαδόποςλορ 8

9 Πλαίζια <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm" /> <frame src="frame_a.htm" name="showframe" /> </frameset> </html> tryhtml_contents.htm : <html><body> <a href ="frame_a.htm" target ="showframe">frame a</a><br /> <a href ="frame_b.htm" target ="showframe">frame b</a><br /> <a href ="frame_c.htm" target ="showframe">frame c</a> </body></html> Ιυάννινα 2008 Ι. Παπαδόποςλορ 9

10 Μία θόπμα πεπιλαμβάνει ζηοισεία ειζαγυγήρ δεδομένυν ηο ζενάπιο επεξεπγαζίαρ ηυν ζηοισείυν αςηών Ιυάννινα 2008 Ι. Παπαδόποςλορ 10

11 ενάπιο CGI Common Gateway Interface Μποπεί να είναι γπαμμένο ζε οποιαδήποηε γλώζζα ππογπαμμαηιζμού perl php C C++ Java shell script (π.σ. bash, csh, ) Ιυάννινα 2008 Ι. Παπαδόποςλορ 11

12 Παπάδειγμα ζεναπίος CGI: ο κώδικαρ ηος ζεναπίος αςηού θαίνεηαι ζηο #!/bin/bash echo "content-type:text/html" echo echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>the Title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>' echo "<p style=\"font-size:75%;\">" echo "`date`<br/>" echo "</p>" Ιυάννινα 2008 Ι. Παπαδόποςλορ 12

13 ζσνέτεια echo "<p style=\"font-size:1.2em;\">" echo "Αςηό είναι ηο ππόγπαμμα <span style=\"color:green;\">`basename $0`</span>" echo "πος εκηελείηαι ζηον ςπολογιζηή `hostname`" echo "($HTTP_HOST, `/sbin/ifconfig eth0 grep 'inet addr' sed -e -e echo "με οπίζμαηα:<br/>" echo "QUERY_STRING = <span style=\"color:red;\">$query_string</span> " if [! X$QUERY_STRING = X ]; then echo "<p>ανάλςζη οπιζμάηυν:<br/>" echo $QUERY_STRING tr '&' '\n' while read f ; do echo $f awk '{print $0"<br/>"}' ; done echo "</p>" fi echo "</p>" echo "<p>μεηαβληηέρ πεπιβάλλονηορ πος σπηζιμοποιούνηαι: <ul style=\"font-family:monospace;\">" env sort awk '{if ($0!= "") print "<li>"$0"</li>"}' echo "</ul></p>" echo "</body></html>" Ιυάννινα 2008 Ι. Παπαδόποςλορ 13

14 Δημιοςπγία θόπμαρ: <form> </form> περιγραθή ηης θόρμας και ειζαγωγή πεδίων ειζόδοσ ιδιόηηηερ: action="διεύθςνζη URL ζεναπίος" Σο ζενάπιο ζηο οποίο θα αποζηαλούν ηα δεδομένα ηηρ θόπμαρ method="get ή post" Σπόπορ αποζηολήρ ηυν δεδομένυν ηηρ θόπμαρ Η "get" επιζςνάπηει ηα δεδομένα ζηο URL ηος ζεναπίος και ηο θοπηώνει Η "post" ενζυμαηώνει ηα δεδομένα ζηο κςπίυρ ζώμα ενόρ απσείος HTML πος αποζηέλλεηαι ζηο ζενάπιο ηο οποίο θοπηώνεηαι Ιυάννινα 2008 Ι. Παπαδόποςλορ 14

15 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Πλαίζια κειμένος: <input type="text" name="όνομα" /> value="αρτική ηιμή" size="πλάηος ζε ταρακηήρες" maxlength="μέγιζηο πλάηος" παπάδειγμα: Ιυάννινα 2008 Ι. Παπαδόποςλορ 15

16 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Πλαίζια ειζαγυγήρ κυδικών ππόζβαζηρ: <input type="password" name="όνομα" /> size="πλάηος ζε ταρακηήρες" maxlength="μέγιζηο πλάηος" παπάδειγμα: Ιυάννινα 2008 Ι. Παπαδόποςλορ 16

17 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Ραδιοπλήκηπα: <input type="radio" name="όνομα" value="δεδομένα ποσ θα ζηαλούν αν επιλεγεί" checked="checked" για να είναι πποεπιλεγμενο /> όηαν ανοίγει η ζελίδα Ομάδα παδιοπλήκηπυν εθόζον έσοςν ηο ίδιο όνομα Ιυάννινα 2008 Ι. Παπαδόποςλορ 17

παπάδειγμα με παδιοπλήκηπα: <form action="http://pc-24.physics.uoi.gr/cgi-bin/test.

value="3" checked="checked">τρίηη<br/> <input type="radio" name="d" value="4">τεηάρηη<br/> <input type="radio" name="d" value="5">πέμπηη<br/> <input

18 παπάδειγμα με παδιοπλήκηπα: <form action=" > ημέρα γέννηζης:<br/> <div style="border-style:dotted;width:100px;"> <input type="radio" name="d" value="2">δεσηέρα<br/> <input type="radio" name="d" value="3" checked="checked">τρίηη<br/> <input type="radio" name="d" value="4">τεηάρηη<br/> <input type="radio" name="d" value="5">πέμπηη<br/> <input type="radio" name="d" value="6">παραζκεσή<br/> <input type="radio" name="d" value="7">σάββαηο<br/> <input type="radio" name="d" value="1">κσριακή<br/> </div> <input type="submit"> </form> αποζηολή δεδομένυν: d=7 Ιυάννινα 2008 Ι. Παπαδόποςλορ 18

19 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Πλαίζια ελέγσος: <input type="checkbox" name="όνομα" value="δεδομένα ποσ θα ζηαλούν αν επιλεγεί" checked="checked" για να είναι πποεπιλεγμενο /> όηαν ανοίγει η ζελίδα Ομάδα πλαιζίυν ελέγσος εθόζον έσοςν ηο ίδιο όνομα Ιυάννινα 2008 Ι. Παπαδόποςλορ 19

παπάδειγμα με πλαίζια ελέγσος: <form action="http://pc-24.physics.uoi.gr/cgi-bin/test.

20 παπάδειγμα με πλαίζια ελέγσος: <form action=" > ημέρες μαθήμαηος:<br/> <div style="border-style:dotted;width:120px;"> <input type="checkbox" name="day" value="mon">δεσηέρα<br/> <input type="checkbox" name="day" value="tue" checked="checked">τρίηη<br/> <input type="checkbox" name="day" value="wed" checked="checked">τεηάρηη<br/> <input type="checkbox" name="day" value="thu">πέμπηη<br/> <input type="checkbox" name="day" value="fri">παραζκεσή<br/> <input type="checkbox" name="day" value="sat">σάββαηο<br/> <input type="checkbox" name="day" value="sun">κσριακή<br/> </div> <input type="submit"> </form> αποζηολή δεδομένυν: day=tue&day=thu Ιυάννινα 2008 Ι. Παπαδόποςλορ 20

21 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Μενού επιλογών: select & option <select name="cars"> <option value="a1">volvo</option> <option value="a2">saab</option> <option value="a3">fiat</option> <option value="a4">audi</option> </select> αποζηολή δεδομένυν: cars=a1 ή cars=a2 ή cars=a3 ή cars=a4 Ιυάννινα 2008 Ι. Παπαδόποςλορ 21

παπάδειγμα ενόρ μενού επιλογών: <form action="http://pc-24.physics.uoi.gr/cgi-bin/test.

value="proton" >πρωηόνιο</option> <option value="neutron" >νεηρόνιο</option> <option value="pion" selected="selected"

22 παπάδειγμα ενόρ μενού επιλογών: <form action=" > επιλογή ζωμαηιδίοσ:<br/> <select name="particle"> <option value="electron" >ηλεκηρόνιο</option> <option value="proton" >πρωηόνιο</option> <option value="neutron" >νεηρόνιο</option> <option value="pion" selected="selected" >πιόνιο</option> <option value="muon" >μιόνιο</option> </select> <input type="submit"> </form> αποζηολή δεδομένυν: particle=proton Ιυάννινα 2008 Ι. Παπαδόποςλορ 22

ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Μεγαλύηεπα

rows="10" cols="30"> Αςηό είναι ηο απσικό κείμενο, ηο

</textarea> παπάδειγμα: http://www.w3schools.

23 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: Μεγαλύηεπα πλάιζια κειμένος: textarea <textarea name="όνομα" rows="10" cols="30"> Αςηό είναι ηο απσικό κείμενο, ηο οποίο μποπεί να ανηικαηαζηαθεί από ηο σπήζηη. </textarea> παπάδειγμα: Ιυάννινα 2008 Ι. Παπαδόποςλορ 23

24 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: κοςμπί ςποβολήρ: submit <input type="submit" value="μήνσμα ποσ εμθανίζεηαι ζηο κοσμπί" /> Ιυάννινα 2008 Ι. Παπαδόποςλορ 24

25 <form action=" method="get"> Όνομα: <input type="text" name="onoma" value="mickey" size="20" /> <br /> Επίθετο: <input type="text" name="epitheto" value="mouse" size="20" /> <br /> <input type="submit" value="υποβολή" /> </form> <p> Παηώνηας ηο κοσμπί "σποβολή", θα ζηείλεηε ηα δεδομένα ζας ζηην ιζηοζελίδα " </p> Ιυάννινα 2008 Ι. Παπαδόποςλορ 25

26 ηοισεία ειζαγυγήρ δεδομένυν ζε μία θόπμα: κοςμπί επαναθοπάρ: reset <input type="reset" value="μήνσμα ποσ εμθανίζεηαι ζηο κοσμπί" /> Ιυάννινα 2008 Ι. Παπαδόποςλορ 26

27 <form action=" method="get"> Όνομα: <input type="text" name="onoma" value="mickey" size="20" /> <br /> Επίθετο: <input type="text" name="epitheto" value="mouse" size="20" /> <br /> <input type="submit" value="υποβολή" /> <input type="reset" value="επαναφορά" /> </form> <p> Παηώνηας ηο κοσμπί "σποβολή", θα ζηείλεηε ηα δεδομένα ζας ζηην ιζηοζελίδα " </p> Ιυάννινα 2008 Ι. Παπαδόποςλορ 27

Σχετικά έγγραφα

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .