Χρήση της ετικέτας HTML IMG για εικόνες και αντικείμενα
Η ετικέτα HTML IMG διέπει την εισαγωγή εικόνων και άλλων στατικών γραφικών αντικειμένων μέσα σε μια ιστοσελίδα. Αυτή η κοινή ετικέτα υποστηρίζει πολλά υποχρεωτικά και προαιρετικά χαρακτηριστικά που προσθέτουν πλούτο στην ικανότητά σας να σχεδιάζετε έναν ελκυστικό ιστότοπο που εστιάζει στην εικόνα.
Ένα παράδειγμα μιας πλήρως διαμορφωμένης ετικέτας HTML IMG μοιάζει με αυτό:
Απαιτούμενα Χαρακτηριστικά ετικετών IMG
SRC. Το μόνο χαρακτηριστικό που χρειάζεστε για να εμφανίσετε μια εικόνα για προβολή σε μια ιστοσελίδα είναι το χαρακτηριστικό SRC. Αυτό το χαρακτηριστικό προσδιορίζει το όνομα και τη θέση του αρχείου εικόνας που θα εμφανιστεί.
ALT. Για να γράψετε έγκυρα XHTML και HTML4, απαιτείται επίσης το χαρακτηριστικό ALT. Αυτό το χαρακτηριστικό χρησιμοποιείται για την παροχή μη περιηγητικών φυλλομετρητών με κείμενο που περιγράφει την εικόνα. Τα προγράμματα περιήγησης εμφανίζουν το εναλλακτικό κείμενο με διαφορετικούς τρόπους. Ορισμένοι το εμφανίζουν ως αναδυόμενο παράθυρο όταν τοποθετείτε το ποντίκι πάνω στην εικόνα, άλλοι το εμφανίζουν στις ιδιότητες όταν κάνετε δεξί κλικ στην εικόνα και μερικά δεν την εμφανίζουν καθόλου.
Χρησιμοποιήστε το κείμενο alt για να δώσετε πρόσθετες λεπτομέρειες σχετικά με την εικόνα που δεν είναι σχετικές ή σημαντικές για το κείμενο της ιστοσελίδας. Αλλά θυμηθείτε ότι σε προγράμματα ανάγνωσης οθόνης και σε άλλα προγράμματα περιήγησης μόνο για κείμενο, το κείμενο θα διαβαστεί εν συντομία με το υπόλοιπο κείμενο στη σελίδα. Για να αποφύγετε τη σύγχυση, χρησιμοποιήστε το περιγραφικό alt κείμενο που λέει (για παράδειγμα) "Σχετικά με το Web Design και HTML" αντί για το "λογότυπο".
Στην HTML5, το χαρακτηριστικό ALT δεν απαιτείται πάντα, επειδή μπορείτε να χρησιμοποιήσετε μια λεζάντα για να προσθέσετε περισσότερες περιγραφές σε αυτό. Μπορείτε επίσης να χρησιμοποιήσετε το χαρακτηριστικό ARIA-DESCRIBEDBY για να υποδείξετε ένα αναγνωριστικό που περιέχει μια πλήρη περιγραφή.
Το κείμενο Alt δεν απαιτείται επίσης εάν η εικόνα είναι καθαρά διακοσμητική, όπως ένα γραφικό στην κορυφή μιας ιστοσελίδας ή εικονίδια. Αλλά αν δεν είστε βέβαιοι, συμπεριλάβετε αλλιώς κείμενο μόνο σε περίπτωση.
Προτεινόμενα χαρακτηριστικά IMG
WIDTH και HEIGHT . Θα πρέπει να έχετε τη συνήθεια να χρησιμοποιείτε πάντα τα χαρακτηριστικά WIDTH και HEIGHT. Και θα πρέπει πάντα να χρησιμοποιείτε το πραγματικό μέγεθος και να μην αλλάζετε το μέγεθος των εικόνων σας με το πρόγραμμα περιήγησης.
Αυτά τα χαρακτηριστικά επιταχύνουν την απόδοση της σελίδας επειδή το πρόγραμμα περιήγησης μπορεί να διαθέσει χώρο στο σχέδιο για την εικόνα και στη συνέχεια να συνεχίσει να κάνει λήψη του υπόλοιπου περιεχομένου αντί να περιμένει την πλήρη λήψη της εικόνας.
Άλλα χρήσιμα χαρακτηριστικά του IMG
ΤΙΤΛΟΣ . Το χαρακτηριστικό είναι ένα γενικό χαρακτηριστικό που μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο HTML . Επιπλέον, το χαρακτηριστικό TITLE σας επιτρέπει να προσθέσετε επιπλέον πληροφορίες σχετικά με την εικόνα.
Τα περισσότερα προγράμματα περιήγησης υποστηρίζουν το χαρακτηριστικό TITLE, αλλά το κάνουν με διαφορετικούς τρόπους. Ορισμένοι εμφανίζουν το κείμενο ως αναδυόμενο παράθυρο, ενώ άλλοι το εμφανίζουν σε οθόνες πληροφοριών όταν ο χρήστης κάνει δεξί κλικ στην εικόνα. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό TITLE για να γράψετε πρόσθετες πληροφορίες σχετικά με την εικόνα, αλλά μην υπολογίζετε σε αυτές τις πληροφορίες που είναι κρυφές ή ορατές. Θα πρέπει σίγουρα να μην χρησιμοποιήσετε αυτό για να κρύψετε λέξεις-κλειδιά για τις μηχανές αναζήτησης. Αυτή η πρακτική τώρα τιμωρείται από τις περισσότερες μηχανές αναζήτησης.
USEMAP και ISMAP . Αυτά τα δύο χαρακτηριστικά θέτουν χάρτες εικόνων πλευράς πελάτη () και διακομιστή (ISMAP) στις εικόνες σας.
LONGDESC . Το χαρακτηριστικό αυτό υποστηρίζει τις διευθύνσεις URL σε μια μακρύτερη περιγραφή της εικόνας. Αυτή η λειτουργία καθιστά τις εικόνες σας πιο προσιτές.
Αποσυνδεδεμένα και παρωχημένα χαρακτηριστικά IMG
Αρκετά χαρακτηριστικά είναι πλέον παρωχημένα σε HTML5 ή έχουν υποβληθεί σε HTML4. Για την καλύτερη HTML, θα πρέπει να βρείτε άλλες λύσεις αντί να χρησιμοποιήσετε αυτά τα χαρακτηριστικά.
ΣΥΝΟΡΑ . Το χαρακτηριστικό καθορίζει το πλάτος σε pixels οποιουδήποτε περιγράμματος γύρω από την εικόνα. Απορρίφθηκε υπέρ του CSS σε HTML4 και είναι ξεπερασμένο σε HTML5.
ALIGN . Αυτό το χαρακτηριστικό σας επιτρέπει να τοποθετήσετε μια εικόνα μέσα στο κείμενο και να έχετε τη ροή κειμένου γύρω από αυτό. Μπορείτε να ευθυγραμμίσετε μια εικόνα προς τα δεξιά ή προς τα αριστερά. Απορρίφθηκε υπέρ της ιδιότητας CSS float σε HTML4 και είναι παρωχημένη σε HTML5.
HSPACE και VSPACE . Το HSPACE και τα χαρακτηριστικά VSPACE προσθέτουν λευκό χώρο οριζόντια (HSPACE) και κάθετα (VSPACE). Ο λευκός χώρος θα προστεθεί και στις δύο πλευρές του γραφικού (πάνω και κάτω ή αριστερά και δεξιά), οπότε αν χρειαστεί μόνο χώρος από τη μία πλευρά, θα πρέπει να χρησιμοποιήσετε το CSS. Αυτά τα χαρακτηριστικά έχουν καταργηθεί στην HTML4 υπέρ της ιδιότητας CSS περιθωρίου και είναι ξεπερασμένα σε HTML5.
LOWSRC . Το χαρακτηριστικό LOWSRC παρέχει μια εναλλακτική εικόνα όταν η πηγή εικόνας σας είναι τόσο μεγάλη που κατεβάζει εξαιρετικά αργά. Για παράδειγμα, μπορεί να έχετε μια εικόνα που είναι 500KB που θέλετε να εμφανίζεται στην ιστοσελίδα σας, αλλά 500KB θα χρειαστεί πολύ χρόνο για να κατεβάσετε. Έτσι δημιουργείτε ένα πολύ μικρότερο αντίγραφο της εικόνας, ίσως σε ασπρόμαυρο ή απλώς εξαιρετικά βελτιστοποιημένο, και το βάζετε στο χαρακτηριστικό LOWSRC. Η μικρότερη εικόνα θα κατεβάσει και θα εμφανιστεί πρώτα, και στη συνέχεια, όταν εμφανιστεί η μεγαλύτερη εικόνα, θα αντικαταστήσει την εικόνα χαμηλής πηγής.
Το χαρακτηριστικό LOWSRC προστέθηκε στο Netscape Navigator 2.0 στην ετικέτα IMG. Ήταν μέρος του DOM επίπεδο 1, αλλά στη συνέχεια αφαιρέθηκε από το επίπεδο DOM 2. Η υποστήριξη του προγράμματος περιήγησης ήταν σκανδαλώδης για αυτό το χαρακτηριστικό, αν και πολλοί ιστότοποι υποστηρίζουν ότι υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης. Δεν καταργείται στο HTML4 ή είναι απαρχαιωμένο σε HTML5 επειδή δεν ήταν ποτέ επίσημο μέρος ούτε των προδιαγραφών.
Αποφύγετε τη χρήση αυτού του χαρακτηριστικού και αντ 'αυτού βελτιστοποιήστε τις εικόνες σας έτσι ώστε να φορτώνονται γρήγορα. Η ταχύτητα φόρτωσης της σελίδας είναι ένα κρίσιμο μέρος του καλού σχεδιασμού ιστοσελίδων και οι μεγάλες εικόνες επιβραδύνουν τις σελίδες σε πολύ χαμηλά επίπεδα, ακόμη και αν χρησιμοποιείτε το χαρακτηριστικό LOWSRC.