Eπικοινωνία Ανθρώπου Μηχανης HTML Μιχάλης Κουλίνας Α.Μ.:774 Χρήστος Μπουρνάζης Α.Μ.:792 Ρογκάκος Γεώργιος Α.Μ.:817
Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε τον Οκτώβριο 1990 Καλοκαίρι 1991 το CERN διέθεσε το λογισμικό στην διεθνή κοινότητα Ηλεκτρονικά "έγγραφα" με συνδέσεις με άλλα αντικείμενα. Hyperlinks = Συνδέσεις HyperText
HTML: Η ΓΛΩΣΣΑ ΤΟΥ WEB Απλά αρχεία. Περιέχουν εντολές και κείμενο μαζί. Οι εντολές απευθύνονται στον BROWSER. Καθορίζουν τον τρόπο εμφάνισης του κειμένου της σελίδας. Δημιουργούνται με οποιονδήποτε συντάκτη κειμένου.
Παράδειγμα HTML αρχείου <HTML> <HEAD> <TITLE> ΠΑΡΑΔΕΙΓΜΑ </TITLE> <!-- Σχολια--> </HEAD> <BODY> <H1> ΠΑΡΑΔΕΙΓΜΑ </H1> Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου. <P> Τέλος. </BODY> </HTML>
Eτικέτες (tags) HTLM Είναι σημάδια που χρησιμοποιεί η HTML για να καθορίσει τον τρόπο εμφάνισης του ενδιάμεσου κειμένου. Οι ετικέτες συνήθως συντάσσονται σε ζεύγη, π.χ.: <H1> …. </H1> H ετικέτα <Η1> καθορίζει ότι το κείμενο που ακολουθεί, θα εμφανιστεί ως επικεφαλίδα πρώτου μεγέθους. H ετικέτα </Η1> καθορίζει το τέλος του κειμένου επικεφαλίδας.
Η HTML είναι αναπτυσσόμενη γλώσσα και αλλάζει συνεχώς. Πχ. σε παλιότερη έκδοση της HTML, η ετικέτα <P> συντασσόταν χωρίς </P> (βλέπε παράδειγμα). Σήμερα συντάσσεται ως <P> ... </P> Η <P> επιβάλλει αλλαγή παραγράφου. Στην HTML οι εντολές μπορούν να γραφτούν με μικρά και/ή με κεφαλαία γράμματα.
<!-- Aυτό εδώ είναι σχόλιο. --> Σχόλια στην HTML <!-- Aυτό εδώ είναι σχόλιο. --> Σχόλιο είναι οτιδήποτε βρίσκεται ανάμεσα στα: <!-- και --> Τα σχόλια δεν εμφανίζονται στην σελίδα. Χρησιμοποιούνται από τους συγγραφείς σελίδων ως επεξηγήσεις.
ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ (n = 1,2,…,6) ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ Κάθε HTML έγγραφο, πρέπει να έχει ένα τίτλο, κυρίως για λόγους αναγνώρισης. <TITLE> ΚΕIΜΕΝΟ ΤΙΤΛΟΥ </TITLE> Υποστηρίζονται επίσης επικεφαλίδες έξη μεγεθών. <Hn> ΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣ </Hn> (n = 1,2,…,6)
Παράμετροι ετικετών <H1 ALIGN = CENTER> Κείμενο </H1> Παράμετροι ετικετών Η παράμετρος ALIGN <H1 ALIGN = CENTER> Κείμενο </H1> "Κεντράρει" την επικεφαλίδα. Οι δυνατές επιλογές είναι: ALIGN = LEFT (Αριστερή στοίχιση) ALIGN = CENTER (Κεντράρισμα) ALIGN = RIGHT (Δεξιά στοίχιση) Εάν παραληφθεί ισοδυναμεί με ALIGN = LEFT
Η ετικέτα νέας παραγράφου Η ετικέτα νέας παραγράφου <P> Κείμενο παραγράφου </P> Επίσης υποστηρίζεται η παράμετρος ALIGN πχ <P ALIGN = CENTER > Κείμενο παραγράφου Με προφανή (αντίστοιχα) αποτελέσματα.
Σύνδεσμοι με άλλα έγγραφα (links) H ισχύς της HTML προέρχεται από την δυνατότητα σύνδεσης με άλλα αρχεία. Τα σημεία όπου βρίσκονται οι σύνδεσμοι εμφανίζονται υπογραμμισμένα και είναι συνήθως χρώματος μπλέ. Η ετικέτα για δημιουργία συνδέσμων είναι: <A> … </A> και συντάσσεται με διάφορους παραμέτρους. Το γράμμα Α προέρχεται από την λέξη Anchor (Άγκυρα)
<A HREF = "grades"> Κείμενο </Α> Σύνδεσμοι ... Η δημιουργία ενός συνδέσμου με κάποιο αρχείο, πχ με το αρχείο: grades,γίνεται ως: <A HREF = "grades"> Κείμενο </Α> Ο Browser θα εμφανίσει το Κείμενο υπογραμμισμένο και μπλέ. Κείμενο Μόλις ο χρήστης κάνει "κλικ" πάνω στον σύνδεσμο (με το "ποντίκι") τότε συνδέεται με το αρχείο grades (που βρίσκεται στον ίδιο κατάλογο με το τρέχον αρχείο).
Σύνδεσμοι ... <A HREF = "depts/phys/grades"> Κείμενο </Α> Σύνδεσμοι ... Εάν το αρχείο που "σκοπεύει" ο σύνδεσμος δεν είναι στον ίδιο κατάλογο με το τρέχον αρχείο, τότε καθορίζεται από ένα σχετικό path, πχ: <A HREF = "depts/phys/grades"> Κείμενο </Α> ή <A HREF = "../phys/grades"> Κείμενο </Α> Στις παραπάνω περιπτώσεις υποτίθεται ότι το τρέχον και τα υπόλοιπα αρχεία βρίσκονται στον ίδιο εξυπηρετητή (server).
Σύνδεσμοι σε άλλους servers <A HREF = "http://www.uoi.gr/grades"> Bαθμοί </Α> Η πλήρης διεύθυνση ονομάζεται URL. (Universal Resource Locator) Οι διευθύνσεις έχουν το παρακάτω γενικό σχήμα: xxxx://host.domain/path/filename όπου xxxx είναι: http , gopher και news, για αρχεία σε WWW servers, Gopher servers, Usenet servers.
Σύνδεσμοι για Email Η σύνταξη: Στείλτε τα σχόλιά σας στον <A HREF="MAILTO:info@webmaster.gr"> υπεύθυνο </A> ξεκινά την διαδικασία αποστολής Email προς τον χρήστη info@webmaster.gr Εμφανίζεται δε ως: Στείλτε τα σχόλιά σας στον υπέθυνο
ΛΙΣΤΕΣ Για να εμφανιστεί μια λίστα πχ: Για να εμφανιστεί μια λίστα πχ: Apples Oranges Χρειάζεται η ετικέτα: <UL> (unordered list) και η ετικέτα: <LI> (list item) Η σύνταξη έχει ως: <UL> <LI> Apples <LI> Oranges </UL>
ΛΙΣΤΕΣ Για να εμφανιστεί μια λίστα πχ: Για να εμφανιστεί μια λίστα πχ: 1. Apples 2. Oranges 3. Grapes Χρειάζονται οι ετικέτες: <OL> και <LI> (OL = Ordered List) <OL> <LI> Apples <LI> Oranges <LI> Grapes </OL>
<OL TYPE = 1> ισοδυναμεί με <OL> Λίστες -Παράμετροι Η ετικέτα <OL> έχει παραμέτρους. <OL TYPE = 1> Ταξινομεί με αριθμούς <OL TYPE = Α> Ταξινομεί με κεφαλαία γράμματα <OL TYPE = a> Ταξινομεί με μικρά γράμματα <OL TYPE = Ι> Ταξινομεί με κεφαλαίους Λατινικούς αριθμούς <OL TYPE = ι> Ταξινομεί με μικρούς Λατινικούς αριθμούς <OL TYPE = 1> ισοδυναμεί με <OL>
Λίστες -Παράμετροι κλπ . . . Πχ οι εντολές: <OL TYPE=A> <LI> Apples <LI> Oranges> </OL> Παράγουν το παρακάτω αποτέλεσμα. Α. Apples B. Oranges Οι δε εντολές: <OL TYPE=Ι> <LI> Apples <LI> Oranges> </OL> Ι. Apples ΙΙ. Oranges κλπ . . .
Λίστες -Παράμετροι H παράμετρος START χρησιμοποιείται με την ετικέτα <OL> για να ξεκινήσει την αρίθμηση από οποιοδήποτε αριθμό. Η παράμετρος VALUE χρησιμοποιείται με την ετικέτα <LΙ> για να αποφύγει κάποιους αριθμούς. Πχ οι εντολές: <OL START=3> <LI> Apples <LI> Oranges <LI VALUE=7> Grapes <LI> Bananas </OL> Παράγουν το παρακάτω αποτέλεσμα.
Λίστες -Παράμετροι 3. Apples 4. Oranges 7. Grapes 8.Bananas Εάν αντικαταστήσουμε την ετικέτα <OL START=3> με την <OL START=3 TYPE=A> θα έχουμε: C. Apples D. Oranges G. Grapes H. Bananas Εάν αντικαταστήσουμε την ετικέτα <OL START=3> με την <OL START=3 TYPE=i> θα έχουμε: iii. Apples iv. Oranges vii. Grapes viii. Bananas
Λίστες Ορισμού Χρησιμοποιούν τις ετικέτες: <DL> … </DL> (Definition List) <DT> (Definition Term) <DD> (Definition Data) Παράδειγμα <DL> <DT> Τίτλος 1 <DD> Κείμενο 1 <DT> Τίτλος 2 </DL>
Λίστες Ορισμού Το προηγούμενο παράδειγμα θα εμφανίσει την παρακάτω διάταξη: Τίτλος 1 Κείμενο 1. Τίτλος 2 Κείμενο 2
Eτικέτες επεξεργασίας κειμένου <B> … </B> Έντονη (bold) γραφή. <I> … </I> Πλάγια (Italic) γραφή. <CODE>…</CODE> Γραφή γραφομηχανής. <SUP> … </SUP> Εκθέτης. <SUB> … </SUB> Δείκτης. <U> … </U> Υπογράμμιση. <BIG> … </BIG> Αύξηση μεγέθους. <SMALL>…</SMALL> Μείωση μεγέθους
Κεντράρισμα, αλλαγή γραμμής Κεντράρισμα, αλλαγή γραμμής <CENTER> … </ CENTER > Κεντράρει στην σελίδα οτιδήποτε υπάρχει ανάμεσα. <BR> Επιβάλλει αλλαγή γραμμής <HR> Τοποθετεί μια οριζόντια γραμμή Έχει παραμέτρους <HR SIZE= αριθμός> Καθορίζει το πάχος <HR WIDTH= αριθμός ή %> Καθορίζει το πλάτος απόλυτa ή σε ποσοστό της σελίδας. <HR ALIGN= LEFT > Καθορίζει την θέση της γραμμής ή = CENTER ή = RIGHT (αριστερά, κέντρο ή δεξιά) <HR NOSHADE> Μη σκιασμένη γραμμή.
Εικόνες στην HTML Η HTML υποστηρίζει δύο ειδών αρχεία εικόνων GIF JPEG Ολοι οι ψηφιακοί σαρωτές (scanners), υποστηρίζουν τουλάχιστον μιά από τις δύο μορφές. Yπάρχουν προγράμματα που μετασχηματίζουν άλλες μορφές σε gif ή jpeg. Οι εικόνες μπορούν να χρησιμοποιηθούν και σαν σύνδεσμοι, και να εμφανίζονται σε διαφορετικές διαστάσεις (μεγενθυμένες ή σε σμίκρυνση).
H ετικέτα <IMG> Για ένθεση εικόνας που περιέχεται στο αρχείο πχ. globe.gif χρησιμοποιείται η ετικέτα <IMG>: <IMG SRC = "globe.gif"> Για αλλαγή του μεγέθους της εικόνας γίνεται χρήση των παραμέτρων WIDTH και HEIGHT: <IMG SRC = "globe.gif" WIDTH = 200, HEIGHT = 100> Η εικόνα θα έχει πλάτος 200 και ύψος 100 pixels. <IMG SRC = "globe.gif" WIDTH = 50%, HEIGHT = 60%> Η εικόνα θα έχει πλάτος το 50% και ύψος το 60% των αντίστοιχων διαστάσεων της σελίδας. Eάν καθορισθεί μόνο μία εκ των δύο παραμέτρων, η άλλη υπολογίζεται αυτόματα για ισότροπη αλλαγή.
Εικόνες - Σύνδεσμοι Για να χρησιμοποιηθεί η εικόνα του αρχείου info.gif ως σύνδεσμος για την διεύθυνση www.domainame.gr γράφουμε: <A HREF="http://www.domainame.gr"> <IMG SRC=“info.gif "> </A> Κείμενο δίπλα σε εικόνα ευθυγραμμίζεται αυτόματα με το κάτω μέρος της, εκτός εάν καθοριστεί αλλοιώς με την παράμετρο ALIGN= (top, middle,bottom). <IMG SRC=“info.gif " ALIGN= TOP> Κείμενο ...
Φόντο σελίδας <BODY BACKGROUND = "stone.gif"> … </BODY> <BODY BGCOLOR="color"> … </BODY> Καθορίζει το χρώμα του φόντου. color = #RRGGBB όπου RR, GG, BB διψήφιοι δεκαεξαδικοί αριθμοί για τις εντάσεις των χρωμάτων R,G,B (Κόκκινο, Πράσινο, Μπλε). Τα ψηφία του δεκαεξαδικού είναι: 0123456789ABCDEF Πχ : <body bgcolor="#FF0000"> κάνει το φόντο της σελίδας κόκκινο.
Πίνακες The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby <TABLE> <CAPTION>The Bradys</CAPTION> <TR> <TD> Marcia </TD> <TD> Carol </TD> <TD> Greg </TD> </TR> <TD> Jan </TD> <TD> Alice </TD> <TD> Peter </TD> <TD> Cindy </TD> <TD> Mike </TD> <TD>Bobby </TD> </TABLE> The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby
Επεξηγήσεις Table Row Table Data <CAPTION> Τοποθετεί μια λεζάντα από πάνω </CAPTION> Σηματοδοτεί το τέλος της λεζάντας <TR> Ξεκινά τον σχηματισμό μιας σειράς </TR> Σηματοδοτεί το τέλος της σειράς <TD> Ξεκινά τον σχηματισμό ενός κελιού </TD> Σηματοδοτεί το τέλος του κελιού <TH>...</ΤΗ> Όπως και το <TD> έντονο και κέντρο Table Row Table Data
<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1"> <CAPTION>The Bradys</CAPTION> <TR> <TD ALIGN = "center"> Agnes </TD> <TD ALIGN = "center"> Wilma </TD> <TD ALIGN = "center"> George </TD> </TR> <TD ALIGN = "center"> Gwen </TD> <TD ALIGN = "center"> Skippy </TD> <TD ALIGN = "center"> Alvin </TD> <TD ALIGN = "center"> Harry </TD> <TD ALIGN = "center"> Melvin </TD> <TD ALIGN = "center"> Joe </TD> </TABLE> The Bradys Agnes Wilma George Gwen Skippy Alvin Harry Melvin Joe
Επεξηγήσεις <TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1"> Κανονίζει το πάχος του περιγράμματος CELLSPACING="1" Κανονίζει το πάχος του περιγράμματος του κελιού CELLPADDING="1"> Κανονίζει το περιθώριο μέσα στο κελί <TD ALIGN = "center"> Agnes </TD> Κανονίζει την θέση του κειμένου στο κελί. Δυνατές τιμές: "left", "center", "right"
ΠΑΡΑΔΕΙΓΜΑ <html><head><title>Strange</title></head> <body> <table bgcolor="lightblue" border="3"> <tr> <td colspan="3" align="center" > <b>1999-2000</b></td> <th rowspan="3" bgcolor="yellow">2001</th> </tr> <tr><td bgcolor="red" rowspan="2" valign="middle">Tax</td> <td>Partial</td> <td> Subtotals </td></tr> <tr> <td bgcolor="green" align="center" colspan="2">TOTAL</td> </tr> </table> </body> </html>
Δυνατότητα παρουσιάσεων με χρήση πολλών παραθύρων Πλαίσια (frames) Δυνατότητα παρουσιάσεων με χρήση πολλών παραθύρων
Συνδεδεμένα Παράθυρα Νέα παράμετρος της ετικέτας <Α> TARGET = "όνομα νέου παραθύρου" Παράδειγμα <A HREF="grades.html" TARGET="new">ΒΑΘΜΟΙ</Α> Ανοίγει ένα νέο παράθυρο με το όνομα new, χωρίς να κλείσει το τρέχον. Η παρουσίαση της σελίδας HREF="grades.html" θα εμφανιστεί στο νέο παράθυρο.
ΠΑΡΑΔΕΙΓΜΑ <html> <head> </head> <body> <h1> HI there </h1> You can see your <a href ="grades.html" target="new"> grades here</a> </body></html> <html><head></head> <body> <UL> <li>Math 19 <li>Phys 18 <li>Comp 16 <li>Lite 19 </UL> </body></html> ΑΡΧΕΙΟ grades.html Η πρώτη σελίδα εμφανίζεται ως: HI there You can see your grades here
HI there You can see your grades here Math 19 Phys 18 Comp 16 Lite 19
Η ετικέτα BASE <BASE TARGET= "ΌΝΟΜΑ_ΠΑΡΑΘΥΡΟΥ" > Εισάγεται στο <HEAD> … </HEAD> μέρος της σελίδας. Έχει ως αποτέλεσμα να εμφανίζονται στο καθορισμένο παράθυρο, όλες οι σελίδες που σχετίζονται με δεσμούς στους οποίους η παράμετρος TARGET έχει παραλειφθεί.
<html><head><base target="profs"></head> <body> <UL> <li> <a href=math.txt>Math 19 </a> <li> <a href=phys.txt>Phys 18 </a> <li> <a href=comp.txt>Comp 16 </a> <li> <a href=lite.txt>Lite 19 </a> </UL> </body></html> Αρχείο Mathematics Professor: C. F.Gauss Physics Professor: A. Einstein Comp. Science Professor: A. Turing Literature Professor: S. Bellow Περιεχόμενα math.txt phys.txt comp.txt lite.txt
Ετικέτες: FRAMESET & FRAME
FRAMESET COLS = "εύρος στήλης1, εύρος στήλης2,…" Συντάσσεται με μία εκ των δύο παραμέτρων COLS = "εύρος στήλης1, εύρος στήλης2,…" ROWS = "ύψος σειράς1, ύψος σειράς2,…" Τα εύρη (ύψη) καθορίζονται είτε: Σε αριθμό pixels, ή Σε ποσοστό κάλυψης ή Με ένα αστερίσκο (*) για αυτόματη ρύθμιση.
<frameset COLS="110,30%,*"> </frameset> Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις στήλες . Η πρώτη έχει εύρος 110 pixels, η δεύτερη έχει εύρος ίσον προς το 30% της σελίδας, και η τρίτη προσαρμόζεται στο εναπομένον εύρος. 110 270 520
<frameset ROWS="110,30%,*"> </frameset> 110 270 520 Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις σειρές. Η πρώτη έχει ύψος 110 pixels, Η δεύτερη έχει ύψος ίσον προς το 30% της σελίδας, και Η τρίτη προσαρμόζεται στο εναπομένον ύψος.
Τα παράθυρα αυτά μπορούν να έχουν ονόματα. ΣΗΜΑΝΤΙΚΟ Κάθε μέρος (στήλη ή σειρά) της διαμέρισης είναι ένα διαφορετικό παράθυρο. Τα παράθυρα αυτά μπορούν να έχουν ονόματα.
FRAME Για κάθε στήλη (ή σειρά) πρέπει να υπάρχει μια ετικέτα τύπου FRAME που θα καθορίζει το περιεχόμενο της διαμέρισης. <html> <head> <frameset cols="30%,*"> <frame src="grades.html"> <frame src="tex8.gif" name="new"> </frameset></head></html> Χωρίζεται η σελίδα σε δύο στήλες. Η πρώτη καταλαμβάνει τα 30% του εύρους της σελίδας και τα υπόλοιπα 70% η δεύτερη.
Τα περιεχόμενα της πρώτης στήλης καθορίζονται από το αρχείο grades Τα περιεχόμενα της πρώτης στήλης καθορίζονται από το αρχείο grades.html που ορίζεται μέσω της παραμέτρου SRC: <frame SRC="grades.html"> Τα περιεχόμενα της δεύτερης στήλης καθορίζονται από το αρχείο tex8.gif που επίσης ορίζεται μέσω της παραμέτρου SRC: <frame SRC="tex8.gif" name="new"> Παρατηρήστε την επιπλέον παράμετρο name="new", που ονομάζει το παράθυρο της δεύτερης στήλης new. Αυτό το όνομα μπορεί να χρησιμοποιηθεί σε συνδυασμό με την TARGET παράμετρο της ετικέτας <Α>
grades.html <html> <head> <frameset cols="30%,*"> <frame src="grades.html"> <frame name="new"> </frameset></head></html> <html><head><base target="new"></head> <body> <UL> <li><a href="math.txt"> Math 19</a> <li><a href="phys.txt"> Phys 18</a> <li><a href="comp.txt"> Comp 16</a> <li><a href="lite.txt"> Lite 19</a> </UL> </body></html> grades.html
Math 19 Phys 18 Comp 16 Lite 19
Math 19 Phys 18 Comp 16 Lite 19 Mathematics Professor: C. F.Gauss
Math 19 Phys 18 Comp 16 Lite 19 Physics Professor: A. Einstein
Math 19 Phys 18 Comp 16 Lite 19 Comp. Science Professor: A. Turing
Math 19 Phys 18 Comp 16 Lite 19 Literature Professor: S. Bellow
Επιπλέον παράμετροι <FRAME SROLLING = option> option = AUTO, NO, YES <FRAME NORESIZE> Απαγορεύει την μεταβολή της διαμέρισης από το χρήστη <FRAME ΜΑRGINHEIGHT = number> <FRAME ΜΑRGINWIDTH = number> Κανονίζει το κατακόρυφο και οριζόντιο περιθώριο
Ετικέτες <META> Τοποθετούνται μεταξύ <HEAD>…</HEAD> Πληροφορούν τις "Μηχανές Αναζήτησης" (MA) Οι ΜΑ ψάχνουν συνέχεια στον Ιστό και δημιουργούν βάσεις δεδομένων που συνδέουν τις σελίδες με θεματικά αντικείμενα, λέξεις κλειδιά, ονόματα συγγραφέων κλπ Δίνουν εντολές στον Browser Υπάρχει ένα περιορισμένο σύνολο εντολών που γίνεται δεκτό μέσω των <ΜΕΤΑ> ετικετών.
Ετικέτες <META> ... <META NAME="XXX" CONTENT="YYY"> XXX παίρνει διάφορες τιμές όπως: description keywords generator copyright expires author YYY είναι κείμενο
Παραδείγματα <META NAME="description" CONTENT="Graphics"> Περιγράφει τα περιεχόμενα της σελίδας <META NAME="keywords" CONTENT="Paint,Brush"> Καθορίζει σχετικές λέξεις "κλειδιά" <META NAME="generator" CONTENT="NotePad"> Πληροφορεί για τον κατασκευαστή της σελίδας
Ετικέτες <META> <META HTTP-EQUIV="XX" CONTENT="YY"> Με ΧΧ και με αντίστοιχο ΥΥ expires Wed, 26 Feb 1977 08:21:37 GMT pragma no-cache refresh 2; URL= http://www.cs.uoi.gr/ set-cookie cookievalue=2; path=/ window-target _top content-type text/html; charset=iso-8859-7
Παραδείγματα <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1977 08:21:37 GMT"> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> Εντέλει τον Browser να μην αποθηκεύσει την σελίδα ούτε καν προσωρινά. <META HTTP-EQUIV="refresh" CONTENT="2; URL= http://www.cs.uoi.gr/ "> Σε χρόνο 2 sec "φορτώνει" το καθορισμένο URL
Ενέργειες . . . Δημιουργούμε το σύνολο των σελίδων και τις τοποθετούμε σε ένα κατάλογο έστω με το όνομα public_html Το αρχείο της κεντρικής σελίδας πρέπει να ονομαστεί: index.html ή index.htm
Cascading Style Sheets (CSS) Ποιόν σκοπό εξυπηρετούν ? Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με ένα συνεπή, εύκολο και ολοκληρωμένο τρόπο. Διευκολύνουν το συγγραφικό έργο. Συντελούν στην συστηματική τήρηση κανόνων αισθητικής ομοιομορφίας.
Εισαγωγικά Παραδείγματα Η ετικέτα <STYLE> … </STYLE> Τοποθετείται μεταξύ <head> … </head> <HEAD> <TITLE> CSS Example </TITLE> <STYLE TYPE="text/css"> H1 {font-size: 32pt; color: red} H2 {font-size: 24pt; color: blue} </STYLE> </HEAD>
Επεξηγήσεις Η ετικέτα <STYLE> επιτρέπει την διαμόρφωση των παραμέτρων των ετικετών της HTML. H1 {font-size: 32pt; color: red} Καθορίζει ότι η ετικέτα <Η1> θα χρησιμοποιεί γραμματοσειρά μεγέθους 32 στιγμών και χρώματος κόκκινου. H2 {font-size: 24pt; color: blue} Αντίστοιχα για την ετικέτα <Η2>
Στυλιστική Σύνταξη TAG {Ιδιότητα_1: τιμή; Ιδιότητα_2: τιμή; … } Όπου TAG οποιοδήποτε όνομα HTML ετικέτας, πχ: Η1 BODY P Απομένει να καθοριστούν οι ιδιότητες και οι αντίστοιχες τιμές.
Παραδείγματα Ιδιοτήτων … Παραδείγματα Ιδιοτήτων … P {text-indent: 3em ; color: red; font-size: 18pt } Καθορίζει ότι για την παράγραφο (<P>…</P>), η εσοχή θα είναι 3 φορές το μέγεθος της γραμματοσειράς. Το χρώμα της γραμματοσειράς κόκκινο. Το μέγεθος της γραμματοσειράς 18 στιγμών.
Δηλαδή η ίδια ετικέτα μπορεί να έχει περισσότερα του ενός στυλ. Κατηγορίες Classes Είναι δυνατόν να δημιουργήσουμε διάφορες κατηγορίες διαμόρφωσης για την ίδια ετικέτα. Δηλαδή η ίδια ετικέτα μπορεί να έχει περισσότερα του ενός στυλ. Παράδειγμα: H1.norm { color: #0000FF; font-size: 24pt } H1.enh { color: #FF2288; font-size: 32pt }
Στο παράδειγμα κατασκευάστηκαν δύο κατηγορίες για την ετικέτα Η1. και η norm enh Θα μπορούν δε να χρησιμοποιούνται ως εξής: <H1 class = norm> Εισαγωγή </H1> <H1 class = enh > ΚΕΦΑΛΑΙΟ VI </H1>
.norm { color: #0000FF; font-size: 24pt } Οι κατηγορίες μπορούν να ορίζονται και ξεχωριστά , χωρίς την παρουσία κάποιας ετικέτας HTML. Πχ: .norm { color: #0000FF; font-size: 24pt } .enh { color: #FF2288; font-size: 32pt } Θα μπορούν δε να χρησιμοποιούνται ως εξής: <H1 class = norm> Εισαγωγή </H1> <P class = enh > ΚΕΦΑΛΑΙΟ VI </P>
Είναι προτιμητέα η χρήση των κατηγοριών Ένας εναλλακτικός τρόπος για τον καθορισμό του στυλ είναι ο ID επιλογέας (ID selector). #pib {color: black; font-size: 40pt } Χρησιμοποιείται δε ως: <h1 id=pib > Εισαγωγή </h1> <p id=pib > Εισαγωγή </p> Είναι προτιμητέα η χρήση των κατηγοριών
Ετικέτες σε συνάφεια Παράδειγμα: P EM { background: yellow } Το παραπάνω στυλ ερμηνεύεται ως εξής: Κείμενο που είναι εντός και των δύο ετικετών: <P>… <EM> κείμενο </EM> … </P> Θα έχει κίτρινο φόντο.
Παράδειγμα <html><head> <style> P EM { background: yellow } </style> </head> <body> <h1> Παράδειγμα </h1> <p> This is an <em> emphasized piece of text </em> and it is treated specially </p> Isn't it great ? <P> <em> INDEED </em> !!! </p> </body></html>
Εμφάνιση Παράδειγμα INDEED !!! This is an emphasized piece of text and it is treated specially Isn't it great ? INDEED !!!
Ομαδοποίηση Grouping Είναι δυνατόν να ορίσει κανείς κοινές ιδιότητες για μια ομάδα ετικετών. Π.χ: H1, H2, H3 {color: red; font-family:sans-serif} Ο παραπάνω κανόνας επιβάλει ότι για τις ετικέτες <Η1>, <Η2> και <Η3> το χρώμα θα είναι κόκκινο και η γραμματοσειρά τύπου sans-serif.
Ψευδοκατηγορίες Έχουν ως αποτέλεσμα: Οι δεσμοί είναι κόκκινοι Pseudo-classes Οι δηλώσεις: A:link {color: red} A:active { color: blue; font-size: 125% } A:visited {color: green; font-size: 85% } Έχουν ως αποτέλεσμα: Οι δεσμοί είναι κόκκινοι Οι ενεργοί δεσμοί μπλε και 125% μεγαλύτεροι Οι χρησιμοποιημένοι δεσμοί πράσινοι και 85% μικρότεροι Anchor pseudo-classes
Πρώτη Γραμμή - Πρώτο γράμμα Οι δηλώσεις: P:first-line {font-variant: small-caps; font-weight: bold} P:first-letter {font-size: 300% ; float: left} Επηρεάζουν αντίστοιχα την πρώτη γραμμή και το πρώτο γράμμα μιας παραγράφου.
CGI Scripts
CGI Scripts CGI: Common Gateway Interface To Common Gateway Interface είναι ένα πρότυπο για την παροχή διεπαφών εφαρμογών σε Web servers με βάση τη είσοδο που λαμβάνεται από τους Web Browsers. Ουσιαστικά μιας εφαρμογής που τρέχει στο σύστημα και στον Web Server. Τα CGI Scripts επιτρέπουν στους χρήστες των σελίδων να ‘αλληλεπιδρούν’ δυναμικά με μια σελίδα. Ένα CGI script εκτελείται σε πραγματικό χρόνο, έτσι ώστε να παράγει ως έξοδο δυναμικές πληροφορίες.
Η λειτουργία ενός Script Ένα URL το οποίο χρησιμοποιείται από έναν Web Browser αναφέρεται σε ένα script. Ο browser συνδέεται με τον server μέσω αυτού του URL. Όταν ο server λάβει την αίτηση από τον Browser εκτελεί το script στο οποίο αναφέρεται το URL. Στη συνέχεια, το script ανάλογα με την είσοδο του browser εκτελεί συγκεκριμένες ενέργειες όπως πρόσβαση σε βάση δεδομένων ή κλήση άλλων υποπρογραμμάτων. Ακολούθως παράγει κάποια έξοδο και ο server την χρησιμοποιεί και την επιστρέφει στον browser ο οποίος στο τελικό στάδιο την εμφανίζει στην οθόνη του χρήστη.
Επεξεργασία φορμών Οι περισσότερες φόρμες αποτελούνται από δύο διαφορετικά μέρη: Τον HTML κώδικα για την φόρμα και το script που θα αφορά την επεξεργασία των στοιχείων της φόρμας όταν το script θα εκτελείται στον server. Η ιδιότητα ACTION η οποία βρίσκεται στο tag FORM περιέχει το όνομα το script που εκτελείται στον server. Π.χ. <FORM ACTION=“http://www.cs.uoi.gr/cgi-bin/script1”>
Ιδιότητα METHOD Φορμών Καθορίζει τον τρόπο αποστολής των δεδομένων της φόρμας από τον browser του χρήστη στον server, και από εκεί στο script. Οι δυνατές τιμές είναι δύο: GET ή POST
Ιδιότητα METHOD Φορμών Ι Με τη χρήση της GET τα δεδομένα που περιέχονται στη φόρμα πακετάρονται και τοποθετούνται στο τέλος του URL που καθορίστηκε από την ACTION. Τα δεδομένα εκχωρούνται στην προκαθορισμένη μεταβλητή περιβάλλοντος QUERY_STRING. Με την χρήση της POST τα δεδομένα στέλνονται ξεχωριστά από την κλήση προς το script. Τα δεδομένα στέλνονται σαν διαφορετική δομή δεδομένων.