HTML-005 — HTML Εικόνες: Το στοιχείο img, οι ιδιότητες src και alt

HTML-005 — HTML Εικόνες: Το στοιχείο img, οι ιδιότητες src και alt

Καλώς ήρθες σε ένα ακόμη μάθημα του Jerry's CodeLab!

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

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

1. Τι είναι οι εικόνες στην HTML;

Η HTML μάς δίνει τη δυνατότητα να εμφανίζουμε εικόνες μέσα σε μια ιστοσελίδα χρησιμοποιώντας το στοιχείο <img>.

Το στοιχείο <img> είναι κενό στοιχείο (void element). Αυτό σημαίνει ότι δεν χρειάζεται ξεχωριστή ετικέτα κλεισίματος.

Η βασική του σύνταξη είναι:

<img src="image.jpg" alt="Περιγραφή εικόνας">

Ας γνωρίσουμε τις βασικές ιδιότητές του.

2. Η ιδιότητα src

Η ιδιότητα src (source) καθορίζει τη διαδρομή ή τη διεύθυνση της εικόνας που θέλουμε να εμφανίσουμε.

<img src="flower.jpg" alt="Ένα όμορφο λουλούδι">

Η εικόνα μπορεί να βρίσκεται στον ίδιο φάκελο με το αρχείο HTML ή σε κάποιον υποφάκελο.

Εικόνα στον ίδιο φάκελο

<img src="photo.jpg" alt="Μια φωτογραφία">

Εικόνα σε υποφάκελο

<img src="images/photo.jpg" alt="Μια φωτογραφία">

Εικόνα από διεύθυνση URL

<img src="https://example.com/photo.jpg"
     alt="Μια φωτογραφία">

Προσοχή: Αν η διαδρομή ή η διεύθυνση της εικόνας είναι λανθασμένη, η εικόνα δεν θα εμφανιστεί.

3. Η ιδιότητα alt

Η ιδιότητα alt (alternative text) παρέχει ένα εναλλακτικό κείμενο που περιγράφει την εικόνα.

<img src="cat.jpg" alt="Μια γάτα που κοιμάται">

Το εναλλακτικό κείμενο είναι σημαντικό για δύο βασικούς λόγους:

• Βοηθά τους χρήστες που χρησιμοποιούν αναγνώστες οθόνης να κατανοήσουν το περιεχόμενο της εικόνας.
• Μπορεί να εμφανιστεί όταν η εικόνα δεν φορτώνεται.

Δεν πρέπει να αφήνουμε την ιδιότητα alt χωρίς λόγο.

Παράδειγμα σωστής περιγραφής

<img src="dog.jpg" alt="Ένας σκύλος παίζει με μια μπάλα">

Αν μια εικόνα είναι καθαρά διακοσμητική και δεν προσθέτει πληροφορία, μπορούμε να χρησιμοποιήσουμε κενό εναλλακτικό κείμενο:

<img src="decoration.png" alt="">

4. Οι ιδιότητες width και height

Με τις ιδιότητες width και height μπορούμε να καθορίσουμε το πλάτος και το ύψος μιας εικόνας.

<img src="landscape.jpg"
     alt="Ένα όμορφο τοπίο"
     width="400"
     height="250">

Οι αριθμητικές τιμές στις ιδιότητες αυτές εκφράζονται σε pixels.

Μπορούμε επίσης να χρησιμοποιήσουμε CSS για να ελέγξουμε το μέγεθος μιας εικόνας:

<img src="landscape.jpg"
     alt="Ένα όμορφο τοπίο"
     style="width:100%; max-width:400px; height:auto;">

Η τιμή height:auto βοηθά να διατηρούνται οι αναλογίες της εικόνας.

5. Τα στοιχεία figure και figcaption

Η HTML προσφέρει τα στοιχεία <figure> και <figcaption> για να οργανώνουμε μια εικόνα μαζί με τη λεζάντα της.

<figure>
  <img src="mountain.jpg"
       alt="Βουνό με χιονισμένη κορυφή"
       width="400">

  <figcaption>
    Ένα όμορφο χιονισμένο βουνό.
  </figcaption>
</figure>

Το <figure> περιέχει το οπτικό περιεχόμενο, ενώ το <figcaption> προσθέτει μια λεζάντα που το περιγράφει.

6. Ένα ολοκληρωμένο παράδειγμα

Ας δημιουργήσουμε μια μικρή ιστοσελίδα που παρουσιάζει μια εικόνα με τίτλο και λεζάντα.

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Η πρώτη μου εικόνα</title>
</head>
<body>

  <h1>Καλώς ήρθες στον κόσμο των εικόνων!</h1>

  <p>Αυτή είναι η πρώτη μου εικόνα σε HTML.</p>

  <figure>
    <img src="https://picsum.photos/id/1018/600/400"
         alt="Ένα όμορφο φυσικό τοπίο"
         width="400">

    <figcaption>
      Ένα όμορφο τοπίο στη φύση.
    </figcaption>
  </figure>

</body>
</html>

7. Συνηθισμένα λάθη

• Ξεχνάμε να γράψουμε την ιδιότητα src.
• Χρησιμοποιούμε λανθασμένη διαδρομή εικόνας.
• Παραλείπουμε το alt ή γράφουμε μια άσχετη περιγραφή.
• Αλλάζουμε το πλάτος και το ύψος χωρίς να προσέχουμε τις αναλογίες.
• Προσπαθούμε να κλείσουμε το στοιχείο <img> σαν να ήταν ένα συνηθισμένο στοιχείο με περιεχόμενο.

8. Ώρα για εξάσκηση!

Ήρθε η ώρα να δοκιμάσεις όσα έμαθες!

1. Δημιούργησε μια εικόνα χρησιμοποιώντας το στοιχείο <img>.
2. Πρόσθεσε μια κατάλληλη περιγραφή με την ιδιότητα alt.
3. Άλλαξε το πλάτος της εικόνας σε 300 pixels.
4. Δημιούργησε ένα στοιχείο <figure> και πρόσθεσε μια λεζάντα με το <figcaption>.
5. Δημιούργησε τη δική σου μικρή σελίδα με τίτλο, παράγραφο και εικόνα.

9. Τι μάθαμε σήμερα;

Σε αυτό το μάθημα γνωρίσαμε:

• Το στοιχείο <img>.
• Την ιδιότητα src για τη διαδρομή της εικόνας.
• Την ιδιότητα alt για την εναλλακτική περιγραφή.
• Τις ιδιότητες width και height.
• Τα στοιχεία <figure> και <figcaption>.

Οι εικόνες είναι ένα σημαντικό κομμάτι κάθε σύγχρονης ιστοσελίδας. Τώρα γνωρίζεις πώς να τις προσθέτεις σωστά και να κάνεις το περιεχόμενό σου πιο προσβάσιμο!

10. Δοκίμασε τον κώδικά σου στην Παιδική Χαρά!

Άνοιξε το Playground του Jerry's CodeLab και πειραματίσου με τις εικόνες HTML:

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE