Σχεδιασμός και Ανάπτυξη Ιστότοπων

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Σχεδιασμός και Ανάπτυξη Ιστότοπων"

Transcript

1 Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής

2 Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari Opera

3 Μονάδες μέτρησης mm (millimeters) cm (centimeters) in (inches): 1in = 2.54cm pt (points): 1pt = 1/72in pc (picas): 1pc = 12pt px (pixels): 1px = 1/96th of 1in em: 1em = 1 φορά το μέγεθος του font-size 3

4 Περιεχόμενα Φόντο στοιχείου Χρώμα φόντου - ιδιότητα background-color Εικόνα φόντου - ιδιότητα background-image Επανάληψη φόντου - ιδιότητα background-repeat Προσάρτηση φόντου - ιδιότητα background-attachment Θέση φόντου - ιδιότητα background-position Ορισμός φόντου ιδιότητα background CSS3 Φόντο στοιχείου Καθορισμός της περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα background-clip Καθορισμός θέσης εικόνας - ιδιότητα background-origin Καθορισμός μεγέθους εικόνας - ιδιότητα background-size 4

5 Περιεχόμενα Περίγραμμα στοιχείου Δημιουργία περιγράμματος - ιδιότητα border Στυλ περιγράμματος - ιδιότητα border-style Στυλ ξεχωριστών πλευρών - ιδιότητες border-top-style, border-right-style, border-bottom-style, border-left-style Πλάτος περιγράμματος - ιδιότητα border-width Πλάτος περιγράμματος ξεχωριστών πλευρών - ιδιότητες border-top-width, border-right-width, border-bottomwidth, border-left-width Χρώμα περιγράμματος - ιδιότητα border-color Χρώμα περιγράμματος ξεχωριστών πλευρών- ιδιότητες border-top-color, border-right-color, border-bottom-color, border-left-color 5

6 Περιεχόμενα CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα borderradius Ακτίνες στρογγυλεμένων γωνιών - ιδιότητες border-topleft-radius, border-top-right-radius, border-bottom-rightradius, border-bottom-left-radius Περίγραμμα εικόνας ιδιότητα border-image Μονοπάτι περιγράμματος εικόνας ιδιότητα borderimage-source Περικοπή περιγράμματος εικόνας ιδιότητα border-imageslice Πλάτος περιγράμματος εικόνας ιδιότητα border-imagewidth 6

7 Περιεχόμενα CSS3 Περίγραμμα στοιχείου (συνέχεια) Επέκταση περιγράμματος εικόνας ιδιότητα border-imageoutset Επανάληψη περιγράμματος εικόνας ιδιότητα borderimage-repeat 7

