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

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

Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML / HTML5 Λίστες, σύνδεσμοι, πίνακες Φόρμες Favicon Εικόνες και περιγραφές Audio element

Μοντέλο client server Client side Sever side 1. Request 3. Response 2. Data

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

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

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

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

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

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

HTML Tags Είναι ανεξάρτητα στοιχεία μέσα σε < > <title>hello HTML</title>. <h2>κεφαλίδα επιπέδου 2</h2> Κατά την παρουσίαση του εγγράφου δεν φαίνονται Πώς εμφανίζονται τα < και >? < < > > Όλα τα special characters: www.w3schools.com/tags/ref_entities.asp

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

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

Προβολή κειμένου σε Λίστες Κάθε λίστα αποτελείται από το αναγνωριστικό της και το 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 >

Σύνδεσμοι - Links Attribute target καθορίζει εάν ο σύνδεσμος ανοίγει στην ίδια ή σε νέα σελίδα <a href= http://www.unipi.gr 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= http://mymaps.gr > <img src= map.gif alt= Map of Greece title= A Map /> </a>

Πίνακες 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>

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

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

<input> (1/4) Επιτρέπει διάφορες επιλογές εισόδου περιεχομένου Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset

<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 ενεργό

<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

<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>

Παράδειγμα Φόρμας με πίνακα <form> <table> <tr> <td>name:</td> <td><input type="text" name="name" size="50"></td> </tr> <tr> <td>e-mail:</td> <td><input type="text" name="email" 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>

Παράδειγμα Φόρμας με λίστα <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>

Ομαδοποίηση σε φόρμες Ομαδοποίηση επιλογών σε αντικείμενα εισόδου 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>email: <input type="text" name="email" /></li> </ol>

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

<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>

Favicon Ένα μικρό εικονίδιο που εμφανίζεται δίπλα από τον τίτλο ή το URL της σελίδας Υλοποιείται ως εξής (μέσα στο head της σελίδας) <link rel="shortcut icon" href= http://www.tositemou.gr/toonomatiseikonas.ico" /> Συνήθως η εικόνα είναι τύπου ico και πρέπει να έχει μέγεθος 16x16 ή 32x32 pixel

«Εικόνες» και περιγραφές (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/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

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

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>

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 απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια

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>