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

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

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

Βασικά στοιχεία της HTML > Εικόνες Εισαγωγή εικόνας (1/8) Η εισαγωγή εικόνας μπορεί να γίνει με το κωδικό <IMG>. Το βασικότερο από τα ορίσματα που παίρνει ο κωδικός αυτός είναι το SRC=" ", όπου μέσα στα εισαγωγικά γράφουμε το όνομα του αρχείου που περιέχει την εικόνα (το πλήρες path, αν το αρχείο δεν βρίσκεται στον ίδιο (υπο)φάκελλο) που θέλουμε να συμπεριλάβουμε. 1

Εισαγωγή εικόνας (2/8) Οι εικόνες πρέπει να είναι σε μορφή GIF ή JPG. Πολλοί χρήστες του διαδικτύου, για να φορτώνουν γρήγορα μια σελίδα, απενεργοποιούν την εμφάνιση εικόνων από τον αναγνώστη ιστοσελίδων. Με το όρισμα ALT="" του κωδικού IMG μπορείτε να γράψετε ένα πληροφοριακό κείμενο για την αντίστοιχη εικόνα. 2

Εισαγωγή εικόνας (3/8) Σημειώνουμε ότι οι αναγνώστες ιστοσελίδων θεωρούν τις εικόνες ως in line στοιχεία, τις τοποθετούν δηλαδή μέσα στο κείμενο και όχι σε νέα γραμμή. Αν θέλουμε την εμφάνιση της εικόνας σε δική της γραμμή, μπορούμε βέβαια να χρησιμοποιήσουμε το <BR>, και τους <CENTER> και </CENTER> για να την κεντράρουμε. 3

Εισαγωγή εικόνας (4/8) Για παράδειγμα, ο κώδικας: <BR> <CENTER> <IMG SRC="fig2.jpg" ALT="2Η ΦΩΤΟ"> </CENTER> θα μας δώσει: 4

Εισαγωγή εικόνας (5/8) Μπορούμε να επέμβουμε στις διαστάσεις της εικόνας με τα ορίσματα WIDTH=" " και HEIGHT=" " του κωδικού IMG με τιμές σε εικονοστοιχεία. Αν δώσουμε ένα από τα δύο ορίσματα, ο αναγνώστης ιστοσελίδων υπολογίζει την άλλη διάσταση για να μην παραμορφωθεί η εικόνα. Αν δώσουμε και τα δύο ορίσματα η εικόνα παρουσιάζεται με τις διαστάσεις που επιλέξαμε. 5

Εισαγωγή εικόνας (6/8) Αν δώσουμε και τα δύο ορίσματα η εικόνα παρουσιάζεται με τις διαστάσεις που επιλέξαμε. <IMG SRC="fig2.jpg" ALT="2Η ΦΩΤΟ_ΜΙΚΡΗ" WIDTH="150"> <IMG SRC="fig2.jpg" ALT="2Η ΦΩΤΟ_ΠΑΡΑΜ" WIDTH="150" HEIGHT="40"> 6

Εισαγωγή εικόνας (7/8) Η αλλαγή των διαστάσεων μιας εικόνας δεν επηρεάζει το χώρο που καταλαμβάνει στη μνήμη. Οπότε, αν μεγαλώσετε πολύ μια εικόνα μπορεί να χάσει σε ευκρίνεια. Για να δείτε την ανάλυση που έχει η εικόνα σας (pixels/inch), και επομένως να ελέγξετε το μέγεθος-ευκρίνεια, θα πρέπει να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας εικόνας (π.χ. Photoshop, PaintShop Pro κ.λπ.) 7

Εισαγωγή εικόνας (8/8) 8

Στοίχιση εικόνας (1/4) Εξ ορισμού, ο αναγνώστης ιστοσελίδων στοιχίζει τη γραμμή στο κάτω μέρος της εικόνας. Με το όρισμα ALIGN=" " στον κωδικό IMG μπορούμε να διαλέξουμε μεταξύ TOP, MIDDLE ή ΒΟΤΤΟΜ. Ας γράψουμε ένα παράδειγμα για ό,τι έχουμε πει. Ο παρακάτω κώδικας: 9