8 Φόντο στοιχείου Χρώμα φόντου - ιδιότητα "background-color" Η ιδιότητα background-color χρησιμοποιείται για να οριστεί το χρώμα φόντου ενός στοιχείου. Σύνταξη: background-color: χρώμα transparent initial inherit; Τιμές: χρώμα: Όνομα_χρώματος ή κωδικός_χρώματος ή rgb(x,x,x). transparent: Προεπιλογή. Ορίζει ότι το χρώμα φόντου θα πρέπει να είναι διαφανές. Παράδειγμα: p{background-color:#00ff00;} Το προεπιλεγμένο χρώμα φόντου για την ιστοσελίδα ορίζεται στον επιλογέα body. Παράδειγμα: body{background-color: yellow;} 8

9 Φόντο στοιχείου Χρώμα φόντου - ιδιότητα "background-color" Παράδειγμα:. <head> <style type="text/css"> body{background-color: cyan;} p{background-color: rgb(255,0,255);} </style> </head> <body> <h1><1ο ΕΠΑΛ Κατερίνης</h1> <p><τομέας Πληροφορικής</p> </body>. 9

10 Φόντο στοιχείου Εικόνα φόντου - ιδιότητα "background-image" Η ιδιότητα background-image χρησιμοποιείται για να οριστεί μία εικόνα ως φόντο ενός στοιχείου. Από προεπιλογή, μία εικόνα φόντου τοποθετείται στην επάνω αριστερή γωνία του στοιχείου, και επαναλαμβάνεται τόσο κάθετα όσο και οριζόντια. Σύνταξη: background-image: url("path/image_file") initial inherit; Παράδειγμα: <head> <style> body{background-image: url("./images/back1.jpg");} p{background-image: url("./images/back2.jpg");} </style> </head> 10

11 Φόντο στοιχείου Εικόνα φόντου - ιδιότητα "background-image" Αν ορισθούν περισσότερες από μία εικόνες ως φόντο στην ιστοσελίδα, οι τιμές τους χωρίζονται μεταξύ τους με κόμμα. Προσοχή! Για να μην υπερκαλύπτει η μία εικόνα την άλλη, οι εικόνες θα πρέπει να είναι διαφανείς (transparent). Παράδειγμα: <head> <style> body{background-image: url("./images/back3.png"), url("./images/back4.png");} </style> </head> 11 back3.png back4.png

12 Φόντο στοιχείου Επανάληψη φόντου - ιδιότητα "background-repeat" Η ιδιότητα background-repeat χρησιμοποιείται για να οριστεί αν θα επαναλαμβάνεται η εικόνα φόντου της σελίδας και προς ποια κατεύθυνση. Σύνταξη: background-repeat: repeat no-repeat repeat-x repeat-y initial inherit; Τιμές: repeat: Προεπιλεγμένη τιμή. Θα επαναλαμβάνεται και προς τις δύο κατευθύνσεις, μέχρι να καλύψει το στοιχείο, στο οποίο έχει οριστεί. no-repeat: Δεν θα επαναλαμβάνεται προς καμία κατεύθυνση. repeat-x: Θα επαναλαμβάνεται οριζόντια. repeat-y: Θα επαναλαμβάνεται κατακόρυφα. 12

13 Φόντο στοιχείου Επανάληψη φόντου - ιδιότητα "background-repeat" Παράδειγμα: <head> <style> body{ background-image: url("./images/back1.jpg"); background-repeat: repeat-y; } </style> </head> 13

14 Φόντο στοιχείου Προσάρτηση φόντου - ιδιότητα "background-attachment" Η ιδιότητα background-attachment χρησιμοποιείται για να οριστεί αν η εικόνα φόντου θα μένει σταθερή ή αν θα ακολουθεί το στοιχείο στο οποίο έχει οριστεί. Σύνταξη: background-attachment: fixed scroll local; Τιμές: fixed: Θα παραμένει σταθερή (κλειδωμένη). scroll: Η εικόνα κυλάει μαζί με την ιστοσελίδα μη κλειδωμένη. local: Θα ακολουθεί το περιεχόμενο του στοιχείου στο οποίο έχει οριστεί. 14

15 Φόντο στοιχείου Προσάρτηση φόντου - ιδιότητα "background-attachment" Παράδειγμα: <head> <style> body{ background-image: url("./images/back3.jpg"); background-repeat: repeat-x; background-attachment: fixed; } </style> </head> <body> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </body> 15

16 Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Η ιδιότητα background-position χρησιμοποιείται για να οριστεί η ακριβής θέση που θα έχει η εικόνα φόντου μέσα σε ένα στοιχείο. Οι τιμές που παίρνει η ιδιότητα αυτή είναι δύο: η πρώτη τιμή αντιστοιχεί στην οριζόντια θέση της εικόνας και η δεύτερη αντιστοιχεί στην κάθετη θέση της ίδιας εικόνας. Αν χρησιμοποιηθεί μία τιμή, η άλλη θα είναι από προεπιλογή η τιμή center. Σύνταξη: background-position: top left top center top right center left center center center right bottom left bottom center bottom right x% y% Θέση-x Θέση-y initial inherit; body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: center center; } 16

17 Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Θέση-x Θέση-y: Η πρώτη τιμή είναι η οριζόντια θέση και η δεύτερη η κατακόρυφη. Η επάνω αριστερή γωνία είναι 0 0. Οι μονάδες μπορούν να είναι pixels (0px 0px) ή οποιεσδήποτε άλλες μονάδες CSS (em, pt, κ.λπ.). Αν οριστεί μόνο μία τιμή, η άλλη τιμή θα είναι 50%. Μπορούν να αναμιχθούν ποσοστά (%) και θέσεις(x,y). x% y%: Ένας άλλος τρόπος για να οριστεί η θέση της εικόνας φόντου είναι να χρησιμοποιηθούν δύο ποσοστά, από 0% ως 100%. Το πρώτο ορίζει την οριζόντια και το δεύτερο ορίζει την κάθετη θέση. Η επάνω αριστερή γωνία είναι 0% 0% και η κάτω δεξιά γωνία είναι 100% 100%. Αν ορίσετε μόνο μία τιμή, η άλλη τιμή θα είναι 50%. Προεπιλεγμένη τιμή είναι: 0% 0%. 17

18 Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Παράδειγμα 1: body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: 30% 50%; } <h1>1ο ΕΠΑΛ Κατερίνης</h1> </br></br></br> <p>τομέας Πληροφορικής</p> 18

19 Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Παράδειγμα 2: body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: 50px 100px; } <h1>1ο ΕΠΑΛ Κατερίνης</h1> </br></br></br> <p>τομέας Πληροφορικής</p> 19

20 Φόντο στοιχείου Θέση φόντου - ιδιότητα "background-position" Προσοχή: η ιδιότητα background-position, για να δουλέψει, προϋποθέτει την ύπαρξη της ιδιότητας background-repeat έχοντας την τιμή no-repeat. Παράδειγμα: body{ background-image: url("./images/back3.jpg"); background-repeat: no-repeat; background-position: bottom center; } 20

21 Φόντο στοιχείου Ορισμός φόντου - ιδιότητα "background" Όπως προαναφέρθηκε, υπάρχουν πέντε ιδιότητες φόντου. Υπάρχει η δυνατότητα να γραφούν όλες μαζί σε μια ιδιότητα, για χάρη συντομίας, κάνοντας χρήση της ιδιότητας background, αν και συνίσταται οι ιδιότητες να γράφονται μεμονωμένες, διότι έτσι είναι εύκολα αναγνώσιμες άρα και εύκολο να τις διαχειριστεί κανείς. Σύνταξη: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial inherit; Τιμές (βλέπετε CSS3): bg-size: Ορίζει το μέγεθος των εικόνων φόντου, π.χ. 60px 80px. bg-origin: Ορίζει την περιοχή από την οποία θα ξεκινά η τοποθέτηση της εικόνας φόντου. bg-clip: Ορίζει την επιφάνεια του στοιχείου που θα χρωματιστεί. 21

22 Φόντο στοιχείου Ορισμός φόντου - ιδιότητα "background" Παράδειγμα: body{ background: yellow url("./images/back5.png") center 50px/60px 60px no-repeat fixed; } 22

23 CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Η ιδιότητα background-clip ορίζει την επιφάνεια του στοιχείου που θα χρωματιστεί. Σύνταξη: background-clip: border-box content-box padding-box initial inherit; Τιμές: border-box: Προεπιλεγμένη τιμή. Χρωματίζεται όλο το υπόβαθρο του στοιχείου ακόμη και του περιγράμματός του (θα φανεί σε διακεκομμένα περιγράμματα). content-box: Το υπόβαθρο περικόπτεται στο πλαίσιο περιεχομένου. Δηλαδή αν υπάρχει ένα <div> πλαίσιο, μέσα στο οποίο έχει εισαχθεί κάποιο κείμενο, τότε η επιφάνεια που θα χρωματιστεί με το χρώμα του υποβάθρου θα είναι μόνο το background του κειμένου και όχι όλη η επιφάνειά του <div>. 23

24 CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Τιμές συνέχεια: padding-box: Χρωματίζεται όλη η επιφάνεια του κειμένου και του padding. Παράδειγμα 1: div { } border: 5px dashed black; padding: 25px; background: cyan; background-clip: border-box; 24

25 CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Παράδειγμα 2: <head> <style> #bbox { border: 10px dashed black; padding: 25px; background: yellow; background-clip: padding-box; } </style> </head> <body> <div id="bbox"> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </div> </body> 25

26 CSS3 Φόντο στοιχείου Καθορισμός περιοχής στοιχείου που θα χρωματιστεί - ιδιότητα "background-clip" Παράδειγμα 3: <head> <style> #cbox { border: 10px dashed black; padding: 25px; background: yellow; background-clip: content-box; } </style> </head> <body> <div id="cbox"> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </div> </body> 26

27 CSS3 Φόντο στοιχείου Καθορισμός θέσης εικόνας - ιδιότητα "background-origin" Η ιδιότητα background-origin ορίζει την περιοχή από την οποία θα ξεκινά η τοποθέτηση της εικόνας φόντου. Σύνταξη: background-origin: padding-box border-box content-box initial inherit;; Τιμές: padding-box: Προεπιλεγμένη τιμή. Η εικόνα φόντου ξεκινά από την πάνω αριστερή γωνία της άκρης του padding. border-box: Η εικόνα φόντου ξεκινά από την πάνω αριστερή γωνία του περιγράμματος. content-box: Η εικόνα φόντου ξεκινά από την άνω αριστερή γωνία του περιεχομένου. 27

28 CSS3 Φόντο στοιχείου Καθορισμός θέσης εικόνας - ιδιότητα "background-origin" Παράδειγμα: <body> <head> <div id="cbox"> <style> <h1>1ο ΕΠΑΛ Κατερίνης</h1> #cbox { <p>τομέας Πληροφορικής</p> border: 10px solid black; </div> </body> padding: 35px; background: url(./images/back3.jpg); background-repeat: no-repeat; background-origin: content-box; } </style> </head> 28

29 CSS3 Φόντο στοιχείου Καθορισμός μεγέθους εικόνας - ιδιότητα "background-size" Η ιδιότητα background-size ορίζει το μέγεθος της εικόνας φόντου. Σύνταξη: background-size: auto length cover contain initial inherit; Τιμές: auto: Προεπιλεγμένη τιμή. Η εικόνα φόντου περιέχει το πλάτος και το ύψος της. length: Ορίζει το πλάτος και το ύψος της εικόνας φόντου. Η πρώτη τιμή ορίζει το πλάτος και η δεύτερη το ύψος. Εάν δοθεί μόνο μία τιμή, η δεύτερη έχει οριστεί σε "auto". 29

30 CSS3 Φόντο στοιχείου Καθορισμός μεγέθους εικόνας - ιδιότητα "background-size" Τιμές συνέχεια: percentage: Μεταβάλει το πλάτος και το ύψος της εικόνας φόντου σε ποσοστό του αρχικού της μεγέθους. Η πρώτη τιμή ορίζει το πλάτος και η δεύτερη το ύψος. Εάν δοθεί μόνο μία τιμή, η δεύτερη έχει οριστεί σε "auto". cover: Μετατρέπει την κλίμακα της εικόνας φόντου, έτσι ώστε η περιοχή του στοιχείου να καλύπτεται πλήρως από αυτήν. Ορισμένα τμήματα της εικόνας φόντου μπορεί να μην είναι στη θέση εντός της περιοχής τοποθέτησης του φόντου. contain: Μετατρέπει την κλίμακα της εικόνας στο μεγαλύτερο μέγεθος, έτσι ώστε τόσο το πλάτος όσο και το ύψος της, να μπορεί να χωρέσει μέσα στην περιοχή περιεχομένου. 30

