Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

HTML Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "HTML Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484"— Μεταγράφημα παρουσίασης:

1 HTML Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ

2 HTML HyperText Markup Language –Markup: Ενσωματωμένοι «κωδικοί» στα αρχεία/σελίδες Οι κωδικοί ονομάζονται «tags» και: –Περιγράφουν τη δομή των αρχείων/σελίδων –Περιέχουν οδηγίες για την επεξεργασία των αρχείων/σελίδων από τους browser –Hypertext: Σύνδεσμοι σε άλλα έγγραφα/τοποθεσίες Κύρια γλώσσα παρουσίασης στο WWW HTML 4.01Τελευταίο Specification: HTML 4.01 –World Wide Web Consortium (W3C) - HTML 5 –Αναπτύσσεται το HTML 5 αλλά δεν είναι ακόμα standard. Υποστηρίζεται ήδη από μερικούς browsers Περιλαμβάνει νέα tags για ενσωματωμένο video, audio, “drag ‘n drop”, document editing κ.α. 22/3/2009Δικτυακός Προγραμματισμός

3 XHTML Πρόκειται για πιο «αυστηρή» και «καθαρή» εκδοχή της HTML. Είναι σχεδόν ίδια με την HTML 4.01 Αποτελεί W3C Recommendation Κύριες διαφορές από την HTML ιεραρχημένα –Τα XHTML tags πρέπει να είναι σωστά ιεραρχημένα «κλείνουν» –Τα XHTML tags πρέπει να «κλείνουν» πάντα lowercase –Τα XHTML tags πρέπει να είναι lowercase root element –Τα XHTML έγγραφα πρέπει να έχουν ένα μόνο root element (το “html”). 2/3/2009Δικτυακός Προγραμματισμός3

4 Τα Στοιχεία του HTML Ένα HTML αρχείο αποτελείται από –τα δεδομένα (κείμενο, εικόνες, σύνδεσμοι κλπ.) και –τις οδηγίες προς τους HTMLViewers (browsers) που αφορούν την παρουσίαση τους. Το HTML κείμενο «μαρκάρεται» ορίζοντας συγκεκριμένο φορμάρισμα για κάθε του τμήμα. 2/3/2009Δικτυακός Προγραμματισμός4

5 HTML Tags Είναι ανεξάρτητα στοιχεία μέσα σε “ ” Hello HTML …. Κεφαλίδα επιπέδου 2 Κατά την παρουσίαση του εγγράφου δεν φαίνονται. Πώς εμφανίζονται τα “ ” ; <  < >  > –Όλα τα special characters: 2/3/2009Δικτυακός Προγραμματισμός5

6 Δημιουργία HTML αρχείου Ένας βασικός σκελετός είναι: A Basic Document Template Body Element Παρατηρήσεις –Ορισμένα από τα tags είναι δυνατόν να παραλειφθούν. –Οι browsers θεωρούν όλα τα λευκά διαστήματα ως απλό κενό. –Πολλαπλά κενά συμπυκνώνονται σε ένα. 2/3/2009Δικτυακός Προγραμματισμός6

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

8 Περίγραμμα Κειμένου Χωρισμός σε λογικές ενότητες με ανάλογες επικεφαλίδες. Επικεφαλίδες –Υπάρχουν 6 επίπεδα: h1, h2, h3, h4, h5, h6 –Δεν υπάρχει σταθερή εμφάνιση για όλους τους browsers –Ο μικρότερος δείκτης φανερώνει μεγαλύτερη σπουδαιότητα –Οι επικεφαλίδες βρίσκονται μεταξύ paragraph breaks Με το div tag μπορούμε να απομονώνουμε τμήματα/περιοχές της σελίδας και να τους αποδίδουμε ξεχωριστά χαρακτηριστικά. – My text here… 2/3/2009Δικτυακός Προγραμματισμός8

