ο HTML Η ετικέτα IMG διέπει την εισαγωγή εικόνων και άλλων στατικών γραφικών αντικειμένων σε μια ιστοσελίδα. Αυτή η κοινή ετικέτα υποστηρίζει πολλά υποχρεωτικά και προαιρετικά χαρακτηριστικά που προσθέτουν πλούτο στη δυνατότητά σας να σχεδιάσετε έναν ελκυστικό, εστιασμένο στην εικόνα ιστότοπο.
Ένα παράδειγμα μιας πλήρως σχηματισμένης ετικέτας IMG HTML μοιάζει με αυτό:
Απαιτούμενα χαρακτηριστικά ετικέτας IMG
src = "/ διαδρομή / προς / image.jpg"
Το μόνο χαρακτηριστικό που χρειάζεστε για να εμφανιστεί μια εικόνα σε μια ιστοσελίδα είναι το src Χαρακτηριστικό. Αυτό το χαρακτηριστικό προσδιορίζει το όνομα και τη θέση του αρχείου εικόνας που θα εμφανιστεί.
alt = "Περιγραφή εικόνας"
Για να γράψετε έγκυρα XHTML και HTML4, το υψ απαιτείται επίσης χαρακτηριστικό. Αυτό το χαρακτηριστικό χρησιμοποιείται για να παρέχει στα μη οπτικά προγράμματα περιήγησης κείμενο που περιγράφει την εικόνα. Τα προγράμματα περιήγησης εμφανίζουν το εναλλακτικό κείμενο με διαφορετικούς τρόπους. Μερικοί το εμφανίζουν ως αναδυόμενο παράθυρο όταν τοποθετείτε το ποντίκι σας πάνω από την εικόνα, άλλοι το εμφανίζουν σε ιδιότητες όταν κάνετε δεξί κλικ στην εικόνα και κάποιοι δεν το εμφανίζουν καθόλου.
Χρησιμοποιήστε το alt κείμενο για να δώσετε πρόσθετες λεπτομέρειες σχετικά με την εικόνα που δεν είναι σχετικές ή σημαντικές για το κείμενο της ιστοσελίδας. Ωστόσο, να θυμάστε ότι σε προγράμματα ανάγνωσης οθόνης και σε άλλα προγράμματα περιήγησης μόνο για κείμενο, το κείμενο θα διαβάζεται ενσωματωμένο με το υπόλοιπο κείμενο στη σελίδα. Για να αποφύγετε τη σύγχυση, χρησιμοποιήστε περιγραφικό alt κείμενο που λέει (για παράδειγμα), "Σχετικά με το σχεδιασμό ιστοσελίδων και HTML" αντί για "λογότυπο".
ο υψ Το κείμενο είναι επίσης απαραίτητο για SEO (Search Engine Optimization). Τα bots που χρησιμοποιούν οι μηχανές αναζήτησης, όπως το Google, για να εξερευνήσουν το περιεχόμενο σε ιστότοπους δεν μπορούν να "δουν" εικόνες. Στηρίζονται στο υψ κείμενο για να προσδιορίσετε τι υπάρχει στη σελίδα.
Σε HTML5, ο υψ Το χαρακτηριστικό δεν απαιτείται πάντα, επειδή μπορείτε να χρησιμοποιήσετε ένα λεζάντα για να προσθέσετε περισσότερη περιγραφή σε αυτό. Μπορείτε επίσης να χρησιμοποιήσετε αυτό το χαρακτηριστικό για να υποδείξετε ένα αναγνωριστικό που περιέχει μια πλήρη περιγραφή:
aria-faamatalaby = "Περιγραφή εικόνας"
Επίσης, δεν απαιτείται εναλλακτικό κείμενο εάν η εικόνα είναι καθαρά διακοσμητική, όπως ένα γραφικό στο πάνω μέρος μιας ιστοσελίδας ή εικονίδια. Αλλά αν δεν είστε σίγουροι, συμπεριλάβετε το κείμενο alt μόνο για κάθε περίπτωση.
Χαρακτηριστικά μεγέθους
πλάτος = "500"και.
ύψος = "500"Ανάλογα με το σχέδιό σας, χρησιμοποιώντας το. ύψος και. πλάτος
Γενικά, θα θέλατε να οριστεί το μέγεθος της εικόνας στο CSS σας. Τις περισσότερες φορές, αυτό θα είναι το αποτέλεσμα των διαστάσεων του γονικού κοντέινερ μιας εικόνας. Αυτή η προσέγγιση επιτρέπει τη μεγαλύτερη ευελιξία κατά την προσαρμογή σε διαφορετικά μεγέθη οθόνης. Ωστόσο, εξακολουθούν να υπάρχουν περιπτώσεις όπου μπορεί να θέλετε να καθορίσετε τις διαστάσεις εικόνας ως χαρακτηριστικά HTML.
Άλλα χρήσιμα χαρακτηριστικά IMG
title = "Περιγραφικό όνομα εικόνας"Το χαρακτηριστικό είναι ένα καθολικό χαρακτηριστικό που μπορεί να εφαρμοστεί σε οποιοδήποτε. Στοιχείο HTML. Επιπλέον, το. τίτλος
Τα περισσότερα προγράμματα περιήγησης υποστηρίζουν το τίτλος χαρακτηριστικό, αλλά το κάνουν με διαφορετικούς τρόπους. Μερικοί εμφανίζουν το κείμενο ως αναδυόμενο παράθυρο, ενώ άλλοι το εμφανίζουν σε οθόνες πληροφοριών όταν ο χρήστης κάνει δεξί κλικ στην εικόνα. Μπορείτε να χρησιμοποιήσετε το τίτλος χαρακτηριστικό για να γράψετε πρόσθετες πληροφορίες σχετικά με την εικόνα, αλλά μην υπολογίζετε ότι αυτές οι πληροφορίες είναι είτε κρυμμένες ή ορατός. Δεν πρέπει σίγουρα να το χρησιμοποιείτε για να αποκρύψετε λέξεις-κλειδιά για μηχανές αναζήτησης. Αυτή η πρακτική τιμωρείται τώρα από τις περισσότερες μηχανές αναζήτησης.
χάρτης χρήστη = ""και.
ismap = ""Αυτά τα δύο χαρακτηριστικά ορίζουν πελάτη () και διακομιστή (ISMAP) χάρτες εικόνων
longdesc = "Μια πιο λεπτομερής περιγραφή της εικόνας σας"Ο. longdesc
Καταργημένα και ξεπερασμένα χαρακτηριστικά IMG
Πολλά χαρακτηριστικά είναι πλέον ξεπερασμένα σε HTML5 ή έχουν καταργηθεί σε HTML4. Για το καλύτερο HTML, θα πρέπει να βρείτε άλλες λύσεις αντί να χρησιμοποιήσετε αυτά τα χαρακτηριστικά.
περίγραμμα = "3"
align = "αριστερά"Αυτό το χαρακτηριστικό σας επιτρέπει να τοποθετήσετε μια εικόνα μέσα στο κείμενο και να έχετε τη ροή του κειμένου γύρω από αυτό. Μπορείτε να ευθυγραμμίσετε μια εικόνα προς τα δεξιά ή προς τα αριστερά. Έχει καταργηθεί υπέρ του. float CSS ιδιοκτησία
hspcace = "10"και.
vspace = "10"Ο. hspace και. vspace τα χαρακτηριστικά προσθέτουν κενό διάστημα οριζόντια ( hspace) και κάθετα ( vspace
lowsrc = "/ διαδρομή / προς / lowres.jpg"Ο. lowsrc Το χαρακτηριστικό παρέχει μια εναλλακτική εικόνα όταν η πηγή της εικόνας σας είναι τόσο μεγάλη που κατεβάζει εξαιρετικά αργά. Για παράδειγμα, μπορεί να έχετε μια εικόνα 500KB που θέλετε να εμφανίζεται στην ιστοσελίδα σας, αλλά η λήψη 500KB θα χρειαστεί πολύς χρόνος για τη λήψη. Έτσι δημιουργείτε ένα πολύ μικρότερο αντίγραφο της εικόνας, ίσως σε ασπρόμαυρο ή απλά εξαιρετικά βελτιστοποιημένο, και το τοποθετείτε στο. lowsrc
ο lowsrc Το χαρακτηριστικό προστέθηκε στο Netscape Navigator 2.0 στην ετικέτα. Ήταν μέρος του DOM επίπεδο 1, αλλά στη συνέχεια αφαιρέθηκε από το επίπεδο DOM 2. Η υποστήριξη του προγράμματος περιήγησης ήταν ασαφής για αυτό το χαρακτηριστικό, αν και πολλοί ιστότοποι ισχυρίζονται ότι υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης. Δεν έχει καταργηθεί σε HTML4 ή ξεπερασμένο σε HTML5, επειδή δεν ήταν ποτέ επίσημο μέρος οποιασδήποτε από τις προδιαγραφές.
Αποφύγετε τη χρήση αυτού του χαρακτηριστικού και, αντίθετα, βελτιστοποιήστε τις εικόνες σας, ώστε να φορτώνονται γρήγορα. Η ταχύτητα φόρτωσης σελίδων αποτελεί κρίσιμο μέρος της καλής σχεδίασης ιστού και οι μεγάλες εικόνες επιβραδύνουν σημαντικά τις σελίδες - ακόμη και αν χρησιμοποιείτε το lowsrc Χαρακτηριστικό.