Βασικά στοιχεία της HTML > Εικόνες

Εισαγωγή εικόνας, Στοίχιση εικόνας, Αναδίπλωση κειμένου, Προσθήκη κενού χώρου, Χρήση εικόνων σε λίστα, Προσθήκη οριζόντιας γραμμής

Εισαγωγή εικόνας
Η εισαγωγή εικόνας μπορεί να γίνει με το κωδικό <IMG>. Το βασικώτερο από τα ορίσματα που παίρνει ο κωδικός αυτός είναι το SRC=" ", όπου μέσα στα εισαγωγικά γράφουμε το όνομα του αρχείου που περιέχει την εικόνα (το πλήρες path, αν το αρχείο δεν βρίσκεται στον ίδιο (υπο)φάκελλο) που θέλουμε να συμπεριλάβουμε. Οι εικόνες πρέπει να είναι σε μορφή GIF ή JPG. Πολλοί χρήστες του διαδικτύου, για να φορτώνουν γρήγορα μια σελίδα, απενεργοποιούν την εμφάνιση εικόνων από τον αναγνώστη ιστοσελίδων. Με το όρισμα ALT=" " του κωδικού IMG μπορείτε να γράψετε ένα πληροφοριακό κείμενο για την αντίστοιχη εικόνα. Σημειώνουμε ότι οι αναγνώστες ιστοσελίδων θεωρούν τις εικόνες ως in line στοιχεία, τις τοποθετούν δηλαδή μέσα στο κείμενο και όχι σε νέα γραμμή. Αν θέλουμε την εμφάνιση της εικόνας σε δική της γραμμή, μπορούμε βέβαια να χρησιμοποιήσουμε το  , και τους <CENTER> και </CENTER> για να την κεντράρουμε. Για παράδειγμα, ο κώδικας:
 <CENTER> <IMG SRC="fig2.jpg" ALT="2Η ΦΩΤΟ"> </CENTER>
θα μας δώσει:

Παρατηρήστε ότι μόλις ο κόρσορας του ποντικιού πάει πάνω στη φωτογραφία εμφανίζεται το κείμενο του κωδικού ALT (για τον Explorer μόνο).

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

	<IMG SRC="fig2.jpg" ALT="2Η ΦΩΤΟ_ΜΙΚΡΗ" WIDTH="150">
	<IMG SRC="fig2.jpg" ALT="2Η ΦΩΤΟ_ΠΑΡΑΜ" WIDTH="150" HEIGHT="40">

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

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

Ο παρακάτω κώδικας:

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

θα δώσει:

Η φωτογραφία

στοιχίζει τη γραμμή στο κάτω μέρος της, ενώ εμφανίζει και το "1Η ΦΩΤΟ" σε περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Επίσης, όταν το ποντίκι βρίσκεται πάνω στην εικόνα εμφανίζεται και πάλι το κείμενο του ορίσματος ALT.
Τώρα η

στοιχίζει τη γραμμή στο μέσον, ενώ

τώρα η

την στοιχίζει στο πάνω μέρος της.

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

Κώδικας:

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

Εμφάνιση:

Η φωτογραφία αναδιπλώνει το κείμενο στο δεξιό μέρος της εικόνας. Συνεχίζουμε να χρησιμοποιούμε το όρισμα ALT για την 1Η ΦΩΤΟ περίπτωση που ο χρήστης έχει επιλέξει την μη αυτόματη εμφάνιση των εικόνων. Αν θέλετε να σταματήσετε την αναδίπλωση μπορείτε να χρησιμοποείσετε, στο σημείο του κειμένου που θέλετε, τον κωδικό αυτό:
όπου το όρισμα CLEAR να παίρνει την τιμή LEFT ή RIGHT αντίστοιχη με την τιμή του ορίσματος ALIGN στον κωδικό IMG.

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

1Η ΦΩΤΟ

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

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

Χρήση εικόνων σε λίστα
Μια άλλη χρήσιμη εφαρμογή είναι η χρήση εικόνων, αντί κουκίδας ή τετραγώνου, σε μια λίστα. Έτσι, ο παρακάτω κώδικας:

<UL>
 <IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Ηλιακό σύστημα
 <IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Γαλαξίας
 <IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Τοπικό σμήνος
 <IMG SRC="fig1_small.jpg" HSPACE="5" ALIGN="MIDDLE" VSPACE="5"> Σύμπαν
</UL>

θα παράγει το:

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

ενώ η επόμενη με τον απλό κωδικό <HR>.

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

Τα κείμενα που εμφανίζονται στο παράδειγμα αυτό μπορείτε να τα βρείτε εδώ σε αρχείο txt. Τις πέντε εικόνες που θα χρειαστείτε μπορείτε να τις "κατεβάσετε" από εδώ: εικόνα 1, εικόνα 2, εικόνα 3, εικόνα 4 και εικόνα 5

Εδώ μπορείτε να δείτε σε ξεχωριστό παράθυρο του αναγνώστη ιστοσελίδων το html αρχείο που παρήγαγε την παραπάνω εικόνα, οπότε να διαβάσετε και τον αντίστοιχο κώδικα.

Επόμενη ενότητα Προηγούμενη ενότητα