Transcript html
Ιστοσελίδες – Δημιουργία Δικτυακού Τόπου http://pps.aua.gr/ Τζικόπουλος Παναγιώτης, Πληροφορικός, Κεντρικό Γραφείο Υποστήριξης Εκπαιδευτικού Έργου Τρίτη 11/12/2007 Γεωπονικό Πανεπιστήμιο Αθηνών 1 Περιεχόμενα Τρίτη 11/12/2007 1 Η Γλώσσα Σήμανσης HTML 2 Ετικέτες – Παράμετροι HTML 3 Δημιουργία Πινάκων 4 Παράδειγμα Dreamweaver 2 Τζικόπουλος Παναγιώτης Εισαγωγικές Παρατηρήσεις Καλά ορισμένη σύνταξη και πρότυπα. LANGUAGE Πρόσθεση σημαδιών για την υπόδειξη του ρόλου διαφορετικών τμημάτων του εγγράφου. ΜARKUP Το περιεχόμενο αρχικά ήταν κατά κύριο λόγο κείμενο Σύνδεσμοι ανάμεσα σε έγγραφα που δημιουργούν τον WWW. Τρίτη 11/12/2007 ΤEXT ΗYPER 3 Τζικόπουλος Παναγιώτης Ιστορική αναδρομή της HTML 1991 Τρίτη 11/12/2007 1994 1997 4 1999 Τζικόπουλος Παναγιώτης Η HTML έχει σχεδιασθεί με σκοπό: 1 Τη στοιχειοθέτηση (μορφοποίησηformating) ηλεκτρονικών κειμένων Τρίτη 11/12/2007 2 Την αναμετάδοση τους στο διαδίκτυο 5 3 Την αναπαράσταση τους σε διαφορετικού είδους οθόνες Τζικόπουλος Παναγιώτης Προσεγγίσεις για τη Συγγραφή HTML Σελίδων Raw HTML – Χρήση συντάκτη κειμένου Πλεονεκτήματα Απλή και καθαρή κατασκευές Μειονεκτήματα Βαρετή & δύσκολη για πολύπλοκες What-you-see-is-what-you-get (WYSIWYG) π.χ. Dreamweaver 2007 (Macromedia) FrontPage (Microsoft) Pagemill (Adobe) - Επαγγελματική επιλογή - Home Pages & Μικρά sites - Home Pages & Μικρά sites Πλεονεκτήματα - Δεν είναι αναγκαία η κατανόηση HTML - Εύκολη η παραγωγή απλών εγγράφων - Γρήγορη η δημιουργία πρωτότυπου για ένα σχέδιο - Εργαλεία προσφέρουν βοήθεια για πιο πολύπλοκες εργασίες Τρίτη 11/12/2007 6 Μειονεκτήματα - Πλαδαρός κώδικας μη αναγκαίες ετικέτες - Τα εργαλεία υστερούν έναντι των προτύπων - Σημαντικό κόστος Τζικόπουλος Παναγιώτης Δομή Εγγράφου HTML HTML HEAD Η επικεφαλίδα (header): Περιέχει πληροφορίες σχετικές με το έγγραφο (συνήθως δεν εμφανίζονται). Τρίτη 11/12/2007 BODY Το σώμα (body): Τα περιεχόμενα του εγγράφου. 7 Τζικόπουλος Παναγιώτης Ένα Απλό HTML Έγγραφο <html> <!– Η πρώτη μας σελίδα --> <head> <title>Welcome to AUA!</title> </head> <body> <p>Welcome to AUA!</p> </body> </html> Τρίτη 11/12/2007 8 Τζικόπουλος Παναγιώτης Ετικέτες HTML Μια ετικέτα (tag) html έχει: Ένα όνομα - φανερώνει τη λειτουργία της / το ρόλο της (Υποχρεωτικό). Μια λίστα από παραμέτρους (attributes) – προσδιορίζουν τη λειτουργία της ετικέτας (Προαιρετική). Οι ετικέτες εσωκλείονται από τους χαρακτήρες ‘<‘ και ‘>’. Δε γίνεται διάκριση κεφαλαίων και πεζών γραμμάτων στα ονόματα και στις παραμέτρους των ετικετών. Τρίτη 11/12/2007 9 Τζικόπουλος Παναγιώτης Παράμετροι και Τιμές Οι παράμετροι (attributes) επεκτείνουν ή τροποποιούν τη λειτουργία μιας ετικέτας: Περιέχουν διευκρινιστικές πληροφορίες. Είναι δυνατό να εμφανιστούν σε ετικέτες αρχής ή σε μονές ετικέτες, αλλά ποτέ σε ετικέτες τέλους. Η διάταξη των παραμέτρων δεν έχει σημασία. Δε γίνεται διάκριση κεφαλαίων και πεζών γραμμάτων στα ονόματα των παραμέτρων (γίνεται όμως στις τιμές τους). Οι περισσότερες παράμετροι έχουν μια τιμή (value) η οποία εμφανίζεται μετά από το σύμβολο της ισότητας. Γενική μορφή: “παράμετρος = τιμή παραμέτρου”. Είναι δυνατό να υπάρχουν πολλές παράμετροι που διαχωρίζονται μεταξύ τους με κενό. Τρίτη 11/12/2007 10 Τζικόπουλος Παναγιώτης Βασικά τμήματα μιας HTML σελίδας Επικεφαλίδες Παράγραφοι Συνδέσμους HTML Εικόνες Πίνακες Φόρμες Λίστες(Αριθμημένες και μη) Τρίτη 11/12/2007 11 Τζικόπουλος Παναγιώτης Το Τμήμα HEAD Title: Oρίσμος του τίτλου της σελίδας. Script: Kαθορισμός της scripting γλώσσας. Style: Kαθορισμός style sheet. Meta: Καθορισμός ζεύγους πληροφοριών (όνομα/τιμή) π.χ. εισαγωγή λέξεων κλειδιών. Link: Ορισμός σχέσεων με άλλα κείμενα. Τρίτη 11/12/2007 12 Τζικόπουλος Παναγιώτης Το Τμήμα BODY (1) Παράμετροι: bgcolor: Το χρώμα του φόντου της σελίδας. text: Το χρώμα των χαρακτήρων του κειμένου. link / vlink / alink: Το χρώμα των links background: Το url της εικόνας που θα εμφανίζεται στο φόντο της σελίδας Παράδειγμα: <body bgcolor=blue text=orange> blue = #0000FF Τρίτη 11/12/2007 13 Τζικόπουλος Παναγιώτης Το Τμήμα BODY (2) Στοιχεία ορισμού περιοχής: Επικεφαλίδες – <h1></h1>, …, <h6></h6> Παράγραφοι - <p></p> Λίστες - <ul>, <ol> <dl> Φόρμες - <form></form> Πίνακες - <table></table> Οριζόντιες γραμμές - <hr> Στοιχεία ορισμού κειμένου: Font style elements - <b></b>, <i></i>, <u></u> Linking - <a></a> Εικόνες - <img> Διακοπές κειμένου - <br> Τρίτη 11/12/2007 14 Τζικόπουλος Παναγιώτης Επικεφαλίδες – h1, …, h6 <body> <h1>Level 1 Header</h1> <h2 align=center>Level 2 header</h2> <h3>Level 3 header</h3> <h4 align=right>Level 4 header</h4> <h5>Level 5 header</h5> <h6 align=left>Level 6 header</h6> </body> Τρίτη 11/12/2007 15 Τζικόπουλος Παναγιώτης Παράγραφοι Mορφοποίηση Kειμένου <body> <hr> <p> All <i>information</i> from this <b>presentation</b> is <strong>©</strong> <u>aua</u> & </p> <p><del>You know that 2<sup>10</sup> = 1024 </del> <br> But you <sub>sometimes</sub> make mistakes.</p> <p>Did you know how to write this <strong> ¼</strong> ??? </p> <hr> </body> Τρίτη 11/12/2007 16 Τζικόπουλος Παναγιώτης Μη Διατεταγμένες Λίστες <ul> <li>AltaVista</li> <li type=disc>Yahoo</li> <li type=square>Google</li> <li type=circle>MSN Search</li> </ul> Τρίτη 11/12/2007 17 Τζικόπουλος Παναγιώτης Διατεταγμένες Λίστες <ol> <li>AltaVista</li> <li type=1>Yahoo</li> <li type=a>Google</li> <li type=I>MSN Search </li> </ol> Τρίτη 11/12/2007 18 Τζικόπουλος Παναγιώτης Λίστες Ορισμού <dl> <dt>AltaVista<dd><i>Αρκετά καλή</i> <dt>Yahoo<dd><i>Κατηγοριοποίηση από ανθρώπους</i> <dt>Google<dd><i>Το καλύτερο </i> <dt>MSN Search<dd><i>Πολύ καλή</i> </dl> Τρίτη 11/12/2007 19 Τζικόπουλος Παναγιώτης Φωλιασμένες Λίστες <ul> <li>You have access to new media as it becomes public: <ul> <li>New games</li> <li>New applications <ul> <li>For business</li><li>For pleasure</li> </ul> </li> <li>Around the clock news</li> <li>Programming <ul> <li>XML</li><li>Java</li> </ul> </li> </ul> </li> <li>Keeping in touch with old friends</li> </ul> Τρίτη 11/12/2007 20 Τζικόπουλος Παναγιώτης Δημιουργία Υπερσυνδέσμων <a href = "http://www.google.com">Google</a> <a href = "links2.html">Μια άλλη σελίδα στον ίδιο φάκελο</a> <a href = "mailto:[email protected]">email me</a> <a href = "#bottom">Τέλος της σελίδας</a> <a name="bottom"><h2>bottom</h2> Τρίτη 11/12/2007 21 Τζικόπουλος Παναγιώτης Εικόνες <img src = "stoneage2.jpg" alt = "New email"> <a href = “../4 contact.html"> <img src = "stoneage2.jpg" alt = "New email"></a> <img border = “0” src = "stoneage2.jpg"> Τρίτη 11/12/2007 22 Τζικόπουλος Παναγιώτης Πίνακες <table border = "1" width = "40%" align = "center" > <caption>Here is a small sample table</caption> <tr> <th>This is the head.</th> </tr> <tr> <td>This is the body.</td> </tr> </table> Τρίτη 11/12/2007 23 Τζικόπουλος Παναγιώτης H Ετικέτα Table – Παράμετροι align = {left, right, center}: Η οριζόντια τοποθέτηση του πίνακα. width = {452, 50%}: Το πλάτος του πίνακα. border = {0,1,…}: Το πλάτος του περιγράμματος. cellspacing = {0,1,…}: Το κενό μεταξύ γειτονικών κελιών. cellpadding: Το κενό μεταξύ κελιού και περιεχομένων. <caption align = {top, bottom}>…</caption> Τρίτη 11/12/2007 24 Τζικόπουλος Παναγιώτης Ένας Πολύπλοκος Πίνακας <table border = "1"> <tr> <th rowspan = "2"><img src = "camel.gif"></th> <th colspan = "4" valign = "top"> <h1>Camelid comparison</h1></th> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </tr>… </table> Τρίτη 11/12/2007 25 Τζικόπουλος Παναγιώτης tr / th / td – Παράμετροι nowrap: Ισοδύναμο με το   (κενός χαρακτήρας). rowspan = {int}: Οι γραμμές που καταλαμβάνονται από το κελί. colspan: Οι στήλες που καταλαμβάνονται. width / height: Το πλάτος / ύψος του κελιού. align / valign: Οριζόντια / κάθετη ευθυγράμμιση των περιεχομένων. bgcolor tr – align & valign = {top, middle, bottom} Τρίτη 11/12/2007 26 Τζικόπουλος Παναγιώτης Φόρμες <form method = "post" action = "formmail.asp"> <input type = "hidden" name = "subject" value = "Feedback Form"> Name: <input name = "name" type = "text" size = "25"> <input type = "submit" value = "Submit Your Entries"> <input type = "reset" value = "Clear Your Entries"> </form> Τρίτη 11/12/2007 27 Τζικόπουλος Παναγιώτης Η Ετικέτα Form – Παράμετροι action: Ορίζει το url που θα χρησιμοποιηθεί από τον εξυπηρετητή για να επεξεργαστεί τα δεδομένα της φόρμας (συνήθως κάποιο σενάριο). method = {get, post}: Ορίζει τη μέθοδο αποστολής των περιεχομένων της φόρμας. get: Στέλνει τα περιεχόμενα στο url. post: Τα στέλνει στο body (περισσότερα δεδομένα). enctype: Καθορίζει τον τύπο αποκωδικοποίησης των περιεχομένων. Τρίτη 11/12/2007 28 Τζικόπουλος Παναγιώτης Μία Πολύπλοκη Φόρμα <form method = "post" action = " formmail.asp"> Comments: <textarea name = "comments" rows = "4" cols ="36“ > Hello to our lesson!</textarea> Email Address: <input name = "email" type = "password" size = "25"> Site design <input name = "thingsliked" type = "checkbox" value = "Design">Links <input name = "thingsliked" type = "checkbox" value = "Links">Ease of use <input name = "thingsliked" type = "checkbox" value = "Ease"> </form> Τρίτη 11/12/2007 29 Τζικόπουλος Παναγιώτης Φόρμες – Χαρακτηριστικά input: Παίρνει διάφορες παραμέτρους. Απαγορεύεται να υπάρχει ετικέτα τέλους (</input>). textarea: Για πεδία κειμένου πολλαπλών γραμμών. rows / columns </textarea> select: Μονής ή πολλαπλής επιλογής μενού. option - selected </select> Τρίτη 11/12/2007 30 Τζικόπουλος Παναγιώτης Φόρμες – Ετικέτα Input / Παράμετρος Type Καθορίζει τον τύπο του πεδίου εισόδου. text: Kείμενο μίας γραμμής – size=30. password: Oμοιο με τον τύπο text, αλλά απεικονίζει τον χαρακτήρα * - maxlength. checkbox: Δημιουργεί ζεύγος ονόματος/τιμής, υποστηρίζονται πολλαπλές τιμές – checked. radio: Δέχεται μόνο μία τιμή, μία ομάδα επιλογών έχει το ίδιο όνομα. submit: Αποστολή δεδομένων. reset: “Καθαρίζει” τα περιεχόμενα. Τρίτη 11/12/2007 31 Τζικόπουλος Παναγιώτης Cascading Style Sheets Καθορίζουν το style, τη δομή και τη θέση των στοιχείων μέσα στο αρχείο. Κάνουν εφικτό το διαχωρισμό της εμφάνισης των δεδομένων και των ίδιων των δεδομένων. Σύνταξη: selector {property: value; property2: value2} – selector : html tag – {body, p, h1,…} – property : το χαρακτηριστικό που θέλουμε να αλλάξουμε (color, fontfamily, text-align) Τρίτη 11/12/2007 32 Τζικόπουλος Παναγιώτης Διαδοχικά Φύλλα Στυλ Με τον ορισμό αυτών μέσα σε μια βασική ετικέτα της γλώσσας HTML Με τον ορισμό αυτών, στο τμήμα του HTML που περικλείεται από την ετικέτα <head> και συγκεκριμένα με χρήση της ετικέτας <style> Τρόποι με τους οποίους είναι δυνατή η εφαρμογή των CSS σε ένα HTML έγγραφο Με τον ορισμό αυτών σε εξωτερικά αρχεία αρχεία, τα οποία ονομάζονται Φύλλα Στυλ (StyleSheets) Τρίτη 11/12/2007 33 Τζικόπουλος Παναγιώτης http://pps.aua.gr Τρίτη 11/12/2007 Γεωπονικό Πανεπιστήμιο Αθηνών 34