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