Εικόνες HTML

Με τη χρήση του HTML, μπορείτε να εμφανίσετε εικόνες στο έγγραφο.

Παράδειγμα

Εισαγωγή εικόνας
Αυτό το παράδειγμα δείχνει πώς να εμφανίζετε εικόνες σε ιστοσελίδες.
Εισαγωγή εικόνας από διαφορετικές τοποθεσίες
Αυτό το παράδειγμα δείχνει πώς να εμφανίζετε εικόνες από άλλους φακέλους ή διακομιστές σε ιστοσελίδες.

(Μπορείτε να βρείτε περισσότερες παραδείξεις στο κάτω μέρος αυτής της σελίδας)

Ετικέτα εικόνας (<img>) και ιδιότητα πηγής (Src)

Στο HTML, η εικόνα ορίζεται από την ετικέτα <img>.

<img> είναι κενή ετικέτα, που σημαίνει ότι περιέχει μόνο ιδιότητες και δεν έχει κλείσιμο ετικέτας.

Για να εμφανίσετε την εικόνα στη σελίδα, πρέπει να χρησιμοποιήσετε την ιδιότητα πηγής (src). Το src σημαίνει "πηγή". Η τιμή της ιδιότητας πηγής είναι η διεύθυνση URL της εικόνας.

Η γραμματική ορισμού της εικόνας είναι:

<img src="url" />

Η URL δείχνει την τοποθεσία αποθήκευσης της εικόνας. Αν η εικόνα με το όνομα "boat.gif" βρίσκεται στον κατάλογο "images" του www.codew3c.com, τότε η URL της είναι http://www.codew3c.com/images/boat.gif.

Ο περιηγητής εμφανίζει την εικόνα στο σημείο όπου εμφανίζεται η ετικέτα εικόνας στο έγγραφο. Αν θέλετε να τοποθετήσετε την ετικέτα εικόνας μεταξύ δύο παραγράφων, ο περιηγητής θα εμφανίσει πρώτα την πρώτη παράγραφο, στη συνέχεια την εικόνα και τελικά τη δεύτερη παράγραφο.

Επιλογή τεκμηρίωσης αντικειμένου (Alt)

Η ιδιότητα alt χρησιμοποιείται για να ορίσει μια αλυσίδα εναλλακτικού κειμένου για την εικόνα. Η τιμή της ιδιότητας αντικατάστασης κειμένου είναι ορισμένη από τον χρήστη.

<img src="boat.gif" alt="Big Boat">

Όταν ο περιηγητής δεν μπορεί να φορτώσει την εικόνα, η ιδιότητα αντικατάστασης κειμένου ενημερώνει τους αναγνώστες για την χαμένη πληροφορία. Σε αυτή την περίπτωση, ο περιηγητής θα εμφανίσει αυτό το εναλλακτικό κείμενο αντί για την εικόνα. Είναι καλή πρακτική να προσθέσετε ιδιότητα αντικατάστασης κειμένου σε όλες τις εικόνες της σελίδας, καθώς βοηθά στην καλύτερη εμφάνιση των πληροφοριών και είναι πολύ χρήσιμη για αυτούς που χρησιμοποιούν περιηγητές που δείχνουν μόνο κείμενο.

Βασικές προειδοποιήσεις - Χρήσιμες συμβουλές:

Αν ένα αρχείο HTML περιέχει δέκα εικόνες, τότε για να εμφανιστεί σωστά η σελίδα, πρέπει να φορτωθούν 11 αρχεία. Το φορτώσιμο εικόνων απαιτεί χρόνο, οπότε η συμβουλή μας είναι: να χρησιμοποιείτε με προσοχή τις εικόνες.

Περισσότερα παραδείγματα

Εικόνα παρασκηνίου
Αυτό το παράδειγμα δείχνει πώς να προσθέσετε εικόνα ως 배경 σε σελίδα HTML.
Συνορισμός εικόνας
Αυτό το παράδειγμα δείχνει πώς να τοποθετήσετε την εικόνα στο κείμενο.
Κολυμπήστε την εικόνα
Αυτό το παράδειγμα δείχνει πώς να κάνετε την εικόνα να κολυμπήσει στο αριστερό ή το δεξί μέρος του κειμένου.
Ρύθμιση μεγέθους εικόνας
Αυτό το παράδειγμα δείχνει πώς να προσαρμόσετε το μέγεθος της εικόνας.
Εμφάνιση κειμένου αντικατάστασης για την εικόνα
Αυτό το παράδειγμα δείχνει πώς να εμφανιστεί κείμενο αντικατάστασης για την εικόνα. Όταν ο περιηγητής δεν μπορεί να φορτώσει την εικόνα, η ιδιότητα αντικατάστασης κειμένου ενημερώνει τους αναγνώστες για την χαμένη πληροφορία. Είναι καλή πρακτική να προσθέσετε ιδιότητα αντικατάστασης κειμένου σε όλες τις εικόνες της σελίδας.
Δημιουργία σύνδεσμου εικόνας
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιηθεί η εικόνα ως σύνδεσμος.
Δημιουργία εικονικού χάρτη
Αυτό το παράδειγμα δείχνει πώς να δημιουργηθεί ένας εικονικός χάρτης με επιλέξιμες περιοχές κλικ. Κάθε περιοχή είναι ένας σύνδεσμος.
Μετατροπή εικόνας σε εικονικό χάρτη
Αυτό το παράδειγμα δείχνει πώς να γίνει μια τυπική εικόνα σε εικονικό χάρτη.

Ετικέτα εικόνας

Ετικέτα Περιγραφή
<img> Ορίζει την εικόνα.
<map> Ορίζει τον εικονικό χάρτη.
<area> Ορίζει την επιλέξιμη περιοχή για κλικ στο εικονικό χάρτη.