Στοίχιση εικόνας (2/4) Η φωτογραφία <IMG SRC="fig1.jpg" ALT="1Η ΦΩΤΟ"> στοιχίζει τη γραμμή στο κάτω μέρος της, ενώ εμφανίζει και το "1Η ΦΩΤΟ" σε περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Επίσης, όταν το ποντίκι βρίσκεται πάνω στην εικόνα εμφανίζεται και πάλι το κείμενο του ορίσματος ALT. <BR> Τώρα η <IMG SRC="fig1.jpg" ALT="1Η ΦΩΤΟ" ALIGN="MIDDLE"> στοιχίζει τη γραμμή στο μέσον, ενώ <BR> τώρα η <IMG SRC="fig1.jpg" ALT="1Η ΦΩΤΟ" ALIGN="TOP"> την στοιχίζει στο πάνω μέρος της. 10

Στοίχιση εικόνας (3/4) θα δώσει: Η φωτογραφία στοιχίζει τη γραμμή στο κάτω μέρος της, ενώ εμφανίζει και το "1Η ΦΩΤΟ" σε περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Επίσης, όταν το ποντίκι βρίσκεται πάνω στην εικόνα εμφανίζεται και πάλι το κείμενο του ορίσματος ALT. 11

Στοίχιση εικόνας (4/4) Τώρα η φωτογραφία τώρα η φωτογραφία στοιχίζει τη γραμμή στο μέσον, ενώ την στοιχίζει στο πάνω μέρος της. 12

Αναδίπλωση κειμένου (1/5) Το όρισμα ALIGN=" " του κωδικού IMG δέχεται και άλλες τιμές. Με την τιμή LEFT ή RIGHT μπορούμε να αναδιπλώσουμε το κείμενο γύρω από την εικόνα κρατώντας το κείμενο αριστερά ή δεξιά αντίστοιχα. Ο παρακάτω κώδικας: 13

Αναδίπλωση κειμένου (2/5) Η φωτογραφία αναδιπλώνει το κείμενο στο δεξιό μέρος της εικόνας. Συνεχίζουμε να χρησιμοποιούμε το όρισμα ALT για την <IMG SRC="fig1.jpg" ALT="1Η ΦΩΤΟ" ALIGN="RIGHT"> περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Αν θέλετε να σταματήσετε την αναδίπλωση μπορείτε να χρησιμοποιήσετε, στο σημείο του κειμένου που θέλετε, τον κωδικό αυτό: <BR CLEAR="RIGHT "> όπου το όρισμα CLEAR να παίρνει την τιμή LEFT ή RIGHT αντίστοιχη με την τιμή του ορίσματος ALIGN στον κωδικό IMG. 14

Αναδίπλωση κειμένου (3/5) θα εμφανιστεί ως εξής: Η φωτογραφία αναδιπλώνει το κείμενο στο δεξιό μέρος της εικόνας. Συνεχίζουμε να χρησιμοποιούμε το όρισμα ALT για την περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Αν θέλετε να σταματήσετε την αναδίπλωση μπορείτε να χρησιμοποιήσετε, στο σημείο του κειμένου που θέλετε, τον κωδικό αυτό: όπου το όρισμα CLEAR να παίρνει την τιμή LEFT ή RIGHT αντίστοιχη με την τιμή του ορίσματος ALIGN στον κωδικό IMG. 15

Αναδίπλωση κειμένου (4/5) Διαλέγοντας σε ποιο σημείο του κειμένου γίνεται η εισαγωγή του κωδικού IMG μπορείτε να ελέγξετε πόσες πλήρεις γραμμές θα εμφανιστούν πριν μπει η εικόνα. Ουσιαστικά ο αναγνώστης ιστοσελίδων συμπληρώνει τη γραμμή που ανήκει η τελευταία λέξη πριν την εισαγωγή του κωδικού. (βέβαια αυτό εξαρτάται και από το μέγεθος του παραθύρου που χρησιμοποιείτε τον αναγνώστη ιστοσελίδων). 16

