Εργαστηριακό Μάθημα 2: Η γλώσσα HTML (συνέχεια) Εισαγωγή στους Η/Υ Εργαστηριακό Μάθημα 2: Η γλώσσα HTML (συνέχεια) Διδάσκουσα: Βούλα Ζώη, E.E.Δ.Ι.Π. Α.Σ.Κ.Τ. vzoi@telecom.ntua.gr 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Σύνδεσμοι (1) Ένας σύνδεσμος (hyperlink) μπορεί να δείχνει σε οποιονδήποτε πόρο στο Web: μια σελίδα HTML, μια εικόνα, ένα αρχείο ήχου, ένα αρχείο βίντεο, κτλ Δημιουργούμε συνδέσμους με το tag <a> (=anchor) Απαραίτητη ιδιότητα του tag <a> είναι η href: <a href=“url”> Text to be displayed</a> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Σύνδεσμοι (2) href=“file.html” Το αρχείο βρίσκεται στον τρέχοντα κατάλογο href=“files/file.html” Στον τρέχοντα κατάλογο βρίσκεται ένας φάκελος με το όνομα files και το αρχείο βρίσκεται μέσα στον φάκελο αυτό href=“files/morefiles/file.html” Στον τρέχοντα κατάλογο βρίσκεται ένας φάκελος με το όνομα files και μέσα στον φάκελο files βρίσκεται ο φάκελος morefiles.Το αρχείο βρίσκεται στον φάκελο morefiles 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Σύνδεσμοι (3) href=“../file.html” Το αρχείο βρίσκεται ένα επίπεδο πάνω από τον τρέχοντα κατάλογο href=“../../file.html” Το αρχείο βρίσκεται δύο επίπεδα πάνω από τον τρέχοντα κατάλογο 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Σύνδεσμοι (4) Η ιδιότητα Target: Καθορίζει πού θα εμφανιστεί το έγγραφο στο οποίο «δείχνει» ο σύνδεσμος. Για παράδειγμα <a href=“http://www.asfa.gr/” target=“_blank”>Visit Asfa!</a> Πιθανές τιμές για την target: “_blank” – ανοίγει το έγγραφο σε ένα νέο παράθυρο browser “_self” – φορτώνει το νέο έγγραφο στο παράθυρο από το οποίο καλέσαμε το σύνδεσμο (default) 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Σύνδεσμοι (5) “_parent” – φορτώνει το νέο έγγραφο στο παράθυρο γονέα (αν χρησιμοποιούμε frames) “_top” – φορτώνει το νέο έγγραφο σε ολόκληρο το παράθυρο του browser (οπότε είναι ένας καλός τρόπος διαφυγής από τα frames) “όνομα_παραθύρου_frame” – το νέο έγγραφο εμφανίζεται στο συγκεκριμένο παράθυρο frame Βλέπε παράδειγμα (links_1.html) 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Σύνδεσμοι (6) Η ιδιότητα Name: Μας επιτρέπει να δημιουργούμε συνδέσμους με προορισμό κάποιο σημείο μέσα στην τρέχουσα σελίδα Η σύνταξη είναι: <a name=“section”>Read the useful tips section</a> Για να δημιουργήσουμε ένα σύνδεσμο προς το σημείο section χρησιμοποιούμε το #: <a href=“http://www.w3schools.com/html_links.asp#section”>Go to this section </a> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα links_2.html (1) <body> <p><a href="#C10">See also Chapter 10.</a></p> <h2>Chapter 1 </h2> <p>This chapter explains bla bla bla</p> <h2>Chapter 2 </h2> <h2>Chapter 3 </h2> <a name="C4"><h2>Chapter 4</h2></a> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα links_2.html (2) <a name="C5"><h2>Chapter 5</h2></a> <p>This chapter explains bla bla bla</p> <a name="C6"><h2>Chapter 6</h2></a> <a name="C7"><h2>Chapter 7</h2></a> <a name="C8"><h2>Chapter 8</h2></a> <a name="C9"><h2>Chapter 9</h2></a> <a name="C10"><h2>Chapter 10</h2></a> <p>This chapter explains bla bla bla</p> </body> </html> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Εικόνες (1) Για να ορίσουμε φόντο με εικόνα σαν pattern: <body background=“eikona.gif”>…</body> (βλέπε παράδειγμα background_image.html) Για να εισάγουμε μια εικόνα σε ένα html έγγραφο χρησιμοποιούμε το tag <IMG> To tag αυτό (όπως και τα <hr> και <br>) δεν έχει tag τέλους <img src=“eikona.gif align=right> (βλέπε παραδείγματα insert_image.html, image_link.html) Η ιδιότητα align με τιμές right ή left στοιχίζει την εικόνα στα δεξιά/αριστερά του κειμένου 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Εικόνες (2) Το tag <br clear=left> κόβει το κείμενο και το συνεχίζει κάτω από την εικόνα, σε νέα παράγραφο με αριστερή στοίχιση Η ιδιότητα src παίρνει σαν τιμή είτε το σχετικό, είτε το απόλυτο μονοπάτι όπου βρίσκεται το αρχείο της εικόνας (το ίδιο ισχύει και για την href) Μπορούμε να δημιουργήσουμε thumbnail εικόνας (δηλ. δείγμα εικόνας σε μικρό μέγεθος): <a href="cartoon.jpg"><img src="cartoon_thumb.jpe" alt="Thumbnail with cartoons"></a> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Εικόνες (3) 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα thumbnail2.html (1) <head> <title>Cartoons Wallpaper</title> </head> <body> <h1><font face="Verdana" color="firebrick">Wallpaper με Cartoons! </font></h1> <p> <font face="Verdana" color="darkblue" size="2pt"> πατήστε πάνω στο δείγμα που ακολουθεί για να δείτε την εικόνα σε κανονικό μέγεθος </font></p> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα thumbnail2.html (2) <hr width="75%" align="center"> <br> <a href="cartoon.jpg"><img src="cartoon_thumb.jpe" border="3px" width=150 height=113 alt="Πατήστε για να δείτε τη μεγέθυνση"> </a> </body> </html> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Εικόνες (4) Κατ’ αναλογία μπορούμε να κάνουμε εικόνες hot-spot που όταν τις πατάμε να μας μεταφέρουν στο URL προορισμού (βλέπε παράδειγμα image_link.html): <a href=“index.html”><img src=“eikona-index.gif”></a> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Πίνακες (1) Με τους πίνακες μπορούμε να οργανώνουμε δεδομένα σε γραμμές (rows) και στήλες (columns) Ένας πίνακας ορίζεται με tags <table> … </table> Για να κατασκευάσουμε έναν πίνακα τον ορίζουμε ανά γραμμή - οι γραμμές ορίζονται μέσα στα tags <tr>…</tr> Κάθε γραμμή περιέχει: ένα ή περισσότερα ζευγάρια <td>…</td> που το καθένα ορίζει τα περιεχόμενα ενός απλού κελιού ένα ή περισσότερα ζευγάρια <th>…</th> που το καθένα ορίζει τα περιεχόμενα ενός κελιού που περιέχει κείμενο-επικεφαλίδα (heading row) 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Πίνακες (2) <table> <tr> <th> Επικεφαλίδα <th> <td> Δεδομένα 2ου κελιού </td> <td> Δεδομένα του 3ου κελιού </td> </tr> </table> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Πίνακες (3) Κελιά που καταλαμβάνουν δύο ή περισσότερες γραμμές σε ύψος ορίζονται με την ιδιότητα rowspan (=αριθμός γραμμών που καταλαμβάνει το κελί) δύο ή περισσότερες στήλες σε μήκος ορίζονται με την ιδιότητα colspan (=αριθμός στηλών που καταλαμβάνει το κελί) Ο ορισμός αυτού του κελιού πρέπει να γίνει στην κορυφαία γραμμή (εκεί από όπου ξεκινάει) και στην αριστερότερη στήλη 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα table_1.html (1) <body> <table border> <tr> <th colspan=2 rowspan=2></th> <th rowspan=2> Used belt deflection</th> </tr> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα table_1.html (2) <tr> <th>Limit</th> <th>Adjust deflection</th> </tr> <th rowspan=2 Alternator</th> <td>Models without AC</td> <td>10mm</td> <td>12mm</td> </tr> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα table_1.html (3) <tr> <td>Models with AC</td> <td>5-7mm</td> <td>6-8mm</td> </tr> </table> </body> </html> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Πίνακες (4) <table></table> border cellspacing cellpadding Ορίζει έναν πίνακα border: Ο πίνακας θα σχεδιαστεί με περίγραμμα cellspacing: Το ποσό του κενού χώρου (σε pixels) ανάμεσα στα κελιά του πίνακα cellpadding: το ποσό του κενού χώρου (σε pixels) μεταξύ του κελιού και του περιεχομένου του 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Πίνακες (5) <caption> </caption> Εισάγει το κείμενο σε μορφή λεζάντας για τον πίνακα <tr></tr> Ορίζει μια γραμμή που περιέχει κελιά επικεφαλίδων ή/και δεδομένων <th></th> Ορίζει κελί επικεφαλίδας <td></td> Align, valign Ορίζει κελί δεομένων Οι align και valign ορίζουν τη στοίχιση (πιθανές τιμές: left, center, right, top, bottom) 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Πίνακες (6) rowspan colspan bgcolor bordercolor width H rowspan υποδεικνύει σε πόσες γραμμές θα εκτείνεται το τρέχον κελί (μέσα σε <th>, <td>) H colspan υποδεικνύει σε πόσες στήλες θα εκτείνεται το τρέχον κελί (μέσα σε <th>, <td>) H bgcolor ορίζει το χρώμα του φόντου και μπορεί να είναι δεκαεξαδικός αριθμός ή ένα όνομα H bordercolor ορίζει το χρώμα περιγράμματος και μπορεί να είναι δεκαεξαδικός αριθμός ή ένα όνομα H width υποδεικνύει πλάτος (σε pixels ή %) για πίνακα ή κελί 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Image maps (1) Ένα image map είναι μια εικόνα πάνω στην οποία έχουμε ορίσει πολλές ενεργές (clickable) περιοχές Κάθε μία από αυτές τις ενεργές περιοχές αντιστοιχεί σ’ ένα hyperlink O μηχανισμός Image Map υλοποιείται τόσο ως server-side, όσο και ως client-side – εμείς θα δούμε τη δεύτερη περίπτωση 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Image maps (2) Για την εισαγωγή μιας image map εικόνας σε μια html σελίδα χρησιμοποιούμε το tag <map> H σύνταξή του είναι <map name=“map_name”> συντεταγμένες και σύνδεσμοι </map> Στα tags <map> και </map> περιέχονται, για κάθε ενεργή περιοχή της εικόνας, οι συντεταγμένες της και tο link που της αντιστοιχεί 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Image maps (3) Οι ενεργές περιοχές μπορεί να είναι Ορθογώνιες: shape=“rect” (δίνουμε τις συντεταγμένες της πάνω αριστερής και της κάτω δεξιάς γωνίας) Πολυγωνικές: shape=“poly” (δίνουμε τις συντεταγμένες κάθε γωνίας) Κυκλικές: shape=“circle” (δίνουμε τις συντεταγμένες του κέντρου και το μήκος της ακτίνας σε pixels) 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Image maps (4) Για κάθε ενεργή περιοχή χρειάζεται το tag <area> <area shape=“poly” coords=“x1,y1, …, xn,yn” href=“url”> <area shape=“rect” coords=“x1,y1,x2,y2” href=“url”> <area shape=“circle” coords=“x1,y1,radius” href=“url”> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Image maps (5) H διαδικασία που ακολουθούμε για να ορίσουμε ένα image map είναι η εξής: Ορίζουμε μια εικόνα με το tag <img> ως εξής <img src=“image.gif” usemap=“#my_image_map”> Συσχετίζουμε την εικόνα με τις συνταταγμένες και τα links μέσω του tag <map> <map name="my_image_map"> <area shape=“rect” coords="0,100,100,0" href="http://www.asfa.gr"> </map> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» Frames (1) Με τα frames (πλαίσια) μπορούμε να φορτώνουμε περισσότερες από μία html σελίδες στο ίδιο παράθυρο Χρησιμοποιούμε το tag <frameset> για να ορίσουμε πώς θα χωρίσουμε το παράθυρο σε frames Κάθε frameset ορίζει ένα σύνολο από γραμμές ή στήλες Οι τιμές των γραμμών/στηλών δείχνουν το ποσοστό της περιοχής που θα καταλάβει κάθε γραμμή/στήλη Το tag <frame> ορίζει ποια HTML σελίδα θα τοποθετηθεί σε κάθε frame 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα «vertical frameset.html» <frameset cols="25%,50%,25%"> <frame src=“http://www.in.gr"> <frame src=“http://www.cnn.com"> <frame src=“http://www.bbc.co.uk"> </frameset> </html> Στο παράδειγμα αυτό ορίζουμε ένα frameset με 3 στήλες 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα «horizontal frameset.html» <frameset rows="25%,50%,25%"> <frame src="http://www.in.gr"> <frame src="http://www.cnn.com"> <frame src="http://www.bbc.co.uk"> </frameset> </html> Στο παράδειγμα αυτό ορίζουμε ένα frameset με 3 γραμμές 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα «noresize.html» <frameset rows="50%,50%"> <frame noresize="noresize" src="Master.html"> <frameset cols="25%,75%"> </frameset> </html> Με την ιδιότητα noresize="noresize" μπορούμε να ορίσουμε το μέγεθος κάθε frame να είναι σταθερό 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα «noframes.html» <frameset cols="25%,50%,25%"> <frame src="http://www.google.com"> <frame src="http://www.altavista.com"> <frame src="http://www.lycos.com"> <noframes> <body>Your browser does not support frames!</body> </noframes> </frameset> </html> Το tag noframes ειδοποιεί τον χρήστη στην περίπτωση που ο browser του δεν μπορεί να χειριστεί frames, τυπώνοντας το σχετικό μήνυμα 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Παράδειγμα «inline frame.html» <body> <iframe src="http://www.asfa.gr"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html> Με το tag iframe ορίζουμε ένα inline frame 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης» To META element To στοιχείο meta το χρησιμοποιούμε για να συμπεριλάβουμε γενικές πληροφορίες (meta-information) για μια html σελίδα Πολύ συχνά οι πληροφορίες που περιέχει το στοιχείο meta, (όπως οι ιδιότητες name και content) χρησιμοποιούνται σαν keywords για τη δεικτοδότηση μιας σελίδας από search engines 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
To παράδειγμα «document description.html» <head> <meta name="author" content="Jan Egil Refsnes"> <meta name="revised" content="Jan Egil Refsnes,6/10/99"> <meta name="generator" content="Microsoft FrontPage 4.0"> </head> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
To παράδειγμα «document keywords.html» <head> <meta name="description“ content="HTML examples"> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> </head> <body> <p>The meta attributes of this document describe the document and its keywords. </p> </body> </html> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
To παράδειγμα «redirect a user.html» <head> <meta http-equiv="Refresh" content="5;url=http://www.w3schools.com"> </head> <body> <p> Sorry! We have moved! The new URL is: <a href="http://www.w3schools.com">http://www.w3schools.com</a></p> <p>You will be redirected to the new address in five seconds.</p> <p>If you see this message for more than 5 seconds, please click on the link above!</p> </body> </html> 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»
Check this site for more http://www.w3schools.com/html/default.asp 12/01/2007 ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «Ψηφιακές Μορφές Τέχνης»