Web Design HTML, Frontpage, DreamWeaver μέρος α

ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου

Στόχοι Κεφαλαίου

     Σύγκριση μεταξύ Internet και του World Wide Web Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων HTML tags Περιγραφή Εργαλείων Δημιουργίας Ιστοσελίδων 2

Η ιστορία του WWW

   Το WWW ξεκίνησε το 1989 από το Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών, (CERN) στην Ελβετία.

Βασικός του σκοπός ήταν να προσφέρει στους επιστήμονες ένα μέσο προκειμένου να ανταλλάσσουν στοιχεία επιστημονικά δεδομένα και μελέτες, μέσω του διαδικτύου.

Η όλη προσπάθεια στηρίχτηκε στην υλοποίηση ενός μέσου που θα επιτρέπει την σύνδεση μεταξύ διαφορετικών εγγράφων.

3

Η ιστορία του WWW

   Το μέσο αυτό ονομάστηκε υπερκείμενο(Hyper text) Το 1994 κατασκευάστηκε το πρόγραμμα Mosaic, το οποίο έδινε την δυνατότητα στους χρήστες να προσπελαύνουν τις πληροφορίες που ήταν διαθέσιμες στο WWW με γραφικό τρόπο.

Στα επόμενα χρόνια το WWW έγινε το απόλυτο μέσο αναζήτησης πληροφοριών για εκατομμύρια χρήστες του διαδικτύου.

4

Το Διαδίκτυο και το WWW

    Η πλατιά χρήση του WWW δημιούργησε σύγχυση σε πολλούς χρήστες οι οποίοι ταύτισαν το WWW με το Internet.

Στην πραγματικότητα όμως είναι δύο διαφορετικά πράγματα.

Το Ιnternet αποτελεί το φυσικό χώρο στον οποίο διασυνδέονται εκατομμύρια Η/Υ από όλο τον κόσμο, Το WWW αποτελεί το εργαλείο με το οποίο μπορούμε να οργανώσουμε και να διαχειριστούμε τον τεράστιο όγκο πληροφοριών που έχει συσσωρευτεί στο διαδίκτυο.

5

Το Διαδίκτυο ως εργαλείο

     Αναζήτηση πληροφοριών. (Ειδήσεις, νέα, πρόσβαση σε διεθνείς οργανισμούς, σε βάσεις δεδομένων δημόσιας διοίκησης κλπ) Επικοινωνίας (ανταλλαγή μηνυμάτων, τηλεδιάσκεψη, τηλεφωνική συνομιλία, κλπ) Διενέργειας Συναλλαγών (Ηλεκτρονικό εμπόριο, ανταλλαγή αρχείων εγγράφων, τραπεζικές οικονομικές συναλλαγές κλπ) Δημιουργίας Διαδικτυακού Χώρου (προσωπικές σελίδες, εταιρικές τοποθεσίες κλπ) Διασκέδασης και Ψυχαγωγία (παιχνίδια, ραδιόφωνο, τηλεόραση κλπ).

6

World Wide Web

   To Web περιλαμβάνει κατανεμημένη πληροφορία, καθώς και το σχετικό λογισμικό που χρησιμοποιεί τα δίκτυα ως μέσο ανταλλαγής αυτής της πληροφορίας.

Μία

σελίδα Web

είναι ένα κείμενο που περιέχει ή αναφέρεται σε διάφορα είδη δεδομένων, όπως κείμενο, εικόνες, γραφικά και προγράμματα Οι σελίδες Web περιέχουν συνδέσμους σε άλλες σελίδες τις οποίες ο χρήστης μπορεί να επισκεφθεί 7

The World Wide Web

  Ένας

δικτυακός τόπος (Web Site)

είναι μία συλλογή σχετιζομένων σελίδων web To Internet είναι αυτό που επιτρέπει την επικοινωνία, αλλά το Web διευκολύνει την επικοινωνία, την κάνει παραγωγικότερη και περισσότερο διασκεδαστική 8

