Προγραμματισμός Παγκόσμιου Ιστού

Transcript

1 Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 21 Μαρτίου 2016

2 Αρχιτεκτονική 2 επιπέδων Φυσική αρχιτεκτονική Τεχνική αρχιτεκτονική Διεπαφή Client Database Server PowerBuilder Visual Basic Visual C++ Access Paradox Oracle Sybase Informix MS SQLServer Ethernet Token Ring TCP/IP Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη

3 Μοντέλο client server Client side Sever side 1. Request 3. Response 2. Data Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 3

4 Μεταφορά εφαρμογών στο server Φυσική αρχιτεκτονική Web Browser HTTP Web Server Application Server Data base HTML Pages Τεχνική αρχιτεκτονική Any Computer Any Network Server Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη

5 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML Δημιουργία δομών περιεχομένου Φόρμες Favicon HTML5 References και σύνταξη Νέα elements Έλεγχος ορθότητας δομής Εικόνες και περιγραφές Audio element Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 5

6 Δημιουργία σελίδων Διαδικασία / βήματα δημιουργίας Σύνταξη περιεχομένου Προσθήκη πολυμέσων (π.χ. εικόνα) Καθορισμός δομής (HTML elements) Καθορισμός παρουσίασης (CSS) Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 6

7 HTML Documents Ένα HTML αρχείο αποτελείται από τα δεδομένα (κείμενο, εικόνες, σύνδεσμοι κλπ) τις οδηγίες προς τους HTML Viewers (browsers) που αφορούν την παρουσίαση τους Το HTML κείμενο «μαρκάρεται» ορίζοντας συγκεκριμένο φορμάρισμα για κάθε του τμήμα Βασικός σκελετός <!DOCTYPE html> <html> <head> </html> </head> <body> </body> <title> A Basic Document Template </title> Body Element 7

8 HTML Tags Είναι ανεξάρτητα στοιχεία μέσα σε < > <title>hello HTML</title>. <h2>κεφαλίδα επιπέδου 2</h2> Κατά την παρουσίαση του εγγράφου δεν φαίνονται Πώς εμφανίζονται τα < και >? < < > > Όλα τα special characters: Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 8

9 HTML Elements Τα HTML Elements διακρίνονται σε 2 κατηγορίες: Elements που ξεκινάνε με start/opening tag π.χ. <head> περιέχουν πληροφορία και τελειώνουν με end/closing tag π.χ. </head> Elements που δεν έχουν περιεχόμενο και τελειώνουν στο start tag π.χ. <br />, <hr /> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 9

10 Element Attributes Σε κάθε element μπορούμε να καθορίσουμε τις ιδιότητές του, που έχουν τη μορφή: όνομα ιδιότητας = τιμή ιδιότητας <element attribute-name= value >Content</element> <element attribute-name= value /> Παράδειγμα <img src= logo.jpeg alt= University of Piraeus logo > Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 10

11 Σύνοψη και παρατηρήσεις Markup Τα tags που περιλαμβάνουν το περιεχόμενο Element Περιεχόμενο + markup Attribute Ιδιότητα element Προσθήκη σχολίων  Χρήση πάντα / (slash) - ποτέ \ (backslash)!! Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 11

12 Χωρισμός κειμένου σε παραγράφους Η εμφάνιση του κειμένου καθορίζεται από τον browser Οι αλλαγές γραμμών του αρχικού κειμένου αγνοούνται Πώς γίνεται ο χωρισμός παραγράφων; Με τα paragraph elements Στην αρχή της παραγράφου τοποθετείται ένα αρχικό paragraph tag <p> Στο πέρας της τοποθετείται το τελικό </p> Μπορούμε να χωρίσουμε μια γραμμή σε συγκεκριμένο σημείο; Ναι, με το line break tag <br> ή πιο σωστά σε XHTML <br /> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 12

13 Περίγραμμα Κειμένου Χωρισμός σε λογικές ενότητες Επικεφαλίδες (build-in stylesheet!) Υπάρχουν 6 επίπεδα: h1, h2, h3, h4, h5, h6 Δεν υπάρχει σταθερή εμφάνιση για όλους τους browsers Ο μικρότερος δείκτης φανερώνει μεγαλύτερη σπουδαιότητα Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 13

