Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια
Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2
Cascading Style Sheets (CSS) Cascading Style Sheets, που μεταφράζονται ως Επικαλυπτόμενα ή Διαδοχικά Φύλλα Στυλ Καθορισμός εμφάνισης των στοιχείων ενός δομημένου εγγράφου Διαχωρισμός δομής (HTML) και παρουσίασης (CSS) Η CSS3 είναι η τελευταία έκδοση, υποστηρίζεται από όλους τους web browsers και δίνει ως αποτέλεσμα έναν εκπληκτικό σχεδιασμό ιστοσελίδας. Εισαγωγή στην HTML 3
Cascading Style Sheets (συνέχεια) Ορίζουν την εμφάνιση των στοιχείων ενός εγγράφου HTML. Οι προγραμματιστές μπορούν να ορίσουν μία μόνο φορά την εμφάνιση των στοιχείων και όλα τα στοιχεία του ίδιου τύπου εμφανίζονται με τον ίδιο τρόπο στη σελίδα. Διαχωρίζουν το περιεχόμενο της σελίδας από τον τρόπο εμφάνισής του. Συμβάλλουν στην ομοιόμορφη παρουσίαση όλων των σελίδων που ανήκουν σε έναν δικτυακό τόπο.
CSS Πλεονεκτήματα Μειώνουν την πολυπλοκότητα στην ανάπτυξη και τη δημιουργία των σελίδων HTML Ευκολότερη συντήρηση Καλύτερη εκμετάλλευση της cache μνήμης του browser Προσφέρουν αυξημένες δυνατότητες προσδιορισμού της εμφάνισης της πληροφορίας σε σχέση με την HTML γλώσσα Εισαγωγή στην HTML 5
Μορφή Τα CSS είναι ουσιαστικά μία συλλογή από στοιχεία της μορφής: element_name { } property1: value1; property2: value2; property3: value3; Παράδειγμα: h1 { color:blue; font-size:16pt }
Ανάλυση ενός CSS στοιχείου Στοιχείο: προσδιορίζει ποια στοιχεία αφορά ο κανόνας (όλα τα στοιχεία τύπου header2) Προσοχή: στα ονόματα των ιδιοτήτων και τις επιτρεπτές τιμές τους!!! header2 { } font-size: 5; color: blue; font-weight: bold; Ιδιότητα: ποιο γνώρισμα προσδιορίζεται Τιμή: που εκχωρείται στην ιδιότητα αυτή Διαχωριστής δηλώσεων: μετά από κάθε δήλωση, εκτός από την τελευταία Εισαγωγή στην HTML 7
Πως χρησιμοποιούμε CSS; Τρεις τρόποι: Εξωτερικό αρχείο που περιέχει φύλλα στυλ (external/linked stylesheets) Εσωτερικά φύλλα στυλ (internal ή embedded stylesheets) CSS που αφορά μεμονωμένο στοιχείο (inline styles) Εισαγωγή στην HTML 8
Εξωτερικό CSS αρχείο Αρχείο χωριστό με κατάληξη.css που περιλαμβάνει όλους τους κανόνες για το πως θα εμφανίζονται τα διάφορα στοιχεία. Συνδέεται με το αντίστοιχο έγγραφο HTML με χρήση ενός tag <link> στο <head> Εισαγωγή στην HTML 9
Εξωτερικό αρχείο CSS Έστω ένα αρχείο με όνομα mystyles.css και περιεχόμενο: body {background-color: yellow} h1 {color:blue; font-size:20pt} h2 {font-family:courier; font-size:50%; color:red} hr {color:navy; width:80%} a:link {color:green} a:visited {color:gray}
Εξωτερικό αρχείο CSS (συνέχεια) Το αντίστοιχο HTML στο οποίο θέλουμε να χρησιμοποιήσουμε το mystyles.css για την εμφάνιση του περιεχομένου: <html> <head> </head> <body> </body> </html> <link rel="stylesheet" type="text/css" href="mystyles.css" />
Εσωτερικά φύλλα στυλ Οι κανόνες συμπληρώνονται μέσα στο HTML αρχείο, στο <head> και εντός του tag <style> </style> <head> <title> Μαθαίνοντας τα CSS</title> <style> </style> body {background-color: yellow} h1 {color:blue; font-size:20pt} a:link {color:green} a:visited {color:gray} </head> Εισαγωγή στην HTML 12
Inline CSS Οι κανόνες συμπληρώνονται μέσα στο HTML αρχείο, σε μεμονωμένα στοιχεία: <html> <head> </head> <body> <h1 style= font-size: 30pt; font-style=italic; > Μαθαίνοντας τα CSS Styles</h1> </body> </html>
Παράδειγμα με εξωτερικό CSS Δημιουργούμε ένα αρχείο mystyles.css με τα εξής: body { } h1 { } width: 800px; color: #472C1A; font-size: 4; font-family: Helvetica, Arial, sans serif; font-size: 300%; font-style: bold; color: blue; font-family: Georgia; Εισαγωγή στην HTML 14
Παράδειγμα με CSS (συνέχεια) Στο index.html, προσθέτουμε το εξωτερικό css αρχείο: <html> </head> <head> <link rel="stylesheet" type="text/css" href="mystyles.css" /> <title> </title> My blog <meta charset="utf-8"> Εισαγωγή στην HTML 15
Παράδειγμα με CSS (συνέχεια) Εισαγωγή στην HTML 16
Φόρμες - εισαγωγή Οι φόρμες της html χρησιμοποιούνται για να πάρουν ως είσοδο δεδομένα από τον επισκέπτη μιας ιστοσελίδας. Υπάρχουν διάφορα διαθέσιμα στοιχεία φόρμας που μπορεί να περιληφθούν για είσοδο στοιχείων σε μια φόρμα: πεδία κειμένου (text area), πλαίσια ελέγχου (checkboxs), κουμπιά επιλογής (radio buttons), κουμπιά εισόδου (input buttons) κ.α. Εισαγωγή στην HTML 17
Φόρμες - δομή Οι φόρμες δεν χρησιμοποιούνται μόνες τους. Χρησιμοποιούνται σε συνδυασμό με κάποια γλώσσα προγραμματισμού ή εφαρμογή που θα μπορέσει να επεξεργαστεί τα δεδομένα εισόδου που έχουν δοθεί από τον χρήστη. Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε την ετικέτα <form> με την εξής δομή: <form> Στοιχεία εντός της φόρμας. </form> Εισαγωγή στην HTML 18
Φόρμες: TextArea Η ετικέτα <textarea> καθορίζει ένα στοιχείο ελέγχου εισαγωγής κειμένου που αποτελείται από πολλαπλές γραμμές. Το μέγεθος της περιοχής κειμένου ρυθμίζεται από τις ιδιότητες rows και cols. <FORM> <TEXTAREA NAME="comments">Περιοχή κειμένου με 2 γραμμές ύψος και 20 χαρακτήρες πλάτος </TEXTAREA><BR> <TEXTAREA NAME="comments2"rows=8 cols=40> Περιοχή κειμένου με 8 γραμμές ύψος και 40 χαρακτήρες πλάτος </TEXTAREA> </FORM> Εισαγωγή στην HTML 19
Φόρμες: TextArea
Φόρμες: Select Το στοιχείο select χρησιμοποιείται για να δημιουργήσει μια drop-down λίστα. Η ετικέτα <option> μέσα στο στοιχείο select καθορίζει τις διαθέσιμες επιλογές της λίστες. <Η3> Χρήση φόρμας επιλογής </Η3> <FORM> Τύπος σύνδεσης: <BR> <SELECT NAME="network"> NAME= network > <OPTION VALUE="pstn"> PSTN <OPTION VALUE="isdn"> ISDN <OPTION VALUE="adsl"> ADSL </SELECT> </FORM>
Φόρμες: Select Εισαγωγή στην HTML 22
Φόρμες: <input> Η ετικέτα <input> καθορίζει ένα πεδίου εισόδου όπου ο χρήστης εισάγει δεδομένα. Ένα πεδίο <input> μπορεί να πάρει διάφορες μορφές αναλόγως με την ιδιότητα (type) που χρησιμοποιείται κάθε φορά. <input type="checkbox"> για πλαίσιο ελέγχου <input type= radio"> για κουμπί επιλογής <input type="text"> για την είσοδο κειμένου <input type="password"> για είσοδο κειμένου με κρυμμένους χαρακτήρες <input type="submit"> για κουμπί υποβολής Εισαγωγή στην HTML 23
Φόρμες: input checkbox Τα πλαίσια ελέγχου χρησιμοποιούνται όταν υπάρχουν μία ή παραπάνω επιλογές που πρέπει να επιλέξει ο επισκέπτης της ιστοσελίδας. <H2> Παράδειγμα πλαισίων ελέγχου</h2> <FORM> <INPUT TYPE="checkbox" NAME="check1" VALUE="value1"> Ένα checkbox<br> <INPUT TYPE="checkbox" NAME="check2" VALUE="value2" CHECKED> Ένα προεπιλεγμένο checkbox<br><br> </FORM> Εισαγωγή στην HTML 24
Φόρμες: input checkbox Εισαγωγή στην HTML 25
Φόρμες: input radio Το κουμπί επιλογής χρησιμοποιείται όταν πρέπει να γίνει μία επιλογή από διάφορες διαθέσιμες επιλογές. <H3> Κουμπιά επιλογών </H3> <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> Επιλογή 1<BR> <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> Επιλογή 2<BR> <INPUT TYPE="radio" NAME="choice" VALUE="choice3"> Επιλογή 3 </FORM> Εισαγωγή στην HTML 26
Φόρμες: input radio Εισαγωγή στην HTML 27
Φόρμες: input text & password Εισαγωγή με ιδιότητες απλού κειμένου και κειμένου με κρυμμένους χαρακτήρες. <H3> Σύνδεση χρήστη </H3> <FORM> Εισαγωγή κειμένου:<br> <INPUT TYPE="text" NAME="Phone" SIZE="15" MAXLENGTH="12"><BR><BR> Εισαγωγή κωδικού πρόσβασης:<br> <INPUT TYPE="password" TYPE password NAME="secret" Size="30" MAXLENGTH="30"><BR> </FORM> Εισαγωγή στην HTML 28
Φόρμες: input text & password Εισαγωγή στην HTML 29
Φόρμες: input reset & submit Το κουμπί εκκαθάρισης επαναφέρει τη φόρμα στην αρχική της κατάσταση και το κουμπί αποστολής δεδομένων υποβάλλει το πεδίο του κειμένου που έχει συμπληρωθεί από τον χρήστη. <FORM> Εισαγωγή κειμένου:<br> <INPUT TYPE="text" <BR><BR><BR> <INPUT TYPE="reset" VALUE="Καθαρισμός φόρμας" <BR><BR> <INPUT TYPE="submit" VALUE="Αποστολή δεδομένων" </FORM> Εισαγωγή στην HTML 30
Φόρμες: input reset & submit Εισαγωγή στην HTML 31