Lori's Web Graphics: Embedding Images in HTML Files

Μετατρέποντας Εικόνες στα HTML Αρχεία

Θεμελιώδη

Το να φτιάξεις μια εικόνα σε ένα αρχείο του HTML είναι εύκολο: χρησιμοποίησε την ετικέτα IMG. Έστω ότι έχεις ένα αρχείο εικόνας που λέγεται FLOWER.GIF και θες να εμφανίζεται στην οθόνη σου. Άμα το αρχείο εικόνας βρίσκεται στον ίδιο κατάλογο με το HTML σου αρχείο, το μόνο που πρέπει να κάνεις είναι να το βάλεις στο HTML σου αρχείο:

<IMG SRC="FLOWER.GIF">

Το χαρακτηριστικό SRC χρησιμοποιείται για να καθορίσει το ID του αρχείου (και προαιρετικά και το μονοπάτι (path)) με την εικόνα σου.

Η ετικέτα IMG έχει αρκετά άλλα χαρακτηριστικά. Ένα από αυτά, που πρέπει να συνηθίσεις είναι το ALT. Το χαρακτηριστικό ALT καθορίζει το κείμενο που θα εμφανιστεί στη οθόνη στο browser του χρήστη, εάν ο browser δεν κάνει loading σε αρχεία γραφικών (και τα δύο επειδή δε μπορεί ή επειδή ο χρήστης έχει σταματήσει το "φόρτωμα" της εικόνας). Για παράδειγμα, αν έχεις

<IMG SRC="FLOWER.GIF" ALT="a nice flower">

τότε ο χρήστης θα δει τις λέξεις a nice flower αν η εικόνα δε φαίνεται στην οθόνη.

Δύο πολύ χρήσιμα χαρακτηριστικά της ετικέτας IMG είναι το HEIGHT και το WIDTH. Καθορίζοντας το ύψος και το πλάτος της εικόνας σου, θα σε βοηθήσει να εμφανιστεί η σελίδα σου στην οθόνη πιο γρήγορα, αφού ο browser δε θα χρειαστεί να υπολογίζει το μέγεθος της εικόνας. Ακολουθεί ένα παράδειγμα:

<IMG SRC="FLOWER.GIF" HEIGHT=100 WIDTH=110>

Αυτό λέει στον browser ότι η εικόνα σου έχει 100 pixels ύψος και 110 pixels πλάτος . Ο browser τότε προετοιμάζει κάποιο χώρο για την εικόνα, κάνει load σε όλα τα κείμενα πάνω στη σελίδα και πάει πίσω για να κάνει load στην εικόνα από μόνο του. Αυτό δίνει την ευκαιρία στους ανθρώπους που βλέπουν την σελίδα σου, να μπορούν να διαβάσουν τα κείμενα της σελίδας πριν να εμφανιστούν οι εικόνες.

Σημείωση: Σχεδόν κάθε HTML editor που σου επιτρέπει να κάνεις drag-and-drop σε μια εικόνα μέσα στο HTML αρχείο σου, θα τοποθετήσει αυτόματα το σωστό HEIGHT and WIDTH σύμφωνα με τις προδιαγραφές σου.

Σημείωση: Μην κάνεις το λάθος να χρησιμοποιήσεις τα HEIGHT και WIDTH για να αλλάξεις το μέγεθος από τις εικόνες σου, νομίζοντας ότι θα γλιτώσεις χρόνο. Αντί γι αυτό, κάνε αλλαγές στο μέγεθος από τις εικόνες σου μέσα στο PSP, χρησιμοποιώντας Image | Resize. Χρησιμοποιώντας τα html χαρακτηριστικά για να αλλάξεις το μέγεθος στις εικόνες σου θα αυξήσεις το χρόνο "φορτώματος", αφού ο χρήστης του browser πρέπει όχι μόνο να φορτώσει την εικόνα σε full-size αλλά πρέπει ακόμα να υπολογίσει πως θα εμφανίσει τις εικόνες στην οθόνη με τις καινούργιες διαστάσεις.

Τοποθετώντας τις εικόνες

Υπάρχουν δύο τρόποι για να επηρεάσεις τη θέση μιας εικόνας που έχει σχέση με άλλα στοιχεία της σελίδας. Ο πιο εύκολος, αλλά μερικές φορές λιγότερο αποτελεσματικός τρόπος, είναι να χρησιμοποιήσεις το χαρακτηριστικό ALIGN της ετικέτας IMG.

Από παράλειψη, το κείμενο δίπλα σε μια εικόνα έχει ευθυγραμμιστεί με το κάτω άκρο της εικόνας. Μπορείς να χρησιμοποιήσεις το ALIGN για να αλλάξεις την ευθυγράμμιση είτε στο πάνω άκρο της εικόνας είτε στο κέντρο:

<IMG SRC="flower.gif" ALIGN="top">

<IMG SRC="flower.gif" ALIGN="center">

<IMG SRC="flower.gif" ALIGN="bottom">

Αυτή η μέθοδος είναι έξοχη μόνο αν έχεις αρκετό κείμενο για να το ταιριάξεις με την εικόνα σε μια μονή γραμμή, αλλά αν το κείμενο αποκρυφτεί σε άλλη γραμμή τα αποτελέσματα θα είναι ακόμα πιο ευχάριστα:

<IMG SRC="flower.gif" ALIGN="top"> with more text... Not very pretty is it?

<IMG SRC="flower.gif" ALIGN="center"> with more text... Not very pretty is it?

<IMG SRC="flower.gif" ALIGN="bottom"> with more text... Sorta acceptable...

Μπορείς ακόμα να χρησιμοποιήσεις το ALIGN για να σιγουρευτείς ότι μια εικόνα τοποθετήθηκε στα δεξιά ή στα αριστερά του κειμένου και ότι το κείμενο αποκρύπτεται γύρω από την εικόνα, παρόλο που οι "floating" εικόνες μερικές φορές φαίνεται να έχουν το δικό τους τρόπο σκέψης. Αν θες να το προσπαθήσεις, χρησιμοποίησε ALIGN="left" ή ALIGN="right" με την ετικέτα IMG και δες τι γίνεται Αυτό είναι ένα παράδειγμα:

Εδώ έχουμε FLOWER.GIF που εμφανίζονται δύο φορές:

Μια στα αριστερά του κειμένου και μια στα δεξιά του. Δες πως το κείμενο καλύπτει τις δύο εικόνες.

Δύο άλλα χαρακτηριστικά της ετικέτας IMG που σε βοηθούν να καθορίσεις τη θέση για τις εικόνες, είναι τα χαρακτηριστικά HSPACE και VSPACE. Το χαρακτηριστικό HSPACE σου επιτρέπει να καθορίσεις το "παραγεμισμένο" χώρο στα αριστερά και στα δεξιά της εικόνας σου, έτσι ώστε να μην ανακατεύεται με το κείμενο ή με άλλες εικόνες. Το VSPACE σου επιτρέπει να κάνεις το ίδιο πράγμα για την κορυφή και τον πάτο της εικόνας σου. Στο παραπάνω παράδειγμα, χρησιμοποίησα HSPACE=5 για να ξεχωρίσω το κείμενο από τις εικόνες.

Αυτή η μέθοδος ευθυγράμμισης εικόνων που έχουν κείμενο, μπορεί να χρησιμοποιηθεί για να φτιάξουμε drop caps.

Ο δεύτερος τρόπος καθορισμού θέσης εικόνων είναι να χρησιμοποιήσεις πίνακες. Δε θα μπορείς να καλύψεις το κείμενο γύρω από μια ταλαντευόμενη εικόνα χρησιμοποιώντας πίνακες, αλλά οι πίνακες μπορούν να σου εξασφαλίσουν πολύ όμορφους τρόπους για να καθορίζεις τη θέση στις εικόνες σου. Με τους πίνακες μπορείς να οριοθετήσεις γραμμές και στήλες για το κείμενο και τις εικόνες σου, μπορείς ακόμη και να φτιάξεις πίνακες στο εσωτερικό των πινάκων. Δε θα μπω σε λεπτομέρειες για το πώς χρησιμοποιούνται οι πίνακες, αλλά αν θες να μάθεις περισσότερα, πήγαινε σε κάποιο site του HTML που να έχει σχέση. Μπορείς να ξεκινήσεις με τοTables in Netscape 1.1, το οποίο πραγματικά περιέχει ό,τι θα έπρεπε να γνωρίζεις για τους πίνακες.