31 CSS3 Φόντο στοιχείου Καθορισμός μεγέθους εικόνας - ιδιότητα "background-size" Παράδειγμα : <body> <head> <div id="box"> <style> <h1>1ο ΕΠΑΛ Κατερίνης</h1> #box { <p>τομέας Πληροφορικής</p> border: 10px solid black; </div> </body> padding-top: 35px; background: url(./images/back3.jpg); background-size: 80px 80px; background-repeat: no-repeat; } </style> </head> 31

32 Περίγραμμα στοιχείου Δημιουργία περιγράμματος - ιδιότητα "border" Η ιδιότητα border επιτρέπει τον ορισμό του στυλ, του πλάτους και του χρώματος του περιγράμματος ενός στοιχείου. Σύνταξη: border: border-width border-style border-color initial inherit; Τιμές: border-width: Ορίζει το πλάτος του περιγράμματος του στοιχείου. border-style: Ορίζει το στυλ του περιγράμματος. border-color: Ορίζει το χρώμα του περιγράμματος. Παράδειγμα: p { border: 8px solid blue;} 32

33 Περίγραμμα στοιχείου Δημιουργία περιγράμματος - ιδιότητα "border" Παράδειγμα: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1, p{border:5px solid blue;} </style> </head> <body> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </body> </html> 33

34 Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Η ιδιότητα border-style ορίζει το στυλ των τεσσάρων περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-style:none hidden dotted dashed solid double groove ridge inset outset initial inherit; Τιμές: none: Προεπιλεγμένη τιμή. Για να μην υπάρχει περίγραμμα. hidden: Όπως η «none». dotted: Ορίζει διακεκομμένο περίγραμμα με κουκίδες. dashed: Ορίζει διακεκομμένο περίγραμμα με παύλες. solid: Ορίζει συμπαγές περίγραμμα. double: Ορίζει διπλό συμπαγές περίγραμμα. 34

35 Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Τιμές συνέχεια 1: groove: Ορίζει ένα αυλακωτό 3D περίγραμμα. ridge: Ορίζει ένα ραβδωτό 3D περίγραμμα. inset: Ορίζει ένα ένθετο 3D περίγραμμα, δημιουργώντας την αίσθηση πως εισάγεται προς τα «μέσα» στην σελίδα. outset: Ορίζει ένα 3D περίγραμμα, δημιουργώντας την αίσθηση πως «βγαίνει» ένα επίπεδο προς τα έξω από την σελίδα. Σημείωση: Σε όλες τις τέσσερις παραπάνω ιδιότητες, το αποτέλεσμα εξαρτάται από την τιμή της border-color. 35

36 Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Ορισμός και χρήση border-style:dotted solid double dashed; (πάνω-δεξιά-κάτωαριστερά) border-style:dotted solid double; (πάνω-δεξιά-κάτω) border-style:dotted solid; (πάνω-δεξιά) border-style:dotted; (όλα) 36

37 Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" 37 Παράδειγμα των τιμών του border-style

38 Περίγραμμα στοιχείου Στυλ περιγράμματος - ιδιότητα "border-style" Παράδειγμα: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{border-style: dashed;} p{border-style: double;} </style> </head> <body> <h1>1ο ΕΠΑΛ Κατερίνης</h1> <p>τομέας Πληροφορικής</p> </body> </html> 38

39 Περίγραμμα στοιχείου Στυλ ξεχωριστών πλευρών - ιδιότητες "border-top-style ", "borderright-style ", "border-bottom-style ", "border-left-style " border-top-style: Ορίζει το στυλ του άνω περιγράμματος border-right-style: Ορίζει το στυλ του δεξιού περιγράμματος border-bottom-style: Ορίζει το στυλ του κάτω περιγράμματος border-left-style: Ορίζει το στυλ του αριστερού περιγράμματος Παράδειγμα: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } 39

40 Περίγραμμα στοιχείου Πλάτος περιγράμματος - ιδιότητα "border-width" Η ιδιότητα border-width ορίζει το πλάτος των τεσσάρων περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-width: medium thin thick length initial inherit; Τιμές: medium: Προεπιλεγμένη τιμή. Ορίζει ένα μεσαίου μεγέθους περίγραμμα. thin: Ορίζει ένα λεπτό περίγραμμα. thick: Ορίζει ένα παχύ περίγραμμα. length: Επιτρέπει τον ακριβή ορισμό του πάχους του περιγράμματος. 40

41 Περίγραμμα στοιχείου Πλάτος περιγράμματος - ιδιότητα "border-width" Παράδειγμα: p { border-style: solid; border-width: medium; } <p>medium border</p> <p>thin border</p> <p >Thick border</p> <p >15px border</p> 41

42 Περίγραμμα στοιχείου Πλάτος περιγράμματος - ιδιότητα "border-width" Ορισμός και χρήση border-width:thin medium thick 10px; (πάνω-δεξιά-κάτωαριστερά) border-width:thin medium thick; (πάνω-δεξιά-κάτω) border-width:thin medium; (πάνω-δεξιά) border-width:thin; (όλα) Σημείωση: Πρέπει να δηλώνεται πάντα η ιδιότητα border-style, πριν από την ιδιότητα border-width. Ένα στοιχείο πρέπει να έχει περιγράμματα για να μπορέσει να ρυθμιστεί το πλάτος τους. 42

