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

Images

Οι εικόνες (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 θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση:

Audio

Το στοιχείο (element ) Audio είναι μια νέα δυνατότητα στο HTML5.

Η ετικέτα τουείναι <audio>. Χρησιμοποιώντας<audio> μπορούμε να προσθέσουμε ένα αρχείο ήχου στην ιστοσελίδα μας. Οι μορφές ήχου που υποστηρίζονται στο HTML5 είναι  .mp3, .wav και.ogg. Προς το παρόν μόνο ο ιChrome, Firefox και Opera υποστηρίζουν όλες αυτές τις μορφές. Παρόμοια με τις εικόνες, η διεύθυνση url του αρχείου ήχου ορίζεται με το χαρακτηριστικό src attribute.

Παράδειγμα:

<audio >
    <source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Επιπλέον, μπορούμε να προσθέσουμε τα χαρακτηριστικά ελέγχου στον ήχο μας. Αυτό θα εμφανίσει μια μπάρα που θα έχει στοιχεία ελέγχου αναπαραγωγής (π.χ. αναπαραγωγή-play  και ένταση-volume )

Παράδειγμα:

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Επίσης, αν θέλουμε να διασφαλίσουμε ότι ο χρήστης θα μπορεί να ακούσει τον ήχο μας ανεξάρτητα από το ποιο πρόγραμμα περιήγησης χρησιμοποιεί, μπορούμε να φορτώσουμε πολλές μορφές του ίδιου ήχου. Αυτό επιτυγχάνεται με τη χρήση του στοιχείου <source>  που τοποθετείται μεταξύ της ετικέτας έναρξης και τερματισμού <audio>. Εσωστερικά του src τοποθετούμε τη διέυθυνση του αρχείου ήχου. <source> δεν έχει τελική ετικέτα. Το πρόγραμμα περιήγησης θα εμφανίσει την πρώτη αναγνωρίσιμη μορφή.

Παράδειγμα:

<audio controls>
    <source src="media/myaudio.ogg" type="audio/ogg">
    <source src="media/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

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

Άσκηση

1. Ανοίξτε το αρχείο exersice02.2.html στον φάκελο "Exercises" στον επεξεργαστή κώδικα.
2. Επεξεργαστείτε και αποθηκεύστε το αρχείο. Θα βρείτε τα αρχεία "myaudio.mp3" και "myaudio.ogg" στον φάκελο "media". Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση:

Video

Το βίντεο (Video ) είναι μια ακόμα νέα λειτουργία του HTML5. 

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

Ο χειρισμός του βίντεο είναι πολύ παρόμοιος με τον ήχο.

A src attribute θα απαιτηθεί για να δηλώσει τη διεύθυνση url του βίντεό μας

Παρόμοια με τον ήχο, μπορούμε να χρησιμοποιήσουμε το χαρακτηριστικό  <controls> (attribute) για να εμφανίζουμε το κουμπί playback και το <source>  για να τοποθετήσουμε εναλλακτικούς τύπους (formats) του βίντεο μας.

Οι μορφές βίντεο που υποστηρίζονται σε HTML5 είναι:

.mp4, .webm and .ogg.

Προς το παρόν μόνο οι Chrome, Firefox και Opera υποστηρίζουν όλες αυτές τις μορφές.

 Παράδειγμα:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

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

Άσκηση

1. Ανοίξτε το αρχείο exersice02.2.html στον φάκελο "Exercises" στον επεξεργαστή κώδικα..
2. Επεξεργαστείτε και αποθηκεύστε το αρχείο. Θα βρείτε το αρχεία "myvideo.mp4" στον φάκελο "media". Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: