Εισαγωγή στην HTML (2)

Transcript

1 Εισαγωγή στην HTML (2) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος

2 Εικόνες Βασικοί τύποι εικόνων στην HTML gif jpg bmp (μεγάλο μέγεθος αρχείου) tiff (μεγάλο μέγεθος αρχείου) Ετικέτα <img/> Εισαγωγή μιας εικόνας στη σελίδα Χαρακτηριστικά της ετικέτας <img/> src alt height width Προγραμματισμός ιστοσελίδων 2

3 Εικόνες Χαρακτηριστικό src μιας εικόνας Δηλώνει την τοποθεσία που βρίσκεται το αρχείο της <img src="multimedia.gif" /> Χαρακτηριστικό alt μιας εικόνας Δηλώνει τον τίτλο της εικόνας Σε browser που δεν υποστηρίζουν γραφικά στη θέση της εικόνας θα φαίνεται ο τίτλος της <img src="multimedia.gif" alt="δικτυωμένα Πολυμέσα"/> Χαρακτηριστικά height και width μιας εικόνας height: καθορισμός ύψους width: καθορισμός πλάτους <img src="multimedia.gif" alt="δικτυωμένα Πολυμέσα" height="419" width="336"/> Προγραμματισμός ιστοσελίδων 3

4 Εικόνες <img src="multimedia.gif" alt="δικτυωμένα Πολυμέσα" height="219" width="336"/> <img src="multimedia.gif" alt="δικτυωμένα Πολυμέσα" height="419" width="336"/> Προγραμματισμός ιστοσελίδων 4

5 Δεσμοί Οι δεσμοί υπερκειμένου δηλώνονται με την ετικέτα <a href=τοποθεσία_δεσμού>ονομασία_δεσμού</a> Ο δεσμός υπερκειμένου μπορεί να αναφέρεται σε τοπικό αρχείο <a href="index2.html">πανεπιστήμιο Πελοποννήσου</a> σε κάποια τοποθεσία στο web <a href= Πελοποννήσου</a> σε τμήμα της σελίδας <a href= #Index >Περιεχόμενα</a> Ο δεσμός παρουσιάζεται με διαφορετικό χρώμα αν τον έχουμε ήδη επισκεφθεί Προγραμματισμός ιστοσελίδων 5

6 Δεσμοί σε τοπικά αρχεία Τοπικό αρχείο = αρχείο που βρίσκεται στο ίδιο μηχάνημα με το Server Τοποθεσία αρχείου στο ίδιο υποκατάλογο με τη σελίδα <a href="basket.html">καλάθι αγορών</a> σε υποκατάλογο του καταλόγου της σελίδας <a href="clients/basket.html">καλάθι αγορών</a> σε προηγούμενο επίπεδο καταλόγου σε σχέση με τη σελίδα <a href="../basket.html">καλάθι αγορών</a> Προγραμματισμός ιστοσελίδων 6

7 Δεσμοί σε τοποθεσίες στο Web Χρήση URL (Uniform Resource Locator) για καθορισμό της τοποθεσία protocol://internet_address/directory/filename Στοιχεία του URL Protocol τύπος πρωτόκόλλου για τη μεταφορά του αρχείου HTTP FTP internet_address διεύθυνση του Server σε μορφή host.domain διεύθυνση IP του Server που φιλοξενεί το αρχείο Παράδειγμα: <a href= Πανεπιστήμιο Πελοποννήσου </a> Προγραμματισμός ιστοσελίδων 7

8 Δεσμοί σε τοποθεσίες στο Web Παράδειγμα χωρίς filename: <a href= Πανεπιστήμιο Πελοποννήσου </a> Στην περίπτωση που δεν καθορίζεται το filename, o browser ψάχνει αυτόματα για τα αρχεία index.html index.htm index.php κτλ. ανάλογα με τις επιλογές στον Web Server Προγραμματισμός ιστοσελίδων 8

9 Δεσμοί σε τμήματα της σελίδας Σε κάθε τμήμα της σελίδας που μας ενδιαφέρει να μεταβούμε κάποια στιγμή δίνουμε ένα όνομα Χρήση του χαρακτηριστικού name της ετικέτας <a> <a name="multimedia">multimedia</a> Το όνομα δεν εμφανίζεται στον browser Για να μεταβούμε στο τμήμα της σελίδας χρησιμοποιούμε το χαρακτηριστικό href σε συνδυασμό με το χαρακτήρα # <a href="#multimedia">multimedia</a> <a href= Πανεπιστήμιο Πελοποννήσου </a> Προγραμματισμός ιστοσελίδων 9

10 Ειδικοί χαρακτήρες Παρουσίαση στην σελίδα ειδικών χαρακτήρων μη υπαρκτών στο πληκτρολόγιο σύμβολα απαγορευμένων χαρακτήρων < > κενών Χρήση του &xxxx; όπου xxxx είναι ο κωδικός του ειδικού χαρακτήρα Σύμβολα ευρώ ( ή &8364;) βαθμός ( ) copyright ( ) Προγραμματισμός ιστοσελίδων 10

11 Ειδικοί χαρακτήρες Απαγορευμένοι χαρακτήρες < (<) > (>) & (&) Κενά Δημιουργία κενού ( ) Αποτροπή αυτόματου χωρισμού του κειμένου μεταξύ δύο λέξεων λόγω αλλαγής γραμμής εκτός περιθωρίου Προγραμματισμός ιστοσελίδων 11

12 Προσχηματισμένο κείμενο Κατά την εμφάνιση του κειμένου ο browser αφαιρεί τα κενά εκτός αν έχουμε χρησιμοποιήσει ( ) διαχωρίζει αυτόματα τις γραμμές Για να διατηρήσουμε τη μορφοποίηση του κειμένου όπως φαίνεται στον editor χρησιμοποιούμε την ετικέτα <pre> </pre> Αποτροπή αλλοίωσης της μορφής σε ένα κομμάτι κώδικα <pre> for (int i=0;i<15;i++) { System.out.println("Hello from UOP"); } </pre> Προγραμματισμός ιστοσελίδων 12

13 Στοίχιση Η HTML παρέχει την δυνατότητα στοίχισης κειμένου εικόνων κελιών ενός πίνακα κομματιού μιας σελίδας Η στοίχιση γίνεται με χρήση των χαρακτηριστικών align και valign που έχουν πολλές ετικέτες της HTML align: οριζόντια στοίχιση valign: κάθετη στοίχιση Προγραμματισμός ιστοσελίδων 13

14 Στοίχιση Τρόπος στοίχισης Οριζόντια (align) left (αριστερή) right (δεξιά) center (στο κέντρο) justify (ακριβές ταίριασμα ορίου) Κάθετη (valign) bottom (κάτω) middle (στο κέντρο) top (πάνω) <p align="center">hello from UOP</p> <td align="center" valign="middle">hello from UOP</td> Προγραμματισμός ιστοσελίδων 14

15 Στοίχιση κειμένου <h3 align="center">προγραμματσμός Ιστοσελίδων</h3> <p >Ο βασικός στόχος του μαθήματος είνα η εξοικίωση με τη δημιουργία και διαχείριση ιστοσελίδων</p> <h3 align="right">προγραμματσμός Ιστοσελίδων</h3> <p align="center">ο βασικός στόχος του μαθήματος είνα η εξοικίωση με τη δημιουργία και διαχείριση ιστοσελίδων</p> Προγραμματισμός ιστοσελίδων 15

16 Στοίχιση εικόνων <p> <img src="uop.gif" alt="uop symbol" width="75" height="77" align="left" /> Πανεπιστήμιο Πελοποννήσου </p> <p> <img src="uop.gif" alt="uop symbol" width="75" height="77" align="right" /> Πανεπιστήμιο Πελοποννήσου </p> Προγραμματισμός ιστοσελίδων 16

17 Στοίχιση εικόνων Με την ετικέτα <br clear=all> καθορίζουμε ότι το κείμενο θα συνεχίσει μετά το τέλος της εικόνας <p> <img src="uop.gif" alt="uop symbol" width="75" height="77" align="left" /> Πανεπιστήμιο <br clear=all> Πελοποννήσου </p> Προγραμματισμός ιστοσελίδων 17

18 Στοίχιση τμημάτων της σελίδας Με το χαρακτηριστικό align της ετικέτας <div> μπορούμε να στοιχίσουμε ένα τμήμα της σελίδας το τμήμα που περιέχεται μέσα στην ετικέτα <div> <div align="center"> <font color="red" size="5">hello from UOP</font> <h1>hello from UOP</h1> </div> Προγραμματισμός ιστοσελίδων 18

