Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Transcript

1 Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης

2 Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες οι πληροφορίες να φιλοξενούνται σε ένα σημείο, κάθε οντότητα (μεμονωμένο άτομο ή οργανισμός) που διαθέτει πληροφορίες τις οποίες θέλει να μοιραστεί με άλλους, τις αποθηκεύει στο δικό της υπολογιστή και επιτρέπει στους χρήστες του Internet να τις προσπελάζουν. Ο Παγκόσμιος Ιστός αποτελεί μια συλλογή από έγγραφα πολυμέσων. 2

3 Ο Παγκόσμιος ιστός www Είναι μια υπηρεσία του Internet Yπολογιστές σε παγκόσμιο επίπεδο προσφέρουν πληροφορίες για διάφορα θέματα Κάθε υπολογιστής χαρακτηρίζεται από μια μοναδική διεύθυνση π.χ. Αυτό που μένει στο χρήστη είναι να ξέρει σε πoια διεύθυνση θα βρει κάτι που τον ενδιαφέρει.

4 Υπηρεσία www Πελάτης (Client) Διακομιστής (Server)

5 Διακομιστής (Server) www Υπολογιστής που εκτελεί ειδικό λογισμικό (www server) Σταθερή σύνδεση στο δίκτυο Φιλοξενεί το περιεχόμενο (σελίδες) Παρέχει το περιεχόμενο σε πολλούς πελάτες ταυτόχρονα Πελάτες βρίσκονται σε διάφορα σημεία του διαδικτύου Έχει μοναδική διεύθυνση στο διαδίκτυο (DNS όνομα) π.χ.

6 Φυλλομετρητής Για να προσπελάσει κάποιος μια σελίδα στον Παγκόσμιο Ιστό χρειάζεται ένα πρόγραμμα φυλλομέτρησης, ή αλλιώς ένα φυλλομετρητή (browser), ο οποίος συνήθως αποτελείται από τρία μέρη: έναν ελεγκτή, μια μέθοδο, έναν ερμηνευτή 6

7 www Πελάτες Είναι κάθε υπολογιστής που συνδέεται στο διαδίκτυο Χρησιμοποιεί ειδικό πρόγραμμα για την περιήγηση στον παγκόσμιο ιστό H προσπέλαση σε μιά τοποθεσία (server) γίνεται μέσω της διεύθυνσης της τοποθεσίας

8 Πληροφορίες στο www Επιστημονικές Τεχνικές Νομικές Οικονομικές Εμπορικές (Διαφήμιση, Αγορές, Πωλήσεις) Τέχνη Τουρισμός - Ταξίδια - Αξιοθέατα Ανακοινώσεις και πληροφορίες Κρατών - Οργανισμών Διασκέδαση Παιχνίδια

9 Πρωτόκολλο μεταφοράς Υπερκειμένου (HTTP) Το Πρωτόκολλο Μεταφοράς Υπερκειμένου (Hypertext Transfer Protocol, ή HTTP) είναι ένα πρόγραμμα πελάτη-διακομιστή το οποίο χρησιμοποιείται για την προσπέλαση και τη μεταφορά εγγράφων του Παγκόσμιου Ιστού (World Wide Web). 9

10 Ενιαίος Εντοπιστής Πόρων (URL) Το HTTP χρησιμοποιεί έναν ειδικό τύπο διευθυνσιοδότησης που ονομάζεται Ενιαίος Εντοπιστής Πόρων (Uniform Resource Locator, ή URL), ο οποίος αποτελεί τον τυπικό τρόπο στο Internet για τον προσδιορισμό οποιουδήποτε είδους πληροφοριών 10

11 Τύποι Εγγράφων 11