Πως κατασκευάζουμε ένα υπερκείμενο;

  Για την περιγραφή ενός υπερκειμένου χρησιμοποιούμε μια ειδική γλώσσα την Hyper Text Markup Language (HTML).

Η γλώσσα αυτή επιτρέπει στον συγγραφέα να διαμορφώσει ένα κείμενο το οποίο θα παρέχει συνδέσμους με άλλα έγγραφα και διάφορα αρχεία 9

Πως κατασκευάζουμε ένα υπερκείμενο;

   Τα υπερκείμενα που βρίσκονται στο WWW ονομάζονται ιστοσελίδες (web pages).

Το σύνολο των ιστοσελίδων αποτελούν το site ( δικτυακός τόπος).

Τα προγράμματα τα οποία απεικονίζουν τις ιστοσελίδες, επιτρέποντας μας την ξενάγηση μας στο διαδίκτυο ονομάζονται πλοηγοί ( Browsers), Π.χ Netscape, Internet Explorer, Mozzila, Opera 10

Web Browser

  Ένας

browser

είναι το λογισμικό   που στέλνει μία αίτηση για τη σελίδα Web που επιθυμούμε σε ένα ειδικό υπολογιστή Μόλις έρθει η σελίδα, την επιδεικνύει στην οθόνη Συχνά λέμε ότι επισκεπτόμαστε ένα δικτυακό τόπο, ως να είμασταν πράγματι εκεί  Στην πραγματικότητα, προσδιορίζουμε την πληροφορία που επιθυμούμε,και αυτή έρχεται σε εμάς 11

Web Browser

  Ο υπολογιστής που ανταποκρίνεται στις αιτήσεις για σελίδες Web λέγεται

Web server

Mία διεύθυνση Web είναι το κύριο μέρος του

Uniform Resource Locator (URL)

σε όλο τον κόσμο που προσδιορίζει την σελίδα που έχετε επιλέξει, ανάμεσα σε όλες τις σελίδες poy είναι διαθέσιμες 12

Φυλλομετρητής Web (Web Browser)

Σχήμα 16.2

Ένας φυλλομετρητής που αιτήται και λαμβάνει μία σελίδα web

13

Browsers: Internet Explorer

14

HTML

  Οι σελίδες WEB γράφονται σε μία γλώσσα που λέγεται

Hypertext Markup Language, HTML

O όρος αυτό.

markup language

πρωτόγονα σύμβολα της γλώσσα έχουν τη μορφή των

tags,

δηλώνει ότι τα τα οποία βάζουμε σε ένα κείμενο για την επισημείωση της πληροφορίας που είναι αποθηκευμένη σε ή 15

HTML

Σχήμα 16.2

Ένα επισημειωμένο κείμενο

16

HTML

Σχήμα 16.3

H σελίδα Student Dynamics στον Netscape Navigator

17

HTML

Το κείμενο HTML που αντιστοιχεί στην προηγούμενη σελίδα

18

HTML

   Τα tags περικλείονται από το μικρότερο και μεγαλύτερο < > Λέξεις όπως τα HEAD, TITLE, και BODY λέγονται elements και προσδιορίζουν τον τύπο του tag Tα tags, συχνά υπάρχουν ανά ζεύγη, π.χ. υπάρχει το αρχικό tag και το tag τέλους το 19

HTML

 O browser, προσδιορίζει τον τρόπο εμφάνισης μίας σελίδας βασισμένος στα tags    Αγνοεί τον τρόπο μορφοποίησης του HTML, δηλαδή τα enter, τα επιπλέον κενά και τις κενές γραμμές Λαμβάνει υπ’όψιν το πλάτος και το ύψος του παραθύρου του browser Εάν αλλάξετε το μέγεθος του παραθύρου τα περιεχόμενα της Web σελίδας θα αλλάξουν ώστε να προσαρμοστούν στο νέο μέγεθος 20

B ασικά tags στην HTML

  Τα tags (

. . .

) δηλώνουν κείμενο που αποτελεί ξεχωριστεί παράγραφο.

Τα tags (

. . . ) δηλώνουν ότι η περικλειόμενη πληροφορία θα πρέπει να κεντραριστεί στο παράθυρο του browser 21

B ασικά tags στην HTML β’

  Τα elements Β, Ι, U δηλώνουν ότι το περικλειόμενο κείμενο θα πρέπει να είναι σε μορφή bold, italic ή υπογραμμισμένο Το tag

---

χαράσσει μία οριζόντια γραμμή κατά μήκος της σελίδας 22

B ασικά tags στην HTML γ’

  Αν θέλω να δημιουργήσω μία λίστα στοιχείων:  Χρησιμοποιώ το UL το οποίο δηλώνει την μη διατεταγμένη λίστα, και το LI αναπαριστά ένα στοιχείο της λίστας Διάφορα elements χρησιμοποιούνται για να δηλώσουν επικεφαλίδες σε ένα κείμενο:  Υπάρχουν έξι προκαθορισμένα elements επικεφαλίδων στην HTML: H1, H2, H3, H4, H5 και H6 23

Εικόνες και σύνδεσμοι

 Πολλά tags μπορούν να περιέχουν επιπλέον πληροφορίες που δηλώνουν πως η περικλειόμενη πληροφορία πρέπει να επιδειχθεί  Μία εικόνα μπορεί να ενσωματωθεί σε ένα Web κείμενο με τη χρήση του στοιχείου (element) IMG, το οποίο έχει ως ιδιότητα (attribute) το αρχείο που θα επιδείξει  24

Εικόνες και σύνδεσμοι ( συνέχεια)

 Ένας σύνδεσμος προσδιορίζεται από το στοιχείo A, που σημαίνει anchor  To tag περιέχει την ιδιότητα που λέγεται HREF, και προσδιορίζει το URL του κειμένου στόχος  Παράδειγμα Documentation Central! 25

Διαδραστικές σελίδες Web

   Όταν πρωτο-σχεδιάστηκε η HTML, δεν υπήρχε τρόπος αλληλεπίδρασης με την πληροφορία και τις εικόνες μίας σελίδας Web Οι χρήστες επιθυμούσαν μία δυναμικότερη συμπεριφορά από το Web, αυτό είχε σαν συνέπεια την ανάπτυξη νέων τεχνολογιών που θα την εξυπηρετούσαν Πολλές από αυτές τις ιδέες προήλθαν από την τότε νέα γλώσσα προγραμματισμού Java 26

Java Applets

   Ένα

Java applet

είναι ένα πρόγραμμα που σχεδιάστηκε ώστε να ενσωματώνεται σε ένα κείμενο HTML Ένα Java applet μεταφέρεται από τον Web server σε αυτόν που θέλει να τρέξει το πρόγραμμα Για να ενσωματώσω ένα applet σε κώδικα HTML, χρησιμοποιώ το tag APPLET 27

Java Applets

 O browser έχει ένα ενσωματωμένο διερμηνέα που εκτελεί το applet, επιτρέποντας στον χρήστη να αλληλεπιδρά με αυτό   Υπάρχουν όμως δυσκολίες… Πως μπορεί να εκτελείται ένα πρόγραμμα που γράφηκε σε αν τύπο υπολογιστή σε πολλούς άλλους υπολογιστές 28

Java Applets

  Τα προγράμματα Java μετατρέπονται σε Bytecode, που είναι μία αναπαράσταση χαμηλού επιπέδου, αλλά

δεν

είναι κώδικας μηχανής που αφορά μια συγκεκριμένη KME Τα Java applets έχουν περιορισμούς ασφαλείας  Για παράδειγμα, ένα Java applet δεν μπορεί να προσπελάsει τοπικά αρχεία, ή να αλλάξει τη διαμόρφωση του υπολογιστή (system settings) 29

Σελίδες Java Server

  Μία Java Server Page (JSP), είναι μία σελίδα Web που έχει ενσωματωμένα

JSP scriptlets

Ένα scriptlet είναι ένα μικρό κομμάτι εκτελέσιμου κώδικα που υπάρχει μέσα σε ένα κείμενο HTML 30

