ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης

2 Εισαγωγή HTML Στοιχεία HTML Παράμετροι των Tag Βασική δομή HTML εγγράφου XHTML <!DOCTYPE> tag Στοιχείο Meta Βασικά HTML Tags Σύνδεσμοι Πίνακες Λίστες Φόρμες και είσοδος δεδομένων Εικόνες Στοιχεία Div και Span Στυλ HTML Events στην HTML 4.0 Scripts (Javascript) CSS Στυλ CSS Γιατί χρειάζονται τα CSS; Σύνταξη των CSS CSS Background CSS Text CSS Font CSS Border CSS Margin CSS Padding References Διαφάνεια 2

3 Τι είναι η HTML; Είναι μια γλώσσα για την περιγραφή ιστοσελίδων Hyper Text Markup Language Τα HTML αρχεία είναι αρχεία κειμένου που περιέχουν markup tags Τα markup tags πληροφορούν τον πλοηγό για τον τρόπο που θα παρουσιάσει τη σελίδα Κατάληξη αρχείου htm ή html Για τη δημιουργία τους αρκεί ένας απλός επεξεργαστής κειμένου Διαφάνεια 3

5 Τα HTML αρχεία είναι αρχεία κειμένου που αποτελούνται από στοιχεία HTML (HTML elements) Τα HTML elements καθορίζονται χρησιμοποιώντας HTML tags Τα HTML tags συνήθως χρησιμοποιούνται σε ζεύγη, όπως για παράδειγμα <b> (tag αρχής) και </b> (tag τέλους) Το κείμενο μεταξύ των tag αρχής και τέλους είναι το περιεχόμενο του στοιχείου (element content) Δεν παίζει ρόλο αν είναι πεζά ή κεφαλαία (not case sensitive) Διαφάνεια 5

6 Τα Tags μπορεί να έχουν παραμέτρους. Οι παράμετροι παρέχουν επιπλέον πληροφορία για ένα HTML element. π.χ. <table border="0"> Ζεύγη όνομα-τιμή (όνομα= τιμή ) Προσδιορίζονται στο tag αρχής ενός HTML element Διαφάνεια 6

7 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > <html> <head> <title>...</title>... </head> <body>... </body> </html> <meta name="keywords" content= C, C++, C# /> Διαφάνεια 7

8 Extensible HyperText Markup Language Μια πιο αυστηρά καθορισμένη συντακτικά έκδοση της HTML Τα στοιχεία της HTML 4.01 συνδυάζονται με τη σύνταξη της XML Αποτελεί σύσταση του W3C Διαφάνεια 8

9 Αυτό το tag πληροφορεί τον πλοηγό για το ποια HTML ή XHTML έκδοση χρησιμοποιεί το έγγραφο HTML Strict DTD Χρησιμοποιείτε αυτή την έκδοση για ξεκάθαρη επισήμανση (markup), χωρίς περιττά στοιχεία παρουσίασης. Χρησιμοποιείτε την μαζί με CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Διαφάνεια 9

10 HTML Transitional DTD Χρησιμοποιείτε αυτή την έκδοση όταν χρειάζεται να χρησιμοποιήστε πληροφορία παρουσίασης στην HTML στην περίπτωση που οι χρήστες στους οποίους απευθύνεστε δεν έχουν πλοηγούς που υποστηρίζουν CSS. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Διαφάνεια 10

11 Η HTML περιλαμβάνει επίσης το στοιχείο meta το οποίο περιλαμβάνεται στο head ενός HTML εγγράφου. Παρέχει μετα-πληροφορία για το έγγραφο Περιγράφει το περιεχόμενο του εγγράφου <meta name="description" content= Source code for C, C++, C#"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="keywords" content= C, C++, C#"> Διαφάνεια 11

