Τι είναι η HTML5;

Η HTML5 είναι η νέα έκδοση της γνωστής γλώσσας προγραμματισμού HTLM. Η προηγούμενη έκδοση, η οποία χρησιμοποιούμε ακόμα σήμερα, βγήκε το 1999. Από τότε όμως έχουν αλλάξει πολλά στον παγκόσμιο ιστό, και έτσι η ανάγκη για standards και πλήρη συμβατότητα οδήγησε το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG) να συνεργαστούν και να δημιουργήσουν την νέα αυτή γλώσσα. Η HTML5 είναι ακόμα υπό ανάπτυξη, αλλά μερικοί browsers υποστηρίζουν από τώρα κάποια χαρακτηριστικά της και κάποιες λειτουργίες της.

Κάποιοι βασικοί κανόνες που έχουν οριστεί για την HTML5 είναι:

• Βάση για τα νέα χαρακτηριστικά να είναι οι HTML, CSS, DOM, και η JavaScript
• Ελαχιστοποίηση των plugins (όπως το Flash)
• Καλύτερη λειτουργία εντοπισμού λαθών
• Περισσότερο markup για να αντικατασταθεί το scripting
• Πλήρη συμβατότητα ανεξαρτήτως συσκευής

Νέα Χαρακτηριστικά

Κάποια από τα νέα χαρακτηριστικά της HTML5 είναι:

• Το στοιχείο canvas για το drawing
• Τα στοιχεία video και audio για αναπαραγωγή πολυμέσων
• Νέα στοιχεία περιεχομένου όπως τα footer, header, nav και section
• Νέα στοιχεία δημιουργίας φόρμας όπως τα calendar, date, time, email, url και search

Video στην HTML5

Μέχρι σήμερα, για να παίξουμε ένα video σε έναν browser χρειαζόμαστε κάποιο plugin (πρόσθετο) όπως το Flash ή το QuickTime.

H HTML5 μας καθορίζει έναν νέο τρόπο, και αυτός είναι με την χρήση του στοιχείου video. Ας δούμε πως χρησιμοποιείται

Το μόνο που χρειάζεται να γράψουμε για να εμφανίσουμε το video μας είναι:

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

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να δούνε το video μας από κάποιον browser που δεν υποστηρίζει το στοιχείο video της HTML5 γράφουμε

<video src="movie.ogg" width="320" height="240"  controls="controls">
Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο video της HTML5.
</video>

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου video είναι η εξής:

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

Υποστηριζόμενα Video Files/Browsers

Ιδιότητες

• autoplay: To video θα ξεκινήσει αυτόματα μόλις φορτώσει
• controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play
• height:  To ύψος σε pixels
• loop: Αν θα επαναλαμβάνεται το video μετά το τέλος του
• preload: Το video θα φορτώνεται μαζί με την σελίδα
• src: Το URL του video
• width: To πλάτος σε pixels

Audio στην HTML5

Ότι ισχύει σε σχέση με τα videos και τα plugins, ισχύει και για τα audio clips. Έτσι η HTML5 μας ορίζει το στοιχείο audio για την αναπαραγωγή ήχων.

Το μόνο που χρειάζεται να γράψουμε για να αναπαράγουμε τον ήχο μας είναι:

<audio src="song.ogg" controls="controls">
</audio>

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να ακούσουν τον ήχο μας από κάποιον browser που δεν υποστηρίζει το στοιχείο audio της HTML5 γράφουμε

<audio src="song.ogg" controls="controls">
Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο audio της HTML5.
</audio>

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου audio είναι η εξής:

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

Υποστηριζόμενα Audio Files/Browsers

Ιδιότητες

autoplay: ο ήχος θα ξεκινήσει αυτόματα μόλις φορτώσει

controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play

loop: Αν θα επαναλαμβάνεται ο ήχος μετά το τέλος του

preload: Ο ήχος θα φορτώνει μαζί με την σελίδα

src: To URL του ηχητικού κομματιού μας

Ευχαριστούμε πολύ τα W3Schools για αυτό το βοήθημα

Στο  δεύτερο μέρος της εισαγωγής στην HTML5 θα δούμε το στοιχείο Canvas και τα tags της HTML5