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

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

Η γλώσσα μορφοποίησης υπερκειμένου HTML Αννα Γεωργιάδου Μάθημα: Εισαγωγικά Θέματα WWW Πρόγραμμα Μεταπτυχιακών Σπουδών Δυνητικές Κοινότητες: Κοινωνιο-Ψυχολογικές.

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


Παρουσίαση με θέμα: "Η γλώσσα μορφοποίησης υπερκειμένου HTML Αννα Γεωργιάδου Μάθημα: Εισαγωγικά Θέματα WWW Πρόγραμμα Μεταπτυχιακών Σπουδών Δυνητικές Κοινότητες: Κοινωνιο-Ψυχολογικές."— Μεταγράφημα παρουσίασης:

1 Η γλώσσα μορφοποίησης υπερκειμένου HTML Αννα Γεωργιάδου Μάθημα: Εισαγωγικά Θέματα WWW Πρόγραμμα Μεταπτυχιακών Σπουδών Δυνητικές Κοινότητες: Κοινωνιο-Ψυχολογικές Προσεγγίσεις και Τεχνικές Εφαρμογές

2 Τι είναι η HTML •HTML: Hyper Text Mark-up Language •Hypertext: Υπερκείμενο •Γλώσσα προγραμματισμού/«παρουσίασης» για τη δημουργία ιστοσελίδων •Mark-up: κωδικοποίηση κειμένου μαζί με πληροφορίες σχετικά με τη δομή και την εμφάνισή του Άννα Γεωργιάδου

3 HTML •1989: Ο Tim Berners-Lee επινοεί την HTML στο CERN (European Laboratory for Particle Physics, Geneva, Switzerland) •SGML (Standard Generalized Markup Language): περιγραφή κειμένου σύμφωνα με τη δομή του και ανεξάρτητα από την εμφάνισή του •HTML •CSS Άννα Γεωργιάδου

4 Ισχύον Πρότυπο •Το πρότυπο HTML και όλα τα σχετικά με το web πρότυπα αναπτύσσονται από το World Wide Web Consortium •To πιο πρόσφατο πρότυπο της HTML είναι η HTML αναθεώρηση της HTML 4.0 (18 Δεκεμβρίου 1997) Άννα Γεωργιάδου

5 Λειτουργία της HTML •Ορίζει τη δομή και τη θέση των στοιχείων (elements) που αποτελούν ένα web αρχείο •Όλα τα στοιχεία προσδιορίζονται από ετικέτες (tags) που δίνουν στους browsers οδηγίες για το πως θα απεικονίσουν το περιεχόμενο. Οι ίδιες οι ετικέτες δεν εμφανίζονται. Άννα Γεωργιάδου

6 Tags and Attributes •Tag (ετικέτα) •Attribute (απόδοση χαρακτηριστικού στην ετικέτα) Άννα Γεωργιάδου

7 Elements- Έννοιες •Περιέχουν •Αρχή – Τέλος •Ανοίγουν – Κλείνουν •Μπορούν να ενσωματωθούν το ένα στο άλλο Άννα Γεωργιάδου

8 Elements- Παράδειγμα Κώδικας: •Ο καιρός είναι καταπληκτικός σήμερα Εμφάνιση: •Ο καιρός είναι καταπληκτικός σήμερα Άννα Γεωργιάδου

9 Attributes •Τα attributes αποδίδουν χαρακτηριστικά στις ετικέτες, δηλαδή διαφοροποιούν ή επεκτείνουν την ετικέτα •Σύνταξη: Διαφοροποιημένο κείμενο •Παράδειγμα: Κόκκινη γραμματοσειρά Άννα Γεωργιάδου

10 Document Type Definitions (DTD) •Εγκυρότητα αρχείου (συμφωνo με το πρότυπο HTML) •Προσδιορίζεται πρώτο στο αρχείο •3 κατηγορίες –HTML 4.01 Strict –HTML 4.01 Transitional –HTML 4.01 Frameset • Άννα Γεωργιάδου

11 Δομή αρχείου HTML Δύο κύρια τμήματα •head: πληροφορίες για το αρχείο (τίτλος, meta πληροφορίες που περιγράφουν τα περιεχόμενα) •body: περιεχόμενα του αρχείου- αυτό που εμφανίζεται στον browser Άννα Γεωργιάδου

12 Παράδειγμα κώδικα HTML (1) Ο τίτλος της πρώτης HTML σελίδας Η πρώτη HTML σελίδα Άννα Γεωργιάδου

