Ανοίξτε το αρχείο HTML για την ιστοσελίδα στην οποία θέλετε να προσθέσετε μια εικόνα σε ένα πρόγραμμα επεξεργασίας κειμένου όπως το Σημειωματάριο ή λογισμικό ανάπτυξης Ιστού.
Προσθέστε μια ετικέτα στο αρχείο. Τοποθετήστε την ετικέτα μετά το στοιχείο στο οποίο θέλετε να εμφανίζεται μια εικόνα όταν ανοίγει το αρχείο HTML σε ένα πρόγραμμα περιήγησης. Η ετικέτα δεν έχει ξεχωριστή ετικέτα κλεισίματος. Μέσα στην ετικέτα, πρέπει να καθορίσετε την πηγή της εικόνας που θέλετε να εμφανίσετε πληκτρολογώντας τη θέση της εικόνας στο διαδίκτυο με το src Χαρακτηριστικό. Εάν η εικόνα είναι αποθηκευμένη στον ίδιο φάκελο με το αρχείο HTML, πληκτρολογήστε το όνομα και την επέκταση της εικόνας. Εάν η εικόνα είναι αποθηκευμένη αλλού, πληκτρολογήστε την πλήρη διεύθυνση URL της εικόνας.
Πρόσθεσε το alt αποδίδουν στην ετικέτα σας. Στην HTML5, απαιτείται το χαρακτηριστικό alt. Χρησιμοποιήστε αυτό το χαρακτηριστικό για να περιγράψετε την εικόνα σε περίπτωση που δεν μπορεί να φορτωθεί. Εάν μια εικόνα δεν μπορεί να φορτώσει, το πρόγραμμα περιήγησης εμφανίζει το κείμενο που εισάγετε μετά το χαρακτηριστικό alt. Επιπλέον, το χαρακτηριστικό alt είναι σημαντικό για το λογισμικό ανάγνωσης οθόνης που χρησιμοποιείται από άτομα με προβλήματα όρασης. Το λογισμικό διαβάζει το κείμενο στο χαρακτηριστικό alt, έτσι ώστε το άτομο με αναπηρία στην όραση που βλέπει τον ιστότοπό σας να μπορεί να ακούσει τι είναι στην εικόνα, παρόλο που δεν μπορεί να το δει.
Καθορίστε τις διαστάσεις της εικόνας σε pixel με το ύψος και πλάτος γνωρίσματα. Εάν δεν καθορίσετε τις διαστάσεις, το πρόγραμμα περιήγησης δεν γνωρίζει πόσο χώρο πρέπει να αφήσει για την εικόνα καθώς φορτώνει η σελίδα. Αυτό έχει ως αποτέλεσμα μια σελίδα να φορτώνει ασταμάτητα, καθώς το κείμενο φορτώνεται πρώτα, αφήνοντας ένα μικρό χώρο για την εικόνα, στη συνέχεια απομακρύνεται καθώς φορτώνει η εικόνα και προκαλεί την επέκταση του χώρου. Με τις καθορισμένες διαστάσεις, το πρόγραμμα περιήγησης αφήνει ακριβώς τον σωστό χώρο μεταξύ των άλλων στοιχείων στη σελίδα για να συμπληρώσει η εικόνα όταν ολοκληρωθεί η φόρτωσή της.
Δοκιμάστε τον κώδικά σας για να βεβαιωθείτε ότι η εικόνα εμφανίζεται στη σωστή θέση ανοίγοντας το αρχείο HTML σε ένα πρόγραμμα περιήγησης.
Χρησιμοποιήστε το CSS για να μετακινήσετε μια εικόνα στην αριστερή ή τη δεξιά πλευρά της οθόνης ή να τυλίξετε κείμενο γύρω της. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε style="float: left;" ή style="float: right;" εντός της ετικέτας.
Εάν δεν γνωρίζετε τόσο το ύψος όσο και το πλάτος μιας εικόνας, είναι καλό να χρησιμοποιήσετε μόνο το χαρακτηριστικό ύψος ή πλάτος. Μπορείτε επίσης να χρησιμοποιήσετε το CSS για να καθορίσετε το ύψος και το πλάτος. για παράδειγμα, με μια εικόνα 100 επί 100 pixel, χρησιμοποιήστε το χαρακτηριστικό style: style="height: 100px; πλάτος: 100 px."
Μετατρέψτε την εικόνα σε σύνδεσμο με δυνατότητα κλικ τοποθετώντας την ετικέτα σε ένα ζεύγος ετικετών "a href". Για παράδειγμα, εάν θέλετε μια εικόνα να συνδέεται με το Facebook, πληκτρολογήστε τα παρακάτω.
Μην χρησιμοποιείτε το χαρακτηριστικό alt για να προσπαθήσετε να ενισχύσετε το SEO της σελίδας σας. Οι μηχανές αναζήτησης γνωρίζουν εδώ και καιρό ότι ορισμένοι σχεδιαστές Ιστού προσπαθούν να γεμίσουν το χαρακτηριστικό alt με επιπλέον λέξεις-κλειδιά, και ως εκ τούτου αγνοούν το κείμενο στο χαρακτηριστικό alt.
