Κοιτάξτε οποιαδήποτε ιστοσελίδα σε απευθείας σύνδεση σήμερα και θα παρατηρήσετε ότι μοιράζονται ορισμένα κοινά πράγματα. Ένα από αυτά τα κοινά χαρακτηριστικά είναι οι εικόνες. Οι σωστές εικόνες προσθέτουν τόσο πολύ στην παρουσίαση ενός ιστότοπου. Ορισμένες από αυτές τις εικόνες, όπως το λογότυπο μιας εταιρείας, συμβάλλουν στη μάρκα του ιστότοπου και συνδέουν αυτήν την ψηφιακή οντότητα με τη φυσική σας εταιρεία.
Για να προσθέσετε μια εικόνα, ένα εικονίδιο ή γραφικά στην ιστοσελίδα σας, πρέπει να χρησιμοποιήσετε την ετικέτα στον κώδικα HTML μιας σελίδας. Τοποθετείτε την ετικέτα IMG στην HTML σας ακριβώς εκεί που θέλετε να εμφανίζεται το γραφικό. Το πρόγραμμα περιήγησης ιστού που αναπαριστά τον κώδικα της σελίδας θα αντικαταστήσει αυτήν την ετικέτα με το κατάλληλο γραφικό αφού προβεί στην προβολή της σελίδας. Επιστρέφοντας στο παράδειγμα λογότυπου της εταιρείας μας, μπορείτε να προσθέσετε αυτήν την εικόνα στον ιστότοπό σας:
Χαρακτηριστικά εικόνας
Ανατρέχοντας στον παραπάνω κώδικα HTML, θα δείτε ότι το στοιχείο περιλαμβάνει δύο ιδιότητες. Κάθε μία από αυτές είναι απαραίτητη για την εικόνα.
Το πρώτο χαρακτηριστικό είναι το "src". Αυτό είναι κυριολεκτικά το αρχείο εικόνας που θέλετε να εμφανίζεται στη σελίδα. Στο παράδειγμά μας χρησιμοποιούμε ένα αρχείο που ονομάζεται "logo.png". Αυτό είναι το γραφικό που θα εμφανιζόταν το πρόγραμμα περιήγησης ιστού κατά την απόδοση του ιστότοπου.
Θα παρατηρήσετε επίσης ότι πριν από αυτό το όνομα αρχείου, προσθέσαμε κάποιες πρόσθετες πληροφορίες, "/ images /". Αυτή είναι η διαδρομή του αρχείου. Η αρχική πλάγια κάθετος λέει στον διακομιστή να εξετάσει τη ρίζα του καταλόγου. Στη συνέχεια θα αναζητήσει ένα φάκελο που ονομάζεται "εικόνες" και τελικά το αρχείο που ονομάζεται "logo.png". Χρησιμοποιώντας ένα φάκελο που ονομάζεται "εικόνες" για την αποθήκευση όλων των γραφικών ενός ιστότοπου είναι μια πολύ συνηθισμένη πρακτική, αλλά η διαδρομή του αρχείου σας θα αλλάξει σε ό, τι αφορά το δικτυακό σας τόπο.
Το δεύτερο χαρακτηριστικό που απαιτείται είναι το κείμενο "alt". Αυτό είναι το "εναλλακτικό κείμενο" που εμφανίζεται αν η εικόνα αποτύχει να φορτωθεί για κάποιο λόγο. Αυτό το κείμενο, το οποίο στο παράδειγμά μας διαβάζει το "Εταιρικό λογότυπο" θα εμφανίζεται αν η εικόνα δεν καταφέρει να φορτωθεί. Γιατί θα συμβεί αυτό; Διάφοροι λόγοι:
- Εσφαλμένη διαδρομή αρχείου
- Λανθασμένο όνομα αρχείου ή ορθογραφικό λάθος
- Σφάλμα μετάδοσης
- Το αρχείο διαγράφηκε από το διακομιστή
Αυτές είναι μερικές μόνο δυνατότητες για το λόγο ότι η συγκεκριμένη εικόνα μας μπορεί να λείπει. Σε αυτές τις περιπτώσεις, το αλλιώδες κείμενο θα εμφανίζεται αντί.
Το κείμενο Alt χρησιμοποιείται επίσης από το πρόγραμμα ανάγνωσης οθόνης για να "διαβάσει" την εικόνα σε έναν επισκέπτη που έχει προβλήματα όρασης. Δεδομένου ότι δεν μπορούν να δουν την εικόνα όπως εμείς, αυτό το κείμενο τους επιτρέπει να γνωρίζουν τι είναι η ίδια η εικόνα. Αυτός είναι ο λόγος για τον οποίο απαιτείται alt κείμενο και γιατί πρέπει να αναφέρει σαφώς ποια είναι η εικόνα!
Μια κοινή παρεξήγηση του άλλου κειμένου είναι ότι προορίζεται για μηχανές αναζήτησης. Αυτό δεν είναι αληθινό. Ενώ η Google και άλλες μηχανές αναζήτησης διαβάζουν αυτό το κείμενο για να καθορίσουν τι είναι η εικόνα (μην ξεχνάτε ότι δεν μπορούν να "βλέπουν" την εικόνα σας), δεν πρέπει να γράφετε αλλιώς κείμενο που να απευθύνεται μόνο στις μηχανές αναζήτησης. Συγγραφέας σαφές alt κείμενο που προορίζεται για τον άνθρωπο. Εάν μπορείτε επίσης να προσθέσετε μερικές λέξεις-κλειδιά στην ετικέτα που προσελκύει τις μηχανές αναζήτησης, αυτό είναι καλό, αλλά πάντα βεβαιωθείτε ότι το alt κείμενο εξυπηρετεί τον πρωταρχικό σκοπό του δηλώνοντας τι είναι η εικόνα για όποιον δεν μπορεί να δει το αρχείο γραφικών.
Άλλα Χαρακτηριστικά
Η ετικέτα IMG έχει επίσης δύο άλλα χαρακτηριστικά που μπορείτε να δείτε όταν χρησιμοποιείτε ένα γραφικό στην ιστοσελίδα σας - το πλάτος και το ύψος. Για παράδειγμα, εάν χρησιμοποιείτε ένα πρόγραμμα επεξεργασίας WYSIWYG όπως το Dreamweaver, αυτόματα προσθέτει αυτές τις πληροφορίες για εσάς. Ακολουθεί ένα παράδειγμα:
Τα χαρακτηριστικά WIDTH και HEIGHT λένε στο πρόγραμμα περιήγησης το μέγεθος της εικόνας. Το πρόγραμμα περιήγησης ξέρει τότε πόσος χώρος στη διάταξη θα διατεθεί και μπορεί να μεταβεί στο επόμενο στοιχείο της σελίδας ενώ γίνεται λήψη των εικόνων. Το πρόβλημα με τη χρήση αυτών των πληροφοριών στην HTML σας είναι ότι μπορεί να μην θέλετε πάντα να εμφανίζεται η εικόνα σας με το συγκεκριμένο μέγεθος. Για παράδειγμα, αν έχετε έναν ανταποκρινόμενο ιστότοπο του οποίου η μεγέθυνση αλλάζει με βάση την οθόνη επισκεπτών και το μέγεθος της συσκευής, θα θέλετε επίσης οι εικόνες σας να είναι ευέλικτες. Εάν δηλώσετε στο HTML σας ποιο είναι το σταθερό μέγεθος, θα είναι πολύ δύσκολο να παρακάμψετε τα ερωτήματα μέσων απόκρισης CSS . Για το λόγο αυτό, και για να διατηρήσετε ένα διαχωρισμό του στυλ (CSS) και της δομής (HTML), συνιστάται να μην προσθέτετε τα χαρακτηριστικά του πλάτους και του ύψους στον κώδικα HTML.
Μια σημείωση: Εάν αφήσετε τις οδηγίες μεγέθους μακριά και δεν καθορίσετε ένα μέγεθος στο CSS, το πρόγραμμα περιήγησης θα εμφανίσει την εικόνα στο προεπιλεγμένο, αυτόνομο μέγεθος ούτως ή άλλως.
Επεξεργασμένο από τον Jeremy Girard