eMail 
LiveChat 
Υποστήριξη 
Εικόνες στην HTML
Οι εικόνες είναι αναπόσπαστο κομμάτι των εγγράφων HTML σχεδόν σε κάθε web site που βλέπουμε στο διαδίκτυο στις μέρες μας. Για να εισάγετε μια εικόνα σε μια σελίδα HTML θα πρέπει να χρησιμοποιήσετε την ετικέτα <img /> και να ορίσετε ορισμένες από τις ιδιότητες της. Θα έχετε ήδη παρατηρήσει πως η ετικέτα <img /> δεν έχει ετικέτα τερματισμού.
Για να προβάλετε μια εικόνα με την ετικέτα <img />, πρέπει να ορίσετε την ιδιότητα src. Η ιδιότητα src είναι η συντόμευση της λέξης source που στα ελληνικά σημαίνει πηγή. Η τιμή που πρέπει να ορίσετε στην τιμή src είναι η πλήρης ή η σχετική διεύθυνση της εικόνας που θέλετε να προβάλετε σε αυτό το στοιχείο.
Η σύνταξη της ετικέτας <img /> είναι σαν αυτή που ακολουθεί:
<img src=”image_url” alt=”εναλλακτικό κείμενο” />
Μέσα στην ιδιότητα src θα πρέπει να εισάγετε τη διεύθυνση της εικόνας που θέλετε να εμφανίσετε με την ετικέτα <img />. Για παράδειγμα, μια εικόνα με όνομα stigmahost.png, μέσα στον φάκελο /pictures/ της ιστοσελίδας www.stigmahost.com θα έχει URL http://www.stigmahost.com/pictures/stigmahost.png.
Ο περιηγητής διαδικτύου, στο σημείο που υπάρχει η ετικέτα <img />. Αν στο έγγραφό σας έχετε μια ετικέτα <img /> ανάμεσα από δυο ετικέτες <p> τότε, αυτό που θα εμφανιστεί στην περιηγητή διαδικτύου θα είναι μια παράγραφος κειμένου, μετά μια εικόνα και τέλος ακόμα μία παράγραφος κειμένου.
Εικόνες στην HMTL και η ιδιότητα Alt
Η απαραίτητη ιδιότητα alt παρέχει ένα εναλλακτικό κείμενο για την εικόνα, που εμφανίζεται όταν για κάποιο λόγο η εικόνα δεν μπορεί να εμφανιστεί.
Η τιμή τις ιδιότητας alt είναι ένα κείμενο που ορίζει ο συγγραφέας του HTML εγγράφου όπως στο παράδειγμα που ακολουθεί:
<img src=”stigmahost.jpg” alt=”Το λογότυπο της StigmaHost” />
Γιατί είναι τόσο σημαντική η ιδιότητα alt; Συμβαίνει μερικές φορές, ο Web Browser σας να μην κατεβάσει μια εικόνα, και σε αυτή την περίπτωση ο χρήστης μπορεί να δει μια περιγραφή της εικόνας αυτής που δεν κατέβηκε από το Server σας. Επίσης, υπάρχουν περιπτώσεις που οι χρήστες έχουν απενεργοποιήσει εντελώς τις εικόνες τους από του περιηγητές διαδικτύου τους. Ακόμα, υπάρχουν άνθρωποι με προβλήματα όρασης, που χρησιμοποιούν αναγνώστες οθόνης. Σε αυτή την περίπτωση, οι αναγνώστες διαβάζουν την ιδιότητα alt στα άτομα που τους χρησιμοποιούν. Τέλος υπάρχουν χρήστες που δεν θέλουν εικόνες όταν εκτυπώνουν ένα έγγραφο HTML, και σε αυτή την περίπτωση θα εκτυπωθεί η τιμή τις ιδιότητας alt.
Εικόνες στην HTML – Ορισμός πλάτους και ύψους
Μπορείτε αν θέλετε να χρησιμοποιήσετε τις ιδιότητες width και height για να ορίσετε το πλάτος και το ύψος μιας εικόνας. Οι τιμές που πρέπει να ορίσετε σε αυτές τις ιδιότητες θα πρέπει να είναι ακέραιοι αριθμοί και ορίζουν το πλάτος της εικόνας σε κουκκίδες (pixels) όπως στο παράδειγμα που ακολουθεί:
<img src=”stigmahost.jpg” alt=”Το λογότυπο της StigmaHost” width=”180” height=”410” />
Συμβουλή : Είναι μια καλή τακτική να ορίζετε το πλάτος και το ύψος μιας εικόνας. Αν ορίσετε αυτές οι τιμές, ο χώρος που χρειάζεται η εικόνα δεσμεύεται κατά το φόρτωμα της σελίδας. Ωστόσο χωρίς αυτές τις τιμές, ο περιηγητής διαδικτύου δεν μπορεί να γνωρίζει εξ αρχής ποιο είναι το μέγεθος της εικόνας. Σαν αποτέλεσμα, η δομή της σελίδας θα αλλάξει όταν τελικά φορτωθούν οι εικόνες.
Βασικές σημειώσεις και συμβουλές
Σημείωση : Αν ένα HTML έγγραφο περιέχει για παράδειγμα 15 εικόνες, τότε για να προβληθεί η σελίδα σας στον περιηγητή διαδικτύου θα πρέπει να κατεβούν από το server σας 16 αρχεία, ένα για την ίδια τη σελίδα και οι 15 εικόνες που χρησιμοποιείτε. Αυτό μπορεί να κάνει τη σελίδα σας βαριά με αποτέλεσμα να αργεί να εμφανιστεί στον τελικό χρήστη. Προσοχή λοιπόν και χρησιμοποιείτε τις εικόνες με φειδώ.
[COL size=”one_half”]« Σύνδεσμοι στην HTML[/COL] [COL size=’one_half’ last=’last’]
[/COL]