19 Πίνακες Στην HTML οι πίνακες χρησιμοποιούνται για την ταξινόμηση και οργάνωση των στοιχείων καλύτερη εμφάνιση των στοιχείων Κάθε πίνακας αποτελείται από μια ή περισσότερες γραμμές κάθε γραμμή περιέχει ένα ή περισσότερα κελιά <table> <tr><th>έτος Ισολογισμού</th><th>Κέρδος (χιλ. ευρώ)</th></tr> <tr><td>2007</td><td>30</td></tr> <tr><td>2008</td><td>26</td></tr> <tr><td>2009</td><td>32</td></tr> </table> Προγραμματισμός ιστοσελίδων 19

20 Πίνακες Ετικέτα <table> </table> Δηλώνει τον πίνακα και τα χαρακτηριστικά του Ετικέτα <tr> </tr> Ορίζει μια γραμμή του πίνακα Ετικέτα <th> </th> Καθορίζει τα στοιχεία των κελιών επικεφαλίδων Τα κελιά επικεφαλίδων εμφανίζονται με έντονα γράμματα (bold) και κεντραρισμένα (align=center) Ετικέτα <td> </td> Ορίζει ένα κελί δεδομένων Προγραμματισμός ιστοσελίδων 20

21 Πίνακες Χαρακτηριστικά της ετικέτας <table> border πάχος του περιγράμματος του πίνακα (σε pixels) cellpadding απόσταση των περιεχομένων των κελιών από το περίγραμμά του (σε pixels) cellspacing απόσταση μεταξύ γειτονικών κελιών στον πίνακα width πλάτος του πίνακα απόλυτα (αριθμός pixels) σχετικά (επί τις εκατό κάλυψη του παραθύρου του browser) Προγραμματισμός ιστοσελίδων 21

22 Πίνακες <table border="1"> <tr><th>έτος Ισολογισμού</th><th>Κέρδος (χιλ. ευρώ)</th></tr> <tr><td>2007</td><td>30</td></tr> <tr><td>2008</td><td>26</td></tr> <tr><td>2009</td><td>32</td></tr> </table> <p></p> <table border="1" cellpadding="10"> <tr><th>έτος Ισολογισμού</th><th>Κέρδος (χιλ. ευρώ)</th></tr> <tr><td>2007</td><td>30</td></tr> <tr><td>2008</td><td>26</td></tr> <tr><td>2009</td><td>32</td></tr> </table> <p></p> <table border="1" cellpadding="10" cellspacing="5"> <tr><th>έτος Ισολογισμού</th><th>Κέρδος (χιλ. ευρώ)</th></tr> <tr><td>2007</td><td>30</td></tr> <tr><td>2008</td><td>26</td></tr> <tr><td>2009</td><td>32</td></tr> </table> Προγραμματισμός ιστοσελίδων 22

23 Πίνακες <table border="1" cellpadding="10" cellspacing="5" width="400"> <table border="1" cellpadding="10" cellspacing="5" width="80%"> Προγραμματισμός ιστοσελίδων 23

24 Στοίχιση πινάκων <table border="1"> <tr><th>έτος Ισολογισμού</th><th>Κέρδος (χιλ. ευρώ)</th></tr> <tr align="center"><td>2007</td><td>30</td></tr> <tr align="center"><td>2008</td><td>26</td></tr> <tr align="center"><td>2009</td><td>32</td></tr> </table> Προγραμματισμός ιστοσελίδων 24

25 Πίνακες Επέκταση περιεχομένου σε περισσότερα κελιά rowspan επέκταση μιας γραμμής σε περισσότερες γραμμές <th rowspan="2">έτος Ισολογισμού</th> colspan επέκταση μιας στήλης σε περισσότερες στήλες <th colspan="3">κέρδος (χιλ. ευρώ)</th> Προγραμματισμός ιστοσελίδων 25

26 Πίνακες <table border="1"> <tr><th rowspan="2">έτος Ισολογισμού</th><th colspan="3">κέρδος (χιλ. ευρώ)</th></tr> <tr><th>πωλήσεις</th><th>μεταποιήσεις</th><th>ενοικιάσεις Χώρων</th></tr> <tr align="center"><td>2007</td><td>30</td><td>34</td><td>52</td></tr> <tr align="center"><td>2008</td><td>26</td><td>17</td><td>23</td></tr> <tr align="center"><td>2009</td><td>32</td><td>32</td><td>19</td></tr> </table> Προγραμματισμός ιστοσελίδων 26

27 Τίτλος πίνακα <table border="1"> <caption>κέρδη της επιχείρησης ανά έτος</caption> </table> <table border="1"> <caption align="bottom">κέρδη της επιχείρησης ανά έτος</caption> </table> Προγραμματισμός ιστοσελίδων 27

28 Χρώμα Για την αναπαράσταση των χρωμάτων χρησιμοποιείται η κωδικοποίηση RGB (Red Green Blue) "#RRGGBB" Η τελική απόχρωση δίνεται από το ποσοστό συμμετοχής καθενός από τα τρία βασικά χρώματα (κόκκινο R, πράσινο G και μπλε B) Το ποσοστό συμμετοχής εισάγεται σε δεκαεξαδική μορφή και κυμαίνεται από 00 (μηδενική συμμετοχή) μέχρι FF (πλήρης συμμετοχή) White #FFFFFF Cyan #00FFFF Black # δεκαδικός δεκαεξαδικός A B C D E F Προγραμματισμός ιστοσελίδων 28

29 Χρώμα Η HTML επίσης παρέχει και κάποια συμβολικά ονόματα για κάποια βασικά χρώματα #00FFFF gray # navy # silver #C0C0C0 black # green # olive # teal # blue #0000FF lime #00FF00 purple # white #FFFFFF fuchsia #FF00FF maroon # red #FF0000 yellow #FFFF00 Προγραμματισμός ιστοσελίδων 29

30 Τροχός χρωμάτων (color wheel) FF,00,00 FF,00,80 FF,80,00 FF,00,FF FF,FF,00 80,00,FF 80,FF,00 00,00,FF 00,FF,00 00,80,FF 00,FF,80 00,FF,FF Προγραμματισμός ιστοσελίδων 30

31 Ομάδες χρωμάτων Βασικά προσθετικά χρώματα: κόκκινο,πράσινο, μπλε Τριτογενή χρώματα Δευτερεύον προσθετικά χρώματα: κυανό, ματζέντα, κίτρινο Προγραμματισμός ιστοσελίδων 31

32 Ομάδες χρωμάτων Αναλογικά χρώματα Τα γειτονικά χρώματα είναι αρμονικά Τριαδικά χρώματα Συμπληρωματικά χρώματα Τα αντιδιαμετρικά χρώματα χρησιμοποιούνται για αντίθεση: π.χ. κείμενο - φόντο Τα ισαπέχοντα χρώματα δημιουργούν ένταση. Προγραμματισμός ιστοσελίδων 32

33 Ομάδες χρωμάτων Θερμά χρώματα Ψυχρά χρώματα Χρησιμοποιείστε θερμά χρώματα για να πλησιάσετε τον επισκέπτη Τα ψυχρά χρώματα είναι πιο απόμακρα, συντηρητικά και τείνουν να υποχωρούν από την οθόνη. Προγραμματισμός ιστοσελίδων 33

34 Χρώμα στην ετικέτα body Για να αλλάξουμε το χρώμα των χαρακτηριστικών της σελίδας χρησιμοποιούμε τα αντίστοιχα χαρακτηριστικά της ετικέτας body Για να αλλάξουμε το χρώμα του κειμένου χρησιμοποιούμε το χαρακτηριστικό text <body text="#9966cc"> Προγραμματισμός ιστοσελίδων 34

35 Χρώμα στην ετικέτα body Για να αλλάξουμε το χρώμα των συνδέσμων χρησιμοποιούμε το χαρακτηριστικό link <body text="#9966cc" link="#990033"> Προγραμματισμός ιστοσελίδων 35

36 Χρώμα στην ετικέτα body Για να αλλάξουμε το χρώμα των συνδέσμων όταν κάνουμε κλικ χρησιμοποιούμε το χαρακτηριστικό alink <body text="#9966cc" link="#990033" > Για να αλλάξουμε το χρώμα των συνδέσμων μετά της επίσκεψή τους χρησιμοποιούμε το χαρακτηριστικό vlink <body text="#9966cc" link="#990033" alink="#00cccc" vlink="#00cc33"> Προγραμματισμός ιστοσελίδων 36

37 Χρώμα στην ετικέτα body Για να αλλάξουμε το χρώμα του φόντου χρησιμοποιούμε το χαρακτηριστικό bgcolor <body bgcolor="#ffccff"> Προγραμματισμός ιστοσελίδων 37

38 Εικόνα στο φόντο Η HTML μας δίνει τη δυνατότητα να έχουμε ως φόντο μίας Ιστοσελίδας κάποια εικόνα. Για να δηλώσουμε σε μία Ιστοσελίδα κάποια εικόνα χρησιμοποιούμε το χαρακτηριστικό background της ετικέτας body π.χ αν θέλουμε η ιστοσελίδα να εμφανίζεται με φόντο το αρχείο cd_front.jpg τότε πρέπει να δηλώσουμε στην ετικέτα body: <body background= cd_front.jpg > Προγραμματισμός ιστοσελίδων 38

39 Χρώμα Βασική προτεραιότητα η αναγνωσιμότητα της σελίδας αλλαγή χρώματος κειμένου αλλαγή εικόνας φόντου αλλαγή link, alink και vlink (σύνδεσμοι) Κατάλληλη επιλογή συνδυασμού χρωμάτων κειμένου φόντου μενού, υπομενού λογότυπου, εικόνων Εικόνα ως φόντο εικόνα μορφής gif ή jpg μικρό μέγεθος εικόνα φόντου γρήγορη φόρτωση της σελίδας Προγραμματισμός ιστοσελίδων 39

40 Γραμματοσειρές Στην HTML μπορούμε να αλλάξουμε το μέγεθος, το χρώμα αλλά και τον τύπο της γραμματοσειράς του κειμένου. Για να αλλάξουμε τα χαρακτηριστικά της γραμματοσειράς του κειμένου χρησιμοποιούμε την ετικέτα <font> </font> Αλλαγή χρώματος της γραμματοσειράς χρήση του color <p>αναλυτικός κατάλογος <font color="blue">cd και DVD</font> του καταστήματος.</p> Προγραμματισμός ιστοσελίδων 40

41 Γραμματοσειρές Αλλαγή μεγέθους της γραμματοσειράς με χρήση του χαρακτηριστικού size χρήση απόλυτου μεγέθους τιμές από 1 μέχρι 7 1: μικρότερο μέγεθος 7: μεγαλύτερο μέγεθος κανονικό (default) μέγεθος = 3 χρήση σχετικού μεγέθους x: x τάξεις μεγέθους μικρότερη γραμματοσειρά +x: x τάξεις μεγέθους μεγαλύτερη γραμματοσειρά Αν θέλουμε να αλλάξουμε την κανονική τιμή του μεγέθους της γραμματοσειράς (default) χρησιμοποιούμε την ετικέτα <basefont> και το χαρακτηριστικό της size. <basefont size="5"/> Προγραμματισμός ιστοσελίδων 41

42 Γραμματοσειρές <p>1 CD και DVD<br/> <font size=3>2 CD και DVD</font><br/> <font size=2>3 CD και DVD</font><br/> <font size=1>4 CD και DVD</font><br/> <font size=+1>5 CD και DVD</font><br/> <font size=+2>6 CD και DVD</font><br/> <font size=-1>7 CD και DVD</font><br/> <font size=-2>8 CD και DVD</font><br/> <basefont size="5"/><font size=+1> 9 CD και DVD</font><br/></p> Προγραμματισμός ιστοσελίδων 42

43 Γραμματοσειρές Αλλαγή του τύπου της γραμματοσειράς με χρήση του χαρακτηριστικού face της ετικέτα font λίστα από ονόματα γραμματοσειρών Ο browser εξετάζει αν είναι εγκατεστημένες στο σύστημα του χρήστη οι γραμματοσειρές που δηλώνονται αν βρεθεί κάποια από τις επιθυμητές γραμματοσειρές, τότε χρησιμοποιείται για την απεικόνιση του κειμένου που βρίσκεται στο εσωτερικό της ετικέτας font, αλλιώς χρησιμοποιείται η γραμματοσειρά με την οποία εμφανίζεται η υπόλοιπη ιστοσελίδα <p><font face="times New Roman"> CD και DVD</font></p> Προγραμματισμός ιστοσελίδων 43

44 Γραμματοσειρές <p>cd και DVD<br/> <font face="times New Roman"> CD και DVD</font><br/> <font face="ms Serif, New York, serif">cd και DVD</font><br/> <font face="comic Sans MS, cursive">cd και DVD</font><br/></p> Προγραμματισμός ιστοσελίδων 44

45 Δείκτες - Εκθέτες Δήλωση εκθέτη (superscript) με την ετικέτα  Δήλωση δείκτη (subscript) με την ετικέτα  Τα χρησιμοποιούμε για να δημιουργήσουμε μαθηματικούς τύπους <p>c₁ = a₁² +b₁² </p> Προγραμματισμός ιστοσελίδων 45

46 Δεσμοί Για να δηλώσουμε ένα δεσμό χρησιμοποιούμε της ετικέτα <a>.</a> (όπως και στην περίπτωση των συνδέσμων) θέτουμε στο χαρακτηριστικό href την τιμή mailto: _address όπου _address η διεύθυση me τη μορφή <a πατώντας εδώ</a> Προγραμματισμός ιστοσελίδων 46

47 Δεσμοί Μόλις ο επισκέπτης της σελίδας κάνει κλικ πάνω στον δεσμό ανοίγει το κατάλληλο πρόγραμμα ( client) που έχει επιλέξει για την αποστολή μηνυμάτων Χρήση δεσμών επικοινωνία με των διαχειριστή της σελίδας επικοινωνία με υπεύθυνο σελίδας για ενημέρωση/πληροφορίες σχετικά με τις υπηρεσίες/προϊόντα που προσφέρονται Προγραμματισμός ιστοσελίδων 47

48 Πλαίσια Η χρήση πλαισίων μας επιτρέπει να χωρίσουμε την οθόνη σε πλαίσια (frames) Μπορεί να ταυτόχρονα απεικονιστούν περισσότερες από μία σελίδες Τύποι πλαισίων Οριζόντια Κάθετα Για να δημιουργηθούν πλαίσια απαιτούνται τουλάχιστον τρία αρχεία Σε ένα ξεχωριστό αρχείο δηλώνουμε τον τρόπο με τον οποίο θα χωρίζεται η οθόνη του browser. Το αρχείο αυτό θα περιέχει την ετικέτα <frameset> </frameset> στη θέση της ετικέτας body Προγραμματισμός ιστοσελίδων 48

49 Δήλωση πλαισίων Για να δηλώσουμε τον τύπο και το μέγεθος (επί τις εκατό ή απόλυτα) του πλαισίου χρησιμοποιούμε την ετικέτα <frameset>.</frameset> Στην ετικέτα <frame> καθορίζεται πια σελίδα HTML θα παρουσιαστεί αντιστοιχίζουμε ένα όνομα για λόγους σύνδεσης με τις υπόλοιπες Στην ετικέτα <noframe> παρουσιάζουμε πληροφορίες για τους browsers που δεν υποστηρίζουν πλαίσια αν δεν το συμπεριλάβουμε, οι browsers αυτοί δεν θα εμφανίζουν τίποτα. Προγραμματισμός ιστοσελίδων 49

50 Δήλωση πλαισίων Διάταξη πλαισίων Οριζόντια <frameset rows="30%,70%"> Κάθετη <frameset cols="30%,70%"> Πολύπλοκη ένθετα frameset Μέγεθος πλαισίων Απόλυτος (σε pixels) Σχετικός (% του παραθύρου) Καταλαμβάνει το υπόλοιπο του παραθύρου Χρήση του * Κατά x φορές μεγαλύτερο από το πλαίσιο * Χρήση x* Προγραμματισμός ιστοσελίδων 50

51 Οριζόντια πλαίσια <html> <head><title>my page</title> <frameset rows="30%,70%"> <frame src="top.html" name="top"> <frame src="bottom.html name="bottom"> </frameset> </head> </html> top.html bottom.html Προγραμματισμός ιστοσελίδων 51

52 Κάθετα πλαίσια <html> <head><title>my page</title> <frameset cols= 250,*,3* > <frame src= left.html name= left > <frame src= center.html name= center > <frame src= right.html name= right > </frameset> </head> </html> left center right Προγραμματισμός ιστοσελίδων 52

53 Πολύπλοκα πλαίσια <html> <head><title>my page</title> <frameset rows= 250,* > <frame src= top.html name= top > <frameset cols= 25%,75% > <frame src= left.html name= left > <frame src= right.html name= right > </frameset> </frameset> </head> </html> top left right Προγραμματισμός ιστοσελίδων 53