12 Επικεφαλίδες (Headings) Οι επικεφαλίδες ορίζονται με τα tags <h1> έως <h6>. Το tag <h1> ορίζει τη μεγαλύτερη και σημαντικότερη ιεραρχικά επικεφαλίδα. Αντίστοιχα το tag <h6> ορίζει τη μικρότερη επικεφαλίδα. <h1>hy-464: Επικοινωνία Ανθρώπου - Μηχανής</h1> <h2>hy-464: Επικοινωνία Ανθρώπου - Μηχανής</h2> <h3>hy-464: Επικοινωνία Ανθρώπου - Μηχανής</h3> <h6>hy-464: Επικοινωνία Ανθρώπου - Μηχανής</h6> Παράγραφοι (Paragraphs) Οι παράγραφοι ορίζονται με το tag <p> Π.χ. <p>αυτή είναι μία παράγραφος</p> Διαφάνεια 12

13 Αλλαγή γραμμής (Line Breaks) Το tag <br> οδηγεί σε αλλαγή γραμμής Κενό (Non-breaking Space) Για να προσθέσετε τον κενό χαρακτήρα στο κείμενό σας, χρησιμοποιήστε το Σχόλια Περιβάλλονται από το tag αρχής  π.χ.  Διαφάνεια 13

14 Για να δημιουργήσετε ένα σύνδεσμο σε ένα άλλο έγγραφο, χρησιμοποιήστε το tag <a> (anchor) Μπορεί να παραπέμπει σε οποιονδήποτε πόρο στο διαδίκτυο (HTML σελίδα, εικόνα, αρχείο ήχου, βίντεο, κλπ.) <a href=" target="_blank">google</a> Παράμετρος target _blank: ανοίγει το σύνδεσμο σε νέο παράθυρο _self: ανοίγει το σύνδεσμο στο ίδιο frame από το οποίο επιλέχθηκε _parent: ανοίγει το σύνδεσμο στο γονικό frameset _top: ανοίγει το σύνδεσμο στο πλήρες παράθυρο Διαφάνεια 14

15 Εσωτερικοί Σύνδεσμοι (Named Anchors) Με τη χρήση εσωτερικών συνδέσμων μπορούμε να δημιουργήσουμε συνδέσμους που οδηγούν κατευθείαν σε ένα συγκεκριμένο τμήμα μιας ιστοσελίδας Χρησιμοποιήστε την παράμετρο name για να ορίσετε το σημείο αναφοράς του εσωτερικού συνδέσμου στο έγγραφο <a name="tips">χρήσιμες συμβουλές</a> Χρησιμοποιήστε την παράμετρο href για να δημιουργήσετε το σύνδεσμο προς το σημείο αναφοράς. <a href="#tips">μετάβαση στην ενότητα με τις Χρήσιμες Συμβουλές</a> Διαφάνεια 15

16 Ένας πίνακας αποτελείται από γραμμές (που ορίζονται με το <tr> tag), και κάθε γραμμή αποτελείται από κελιά δεδομένων (που ορίζονται με το <td> tag) Ένα κελί δεδομένων μπορεί να περιέχει κείμενο, εικόνες, λίστες, παραγράφους, φόρμες, οριζόντιες γραμμές, πίνακες, κλπ. <table border="1"> <tr> </tr> <tr> </tr> <tr> </tr> <th>heading 1</th> <th>heading 2</th> <td>1,1</td> <td>1,2</td> <td>2,1</td> <td>2,2</td> ΗΥ464: Αλληλεπίδραση </table> Ανθρώπου - Υπολογιστή Διαφάνεια 16

17 Παράμετροι colspan και rowspan <table border="1"> <caption>επικεφαλίδα</caption> <tr> <th>υπηρεσία</th><th colspan="2">τηλέφωνο</th> </tr> <tr> <td>γραμματεία Προπτυχιακών Φοιτητών</td> <td> </td> <td> </td> </tr> </table> Διαφάνεια 17

18 Παράμετροι width και height Σταθερές: περιγράφονται σε pixels Με ποσοστό: Ποσοστό του διαθέσιμου οριζόντιου ή κατακόρυφου χώρου Συστήνεται να προτιμάτε τις τιμές με χρήση ποσοστών <table border="1" width= 40" height= 35"> <table border="1" width="50%" height= 40%"> Διαφάνεια 18