14 Προβολή κειμένου σε Λίστες Κάθε λίστα αποτελείται από το αναγνωριστικό της και το List Item tag <li> Οι λίστες υποστηρίζουν εσωτερικά HTML στοιχεία και ιδιαίτερα Paragraph tags για τον διαχωρισμό του κειμένου Τύποι Ordered List Ξεκινάει με το <ol> tag και τελειώνει με το </ol> tag Για κάθε στοιχείο χρησιμοποιείται το <li> tag Unordered ή Bulleted List Χρησιμοποιούνται αντίστοιχα τα <ul>, </ul> tag Definition Lists Χρησιμοποιούνται για συνδυασμό description/term Τα αντίστοιχα tag είναι: <dl>, <dd> και <dt> Υπάρχουν επιπλέον attributes π.χ. <ol start= 7 > 14

15 Σύνδεσμοι - Links Attribute target καθορίζει εάν ο σύνδεσμος ανοίγει στην ίδια ή σε νέα σελίδα <a href= target= _blank >University of Piraeus</a> χρήση του ίδιου ονόματος ορίζει τη συγκεκριμένη σελίδα ως target για όλες τις νέες σελίδες Link σε συγκεκριμένα σημεία σελίδων <a href="#c4">see also Chapter 4</a> <h2><a id="c4">chapter 4</a></h2> ή <h2 id="c4">chapter 4</h2> Image Links <a href= > <img src= map.gif alt= Map of Greece title= A Cool Map /> </a> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 15

16 Πίνακες Caption πίνακα <caption>table caption</caption> Συγχώνευση κελιών σε πίνακες Γραμμών - rowspan <tr> </tr> <tr> </tr> <tr> </tr> Στηλών - colspan <tr> </tr> <tr> </tr> <tr> </tr> <th>.. </th> <td rowspan="2">merged</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> <td>.. </td> <th colspan="2">just 1 Heading</th> <td>.. </td> <td>.. </td> 16

18 Δημιουργία δομών περιεχομένου (1/2) Χρήση div και span tags για δημιουργία δομών (τμημάτων / περιοχών) με διαφορετικά χαρακτηριστικά Περιεχομένου Δομής Παρουσίασης Παρατηρήσεις Div: block-level element Span: inline element <div align= left >My text here </div> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 18

19 Δημιουργία δομών περιεχομένου (2/2) Τα div και span έχουν συγκεκριμένα attributes (casesensitive) class: μπορεί να είναι και το ίδιο id: μοναδικό Χρησιμοποιούνται για να προσδιορίσουν ιδιότητες στις δομές όπου εφαρμόζονται <div id= header >..</div> <div id= main >..</div> <div id= footer >..</div> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 19

21 Φόρμες (1/2) Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή Υπάρχουν 3 τύποι tags για δημιουργία πεδίων <textarea> <select> <input> Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 21

22 Φόρμες (2/2) Το tag form οριοθετεί την αρχή της φόρμας Ορίζει το script ή το URL στο οποίο αποστέλλονται τα εισαχθέντα δεδομένα και την μέθοδο μετάδοσης τους Δύο βασικά attributes Action: Ορίζει την URL που θα τα λάβει Method: Λαμβάνει δύο δυνατές τιμές post στέλνει όλη την πληροφορία χωριστά από την URL get συνδέει την πληροφορία στο τέλος της URL Ενδείκνυται η χρήση της πρώτης μεθόδου επειδή τα URLs έχουν συγκεκριμένο μήκος που δεν μπορούν να υπερβούν Παράδειγμα <form method="post" action="/cgi-bin/my_script">...</form> 22

23 <input> (1/4) Επιτρέπει διάφορες επιλογές εισόδου περιεχομένου Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 23

24 <input> (2/4) Τα πιο κοινά attributes για το <input> tag είναι τα εξής: type ορίζει τον τύπο του input field name το όνομα για τα δεδομένα Υποχρεωτικό για όλους τους τύπους εκτός από τα submit και reset size μέγεθος του πεδίου σε πλήθος χαρακτήρων maxlength μέγιστο πλήθος χαρακτήρων value έχει διάφορες σημασίες text ή password field: το default κείμενο που παρουσιάζεται check box ή radio button: την τιμή που επιστρέφεται submit και reset buttons: το κείμενο που παρουσιάζεται checked καθιστά ένα check box ή radio button ενεργό Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 24

25 <input> (3/4) text Παρουσιάζει μια απλή γραμμή κειμένου Attributes: name, size, maxlength, value password Παρουσιάζει τους χαρακτήρες που πληκτρολογούνται ως bullets Attributes: name, size, maxlength, value checkbox Attributes: name, value, checked radio Αποτελεί μια πιο περίπλοκη εκδοχή του check box επιτρέποντας σε ένα μόνο στοιχείο από το σύνολο να επιλεγεί Η ομαδοποίηση γίνεται με χρήση του name attribute Attributes: name, value, checked 25

