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

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

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

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

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

Τρίτη 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 - Πλαδαρός κώδικας μη αναγκαίες - Εύκολη η παραγωγή απλών εγγράφων ετικέτες - Γρήγορη η δημιουργία πρωτότυπου για - Τα εργαλεία υστερούν έναντι ένα σχέδιοτων προτύπων - Εργαλεία προσφέρουν βοήθεια για πιο - Σημαντικό κόστος πολύπλοκες εργασίες

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

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

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

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

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

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

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

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

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

Τρίτη 11/12/ Τζικόπουλος Παναγιώτης Παράγραφοι 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 ¼ ???

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

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

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

Τρίτη 11/12/ Τζικόπουλος Παναγιώτης Φωλιασμένες Λίστες 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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