19 Η HTML υποστηρίζει ταξινομημένες (ordered), μη ταξινομημένες (unordered) λίστες, λίστες ορισμών (definition) και εμφωλευμένες (nested) λίστες Μη ταξινομημένες Λίστες (Unordered Lists) Μια μη ταξινομημένη λίστα είναι μια λίστα αντικειμένων που μαρκάρονται με bullets Ταξινομημένες Λίστες (Ordered Lists) Μια ταξινομημένη λίστα είναι επίσης μια λίστα αντικειμένων που μαρκάρονται όμως με αριθμούς Λίστες ορισμών (Definition Lists) Μια λίστα ορισμών δεν είναι μια λίστα αντικειμένων. Πρόκειται για μια λίστα όρων με την αντίστοιχη εξήγησή τους Διαφάνεια 19

20 Ταξινομημένη Λίστα (Ordered List) <ol> <li>red</li> <li>green</li> <li>blue</li> </ol> Μη Ταξινομημένη Λίστα (Unordered List) <ul> <li>red</li> <li>green</li> <li>blue</li> </ul> Λίστα Ορισμών (Definition List) <dl> <dt>coffee</dt> <dd>black drink</dd> <dt>milk</dt> <dd>white drink</dd> </dl> Διαφάνεια 20

21 Εμφωλευμένη λίστα (Nested List) <ul type="square"> <li>specific <ol type="lower-roman"> <li>rdf Validator</li> <li>feed Validator</li> <li>p3p Validator</li></ol> </li> <li>basic <ul type="circle"> <li>markup Validator</li> <li>css Validator <ol type="a" start="3"> <li>by URI</li> <li>by File Upload</li> </ol> </li></ul></li></ul> Διαφάνεια 21

22 Φόρμες Μια φόρμα είναι μια περιοχή που μπορεί να περιλαμβάνει στοιχεία φόρμας (form elements) Τα στοιχεία φόρμας είναι στοιχεία που επιτρέπου στον χρήστη να εισάγει πληροφορία (όπως για παράδειγμα text fields, textarea fields, drop-down menus, radio buttons, checkboxes, κλπ.) Η φόρμα ορίζεται από το tag <form></form> Input Το πιο συχνά χρησιμοποιούμενο στοιχείο φόρμας είναι το <input> tag. Το είδος του στοιχείου εισόδου δεδομένων προσδιορίζεται μέσω της παραμέτρου type (Text Field, Radio Button, Checkbox) Drop Down Boxes, TextAreas Διαφάνεια 22

23 Πεδία Κειμένου / Password Χρησιμοποιούνται για να πληκτρολογήσει ο χρήστης γράμματα, αριθμούς, κλπ. σε μια φόρμα. Για τα πεδία password ορίστε την παράμετρο type ως type= password. <form>όνομα: </form> <input type="text" name="firstname"> Κουμπιά επιλογής (Radio Buttons) Χρησιμοποιούνται για να επιλέξει ο χρήστης μια επιλογή από ένα σύνολο προκαθορισμένων επιλογών <form> </form> <input type="radio" name="sex" value="male">άνδρας<br> <input type="radio" name="sex" value="female">γυναίκα Διαφάνεια 23

24 Πλαίσια επιλογής (Checkboxes) Χρησιμοποιούνται για να επιλέξει ο χρήστης μια ή περισσότερες επιλογές από ένα σύνολο προκαθορισμένων επιλογών <input type="checkbox" name="vehicle" value="bike" />Ποδήλατο<br> <input type="checkbox" name="vehicle" value="car" />Αυτοκίνητο<br> <input type="checkbox" name="vehicle" value="airplane" />Αεροπλάνο<br> Drop Down Boxes <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat">fiat</option> </select> Διαφάνεια 24

25 Περιοχή Κειμένου (Textarea) <textarea rows= 5" cols= 25">Αυτή είναι μια περιοχή κειμένου</textarea> Κρυφά Πεδία (Hidden Fields) Δεν είναι ορατά στον χρήστη Συχνά χρησιμοποιούνται για να αποθηκεύουν μια default τιμή <input type= hidden name= languageid value= 2 /> Διαφάνεια 25

