Δημιουργία Ιστοσελίδων σε HTML και FrontPage Πρόγραμμα Αναμόρφωσης Προπτυχιακών Σπουδών Κεντρικό Γραφείο Υποστήριξης Εκπαιδευτικού Έργου Αλέξανδρος Λεκατσάς

HTML  Οι Ιστοσελίδες είναι γραμμένες σε μια ειδική γλώσσα, την HTML (Hyper-Text Markup Language-γλώσσα σήμανσης υπέρ-κειμένου)  Η HTML μπορεί να διαβαστεί από οποιοδήποτε υπολογιστή διαθέτει ένα web browser, όπως το Internet Explorer

Παγκόσμιος Ιστός - Web  Σύνολο πληροφοριών στις οποίες έχουμε πρόσβαση μέσω ιντερνετ με το πρωτόκολλο http (hypertext transfer protocol)  Το http είναι πρωτόκολλο μεταφοράς αρχείων.

Πρωτόκολλο HTTP  HTTP HyperText Transfer Prolocol  Πρωτόκολλο μεταφοράς Υπερκειμένου Πελάτης Internet Explorer, Netscape, Mozilla, Opera, Lynx Εξυπηρετητής (webserver) IIS, Apache, TUX

URL Διεύθυνση στο Ιντερνετ  URL: "Uniform Resource Locator". Είδος διευθύνσεων για πληροφορίες στο web που ορίζουν με συντομία, ακρίβεια και μονοσήμαντα το σημείο όπου βρίσκο νται οι πληροφορίες. Πρωτόκολλο Επικοινωνίας Όνομα απομακρυσμένου Υπολογιστή Web Server Θέση αρχείου και αρχείο που ζητάμε

Αρχεία Συνήθη αρχεία που μεταφέρονται μέσω πρωτοκόλλου http. Αρχεία που ο web browser έχει την δυνατότητα να απεικονίσει.  Αρχεία HTML text/html. Αρχεία Υπερκειμένου σε μορφή HTML  Αρχεία εικόνας. image/jpeg image/gif (*.jpg, *.gif, *.png)  Αρχεία πολυμέσων. video/mpeg

Αιτήσεις HTTP Συνήθεις μέθοδοι του πρωτοκόλλου http  HTTP GET. Ζητάμε ένα αρχείο από τον εξυπηρετητή  HTTP POST. Ζητάμε ένα αρχείο τον εξυπηρετητή, δίνοντας ταυτόχρονα στον εξυπηρετητή κάποιες παραμέτρους, μεταβλητές.  HTTP PUT. Στέλνουμε αρχείο στο εξυπηρετητή. (Χρησιμοποιείται σπάνια)  HTTP HEAD  HTTP DELETE  HTTP OPTIONS  HTTP TRACE

Γραφικά στο δικτυακό τόπο  Τύποι αρχείων  Jpg – Φωτογραφίες  Gif – Σχέδια, κινούμενες εικόνες, κουμπιά. Πλεονέκτημα Διαφάνεια. Μειονέκτημα μόνο 256 χρώματα  Png - Σχέδια, κινούμενες εικόνες, κουμπιά. Πλεονέκτημα Διαφάνεια. Μειονέκτημα μόνο 256 χρώματα  Ανάλυση dpi  Μικρό μέγεθος αρχείων

Πολυμέσα στο δικτυακό τόπο  Macromedia Flash  Java applets  Video, Streaming Video  Ήχος  Άλλα Plugins

Παράδειγμα αρχείου html Agricultural University of Athens Γεωπονικό Πανεπιστήμιο Αθηνών

Παράδειγμα αρχείου html

html Ορίζει την έκδοση HTML του αρχείου Δηλώνει την αρχή και το τέλος ενός HTML αρχείου..... Ορίζει παραμέτρους, Ιδιότητες του αρχείου (τίτλο, κωδικοποίηση γλώσσας, συγγραφέα) Ορίζει το σώμα του κειμένου. Το τμήμα αυτό είναι που φαίνεται στον Browser.

Microsoft FrontPage  Πρόγραμμα επεξεργασίας το οποίο βοηθά τον χρήστη να δημιουργήσει ιστοσελίδες χωρίς να γνωρίζει HTML  Απλοποιεί και επιταχύνει την ανάπτυξη Ιστοσελίδων  WYSIWYG Editor

Microsoft FrontPage  Εμφάνιση και λειτουργία παρόμοια με του Word  Παρέχει διευκολύνσεις για την δημιουργία πολύπλοκων και δικτυακών τόπων  Εύκολη διαχείριση δικτυακών τόπων

Πίνακες  Παρέχουν δομή  Ορίζουν την θέση των στοιχείων της Ιστοσελίδας  Ορίζουν γραμμές στήλες και κελιά μέσα στα οποία εντάσσονται το κείμενο και οι εικόνες της Ιστοσελίδας

Δικτυακός Τόπος Πλοήγηση και δομή του δικτυακού τόπου  Λειτουργική δομημένη και εύκολη πλοήγησή του δικτυακού τόπου  Ο χρήστης θα πρέπει να είναι σε θέση να απαντήσει σε ερωτήματα που σχετίζονται με το πού βρίσκεται, πώς ήρθε, πού μπορεί να πάει και τι πληροφορίες έχει στη διάθεσή του σε κάθε επίπεδο.  Κανόνες για τη δομή ενός δικτυακού τόπου:  δομή  παρουσίαση  Κάλυψη αναγκών των χρηστών του

Μεταφορά του δικτυακού τόπου στο εξυπηρετητή  Μεταφορά μέσω τοπικού δικτύου  FTP (File Transfer Protocol)  WebDav  κ.α.…

Μεταφορά αρχείων με FTP  Η μεταφορά αρχείων με FTP γίνεται με την βοήθεια ενός προγράμματος πελάτη (client) FTP  Απαραίτητη η ύπαρξη λογαριασμού χρήστη (username, password) στο απομακρυσμένο εξυπηρετητή  Προγράμματα FTP: εντολή ftp του DOS, Internet Explorer, το WS_FTP LE κ.α. ftp://ftp.aua.gr/pub/internet/misc/ws_ftple.exe

Μεταφορά αρχείων με FTP χρησιμοποιώντας Internet Explorer

Microsoft FrontPage  Πλεονεκτήματα  Διαθέσιμο Μαζί με το Microsoft Office  Όμοια μενού και χειρισμός με το Word  Μειονεκτήματα  Παράγει HTML που δεν ακολουθεί τα πρότυπα με αποτέλεσμα να μην είναι συμβατή με όλους τους browsers και web server.

Δυναμικές Ιστοσελίδες  Ιστοσελίδες που δίνουν στο χρήστη την δυνατότητα αλληλεπίδρασης με το περιεχόμενό τους  Τεχνολογίες που λειτουργούν στο Εξυπηρετητή  Τεχνολογίες που λειτουργούν στο πρόγραμμα πελάτη (Internet Explorer, Mozilla)  Συνδυασμός των παραπάνω