Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος
HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα έγγραφα δεν είναι γλώσσα προγραμματισμού, όπως η C,C++, Java δεν είναι πρόγραμμα Διεθνές πρότυπο που χρησιμοποιείται για την «έκδοση» κειμένων στο Web Προγραμματισμός ιστοσελίδων 2
HTML Τα αρχεία HTML είναι απλά αρχεία κειμένου, με κατάληξη.htm ή.html Για την συγγραφή των αρχείων HTML μπορούμε να χρησιμοποιήσουμε από ένα απλό κειμενογράφο (π.χ. Notepad των Windows) μέχρι μια πολύπλοκη εφαρμογή (π.χ. Adobe Dreamweaver) Προγραμματισμός ιστοσελίδων 3
Ετικέτες (tags) Τα αρχεία HTML περιέχουν ειδικές προκαθορισμένες-δεσμευμένες λέξεις, οι οποίες ονομάζονται ετικέτες (tags) Οι ετικέτες περιγράφουν τον τρόπο με τον οποίο θα εμφανίζεται το αρχείο HTML από τον browser Δομή των ετικετών: <όνομα_ετικέτας> κείμενο </όνομα_ετικέτας> Προγραμματισμός ιστοσελίδων 4
Ετικέτες (tags) Τα αρχεία HTML περιέχουν ειδικές προκαθορισμένες-δεσμευμένες λέξεις, οι οποίες ονομάζονται ετικέτες (tags) Οι ετικέτες περιγράφουν τον τρόπο με τον οποίο θα εμφανίζεται το αρχείο HTML από τον browser Δομή των ετικετών: <όνομα_ετικέτας> κείμενο </όνομα_ετικέτας> π.χ. <HEAD> CD Store </HEAD> Στο όνομα_ετικέτας δεν γίνεται διάκριση μεταξύ κεφαλαίων ή πεζών (μη case-sensitive) π.χ. τα <HEAD>, <Head>, <head> είναι ισοδύναμα Προγραμματισμός ιστοσελίδων 5
Ετικέτες (tags) Στην HTML οι ετικέτες μπορεί να είναι ένθετες ετικέτες στο εσωτερικό άλλων ετικετών <p>hello from <font color= red >UOP</font></p> Οι ένθετες ετικέτες τερματίζουν με αντίστροφο τρόπο από αυτόν που δηλώνονται <HTML><head>CD Store</head></HTML> Ορθός τρόπος γραφής ένθετων ετικέτων <table> <tr> <td>ονοματεπώνυμο</td> </tr> </table> Προγραμματισμός ιστοσελίδων 6
Χαρακτηριστικά ετικετών Περιγράφουν με μεγαλύτερη λεπτομέρεια τον τρόπο εμφάνισης μιας ετικέτας Περισσότερα χαρακτηριστικά διαχωρίζονται μεταξύ τους με κενό Δομή του χαρακτηριστικού ετικέτας <όνομα_ετικέτας όνομα_χαρακτηριστικού = τιμή_χαρακτηριστικού> κείμενο </όνομα_ετικέτας> <όνομα_ετικέτας όνομα_χαρακτηριστικού_1 = τιμή_χαρακτηριστικού_1 όνομα_χαρακτηριστικού_2 = τιμή_χαρακτηριστικού_2 > κείμενο </όνομα_ετικέτας> <font color="red" size="5">hello from UOP</font> Προγραμματισμός ιστοσελίδων 7
Δομή εγγράφου HTML Αρχική ετικέτα η <HTML></HTML> αποτελείται από δύο ετικέτες <HEAD></HEAD> <BODY></BODY> Στο <HEAD> </HEAD> περιέχονται πληροφορίες όπως ο τίτλος της ιστοσελίδας Στο <BODY> </BODY> περιέχεται το σώμα του εγγράφου τι θα εμφανιστεί στο παράθυρο του browser Προγραμματισμός ιστοσελίδων 8
Ετικέτες στην HEAD Η ετικέτα <TITLE></TITLE> καθορίζει τον τίτλο της σελίδας HTML περιέχεται μέσα στην ετικέτα <HEAD</HEAD> Ο browser χρησιμοποιεί τον τίτλο (<TITLE>) εμφανίζεται στην «μπάρα τίτλου» του παραθύρου του browser χρησιμοποιείται ως όνομα στα bookmarks Το Google χρησιμοποιεί τον τίτλο για να ταξινομήσει την σελίδα Βασικός τρόπος διαφήμισης της σελίδας Μπορεί να μην λάβει υπόψη τον τίτλο αν δεν είναι ορθά ορισμένος Μη ορθή χρήση του τίτλου Η σελίδα μου Σελίδα 1 Ορθή χρήση τίτλου Ηλεκτρονικό κατάστημα πώλησης CDs Προγραμματισμός ιστοσελίδων 9
Ετικέτες στην HEAD Η ετικέτα <meta/> χρησιμοποιείται για την εισαγωγή μεταδεδομένων (metadata) στην επικεφαλίδα Χαρακτηριστικό "name" για τη δήλωση του ονόματος της ιδιότητας Χαρακτηριστικό "content" για τη δήλωση της τιμής της ιδιότητας Παράδειγμα: <meta name="author" content="nikos Papadopoulos"/> Η ετικέτα <meta/> αποτελεί πάντα μια κενή ετικέτα έχει μόνο χαρακτηριστικά Προγραμματισμός ιστοσελίδων 10
Ετικέτες στην HEAD Tα ονόματα χαρακτηριστικού «description» και «keywords» χρησιμοποιούνται από την Google για την ταξινόμηση και εύρεση σελίδων στο Web. Η διαδικασία εύρεσης εξετάζει την δοσμένη φράση με το description και τα keywords Το description και τα keywords δεν είναι ορατά στη σελίδα Παράδειγμα: <meta name="description" content="cd Store"/> <meta name="keywords" content= CD,store /> Προγραμματισμός ιστοσελίδων 11
Ετικέτες στην HEAD Το χαρακτηριστικό «http-equiv» της ετικέτας <meta/> καθορίζει στον πελάτη να συμπεριφερθεί σαν να έχει ήδη λάβει μια επικεφαλίδα http. Παράδειγμα: <meta http-equiv="content-type" content="text/html; charset=utf- 8" /> καθορίζει στον Server να ανακοινώσει στον πελάτη ότι η σελίδα είναι γραμμένη σε HTML με κωδικοποίηση utf-8. Χρήσιμο όταν η σελίδα διαβάζεται τοπικά (δεν υπάρχουν επικεφαλίδες http) Προγραμματισμός ιστοσελίδων 12
Επικεφαλίδες Στην HTML υπάρχουν έξι επίπεδα επικεφαλίδων, τα οποία δηλώνονται με την ετικέτα <Hn> </Hn>, όπου το n είναι ένας ακέραιος αριθμός από 1 έως και 6 Η σημαντικότητα των επικεφαλίδων ξεκινάει από την H1 (περισσότερο σημαντική) και φθίνει μέχρι την Η6 (λιγότερο σημαντική) <h1>hello from UOP</h1> <h2>hello from UOP</h2> <h3>hello from UOP</h3> <h4>hello from UOP</h4> <h5>hello from UOP</h5> <h6>hello from UOP</h6> Προγραμματισμός ιστοσελίδων 13
Ειδικές Ετικέτες Ετικέτα <p></p> Αλλαγή παραγράφου διαχωρισμός του κειμένου με κενές γραμμές Ετικέτα <hr> Οριζόντια γραμμή εμφάνιση μιας οριζόντιας γραμμής στο κείμενο Ετικέτα <br> Αλλαγή γραμμής <p>hello from University of Peloponnisou <br/>the course is called Web Programming <hr/> Introduction to HTML </p> Προγραμματισμός ιστοσελίδων 14
Σχόλια Ένα σχόλιο περιέχεται μεταξύ των <! και --> Μπορεί να περιλαμβάνει περισσότερες από μία γραμμή σχολίων Τα σχόλια αγνοούνται από τον browser Η πληροφορία που περιέχεται στα σχόλια δεν εμφανίζεται Χρησιμοποιείται για να κατανοήσει ο προγραμματιστής την σελίδα <p>hello from University of Peloponnisou <br/>the course is called Web Programming <hr/> Introduction to HTML <!- Introduction to CSS Introduction to XHTML --> </p> Προγραμματισμός ιστοσελίδων 15
Ετικέτες καθορισμού στυλ Ετικέτα <b></b> Έντονη γραφή Το κείμενο που περικλείεται εμφανίζεται με έντονη γραφή Ετικέτα <i></i> Πλάγια γραφή Το κείμενο που περικλείεται εμφανίζεται με πλάγια γραφή Ετικέτα <u></u> Υπογραμμισμένο κείμενο Ετικέτα <strike></strike> Διαγραμμένο κείμενο Ετικέτα <tt></tt> Το κείμενο εμφανίζεται σαν κείμενο από γραφομηχανή Προγραμματισμός ιστοσελίδων 16
Ετικέτες καθορισμού στυλ <p> Welcome to UOP <br/><b>welcome to UOP</b> <br/><i>welcome to UOP</i> <br/><u>welcome to UOP</u> <br/><strike>welcome to UOP</strike> <br/><tt>welcome to UOP</tt> </p> Προγραμματισμός ιστοσελίδων 17
Λίστες Μη αριθμημένες Η αρχή και ο τερματισμός μιας μη αριθμημένης λίστα δηλώνεται με την ετικέτα <ul>..</ul> Κάθε στοιχείο της λίστας δηλώνεται με την ετικέτα <li>..</li> το στοιχειό πρέπει να περιέχεται εντός της ετικέτας αυτής Κάθε στοιχείο της λίστας εμφανίζεται στον browser μετά από μια κουκίδα Οι δραστηριότητες του Πανεπιστημίου: <ul> <li>τουρνουά Μπάσκετ</li> <li>διαγωνισμός Χορού</li> <li>αυγώνες</li> </ul> Προγραμματισμός ιστοσελίδων 18
Λίστες Αριθμημένες Η αρχή και ο τερματισμός μιας αριθμημένης λίστα δηλώνεται με την ετικέτα <ol>..</ol> Κάθε στοιχείο της λίστας δηλώνεται με την ετικέτα <li>..</li> Κάθε στοιχείο της λίστας εμφανίζεται στον browser μετά από έναν αριθμό Ο αριθμός αυτός δηλώνει τη θέση του στοιχείου στη λίστα Οι δραστηριότητες του Πανεπιστημίου: <οl> <li>τουρνουά Μπάσκετ</li> <li>διαγωνισμός Χορού</li> <li>αυγώνες</li> </οl> Προγραμματισμός ιστοσελίδων 19
Λίστες Λίστα Ορισμών Επιτρέπει τη δημιουργία επεξηγήσεων διαφόρων ορισμών Δηλώνεται με την ετικέτα <DL> </DL> και περιέχει ζεύγη: τίτλος ορισμού επεξήγηση ορισμού Για τους τίτλους των ορισμών χρησιμοποιείται η ετικέτα <DT> </DT> Για τις επεξηγήσεις των ορισμών η ετικέτα <DD> </DD> Προγραμματισμός ιστοσελίδων 20