43 Περίγραμμα στοιχείου Πλάτος περιγράμματος ξεχωριστών πλευρών - ιδιότητες "border-top-width", "border-right-width", "border-bottom-width", "border-left-width" border-top-width: Ορίζει το πλάτος του άνω περιγράμματος border-right-width: Ορίζει το πλάτος του δεξιού περιγράμματος border-bottom-width: Ορίζει το πλάτος του κάτω περιγράμματος border-left-width: Ορίζει το πλάτος του αριστερού περιγράμματος Παράδειγμα: p { border-style: solid; border-top-width: medium; border-right-width: 10px; border-bottom-width: medium; border-left-width: 10px; } 43

44 Περίγραμμα στοιχείου Χρώμα περιγράμματος - ιδιότητα "border-color" Η ιδιότητα border-color ορίζει το χρώμα των τεσσάρων περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-color: color transparent initial inherit; Τιμές: color: Ορίζει το χρώμα του περιγράμματος. transparent: Ορίζει το χρώμα του περιγράμματος σε διαφανές. Παράδειγμα: p { border-style: solid; border-width: medium; border-color: blue; } <p>τομέας Πληροφορικής</p> 44

45 Περίγραμμα στοιχείου Χρώμα περιγράμματος ξεχωριστών πλευρών - ιδιότητες "border-top-color", "border-right-color", "border-bottom-color", "border-left-color" border-top-color: Ορίζει το χρώμα του άνω περιγράμματος border-right-color: Ορίζει το χρώμα του δεξιού περιγράμματος border-bottom-color: Ορίζει το χρώμα του κάτω περιγράμματος border-left-color: Ορίζει το χρώμα του αριστερού περιγράμματος Παράδειγμα: p { border-style: solid; border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: yellow; } 45

46 CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Η ιδιότητα border-radius ορίζει σε στρογγυλεμένες τις γωνίες των τεσσάρων περιγραμμάτων ενός <div> στοιχείου. Αυτή η ιδιότητα μπορεί να έχει από μία έως τέσσερις τιμές. Σύνταξη: border-radius: 1-4 length % / 1-4 length initial inherit; Τιμές length: Προεπιλεγμένη τιμή. Ορίζει το σχήμα των γωνιών σε px. %: Ορίζει το σχήμα των γωνιών σε ποσοστό (%) Παράδειγμα: div {border: 5px solid; border-radius: 30px;} 46

47 CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Ένα προαιρετικό δεύτερο σύνολο τιμών, προηγείται ενός συμβόλου «/» και ορίζει την κάθετη ακτίνα και για τις τέσσερις γωνίες. Εάν υπάρχει μόνο ένα σύνολο τιμών, αυτές χρησιμοποιούνται για να καθορίσουν τόσο την κάθετη, όσο και την οριζόντια ακτίνα εξίσου. Παράδειγμα: div { border-style: solid; border-radius: 10px 10px 5px 10px / 30px 30px 10px 5px; } 30px 10px 47

48 CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Παράδειγμα: div { background: yellow; border-style: solid; border-radius: 65px; width: 130px; height: 130px; text-align: center; line-height: 35px; } <div> <p>τομέας Πληροφορικής</p> </div> 48

49 CSS3 Περίγραμμα στοιχείου Στρογγυλεμένες γωνίες περιγράμματος - ιδιότητα "border-radius" Ορισμός και χρήση border-radius:10px 40px 20px 5px; (πάνω-δεξιά-κάτωαριστερά) border-radius:10px 40px 20px ; (πάνω-δεξιά-κάτω) border-radius:10px 40px ; (πάνω-δεξιά) border-radius:10px; (όλα) Σημείωση: Πρέπει να δηλώνεται πάντα η ιδιότητα border-style (ή border) πριν από την ιδιότητα border-radius. Ένα στοιχείο πρέπει να έχει περιγράμματα για να είναι δυνατόν να ρυθμιστούν οι γωνίες των περιγραμμάτων του. 49

50 CSS3 Περίγραμμα στοιχείου Ακτίνες στρογγυλεμένων γωνιών - ιδιότητες "border-top-leftradius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius" border-top-left-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην πάνω αριστερή γωνία ενός <div> στοιχείου. border-top-right-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην πάνω δεξιά γωνία ενός <div> στοιχείου. border-bottom-right-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην κάτω δεξιά γωνία ενός <div> στοιχείου. border-bottom-left-radius: Ορίζει ένα στρογγυλεμένο περίγραμμα στην κάτω αριστερή γωνία ενός <div> στοιχείου. Σύνταξη: border-*-*-radius: length % [length %] initial inherit; 50

51 CSS3 Περίγραμμα στοιχείου Ακτίνες στρογγυλεμένων γωνιών - ιδιότητες "border-top-leftradius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius" Παράδειγμα: div { border-style: solid; border-top-left-radius: 20px; border-bottom-right-radius: 30px; } <div style="text-align:center;"> <p>τομέας Πληροφορικής</p> </div> 51

