ΠΟΛΥΜΕΣΑΔΕΣΠΟΙΝΑ ΤΣΟΜΠΑΝΟΥΔΗ

DESPINATS@UOM.EDU.GR

Ενότητα 10ΑΝΑΠΤΥΞΗ

ΠΟΛΥΜΕΣΙΚΩΝΕΦΑΡΜΟΓΩΝ ΜΕ

HTML5

Τεχνολογίες και Εργαλεία

Ανάπτυξης

Η ανάπτυξη ολοκληρωμένων πολυμεσικών εφαρμογών γίνεται πλέον κατά κύριο λόγο στο διαδίκτυο.

Παλαιότερα υπήρχαν εξειδικευμένα εργαλεία για ανάπτυξη εφαρμογών που εκτελούνταν τοπικά σε κάποιο λειτουργικό σύστημα. Τα πιο γνωστά εργαλεία ήταν τα Macromedia Director, Macromedia Authorware και Adobe Flash

Οι προσεγγίσεις που χρησιμοποιούνται πλέον για την ανάπτυξη διαδικτυακών εφαρμογών πολυμέσων είναι:

Ανάπτυξη δικτυακών τόπων με πλούσιο πολυμεσικό περιεχόμενο με χρήση έτοιμων πρoτύπων (templates) ιστοσελίδας.

Χρήση εργαλείων για ανάπτυξη εκπαιδευτικών εφαρμογών πολυμέσων στο διαδίκτυο.

Χρήση προγραμματιστικών εργαλείων, όπως η HTML5, για ανάπτυξη εφαρμογών με υψηλό βαθμό διάδρασης. Σε αυτή την περίπτωση χρησιμοποιούνται και άλλες τεχνολογίες, όπως η JavaScript και τα CSS.

Εισαγωγή

Η HTML5 είναι η νέα έκδοση της γλώσσας υπερκειμένου HTML (HyperText Markup Language).

Πρωταρχικός σκοπός της HTML5 ήταν η μείωση της ανάγκης για plug-in (επεκτάσεις) σε διαδικτυακές εφαρμογές όπως στην περίπτωση του Adobe Flash και του Microsoft Silverlight.

Η HTML, γενικά, είναι μια γλώσσα περιγραφής, όπου με ετικέτες ορίζουμε τη μορφή του κειμένου που θα εμφανιστεί.

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

Η γλώσσα HTML

Τα αρχεία HTML είναι απλά αρχεία κειμένου με ενσωματωμένες ετικέτες οι οποίες υποδεικνύουν τη μορφοποίηση που θα έχει το κείμενο, καθώς και με συνδέσεις hypertext. Για παράδειγμα, για να εμφανιστεί μια λέξη με έντονη γραφή πρέπει να εισαχθεί στις ετικέτες (tags)<b> και </b>.

Η γλώσσα HTML εκτελείται από τους φυλλομετρητές (browsers), δηλαδή τα προγράμματα περιήγησης στο διαδίκτυο.

Οι φυλλομετρητές δέχονται το αρχείο κειμένου, που περιέχει τις ετικέτες και εμφανίζει το αποτέλεσμα.

Κώδικας σε HTML και δίπλα το αποτέλεσμα

HTML5

Η HTML5 αναπτύχθηκε με βάση τους παρακάτω κανόνες:

νέα χαρακτηριστικά έπρεπε να προστεθούν στην δομή των HTML,

CSS και JavaScript

μείωση των περιπτώσεων που χρειάζεται η εγκατάσταση

(προσθέτων) plugins στον browser για κάποιου συγκεκριμένου τύπου

στοιχείων (όπως βίντεο και ήχο)

καλύτερη διαχείριση σφαλμάτων

προσθήκη περισσότερων ετικετών οι οποίες θα αντικαταστήσουν

κομμάτια κώδικα JavaScript που χρησιμοποιούσαν συχνά οι webdesigners

Νέα χαρακτηριστικά της HTML5

δυνατότητα σχεδιασμού γραφικών με χρήση JavaScript (νέα ετικέτα

canvas)

αναπαραγωγή βίντεο και ήχου χωρίς να χρειάζεται η εγκατάσταση

plugins (νέες ετικέτες video και audio)

προσθήκη νέων ετικετών που κάνουν την δημιουργία και την

διαχείριση των ιστοσελίδων, ακόμη πιο εύκολη (νέες ετικέτες article,

footer, header κτλ.)

νέα στοιχεία στις HTML φόρμες (calendar, date, time, search κτλ.)

Ετικέτες

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

Οι HTML ετικέτες γράφονται ανάμεσα στα σύμβολα < και >

πχ. <όνομα‐ετικέτας>

Οι περισσότερες HTML ετικέτες αποτελούνται από μια ετικέτα αρχής και μια ετικέτα τέλους και ανάμεσα σε αυτές υπάρχει το κείμενο που χαρακτηρίζεται από τις ετικέτες αυτές. Η ετικέτα τέλους περιέχει τον χαρακτήρα / πριν το όνομα της ετικέτας.

πχ. <όνομα‐ετικέτας> ... κείμενο ... </όνομα‐ετικέτας>

πχ. <em>Κείμενο με έμφαση</em>

Υπάρχουν ορισμένες ετικέτες που δεν έχουν ετικέτες τέλους. Στις ετικέτες αυτές, πριν από το σύμβολο > τοποθετείτε τον χαρακτήρα /

πχ. <όνομα‐ετικέτας />

πχ. <br />

Βασικές ετικέτες της HTML

Οι ετικέτες <h1> … </h1> σηματοδοτούν ένα κείμενο ως επικεφαλίδα πρώτου επιπέδου.

Οι ετικέτες <p> … </p> χρησιμοποιούνται για να σηματοδοτήσουν την αρχή και το τέλος μιας παραγράφου. Δηλαδή, ένα τμήμα κειμένου, που εισάγεται μεταξύ των ετικετών <p> …</p>, εμφανίζεται ως μια ενιαία παράγραφος, αρχίζοντας σε νέα σειρά.

Η ετικέτα <br /> χρησιμοποιείται για να εισάγει μια αλλαγή γραμμής, δηλαδή το κείμενο, το οποίο ακολουθεί την ετικέτα, θα εμφανιστεί σε μια νέα γραμμή.

Οι ετικέτες <b> … </b> χρησιμοποιούνται για τη μορφοποίηση του κειμένου σε έντονηγραφή.

Οι ετικέτες <i> … </i> χρησιμοποιούνται για τη μορφοποίηση του κειμένου σε πλάγιαγραφή.

Οι ετικέτες <u> … </u> χρησιμοποιούνται για τη μορφοποίηση του κειμένου σε υπογραμμισμένη γραφή.

Η ετικέτα <hr /> εισάγει μια οριζόντια διαχωριστική γραμμή.

Επικεφαλίδες

Οι HTML επικεφαλίδες είναι κείμενο που εμφανίζεται με μεγάλα και έντονα γράμματα. Οι επικεφαλίδες ορίζονται από τις ετικέτες <h1>, <h2>, <h3>, <h4>, <h5> και <h6>. Με την <h1> ορίζεται η μεγαλύτερη ετικέτα ενώ με την <h6> η μικρότερη. Πριν και μετά την επικεφαλίδα εισάγεται αυτόματα στον περιηγητή μια κενή γραμμή.

<h1>επικεφαλίδα μεγέθους h1 </h1>

<h2> επικεφαλίδα μεγέθους h2 </h2>

<h3> επικεφαλίδα μεγέθους h3 </h3>

<h4> επικεφαλίδα μεγέθους h4 </h4>

<h5> επικεφαλίδα μεγέθους h5 </h5>

<h6> επικεφαλίδα μεγέθους h6 </h6>

Παράγραφοι

Οι παράγραφοι ορίζονται από το ζευγάρι ετικετών <p>

και </p>

<body>

<p>Πρώτη παράγραφος</p>

<p>Δεύτερη παράγραφος</p>

<p>Τρίτη παράγραφος</p>

</body>

Σχόλια στην HTML

Τα σχόλια χρησιμοποιούνται για να σημειώσεις μέσα στον πηγαίο

κώδικα. Δεν εμφανίζονται στην οθόνη του browser. Ένας λόγος για

να χρησιμοποιήσετε σχόλια μέσα σε ένα html αρχείο είναι να γράψετε

την ημερομηνία που δημιουργήσατε το αρχείο. Ένα σχόλιο αρχίζει μετο <!‐‐ και τελειώνει με το ‐‐>

Γραμμή πριν από τα σχόλια<br />

<!-- Αυτό είναι ένα σχόλιο και δεν θα εμφανιστεί στην οθόνη του browser -->

Γραμμή μετά από τα σχόλια

Ιδιότητες Ετικετών

Οι ιδιότητες (attributes) των ετικετών είναι τιμές που δίνουν στην ετικέτα διάφορα χαρακτηριστικά. Κάθε μια από αυτές τις τιμές επιδρά διαφορετικά στην εμφάνιση ή την λειτουργία των ετικετών. Μια ιδιότητα μπαίνει αμέσως μετά το όνομα της ετικέτας και αποτελείται από το όνομα της και μια τιμή μέσα σε διπλά εισαγωγικά.

Μια ετικέτα με ιδιότητες είναι κάπως έτσι:

<όνομα‐ετικέτας ιδιότητα1=“τιμή” ιδιότητα2=“τιμή” ιδιότητα3="τιμή">... </όνομα‐ετικέτας>

Η ετικέτα <p>, για παράδειγμα, μπορεί να πάρει την ιδιότητα align η οποία ορίζει την στοίχιση του κειμένου μέσα στην παράγραφο. Η ιδιότητα alignπαίρνει μια από τις τιμές: left, center, right, justify.

Η ιδιότητα align στην ετικέτα <p>

<p align="center">Παράγραφος με

στοίχιση στο κέντρο</p><br />

<p align="left">παράγραφος με

αριστερή στοίχιση. </p><br />

<p align="right">παράγραφος με δεξιά

στοίχιση.</p><br />

<p align="justify">ευθυγραμμισμένη

παράγραφος.</p>

Ετικέτες για έντονα, πλάγια,

υπογραμμισμένη γραφή

<b>Αυτό το κείμενο είναι bold</b><br />

<i>Αυτό το κείμενο είναι italic</i> <br />

<u>Αυτό το κείμενο είναι underline </u>

Λίστες

Μια μη αριθμημένη λίστα περικλείεται στις ετικέτες <ul> … </ul> και κάθε στοιχείο της είναι ανάμεσα στις ετικέτες <li> … </li>

Πόλεις

<ul>

<li>Αθήνα</li>

<li>Λάρισα</li>

<li>Χανιά</li>

</ul>

Λίστες με αρίθμηση

Σε μια αριθμημένη λίστα θα πρέπει οι εξωτερικές ετικέτες <ul> </ul> να αντικατασταθούν από <ol> </ol> δηλαδή γράφοντας

Πόλεις

<ol>

<li>Αθήνα</li>

<li>Λάρισα</li>

<li>Χανιά</li>

</ol>

Χρώματα στην HTML

Χρησιμοποιώντας χρώματα στις σελίδες, αυτές αποκτούν πιο όμορφη και ελκυστική μορφή. Μπορείτε επίσης να χρησιμοποιήσετε χρώμα σε συνδέσμους, σε απλό κείμενο, σε ολόκληρο τον πίνακα ή σε ορισμένα από τα κελιά του. Μπορείτε επίσης να βάλετε χρώμα στο φόντο όλης της σελίδας σας.

Μπορείτε να καθορίσετε το χρώμα είτε χρησιμοποιώντας ένα όνομα χρώματος από ένα σύνολο 140 προκαθορισμένων ονομάτων είτε χρησιμοποιώντας το σύμβολο # ακολουθούμενο από έναν τριψήφιο δεκαεξαδικό αριθμό όπου κάθε ένα από τα τρία ψηφία είναι ένας διψήφιος δεκαεξαδικός αριθμός (π.χ. #CC99FF).

Ο κάθε ένας από τους τρεις διψήφιους δεκαεξαδικούς αριθμούς αντιπροσωπεύει την απόχρωση από τρία χρώματα: το Κόκκινο‐Red, το Πράσινο‐Green και το Μπλε‐Blue. Το μοντέλο αυτό καθορισμού χρώματος λέγεται RGB (Red, Green, Blue).

https://htmlcolorcodes.com/

Αλλαγή του χρώματος φόντου

της σελίδας

Η ετικέτα <body> περιλαμβάνει την ιδιότητα bgcolor με την οποία

ορίζεται το χρώμα του φόντου όλης της σελίδας. Μπορείτε να

αλλάξετε το χρώμα του φόντου χρησιμοποιώντας και τους δύο

τρόπους καθορισμού χρώματος.

<body bgcolor="#FF0000">

<body bgcolor=“red">

Αλλαγή του χρώματος των

συνδέσμων για όλη την σελίδα

Η ετικέτα <body> περιλαμβάνει τις ιδιότητες link, vlink και alink. Η ιδιότητα link ορίζει το χρώμα των κανονικών συνδέσμων που ο χρήστης δεν έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται μπλε).

Η ιδιότητα vlink (visited link) ορίζει το χρώμα των συνδέσμων που ο χρήστης έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται Μοβ ή Κόκκινοι).

Η ιδιότητα alink (active link) ορίζει το χρώμα ενός συνδέσμου πάνω στον οποίον έχετε κάνει κλικ και δεν έχετε ακόμη ελευθερώσει του κουμπί του ποντικιού (αυτό λέγεται ενεργοποιημένος σύνδεσμος και εξ ορισμού συνήθως εμφανίζεται με κόκκινο χρώμα). Τα χρώματα που θα ορίσετε στις παραπάνω ιδιότητες ισχύουν για κάθε σύνδεσμό που υπάρχει στην σελίδα.

Αν για παράδειγμα θέλατε να εμφανίσετε τους ενεργούς συνδέσμους (active links) με μαύρο χρώμα και τους συνδέσμους που έχετε επισκεφθεί (visited links) με κίτρινο, ενώ τους σύνδεσμοι που δεν έχουν ακόμη πατηθεί με κόκκινο, θα έπρεπε να χρησιμοποιήσετε τον παρακάτω κώδικα:

<body link="red" vlink="yellow" alink="black">

Εικόνες στην HTML

Ένα από τα βασικότερα στοιχεία μια ιστοσελίδας είναι οι εικόνες. Η βασική ετικέτα για να εισάγεται μια εικόνα σε μια σελίδα είναι η <img> … </img>

Η πιο βασική της ιδιότητα είναι η src όπου δηλώνεται η πηγή της φωτογραφίας. Αν η εικόνα βρίσκεται στον ίδιο φάκελο με τη σελίδα, αρκεί να γράψετε απλά το όνομα της.

<img> src=“picture1.jpg”</img>

Αν η εικόνα βρίσκεται σε κάποιο υποφάκελο σε σχέση με τη σελίδα σας τότε θα πρέπει να γράψετε τη διαδρομή της. Αν η εικόνα βρίσκεται σε κάποιο άλλο σημείο στο διαδίκτυο αρκεί να γράψετε την πλήρη διεύθυνση της.

<img> src=”http://www.yoursite.com/photos/picture1.jpg”</img>

Ιδιότητα alt

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

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

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

<img src="picture1.jpg" alt="Αυτή είναι μια εικόνα που δείχνει ένα σκύλο" />

Διαστάσεις της εικόνας

Οι ετικέτες width και height ορίζουν τις διαστάσεις της εικόνας σε pixels. Το συνηθέστερο είναι να γράφετε τις πραγματικές διαστάσεις της εικόνας. Ορισμένες φορές όμως θέλετε να εμφανίσετε την εικόνα με μικρότερες ή μεγαλύτερες από τις κανονικές διαστάσεις προσαρμόζοντας ανάλογα τις ιδιότητες width και height.

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

<img src="picture1.jpg" width="200" height="400" />

Περίγραμμα στις εικόνες

Για να βάλετε περίγραμμα στις εικόνες χρησιμοποιήστε την ιδιότητα

border, που ανάλογα με την τιμή που θα πάρει ορίζει το πάχος του.

<img src="picture2.jpg" width="150" height="40" border="3" alt="δοκιμαστική εικόνα" />

Σύνδεσμοι

Η ετικέτα που χρησιμοποιείται για την εισαγωγή ενός συνδέσμου είναι η

<a>

Η πιο βασική ιδιότητα της ετικέτας είναι η href, η οποία περιέχει τη

διεύθυνση (url) μιας σελίδας ή ενός αρχείου.

Το κείμενο που γράφεται ανάμεσα στην ετικέτα αρχής και τέλους είναι το

κείμενο που φαίνεται στην οθόνη και πατάει ο χρήστης επάνω σε αυτό

για να μεταφερθεί στην σελίδα που δείχνει η ιδιότητα href.

Δημιουργία συνδέσμου προς

άλλες σελίδες

Η δομή των σελίδων ή αρχείων ενός site είναι ανάλογη με αυτή των αρχείων και φακέλων που γνωρίζετε στα Windows. Αυτό σημαίνει ότι κάποιες σελίδες βρίσκονται στον ίδιο φάκελο και κάποιες σε άλλο φάκελο ή υποφάκελο.

Έτσι για να μπορέσετε να «δείξετε» στο σύνδεσμο σας σε ποια σελίδα θέλετε να σας μεταφέρει, αρκεί να ξέρετε τη διαδρομή της σε σχέση με το φάκελο που βρίσκεστε.

Αν δηλαδή στον αρχικό σας φάκελο βρίσκεται η σελίδα index.html

/index.html

και υπάρχει ένας φάκελος με όνομα /Pages οποίος περιέχει τις σελίδες

/Pages/Page1.html

/Pages/Page2.html

Αν θέλετε να δημιουργήσετε ένα σύνδεσμο που θα οδηγεί στη σελίδα Page2.html αρκεί να γράψετε:

<a href="Pages/Page2.html">Link προς το αρχείο Page2</a>

Νέες ετικέτες εισαγωγής μέσων

(media) στην HTML5

<audio> - ορίζει ήχο, όπως ένα τραγούδι ή ένα audio stream. Μπορείτε να γράψετε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους περιηγητές που δεν υποστηρίζουν την ετικέτα αυτή.

<video> ‐ εισάγει στην σελίδα ένα βίντεο. Μπορείτε να γράψετε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους περιηγητές που δεν υποστηρίζουν την ετικέτα αυτή.

<source> ‐ προσθέτει πολλαπλά μέσα, είτε βίντεο, είτε ήχους. Τοποθετείται μέσα σε ετικέτες όπως <audio> και <video> Ο περιηγητής ανάλογα με την συμβατότητά του, επιλέγει να αναπαράγει το πρώτο συμβατό αρχείο.

<embed> ‐ με την ετικέτα αυτή προσθέτετε στην σελίδα μια εξωτερική εφαρμογή, όπως ένα plugin, ή ήχο ή βίντεο κτλ. Για εισαγωγή βίντεο και ήχου πρέπει να χρησιμοποιείτε τις ετικέτες <video> και <audio> αντίστοιχα.

Εισαγωγή Βίντεο

Μια από τις βασικότερες αλλαγές που έφερε η HTML5 είναι ο τρόπος που μπορείτε να εισάγετε βίντεο και ήχο στις σελίδες.

Μέχρι σήμερα δεν υπήρχε στάνταρ τρόπος με τον οποίον παρουσιαζόταν τα βίντεο στις ιστοσελίδες, καθώς χρησιμοποιούνταν διαφορετικά plugins.

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

Προς το παρόν δύο τύποι βίντεο υποστηρίζονται από την HTML5:

ο τύπος Ogg (ogg αρχεία με το Thedora video codec και το Vorbis audiocodec)

ο τύπος MPEG4 (MPEG 4 αρχεία με το H.264 video codec και το AAC audiocodec).

Ιδιότητες της ετικέτας <video>

Ιδιότητα Περιγραφή

Autoplay Αν υπάρχει η ιδιότητα αυτή, η αναπαραγωγή του βίντεο θα αρχίσει μόλιςολοκληρωθεί η φόρτωση του

Controls Η ύπαρξη της ιδιότητας εμφανίζει τα κουμπιά ελέγχου στο βίντεο, όπωςτο play, stop κτλ.

Height Ορίζει το ύψος του βίντεο

Loop Αν υπάρχει η ιδιότητα, η αναπαραγωγή του βίντεο, κάθε φορά πουτελειώνει, θα αρχίζει από την αρχή

Preload Αν υπάρχει η ιδιότητα αυτή, το βίντεο θα φορτωθεί (load) όταν η σελίδαφορτωθεί. Αγνοείται όταν υπάρχει η ιδιότητα autoplay

Src Ορίζει το url του βίντεο

Width Ορίζει το μήκος του βίντεο

Παραδείγματα Video

Απλή εμφάνιση βίντεο:

<video src="movie.ogg"></video>

Εμφάνιση βίντεο με συγκεκριμένες διαστάσεις:

<video src="movie.ogg" width="300" height="200"></video>

Εμφάνιση βίντεο με συγκεκριμένες διαστάσεις με τα κουμπιά ελέγχου:

<video src="movie.ogg" width="300" height="200" controls="controls"></video>

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

<video src="movie.ogg" width="300" height="200" controls="controls" autoplay="autoplay" loop="loop"> </video>

Εισαγωγή Ήχου

Μέχρι σήμερα, όπως στα βίντεο έτσι και στον ήχο, δεν υπήρχε στάνταρ τρόπος με τον οποίον μπορούσε να προστεθεί ήχος στις ιστοσελίδες χωρίς τη χρήση κάποιου πρόσθετου (plugin).

Η HTML5 ορίζει συγκεκριμένο τρόπο για να προσθέσετε ήχο στις ιστοσελίδες, χρησιμοποιώντας την ετικέτα <audio>.

Προς το παρόν τρεις τύποι ήχου υποστηρίζονται από την HTML5:

Ogg Vorbis

MP3 και

WAV

Ιδιότητες της ετικέτας <audio>

Ιδιότητα Περιγραφή

autoplay

η αναπαραγωγή του ήχου θα αρχίσει μόλις

ολοκληρωθεί η φόρτωση του

controls εμφανίζει τα κουμπιά ελέγχου όπως το play, stop

κτλ.

loop

η αναπαραγωγή του ήχου, κάθε φορά που

τελειώνει, θα αρχίζει από την αρχή

preload

Ο ήχος θα φορτωθεί (load) όταν η σελίδα

φορτωθεί. Αγνοείται όταν υπάρχει η ιδιότητα

autoplay

src Το URL του ήχου

Παραδείγματα <audio>

Προσθήκη ενός audio το οποίο θα αρχίσει να παίζει όταν φορτωθεί

<audio src="beach3.wav"></audio>

Για να προσθέσετε ήχο με κουμπιά ελέγχου και άλλες ιδιότητες

<audio src="beach3.wav" autoplay="autoplay" controls="controls"></audio>

Προσθήκη ενός ήχου ο οποίος θα εμφανίζει τα κουμπιά ελέγχου και θα συνεχίζει να παίζει από την αρχή κάθε φορά που φτάνει στο τέλος.

<audio src="beach3.wav" controls="controls" loop="loop"></audio>

Η ετικέτα <source> προσθέτει πολλά media στην σειρά, είτε βίντεο, είτε ήχο. Ο περιηγητής θα αναπαράγει το πρώτο συμβατό αρχείο που υποστηρίζει. Η ετικέτα τοποθετείται μέσα στις ετικέτες <video> και <audio>:

<audio controls="controls">

<source src="beach3.mp3" type="audio/wav">

<source src="beach2.wav" type="audio/wav"> Your browser does not support the audio element.

</audio>

Συγγραφή κώδικα HTML

