Transcript HTML
HTML Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484 email: [email protected] HTML • HyperText Markup Language – Markup: • Ενσωματωμένοι «κωδικοί» στα αρχεία/σελίδες • Οι κωδικοί ονομάζονται «tags» και: – Περιγράφουν τη δομή των αρχείων/σελίδων – Περιέχουν οδηγίες για την επεξεργασία των αρχείων/σελίδων από τους browser – Hypertext: • Σύνδεσμοι σε άλλα έγγραφα/τοποθεσίες • Κύρια γλώσσα παρουσίασης στο WWW • Τελευταίο Specification: HTML 4.01 – World Wide Web Consortium (W3C) - http://www.w3.org – Αναπτύσσεται το HTML 5 αλλά δεν είναι ακόμα standard. • Υποστηρίζεται ήδη από μερικούς browsers • Περιλαμβάνει νέα tags για ενσωματωμένο video, audio, “drag ‘n drop”, document editing κ.α. 2/3/2009 Δικτυακός Προγραμματισμός 2 XHTML • Πρόκειται για πιο «αυστηρή» και «καθαρή» εκδοχή της HTML. • Είναι σχεδόν ίδια με την HTML 4.01 • Αποτελεί W3C Recommendation • Κύριες διαφορές από την HTML – – – – Τα XHTML tags πρέπει να είναι σωστά ιεραρχημένα Τα XHTML tags πρέπει να «κλείνουν» πάντα Τα XHTML tags πρέπει να είναι lowercase Τα XHTML έγγραφα πρέπει να έχουν ένα μόνο root element (το “html”). 2/3/2009 Δικτυακός Προγραμματισμός 3 Τα Στοιχεία του HTML • Ένα HTML αρχείο αποτελείται από – τα δεδομένα (κείμενο, εικόνες, σύνδεσμοι κλπ.) και – τις οδηγίες προς τους HTMLViewers (browsers) που αφορούν την παρουσίαση τους. • Το HTML κείμενο «μαρκάρεται» ορίζοντας συγκεκριμένο φορμάρισμα για κάθε του τμήμα. 2/3/2009 Δικτυακός Προγραμματισμός 4 HTML Tags • Είναι ανεξάρτητα στοιχεία μέσα σε “<“, “>” <title>Hello HTML</title> …. <h2>Κεφαλίδα επιπέδου 2</h2> • Κατά την παρουσίαση του εγγράφου δεν φαίνονται. • Πώς εμφανίζονται τα “<“ και “>” ; < < > > – Όλα τα special characters: http://www.w3schools.com/tags/ref_entities.asp 2/3/2009 Δικτυακός Προγραμματισμός 5 Δημιουργία HTML αρχείου • Ένας βασικός σκελετός είναι: <html> <head> <title> A Basic Document Template </title> </head> <body> Body Element </body> </html> • Παρατηρήσεις – Ορισμένα από τα tags είναι δυνατόν να παραλειφθούν. – Οι browsers θεωρούν όλα τα λευκά διαστήματα ως απλό κενό. – Πολλαπλά κενά συμπυκνώνονται σε ένα. 2/3/2009 Δικτυακός Προγραμματισμός 6 Χωρισμός κειμένου σε παραγράφους • Η εμφάνιση του κειμένου καθορίζεται από τον browser. • Οι αλλαγές γραμμών του αρχικού κειμένου αγνοούνται. • Πώς γίνεται ο χωρισμός παραγράφων; – Με τα paragraph elements. – Στην αρχή της παραγράφου τοποθετείται ένα αρχικό paragraph tag <p>. – Στο πέρας της τοποθετείται το τελικό </p>. • Μπορούμε να χωρίσουμε μια γραμμή σε συγκεκριμένο σημείο; – Ναι, με το line break tag <br> ή πιο σωστά σε XHTML <br />. 2/3/2009 Δικτυακός Προγραμματισμός 7 Περίγραμμα Κειμένου Χωρισμός σε λογικές ενότητες με ανάλογες επικεφαλίδες. • Επικεφαλίδες – – – – Υπάρχουν 6 επίπεδα: h1, h2, h3, h4, h5, h6 Δεν υπάρχει σταθερή εμφάνιση για όλους τους browsers Ο μικρότερος δείκτης φανερώνει μεγαλύτερη σπουδαιότητα Οι επικεφαλίδες βρίσκονται μεταξύ paragraph breaks • Με το div tag μπορούμε να απομονώνουμε τμήματα/περιοχές της σελίδας και να τους αποδίδουμε ξεχωριστά χαρακτηριστικά. – <div align=“left”>My text here…</div> 2/3/2009 Δικτυακός Προγραμματισμός 8 Φορμάρισμα του κειμένου (1) • Format Elements – – – – – – <b> υποδεικνύει χρήση έντονων χαρακτήρων <u> υπογράμμιση <s> σχεδιάζει μια οριζόντια γραμμή <big> μεγαλύτερη γραμματοσειρά <small> μικρότερη γραμματοσειρά <i> πλάγιοι χαρακτήρες • Επιτρέπεται το «φώλιασμα» των παραπάνω στοιχείων. • Απαιτείται η χρήση end tag. 2/3/2009 Δικτυακός Προγραμματισμός 9 Φορμάρισμα του κειμένου (2) • Χρήση προ-φορμαρισμένου κειμένου. – <pre> Element • Προσθήκη σχολίων – Χρήση των tags <!-- και --> • Ειδικοί χαρακτήρες – Με χρήση του & ακολουθούμενο από το όνομα του χαρακτήρα π.χ. < < • Ιδιότητες του Body Element: – – – – – text χρώμα γραμμάτων κειμένου link χρώμα του link alink χρώμα του active link vlink χρώμα του visited link bgcolor χρώμα του background 2/3/2009 Δικτυακός Προγραμματισμός 10 Σύνδεση HTML εγγράφων • Link σε HTML σελίδα – <a href=“http://www.telecom.ntua.gr/iprog.html”>Course</a> • Link σε e-mail – <a href=“mailto:[email protected]”>Send me e-mail</a> • Link σε FTP – <a href=“ftp://ftp.mysite.com/pub”>FTP Connection</a> – Όταν ενεργοποιούνται ftp links η σύνδεση είναι anonymous ftp • Μπορούμε να έχουμε και non-anonymous ftp link – Εισάγοντας το username και το @ πριν το sitename: • ftp://[email protected]/pub – Μετά ζητάται το κατάλληλο password • ftp://username:[email protected]/pub 2/3/2009 Δικτυακός Προγραμματισμός 11 Προβολή κειμένου σε Λίστες • Γιατί λίστες; – Είναι λειτουργικές και εύκολες στην ανάγνωση • Κάθε λίστα αποτελείται από το αναγνωριστικό της και το 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> 2/3/2009 Δικτυακός Προγραμματισμός 12 Γραφικά • Οι περισσότεροι browsers χειρίζονται τα GIF, JPEG και PGN. • Χρησιμοποιείται το <img> tag – Παράμετρος alt κείμενο εάν η εικόνα δεν είναι διαθέσιμή – Παράδειγμα: • <img src=“map.gif” alt=“Map of Greece” /> • Το μέγεθος του αρχείου μιας εικόνας είναι πολύ σημαντικό – ταχύτητα μεταφοράς – χώρος αποθήκευσης στον ιστοχώρο – Τι το επηρεάζει; • το πλήθος χρησιμοποιούμενων χρωμάτων • η ανάλυση της εικόνας 2/3/2009 Δικτυακός Προγραμματισμός 13 Πίνακες • Το βασικό tag είναι το <table>...</table> • Για την κατασκευή του πίνακα έχουμε τα tag – <tr>...</tr> χωρισμός γραμμών – <td>...</td> χωρισμός δεδομένων – <th>...</th> δημιουργία επικεφαλίδας στην πρώτη γραμμή ή στήλη • Με το attribute border εμφανίζονται τα πλαίσια του πίνακα (σε pixel) • Παράδειγμα: <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 2/3/2009 Δικτυακός Προγραμματισμός 14 Φόρμες (1) • Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη. • Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή. • Υπάρχουν 3 τύποι tags για δημιουργία πεδίων: – <textarea> – <select> – <input> • Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags . • Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους. 2/3/2009 Δικτυακός Προγραμματισμός 15 Φόρμες (2) • Το tag form οριοθετεί την αρχή της φόρμας – Ορίζει το script ή το URL στο οποίο αποστέλλονται τα εισαχθέντα δεδομένα και την μέθοδο μετάδοσης τους – Δύο βασικά attributes: • Το action attribute δείχνει την URL που θα τα λάβει • Το method attribute έχει δύο δυνατές τιμές: – post στέλνει όλη την πληροφορία χωριστά από την URL – get συνδέει την πληροφορία στο τέλος της URL – Ενδείκνυται η χρήση της πρώτης μεθόδου επειδή τα URLs έχουν συγκεκριμένο μήκος που δεν μπορούν να υπερβούν • Παράδειγμα <form method="post" action="/cgi-bin/my_script"> ...</form> 2/3/2009 Δικτυακός Προγραμματισμός 16 <textarea> • Πεδίο για εισαγωγή πολλαπλών γραμμών κειμένου – default: 4 γραμμές, 40 χαρακτήρες • Υπάρχουν τα ακόλουθα attributes : – – – – name ορίζει το όνομα της φόρμας και είναι απαραίτητο rows πλήθος γραμμών cols πλήθος στηλών default text το κείμενο που αρχικά παρουσιάζεται • Όλα τα input fields (<textarea>, <select>, <input>) πρέπει να έχουν ένα attribute name 2/3/2009 Δικτυακός Προγραμματισμός 17 <select> • Παρουσιάζει μια λίστα επιλογών σε ένα pop-up menu ή σε μια scrolling list • Έχουμε τα εξής attributes: – name – size καθορίζει το πλήθος των επιλογών που θα παρουσιάζονται – multiple επιτρέπει πολλαπλές επιλογές • Για τις επιλογές χρησιμοποιείται το <option> tag με τα εξής attributes: – value τιμή που αντιστοιχεί στην επιλογή – selected καθιστά μια από τις επιλογές default 2/3/2009 Δικτυακός Προγραμματισμός 18 Παράδειγμα <select> <form> What type of Connection: <select multiple name="network"> <option selected value="ethernet"> Ethernet <option value="token16"> Token Ring - 16mb <option value="token4"> Token Ring - 4mb <option value="localtalk"> LocalTalk <option value="other"> Other... </select> <br> If other, specify:<input type="text" name="other"> </form> 2/3/2009 Δικτυακός Προγραμματισμός 19 <input> (1) • Περιέχει τις υπόλοιπες επιλογές: – – – – – – Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset 2/3/2009 Δικτυακός Προγραμματισμός 20 <input> (2) • Τα πιο κοινά 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/3/2009 Δικτυακός Προγραμματισμός 21 <input> (3) • 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 2/3/2009 Δικτυακός Προγραμματισμός 22 <input> (4) • reset – Απεικονίζεται ως push button το οποίο όταν πατηθεί επαναφέρει τα στοιχεία της φόρμας στην αρχική τους τιμή • submit – Απεικονίζεται ως push button το οποίο όταν πατηθεί στέλνει τα δεδομένα της φόρμας στον server • Παράδειγμα: <form> <input type="radio" name="choice" value="choice1" checked> Yes. <input TYPE="radio" name="choice" value="choice2"> No. <br> <input type="submit" value="Next"> <input type="reset"> </form> 2/3/2009 Δικτυακός Προγραμματισμός 23 Παράδειγμα Φόρμας με πίνακα <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> 2/3/2009 Δικτυακός Προγραμματισμός 24 Παράδειγμα Φόρμας με λίστα <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/3/2009 Δικτυακός Προγραμματισμός 25 Check Boxes και Radio Buttons • Χρήσιμα στοιχεία μιας φόρμας. • Είναι απαραίτητη η σωστή και κατανοητή τοποθέτηση τους • Αυτή μπορεί να γίνει με έναν από τους κάτωθι τρόπους: – οριζόντια – κατακόρυφη σε λίστα – τοποθέτηση σε πλέγμα 2/3/2009 Δικτυακός Προγραμματισμός 26 Παράδειγμα Check Boxes και Radio Buttons (κατακόρυφη λίστα) <form> <dl> <dt>What machines do you work on? <dd><input name="os" type="radio" value="macintosh">Macintosh <dd><input name="os" type="radio" value="pc">Pc <dd><input name="os" type="radio" value="unix“>Unix Workstation <dl> <dd><input name="sun" type="checkbox">Sun <dd><input name="sgi" type="checkbox">SGI <dd><input name="next" type="checkbox">NeXT <dd><input name="aix" type="checkbox">AIX <dd><input name="lin" type="checkbox">Linux <dd><input name="other" type="checkbox">Other... </dl> </dl> </form> 2/3/2009 Δικτυακός Προγραμματισμός 27 HTML Editors • Windows – – – – HTML – Kit http://www.chami.com/html-kit/ CoffeeCup Free HTML Editor http://www.coffeecup.com/free-editor/ • Linux – Quanta – Bluefish • Mac OS X – XCode 2/3/2009 Δικτυακός Προγραμματισμός 28 HTML Tutorials • Στο site του μαθήματος • w3schools – http://www.w3schools.com/html/default.asp 2/3/2009 Δικτυακός Προγραμματισμός 29 Ερωτήσεις 2/3/2009 Δικτυακός Προγραμματισμός 30