52 CSS3 Περίγραμμα στοιχείου Ακτίνες στρογγυλεμένων γωνιών Το παρακάτω διάγραμμα δίνει μερικά παραδείγματα για το πώς μπορεί να εμφανίζονται τα περιγράμματα αν δοθούν γωνίες με διαφορετικές ακτίνες: 52

53 CSS3 Περίγραμμα στοιχείου Περίγραμμα εικόνας ιδιότητα "border-image" Η ιδιότητα border-image ορίζει μια εικόνα ως περίγραμμα ενός στοιχείου. Σύνταξη: border-image: source slice width outset repeat initial inherit; Τιμές: source: Η διαδρομή για την εικόνα που θα χρησιμοποιηθεί ως περίγραμμα. slice: Πώς θα περικοπεί το περίγραμμα εικόνας. width: Το πλάτος του περιγράμματος εικόνας. outset: Το ποσό κατά το οποίο το περίγραμμα εικόνας εκτείνεται πέρα από το border box. repeat: Το περίγραμμα εικόνας θα πρέπει να επαναληφθεί, στρογγυλεμένο ή τεντωμένο. 53

54 CSS3 Περίγραμμα στοιχείου Περίγραμμα εικόνας ιδιότητα "border-image" Παράδειγμα: p.p1{ text-align: center; border: 20px solid transparent; padding: 15px; border-image: url(./images/border.png) 30 round; } 54 <p class="p1">1ο ΕΠΑΛ Κατερίνης</p>

55 CSS3 Περίγραμμα στοιχείου Μονοπάτι περιγράμματος εικόνας ιδιότητα "border-image-source" Η ιδιότητα border-image-source ορίζει μια εικόνα ως περίγραμμα ενός στοιχείου. Σύνταξη: border-image-source: none image initial inherit; Τιμές: none: Δεν θα χρησιμοποιηθεί κάποια εικόνα. image: Η διαδρομή για την εικόνα που θα χρησιμοποιηθεί ως περίγραμμα. Παράδειγμα:.p1{ } border-image-source: url(./images/border.png); 55

56 CSS3 Περίγραμμα στοιχείου Περικοπή περιγράμματος εικόνας ιδιότητα "border-image-slice" Η ιδιότητα border-image-slice ορίζει το πόσο θα περικοπεί το περίγραμμα εικόνας ενός στοιχείου. Σύνταξη: border-image-slice: number % fill initial inherit; Τιμές: number: Ο αριθμός (οι) αντιπροσωπεύουν τα pixels για εικόνες raster ή συντεταγμένες για εικόνες vector. %: Τα ποσοστά είναι σε σχέση με το ύψος ή το πλάτος της εικόνας. fill: Ορίζει τη θέση που θα εμφανίζεται το μεσαίο τμήμα της εικόνας. 56

57 CSS3 Περίγραμμα στοιχείου Περικοπή περιγράμματος εικόνας ιδιότητα "border-image-slice" Παράδειγμα: p.p1{ } text-align: center; border: 20px solid transparent; padding: 15px; border-image: url(./images/border.png) 30 round; border-image-slice: 60; <p class="p1">1ο ΕΠΑΛ Κατερίνης</p> 57

58 CSS3 Περίγραμμα στοιχείου Πλάτος περιγράμματος εικόνας ιδιότητα "borderimage-width" Η ιδιότητα border-image-width ορίζει το πλάτος περιγράμματος εικόνας ενός στοιχείου. Σύνταξη: border-image-width: length number % auto initial inherit; Τιμές: length: Μια μονάδα μήκους (px) για τον καθορισμό του μεγέθους του border-width. number: Προεπιλεγμένη τιμή 1. Αντιπροσωπεύει πολλαπλάσια της αντίστοιχης border-width. %: Αναφέρεται στο μέγεθος της περιοχής περιγράμματος της εικόνας : το πλάτος της περιοχής για οριζόντιες μετατοπίσεις, το ύψος για κάθετες μετατοπίσεις. 58