9 Φορμάρισμα του κειμένου (1) Format Elements – υποδεικνύει χρήση έντονων χαρακτήρων – υπογράμμιση – σχεδιάζει μια οριζόντια γραμμή – μεγαλύτερη γραμματοσειρά – μικρότερη γραμματοσειρά – πλάγιοι χαρακτήρες Επιτρέπεται το «φώλιασμα» των παραπάνω στοιχείων. Απαιτείται η χρήση end tag. 2/3/2009Δικτυακός Προγραμματισμός9

10 Φορμάρισμα του κειμένου (2) Χρήση προ-φορμαρισμένου κειμένου. – Element Προσθήκη σχολίων –Χρήση των tags Ειδικοί χαρακτήρες –Με χρήση του & ακολουθούμενο από το όνομα του χαρακτήρα π.χ. < < Ιδιότητες του Body Element: –text χρώμα γραμμάτων κειμένου –link χρώμα του link –alink χρώμα του active link –vlink χρώμα του visited link –bgcolor χρώμα του background 2/3/2009Δικτυακός Προγραμματισμός10

11 Σύνδεση HTML εγγράφων Link σε HTML σελίδα – Course Link σε – Send me Link σε FTP – FTP Connection –Όταν ενεργοποιούνται ftp links η σύνδεση είναι anonymous ftp Μπορούμε να έχουμε και non-anonymous ftp link –Εισάγοντας το username και πριν το sitename: –Μετά ζητάται το κατάλληλο password 2/3/2009Δικτυακός Προγραμματισμός11

12 Προβολή κειμένου σε Λίστες Γιατί λίστες; –Είναι λειτουργικές και εύκολες στην ανάγνωση Κάθε λίστα αποτελείται από το αναγνωριστικό της και το List Item tag Οι λίστες υποστηρίζουν εσωτερικά HTML στοιχεία και ιδιαίτερα Paragraph tags για τον διαχωρισμό του κειμένου Επιτρέπεται το φώλιασμα Είδη: –Ordered List Ξεκινάει με το tag και τελειώνει με το tag Για κάθε στοιχείο χρησιμοποιείται το tag –Unordered ή Bulleted List Χρησιμοποιούνται αντίστοιχα τα, tag –Definition Lists Χρησιμοποιούνται για συνδυασμό description/term Τα αντίστοιχα tag είναι:, και 2/3/2009Δικτυακός Προγραμματισμός12

13 Γραφικά Οι περισσότεροι browsers χειρίζονται τα GIF, JPEG και PGN. Χρησιμοποιείται το tag –Παράμετρος alt κείμενο εάν η εικόνα δεν είναι διαθέσιμή –Παράδειγμα: Το μέγεθος του αρχείου μιας εικόνας είναι πολύ σημαντικό –ταχύτητα μεταφοράς –χώρος αποθήκευσης στον ιστοχώρο –Τι το επηρεάζει; το πλήθος χρησιμοποιούμενων χρωμάτων η ανάλυση της εικόνας 2/3/2009Δικτυακός Προγραμματισμός13

14 Πίνακες Το βασικό tag είναι το... Για την κατασκευή του πίνακα έχουμε τα tag –... χωρισμός γραμμών –... χωρισμός δεδομένων –... δημιουργία επικεφαλίδας στην πρώτη γραμμή ή στήλη Με το attribute border εμφανίζονται τα πλαίσια του πίνακα (σε pixel) Παράδειγμα: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 2/3/2009Δικτυακός Προγραμματισμός14

15 Φόρμες (1) Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη. Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή. Υπάρχουν 3 τύποι tags για δημιουργία πεδίων: – Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags. Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους. 2/3/2009Δικτυακός Προγραμματισμός15

16 Φόρμες (2) Το tag form οριοθετεί την αρχή της φόρμας –Ορίζει το script ή το URL στο οποίο αποστέλλονται τα εισαχθέντα δεδομένα και την μέθοδο μετάδοσης τους –Δύο βασικά attributes: Το action attribute δείχνει την URL που θα τα λάβει Το method attribute έχει δύο δυνατές τιμές: –post στέλνει όλη την πληροφορία χωριστά από την URL –get συνδέει την πληροφορία στο τέλος της URL –Ενδείκνυται η χρήση της πρώτης μεθόδου επειδή τα URLs έχουν συγκεκριμένο μήκος που δεν μπορούν να υπερβούν Παράδειγμα... 2/3/2009Δικτυακός Προγραμματισμός16

