Η γλώσσα μορφοποίησης υπερκειμένου HTML Αννα Γεωργιάδου Μάθημα: Εισαγωγικά Θέματα WWW Πρόγραμμα Μεταπτυχιακών Σπουδών Δυνητικές Κοινότητες: Κοινωνιο-Ψυχολογικές Προσεγγίσεις και Τεχνικές Εφαρμογές
Τι είναι η HTML HTML: Hyper Text Mark-up Language Γλώσσα προγραμματισμού/«παρουσίασης» για τη δημουργία ιστοσελίδων Mark-up: κωδικοποίηση κειμένου μαζί με πληροφορίες σχετικά με τη δομή και την εμφάνισή του HTML 4 [HTML] is an SGML (Standard Generalized Markup Language) application conforming to International Standard ISO 8879, and is widely regarded as the standard publishing language of the World Wide Web. Άννα Γεωργιάδου
HTML 1989: Ο Tim Berners-Lee επινοεί την HTML στο CERN (European Laboratory for Particle Physics, Geneva, Switzerland) SGML (Standard Generalized Markup Language): περιγραφή κειμένου σύμφωνα με τη δομή του και ανεξάρτητα από την εμφάνισή του HTML CSS Άννα Γεωργιάδου
Ισχύον Πρότυπο Το πρότυπο HTML και όλα τα σχετικά με το web πρότυπα αναπτύσσονται από το World Wide Web Consortium To πιο πρόσφατο πρότυπο της HTML είναι η HTML 4.01- αναθεώρηση της HTML 4.0 (18 Δεκεμβρίου 1997) Tag= Μάτια Attribute= Πράσινο Άννα Γεωργιάδου
Λειτουργία της HTML Ορίζει τη δομή και τη θέση των στοιχείων (elements) που αποτελούν ένα web αρχείο Όλα τα στοιχεία προσδιορίζονται από ετικέτες (tags) που δίνουν στους browsers οδηγίες για το πως θα απεικονίσουν το περιεχόμενο. Οι ίδιες οι ετικέτες δεν εμφανίζονται. Tag= Μάτια Attribute= Πράσινο Άννα Γεωργιάδου
Tags and Attributes Tag (ετικέτα) <on></off> Άννα Γεωργιάδου
Elements- Έννοιες Περιέχουν Αρχή – Τέλος Ανοίγουν – Κλείνουν Μπορούν να ενσωματωθούν το ένα στο άλλο Άννα Γεωργιάδου
Elements- Παράδειγμα Κώδικας: Ο καιρός είναι <b><i>καταπληκτικός</i></b>σήμερα Εμφάνιση: Ο καιρός είναι καταπληκτικός σήμερα Άννα Γεωργιάδου
Attributes Τα attributes αποδίδουν χαρακτηριστικά στις ετικέτες, δηλαδή διαφοροποιούν ή επεκτείνουν την ετικέτα Σύνταξη: <element attribute=“value”>Διαφοροποιημένο κείμενο</element> Παράδειγμα: <font color=“red”>Κόκκινη γραμματοσειρά</font> Άννα Γεωργιάδου
Document Type Definitions (DTD) Εγκυρότητα αρχείου (συμφωνo με το πρότυπο HTML) Προσδιορίζεται πρώτο στο αρχείο 3 κατηγορίες HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Άννα Γεωργιάδου
Δομή αρχείου HTML Δύο κύρια τμήματα head: πληροφορίες για το αρχείο (τίτλος, meta πληροφορίες που περιγράφουν τα περιεχόμενα) body: περιεχόμενα του αρχείου- αυτό που εμφανίζεται στον browser Άννα Γεωργιάδου
Παράδειγμα κώδικα HTML (1) <head> <title> Ο τίτλος της πρώτης HTML σελίδας </title> </head> <body> Η πρώτη HTML σελίδα </body> </html> Άννα Γεωργιάδου
Αποτέλεσμα (1)
Header Ορίζεται από το <head> και περιγράφει το HTML αρχείο <title>: το πιο συχνά χρησιμοποιούμενο και το πλέον απαραίτητο <base>: ορίζει την κύρια τοποθεσία του αρχείου και χρησιμεύει ως αναφορά για όλα τα pathnames και links <link>: ορίζει τη σχέση του παρόντος αρχείου με ένα άλλο αρχείο <meta>: παρέχει πληροφορίες για το αρχείο, όπως λέξεις-κλειδιά <script>: προστίθεται αν θέλουμε να χρησιμοποιήσουμε JavaScript, VBScript <style>: για ενσωμάτωση CSS (Cascading Style Sheets)
Body Ορίζεται από την ετικέτα <body> και σχεδιάστηκε για να οριοθετεί το κυρίως σώμα του HTML αρχείου. <body bgcolor=“color” text=“color” link=“color” vlink=“color” alink=“color”> <body background=“background.gif”> <body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>
Μορφοποίηση Κειμένου 1 Παράγραφοι και επικεφαλίδες Απεικόνιση κειμένου Οι σχετικές με τη μορφοποίηση ετικέτες ορίζουν πως θα εμφανιστεί το κείμενο στον browser Παράγραφοι και επικεφαλίδες Απεικόνιση κειμένου Απόσταση και θέση χαρακτήρων Λίστες Άννα Γεωργιάδου
Μορφοποίηση Κειμένου 2 <p>, <br>, <h1>, <h2>, .., <h6> <b>, <i>, <u> <font>,<basefont> <big>, <small> <center>, <left>, <right> Άννα Γεωργιάδου
Lists Tags Χρησιμοποιούνται για να δημιουργήσουμε λίστες Unordered Lists: “bullets”<ul> Ordered Lists: με κάποιου είδους αρίθμηση<ol> Definition Lists: για ορισμούς<dt><dl> Άννα Γεωργιάδου
Παράδειγμα κώδικα HTML (2) <head> <title> Ο τίτλος της δεύτερης HTML σελίδας </title> </head> <body> <center> <h2>Η δεύτερη HTML σελίδα</h2> <p> </center> <b><i>Παράδειγμα unordered list</i></b> <ul> <li>Δευτέρα</li> <li>Τρίτη</li> <li>Τετάρτη</li> <li>Πέμπτη</li> <li>Παρασκευή</li> </ul> <b><i>Παράδειγμα ordered list</i></b> <ol> <li>Γνωστική Ψυχολογία </li> <li>Ψυχολογία του Κυβερνοχώρου</li> <li>Κοινωνιολογία του Κυβερνοχώρου</li> <li>Εισαγωγικά Θέματα WWW</li> <li>Δυνητική Πραγματικότητα - Βασικές Αρχές</li> </ol> <b><i>Παράδειγμα definition list</i></b><p> <dt>HTML <dd>Hypertext Mark-up Language</dd> </dt> </body> </html>
Αποτέλεσμα (2)
Hyperlink Tags 1 Συνδέουν έναν πόρο με έναν άλλο Δίνουν τη δυνατότητα να δημιουργήσουμε έναν σύνδεσμο (link) προς άλλη σελίδα, προς διαφορετικό μέρος της ίδιας σελίδας, προς ένα αρχείο, προς αποστολή e-mail κ.α. The "url" value also include ftp, gopher, email, telnet, and newsgroup addresses. Άννα Γεωργιάδου
Hyperlink Tags 2 HREF= Hypertext Reference <a href=“url” target=“_blank”>Απεικόνιση συνδέσμου</a> Εξωτερικά Απόλυτα: http://www.panteion.gr/web/vr.html Σχετικά: ../index.html Εσωτερικά <a name=“point”>Specific</a> και <h1 id=“point”>Specific</a> Ε-mail, ftp, telnet, newsgroup addresses, files Imagemaps <map> Άννα Γεωργιάδου
Table Tags Αρχικά αναπτύχθηκαν για να παρουσιάζουν γραμμές και στήλες για δεδομένα ενός πίνακα. Γρήγορα, όμως, αναπτύχθηκαν ως ένα εργαλείο για να ελεγχθεί η παρουσίαση της σελίδας <table>, <caption>,<tr>,<td> <col> Άννα Γεωργιάδου
Images Tags Xρησιμοποιούνται για την εισαγωγή εικόνων, οριζόντιων γραμμών (rules) και multimedia αντικειμένων στο αρχείο <img> <hr> <object> Άννα Γεωργιάδου
Σελίδα HTML (3)
Kώδικας σελίδας HTML (3) <head> <title> Ο τίτλος της τρίτης HTML σελίδας </title> </head> <body> <h2>Η τρίτη HTML σελίδα</h2> <p> <table border=0> <tr><td> </td></tr> <tr><td><img src="/docs/tim.jpg" alt="Tim Berners-Lee"></td></tr> <tr><td><font size=4>O Tim Berners-Lee, Εφευρέτης του Web και Διευθυντής του <a href="http://www.w3.org" target="new">World Wide Web Consortium</a></font></td> </tr> </table> </body> </html>
Το μέλλον της HTML XHTML: EXtensible HyperText Markup Language Υπάρχουσα HTML, αναθεωρημένη και βελτιωμένη ως προς τους κανόνες της XML (EXtensible Markup Language) Άννα Γεωργιάδου
<!– Thank You --> Άννα Γεωργιάδου