Νέες Τεχνολογίες στην Εκπαίδευση

Transcript

1 Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επιπλέον δυνατότητες Στεφανέας Πέτρος Ζαμαρίας Βασίλης

2 Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.

3 Βασικά στοιχεία της HTML >Επιπλέον δυνατότητες Θα παρουσιάσουμε εδώ μερικές χρήσιμες επιπλέον δυνατότητες, που δεν αποτελούν παρά ένα ελάχιστο τμήμα των πραγματικών τεράστιων δυνατοτήτων που έχει η HTML. 1

4 Κείμενο σε εικόνα (1/3) Ξεκινάμε με τη δυνατότητα τοποθέτησης κειμένου πάνω σε μια εικόνα. Φυσικά μπορούμε να επέμβουμε, με κάποιο σχεδιαστικό λογισμικό και να βάλουμε το κείμενο πάνω στη εικόνα, αλλά δεν αναφερόμαστε σε αυτή την περίπτωση. Η ιδέα λοιπόν είναι να φτιάξουμε ένα πίνακα με ένα μόνο κελί, όπου η εικόνα μας θα αποτελεί εικόνα φόντου. Βέβαια, θα πρέπει να προσέξουμε το μέγεθος του κελιού να είναι όσο ακριβώς το αντίστοιχο της εικόνας και να μηδενίσουμε τις τιμές των παραμέτρων CELLPADDING, BORDER και CELLSPACING. 2

5 Κείμενο σε εικόνα (2/3) Οπότε, ο παρακάτω κώδικας: <TABLE border="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="580" HEIGHT="350" BACKGROUND="WORLDMAP.JPG" ALIGN="center"> <FONT SIZE="+2" COLOR="red">ΠΑΓΚΟΣΜΙΟΣ ΧΑΡΤΗΣ</font> </TD> </TR> </TABLE> 3

6 Κείμενο σε εικόνα (3/3) θα δώσει: 4

7 Μαρκίζα (1/2) Ο κωδικός <MARQUEE> προκαλεί την κύλιση κειμένου κατά μήκος της οθόνης. Τα ορίσματα και οι τιμές που παίρνει ο κωδικός αυτός είναι: BEHAVIOR = SCROLL (το κείμενο μπαίνει από τη μια και βγαίνει από την άλλη πλευρά της οθόνης), SLIDE (το κείμενο εμφανίζεται στη μια πλευρά και σταματά όταν φτάσει στην άλλη άκρη) και ALTERNATE (το κείμενο μετακινείται εμπρός και πίσω στην οθόνη) DIRECTION = LEFT ή RIGHT LOOP = αριθμός επαναλήψεων ή INFINITE SCROLLAMOUNT = αριθμός εικονοστοιχείων που κινείται το κείμενο κάθε φορά. SCROLLDELAY = αριθμός ms (χιλιοστά του δευτερολέπτου) που περνούν μεταξύ κάθε κίνησης. BGCOLOR = για το καθορισμό του χρώματος φόντου της μαρκίζας. 5

8 Μαρκίζα (2/2) Η παραπάνω μαρκίζα αντιστοιχεί στον κώδικα: <MARQUEE BEHAVIOR="scroll" DIRECTION="left" LOOP="infinite" SCROLLAMOUNT="6" SCROLLDELAY="150" BGCOLOR="blue"> <FONT SIZE="+1" COLOR="red">ΠΡΟΣΘΕΤΕΣ ΔΥΝΑΤΟΤΗΤΕΣ ΤΗΣ HTML</FONT> </MARQUEE> 6

9 Προσθήκη ημερομηνίας και ώρας Οι τρεις τελευταίες δυνατότητες που θα αναφέρουμε χρησιμοποιούν τα λεγόμενα java scripts. Αποτελούν μικρά προγράμματα γραμμένα στην ομώνυμη γλώσσα. Η ενσωμάτωση αυτών των προγραμμάτων γίνεται με τον κωδικό <SCRIPT>. Για παράδειγμα, για την προσθήκη ημερομηνίας και ώρας γράφουμε τον παρακάτω κώδικα στο σημείο που θέλουμε να εμφανίζεται: <SCRIPT type="text/javascript"> document.write(date()) </SCRIPT> οπότε και εμφανίζεται: Fri Jul :34:36 GMT+0300 (Θερινή ώρα GTB) 7

10 Μεταβαλλόμενη εικόνα (1/4) Μπορούμε να αλλάξουμε μια εικόνα όταν ο χρήστης περνά το ποντίκι από πάνω της (rollover). Αυτό πολλές φορές βοηθά για τον προσδιορισμό του στοιχείου που επιλέγεται. Για παράδειγμα, ας υποθέσουμε ότι έχουμε την εικόνα του παγκόσμιου χάρτη που χρησιμοποιήσαμε στην προηγούμενη ενότητα και θέλουμε, όταν το ποντίκι περνάει από πάνω της, να φαίνονται οι περιοχές που ορίστηκαν για τη δημιουργία του "χάρτη". Φυσικά πρέπει να φτιάξουμε μια δεύτερη εικόνα, παρόμοια με την πρώτη όπου φαίνονται οι περιοχές αυτές. 8

11 Μεταβαλλόμενη εικόνα (2/4) Γράφουμε τον κώδικα: <a href="maps.html" onmouseover="document.rollover.src='map_maped.jpg'" onmouseout="document.rollover.src='worldmap.jpg'"> <img src="worldmap.jpg" name="rollover"></a> όπου WORLDMAP.JPG είναι η βασική εικόνα, MAP_MAPED.jpg είναι η εικόνα όπου έχουμε σχεδιάσει τις περιοχές και ενεργοποιείται ακριβώς όταν το ποντίκι είναι πάνω της: onmouseover="document.rollover.src='map_maped.jpg'" 9

12 Μεταβαλλόμενη εικόνα (3/4) Η δεύτερη φορά που εμφανίζεται η αρχική εικόνα δηλώνει ότι μόλις το ποντίκι φύγει από την περιοχή ξαναεμφανίζεται η αρχική: onmouseout="document.rollover.src='worldmap.jpg'". Το name="rollover" δηλώνει το όνομα της εικόνας και είναι ακριβώς η λέξη που εμφανίζεται στοdocument.rollover. Τέλος, βλέπετε ότι με το πάτημα του κουμπιού του ποντικιού οδηγούμαστε στο αρχείο maps.html (a href="maps.html"). Μεγάλη προσοχή δώστε στα διπλά και μονά εισαγωγικά. 10

13 Αναδυόμενο παράθυρο Στην περίπτωση αυτή, μόλις ο χρήστης ενεργοποιήσει την ιστοσελίδα εμφανίζεται ένα παράθυρο (του οποίου ορίζουμε τις διαστάσεις), όπου μπορούμε να έχουμε χρήσιμες πληροφορίες. Ο κώδικας αποτελεί συμπλήρωμα (όρισμα) στον κωδικό <BODY>: <BODY ONLOAD="javascript:window.open('roll_win.html','win','height=250,width=250')"> Όπου: roll_win.html είναι το αρχείο που θα εμφανίζεται στο νέο παράθυρο, win το όνομα του παραθύρου, height και width το πλάτος και το ύψος του παραθύρου σε pixels. 11

14 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.