Για τη συγγραφή κώδικα και τη δημιουργία αρχείων HTML υπάρχουν

εκατοντάδες εφαρμογές, δωρεάν και επί πληρωμή.

Μια αρχική πρόταση πάντα είναι το Σημειωματάριο (Notepad) που

υπάρχει προεγκατεστημένο με όλες τις εκδόσεις των Windows.

Στο σημειωματάριο μπορείτε να γράψετε κώδικα HTML και στην

συνέχεια να αποθηκεύσετε το αρχείο αλλάζοντας την κατάληξη, από

.txt που είναι το προτεινόμενο από την εφαρμογή, σε .htm ή .html

Notepad++

Για την επεξεργασία αρχείων HTML είναι

προτιμότερη μία εφαρμογή όπως το:

Notepad++

Άσκηση 1

Αντιγράψτε τον κώδικα HTML της επόμενης διαφάνειας στο σημειωματάριο ή στο Notepad++. Αποθηκεύστε το αρχείο με όνομα index.html και ανοίξτε το στη συνέχεια σε έναν φυλλομετρητή (π.χ. Mozilla Firefox) για να δείτε το αποτέλεσμα.

Να κάνετε στον κώδικα τις παρακάτω αλλαγές:

Αλλάξτε το χρώμα της πρώτης παραγράφου σε μπλε.

Ο υπερσύνδεσμος να αλλάξει προς την ιστοσελίδα της Google.

Να προσθέσετε το κείμενο Juice ως τέταρτο στοιχείο της λίστας.

Να αλλάξετε το κείμενο του κουμπιού σε Submit.

Προσθέστε στην ετικέτα της εικόνας τον κώδικα width="200" height="50" και δείτε το αποτέλεσμα.

Άσκηση 1 – Κώδικας HTML

<!DOCTYPE html><html><head><title>My first Website</title></head><body><h1>This is a Heading</h1><p>This is a paragraph.</p><p style="color:red">This is a paragraph in red.</p><a href="https://www.youtube.com">This is a link to Youtube</a> <p>This is a list:</p><ul><li>Coffee</li><li>Tea</li><li>Milk</li>

</ul> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> <!-- 2 line breaks --><br><br><button>Click me</button></body></html>

Άσκηση 2

Στο δεύτερο παράδειγμα να χρησιμοποιήσετε την ετικέτα <video> της ΗΤΜL5 για την ενσωμάτωση ενός βίντεο που έχετε, σε μία νέα ιστοσελίδα με όνομα index2.html

Η ιστοσελίδα, εκτός από το βίντεο, θα πρέπει να περιέχει τον τίτλο του βίντεο σε μία παράγραφο

Μπορείτε να κατεβάσετε ένα βίντεο (σε μορφή mp4) για να το χρησιμοποιήσετε στην άσκηση μέσω της σελίδας https://www.clipconverter.cc/gr/2/

Προσοχή στο όνομα αρχείου που θα δώσετε στο βίντεο καθώς και στο URL που θα γράψετε στον κώδικα στην ετικέτα src.

Αποστολή ασκήσεων

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

index.html (άσκηση 1)

index2.html (άσκηση 2)

Αρχείο βίντεο (άσκηση 2)

Τον τελικό φάκελο τον στέλνετε στο email: despinats@uom.edu.gr

Βιβλιογραφία

Λαζαρίνης, Φ. 2015. Πολυμέσα. [ηλεκτρ. βιβλ.] Αθήνα:Σύνδεσμος

Ελληνικών Ακαδημαϊκών Βιβλιοθηκών. κεφ 6. Διαθέσιμο στο:

http://hdl.handle.net/11419/2054

Λαζαρίνης, Φ. 2015. Ανάπτυξη πολυμεσικών εφαρμογών με HTML5.

[Κεφάλαιο Συγγράμματος]. Στο Λαζαρίνης, Φ. 2015. Πολυμέσα.

[ηλεκτρ. βιβλ.] Αθήνα:Σύνδεσμος Ελληνικών Ακαδημαϊκών

Βιβλιοθηκών. κεφ 12.

https://www.w3schools.com