Κατασκευή Πρότυπων Σελίδων (Templates) Νικόλαος Ζ. Ζάχαρης
Τι είναι η πρότυπη σελίδα Είναι ένα σύνολο από αρχεία συμπιεσμένο σε μορφή zip, τo οποίo καθορίζει την συνολικήεμφάνισητουδικτυακούτόπου, όπως : 1. τους χρωµατισµούς που θα χρησιμοποιηθούν για τα κείμενα και τα γραφικά (κείµενα περιεχοµένου, σύνδεσµοι, µενούκλπ) 2. τα µεγέθη χαρακτήρων, εικόνων και λοιπών στοιχείων που απαρτίζουν την κάθε σελίδα 3. τα γραφικά στοιχεία (όπως λογότυπα και άλλες εικόνες και σχέδια) που θα χρησιμοποιηθούνστηνεμφάνισητηςσελίδας. 4. η τοποθεσία και διάταξη των διάφορων στοιχείων της ιστοσελίδας (επικεφαλίδα, λογότυπο, κυρίωςπεριεχόµενο, µενού επιλογών, αριθµός και µέγεθος στηλώνκλπ) Αφού έχουμε κατασκευάσει (ή αγοράσει ήκατεβάσει δωρεάν από το διαδίκτυο) μια πρότυπη σελίδα μπορούμε να ορίσουμε στο Joomla να παρουσιάσει όλα (ή μέρος) από τα στοιχεία του δικτυακού τόπου σύμφωνα με τη λογική και τη γραφική απεικόνιση της πρότυπηςσελίδας. Με την εγκατάσταση του Joomla υπάρχουν διαθέσιμα 3 πρότυπα σελίδας για το δικτυακότόποκαι 1 πρότυποσελίδαςγιατοδιαχειριστικόμέρος.
Εμφάνιση των Templates Από το μενού Extensions επιλέγουμε Template Manager (1) και στη οθόνη που εμφανίζεται επιλέγουμε το template beez (2). Εν συνεχεία πατάμε Default (3). Τέλος το πλήκτρο Preview (4) γιαναδούμετηνεφαρμογήτουνέουπροτύπου. Επαναλαμβάνουμε γιατο JA_Purity (5).
Ποια τα οφέλη των πρότυπων σελίδων Πλήρης παραμετροποίηση στην εμφάνιση ενός δικτυακού τόπου. Το Joomla δεν αποτελεί πλέον ένα κλειστό σύστημα που έχει μερικούς μόνο τρόπους εμφάνισης του περιεχομένου, αλλά οκαθέναςμπορείναδιαμορφώσειτηδικήτουσελίδα. Πολύγρήγορεςαλλαγέςστηνεμφάνισητουδικτυακούτόπου, αφούηεγκατάστασηκαι ηενεργοποίησηενόςνέουπροτύπουσελίδαςείναι υπόθεσηλίγωνλεπτών. Πλήρης διαχωρισμός του περιεχομένου του δικτυακού τόπου, που ησυντήρηση του και επεξεργασία του μπορεί να γίνεται από χρήστες που δεν έχει σχέση με την κατασκευήδικτυακώντόπων, και από την εμφάνιση του, όπουοι πρότυπεςσελίδες μπορούν νακατασκευάζονταικαι νασυντηρούνται απόγραφίστεςκαι προγραμματιστές δικτυακώντόπων. Καλύτερη διαχείριση και συντήρηση αφού οι αλλαγές στην εμφάνιση του δικτυακού τόπουγίνονται σεέναμόνοσημείο.
Δωρεάν templates Παράδειγμα http://www.freecmstemplates.com/joomla-sheen.php http://www.joomla24.com http://freejoomlatemplates.us http://extensions.joomla.org/ Ξεκινήστε από το Google με ερώτηση free joomla templates και κατεβάστε στο δίσκο σας ένα αρχειο zip με το νέο template. Προσοχή, πριν κατεβάσετε οποιοδήποτε αρχείο να ελέγξετε τη έκδοση του, δηλαδή αν είναι κατάλληλο για την έκδοση 1.5.
Εγκατάσταση νέου template Από το μενού Extensions επιλέγουμε Install/Unistall (1) και στη οθόνη που εμφανίζεται πατάμε το πλήκτρο Browse.. (2) για να δείξουμε το μονοπάτι του αρχείου και εν συνεχεία πατάμε το Upload File &Install γιανατοεγκαταστήσουμε (3). Μια νέα οθόνη εμφανίζει στοιχεία σχετικά με τηνεπιτυχία τηςδιαδικασίας (4).
Απεγκατάσταση ενός template Από το μενού Extensions επιλέγουμε Install/Unistall (1) και στη οθόνη που εμφανίζεται πατάμε Templates (2). Επιλέγουμε ένα template (3) καιπατάμε Uninstall (4). H ίδια διαδικασία ακολουθείται και για τα υπόλοιπα αντικείμενα που έχουμε εγκαταστήσει στοδικτυακόκόμβο, απλάδενθαεπιλέξουμε templates (2) αλλάτηκαρτέλατους (5).
Εφαρμογή του template σε μια σελίδα Από το μενού Extensions επιλέγουμε Template Manager (1) και στη οθόνη που εμφανίζεται επιλέγουμετο rhuk_milkway (2) καιτοκάνουμε Default (3). Ενσυνεχείαεπιλέγουμετο beez (4) καιπατάμε Edit (5). Σεόλοτοδικτυακόκόμβοθέλουμετοπρότυπο rhuk_milkway εκτόςαπόμιαήπερισσότερες σελίδεςστιςοποίες θαεφαρμόσουμε τοπρότυπο beez.
Οι παράμετροι του beez Επιλέγουμε Select from list (1) και εν συνεχεία με πατημένο το πλήκτρο Ctrl επιλέγουμε τουςσυνδέσμους στουςοποίους θα εφαρμοστεί το beez (2). Τέλος πατάμε Save (3).
H εμφάνιση του template beez
Τεχνολογίες για την κατασκευή των πρότυπων σελίδων.
Οι τεχνολογίες ανάπτυξης των πρότυπων σελίδων HTML CSS XML PHP
HyperTextMarkup Language (HTML) Νίκος Ζ. Ζάχαρης
HyperTextMarkup Language (HTML) Η HTML είναι η γλώσσα που χρησιμοποιείται για την περιγραφή της εμφάνισης του περιεχομένου (π.χ. κείμενο, εικόνες κ.λπ.) στο διαδίκτυο. Δεν είναι μια γλώσσα προγραμματισμού όπως για παράδειγμα η C, Java κ.λπ. αλλά είναι μια γλώσσα περιγραφής, που χρησιμοποιεί ετικέτες (tags) σε ζευγάρια για να δηλώσει την έναρξη καιτηνλήξητηςμορφοποίησης πουθαεφαρμοστείστοπεριεχόμενο. Οι ετικέτες έχουν τη μορφή <ΌνομαΕτικέτας> και </ΌνομαΕτικέτας>. Για παράδειγμα για να δηλώσουμε ότι ηλέξη Καλημέρα θα πρέπει να εμφανιστεί έντονα τότε θα πρέπει πριν τη λέξη να τοποθετήσουμε την ετικέτα <b> που σηματοδοτεί την έναρξη της λειτουργίας έντονη γραφή και μετά τη λέξη να τοποθετήσουμε την ετικέτα </b> πουσηματοδοτείτηνλήξητηςλειτουργίαςέντονηγραφή. Συνολικά : <b>καλημέρα</b> Όλο το περιεχόμενο μαζί με τις ετικέτες μορφοποίησης τα γράφουμε σε απλά αρχεία κειμένου και τα αποθηκεύουμε με την κατάληξη html ή htm. Έτσι για παράδειγμα το αρχείο test.html ανάμεσα στις άλλες εντολές έχει και τη μορφοποίηση για τη λέξη καλημέρα. Αν στη συνέχεια διαβάσουμε το αρχείο test.html με ένα πρόγραμμα που καταλαβαίνει τη γλώσσα HTML δεν θα εμφανίσει τις ετικέτες αλλά μόνο τη λέξη Καλημέρα σεέντονηγραφή.
Τι θα χρειαστώ για να αναπτύξω σελίδες HTML Α) Για τη συγγραφή των ιστοσελίδων θα χρειαστούμε έναν απλό κειμενογράφο, όπως για παράδειγμα είναι το Σημειωματάριο (Notepad), NotePad++, ή ένα εξειδικευμένο WYSIWYG HTML editor όπως KompoZer,SeaMonkey ή εξειδικευμένα εργαλεία όπως το HTML-kit. kompozer Β) Για τη εμφάνιση των ιστοσελίδων θα χρειαστούμε έναν πρόγραμμα που καταλαβαίνει τη γλώσσα HTML,όπως για παράδειγμα ένα πρόγραμμα πλοήγησης για τοδιαδίκτυο.
Το αρχείο first.html <html> Η δομή ενός αρχείου HTML <head> <title>η πρώτη ιστοσελίδα</title> </head> <body> <b>καλημέρα</b> </body> </html> Έναρξη <head> και λήξη </head> της επικεφαλίδας τουεγγράφου. Έναρξη <body> και λήξη </body> του σώματος του περιεχομένου Έναρξη <html> και λήξη </html> τουεγγράφου. Στο τμήμα του body τοποθετούμε το περιεχόμενο με τη μορφοποίηση όπως ακριβώς θέλουμε να εμφανιστεί στο παράθυροτουπρογράμματοςπλοήγησης. Στο τμήμα head τοποθετούμε οδηγίες εμφάνισης ήάλλες πληροφορίες σχετικές μετοέγγραφο.
H επικεφαλίδα του εγγράφου <HEAD> Στο τμήμα του head εκτός από την ετικέτα <title> που είναι ο τίτλος του εγγράφου και εμφανίζεταιπάνωαριστεράστοπρόγραμμαπλοήγησηςκαμίαάλληπληροφορίαδενέχει οπτικό αποτέλεσμα. Τοτμήμα αυτό χρησιμοποιείται για : Α) νατοποθετήσουμεοδηγίεςεμφάνισης ή ή <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <metahttp-equiv="content-type" content="text/html;charset=utf-8" > < metahttp-equiv ="Content-Type" content ="text/html; charset=iso-8859-7"> Β) νατοποθετήσουμεάλλεςπληροφορίεςσχετικέςμετο έγγραφο Γ) τιςενέργειεςπουπρέπειναγίνουναπότοπρόγραμμαπλοήγησης. ή <meta name="keywords" content="σεμινάρια, Δημόσια, Διοίκηση"> <meta name="description" content="o δικτυακός τόπος του ΕΚΔΔΑ"> <meta name="generator" content ="Microsoft Word 12"> <meta name="author" content ="Nick Z. Zacharis"> <meta name="expires" content ="Tue, 12 Aug 2011 13:27:28 GMT"> <metahttp-equiv="refresh" content="10"> <metahttp-equiv="refresh" content="10; URL=http://www.google.com">
Παράδειγμα επικεφαλίδας <HEAD> Το αρχείο header.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <meta name="keywords" content="σεμινάρια, Δημόσια, Διοίκηση"> <meta name="description" content="o δικτυακός τόπος του ΕΚΔΔΑ"> <meta name="generator" content ="Microsoft Word 12"> <meta name="author" content ="Nick Z. Zacharis"> <meta name="expires" content ="Tue, 12 Aug 2011 13:27:28 GMT"> <meta http-equiv="refresh" content="10; URL=http://www.google.com"> <title>η δεύτερη ιστοσελίδα</title> </head> <body> <b>καλημέρα</b> </body> </html>
Το σώμα του εγγράφου <body> Το σώμα του εγγράφου περικλείεται από τις ετικέτες <body> και </body> και μπορούμε προαιρετικά δίπλα από το όνομα της ετικέτας να ορίσουμε ζεύγη ιδιοτήτων (χαρακτηριστικών) μετιςαντίστοιχεςτιμέςτους. Ιδιότητα Λειτουργία bgcolor Προσδιορίζειτοχρώμαφόντουτηςιστοσελίδας. background Προσδιορίζει την διεύθυνση της εικόνας που θα χρησιμοποιηθείσανφόντοστηνιστοσελίδα. text Προσδιορίζει τo προκαθορισμένο χρώμα του κειμένου link Προσδιορίζει τoχρώμα των υπερσυνδέσμων που δεν έχειεπισκεφτείοχρήστης. alink Προσδιορίζειτoχρώματουυπερσυνδέσμουτηνστιγμή πουοχρήστηςέκανεκλικπάνωτου. vlink Προσδιορίζει τoχρώμα των υπερσυνδέσμων που έχει επισκεφτείοχρήστης. lang Προσδιορίζει την προκαθορισμένη γλώσσα του κειμένου style Προσδιορίζειτoστυλεμφάνισηςτουκειμένου.
To στυλ εμφάνισης του κειμένου Ιδιότητα Ενδεικτικές Τιμές Περιγραφή font-family Courier Arial Ορίζει την οικογένεια της γραμματοσειράς small font-size medium Ορίζει το μέγεθος της γραμματοσειράs σε ένα large προκαθορισμένομέγεθοςήσεμιααριθμητικήτιμή. 10 normal Ορίζει το στυλ της γραμματοσειράς του κειμένου (italic - font-style italic πλάγιοι χαρακτήρες, normal κανονικοί, oblique -πλάγιοι oblique και έντονοι χαρακτήρες) font-variant small-caps Εμφανίζει το κείμενο με κεφαλαία γράμματα font-weight normal bold Ορίζει την έντονη γραφή της γραμματοσειράς font-stretch normal condensed Ορίζει την απόσταση μεταξύ των γραμμάτων wider text-align left right justify center Ορίζει την στοίχιση των γραμμάτων
Παράδειγμα της ετικέτας <body> Το αρχείο body.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>η ετικέτα BODY</title> </head> <body lang="el" style="text-align:justify; color:#ff0000; font-family: Arial; font-size:24;"> Το σώμα του εγγράφου. </body> </html> Όλες οι ετικέτες μπορούν να χρησιμοποιηθούν μόνες τους, όπου σε αυτή τη περίπτωση έχουν μια προκαθορισμένη συμπεριφορά, όμως αρκετές από τις ετικέτες δίνουν την δυνατότητανακαθορίσουμεζεύγηιδιοτήτωνκαιτιμών. <ετικέτα ιδιότητα="τιμή" ιδιότητα="τιμή" ιδιότητα="τιμή">
Ετικέτες μορφοποίησης κειμένου Ετικέτα Λειτουργία <br/> ή <br> Αλλαγήγραμμής. <b>κείμενο</b> Εμφανίζειτοκείμενοσεέντονηγραφή <i>κείμενο</i> Εμφανίζειτοκείμενοσεπλάγιαγραφή <u>κείμενο</u> Εμφανίζειτοκείμενουπογραμμισμένο. <strike>κείμενο </strike> Εμφανίζειτοκείμενομεδιαγράμμιση <em>κείμενο </em> Εμφανίζειτοκείμενομεέμφαση <sub>κείμενο</sub> Εμφανίζει το κείμενο σαν δείκτη, κάτω από την κανονική γραμμή κειμένου. <sup>κείμενο</sup> Εμφανίζει το κείμενο σαν εκθέτη, πάνω από την κανονική γραμμήκειμένου. <h1>κείμενο</h1> Χρησιμοποιείται για επικεφαλίδες και το μέγεθος της <h6>κείμενο</h6> γραμματοσειράς μπορεί να είναι σε μια κλίμακα από το 1 μέχρι το 6, όπου το 1 είναι το μεγαλύτερο μέγεθος ενώ το 6 το μικρότερο. <big>κείμενο</big> Εμφανίζει το κείμενο σε μέγεθος της γραμματοσειράς μεγαλύτεροαπότοκανονικόκαιέντονα. <small>κείμενο</small> Εμφανίζει το κείμενο σε μέγεθος της γραμματοσειράς μικρότεροαπότοκανονικό.
Ετικέτες μορφοποίησης κειμένου (συν.) Ετικέτα Λειτουργία <strong>κείμενο<strong> Εμφανίζειτοκείμενοσεέντονηγραφή. <tt>κείμενο</tt> Εμφανίζειτοκείμενοσανέχειτυπωθείσεγραφομηχανή. <!-- κείμενο --> Τοκείμενο παραμένει αμετάφραστο μέσα στις ετικέτες <!-- και -->. Χρησιμοποιείται για την δημιουργία διευκρινιστικώνσχολίωνστοκώδικατης HTML. <p>κείμενο</p> Οι ετικέτες <p> και </p> ορίζουνμια παράγραφο. Όλα τα κενάήοιαλλαγέςγραμμήςαγνοούνται. Χρησιμοποιείται για την εμφάνιση του κενού χαρακτήρα. <hr> Δημιουργείμια ευθείαγραμμή. Οι ιδιότητες alignsize και width καθορίζουν την στοίχιση τηςγραμμής, το μέγεθος και τοπλάτος. <blockquote>κείμενο Εμφανίζειτοκείμενοαρχίζονταςσεδεξιότερηεσοχή. </blockquote> <pre>κείμενο</pre> Εμφανίζει το κείμενο όπως ακριβώς το πληκτρολογούμε με τακενάκαιτιςαλλαγέςγραμμής. Η ετικέτα <div> ορίζει ένα τμήμα (υποδιαίρεση) του HTML κειμένου και μας βοηθά να ορίσουμετοίδιοστυλμορφοποίησηςσεόλεςτιςετικέτεςπουανήκουνσεαυτότοτμήμα.
Παράδειγμα μορφοποίησης κειμένου Το αρχείο textformat.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>παραδείγματα μορφοποίησης</title> </head> <body style="color:#6000ff" lang="el"> Κανονικό Κείμενο <b>έντονη γραφή </b> <i>πλάγια γραφή<i><br/> <u>υπογραμμισμένο κείμενο</u><br/> <strike>κείμενο με διαγράμμιση</strike> <em>κείμενο με έμφαση</em><br/> Το Χ με δείκτη το 3 Χ<sub>3</sub><br/> Το Χ υψωμένο στο τετράγωνο Χ<sup>2</sup> <h1>επικεφαλίδα με μέγεθος γραφής 1</h1> <h4>επικεφαλίδα με μέγεθος γραφής 4</h4> <big>μεγάλο Κείμενο</big> <small>μικρό κείμενο</small> <strong>έντονο κείμενο</strong> <tt>κείμενο γραφομηχανής</tt> <!-- Διευκρινιστικά Σχόλια -->
Παράδειγμα μορφοποίησης κειμένου (συν.) Το αρχείο textformat.html <p>μια παράγραφο κειμένου</p> <hr width="50%" align="center" size="3" style="color:#00ff00"> <blockquote>κείμενο που αρχίζει σε δεξιότερη εσοχή.</blockquote> <pre> for i =1 to 20 do if x < 10 then print x end if next </pre> <div style="color:#00ff00"> <h2>επικεφαλίδα 2</h2> <p>μια παράγραφο κειμένου</p> </div> </body> </html>
Το αρχείο numberlist.html Αριθμημένη Λίστα <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> </head> <body> <olstart=7> <li>αθήνα</li> <li>λαμία</li> <li>χανιά</li> </ol> </body> </html> Για μη αριθμημένες λίστες αντικαταστήστε το <ol> με <ul> Εν συνεχεία προσθέστε στην ετικέτα <ul> την ιδιότητα TYPE τιμή ένα από τα CIRCLE, DISC, SQUARE. Για παράδειγμα <ul TYPE=CIRCLE>
ΛίσταΟρισμών (definition list) Το αρχείο deflist.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> </head> <body> <dl> <dt>ανωτάτη Εκπαίδευση</dt> <dd>αει</dd> <dd>τει</dd> <dt>μεταπτυχιακή Εκπαίδευση</dt> <dd>msc</dd> <dd>phd</dd> </dl> </body> </html> Σε μια λίστα ορισμών μπορούμε να ορίσουμε έναν ή περισσότερους τίτλους (definition titles) και για το κάθε τίτλο ένα ή περισσότερους ορισμούς (definition data)
Υπερσύνδεσμοι A) Υπερσύνδεσμοι Τo πλήρες μονοπάτι στην ιστοσελίδα <a href="http://www.server.gr/b.html">h σελίδαβ</a> Η σχετική διαδρομή στην ιστοσελίδα <a href="b.html">h σελίδα Β</a> Β) Σελιδοδείκτης <a name="chap1">κεφάλαιο 1</a> <a href ="http://www.server.gr/a.html#chap1">διάβασε το Κεφάλαιο 1</a>
Παράδειγμα Υπερσυνδέσμων PageC A.html www.tanea.gr TA NEA Page B B.html Επιστροφή Α ΕΚΔΔΑ Κεφάλαιο 1 months Σελίδα C.html Επιστροφή Α
Παράδειγμα Υπερσυνδέσμων (συν.) Το αρχείο A.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>page A</title> </head> <body> <a href="http://www.tanea.gr">ta NEA</a><br/> <a href="http://www.ekdd.gr">εκδδα</a><br/> <a href="b.html">page B</a><br/> <a href="months/c.html">page C</a><br/> </body> </html>
Παράδειγμα Υπερσυνδέσμων (συν.) Το αρχείο Β.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>page Β</title> </head> <body> <a href="a.html">επιστροφή Α</a><br/> <a href="months/c.html#chapter1">κεφάλαιο 1</a><br/> </body> </html>
Παράδειγμα Υπερσυνδέσμων (συν.) Το αρχείο C.html <html> <head> <metahttp-equiv="content-type" content="text/html; charset=windows-1253"> <title>page C</title> </head> <body> Για «σκηνικό χειμώνα» το Σαββατοκύριακο, κάνει λόγο η Εθνική Μετεωρολογική Υπηρεσία. Ειδικότερα για αύριο προβλέπονται νεφώσεις με κατά τόπους ισχυρές βροχέςκαικαταιγίδες. Χιονοπτώσειςθαπέσουνστακεντρικάκαιβόρειαορεινά. <br> <br> <b><aname="chapter1">kεφάλαιο 1</a></b><br> Αντιγράψτε 10 φορέςτηκόκκινηπαράγραφο <br><br> <ahref="../a.html">pagea</a><br/> </body> </html>
Η ιδιότητα target του υπερσυνδέσμου Τιμή Η ιστοσελίδα που δείχνει ο σύνδεσμος θα : _blank _parent _self _top ανοίξει σε νέο παράθυρο. ανοίξει στο παράθυρο που είναι στο αμέσως ανωτέρω επίπεδο. εμφανιστεί στο ίδιο παράθυρο που εμφανίζεται οσύνδεσμος. Προκαθορισμένη συμπεριφορά. ανοίξει στο ριζικό παράθυρο ανεξαρτήτως επιπέδου. Οι τιμές _parent και _top μπορεί να γίνουν κατανοητές με χρήση πλαισίων (Frames) Στην σελίδα A.html προσθέστε την δυνατότητα να ανοίγουν οι εξωτερικοί σύνδεσμοι σενέαπαράθυρο.
IE και Firefox embed.html Πολυμέσα Video -Flash <embed src="example.swf" play="false" loop="false" type="application/x-shockwave-flash" width="640" height="480"> IE ieobject.html <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400"> <param name="movie" value="example.swf" /> <param name="loop" value="false" /> <paramname="play" value="false" /> </object> Αρχικά χρησιμοποίηθηκεη ετικέτα embed Αντικαθιστάθηκεαπό την ετικέτα object Firefox fxobject.html <object type="application/x-shockwave-flash" data="example.swf" width="550" height="400"> <paramname="movie" value="example.swf" /> </object> αλλά με διαφοροποιήσεις ανάμεσα στους browsers
IE και Firefox adobe.html Πολυμέσα Video -Flash <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400"> <param name="movie" value="example.swf" /> <paramname="loop" value="false" /> <paramname="play" value="false" /> <!--[if!ie]>--> <object type="application/x-shockwave-flash" data="example.swf" width="550" height="400"> <paramname="movie" value="example.swf" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="get Adobe Flash player" /> </a> <!--[if!ie]>--> </object> <!--<![endif]--> </object> H πρόταση της Adobe ώστε να εμφανίζεται σωστά το video.
HTML5 html5.html Πολυμέσα Video -Flash <video width="320" height="200" controls> <source src="example.mp4" type="video/mp4"> <source src="example.ogg" type="video/ogg"> <source src="example.webm" type="video/webm"> Your browser does not support the video tag. </video> all.html <video width="320" height="200" controls> <source src="example.mp4" type="video/mp4"> <source src="example.ogg" type="video/ogg"> <source src="example.webm" type="video/webm"> <object data=" example.swf " height="200" width="320"> <embed src="example.swf" height="200" width="320"> </object> </video> Τελικά στη πράξη χρησιμοποιείς ένα συνδυασμό συνδυασμό των ανωτέρω.
Πολυμέσα - Video Χρήση υπερσυνδέσμου : <a href="example.swf">κατέβασε το video</a> Χρήση YouTube
Πίνακες Οι πίνακες χρησιμοποιούνται για την παρουσίαση/στοίχιση πληροφοριών σε μια ιστοσελίδα. ΌνομαΕτικέτας <table> </table> <caption></caption> <tr> </tr> <th></th> <td> </td> Περιγραφή Αρχήκαιτέλοςτουπίνακα Τίτλοςτουπίνακα Αρχήκαιτέλοςγραμμής Αρχήκαιτέλοςκελιούμεέντονηγραφή Αρχή και τέλος κελιού με κανονική γραφή
Παράδειγμα πίνακα Το αρχείο table.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> </head> <body> <table border="1"> <caption>πωλήσεις από το 2005 έως το 2007</caption> <tr><th>χρονολογία</th><th>πώλησεις (σε χιλιάδες ευρό)</th></tr> <tr><td>2005</td><td>240</td></tr> <tr><td>2006</td><td>202</td></tr> <tr><td>2007</td><td>208</td></tr> </table> </body> </html>
Πλαίσια Το αρχείο frames.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>σύνθετοπαράδειγμα πλαισίων</title> </head> <frameset rows="70,*,70"> <frame name="header" src="header.html"> <frameset cols="200,*"> <frame name="menu" src="menu.html"> <frame name="content" src="introduction.html"> </frameset> <frame name="footer" src="footer.html"> </frameset> </html> menu header content footer
Πλαίσια -To αρχείο επικεφαλίδα Το αρχείο header.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>επικεφαλίδα</title> </head> <body> <p style="text-align:right;"> ΕνωσηΦίλων του Υπολογιστή </p> </body> </html>
Πλαίσια -To αρχείο υποσέλιδο Το αρχείο footer.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>υποσέλιδο</title> </head> <body> <p style="text-align:center;"> Πειραιώς 250<br> Τηλ. 2105623374<br></p> </body> </html>
Πλαίσια -To αρχείο περιεχόμενο Το αρχείο introduction.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>περιεχόμενο</title> </head> <body> Ιστορικό</br> Η ένωση μας δημιουργήθηκε το 1985... </body> </html>
Πλαίσια -To αρχείο menu Το αρχείο menu.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>μενού</title> </head> <body> <a href="introduction.html" target="content">ιστορικό</a><br/> <a href="http://www.tanea.gr" target="content">ta NEA</a><br/> </body> </html>
ΦΟΡΜA ΑΠΟΣΤΟΛΗΣ ΔΕΔΟΜΕΝΩΝ Το αρχείο forma.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>φόρμα αποστολής δεδομένων</title> </head> <body> <form action="http://www.server.gr/sum.php" method="get"> Εισόδημα <input type="text" name="noa" value="5" maxlength="10"/><br> Κωδικός <input type="password" name="pass" value="" maxlength="10"/><br> Περιγραφή<br><textarea name="question" cols="20" rows="4"></textarea><br> <input type="radio" name="sex" value="male" /> Άντρας <br/> <input type="radio" name="sex" value="female" checked="checked" />Γυναίκα<br/> <input type="hidden" name="age" value="25"/> <input type="submit" value="αποστολή Φόρμας" /> <input type="reset" value="καθαρισμός Φόρμας" /> <form> </body></html>
ΦΟΡΜA ΑΠΟΣΤΟΛΗΣ ΔΕΔΟΜΕΝΩΝ Το αρχείο formb.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>φόρμα αποστολής δεδομένων</title> </head> <body> <form action="http://www.server.gr/sum.php" method="get"> Υπολογιστή <input type="checkbox" name="pc" value="yes" checked="checked" /><br> Internet<input type="checkbox" name="internet" value="yes" checked="checked" /><br> Πόλη<select name="city"> <option value="1">αθήνα</option> <option value="2" selected="selected">λαμία</option> <option value="3">τρίκαλα</option> </select><br> <input type="submit" value="αποστολή Φόρμας" > <input type="reset" value="καθαρισμός Φόρμας" > <form> </body></html>
Μέθοδοι Αποστολής Δεδομένων Έστω η παρακάτω φόρμα : <form action="http://www.server.gr/save.php" method="get"> Όνομα <input type="text" name="name" value=""/><br> Ηλικία <input type="text" name="age" value=""/><br> <input type="submit" value="αποστολή"/> <form> Αν ο χρήστης πληκτρολογήσει στα αντίστοιχα πεδία nick και 25 τότε το πρόγραμμα πλοήγησης ανάλογα με τη μέθοδο αποστολής θα κάνει τη παρακάτω αιτήσεις : GET /save.php?name=nick&age=25 HTTP/1.0 ΚΕΝΗ ΓΡΑΜΜΗ POST /save.php HTTP/1.0 Content-Length: 16 ΚΕΝΗ ΓΡΑΜΜΗ name=nick&age=25 ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΜΕΙΟΝΕΚΤΗΜΑΤΑ?
Το αρχείο css1.html Cascading Style Sheets (CSS) <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>cascading Style Sheets</title> <style> <!-- h1.best { font-family: Tahoma; color: #00FF00; font-size: 18pt; font-style: italic; font-weight: bold } { font-family: serif; font-size: 8pt; text-decoration: underline; font-weight: bold } p { font-family: Arial; font-size: 12pt; color: #000080; text-align: justify; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px } --> </style> </head> <body><h1>ιστορικό</h1><p>ο σύλλογος δημιουργήθηκε...</p> <p class="best">ταγραφεία μας </p><div class="best">τοτελευταίο μήνα..</div> </body>
Το αρχείο css2.html Cascading Style Sheets (συν.) <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1253"> <title>cascading Style Sheets</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>ιστορικό</h1> <p>ο σύλλογος δημιουργήθηκε...</p> </body> Το αρχείο mystyle.css h1 { font-family: Tahoma; color: #00FF00; font-size: 18pt; font-style: italic; font-weight: bold }.best { font-family: serif; font-size: 8pt; text-decoration: underline; font-weight: bold } p { font-family: Arial; font-size: 12pt; color: #000080; text-align: justify; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px } Στο αρχείο mystyle.css δεν απαιτούνται οι ετικέτες <style> και </style>
H δήλωση <!DOCTYPE> H δήλωση <!DOCTYPE> θα πρέπει να προηγείται ενός HTML εγγράφου και δηλώνει το σύνολο κανόνων που διέπουν το έγγραφο ώστε να μπορεί το πρόγραμμα πλοήγησης να κάνει σωστά τη σχεδίαση της σελίδας. Ηδήλωση δεν είναι ετικέτα της HTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body> </body> </html> XHTML 1.0 Transitional επιτρέπονται όλες οι html ετικέτες, εκτός από framesets, και οι ετικέτες θα πρέπει να γραφούν στη σωστή μορφή XML 1.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Έλεγχος της εγκυρότητας των ετικετών http://validator.w3.org/ HTML 4.01 Strict - δεν επιτρέπονται framesets, fonts, και όλα εκείνα τα στοιχεία παρουσίασης που θα πρέπει να αποφεύγονται (deprecated).
extensible Markup Language Νικόλαος Ζ. Ζάχαρης
breakfast.xml Παράδειγμα αρχείου xml <?xml version="1.0" encoding="iso-8859-7"?> <breakfast> <food> <name>γαλλικός Καφές</name> <price>1.5</price> <description>ποικιλία Arabika</description> <calories>50</calories> </food> <food> </food> <food> </food> </breakfast> <name>φρυγανιές</name> <price>1</price> <description>ολικής αλέσεως</description> <calories>400</calories> <name>γάλα</name> <price>0.8</price> <description>πλήρες</description> <calories>200</calories>
To testxml.html <html> <body> <script type="text/javascript"> if (window.xmlhttprequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // IE 5 or 6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("get","breakfast.xml",false); xmlhttp.send(); xmldoc=xmlhttp.responsexml; document.write("<table border='1'>"); varx=xmldoc.getelementsbytagname("food"); for (i=0;i<x.length;i++) { document.write("<tr><td>"); document.write(x[i].getelementsbytagname("name")[0].childnodes[0].nodevalue); document.write("</td><td>"); document.write(x[i].getelementsbytagname("price")[0].childnodes[0].nodevalue); document.write("</td></tr>"); } document.write("</table>"); </script> </body> </html>
Χαρακτηριστικά του XML Tα XML αρχεία θα πρέπει να έχουν ριζικό στοιχείο. <breakfast> Κάθε στοιχείο σε ένα XML αρχεία θα πρέπει να περικλείεται από μια αρχική και μια τελική ετικέτα. Λάθος Στις ετικέτες της XML έχει σημασία ο τρόπος γραφής τους (case sensitive). Λάθος <price>. </price> <name>. </ΝΑΜΕ> Οι ετικέτες στην XML θα πρέπει να είναι εμφωλευμένες με τη σωστή σειρά. Λάθος <food> <name>. </food> </name> Οι ιδιότητες των ετικετών θα πρέπει να εμπεριέχονται σε ". <food type="liquid"> </food>
Document Type Definition (DTD) Τα αρχεία μπορεί να περιέχουν εσωτερικά ή εξωτερικά σε αρχείο τους κανόνες επικύρωσηςτωνδεδομένων. breakfast.xml <?xml version="1.0" encoding="iso-8859-7"?> <!DOCTYPE breakfast SYSTEM "breakfast.dtd"> <breakfast> <food> <name>γαλλικός Καφές</name> <price>1.5 </price> <description>ποικιλία Arabika</description> <calories>50</calories> </food> <food> <name>γάλα</name> <price>0.8 </price> <description>πλήρες</description> <calories>200</calories> </food> </breakfast> breakfast.dtd <!DOCTYPE breakfast [ <!ELEMENT breakfast (food+)> <!ELEMENT food (name,price,description, calories)> <!ELEMENT name (#PCDATA)> <!ELEMENT price (#PCDATA)> <!ELEMENT description (#PCDATA)> <!ELEMENT calories (#PCDATA)> ]> PCDATA - Parsed Character Data
PHP PHP: Hypertext Preprocessor <<Τοακρωνύμιο ακολουθεί μια ιστορικήπαράδοσηστοχώρο των υπολογιστών σύμφωνα με την οποία, ένα ακρωνύμιο θα πρέπει να ορίζεται αναδρομικά και αυτό ισχύει αφού η πρώτηλέξηαπότοακρωνύμιοείναιτοακρωνύμιο.>> Νικόλαος Ζ. Ζάχαρης
Το πρώτο σενάριο Σε ένα επεξεργαστή κειμένου πληκτρολογούμε τις παρακάτω εντολές : simple.php <?php echo "Good morning...";?> simple2.php <?php echo "Good morning...";?> <?php echo "Good night...";?> και τις αποθηκεύουμε στα αντίστοιχα αρχεία. Οι εντολές της PHP θα πρέπει να βρίσκονται μέσα στις ετικέτες <?php και?> οι οποίες μπορεί να επαναλαμβάνονται αρκετές φορές μέσα σε ένα σενάριο. Για την εκτέλεση ενός σεναρίου, θα πρέπει από τηνγραμμήεντολών να πληκτρολογήσουμε : C:\php\php.exe simple.php Θεωρούμε ότι η εγκατάσταση της php έχει γίνει στο φάκελο c:\php
Χρήση της PHP σε ιστοσελίδες first.php <html> <head> <title>σενάριο PHP</title> </head> <body> <b>μια σελίδα HTML<b> </body> </html> second.php <html> <head> <title>σενάριο PHP</title> </head> <body> <?php echo "<b>php περιεχόμενο<b>";?> </body> </html></html> info.php <?php phpinfo();?> third.php <?php echo "<html>"; echo "<head>"; echo "<title>σενάριο PHP</title>"; echo "</head>"; echo "<body>"; echo "<b>ολόκληρη η σελίδα PHP<b>"; echo "</body>"; echo "</html>";?> Ένα σενάριο σε php μπορεί να περιέχει : a) μόνο ετικέτες σε HTML b) ετικέτες HTML και εντολές σε PHP a) μόνο εντολές σε PHP
Η εντολή echo Στην εντολή echo μπορούμε να χρησιμοποιήσουμε τα μονά είτε τα διπλά εισαγωγικά. Γιαπαράδειγμα, οιπαρακάτωεντολές : echo "Hello"; και echo 'hello'; Έχουν το ίδιο αποτέλεσμα. Η κύρια χρήση του μονού εισαγωγικού είναι να μπορούμε να γράφουμε HTML ετικέτες οι οποίες περιέχουν τα διπλά εισαγωγικά, π.χ. echo '<a href="http://www.dokimi.gr">δοκιμαστικό</a>'; αντί του echo "<a href=\"http://www.dokimi.gr\">δοκιμαστικό</a>"; όμως όταν θέλουμε να γράψουμε ειδικούς χαρακτήρες, όπως το \n θα πρέπει να χρησιμοποιήσουμε υποχρεωτικά διπλά εισαγωγικά. echo "Hel\nlo"; θα εκτυπώσει Hel lo ενώ με τη χρήση μονού εισαγωγικού echo 'Hel\nlo'; θα εκτυπώσει Hel\nlo
Μεταβλητές Οι μεταβλητές στη PHP δεν έχουν συγκεκριμένο τύπο αλλά η συμπεριφορά τους ερμηνεύεται απότητιμήτουςήτιςπράξεις πουενεργούνται σεαυτές : vars.php <?php $x= "50"; // H μεταβλητή x έχει σαν τιμή το αλφαριθμητικό "50" $apot= $x + 4; // Η μεταβλητή x μετατρέπεται σε αριθμό αφού πρόκειται να γίνει // η πράξη της πρόσθεσης. Το ίδιο θα γινόταν αν η εντολή ήταν // $apot = $x + "4"; echo "Apotelesma = $apot"; // Θα εκτυπωθεί Apotelesma = 54 echo 'Apotelesma = $apot'; echo "Apotelesma = \$apot";?> // Θα εκτυπωθεί Apotelesma = $apot // Στα μονά εισαγωγικά δεν ερμηνεύονται οι // μεταβλητές, αλλά παραμένουν αλφαριθμητικά. // Θα εκτυπωθεί Apotelesma = $apot // Ο χαρακτήρας διαφυγής (escape) αναστέλλει την // λειτουργία της ερμηνείας της μεταβλητής.
Μεταβλητές Λόγω της ιδιαιτερότητας των μεταβλητών θα πρέπει να είμαστε ιδιαίτερα προσεκτικοί στιςπράξεις που ενεργούνται σε αυτές : <?php $x = "50"; // H μεταβλητή x έχει σαν τιμή το αλφαριθμητικό "50" $x = $x. ".46"; // Η πράξη της συνένωσης (concatenate) δύο αλφαριθμητικών // γίνεται με το χαρακτήρα. Η τιμή της x είναι "50.46" $apot= $x + "20"; // Η x όπως και το "20" μετατρέπονται σε αριθμούς. echo "$apot". "\n"; // Εκτυπώνεται η τιμή 70.46?> <?php $x = "50"; // H μεταβλητή x έχει σαν τιμή το αλφαριθμητικό "50" $x = "hello45". $x; // Η μεταβλητή x έχει σαν τιμή "hello4550" $apot= $x + "20"; // H ερμηνεία του x αποτυγχάνει και θεωρείται 0 echo "$apot". "\n"; // Εκτυπώνει τη τιμή 20?>