Σελίδες Java Server

  Ένα JSP scriptlet περικλείεται σε ειδικά tags που αρχίζουν με το <% και τελειώνουν με το %> Τα JSP scriptlets, είναι μία πλήρης γλώσσα προγραμματισμού

σελίδα 488

31

Java Server Pages

   Τα JSPs εκτελούνται στον server (όπου βρίσκεται και η σχετική σελίδα) Τι στιγμή που η σελίδα φθάσει στον υπολογιστή σας, όλη η επεξεργασία έχει ήδη ολοκληρωθεί στο server. Εσείς λαμβάνετε μία σελίδα (που έχει δημιουργηθεί δυναμικά στον server) Τα JSPs είναι ιδιαίτερα χρήσιμα για το συσχετισμό μεταξύ μίας σελίδας Web με μία βάση δεδομένων 32

XML

   Η HTML έχει προκαθορισμένο σύνολο από tags, και κάθε tag έχει συγκεκριμένη σημασία Τα tags της HTML δεν περιγράφουν το πραγματικό περιεχόμενο ενός κειμένου Η

eXtensible Markup Language (XML),

επιτρέπει στον δημιουργό ενός κειμένου να περιγράψει τα περιεχόμενα του κειμένου με ένα σύνολο δικών του tag 33

XML

  H XML είναι μία μεταγλώσσα Μία

μεταγλώσσα

γλώσσες.

είναι μία γλώσσα για μιλήσουμε για, ή να ορίσουμε άλλες 34

XML

 Όπως στην HTML, έτσι και στην XML το κείμενο έχει επισημειωμένα δεδομένα

Κειμενο XML που περιέχει διάφορα δεδομένα για βιβλία

35

 

XML

Document Type Definition (DTD):

είναι μία προδιαγραφή της οργάνωσης του κειμένου.

Η δομή ενός XML περιγράφεται από το σχετικό κείμενο DTD

Το κείμενο DTD που αντιστοιχεί στο κείμενο XML για τα βιβλία

36

XML

  XML προσδιορίζεται ο τρόπος που αυτά θα φανούν στην έξοδο.

είναι τρόπος οργάνωσης δεδομένων, χωρίς να

eXtensible Stylesheet Language (or XSL):

γλώσσα για τον ορισμό μετασχηματισμών κειμένων XML σε κείμενα διαφόρων μορφών Μία

Σχήμα 16.7

κείμενο XML μπορεί να μετραπεί σε πολλές μορφές εξόδου Ένα

Μεταφορά Αρχέιων από τον Η-Υ στον WebServer

1. Retrieve file(s) FTP or Web Browser 2. Open file(s), 3. Edit file(s), 4. Save file(s) Dreamweaver or other editor Desktop Web Server 5. Upload file(s) FTP

38

Common Web Page Attributes and Features

 Page and text color  Link to other web pages  Tables  Graphics  Sound, video 39

More Attributes and Features

 JavaScripts and interactive behaviors  Interactive images - rollover image, etc.

 Media - Flash, applet, plugins, etc.

 Dynamic page and database interaction ASP, PHP, etc.

 Forms and CGI 40

Some General Guidelines of Basic Web Page Design

 Use of a table(s) to organize and hold information.  Different cells contain different types of information (directions, pictures, sounds, links to URLs, etc.  Table boundaries can be transparent. 41

Guidelines - Continued



Selection of fonts

 Serif fonts versus Sans-serif fonts  Serif fonts have thin lines and feet such as

Times

 Sans-serif fonts have even lines and no feet such as

Geneva

 Normally, Sans-serif fonts are easier to read on web pages.

42

Guidelines - Continued

  Be careful about web page color - avoid putting more than 5 colors on one page, or not enough contrast in background and text.

Graphics are good, but don’t over-use them  Consider file size and download time  Accessibility issues - at a minimum, provide alternative text for pictures 43

Word Processing vs. Web

 On Web line breaks come in different sizes  No tabs  Extra spaces between words need coding 44

Word Processing vs. Web,

continued

 Same Web page appears differently depending upon monitor, Web browser & operating system  Limited number of “safe” fonts & colors 45