13 Αποτέλεσμα (1)

14 Header Ορίζεται από το και περιγράφει το HTML αρχείο • : το πιο συχνά χρησιμοποιούμενο και το πλέον απαραίτητο • : ορίζει την κύρια τοποθεσία του αρχείου και χρησιμεύει ως αναφορά για όλα τα pathnames και links • : ορίζει τη σχέση του παρόντος αρχείου με ένα άλλο αρχείο • : παρέχει πληροφορίες για το αρχείο, όπως λέξεις- κλειδιά • : προστίθεται αν θέλουμε να χρησιμοποιήσουμε JavaScript, VBScript • : για ενσωμάτωση CSS (Cascading Style Sheets)

15 Body Ορίζεται από την ετικέτα και σχεδιάστηκε για να οριοθετεί το κυρίως σώμα του HTML αρχείου. •

16 Μορφοποίηση Κειμένου 1 Οι σχετικές με τη μορφοποίηση ετικέτες ορίζουν πως θα εμφανιστεί το κείμενο στον browser •Παράγραφοι και επικεφαλίδες •Απεικόνιση κειμένου •Απόσταση και θέση χαρακτήρων •Λίστες Άννα Γεωργιάδου

17 Μορφοποίηση Κειμένου 2 •,,,,.., •,, •, •,, Άννα Γεωργιάδου

18 Lists Tags •Χρησιμοποιούνται για να δημιουργήσουμε λίστες •Unordered Lists: “bullets” •Ordered Lists: με κάποιου είδους αρίθμηση •Definition Lists: για ορισμούς Άννα Γεωργιάδου

19 Παράδειγμα κώδικα HTML (2) Ο τίτλος της δεύτερης HTML σελίδας Η δεύτερη HTML σελίδα Παράδειγμα unordered list Δευτέρα Τρίτη Τετάρτη Πέμπτη Παρασκευή Παράδειγμα ordered list Γνωστική Ψυχολογία Ψυχολογία του Κυβερνοχώρου Κοινωνιολογία του Κυβερνοχώρου Εισαγωγικά Θέματα WWW Δυνητική Πραγματικότητα - Βασικές Αρχές Παράδειγμα definition list HTML Hypertext Mark-up Language

20 Αποτέλεσμα (2)

21 Hyperlink Tags 1 •Συνδέουν έναν πόρο με έναν άλλο •Δίνουν τη δυνατότητα να δημιουργήσουμε έναν σύνδεσμο (link) προς άλλη σελίδα, προς διαφορετικό μέρος της ίδιας σελίδας, προς ένα αρχείο, προς αποστολή κ.α. Άννα Γεωργιάδου

22 Hyperlink Tags 2 •HREF= Hypertext Reference • Απεικόνιση συνδέσμου •Εξωτερικά –Απόλυτα: –Σχετικά:../index.html •Εσωτερικά Specific και Specific •Ε-mail, ftp, telnet, newsgroup addresses, files •Imagemaps Άννα Γεωργιάδου

23 Table Tags •Αρχικά αναπτύχθηκαν για να παρουσιάζουν γραμμές και στήλες για δεδομένα ενός πίνακα. Γρήγορα, όμως, αναπτύχθηκαν ως ένα εργαλείο για να ελεγχθεί η παρουσίαση της σελίδας •,,, • Άννα Γεωργιάδου

24 Images Tags •Xρησιμοποιούνται για την εισαγωγή εικόνων, οριζόντιων γραμμών (rules) και multimedia αντικειμένων στο αρχείο • Άννα Γεωργιάδου

25 Σελίδα HTML (3)

26 Kώδικας σελίδας HTML (3) Ο τίτλος της τρίτης HTML σελίδας Η τρίτη HTML σελίδα   O Tim Berners-Lee, Εφευρέτης του Web και Διευθυντής του World Wide Web Consortium

27 Το μέλλον της HTML •XHTML: EXtensible HyperText Markup Language •Υπάρχουσα HTML, αναθεωρημένη και βελτιωμένη ως προς τους κανόνες της XML (EXtensible Markup Language) Άννα Γεωργιάδου

28 Άννα Γεωργιάδου


Κατέβασμα ppt "Η γλώσσα μορφοποίησης υπερκειμένου HTML Αννα Γεωργιάδου Μάθημα: Εισαγωγικά Θέματα WWW Πρόγραμμα Μεταπτυχιακών Σπουδών Δυνητικές Κοινότητες: Κοινωνιο-Ψυχολογικές."

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


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