26 Παράμετροι Action και Method Παράμετρος action Προσδιορίζει το όνομα του αρχείου στο οποίο θα σταλθεί το περιεχόμενο της φόρμας Παράμετρος method GET: Αυτή η μέθοδος στέλνει τα περιεχόμενα της φόρμας σε ένα URL που προσδιορίζεται με ζεύγος όνομα-τιμή Χρήσιμη για την προσθήκη ως bookmark του αποτελέσματος POST: Αυτή η μέθοδος στέλνει τα περιεχόμενα της φόρμας ως HTTP transaction Πιο ασφαλής από την μέθοδος get χωρίς περιορισμούς μεγέθους Διαφάνεια 26

27 Κουμπί Submit Ενημερώνει τον πλοηγό να συγκεντρώσει όλες τις επιλογές, τιμές και κείμενο που έχει εισαχθεί στα στοιχεία της φόρμας και να το στείλει εκεί που καθορίζεται στην παράμετρο action του <form> tag Κουμπί Reset Επαναφέρει την φόρμα στην αρχικά καθορισμένη της κατάσταση Διαφάνεια 27

28 <form action= test_action.asp" method="get"> <input type="checkbox" name="vehicle" value="bike" checked="checked" /> Ποδήλατο<br/> <input type="checkbox" name="vehicle" value="car" />Αυτοκίνητο<br/> <input type="checkbox" name="vehicle" value="airplane" />Αεροπλάνο<br/> <br/> <input type="submit" value="ok"> <input type="reset" value="καθαρισμός"> </form> Διαφάνεια 28

29 Χρήση του tag <img> Παράμετρος src (η πηγή προέλευσης του αρχείου εικόνας) Παράμετρος alt (το εναλλακτικό κείμενο της εικόνας) <img src="/images/test.gif" alt="test image" width="144" height="50" /> <img src=" /> Διαφάνεια 29

30 Τα tags <span> και <div> είναι πολύ χρήσιμα ιδιαίτερα όταν χρησιμοποιούνται σε CSS <div> Χρησιμοποιείται ως περιέκτης άλλων tags Εναλλακτικός τρόπος παρουσίασης περιεχομένου αντί της χρήσης πινάκων Δημιουργεί αλλαγή γραμμής πριν και μετά Παράμετροι: id, width, height, style, align,... <span> Αλλάζει το στυλ των στοιχείων χωρίς να χρειάζεται να τοποθετηθούν σε ένα νέο στοιχείο ομαδοποίησης στο έγγραφο Δεν υπάρχει αλλαγή γραμμής Δεν υποστηρίζεται η παράμετρος align Διαφάνεια 30

31 <div id="menu" align="right" > <a href="">home</a> <a href="">contact</a> <a href="">about</a> </div> <div id="content" align="left" bgcolor="white"> <h5>content Articles</h5> <p>this paragraph would be your <span style="color: red;">content paragraph</span> with all of your readable material.</p> </div> Διαφάνεια 31

32 Χρώματα 16 βασικά χρώματα (black, yellow, blue, green, navy, red, lime,...) RGB (Red, Green, Blue) Κάθε ένα έχει τιμή από το 0 (καθόλου από αυτό το χρώμα) έως το 255 (πλήρως αυτό το χρώμα) π.χ. (0,0,255) = μπλε, (255,255,255) = λευκό Γραμματοσειρά <font></font> μέγεθος (1 έως 7) χρώμα είδος (Arial, Book Antiqua, Garamond,...) Διαφάνεια 32

33 <p><font size= 6" face="georgia, Arial" color= maroon >C</font> ustomize your font to achieve a desired look.</p> Παράμετρος bgcolor Χρησιμοποιείται για τον έλεγχο του χρώματος φόντου ενός εγγράφου HTML, για τη σελίδα και το φόντο των πινάκων Χρησιμοποιείτε CSS για επιπλέον διαμόρφωση του στυλ φόντου <body bgcolor="silver"> <table bgcolor="rgb(0,0,255)" border="1"> Διαφάνεια 33

