Εισαγωγή Εικόνων και Γραφικών

ΕΊΔΗ ΑΡΧΕΙΩΝ

Υπάρχουν πολλοί τρόποι με τους οποίους μπορεί να αποθηκευτεί μια εικόνα ή ένα γραφικό στον Η/Υ. Κάθε ένας από αυτούς, βασίζεται σε ένα ξεχωριστό πρότυπο και αναγνωρίζεται από την επέκταση του ονόματος του αρχείου που περιέχει την εικόνα. Οι Web browsers αναγνωρίζουν μόνο δύο τέτοια πρότυπα. Το .GIF και το .JPG (δηλαδή το jpeg). Αν έχετε μια εικόνα που θέλετε να συμπεριλάβετε σε μια σελίδα και δεν είναι αποθηκευμένη σε μια από τις δύο αυτές μορφές, τότε πρέπει να την μετατρέψετε σε gif ή jpg χρησιμοποιώντας ένα από τα ειδικά προγράμματα μετατροπής που παρέχουν αυτή την δυνατότητα(π.χ. PAINTSHOP PRO).

ΠΡΟΣΘΕΤΟΝΤΑΣ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΜΙΑ WEB ΣΕΛΙΔΑ

Αυτό μπορεί να γίνει με την οδηγία <IMG SRC="όνομα ή/και path αρχείου">

Π.χ. <img src="image1.gif"> Με την οδηγία αυτή η εικόνα θα μπεί στην σελίδα στο σημείο που υπάρχει η οδηγία αλλά στην αριστερή πλευρά της οθόνης. Ο δεξιά της χώρος θα παραμείνει κενός. Το κείμενο που υπάρχει πριν από αυτήν θα βρίσκεται από πάνω της και το κείμενο που υπάρχει μετά από αυτήν θα βρίσκεται από κάτω της.

Σε αυτή την περίπτωση η εμφάνιση της σελίδας θα είναι:

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά...

Συμβουλή: Προσπαθήστε να ανακυκλώνετε τις εικόνες σας (π.χ. να χρησιμοποιείτε την ίδια εικόνα σε διαφορετικές περιπτώσεις αν αυτό είναι εφικτό). Με τον τρόπο αυτό δίνετε μεγαλύτερη ομοιομορφία στις σελίδες σας και διευκολύνετε την κίνηση του επισκέπτη (είναι πιο εύκολο να βρει το δρόμο του κινούμενος μέσα σε σελίδες που έχουν την ίδια βασική σχεδίαση). Επίσης το εικονίδιο αυτό χρειάζεται να έρθει στον browser μόνο μια φορά (την πρώτη). Τις επόμενες φορτώνεται από την cache και έτσι ο επισκέπτης, κερδίζει χρόνο.

ΕΙΚΟΝΕΣ ΚΑΙ ΓΡΑΜΜΗ ΚΕΙΜΕΝΟΥ

Μια εικόνα μαζί με μια σειρά κείμενο μπορεί να συμπεριληφθεί σε μια επικεφαλίδα με το ακόλουθο τρόπο: <H6><IMG SRC="image.gif">ANY MODEM</H6>

Η οδηγία αυτή θα εμφανιστεί στην σελίδα ως εξής:

ANY MODEM

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

Μέσα στις επικεφαλίδες και μέσα στις παραγράφους, μπορεί να υπάρχει κείμενο τόσο δεξιά όσο και αριστερά της εικόνας (αν φυσικά χωράει) και οι αποστάσεις μεταξύ των γραμμών θα επηρεαστούν από το μέγεθος της εικόνας. Πάντα όμως δεξιά και αριστερά της εικόνας θα υπάρχει ΜΟΝΟ ΜΙΑ γραμμή κειμένου.

Για παράδειγμα ο παρακάτω κώδικας

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, <IMG SRC="image.gif"> μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

θα εμφανιστεί ως:

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

Φυσικά μπορεί να τύχει η εικόνα να βρεθεί στην αρχή ή στο τέλος της γραμμής. Στην περίπτωση αυτή δεν θα υπάρχει κείμενο αριστερά ή δεξιά της αντίστοιχα.

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

Οι δυνατότητες που υπάρχουν είναι:

<IMG SRC="image1.gif" ALIGN=TOP>

Θα βάλει το πάνω μέρος της εικόνας στο ίδιο επίπεδο με την γραμμή του κειμένου.

ALIGN=MIDDLE

θα βάλει το μεσαίο επίπεδο της εικόνας στο ίδιο επίπεδο με την γραμμή του κειμένου.

ALIGN=BOTTOM

θα βάλει το κάτω μέρος της εικόνας στο ίδιο επίπεδο με την γραμμή του κειμένου (η default επιλογή).

Παραδείγματα:

ALIGN=TOP

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

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, <IMG SRC="image.gif" align=top> μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

θα εμφανιστεί ως:

ALIGN=MIDDLE

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

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, <IMG SRC="image.gif" align=middle> μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

θα εμφανιστεί ως:

ALIGN=BOTTOM

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

Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, <IMG SRC="image.gif" align=bottom> μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

θα εμφανιστεί ως:

ΕΙΚΟΝΕΣ ΚΑΙ ΡΟΗ ΚΕΙΜΕΝΟΥ ΠΑΡΑΛΛΗΛΑ ΜΕ ΑΥΤΕΣ (TEXT WRAP)

Για να το επιτύχουμε αυτό, πρέπει η εικόνα να έχει πάρει θέση με την οδηγία ALIGN, και να ακολουθείται από Παράγραφο, Λίστα, Επικεφαλίδα ή ’λλες Εικόνες.

Π.χ. <IMG SRC="image1.gif" ALIGN=RIGHT>κείμενο...

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

<IMG SRC="image.gif" ALIGN=RIGHT>Μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά, μπλά

θα εμφανιστεί ως:

Υπάρχουν όμως περιπτώσεις που θέλουμε να υπάρχει ροή κειμένου δεξιά ή αριστερά από μια εικόνα που να μην φτάνει μέχρι το κατώτερο σημείο της εικόνας αλλά να διακόπτεται πιο πριν. Στην περίπτωση αυτή, χρησιμοποιούμε την οδηγία όπου X=LEFT (η ροή σταματάει μέχρι να βρει την πρώτη γραμμή που η αριστερή άκρη της είναι ελεύθερη, δηλαδή δεν υπάρχει εκεί εικόνα και μπορεί να εκταθεί μέχρι την άκρη της σελίδας) RIGHT (η ροή σταματάει μέχρι να βρεί την πρώτη γραμμή που η δεξιά άκρη της είναι ελεύθερη, δηλαδή δεν υπάρχει εκεί εικόνα και μπορεί να εκταθεί μέχρι την άκρη της σελίδας) ALL (η ροή σταματάει μέχρι τα βρει την πρώτη γραμμή που και η δεξιά και η αριστερή άκρη της είναι ελεύθερη, δηλαδή η γραμμή μπορεί να εκταθεί από την αριστερή μέχρι την δεξιά πλευρά της οθόνης χωρίς κανένα εμπόδιο).

Παράδειγμα:

Ο κώδικας:

<IMG SRC="dancers.gif" ALIGN=RIGHT>Εδώ βλέπουμε μια τέτοια περίπτωση όπου το κείμενο που έχουμε σταματά μετά από την λέξη εδώ και συνεχίζει όταν υπάρχει ελεύθερο δεξιό περιθώριο.

Θα εμφανιστεί ως:

Εδώ βλέπουμε μια τέτοια περίπτωση όπου το κείμενο που έχουμε σταματά μετά από την λέξη εδώ
και συνεχίζει όταν υπάρχει ελεύθερο δεξιό περιθώριο.

ΑΠΟΣΤΑΣΗ ΤΟΥ ΚΕΙΜΕΝΟΥ ΑΠΟ ΜΙΑ ΕΙΚΟΝΑ (HTML 3.2)

Καθορίζεται με τις παραμέτρους VSPACE=Χ (vertical space για την απόσταση του κειμένου που βρίσκεται πάνω και κάτω από την εικόνα) και HSPACE=Χ (horizontal space για την απόσταση του κειμένου που βρίσκεται δεξιά και αριστερά από την εικόνα). X είναι ο αριθμός των pixels που θέλουμε να έχει η απόσταση.

Π.χ. <IMG SRC="image2.gif" VSPACE=50 HSPACE=45 ALIGN=RIGHT>

ΠΩΣ ΚΑΝΟΥΜΕ ΜΙΑ ΕΙΚΟΝΑ ΠΑΡΑΠΟΜΠΗ (LINK)

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

Π.χ. αν το αρχείο dancers.gif έχει δύο χορευτές, τότε η οδηγία για να γίνει το αρχείο παραπομπή σε ένα χορευτικό site θα είναι:

Προσοχή! Οι εικόνες που γίνονται παραπομπές αποκτούν ένα λεπτό περιθώριο. Αν δεν θέλουμε να υπάρχει αυτό το περιθώριο, τότε χρησιμοποιούμε την παράμετρο BORDER με τιμή 0.

Π.χ. <a href="http://www.ballroomdancers.com"><IMG SRC="dancers.gif" border=0></a>

ALT (ΑΝ Ο ΑΝΑΓΝΩΣΤΗΣ ΤΗΣ ΣΕΛΙΔΑΣ ΔΕΝ ΒΛΕΠΕΙ ΕΙΚΟΝΕΣ)

Αν και σιγά σιγά λιγοστεύει ο αριθμός τους, υπάρχουν ακόμη πολλοί άνθρωποι που για διάφορους λόγους (αργή γραμμή, text based browsers κ.λπ.) βλέπουν τις Web σελίδες χωρίς εικόνες. Για να καλύψουμε αυτή την περίπτωση, χρησιμοποιούμε την παράμετρο ALT για να γράψουμε ένα μικρό περιγραφικό κείμενο που εξηγεί σε όσους δεν βλέπουν εικόνες τι υπάρχει σε αυτές. Μπορεί επίσης να χρησιμοποιηθεί και σαν παραπομπή (link) ώστε να μπορούν να την ακολουθήσουν και όσοι δεν βλέπουν εικόνες. Η σύνταξη της ALT είναι ALT="κείμενο". Συνήθως το κείμενο (που δεν πρέπει να είναι πολύ μεγάλο) το περικλείουμε με τις αγκύλες [ και ].

Π.χ. Σύνταξη μια εικόνας που μας παραπέμπει στο web της Ευρωπαϊκής Ένωσης: <a href="http://www.eexi.gr"><IMG SRC="ee.gif" border=0 ALT="[Ευρωπαϊκή Ένωση]"></a>

Η ΠΑΡΑΜΕΤΡΟΣ BORDER

Η παράμετρος border καθορίζει το περιθώριο που θα έχει μια εικόνα. Χωρίς αυτήν η εικόνα δεν έχει περιθώριο (εκτός αν είναι link οπότε το αποκτά αυτομάτως). Με αυτήν ορίζεται το πάχος σε pixels που θα έχει το περιθώριο.

Π.χ. <IMG SRC="image2.gif" border=5>

ΟΙ ΠΑΡΑΜΕΤΡΟΙ HEIGHT & WIDTH

Τα height & width ορίζουν το ύψος και το πλάτος της εικόνας, σε pixels. Δεν είναι απαραίτητα αλλά σας συνιστούμε να τα χρησιμοποιείτε πάντοτε για τον ακόλουθο λόγο:

Μια σελίδα αποτελείται από κείμενο και εικόνες. Σχεδόν πάντοτε όμως το κείμενο, που καταλαμβάνει λιγότερο χώρο, θα έρθει πρώτο στον Η/Υ μας. Ωστόσο, ο browser δεν θα εμφανίσει το κείμενο όσο δεν γνωρίζει πως θα το μορφοποιήσει. Αν οι οδηγίες (tags) των εικόνων της σελίδας που φορτώνεται τον πληροφορούν πως η εικόνα Χ έχει διαστάσεις 38Χ756 τότε ο browser θα μπορέσει να σχεδιάσει τη σελίδα και να την εμφανίσει στην οθόνη μας ακόμη και αν δεν έχει λάβει ακόμη το αρχείο εικόνας. Αν όμως δεν ορίσουμε τα height & width, ο browser δεν θα εμφανίσει το κείμενο, ακόμη και αν το έχει παραλάβει στο σύνολό του, αλλά θα καθυστερήσει μέχρι να λάβει ένα αρκετά μεγάλο μέρος της εικόνας που θα του επιτρέψει να μάθει ποιες είναι οι διαστάσεις της.

Ένα άλλο πλεονέκτημα της χρήσης των height & width είναι πως η σελίδα θα διατηρήσει το ίδιο στήσιμο (layout) ακόμη και όταν κάποιος την βλέπει με απενεργοποιημένη την εμφάνιση των γραφικών.

Η σύνταξη των παραμέτρων είναι:

Προσοχή! Αν δώσετε λάθος height ή width ο browser θα σχεδιάσει την εικόνα με βάση τα όσα του είπατε και όχι με βάση το πραγματικό μέγεθός της. Αν λοιπόν έχετε κάνει λάθος, τα αποτελέσματα μπορεί να είναι από αστεία έως τραγικά. Για να βρείτε τις σωστές διαστάσεις της εικόνας ανοίξετε την με ένα πρόγραμμα γραφικών και διαβάστε τις πληροφορίες που σας δίνει γι' αυτήν το πρόγραμμα (συνήθως θα τις βρείτε στο image information, image properties, image attributes ή κάτι παρόμοιο).

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων