Τρίτη 11/12/2007 Γεωπονικό Πανεπιστήμιο Αθηνών 1 Ιστοσελίδες – Δημιουργία Δικτυακού Τόπου Τζικόπουλος Παναγιώτης, Πληροφορικός, Κεντρικό.

Παρουσίαση με θέμα: "Τρίτη 11/12/2007 Γεωπονικό Πανεπιστήμιο Αθηνών 1 Ιστοσελίδες – Δημιουργία Δικτυακού Τόπου Τζικόπουλος Παναγιώτης, Πληροφορικός, Κεντρικό."— Μεταγράφημα παρουσίασης:

1 Τρίτη 11/12/2007 Γεωπονικό Πανεπιστήμιο Αθηνών 1 Ιστοσελίδες – Δημιουργία Δικτυακού Τόπου http://pps.aua.gr/ Τζικόπουλος Παναγιώτης, Πληροφορικός, Κεντρικό Γραφείο Υποστήριξης Εκπαιδευτικού Έργου

2 Τρίτη 11/12/2007 2Τζικόπουλος Παναγιώτης Περιεχόμενα Η Γλώσσα Σήμανσης HTML 1 Ετικέτες – Παράμετροι HTML 2 Δημιουργία Πινάκων 3 Παράδειγμα Dreamweaver 4

3 Τρίτη 11/12/2007 3Τζικόπουλος Παναγιώτης Εισαγωγικές Παρατηρήσεις Πρόσθεση σημαδιών για την υπόδειξη του ρόλου διαφορετικών τμημάτων του εγγράφου. Το περιεχόμενο αρχικά ήταν κατά κύριο λόγο κείμενο Σύνδεσμοι ανάμεσα σε έγγραφα που δημιουργούν τον WWW. LANGUAGE ΜARKUP ΤEXT ΗYPER Καλά ορισμένη σύνταξη και πρότυπα.

4 Τρίτη 11/12/2007 4Τζικόπουλος Παναγιώτης Ι στορική αναδρομή της HTML Δημοσίευση HTML HTML 2.0HTML 4.0 Επέκταση 3.2 HTML 4.01 Τελευταία 199119941997 1999

5 Τρίτη 11/12/2007 5Τζικόπουλος Παναγιώτης Η HTML έχει σχεδιασθεί με σκοπό: 1 Τη στοιχειοθέτηση (μορφοποίηση- formating) ηλεκτρονικών κειμένων 2 Την αναμετάδοση τους στο διαδίκτυο 3 Την αναπαράσταση τους σε διαφορετικού είδους οθόνες

6 Τρίτη 11/12/2007 6Τζικόπουλος Παναγιώτης Προσεγγίσεις για τη Συγγραφή HTML Σελίδων  Raw HTML – Χρήση συντάκτη κειμένου Πλεονεκτήματα Μειονεκτήματα Απλή και καθαρή Βαρετή & δύσκολη για πολύπλοκες κατασκευές   What-you-see-is-what-you-get (WYSIWYG) π.χ. Dreamweaver 2007 (Macromedia) - Επαγγελματική επιλογή FrontPage (Microsoft) - Home Pages & Μικρά sites Pagemill (Adobe) - Home Pages & Μικρά sites Πλεονεκτήματα Μειονεκτήματα - Δεν είναι αναγκαία η κατανόηση HTML - Πλαδαρός κώδικας μη αναγκαίες - Εύκολη η παραγωγή απλών εγγράφων ετικέτες - Γρήγορη η δημιουργία πρωτότυπου για - Τα εργαλεία υστερούν έναντι ένα σχέδιοτων προτύπων - Εργαλεία προσφέρουν βοήθεια για πιο - Σημαντικό κόστος πολύπλοκες εργασίες

7 Τρίτη 11/12/2007 7Τζικόπουλος Παναγιώτης Δομή Εγγράφου HTML HEAD Η επικεφαλίδα (header): Περιέχει πληροφορίες σχετικές με το έγγραφο (συνήθως δεν εμφανίζονται). HTML BODY Το σώμα (body): Τα περιεχόμενα του εγγράφου.

8 Τρίτη 11/12/2007 8Τζικόπουλος Παναγιώτης Ένα Απλό HTML Έγγραφο Welcome to AUA! Welcome to AUA!

9 Τρίτη 11/12/2007 9Τζικόπουλος Παναγιώτης Ετικέτες HTML  Μια ετικέτα (tag) html έχει:  Ένα όνομα - φανερώνει τη λειτουργία της / το ρόλο της (Υποχρεωτικό).  Μια λίστα από παραμέτρους (attributes) – προσδιορίζουν τη λειτουργία της ετικέτας (Προαιρετική).  Οι ετικέτες εσωκλείονται από τους χαρακτήρες ‘ ’.  Δε γίνεται διάκριση κεφαλαίων και πεζών γραμμάτων στα ονόματα και στις παραμέτρους των ετικετών.

10 Τρίτη 11/12/2007 10Τζικόπουλος Παναγιώτης Παράμετροι και Τιμές  Οι παράμετροι (attributes) επεκτείνουν ή τροποποιούν τη λειτουργία μιας ετικέτας:  Περιέχουν διευκρινιστικές πληροφορίες.  Είναι δυνατό να εμφανιστούν σε ετικέτες αρχής ή σε μονές ετικέτες, αλλά ποτέ σε ετικέτες τέλους.  Η διάταξη των παραμέτρων δεν έχει σημασία.  Δε γίνεται διάκριση κεφαλαίων και πεζών γραμμάτων στα ονόματα των παραμέτρων (γίνεται όμως στις τιμές τους).  Οι περισσότερες παράμετροι έχουν μια τιμή (value) η οποία εμφανίζεται μετά από το σύμβολο της ισότητας.  Γενική μορφή: “παράμετρος = τιμή παραμέτρου”.  Είναι δυνατό να υπάρχουν πολλές παράμετροι που διαχωρίζονται μεταξύ τους με κενό.

11 Τρίτη 11/12/2007 11Τζικόπουλος Παναγιώτης Βασικά τμήματα μιας HTML σελίδας HTML Λίστες(Αριθμημένες και μη) Επικεφαλίδες Παράγραφοι Εικόνες Συνδέσμους Πίνακες Φόρμες

12 Τρίτη 11/12/2007 12Τζικόπουλος Παναγιώτης Το Τμήμα HEAD  Title: Oρίσμος του τίτλου της σελίδας.  Script: Kαθορισμός της scripting γλώσσας.  Style: Kαθορισμός style sheet.  Meta: Καθορισμός ζεύγους πληροφοριών (όνομα/τιμή) π.χ. εισαγωγή λέξεων κλειδιών.  Link: Ορισμός σχέσεων με άλλα κείμενα.

13 Τρίτη 11/12/2007 13Τζικόπουλος Παναγιώτης Το Τμήμα BODY (1)  Παράμετροι:  bgcolor: Το χρώμα του φόντου της σελίδας.  text: Το χρώμα των χαρακτήρων του κειμένου.  link / vlink / alink: Το χρώμα των links  background: Το url της εικόνας που θα εμφανίζεται στο φόντο της σελίδας  Παράδειγμα:   blue = #0000FF

14 Τρίτη 11/12/2007 14Τζικόπουλος Παναγιώτης Το Τμήμα BODY (2)  Στοιχεία ορισμού περιοχής:  Επικεφαλίδες –, …,  Παράγραφοι -  Λίστες -,  Φόρμες -  Πίνακες -  Οριζόντιες γραμμές -  Στοιχεία ορισμού κειμένου:  Font style elements -,,  Linking -  Εικόνες -  Διακοπές κειμένου -

15 Τρίτη 11/12/2007 15Τζικόπουλος Παναγιώτης Επικεφαλίδες – h1, …, h6 Level 1 Header Level 2 header Level 3 header Level 4 header Level 5 header Level 6 header

16 Τρίτη 11/12/2007 16Τζικόπουλος Παναγιώτης Παράγραφοι Mορφοποίηση Kειμένου All information from this presentation is © aua & You know that 2 10 = 1024 But you sometimes make mistakes. Did you know how to write this ¼ ???

17 Τρίτη 11/12/2007 17Τζικόπουλος Παναγιώτης Μη Διατεταγμένες Λίστες AltaVista Yahoo Google MSN Search

18 Τρίτη 11/12/2007 18Τζικόπουλος Παναγιώτης Διατεταγμένες Λίστες AltaVista Yahoo Google MSN Search

19 Τρίτη 11/12/2007 19Τζικόπουλος Παναγιώτης Λίστες Ορισμού AltaVista Αρκετά καλή Yahoo Κατηγοριοποίηση από ανθρώπους Google Το καλύτερο MSN Search Πολύ καλή

20 Τρίτη 11/12/2007 20Τζικόπουλος Παναγιώτης Φωλιασμένες Λίστες You have access to new media as it becomes public: New games New applications For business For pleasure Around the clock news Programming XML Java Keeping in touch with old friends

21 Τρίτη 11/12/2007 21Τζικόπουλος Παναγιώτης Δημιουργία Υπερσυνδέσμων Google Μια άλλη σελίδα στον ίδιο φάκελο email me Τέλος της σελίδας bottom

22 Τρίτη 11/12/2007 22Τζικόπουλος Παναγιώτης Εικόνες

23 Τρίτη 11/12/2007 23Τζικόπουλος Παναγιώτης Πίνακες Here is a small sample table This is the head. This is the body.

24 Τρίτη 11/12/2007 24Τζικόπουλος Παναγιώτης H Ετικέτα Table – Παράμετροι  align = {left, right, center}: Η οριζόντια τοποθέτηση του πίνακα.  width = {452, 50%}: Το πλάτος του πίνακα.  border = {0,1,…}: Το πλάτος του περιγράμματος.  cellspacing = {0,1,…}: Το κενό μεταξύ γειτονικών κελιών.  cellpadding: Το κενό μεταξύ κελιού και περιεχομένων.  …

25 Τρίτη 11/12/2007 25Τζικόπουλος Παναγιώτης Ένας Πολύπλοκος Πίνακας   Camelid comparison   # of Humps  Indigenous region  Spits?  Produces Wool?  … 

26 Τρίτη 11/12/2007 26Τζικόπουλος Παναγιώτης tr / th / td – Παράμετροι  nowrap: Ισοδύναμο με το &nbsp (κενός χαρακτήρας).  rowspan = {int}: Οι γραμμές που καταλαμβάνονται από το κελί.  colspan: Οι στήλες που καταλαμβάνονται.  width / height: Το πλάτος / ύψος του κελιού.  align / valign: Οριζόντια / κάθετη ευθυγράμμιση των περιεχομένων.  bgcolor  tr – align & valign = {top, middle, bottom}

27 Τρίτη 11/12/2007 27Τζικόπουλος Παναγιώτης Φόρμες <input type = "hidden" name = "subject" value = "Feedback Form"> Name:

28 Τρίτη 11/12/2007 28Τζικόπουλος Παναγιώτης Η Ετικέτα Form – Παράμετροι  action: Ορίζει το url που θα χρησιμοποιηθεί από τον εξυπηρετητή για να επεξεργαστεί τα δεδομένα της φόρμας (συνήθως κάποιο σενάριο).  method = {get, post}: Ορίζει τη μέθοδο αποστολής των περιεχομένων της φόρμας.  get: Στέλνει τα περιεχόμενα στο url.  post: Τα στέλνει στο body (περισσότερα δεδομένα).  enctype: Καθορίζει τον τύπο αποκωδικοποίησης των περιεχομένων.

29 Τρίτη 11/12/2007 29Τζικόπουλος Παναγιώτης Μία Πολύπλοκη Φόρμα Comments: Hello to our lesson! Email Address: Site design Links Ease of use

30 Τρίτη 11/12/2007 30Τζικόπουλος Παναγιώτης Φόρμες – Χαρακτηριστικά  input: Παίρνει διάφορες παραμέτρους.  Απαγορεύεται να υπάρχει ετικέτα τέλους ( ).  textarea: Για πεδία κειμένου πολλαπλών γραμμών.  rows / columns   select: Μονής ή πολλαπλής επιλογής μενού.  option - selected 

31 Τρίτη 11/12/2007 31Τζικόπουλος Παναγιώτης Φόρμες – Ετικέτα Input / Παράμετρος Type  Καθορίζει τον τύπο του πεδίου εισόδου.  text: Kείμενο μίας γραμμής – size=30.  password: Oμοιο με τον τύπο text, αλλά απεικονίζει τον χαρακτήρα * - maxlength.  checkbox: Δημιουργεί ζεύγος ονόματος/τιμής, υποστηρίζονται πολλαπλές τιμές – checked.  radio: Δέχεται μόνο μία τιμή, μία ομάδα επιλογών έχει το ίδιο όνομα.  submit: Αποστολή δεδομένων.  reset: “Καθαρίζει” τα περιεχόμενα.

32 Τρίτη 11/12/2007 32Τζικόπουλος Παναγιώτης Cascading Style Sheets  Καθορίζουν το style, τη δομή και τη θέση των στοιχείων μέσα στο αρχείο.  Κάνουν εφικτό το διαχωρισμό της εμφάνισης των δεδομένων και των ίδιων των δεδομένων.  Σύνταξη:  selector {property: value; property2: value2} – selector : html tag – {body, p, h1,…} – property : το χαρακτηριστικό που θέλουμε να αλλάξουμε (color, fontfamily, text-align)

33 Τρίτη 11/12/2007 33Τζικόπουλος Παναγιώτης Διαδοχικά Φύλλα Στυλ Με τον ορισμό αυτών μέσα σε μια βασική ετικέτα της γλώσσας HTML Με τον ορισμό αυτών, στο τμήμα του HTML που περικλείεται από την ετικέτα και συγκεκριμένα με χρήση της ετικέτας Με τον ορισμό αυτών σε εξωτερικά αρχεία αρχεία, τα οποία ονομάζονται Φύλλα Στυλ (StyleSheets) Τρόποι με τους οποίους είναι δυνατή η εφαρμογή των CSS σε ένα HTML έγγραφο

34 Τρίτη 11/12/2007 Γεωπονικό Πανεπιστήμιο Αθηνών 34 http://pps.aua.gr