12 Υπερκείμενο Ο Παγκόσμιος Ιστός χρησιμοποιεί την έννοια του υπερκειμένου (hypertext), δηλαδή εγγράφων που περιέχουν ειδικό κείμενο, λέξεις, και φράσεις, οι οποίες συνδέονται με άλλα έγγραφα που περιέχουν κείμενο, ήχο, ή βίντεο. Ένα έγγραφο υπερκειμένου στον Ιστό ονομάζεται σελίδα (page). Η κύρια σελίδα ενός οργανισμού ή ενός μεμονωμένου ατόμου ονομάζεται αρχική σελίδα (home page). 12

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

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

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

16 Tags and Attributes Tag (ετικέτα) Attribute (απόδοση χαρακτηριστικού στην ετικέτα)

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

18 Elements- Παράδειγμα Κώδικας: Ο καιρός είναι <b><i>καταπληκτικός</i></b>σήμερα Εμφάνιση: Ο καιρός είναι καταπληκτικός σήμερα

19 Attributes Τα attributes αποδίδουν χαρακτηριστικά στις ετικέτες, δηλαδή διαφοροποιούν ή επεκτείνουν την ετικέτα Σύνταξη: <element attribute= value >Διαφοροποιημένο κείμενο</element> Παράδειγμα: <font color= red >Κόκκινη γραμματοσειρά</font>

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

21 Παράδειγμα κώδικα HTML (1) <html> <head> <title> Ο τίτλος της πρώτης HTML σελίδας </title> </head> <body> Η πρώτη HTML σελίδα </body> </html>

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

23 Header Ορίζεται από το <head> και περιγράφει το HTML αρχείο <title>: το πιο συχνά χρησιμοποιούμενο και το πλέον απαραίτητο <base>: ορίζει την κύρια τοποθεσία του αρχείου και χρησιμεύει ως αναφορά για όλα τα pathnames και links <link>: ορίζει τη σχέση του παρόντος αρχείου με ένα άλλο αρχείο <meta>: παρέχει πληροφορίες για το αρχείο, όπως λέξειςκλειδιά <script>: προστίθεται αν θέλουμε να χρησιμοποιήσουμε JavaScript, VBScript <style>: για ενσωμάτωση CSS (Cascading Style Sheets)

24 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>

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

26 Μορφοποίηση Κειμένου 2 <p>, <br>, <h1>, <h2>,.., <h6> <b>, <i>, <u> <font>,<basefont> <big>, <small> <center>, <left>, <right>

27 Lists Tags Χρησιμοποιούνται για να δημιουργήσουμε λίστες Unordered Lists: bullets <ul> Ordered Lists: με κάποιου είδους αρίθμηση<ol> Definition Lists: για ορισμούς<dt><dl>

28 Παράδειγμα κώδικα HTML (2) <html> <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>

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

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

31 Hyperlink Tags 2 HREF= Hypertext Reference <a href= url target= _blank >Απεικόνιση συνδέσμου</a> Εξωτερικά Απόλυτα: Σχετικά:../index.html Εσωτερικά <a name= point >Specific</a> και <h1 id= point >Specific</a> Ε-mail, ftp, telnet, newsgroup addresses, files Imagemaps <map>

32 Table Tags Αρχικά αναπτύχθηκαν για να παρουσιάζουν γραμμές και στήλες για δεδομένα ενός πίνακα. Γρήγορα, όμως, αναπτύχθηκαν ως ένα εργαλείο για να ελεγχθεί η παρουσίαση της σελίδας <table>, <caption>,<tr>,<td> <col>

33 Images Tags Xρησιμοποιούνται για την εισαγωγή εικόνων, οριζόντιων γραμμών (rules) και multimedia αντικειμένων στο αρχείο <img> <hr> <object>

34 Σελίδα HTML (3)

35 Kώδικας σελίδας HTML (3) <html> <head> <title> Ο τίτλος της τρίτης HTML σελίδας </title> </head> <body> <h2>η τρίτη HTML σελίδα</h2> <p> <table border=0> <tr><td>&nbsp</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=" target="new">world Wide Web Consortium</a></font></td> </tr> </table> </body> </html>