26 <input> (4/4) reset Απεικονίζεται ως push button το οποίο όταν πατηθεί επαναφέρει τα στοιχεία της φόρμας στην αρχική τους τιμή submit Απεικονίζεται ως push button το οποίο όταν πατηθεί στέλνει τα δεδομένα της φόρμας στον server Παράδειγμα <form> <input type="radio" name="choice" value="choice1" checked= checked"> Yes. <input type="radio" name="choice" <br> value="choice2"> No. <input type="submit" value="next"> <input type="reset"> </form> 26

27 Παράδειγμα Φόρμας με πίνακα <form> <table> <tr> <td>name:</td> <td><input type="text" name="name" size="50"></td> </tr> <tr> <td> </td> <td><input type="text" name=" " size="50"></td> </tr> <tr> <td>street Address:</td> <td><input type="text" name="street1" size="30"></td> </tr> <tr> <td>city:</td> <td><input type="text" name="city" size="50"></td> </tr> </table> </form> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 27

28 Παράδειγμα Φόρμας με λίστα <form> What are your three favorite books? <ol> <li><input type="text" name="1st" size="20"> <li><input type="text" name="2nd" size="20"> <li><input type="text" name="3nd" size="20"> </ol> </form> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 28

29 Ομαδοποίηση σε φόρμες Ομαδοποίηση επιλογών σε αντικείμενα εισόδου fieldset Τίτλος ομαδοποίησης legend <fieldset> </fieldset> <legend>contact Information</legend> <ol> <li>first name: <input type="text" name="fname" /></li> <li>last name: <input type="text" name="lname" /></li> <li> <input type="text" name=" " /></li> </ol> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 29

30 <textarea> Πεδίο για εισαγωγή πολλαπλών γραμμών κειμένου default: 4 γραμμές, 40 χαρακτήρες Υπάρχουν τα ακόλουθα attributes name ορίζει το όνομα και είναι απαραίτητο rows πλήθος γραμμών cols πλήθος στηλών default text το κείμενο που αρχικά παρουσιάζεται Όλα τα input fields (<textarea>, <select>, <input>) πρέπει να έχουν ένα attribute name Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 30

31 <select> Ομαδοποίηση επιλογών σε αντικείμενα επιλογής - optgroup Τίτλοι ομαδοποίησης label <select multiple name="network" size="6"> <optgroup label="ethernet"> <option value="ethernet"> Ethernet 4 <option selected ="selected" value="ethernet"> Ethernet 8 <option value="ethernet"> Ethernet 12 </optgroup> <optgroup label="token Ring"> <option value="token16"> Token Ring - 16mb <option value="token4"> Token Ring - 4mb </optgroup> <option value="localtalk"> LocalTalk <option value="other"> Other... </select> 31

33 Favicon Ένα μικρό εικονίδιο που εμφανίζεται δίπλα από τον τίτλο ή το URL της σελίδας Υλοποιείται ως εξής (μέσα στο head της σελίδας) <link rel="shortcut icon" href= /> Συνήθως η εικόνα είναι τύπου ico και πρέπει να έχει μέγεθος 16x16 ή 32x32 pixel Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 33

35 Εισαγωγή στην HTML5 Απευθύνεται σε προγραμματιστές και όχι απλά σε σχεδιαστές σελίδων Ενημερώνει τον browser για τη διαχείριση σφαλμάτων (στο παρελθόν η διαχείριση γινόταν από τους browsers) Δεν απαιτείται πάντα η χρήση JavaScript και plugins όπως Flash Παρέχει APIs για σχεδίαση, drag and drop, αποθήκευση, αναπαραγωγή video, μηνύματα από σελίδα σε σελίδα, ειδοποιήσεις, web sockets, geolocation, ιστορικότητα, κλπ Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 35

36 Βασική δομή σελίδας Νέα Elements <header> <nav> <article> <aside> <section> <section> <section> <footer> 36

37 References και σύνταξη στην HTML5 Charset XHTML: <meta http-equiv= Content-Type content= text/html ; charset=utf-8 > HTML5: <meta charset= utf-8 /> Javascript XHTML: <script type= text/javascript src= myscript.js > </script> HTML5: <script src= myscript.js ></script> CSS XHTML: <link rel= stylesheet type= text/css href= mystyles.css /> HTML5: <link rel= stylesheet href= mystyles.css /> Σύνταξη Κεφαλαία, μικρά, συνδυασμό Χρήση ή μη των quotation marks Για τα κενά elements, δεν απαιτείται το closing element Παραδείγματα: <link rel= stylesheet href= mystyles.css /> <LINK REL= STYLESHEET HREF= MYSTYLES.CSS /> <link rel= stylesheet href=mystyles.css> 37

39 Νέα elements στην HTML5 To 2005 η Google ανέλυσε περισσότερες από 1 δισεκατομμύριο σελίδες για τον προσδιορισμό των κλάσεων που χρησιμοποιούνται. Βάσει αυτού προτάθηκαν νέα elements στην HTML5 footer menu Title Small Text Content Header Nav Copyright Button Main Search Msonormal Date Smalltext Body Style1 Top White link Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 39

40 Header element Οι περισσότερες σελίδες έχουν στην αρχή τους λογότυπο, όνομα, αντικείμενα πλοήγησης Συχνά υπάρχουν αντικείμενα για την εύρεση πληροφορίας ή πίνακας περιεχομένων To specification ορίζει ότι το header element μπορεί να περιλαμβάνει στοιχεία πλοήγησης, αλλά είναι πιθανό αυτά τα στοιχεία να είναι και εκτός του <header> Το header element δε χρειάζεται να είναι ένα ανά σελίδα και δεν απαιτείται να είναι στην αρχή της Δεν γίνεται να τοποθετηθεί το <header> μέσα στα <footer>, <address>, ή άλλα <header> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 40

41 Νav element Το <nav> element είναι για το περιεχόμενο πλοήγησης Χρησιμοποιείται για τη διασύνδεση με άλλες σελίδες ή διάφορα σημεία της ίδιας σελίδας Συνήθως χρησιμοποιείται μια unordered list για τα διάφορα σημεία του ιστότοπου <nav> <ul> <li><a href= # >Home</a> </li> <li><a href= # >Announcements</a> </li> <li><a href= # >About</a> </li> <li><a href= # >Contact</a> </li> </ul> </nav> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 41

42 Article element To <article> και το <section> element είναι από τα βασικότερα νέα elements της HTML5 Το <article> αναφέρεται σε ένα ανεξάρτητο κομμάτι πληροφορίας Όπως το περιεχόμενο στο RSS feed (κάθε άρθρο είναι ανεξάρτητο) Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 42

43 Section element Το <section> αναφέρεται σε περιοχή περιεχομένου ή περιοχή της σελίδας που σχεδόν πάντα απαιτεί έναν τίτλο Χρησιμοποιείται για να ομαδοποιήσει ένα «κομμάτι» περιεχομένου, και μπορεί να διασπαστεί σε επιμέρους sections Δεν πρέπει να χρησιμοποιείται ως γενικός wrapper για «στυλιστικούς» λόγους (π.χ. <div>) Το <section> μπορεί να περιλαμβάνει <article> elements, και τα <article> elements μπορούν να έχουν πολλαπλά <section> elements 43

44 Aside element Το <aside> χρησιμοποιείται για περιεχόμενο που σχετίζεται με άλλη πληροφορία (π.χ. λίστα από κατηγορίες σε ένα blog, πρόσφατα σχόλια, κλπ) Σήμερα γίνεται συχνά χρήση sidebar σε ιστοσελίδες. Δε σημαίνει απαραίτητα ότι είναι σε κάποια πλευρά της σελίδας αλλά ότι σχετική πληροφορία Η σωστή του χρήση εξαρτάται από την τοποθεσία του Σε ένα άρθρο, θα πρέπει να περιλαμβάνει πληροφορία σχετική με το άρθρο π.χ. λεξικό Εκτός άρθρου, θα πρέπει να περιλαμβάνει πληροφορία σχετική με τη σελίδα π.χ. Twitter feed 44

45 Footer element Το <footer> βρίσκεται στο κάτω μέρος της σελίδας (αν και δε συμβαίνει πάντα) Χρησιμοποιείται για πληροφορία αναφορικά με το συγκεκριμένο section (π.χ. συγγραφέας, copyright, ημερομηνία, κλπ) Παράδειγμα: <footer> <small> Copyright MJL 2012</small> </footer> Όπως και το <header>, το <footer> μπορεί να χρησιμοποιηθεί πολλές φορές σε μια σελίδα Το <footer> μπορεί να περιλαμβάνεται σε ένα <article> element 45

46 Συνοπτικά <article> <body> <header> <nav> <section> <section> <aside> <footer> <article> <header> <nav> <section> <section> <aside> <footer> 46

48 Outliner για έλεγχο ορθότητας δομής Βάσει των νέων elements είναι εφικτή η ιεραρχική δομή του περιεχομένου Απαιτείται έλεγχος ορθής χρήσης headings και sections Google Chrome: Επιτρέπει την παρουσίαση της πληροφορίας ως πίνακα περιεχομένων Δεν πρέπει να εμφανίζεται Untitled section/article. εκτός από τα elements nav και aside Δικτυακές Υπηρεσίες, 3η Διάλεξη 48

49

51 «Εικόνες» και περιγραφές (1/2) Το νέο figure element επιτρέπει την προσθήκη εικόνας και της σχετικής της περιγραφής Πριν την HTML5, χρειαζόταν div και στη συνέχεια προσθήκη της περιγραφής (χωρίς σχέση μεταξύ των 2) Το figure element δε χρειάζεται να περιλαμβάνει εικόνες Μπορεί να περιλαμβάνει κώδικα, ηχητικά μέρη, βίντεο, κλπ Σύνταξη <figure> </figure> <img alt= University of Piraeus src= unipi_logo.jpeg width= 100 height= 100 /> <figcaption> University of Piraeus </figcaption> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 51

52 «Εικόνες» και περιγραφές (2/2) Κάθε figure element μπορεί να έχει μόνο ένα figcaption Μπορούν να προστεθούν παραπάνω από μια εικόνες στο figure element Το figcaption θα πρέπει να είναι είτε στο πρώτο είτε στο τελευταίο element <figure> </figure> <img alt="university of Piraeus" src="logo.jpeg" width="100" height="100" /> <img alt="university of Piraeus" src="logo.jpeg" width="100" height="100" /> <figcaption> </figcaption> University of Piraeus x2 Υπάρχουν συζητήσεις για το αν χρειάζεται ακόμα το alt text Εκτός του figure element, ένα img element πάντα χρειάζεται το alt attribute (αν δεν χρειάζεται να αναγνωριστεί από άλλο κώδικα, μπορεί να είναι κενό) Στο figure element, εάν το caption έχει σχετική περιγραφή, δεν χρειάζεται το alt Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 52

54 Audio element (1/2) To audio element χρησιμοποιείται για την εισαγωγή ηχητικών αποσπασμάτων στις σελίδες Οι browsers επιτρέπουν την αναπαραγωγή συγκεκριμένων μορφών Υποστηρίζει διάφορα attributes src: Ορίζει το αρχείο αναπαραγωγής controls: Ορίζει αν θα εμφανίζονται στοιχεία ελέγχου (προεπιλογή να μην εμφανίζονται). Μπορούν να οριστούν συγκεκριμένα στοιχεία μέσω JavaScript autoplay: Ορίζει αν θα αρχίσει αυτόματα η αναπαραγωγή preload: Ορίζει τι να κάνει ο browser αν δεν έχει επιλεγεί autoplay. Μπορεί να λάβει τιμές: none: Ο browser δεν αναπαράγει το αρχείο μέχρι ο χρήστης να το επιλέξει auto: Ο browser «κατεβάζει» το αρχείο όταν «φορτώσει» η σελίδα metadata: Ο browser απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια loop: Ορίζει αν θα επαναλαμβάνεται η αναπαραγωγή όταν ολοκληρωθεί 54

55 Audio element (2/2) Παράδειγμα <audio controls autoplay> <source src="audio.ogg" /> <source src="audio.mp3" /> <p>this browser does not support our audio format.</p> </audio> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 55

56 Video element (1/2) To video element χρησιμοποιείται για την εισαγωγή αποσπασμάτων βίντεο στις σελίδες Υποστηρίζει διάφορα attributes src: Ορίζει το αρχείο αναπαραγωγής poster: Ορίζει την εικόνα που θα εμφανίζεται όσο «κατεβαίνει» το βίντεο ή μέχρι ο χρήστης να επιλέξει την αναπαραγωγή του width, height: Ορίζουν το μέγεθος του player σε pixels controls: Ορίζει αν θα εμφανίζονται στοιχεία ελέγχου (προεπιλογή να μην εμφανίζονται) autoplay: Ορίζει αν θα αρχίσει αυτόματα η αναπαραγωγή loop: Ορίζει αν θα επαναλαμβάνεται η αναπαραγωγή όταν ολοκληρωθεί preload: Ορίζει τι να κάνει ο browser αν δεν έχει επιλεγεί autoplay. Μπορεί να λάβει τιμές: none: Ο browser δεν αναπαράγει το βίντεο μέχρι ο χρήστης να το επιλέξει auto: Ο browser «κατεβάζει» το βίντεο όταν «φορτώσει» η σελίδα metadata: Ο browser απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια 56

57 Video element (2/2) Παράδειγμα <video src="video.mp4" poster="logo.jpeg" width="400" height="300" preload controls loop> <p>this browser doesn't support the specific video format.</p> </video> Προγραμματισμός Παγκόσμιου Ιστού, 2η Διάλεξη 57