34 Τα γεγονότα (events) πυροδοτούν ενέργειες του πλοηγού, όταν για παράδειγμα ένας χρήστης επιλέγει μέσω του ποντικού ένα HTML στοιχείο Window Events (onload, onunload) Form Element Events (onchange, onsubmit, onfocus,...) Keyboard Events (onkeydown, onkeypress,...) Mouse Events (onclick, ondblclick, onmousemove, onmouseover,...) <form> <input type = "button" onclick = "myfunction('hello')" value = "Call function"> </form> Διαφάνεια 34

35 Client-side γλώσσα scripting Προσθέτει χαρακτηριστικά αλληλεπίδρασης στις HTML σελίδες Χρησιμοποιείται για: την εισαγωγή κειμένου δυναμικά σε μια HTML σελίδα την ανάγνωση/εγγραφή του περιεχομένου των στοιχείων HTML την επικύρωση δεδομένων φόρμας τον προσδιορισμό του πλοηγού του χρήστη τη δημιουργία cookies Διαφάνεια 35

36 Που τοποθετείται η JavaScript Στο τμήμα Head ή στο Body <head> <script type="text/javascript">... </script> </head> Εξωτερικά script <head> <script src= myscript.js"></script> </head> Διαφάνεια 36

38 Cascading Style Sheets Διαχωρίζουν το περιεχόμενο των HTML εγγράφων από την παρουσίαση του εγγράφου p { text-align: center; color: black; font-family: arial; } Πολλαπλοί ορισμοί στυλ, με αύξουσα σειρά προτεραιότητας: Πλοηγού (Browser default) Εξωτερικό φύλλο στυλ (External style sheet) Εσωτερικό φύλλο στυλ (Internal style sheet) μέσα στο <head> tag Εσωτερικό στυλ, σε ένα στοιχείο HTML Για κοινούς ορισμούς υπερισχύει η τελευταία δήλωση Έτσι για παράδειγμα ένα εσωτερικό στυλ έχει υψηλότερη προτεραιότητα, δηλαδή θα υπερισχύσει ενός στυλ που δηλώνεται στο <head> tag Διαφάνεια 38

39 Εξωτερικό Φύλλο Στυλ (External Style Sheet) <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Εσωτερικό Φύλλο Στυλ (Internal Style Sheet) <head> <style type="text/css"> body {background-color: red;} p {padding-left: 20px;} </style> </head> Εσωτερικό Στυλ (Inline Style) <p style="color: red; padding-left: 20px;"> This is a paragraph </p> Διαφάνεια 39

40 Τα HTML tags αρχικά σχεδιάστηκαν για τον προσδιορισμό του περιεχομένου ενός εγγράφου Η παρουσίαση του εγγράφου θα έπρεπε να διασφαλίζεται από τον πλοηγό χωρίς τη χρήση επιπλέον tags διαμόρφωσης Καθώς οι δύο κύριοι τότε πλοηγοί (Netscape και Internet Explorer) συνέχιζαν να προσθέτουν νέα HTML tags στον αρχικό προσδιορισμό της HTML, η δημιουργία ιστοσελίδων όπου το περιεχόμενο των HTML εγγράφων ήταν διαχωρισμένο από τον τρόπο παρουσίασης του εγγράφου γινόταν όλο και πιο δύσκολη Για την επίλυση αυτού του προβλήματος το W3C δημιούργησε τα STYLES επιπρόσθετα από την HTML 4.0 Διαφάνεια 40

41 Η σύνταξη ενός CSS αποτελείται από τρία τμήματα: έναν επιλογέα, μια ιδιότητα και μια τιμή selector {property: value} Επιλογέας είναι συνήθως το HTML στοιχείο/tag που θέλετε να ορίσετε Ιδιότητα είναι η παράμετρος που θέλετε να αλλάξετε Κάθε ιδιότητα μπορεί να έχει μια τιμή Body {color: black} p {font-family: "sans serif"} Διαφάνεια 41

42 Μπορείτε να ομαδοποιήσετε τους επιλογείς Διαχωρίστε κάθε επιλογέα με κόμμα h1, h2, h3, h4, h5, h6 { color: green } Τα σχόλια σε ένα CSS ξεκινούν με /* και καταλήγουν σε */ π.χ. /* Αυτό είναι ένα σχόλιο */ Διαφάνεια 42

43 Κλάση (class) Με την κλάση μπορείτε να ορίσετε διαφορετικά στυλ για τον ίδιο τύπο HTML στοιχείου Για παράδειγμα μπορεί να χρειάζεται ένα έγγραφο να υποστηρίζει δύο τύπους παραγράφων: μια με στοίχιση δεξιά και μια με στοίχιση στο κέντρο Τα στυλ ορίζονται ως εξής: p.right {text-align: right} p.center {text-align: center} Στο HTML έγγραφο πρέπει να χρησιμοποιήστε την παράμετρο class ως εξής: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Διαφάνεια 43

44 Οι ιδιότητες του CSS background σας επιτρέπουν να ελέγχετε το χρώμα φόντου ενός στοιχείου, να ορίσετε μια εικόνα ως φόντο, να επαναλαμβάνετε την εικόνα φόντου οριζόντια ή κατακόρυφα και να τοποθετείτε μια εικόνα σε μια σελίδα Ιδιότητα Περιγραφή Τιμή background-color Ορίζει αν η εικόνα φόντου είναι σταθερή ή πραγματοποιεί κύλιση με την υπόλοιπη σελίδα Ορίζει το χρώμα φόντου ενός στοιχείου scroll, fixed background-image Ορίζει μια εικόνα ως φόντο url(url), none color-rgb, color-hex, color-name, Transparent backgroundattachment backgroundposition background-repeat Ορίζει την αρχική θέσης μια εικόνας φόντου Ορίζει αν και πώς θα επαναλαμβάνεται μια εικόνα φόντου top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos Repeat, repeat-x, repeat-y, no-repeat Διαφάνεια 44

45 <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <p>this is a paragraph</p> </body> </html> Διαφάνεια 45

46 Οι ιδιότητες του CSS text σας επιτρέπουν να ελέγχετε τον τρόπο εμφάνισης του κειμένου. Μπορείτε να αλλάξετε το χρώμα, να αυξήσετε ή να μειώσετε τον κενό χώρο μεταξύ των χαρακτήρων, να στοιχίσετε το κείμενο, κλπ. Ιδιότητα Περιγραφή Τιμή color Ορίζει το χρώμα του κειμένου color direction Ορίζει την κατεύθυνση ltr, rtl line-height Ορίζει την απόσταση μεταξύ γραμμών normal, number, length, % letter-spacing Αυξάνει ή μειώνει τον κενό χώρο μεταξύ χαρακτήρων normal, length text-align Στοίχιση κειμένου left, right, center, justify text-decoration Έμφαση None,underline, overline, line-through, blink text-indent Εσοχή της πρώτης γραμμής του κειμένου length, % text-transform Έλεγχος των γραμμάτων none, capitalize, uppercase, lowercase Διαφάνεια 46

47 <html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <h3>this is header 3</h3> <p><a href=" is a link</a></p> </body> </html> Διαφάνεια 47

48 Οι ιδιότητες του CSS font σας επιτρέπουν να αλλάζετε τη γραμματοσειρά, το μέγεθος, την έμφαση (boldness) και το στυλ του κειμένου Ιδιότητα Περιγραφή Τιμή font-family font-size font-style font-weight Λίστα με προτεραιότητες για τη γραμματοσειρά Ορίζει το μέγεθος της γραμματοσειράς Ορίζει το στυλ της γραμματοσειράς Ορίζει την έμφαση της γραμματοσειράς family-name generic-family xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length % normal, italic, oblique normal, bold, bolder, lighter, 100, , 400, 500, 600, 700, 800, 900 Διαφάνεια 48

49 <html> <head> <style type="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> </head> <body> <h3>this is header 3</h3> <p>this is a paragraph</p> <p class="sansserif">this is a paragraph</p> </body> </html> Διαφάνεια 49

50 Οι ιδιότητες του CSS border σας επιτρέπουν να ορίζετε το στυλ και το χρώμα στο πλαίσιο ενός στοιχείου Ιδιότητα Περιγραφή Τιμή border border-bottom border-left border-right Χρησιμοποιείται για τον έλεγχο όλων των ιδιοτήτων των τεσσάρων borders σε μια δήλωση Ορίζει όλες τις ιδιότητες του κάτω πλαισίου του border σε μια δήλωση Ορίζει όλες τις ιδιότητες του αριστερού πλαισίου του border σε μια δήλωση Ορίζει όλες τις ιδιότητες του δεξιά πλαισίου του border σε μια δήλωση border-width, border-style, border-color border-bottom-width, border-style, border-color border-left-width, border-style, bordercolor border-bottom-width, border-style, border-color border-style Ορίζει το στυλ των τεσσάρων borders none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-top Ορίζει όλες τις ιδιότητες του πάνω πλαισίου του border σε μια δήλωση border-top-width, border-style, bordercolor border-width Ορίζει το πλάτος των τεσσάρων borders thin, medium, thick, length Διαφάνεια 50

51 <html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p class="dotted">a dotted border</p> <p class="dashed">a dashed border</p> <p class="solid">a solid border</p> <p class="double">a double border</p> <p class="groove">a groove border</p> <p class="ridge">a ridge border</p> <p class="inset">an inset border</p> <p class="outset">an outset border</p> </body> </html> Διαφάνεια 51

52 Οι ιδιότητες του CSS margin ορίζουν το χώρο γύρω από τα στοιχεία. Το αριστερό, δεξί, πάνω και κάτω περιθώριο μπορεί να αλλάζουν ανεξάρτητα χρησιμοποιώντας ξεχωριστές ιδιότητες Ιδιότητα Περιγραφή Τιμή margin margin-bottom margin-left margin-right margin-top Χρησιμοποιείται για τον έλεγχο όλων των ιδιοτήτων των τεσσάρων margins σε μια δήλωση Ορίζει όλες τις ιδιότητες του κάτω margin Ορίζει όλες τις ιδιότητες του αριστερού margin Ορίζει όλες τις ιδιότητες του δεξί margin Ορίζει όλες τις ιδιότητες του πάνω margin margin-top, margin-right, marginbottom, margin-left auto length, % auto length, % auto length, % auto length, % Διαφάνεια 52

53 <html> <head> <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 4cm} </style> </head> <body> <p>this is a paragraph with no specified margins</p> <p class=" margin">this is a paragraph with specified margins </p> <p>this is a paragraph with no specified margins </p> </body> </html> Διαφάνεια 53

54 Οι ιδιότητες του CSS padding ορίζουν το χώρο μεταξύ του πλαισίου ενός στοιχείου και του περιεχομένου του στοιχείου. Το αριστερό, δεξί, πάνω και κάτω περιθώριο μπορεί να αλλάζουν ανεξάρτητα χρησιμοποιώντας ξεχωριστές ιδιότητες Ιδιότητα Περιγραφή Τιμή padding padding-bottom padding-left padding-right padding-top Χρησιμοποιείται για τον έλεγχο όλων των ιδιοτήτων των τεσσάρων paddings σε μια δήλωση Ορίζει όλες τις ιδιότητες του κάτω padding Ορίζει όλες τις ιδιότητες του αριστερού padding Ορίζει όλες τις ιδιότητες του δεξί padding Ορίζει όλες τις ιδιότητες του πάνω padding padding-top, padding-right, padding-bottom, padding-left length, % length, % length, % length, % Διαφάνεια 54

55 <html> <head> <style type="text/css"> td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} </style> </head> <body> <table border="1"> <tr> <td class="test1"> This is a tablecell with equal padding on each side. </td> </tr> </table> <br /> <table border="1"> <tr> <td class="test2"> This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm. </td> </tr> </table> </body> </html> Διαφάνεια 55

57 TECHS /#html-index Διαφάνεια 57

58 Διαφάνεια 58