Υποενότητα 2.2: Πολυμέσα

Οι εικόνες (Images ) ορίζονται στο HTML με την ετικέτα (tag)  <img> . Αυτή η ετικέτα είναι ένα άλλο παράδειγμα κενής ετικέτας, που σημαίνει ότι δεν έχει τελική ετικέτα.

Εσωτερικά στη ετικέτα <img> έχουμε τις src καιalt ιδιότητες- χαρακτηριστικά (attributes).
Έτσι μια ετικέτα εικόνας θα μοιάζει με:

<img src = "html/images/nameofimage.jpg" alt = "Alternative text">

src οριζει το url της εικόνας. Συνήθως αποθηκεύουμε εικόνες σε ένα ξεχωριστό φάκελο τον οποίο αποκαλούμε images. Έτσι μια τυπική έκφραση για  src είναι : src = "html/images/nameofimage.jpg"

alt σημαίνει εναλλακτικό κείμενο και απαιτείται για τη σωστή επικύρωση της σελίδας.

Εσωτερικά της alt attribute θέτουμε μια σύντομη περιγραφή της εικόνας μας. Αυτό το κείμενο θα εμφανιστεί αν για κάποιο λόγο η εικόνα δεν μπορεί να φορτωθεί (αργή σύνδεση, λανθασμένη διεύθυνση URL) ή αν ο χρήστης χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης (screen reader).

Ένα άλλο χρήσιμο χαρακτηριστικό που μπορούμε να προσθέσουμε στην ετικέτα  <img> είναι ο τίτλος title. TΗ τιμή αυτού του χαρακτηριστικού εμφανίζεται όταν τοποθετούμε το δείκτη του ποντικιού πάνω από την εικόνα, όπως μπορείτε να δείτε στο παράδειγμα:

<img src = "html/images/nameofimage.jpg" alt = "Alternative text" title = "The title" >

Περισσότερες πληροφορίες: https://www.w3schools.com/html/html_images.asp

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice02.2.html στον φάκελο "Exercises".
2. Επεξεργαστείτε το αρχείο. Θα βρείτε την εικόνα "myphoto.jpg". στον φάκελο "images". TΣτον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: