Οι εικόνες στην html τοποθετούνται χρησιμοποιώντας κώδικα HTML όπως στο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src=”pic_mountain.jpg” alt=”Mountain View” style=”width:304px;height:228px;”>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην εικόνα:
Σύνταξη εικόνων HTML
Στη γλώσσα HTML οι εικόνες παρουσιάζονται χρησιμοποιώντας την ετικέτα <img>.
Η ετικέτα <img> είναι κενή, δηλαδή περιέχιε μόνο χαρακτηριστικά (attributes), και δεν περιέχει ετικέτα κλεισίματος.
Το χαρακτηριστικό src attribute καθορίζει τη διεύθυνση URL (διεύθυνση web address) της εικόνας:
<img src=”url” alt=”some_text” style=”width:width;height:height;”>
Το χαρακτηριστικό alt
Το χαρακτηριστικό alt μας επιτρέπει αν δηλώσουμε ένα εναλλακτικό κείμενο για την εικόνα. Το εναλλακτικό αυτό κείμενο θα εμφανιστεί εάν για οποιαδήποτε αιτία η εικόνα δεν καταφέρει να φτάσει στο φυλλομετρητή του χρήστη. Υπάρχουν πολλές αιτίες για τις οποίες η εικόνα μπορεί να μην καταφέρει να φτάσει στο φυλλομετρητή του χρήστη. Πιθανώς λόγω αργής σύνδεσης. Πιθανώς λόγω σφάλματος στο χαρακτηριστικό src. Πιθανώς επειδή ο χρήστης χρησιμοποιεί screen reader.
Εάν ο φυλλομετρητής δεν βρει την εικόνα, τότε θα εμφανίσει το εναλλακτικό κείμενο που δηλώθηκε στο χαρακτηριστικό alt.
Ακολουθεί παράδειγμα που δείχνει τη χρήση του χαρακτηριστικού alt για τις εικόνες στην html:
——————————-
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image, it will display the alternate text:</p>
<img src=”wrongname.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Εδώ να σημειώσουμε οτι το χαρακτηριστικό alt είναι απαραίτητο ώστε η σελίδα να περνάει το τεστ του html validator. Αλλιώς δεν θα περάσει επιτυχώς το τεστ. Όταν δημιουργούμε ιστοσελίδες πρέπει αν φροντίζουμε ώστε αυτές να περνάνε επιτυχώς το τεστ του html validator.
Τι είναι οι HTML Screen Readers
Ένας screen reader είναι ένα λογισμικό που διαβάζει HTML κώδικα, μεματρέπει το κείμενο, και επιτρέπει στο χρήστη να “παρακολουθεί” το περιεχόμενο. Οι screen readers είναι πολύ χρήσιμοι για ανθρώπους με δυσκολία όρασης, τυφλούς ανθρώπους, ή γενικότερα για ανθρώπους που έχουν δυσκολίες στην ανάγνωση.
Μέγεθος εικόνας HTML
Μπορούμε να χρησιμοποιήσουμε το χαρακτηριστικό style του CSS για να καθορίσουμε το ύψος και το πλάτος της εικόνας.
Οι τιμές καθορίζονται σε pixels (χρησιμοποιούμε το px μετά από την τιμή):
——————————-
<!DOCTYPE html>
<html>
<body>
<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Εναλλακτικά μπορούμε να χρησιμοποιήσουμε τα χαρακτηριστικά width και height attributes όταν κατασκευάζουμε μια ιστοσελίδα. Σε αυτή την περίπτωση οι τιμές είναι πάντα σε pixels
Η χρήση των width και height φαίνεται στο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<body>
<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Είναι πολύ καλό να καθορίζουμε το πλάτος και το ύψος των εικόνων. Εάν δεν το κάνουμε αυτό, τότε κατά τη φόρτωση της σελίδας το μέγεθος της σελίδας θα μεταβάλλεται. Αυτό δημιουργεί κακή εμπειρία στον επισκέπτη. Όταν κατασκευάζουμε μια ιστοσελίδα πρέπει πάντα να έχουμε στο μυαλό μας την εμπειρία του χρήστη που θα την επισκεφθεί.
Επαγγελματική κατασκευή ιστοσελίδων
Πιθανώς πολλοί από τους αναγνώστες αυτού του άρθρου να είναι αρχάριοι κατασκευαστές ιστοσελίδων. Πιθανώς να κάνουν τα πρώτα τους βήματα στη δημιουργία ιστοτόπων, ή ενδεχομένως να προσπαθούν μόνοι τους να κατασκευάσουν την ιστοσελίδα τους. Το μέγεθος εικόνας που αναφέρθηκε στην προηγούμενη ενότητα είναι κάτι που αγνοούν οι νέοι κατασκευαστές ιστότοπων. Πιθανώς να το θεωρήσουν περιττή και άχρηστη λεπτομέρεια. Όμως η διαφορά ανάμεσα σε μια επαγγελματική ιστοσελίδα και σε μια ερασιτεχνική ιστοσελίδα κρίνεται από πολλές μικρές λεπτομέρειες τέτοιου είδους. Η ιστοσελίδα που κατασκευάστηκε από επαγγελματίες θα φορτώσει γρήγορα και ευχάριστα για το χρήστη. Η πλοήγηση σε αυτήν θα αποτελέσει μια θαυμάσια εμπειρία για τον επισκέπτη. Αντίθετα η ιστοσελίδα που κατασκευάστηκε ερασιτεχνικά από κάποιον αρχάριο δημιουργό ιστοσελίδων θα έχει πολλά μικρά προβληματάκια. Το σύνολο αυτών των μικρών προβλημάτων θα δημιουργήσει μια αρνητική εμπειρία για τον επισκέπτη του ιστότοπου.
Τι είναι καλύτερο; Width και Height, ή Style;
Όλα τα χαρακτηριστικά (attributes) είναι έγκυρα για το HTML5. Και το width, και το height, και το style.
Ωστόσο, αυτό που προτείνουμε είναι η χρήση του χαρακτηριστικού style attribute. Ο λόγος που το προτείνουμε είναι οτι δεν επιτρέπει σε εσωτερικά (internal) ή εξωτερικά (external) CSS styles sheets να αλλάξουν το ύψος και το πλάτος των εικόνων. Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<p>It is better to use the style attribute (instead of the width and height attributes), because it prevents
internal or external styles sheets to change the original size of an image:</p>
<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>
</body>
</html>
——————————-
Το αποτέλεσμα του παραπάνω κώδικα html μπορούμε να το δούμε στην εικόνα που ακολουθεί:
Εικόνες σε διαφορετικό φάκελο
Εάν δεν δηλωθεί κάτι διαφορετικό, τότε ο φυλλομετρητής υποθέτει οτι οι εικόνες βρίσκονται στον ίδιο φάκελο με την ιστοσελίδα.
ωστόσο είναι μιακαλή πολιτική κατασκευής ιστοσελίδων να τοποθετούμε όλες τις εικόνες σε υπο-φάκελο (sub-folder).
Σε αυτή την περίπτωση πρέπει να περιλαμβάνεται το όνομα του φακέλου στο χαρακτηριστικό src attribute.
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<body>
<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
</body>
</html>
——————————-
Το αποτέλεσμα εμφανίζεται στην ακόλουθη εικόνα:
Φιλοξενία εικόνων σε διαφορετικό Server
Κάποιες ιστοσελίδες αποθηκεύουν τις εικόνες τους σε διαφορετικούς server. Αυτοί οι servers που χρησιμοποιούνται για τη φιλοξενία εικόνων ονομάζονται image servers. Αυτή είναι μια πολιτική φιλοξενίας ιστοσελίδων που έχει κάποια πλεονεκτήματα. Εάν θέλετε να ενημερωθείτε περαιτέρω για τη φιλοξενία ιστοσελίδων δεν έχετε παρά να επισκεφθείτε μια αξιόπιστη εταιρεία φιλοξενίας ιστοσελίδων όπως είναι η hoster.gr
Ακολουθεί παράδειγμα που δείχνει πως μπορούμε να προσπελάσουμε εικόνες που βρίσκονται σε οποιαδήποτε διεύθυνση στον παγκόσμιο ιστό:
——————————-
<!DOCTYPE html>
<html>
<body>
<img src=”http://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com” style=”width:104px;height:142px;”>
</body>
</html>
——————————-
Βλέπουμε το αποτέλεσμα στην παρακάτω εικόνα:
Κινούμενες εικόνες
Το πρότυπο GIF επιτρέπει τη χρήση κινούμενων εικόνων. Χρησιμοποιούνται κανονικά όπως όλες οι υπόλοιπες εικόνες. Ακολουθεί παράδειγμα στο οποίο παρουσιάζουμε τη χρήση κινούμενων εικόνων σε σελίδα HTML:
——————————-
<!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src=”programming.gif” alt=”Computer man” style=”width:48px;height:48px;”>
</body>
</html>
——————————-
Το αποτέλεσμα φαίνεται στην ακόλουθη εικόνα:
Χρήση της εικόνας ως link
Για να χρησιμοποιήσουμε μια εικόνα ως σύνδεσμο (link), πρέπει απλά να χρησιμοποιήσουμε την εικέτα <img> έχω από την ετικέτα <a>.
Εάν δεν γνωρίζετε τη χρήση της ετικέτας <img> τότε δεν έχετε παρά να επισκεφθείτε το άρθρο μας που αναφέρεται στη χρήση συνδέσμων στην html
Ακολουθεί παράδειγμα που δείχνει τη χρήση μιας εικόνας ως link:
——————————-
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
</a>
<p>Add “border:0;” to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
——————————-
Το αποτέλεσμα του παραπάνω κώδικα html παρουσιάζεται στην εικόνα που ακολουθεί:
Στοίχιση εικόνων html
Μπορούμε να χρησιμοποιήσουμε την ιδιότητα CSS float property για να καθορίσουμε εάν η εικόνα θα τοποθετηθεί στα δεξιά ή στα αριστερά του κειμένου. Ακολουθεί παράδειγμα που μας βοηθάει να κατανοήσουμε καλύτερα τη στοίχιση των εικόνων στη γλώσσα html:
——————————-
<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.</p>
</body>
</html>
——————————-
Το αποτέλεσμα εμφανίζεται στην ακόλουθη εικόνα:
Χάρτης εικόνας (Image Map)
Μπορούμε να χρησιμοποιήσουμε την ετικέτα <map> για να δημιουργήσουμε ένα χάρτη εικόνας στην html. O xάρτης εικόνας είναι μια συνηθισμένη εικόνα πάνω στην οποί αόμως έχουμε δηλώσει συγκεκριμένες περιοχές στις οποίες ο χρήστης μπορεί να κάνει κλικ και να πλοηγηθεί μέσω συνδέσμου (link).
Το χαρακτηριστικό name attribute της ετικέτας <map> συνδέεται με το χαρακτηριστικό usemap attribute της ετικέτας <img> και δημιουργεί μια σύνδεση ανάμεσα στην εικόνα (img) και στο χάρτη (map).
Αυτό φαίνεται στο ακόλουθο παράδειγμα:
——————————-
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src=”planets.gif” alt=”Planets” usemap=”#planetmap” style=”width:145px;height:126px;”>
<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm”>
<area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm”>
<area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm”>
</map>
</body>
</html>
——————————-
Στην ακόλουθη εικόνα εμφανίζεται το αποτέλεσμα:
Χρήση εικόνων στην προώθηση ιστοσελίδων
Στην προώθηση ιστοσελίδων η χρήση των εικόνων αποτελεί ένα πολύ δυνατό εργαλείο. Όταν κατασκευάζουμε μια ιστοσελίδα πρέπει πάντα να έχουμε στο μυαλό μας την προώθηση αυτής. Είναι σημαντικό να γνωρίζουμε ότι οι μηχανές αναζήτησης έχουν τη δυνατότητα να καταλαβαίνουν το όνομα της της εικόνας (src) καθώς και τα χαρακτηριστικά της εικόνας. Το σημαντικότερο χαρακτηριστικό μιας εικόνας, όσον αφορά την προώθηση ιστοσελίδων, είναι το χαρακτηριστικό alt. Τόσο στο όνομα της εικόνας όσο και στο εναλλακτικό κείμενο (alt) της εικόνας είναι καλό να τοποθετούμε τις λέξεις κλειδιά της ιστοσελίδας που προωθούμε.