59 CSS3 Περίγραμμα στοιχείου Πλάτος περιγράμματος εικόνας ιδιότητα "borderimage-width" Τιμές συνέχεια: auto: Αν καθοριστεί, το πλάτος είναι το εγγενές πλάτος ή το ύψος του αντίστοιχου image slice. Παράδειγμα: p.p1{ text-align: center; border: 10px solid transparent; padding: 15px; border-image: url(./images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 30px; } 59

60 CSS3 Περίγραμμα στοιχείου Επέκταση περιγράμματος εικόνας ιδιότητα "border-image-outset" Η ιδιότητα border-image-outset ορίζει το ποσό κατά το οποίο η περιοχή του περιγράμματος εικόνας εκτείνεται πέρα από το border box. Σύνταξη: border-image-outset: length number initial inherit; Τιμές: length: Προεπιλεγμένη τιμή το 0. Μια μονάδα μήκους προσδιορίζει το πόσο μακριά από τα άκρα θα εμφανιστεί το περίγραμμα εικόνας. number: Αντιπροσωπεύει πολλαπλάσια της αντίστοιχης borderwidth; 60

61 CSS3 Περίγραμμα στοιχείου Επέκταση περιγράμματος εικόνας ιδιότητα "border-image-outset" Παράδειγμα: p.p1{ text-align:center; border: 10px solid transparent; padding: 15px; border-image: url(./images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-outset: 10px; } 61

62 CSS3 Περίγραμμα στοιχείου Επανάληψη περιγράμματος εικόνας ιδιότητα "border-image-repeat" Η ιδιότητα border-image-repeat ορίζει εάν το περίγραμμα της εικόνας θα πρέπει να επαναληφθεί, στρογγυλευθεί ή τεντωθεί. Σύνταξη: border-image-repeat: stretch repeat round initial inherit; Τιμές: stretch: Προεπιλεγμένη τιμή. Η εικόνα παραμορφώνεται για να γεμίσει την περιοχή. repeat: Η εικόνα γίνεται tiled (επαναλαμβανόμενη) για να γεμίσει την περιοχή. round: Η εικόνα γίνεται tiled (επαναλαμβανόμενη) για να γεμίσει την περιοχή. Αν δεν γεμίζει το χώρο με μια ολόκληρη σειρά από tiles, η εικόνα αλλάζει κλίμακα έτσι ώστε να ταιριάζει. 62

63 CSS3 Περίγραμμα στοιχείου Επανάληψη περιγράμματος εικόνας ιδιότητα "border-image-repeat" Παράδειγμα: p.p1{ text-align:center; border: 10px solid transparent; padding: 15px; border-image: url(./images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-outset: 10px; } stretch repeat round 63

64 Βιβλιογραφία W3schools.com ( WLearn ( Πίνακες ιδιοτήτων CSS2 ( CSC ( CSS3.info ( 64

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google

Διαβάστε περισσότερα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

Διαβάστε περισσότερα

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box

Διαβάστε περισσότερα

Το απεικονιστικό μοντέλο μορφοποίησης των CSS

Το απεικονιστικό μοντέλο μορφοποίησης των CSS Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης

Διαβάστε περισσότερα

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20 Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες

Διαβάστε περισσότερα

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.

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

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις

Διαβάστε περισσότερα

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης

Διαβάστε περισσότερα

Διάλεξη 6η CSS Advanced

Διάλεξη 6η CSS Advanced Διάλεξη 6η CSS Advanced Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e. (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Block & Inline elements Advanced

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση

Διαβάστε περισσότερα

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Πίνακες. ετικέτα <table>

Πίνακες. ετικέτα <table> Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

CSS Εργαστήριο 5. Θέση και διάταξη

CSS Εργαστήριο 5. Θέση και διάταξη Display - Επίδειξη CSS Εργαστήριο 5. Θέση και διάταξη Η ιδιότητα display καθορίζει πως και εάν ένα στοιχείο εμφανίζεται στην οθόνη. Τα περισσότερα στοιχεία, εξορισμού είναι είτε block είτε inline. Ένα

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί

Διαβάστε περισσότερα

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).

Διαβάστε περισσότερα

Πίνακες. ιδιότητες ετικέτας <tr>

Πίνακες. ιδιότητες ετικέτας <tr> Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5

Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5 Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα

Διαβάστε περισσότερα

Στοιχεία ορισμού θέσης (Positioning Elements)

Στοιχεία ορισμού θέσης (Positioning Elements) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης

Διαβάστε περισσότερα

Εκπαιδευτικά Περιβάλλοντα Διαδικτύου

Εκπαιδευτικά Περιβάλλοντα Διαδικτύου ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML Εισαγωγή γραφικών και εικόνων Παρουσίαση 9 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας.

Διαβάστε περισσότερα

SVG Εργαστήριο 1. Εισαγωγή στα διανυσματικά γραφικά SVG

SVG Εργαστήριο 1. Εισαγωγή στα διανυσματικά γραφικά SVG SVG Εργαστήριο 1. Εισαγωγή στα διανυσματικά γραφικά SVG Χρήση SVG Τα SVG γραφικά, Scalable Vector Graphics, αναφέρονται σε διανυσματικά γραφικά που μένουν αναλοίωτα σε οποιαδήποτε αλλαγή των διαστάσεών

Διαβάστε περισσότερα

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα

1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1. Σύστημα Συντεταγμένων Το σύστημα συντεταγμένων που έχουμε συνηθίσει από το σχολείο τοποθετούσε το σημείο (0,0) στο σημείο τομής των δυο αξόνων Χ και Υ.

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr

Γαβαλάς Δαμιανός dgavalas@aegean.gr Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: Τρόπος 1:

ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: Τρόπος 1: ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Εισαγωγή Εικόνας 2. Εισαγωγή Αρχείου Γραφικού 3. Εισαγωγή Αυτόματου Σχήματος 4. Τροποποίηση Γραφικών Αντικειμένων 5. Αλλαγή Μεγέθους Γραφικού Αντικειμένου 6. Περιστροφή Γραφικού Αντικειμένου

Διαβάστε περισσότερα

Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.

Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs

Διαβάστε περισσότερα

Βασικά στοιχεία του CSS

Βασικά στοιχεία του CSS Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

Διαβάστε περισσότερα

CTEC-153: ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ

CTEC-153: ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Μορφοποίηση Αριθμών 2. Αλλαγή Μεγέθους Και Τύπου Γραμματοσειράς 3. Χρησιμοποίηση Πλάγιων, Έντονων, Υπογραμμισμένων Χαρακτήρων 4. Αλλαγή Χρώματος Γραμματοσειράς 5. Παράθυρο Διαλόγου

Διαβάστε περισσότερα

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section> Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά

Διαβάστε περισσότερα

ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:

ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ: ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών

Διαβάστε περισσότερα

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

Διαβάστε περισσότερα

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες

Διαβάστε περισσότερα

Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~

Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών

1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και

Διαβάστε περισσότερα

Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:

Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: εισαγωγή εικόνων

Διαβάστε περισσότερα

Εισαγωγή στο CSS Από: Λία Βέρου

Εισαγωγή στο CSS Από: Λία Βέρου Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται

Διαβάστε περισσότερα

Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου

Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards

Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Τα Επιπλέοντα Στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

2. Δισδιάστατα γραφικά

2. Δισδιάστατα γραφικά 2. Δισδιάστατα γραφικά 2.1 Δισδιάστατες γραφικές παραστάσεις συναρτήσεων μίας μεταβλητής. Η βασική εντολή σχεδίασης, του Sage, μιας γραφικής παράστασης μίας συνάρτησης μίας μεταβλητής είναι η συνάρτηση

Διαβάστε περισσότερα

Εισαγωγή στην HTML. Κεφ. HTML + CSS

Εισαγωγή στην HTML. Κεφ. HTML + CSS Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη

Διαβάστε περισσότερα

CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης

CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου

Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 03 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και

Διαβάστε περισσότερα

Εμφάνιση και κρύψιμο στοιχείων

Εμφάνιση και κρύψιμο στοιχείων Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Σημασιολογικός Ιστός (Semantic Web) - XML

Σημασιολογικός Ιστός (Semantic Web) - XML Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 8/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων

Διαβάστε περισσότερα

Εισαγωγή εικόνων. ετικέτα <img>

Εισαγωγή εικόνων. ετικέτα <img> Εισαγωγή εικόνων ετικέτα σύνταξη η ιδιότητα src καθορίζει ποια εικόνα θα εισαχθεί στη σελίδα η τιμή url είναι η πλήρης ή σχετική διαδρομή της εικόνας Παράδειγμα 1

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML: Λίστες Παρουσίαση 8 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε

Διαβάστε περισσότερα

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html

Διαβάστε περισσότερα

12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».

12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή». 12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη

Διαβάστε περισσότερα

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει

Διαβάστε περισσότερα

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε

Διαβάστε περισσότερα

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

> μεγαλύτερο <= μικρότερο ή ίσο < μικρότερο == ισότητα >= μεγαλύτερο ή ίσο!= διαφορετικό

> μεγαλύτερο <= μικρότερο ή ίσο < μικρότερο == ισότητα >= μεγαλύτερο ή ίσο!= διαφορετικό 5 ο Εργαστήριο Λογικοί Τελεστές, Δομές Ελέγχου Λογικοί Τελεστές > μεγαλύτερο = μεγαλύτερο ή ίσο!= διαφορετικό Οι λογικοί τελεστές χρησιμοποιούνται για να ελέγξουμε

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

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

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Διάλεξη 4η CSS intermediate

Διάλεξη 4η CSS intermediate Διάλεξη 4η CSS intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Κλάσεις & Ids Εμφώλευση &

Διαβάστε περισσότερα

Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας

Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

CTEC-153: ΥΤΛΛΑ ΕΡΓΑΙΑ

CTEC-153: ΥΤΛΛΑ ΕΡΓΑΙΑ ΜΑΘΗΜΑ 6 ΣΟΦΟΙ: 1. Δημιουργία Διαφορετικών Σύπων Γραφημάτων Από Σα Δεδομένα Ενός Τπολογιστικού Υύλλου: Γράφημα τήλης, Γραμμής, Πίτας, Ράβδων 2. Βασικά Μέρη Ενός Γραφήματος 3. Αλλαγή Μεγέθους Ενός Γραφήματος

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp; ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας

Διαβάστε περισσότερα

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,

Διαβάστε περισσότερα

0 SOLID_LINE 1 DOTTED_LINE 2 CENTER_LINE 3 DASHED_LINE 4 USERBIT_LINE

0 SOLID_LINE 1 DOTTED_LINE 2 CENTER_LINE 3 DASHED_LINE 4 USERBIT_LINE 1. Η κωδικοποίηση των χρωµάτων για σύστηµα γραφικών µε 16 χρώµατα Κωδικός Χρώµα Χρώµατος 0 BLACK 1 BLUE 2 GREEN 3 CYAN 4 RED 5 MAGENTA 6 BROWN 7 LIGHTGRAY 8 DARKGRAY 9 LIGHTBLUE 10 LIGHTGREEN 11 LIGHTCYAN

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ

ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ 4.1. Εισαγωγή Το παρόν κεφάλαιο πραγματεύεται τις αρχές του προσαρμοστικού σχεδιασμού στον ιστό. Εξηγεί την ανάγκη που οδήγησε στην επινόηση του προσαρμοστικού σχεδιασμού

Διαβάστε περισσότερα

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

Διαβάστε περισσότερα