Αναδίπλωση κειμένου (5/5) Αναδίπλωση κειμένου Εδώ βλέπετε μια χρήσιμη εφαρμογή: Το κείμενο περιορίζεται ανάμεσα σε δύο εικόνες. Απλά, οι κωδικοί IMG για τις δύο εικόνες θα πρέπει να εμφανίζονται στην αρχή του συγκεκριμένου κειμένου και βέβαια η μία να έχει ALIGN="RIGHT" και η άλλη ALIGN="LEFT". 17

Προσθήκη κενού χώρου (1/2) Πολλές φορές χρειάζεται η προσθήκη κενού χώρου γύρω από μια εικόνα (μεγαλύτερο από αυτό που εξ' ορισμού αφήνει ο αναγνώστης ιστοσελίδων). Αυτό επιτυγχάνεται με τα ορίσματα HSPACE=" " και VSPACE=" " στον κωδικό IMG. H τιμή των ορισμάτων είναι σε εικονοστοιχεία (pixel). Φυσικά μπορείτε να προσθέσετε κενό στην μία διεύθυνση μόνο, αλλά πάντοτε και στις δύο αντίστοιχες πλευρές της εικόνας. 18

Προσθήκη κενού χώρου (2/2) Για παράδειγμα, η παράγραφος παραπάνω, όπου στοιχίσαμε την εικόνα στα δεξιά μπορεί, να παρουσιαστεί τώρα καλύτερα, προσθέτοντας 20 εικονοστοιχεία στις δύο διευθύνσεις. Η φωτογραφία αναδιπλώνει το κείμενο στο δεξιό μέρος της εικόνας, όπως και πριν. Συνεχίζουμε να χρησιμοποιούμε το όρισμα ALT για την περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Ο συνολικός κωδικός που χρησιμοποιήσαμε είναι ο: <IMG SRC="fig1.jpg" ALT="1Η ΦΩΤΟ" ALIGN="RIGHT" HSPACE="20" VSPACE="20">. 19

Χρήση εικόνων σε λίστα (1/2) Μια άλλη χρήσιμη εφαρμογή είναι η χρήση εικόνων, αντί κουκίδας ή τετραγώνου, σε μια λίστα. Έτσι, ο παρακάτω κώδικας: <UL><BR><IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Ηλιακό σύστημα <BR><IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Γαλαξίας <BR><IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Τοπικό σμήνος <BR><IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" SPACE="5"> Σύμπαν </UL> 20

Χρήση εικόνων σε λίστα (2/2) θα παράγει το: Ηλιακό σύστημα Γαλαξίας Τοπικό σμήνος Σύμπαν 21

Προσθήκη οριζόντιας γραμμής (1/3) Τελειώνουμε το κεφάλαιο αυτό με το πολύ χρήσιμο κωδικό για προσθήκη οριζόντιας γραμμής: <HR>. Εξ' ορισμού το πάχος της ευθείας είναι 2 εικονοστοιχεία και εκτείνεται σε όλο το μήκος της οθόνης ενώ παρουσιάζει και ένα τρισδιάστατο εφέ (σκιά). 22

Προσθήκη οριζόντιας γραμμής (2/3) Όλα τα παραπάνω ελέγχονται από αντίστοιχα ορίσματα του κωδικού <HR>: SIZE=" " (σε pixels), WIDTH=" " (σε ποσοστό κάλυψης της οθόνης, π.χ. 50%) και ALIGN=" " (με τιμές LEFT, CENTER και RIGHT, στην περίπτωση που έχετε διαλέξει WIDTH, οπότε και ο αναγνώστης ιστοσελίδων, εξ' ορισμού, την κεντράρει). 23

Προσθήκη οριζόντιας γραμμής (3/3) Για την αφαίρεση της σκιάς χρησιμοποιείστε το όρισμα NOSHADE. Η παρακάτω γραμμή δημιουργείται από τον κωδικό: <HR SIZE="10" WIDTH=50%" ALIGN="left"> ενώ η επόμενη με τον απλό κωδικό <HR>. 24

Άσκηση 3: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζεται στον αναγνώστη ιστοσελίδων το παρακάτω κείμενο: 25

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