Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια"

Αλθαία Αντωνοπούλου
6 χρόνια πριν
Προβολές:

1 Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια

2 Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2

3 Cascading Style Sheets (CSS) Cascading Style Sheets, που μεταφράζονται ως Επικαλυπτόμενα ή Διαδοχικά Φύλλα Στυλ Καθορισμός εμφάνισης των στοιχείων ενός δομημένου εγγράφου Διαχωρισμός δομής (HTML) και παρουσίασης (CSS) Η CSS3 είναι η τελευταία έκδοση, υποστηρίζεται από όλους τους web browsers και δίνει ως αποτέλεσμα έναν εκπληκτικό σχεδιασμό ιστοσελίδας. Εισαγωγή στην HTML 3

4 Cascading Style Sheets (συνέχεια) Ορίζουν την εμφάνιση των στοιχείων ενός εγγράφου HTML. Οι προγραμματιστές μπορούν να ορίσουν μία μόνο φορά την εμφάνιση των στοιχείων και όλα τα στοιχεία του ίδιου τύπου εμφανίζονται με τον ίδιο τρόπο στη σελίδα. Διαχωρίζουν το περιεχόμενο της σελίδας από τον τρόπο εμφάνισής του. Συμβάλλουν στην ομοιόμορφη παρουσίαση όλων των σελίδων που ανήκουν σε έναν δικτυακό τόπο.

5 CSS Πλεονεκτήματα Μειώνουν την πολυπλοκότητα στην ανάπτυξη και τη δημιουργία των σελίδων HTML Ευκολότερη συντήρηση Καλύτερη εκμετάλλευση της cache μνήμης του browser Προσφέρουν αυξημένες δυνατότητες προσδιορισμού της εμφάνισης της πληροφορίας σε σχέση με την HTML γλώσσα Εισαγωγή στην HTML 5

6 Μορφή Τα CSS είναι ουσιαστικά μία συλλογή από στοιχεία της μορφής: element_name { } property1: value1; property2: value2; property3: value3; Παράδειγμα: h1 { color:blue; font-size:16pt }

7 Ανάλυση ενός CSS στοιχείου Στοιχείο: προσδιορίζει ποια στοιχεία αφορά ο κανόνας (όλα τα στοιχεία τύπου header2) Προσοχή: στα ονόματα των ιδιοτήτων και τις επιτρεπτές τιμές τους!!! header2 { } font-size: 5; color: blue; font-weight: bold; Ιδιότητα: ποιο γνώρισμα προσδιορίζεται Τιμή: που εκχωρείται στην ιδιότητα αυτή Διαχωριστής δηλώσεων: μετά από κάθε δήλωση, εκτός από την τελευταία Εισαγωγή στην HTML 7

8 Πως χρησιμοποιούμε CSS; Τρεις τρόποι: Εξωτερικό αρχείο που περιέχει φύλλα στυλ (external/linked stylesheets) Εσωτερικά φύλλα στυλ (internal ή embedded stylesheets) CSS που αφορά μεμονωμένο στοιχείο (inline styles) Εισαγωγή στην HTML 8

9 Εξωτερικό CSS αρχείο Αρχείο χωριστό με κατάληξη.css που περιλαμβάνει όλους τους κανόνες για το πως θα εμφανίζονται τα διάφορα στοιχεία. Συνδέεται με το αντίστοιχο έγγραφο HTML με χρήση ενός tag <link> στο <head> Εισαγωγή στην HTML 9

10 Εξωτερικό αρχείο 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}

11 Εξωτερικό αρχείο CSS (συνέχεια) Το αντίστοιχο HTML στο οποίο θέλουμε να χρησιμοποιήσουμε το mystyles.css για την εμφάνιση του περιεχομένου: <html> <head> </head> <body> </body> </html> <link rel="stylesheet" type="text/css" href="mystyles.css" />

12 Εσωτερικά φύλλα στυλ Οι κανόνες συμπληρώνονται μέσα στο 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

13 Inline CSS Οι κανόνες συμπληρώνονται μέσα στο HTML αρχείο, σε μεμονωμένα στοιχεία: <html> <head> </head> <body> <h1 style= font-size: 30pt; font-style=italic; > Μαθαίνοντας τα CSS Styles</h1> </body> </html>

14 Παράδειγμα με εξωτερικό 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

15 Παράδειγμα με 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

16 Παράδειγμα με CSS (συνέχεια) Εισαγωγή στην HTML 16

17 Φόρμες - εισαγωγή Οι φόρμες της html χρησιμοποιούνται για να πάρουν ως είσοδο δεδομένα από τον επισκέπτη μιας ιστοσελίδας. Υπάρχουν διάφορα διαθέσιμα στοιχεία φόρμας που μπορεί να περιληφθούν για είσοδο στοιχείων σε μια φόρμα: πεδία κειμένου (text area), πλαίσια ελέγχου (checkboxs), κουμπιά επιλογής (radio buttons), κουμπιά εισόδου (input buttons) κ.α. Εισαγωγή στην HTML 17

18 Φόρμες - δομή Οι φόρμες δεν χρησιμοποιούνται μόνες τους. Χρησιμοποιούνται σε συνδυασμό με κάποια γλώσσα προγραμματισμού ή εφαρμογή που θα μπορέσει να επεξεργαστεί τα δεδομένα εισόδου που έχουν δοθεί από τον χρήστη. Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε την ετικέτα <form> με την εξής δομή: <form> Στοιχεία εντός της φόρμας. </form> Εισαγωγή στην HTML 18

19 Φόρμες: 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

20 Φόρμες: TextArea

21 Φόρμες: 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>

22 Φόρμες: Select Εισαγωγή στην HTML 22

23 Φόρμες: <input> Η ετικέτα <input> καθορίζει ένα πεδίου εισόδου όπου ο χρήστης εισάγει δεδομένα. Ένα πεδίο <input> μπορεί να πάρει διάφορες μορφές αναλόγως με την ιδιότητα (type) που χρησιμοποιείται κάθε φορά. <input type="checkbox"> για πλαίσιο ελέγχου <input type= radio"> για κουμπί επιλογής <input type="text"> για την είσοδο κειμένου <input type="password"> για είσοδο κειμένου με κρυμμένους χαρακτήρες <input type="submit"> για κουμπί υποβολής Εισαγωγή στην HTML 23

24 Φόρμες: 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

25 Φόρμες: input checkbox Εισαγωγή στην HTML 25

26 Φόρμες: 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

27 Φόρμες: input radio Εισαγωγή στην HTML 27

28 Φόρμες: 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

29 Φόρμες: input text & password Εισαγωγή στην HTML 29

30 Φόρμες: input reset & submit Το κουμπί εκκαθάρισης επαναφέρει τη φόρμα στην αρχική της κατάσταση και το κουμπί αποστολής δεδομένων υποβάλλει το πεδίο του κειμένου που έχει συμπληρωθεί από τον χρήστη. <FORM> Εισαγωγή κειμένου:<br> <INPUT TYPE="text" <BR><BR><BR> <INPUT TYPE="reset" VALUE="Καθαρισμός φόρμας" <BR><BR> <INPUT TYPE="submit" VALUE="Αποστολή δεδομένων" </FORM> Εισαγωγή στην HTML 30

31 Φόρμες: input reset & submit Εισαγωγή στην HTML 31

Σχετικά έγγραφα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη