HTML Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484 email: dora@telecom.ntua.gr
Δικτυακός Προγραμματισμός 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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός XHTML Πρόκειται για πιο «αυστηρή» και «καθαρή» εκδοχή της HTML. Είναι σχεδόν ίδια με την HTML 4.01 Αποτελεί W3C Recommendation Κύριες διαφορές από την HTML Τα XHTML tags πρέπει να είναι σωστά ιεραρχημένα Τα XHTML tags πρέπει να «κλείνουν» πάντα Τα XHTML tags πρέπει να είναι lowercase Τα XHTML έγγραφα πρέπει να έχουν ένα μόνο root element (το “html”). 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Τα Στοιχεία του HTML Ένα HTML αρχείο αποτελείται από τα δεδομένα (κείμενο, εικόνες, σύνδεσμοι κλπ.) και τις οδηγίες προς τους HTMLViewers (browsers) που αφορούν την παρουσίαση τους. Το HTML κείμενο «μαρκάρεται» ορίζοντας συγκεκριμένο φορμάρισμα για κάθε του τμήμα. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός HTML Tags Είναι ανεξάρτητα στοιχεία μέσα σε “<“, “>” <title>Hello HTML</title> …. <h2>Κεφαλίδα επιπέδου 2</h2> Κατά την παρουσίαση του εγγράφου δεν φαίνονται. Πώς εμφανίζονται τα “<“ και “>” ; < < > > Όλα τα special characters: http://www.w3schools.com/tags/ref_entities.asp 2/3/2009 Δικτυακός Προγραμματισμός
Δημιουργία HTML αρχείου Ένας βασικός σκελετός είναι: <html> <head> <title> A Basic Document Template </title> </head> <body> Body Element </body> </html> Παρατηρήσεις Ορισμένα από τα tags είναι δυνατόν να παραλειφθούν. Οι browsers θεωρούν όλα τα λευκά διαστήματα ως απλό κενό. Πολλαπλά κενά συμπυκνώνονται σε ένα. 2/3/2009 Δικτυακός Προγραμματισμός
Χωρισμός κειμένου σε παραγράφους Η εμφάνιση του κειμένου καθορίζεται από τον browser. Οι αλλαγές γραμμών του αρχικού κειμένου αγνοούνται. Πώς γίνεται ο χωρισμός παραγράφων; Με τα paragraph elements. Στην αρχή της παραγράφου τοποθετείται ένα αρχικό paragraph tag <p>. Στο πέρας της τοποθετείται το τελικό </p>. Μπορούμε να χωρίσουμε μια γραμμή σε συγκεκριμένο σημείο; Ναι, με το line break tag <br> ή πιο σωστά σε XHTML <br />. 2/3/2009 Δικτυακός Προγραμματισμός
Περίγραμμα Κειμένου Χωρισμός σε λογικές ενότητες με ανάλογες επικεφαλίδες. Επικεφαλίδες Υπάρχουν 6 επίπεδα: h1, h2, h3, h4, h5, h6 Δεν υπάρχει σταθερή εμφάνιση για όλους τους browsers Ο μικρότερος δείκτης φανερώνει μεγαλύτερη σπουδαιότητα Οι επικεφαλίδες βρίσκονται μεταξύ paragraph breaks Με το div tag μπορούμε να απομονώνουμε τμήματα/περιοχές της σελίδας και να τους αποδίδουμε ξεχωριστά χαρακτηριστικά. <div align=“left”>My text here…</div> 2/3/2009 Δικτυακός Προγραμματισμός
Φορμάρισμα του κειμένου (1) Format Elements <b> υποδεικνύει χρήση έντονων χαρακτήρων <u> υπογράμμιση <s> σχεδιάζει μια οριζόντια γραμμή <big> μεγαλύτερη γραμματοσειρά <small> μικρότερη γραμματοσειρά <i> πλάγιοι χαρακτήρες Επιτρέπεται το «φώλιασμα» των παραπάνω στοιχείων. Απαιτείται η χρήση end tag. 2/3/2009 Δικτυακός Προγραμματισμός
Φορμάρισμα του κειμένου (2) Χρήση προ-φορμαρισμένου κειμένου. <pre> Element Προσθήκη σχολίων Χρήση των tags <!-- και --> Ειδικοί χαρακτήρες Με χρήση του & ακολουθούμενο από το όνομα του χαρακτήρα π.χ. < < Ιδιότητες του Body Element: text χρώμα γραμμάτων κειμένου link χρώμα του link alink χρώμα του active link vlink χρώμα του visited link bgcolor χρώμα του background 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Σύνδεση HTML εγγράφων Link σε HTML σελίδα <a href=“http://www.telecom.ntua.gr/iprog.html”>Course</a> Link σε e-mail <a href=“mailto:myname@telecom.ntua.gr”>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://username@ftp.mysite.com/pub Μετά ζητάται το κατάλληλο password ftp://username:password@ftp.mysite.com/pub 2/3/2009 Δικτυακός Προγραμματισμός
Προβολή κειμένου σε Λίστες Γιατί λίστες; Είναι λειτουργικές και εύκολες στην ανάγνωση Κάθε λίστα αποτελείται από το αναγνωριστικό της και το 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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Γραφικά Οι περισσότεροι browsers χειρίζονται τα GIF, JPEG και PGN. Χρησιμοποιείται το <img> tag Παράμετρος alt κείμενο εάν η εικόνα δεν είναι διαθέσιμή Παράδειγμα: <img src=“map.gif” alt=“Map of Greece” /> Το μέγεθος του αρχείου μιας εικόνας είναι πολύ σημαντικό ταχύτητα μεταφοράς χώρος αποθήκευσης στον ιστοχώρο Τι το επηρεάζει; το πλήθος χρησιμοποιούμενων χρωμάτων η ανάλυση της εικόνας 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Πίνακες Το βασικό 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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Φόρμες (1) Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη. Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή. Υπάρχουν 3 τύποι tags για δημιουργία πεδίων: <textarea> <select> <input> Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags . Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Φόρμες (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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός <textarea> Πεδίο για εισαγωγή πολλαπλών γραμμών κειμένου default: 4 γραμμές, 40 χαρακτήρες Υπάρχουν τα ακόλουθα attributes : name ορίζει το όνομα της φόρμας και είναι απαραίτητο rows πλήθος γραμμών cols πλήθος στηλών default text το κείμενο που αρχικά παρουσιάζεται Όλα τα input fields (<textarea>, <select>, <input>) πρέπει να έχουν ένα attribute name 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός <select> Παρουσιάζει μια λίστα επιλογών σε ένα pop-up menu ή σε μια scrolling list Έχουμε τα εξής attributes: name size καθορίζει το πλήθος των επιλογών που θα παρουσιάζονται multiple επιτρέπει πολλαπλές επιλογές Για τις επιλογές χρησιμοποιείται το <option> tag με τα εξής attributes: value τιμή που αντιστοιχεί στην επιλογή selected καθιστά μια από τις επιλογές default 2/3/2009 Δικτυακός Προγραμματισμός
Παράδειγμα <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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός <input> (1) Περιέχει τις υπόλοιπες επιλογές: Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός <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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός <input> (3) text Παρουσιάζει μια απλή γραμμή κειμένου Attributes: name, size, maxlength, value password Παρουσιάζει τους χαρακτήρες που πληκτρολογούνται ως bullets checkbox Attributes: name, value, checked radio Αποτελεί μια πιο περίπλοκη εκδοχή του check box επιτρέποντας σε ένα μόνο στοιχείο από το σύνολο να επιλεγεί Η ομαδοποίηση γίνεται με χρήση του name attribute 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός <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 Δικτυακός Προγραμματισμός
Παράδειγμα Φόρμας με πίνακα <form> <table> <tr> <td>Name:</td> <td><input type="text" name="name" size="50"></td> </tr> <td>E-Mail:</td> <td><input type="text" name="email" size="50"></td> <td>Street Address:</td> <td><input type="text" name="street1" size="30"></td> <td>City:</td> <td><input type="text" name="city" size="50"></td> </table> </form> 2/3/2009 Δικτυακός Προγραμματισμός
Παράδειγμα Φόρμας με λίστα <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 Δικτυακός Προγραμματισμός
Check Boxes και Radio Buttons Χρήσιμα στοιχεία μιας φόρμας. Είναι απαραίτητη η σωστή και κατανοητή τοποθέτηση τους Αυτή μπορεί να γίνει με έναν από τους κάτωθι τρόπους: οριζόντια κατακόρυφη σε λίστα τοποθέτηση σε πλέγμα 2/3/2009 Δικτυακός Προγραμματισμός
Παράδειγμα 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 <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> </form> 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός 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 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός HTML Tutorials Στο site του μαθήματος w3schools http://www.w3schools.com/html/default.asp 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Ερωτήσεις 2/3/2009 Δικτυακός Προγραμματισμός