17 Πεδίο για εισαγωγή πολλαπλών γραμμών κειμένου –default: 4 γραμμές, 40 χαρακτήρες Υπάρχουν τα ακόλουθα attributes : –name ορίζει το όνομα της φόρμας και είναι απαραίτητο –rows πλήθος γραμμών –cols πλήθος στηλών –default text το κείμενο που αρχικά παρουσιάζεται Όλα τα input fields (,, ) πρέπει να έχουν ένα attribute name 2/3/2009Δικτυακός Προγραμματισμός17

18 Παρουσιάζει μια λίστα επιλογών σε ένα pop-up menu ή σε μια scrolling list Έχουμε τα εξής attributes: –name –size καθορίζει το πλήθος των επιλογών που θα παρουσιάζονται –multiple επιτρέπει πολλαπλές επιλογές Για τις επιλογές χρησιμοποιείται το tag με τα εξής attributes: –value τιμή που αντιστοιχεί στην επιλογή –selected καθιστά μια από τις επιλογές default 2/3/2009Δικτυακός Προγραμματισμός18

19 Παράδειγμα What type of Connection: Ethernet Token Ring - 16mb Token Ring - 4mb LocalTalk Other... If other, specify: 2/3/2009Δικτυακός Προγραμματισμός19

20 (1) Περιέχει τις υπόλοιπες επιλογές: –Simple text fields  text –Password fields  password –Radio buttons  radio –Check boxes  checkbox –Submit buttons  submit –Reset buttons  reset 2/3/2009Δικτυακός Προγραμματισμός20

21 (2) Τα πιο κοινά attributes για το 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

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

23 (4) reset –Απεικονίζεται ως push button το οποίο όταν πατηθεί επαναφέρει τα στοιχεία της φόρμας στην αρχική τους τιμή submit –Απεικονίζεται ως push button το οποίο όταν πατηθεί στέλνει τα δεδομένα της φόρμας στον server Παράδειγμα: Yes. No. 2/3/2009Δικτυακός Προγραμματισμός23

24 Παράδειγμα Φόρμας με πίνακα Name: Street Address: City: 2/3/2009Δικτυακός Προγραμματισμός24

25 Παράδειγμα Φόρμας με λίστα What are your three favorite books? 2/3/2009Δικτυακός Προγραμματισμός25

26 Check Boxes και Radio Buttons Χρήσιμα στοιχεία μιας φόρμας. Είναι απαραίτητη η σωστή και κατανοητή τοποθέτηση τους Αυτή μπορεί να γίνει με έναν από τους κάτωθι τρόπους: –οριζόντια –κατακόρυφη σε λίστα –τοποθέτηση σε πλέγμα 2/3/2009Δικτυακός Προγραμματισμός26

27 Παράδειγμα Check Boxes και Radio Buttons (κατακόρυφη λίστα) What machines do you work on? Macintosh Pc Unix Workstation Sun SGI NeXT AIX Linux Other... 2/3/2009Δικτυακός Προγραμματισμός27

28 HTML Editors Windows –HTML – Kit –http://www.chami.com/html-kit/http://www.chami.com/html-kit –CoffeeCup Free HTML Editor –http://www.coffeecup.com/free-editor/http://www.coffeecup.com/free-editor Linux –Quanta –Bluefish Mac OS X –XCode 2/3/2009Δικτυακός Προγραμματισμός28

29 HTML Tutorials Στο site του μαθήματος w3schools –http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asp 2/3/2009Δικτυακός Προγραμματισμός29

30 Ερωτήσεις 2/3/2009Δικτυακός Προγραμματισμός30


Κατέβασμα ppt "HTML Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google