CSS. Προγρ/σμός Εφαρμογών Διαδικτύου. (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών. Τμήμα Μηχανικών Πληροφορικής ΤΕ.
|
|
|
- Ιάσων Αλαφούζος
- 7 χρόνια πριν
- Προβολές:
Transcript
1 CSS Cascading Style Sheets Προγρ/σμός Εφαρμογών Διαδικτύου (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών Τμήμα Μηχανικών Πληροφορικής ΤΕ ΤΕΙ Θεσσαλίας Τι Είναι τα CSS; 2 Cascading (στοιβαγμένα) Style Sheets (CSS) είναι Ένα σύνολο κανόνων για την παρουσίαση εγγράφων HTML, XHTML και γενικότερα XML, στον χρήστη. Παρουσίαση σημαίνει Εμφάνιση και χωροθέτηση των στοιχείων στην οθόνη (υπολογιστή, smartphone, tablet) ή σε εκτυπωτή, κτλ Περιθώρια, διαστήματα, χρώματα, γραμματοσειρές, κτλ...αλλά και αναπαραγωγή των στοιχείων με χρήση συνθετικής ομιλίας (δε μας ενδιαφέρει στο μάθημα)! Στο μάθημα θα εστιάσουμε στους κανόνες παρουσίασης και χωροθέτησης στην οθόνη.
2 Κίνητρα Χρήσης 3 Διαχωρισμός περιεχομένου και εμφάνισης του Ετικέτες όπως η font κυριάρχησαν στις ιστοσελίδες στην προσπάθεια κατασκευής εμφανίσιμων σελίδων. Τυχόν αλλαγές όμως έγιναν δύσκολες και χρονοβόρες. Με τα CSS όλη η πληροφορία για τη μορφοποίηση των HTML στοιχείων μπορεί να αποθηκευτεί σε ένα εξωτερικό αρχείο που συνδέεται με την εκάστοτε σελίδα Έτσι το ίδιο περιεχόμενο (ιστοσελίδα) μπορεί να προβάλλεται με τελείως διαφορετικό τρόπο (π.χ. σε smartphones, desktop PCs, κτλ) απλά αλλάζοντας το σύνολο κανόνων CSS. Άλλα πλεονεκτήματα Ακριβέστερος έλεγχος εμφάνισης και χωροθέτησης Λιγότερος κώδικας, μικρότερες σελίδες CCS Μέρος A Μορφοποίηση με CSS
3 Δήλωση Στυλ 5 Η ακριβής σύνταξη/δήλωση ενός στυλ εξαρτάται από το που γίνεται. Περιλαμβάνει όμως σίγουρα: ένα ή παραπάνω ζεύγη ιδιότητας (property) και τιμής (value) που χωρίζονται (τα ζεύγη) με τον χαρακτήρα ";" Παράδειγμα (σκέτων) ζευγαριών: color: red font-size: 18px; color: green; font-family: "Trebuchet MS", sans-serif; Αν υπάρχουν κενά στην τιμή, τη βάζουμε σε double quote. Πως ορίζουμε σε ποιο html στοιχείο ή στοιχεία θέλουμε να εφαρμοστεί ένα στυλ; αν είναι στυλ γραμμής το ορίζουμε στο html στοιχείο που θέλουμε αλλιώς φτιάχνουμε φύλλα-με-στυλ (style sheets) όπου το όνομα του στυλ/κανόνα παίζει καθοριστικό ρόλο στο που θα εφαρμοστεί! Στυλ Γραμμής (inline) 6 Ορίζονται ως ιδιότητα μέσα σε ένα στοιχείο (X)HTML χρησιμοποιώντας την ιδιότητα style Δεν προτείνεται, γιατί αναμιγνύει περιεχόμενο με μορφοποίηση. Αποδεκτό για τοπικές διορθώσεις αλλά αυτό συνήθως σημαίνει κακή σχεδίαση! Παραδείγματα in-line δήλωσης css <h1 style="color: red">κόκκινη Επικεφαλίδα</h1> <p style="font-size: 12px; font-family: 'Trebuchet MS', sans-serif">κείμενο παραγράφου που θα μορφοποιηθεί με το στυλ που ορίζεται στον css κανόνα.</p>
4 Φύλλα με Στυλ (Style Sheets) 1/2 7 Ενσωματωμένο στη σελίδα φύλλο στυλ Ορίζονται μέσα στο στοιχείο <head> ως εξής: <style type="text/css">.εδώ.γράφω.τα.στυλ. </style> το κόκκινο τμήμα της δήλωσης, μπορεί να παραληφθεί Κατάλληλο για μια σελίδα μόνο, η οποία είτε είναι μοναδική (μόνη της), είτε έχουμε μόνο σε αυτή πρόσβαση, ή έχει κάποιες ιδιαίτερες απαιτήσεις μορφοποίησης που δεν χρειάζονται αλλού Φύλλα με Στυλ (Style Sheets) 2/2 8 Εξωτερικό φύλλο στυλ (text αρχείο.css) Ιδανικό για τη διαχείριση ολόκληρου Web site Γίνεται include στις ιστοσελίδες ως εξής: <link href="my_style.css" rel="stylesheet" type="text/css"/> Η παραπάνω δήλωση (που κάνει include) μπαίνει ΜΟΝΟ μέσα στο <head> </head> τμήμα της ιστοσελίδας. επιτρέπονται πολλαπλές δηλώσεις <link> Το my_style.css στο παράδειγμα, είναι το αρχείο με στυλ/κανόνες που φορτώνουμε.
5 Σχόλια στη Σύνταξη Στυλ 9 Εισαγωγή σχολίων στα στυλ ως εξής /* σχόλιο */ Παράδειγμα /* σχόλιο (α) */ p {text-align: center; /* σχόλιο (β) */ color: black; font-family: arial;} Μπορεί να εκτίνονται σε πολλές γραμμές κειμένου. Παράδειγμα p { /* text-align: center; color: black; */ font-family: arial; } Κανόνες Στυλ 10 Ένα φύλλο με στυλ περιλαμβάνει κανόνες στυλ selector {property1: value1; } π.χ. Ο επιλογέας (selector) καθορίζει σε ποια html στοιχεία θα εφαρμοστεί το στυλ που ακολουθεί μέσα στα { } Αυτά τα html στοιχεία προσδιορίζονται από: 1. το όνομα τους (δηλ. την ετικέτα/tag) 2. την κλάση (class) ή το αναγνωριστικό (id) τους 3. τη θέση τους στην HTML ιεραρχία 4. την ψευδοκλάση ενός στοιχείου 5. τις ιδιότητες και τιμές ενός στοιχείου Σημείωση: να γνωρίζετε άριστα τα 3 πρώτα!
6 1. Επιλογέας ίδιος με html ετικέτα 11 Πρακτικά επανακαθορίζει τον τρόπο απεικόνισης συγκεκριμένου HTML στοιχείου. Εφαρμόζεται αυτόματα σε όλες τις html ετικέτες με ίδιο όνομα! Παραδείγματα h1 {color: blue;} p {text-align: center; color: red;} Ανάθεση στυλ σε πολλά στοιχεία ταυτόχρονα: h2,h3,h4 {color: green;} ΠΡΟΣΟΧΗ! Χωρισμένα με κόμμα! Ανάθεση στυλ σε όλα τα HTML στοιχεία: * {color: red;} Αν το χρησιμοποιήσετε, κάντε το στην αρχή των δηλώσεων στυλ γιατί αλλιώς μπορεί να αναιρέσει άλλες ρυθμίσεις που έχετε κάνει! 2a. Επιλογέας με άλλο όνομα (όχι tag) 12 Έτσι ονομασμένα στυλ μπορεί να εφαρμοστούν σε οποιοδήποτε html στοιχείο θέλουμε, αρκεί να το ζητήσουμε μέσω του html attribute: class Παράδειγμα κλάσης που "κεντράρει" το κείμενο:.center {text-align: center} Δεν είναι συνδεδεμένη με δεδομένο HTML στοιχείο! Στη σελίδα τη χρησιμοποιούμε ως εξής: <h1 class="center">κεντραρισμένη επικεφαλίδα.</h1> <p class="center">κεντραρισμένη παράγραφος.</p> Μπορούμε όμως να ορίσουμε και πιο ειδικά στυλ για χρήση σε πολλά στοιχεία, συγκεκριμένου τύπου.
7 13 Ορισμός στυλ για στοιχεία συγκεκριμένου τύπου: p.right {text-align: right;} Το στυλ.right μπορεί να εφαρμοστεί μόνο σε html στοιχεία p p.bold {font-weight: bold;} Στη σελίδα, τα χρησιμοποιούμε ως εξής: <p class="right">παράγραφος με δεξιά στοίχιση.</p> <p class="bold">παράγραφος με έντονη γραφή.</p> Μπορούμε όμως και να τα συνδυάσουμε: <p class="right bold"> Παράγραφος με έντονη γραφή και δεξιά στοίχιση. </p> ΠΡΟΣΟΧΗ: χωρίς κόμμα 2b. Επιλογέας με όνομα ίδιο με id 14 Αν ο επιλογέας έχει όνομα ίδιο με την τιμή του attribute id ενός html στοιχείου (με # μπροστά) τότε το στυλ ισχύει μόνο για αυτό το στοιχείο! Άρα δεν θα μπορούν να συνδυαστούν 2 στυλ βασισμένα σε ids σε ένα στοιχείο (όπως στο slide 13), γιατί δεν μπορεί ένα στοιχείο να έχει 2 ids!!! Άρα, έστω ένα συγκεκριμένο (με id) div: <div id="header">my home page</div> Θέλουμε να φτιάξουμε ένα στυλ που κάνει έντονη γραφή για αυτό το συγκεκριμένο HTML στοιχείο: #header {font-weight: bold} Tα ονόματα των ids πρέπει να είναι μοναδικά σε κάθε σελίδα και καλό είναι να μην ξεκινούν με αριθμό.
8 3. Σύνθετος επιλογέας (html ιεραρχία) 15 Ο σύνθετος επιλογέας προκύπτει (κυρίως) συνδυάζοντας αποδεκτούς επιλογείς ορισμένους όπως είδαμε μέχρι τώρα (δηλ. με html tag name, με class και με id). Παράδειγμα: το επόμενο στυλ κάνει όλα τα em στοιχεία που βρίσκονται εντός p στοιχείων να έχουν πράσινο text: p em {color: green;} ΠΡΟΣΟΧΗ! Χωρίς κόμμα! Άλλο παράδειγμα (τι κάνει;):.mystyle p {color: #333;} Άρα έτσι αναθέτουμε κανόνες με βάση την html ιεραρχία!!! Ειδικότεροι ορισμοί (σπανιότεροι σε χρήση): Για στοιχεία με πατέρα δεδομένο στοιχείο γράφουμε: p > em {color: red;} Για "αδελφικά" στοιχεία (δηλ. στο ίδιο HMLT επίπεδο) με αυτή τη σειρά: h1 + p {color: red;} 4. Επιλογέας - Ψευδοκλάση Ορίζει στυλ για ιδιαίτερες καταστάσεις στοιχείων, όπως π.χ. το στοιχείο <a> a:link {color: red;} απλός σύνδεσμος a:visited {color: orange;} πρόσφατη επίσκεψη a:hover {color: green;} το mοuse είναι πάνω του Τα ορίζουμε πάντα με την παραπάνω σειρά! Έχει σημασία η σειρά γιατί ένας υπερσύνδεσμος μπορεί να είναι σε πολλές καταστάσεις ταυτόχρονα. Για τις καταστάσεις και περισσότερες ψευδοκλάσεις δείτε στο W3Schools στη ενότητα CSS Selectors: 16
9 5. Επιλογέας βάση html attribute-value 17 Μπορούμε να ορίσουμε στυλ για HTML στοιχεία που έχουν συγκεκριμένη ιδιότητα (attribute) ή συγκεκριμένο ζεύγος ιδιότητας-τιμής. Όχι δηλαδή μόνο με βάση τις ιδιότητες id και class. Ορισμός στυλ για στοιχεία με δεδομένη ιδιότητα: [title] { color:blue; } Δηλ. κάθε στοιχείο με ιδιότητα title θα έχει μπλε κείμενο! Ορισμός στυλ για στοιχεία με δεδομένο ζεύγος ιδιότητα-τιμή: [title="τει Λάρισας"] { color:red; } Μόνο τα HTML στοιχεία με τιμή "ΤΕΙ Λάρισας" στην ιδιότητα title, θα έχουν κόκκινο χρώμα. Συνδυασμός στυλ σε html στοιχείο 18 Σε ένα HTML στοιχείο μπορεί να εφαρμοστούν ταυτόχρονα, στυλ που προέρχονται από διαφορετικά επίπεδα ορισμού. Παράδειγμα, στην παράγραφο <p id="foo" class="myclass" title="moo" >hello</p> θεωρητικά μπορεί να ορίζουν μορφοποίηση οι κανόνες #foo,.myclass, [title] και [title="moo] που δρουν συμπληρωματικά! Αυτή είναι άλλωστε και η έννοια cascading! Σε πολύπλοκους ορισμούς, με πολλαπλά επίπεδα, δεν θα είστε σε θέση να προβλέψετε το αποτέλεσμα! Με F12 σε browser μπορείτε να δείτε πώς προκύπτει η τελική τιμή! Αποφεύγετε καλύτερα τους πολύπλοκους ορισμούς! Να έχετε υπόψη τους ακόλουθους 3 κανόνες:
10 Εξειδίκευση και Κληρονομικότητα Για την ρύθμιση δεδομένης CSS ιδιότητας, τα στυλ γραμμής (inline) υπερισχύουν των στυλ που είναι δηλωμένα στη σελίδα και αυτά υπερισχύουν των στυλ εξωτερικού αρχείου (included). 2. Πολλές ιδιότητες κληρονομούνται από ένα στοιχείο γονέα σε ένα στοιχείο παιδί. π.χ. ένα <p> που δεν έχει δηλωμένο δικό του μέγεθος γραμμάτων, μορφοποιείται πιθανώς εξαιτίας του πατρικού του στοιχείου που ίσως έχει τέτοια ρύθμιση. Αν ούτε στα προγονικά στοιχεία υπάρχει σχετική δήλωση τότε θα ισχύει κάποια default ρύθμιση (από τις προδιαγραφές της HTML ή (σπάνια) του browser. 3. Αν σε στοιχείο δρουν πολλοί κανόνες και θέτουν ο καθένας διαφορετική τιμή στην ίδια ιδιότητα, τότε επικρατεί η ρύθμιση του πιο εξειδικευμένου. Οι κανόνες εξειδίκευσης δίνονται στη συνέχεια: Προτεραιότητες σε επιλογείς CSS 20 Στα επόμενα, το πιο πάνω είναι πιο ειδικό/ισχυρό. Οι ρυθμίσεις με!important επικρατούν πάντα. Αποφεύγετε τη χρήση του. Καταστρέφει το cascading! #foo {color:red!important;} In-line κανόνες (δηλωμένοι στο style=" ") <p style="width: 600px;">Hello World</p> Κανόνες με βάση κάποιο id (με # στον επιλογέα) #header {color: blue; font-size: 2em;} Κανόνες με επιλογέα class, attribute ή pseudoclass.mystyle {color: black;} Κανόνες με επιλογέα όνομα HTML στοιχείου. h2 { color: green; }
11 Παράδειγμα Επικάλυψης Στυλ 21 <style> p { color: black;} #green { color: green; }.blue {color: blue;}.orange {color: orange;} Super SOS </style> <div style="color: teal;"> <p id="green" class="orange blue" style="color: red;">hello!</p> </div> Τι χρώμα είναι το κείμενο της παραγράφου; Απάντηση: red Επικρατεί η τοπική δήλωση (red), πιο πριν ο κανόνας του id (green), πιο πριν ο κανόνας της κλάσης (orange) 1, πιο πριν ο κανόνας της ετικέτας p (black) και πιο πριν το κληρονομημένο χρώμα από το div (teal). 1. Η κλάση orange δηλώθηκε μετά την blue και επικρατεί έναντι αυτής. Μονάδες Μήκους 22 Απόλυτα Μεγέθη in (inches), cm (centimeters), (mm) millimeters pt (points), ισούται με 1/6 της ίντσας pc (picas), ισούται με το 1/72 της ίντσας Σχετικά Μεγέθη (τα κυριότερα) px (pixels), εξαρτώνται από την ανάλυση της οθόνης em, μονάδα μέτρησης είναι το μέγεθος ενός χαρακτήρα γραμμένου με την default γραμματοσειρά στο δεδομένο σημείο, είτε αυτή είναι τοπικά ορισμένη ή κληρονομείτε από ανώτερα επίπεδα πολύ σημαντική μονάδα!!! % ποσοστό της τιμής του ίδιου μεγέθους στο πατρικό στοιχείο (π.χ. width: 80%;) Οι μονάδες γράφονται κολλητά στον αριθμό (σε τιμή 0 δεν χρειάζονται)
12 Χρώματα λέξεις κλειδιά (προκαθορισμένα βασικά χρώματα) red, fuchsia, blue, maroon, green, aqua, orange, olive, silver, white, purple, yellow, teal, navy, black, gray, lime Παραδείγματα τιμών σε RGB 1. #0000FF 2. #00F (συντομογραφία του 1) 3. rgb(0,0,255) 4. rgb(0%, 0%, 100%) 5. #42A7B2 Χρώμα Κειμένου και Υπόβαθρο/Φόντο 24 Χρώμα Κειμένου: ιδιότητα color p {color: green} H ιδιότητα color κληρονομείται Χρώμα Φόντου σε block: ιδιότητα background-color table {background-color: green} H ιδιότητα background-color ΔΕΝ κληρονομείται Εξ' ορισμού έχει την τιμή transparent δηλαδή τα block από μόνα τους είναι διάφανα, δεν έχουν φόντο
13 Εικόνα ως Υπόβαθρο/Φόντο (Ι) 25 Η ιδιότητα background-image Μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο. Παράδειγμα: body {background-image: url('image.gif')} Προσοχή Αν ορισθεί και χρώμα και εικόνα ως υπόβαθρο, τότε θα εμφανισθεί το χρώμα, μέχρι να φορτωθεί η εικόνα Επανάληψη εικόνας Ιδιότητα background-repeat, με επιτρεπτές τιμές repeat, repeat-x, repeat-y, no-repeat Προκαθορισμένη τιμή είναι η repeat Εικόνα ως Υπόβαθρο/Φόντο (ΙΙ) 26 Όταν scrollάρει η σελίδα με τις μπάρες κύλισης (scroll bars) τι γίνεται με το φόντο σελίδας: background-attachment:fixed Το φόντο μένει ακίνητο! background-attachment:scroll Το φόντο scrollάρει και αυτό! Προκαθορισμένη τιμή είναι η fixed. Απόσταση από την πάνω αριστερά γωνία Ιδιότητα background-position, με επιτρεπτές τιμές ζεύγη x y Δυνατή τιμή x: απόσταση από αριστερά, %, left, center, right Δυνατή τιμή y: απόσταση από κορυφή, %, top, center, bottom Προκαθορισμένη τιμή είναι η left top Αv δοθεί μία μόνο τιμή, η δεύτερη θεωρείται center
14 Block και Inline Παρουσίαση Στοιχείων 27 Παρουσίαση block (display: block) Ξεκινάνε πάντα κάτω από το προηγούμενο (όπως μια παράγραφος) Καταλαμβάνουν όλο το πλάτος του γονέα τους. Δεν μπορούμε να τοποθετήσουμε κάτι δίπλα τους στην κανονική ροή (normal flow) σχεδίασης της σελίδας! Συνήθως τα block στοιχεία έχουν block παρουσίαση Δηλαδή ορθογώνια κάποιων διαστάσεων ρητά δηλωμένων ή που προκύπτουν από την υπόλοιπη σελίδα. Παρουσίαση in-line (display: inline) Εμφανίζονται στην τρέχουσα γραμμή (στη ροή κειμένου) Θα αλλάξουν γραμμή χωρίς να δημιουργήσουν κενά όταν τελειώσει το πλάτος της τρέχουσας γραμμής Συνήθως τα inline στοιχεία έχουν inline παρουσίαση Μορφοποίηση Κειμένου με CSS 28 Θα δούμε πώς ρυθμίζονται με CSS τα ακόλουθα: Γραμματοσειρές Μέγεθος, στυλ, βάρος και διακόσμηση Μικρά και Κεφαλαία Διάστιχο (spacing) απόσταση διαδοχικών γραμμών σε παράγραφο Απόσταση Χαρακτήρων-Λέξεων (kerning) Εσοχές (indents) Λευκά κενά Στοίχιση κειμένου Μικρά, κεφαλαία, διακόσμηση
15 Γραμματοσειρές (1/2) 29 Ορίζονται με την ιδιότητα font-family h1, h2 {font-family: Arial} p {font-family: "Palatino Linotype"} Εισαγωγικά για γραμματοσειρά με πολλές λέξεις Προσοχή! Η γραμματοσειρά θα πρέπει να υπάρχει στο σύστημα του χρήστη, αλλιώς χρησιμοποιείται η προκαθορισμένη γραμματοσειρά του browser με πιθανώς αμφίβολα αισθητικά αποτελέσματα! Βάζουμε περισσότερες γραμματοσειρές (2 ή 3) p {font-family: "Trebuchet MS", Arial} Αν δεν βρεθεί η πρώτη, θα ζητηθεί η δεύτερη. Η τελευταία πρέπει να είναι αρκετά γενική ώστε να μπορεί το λειτουργικό σύστημα να βρει έστω μια παρόμοια! Γραμματοσειρές (2/2) 30 Γενικές γραμματοσειρές Μηχανισμός ανάγκης προκειμένου να διατηρηθεί το ύφος της γραμματοσειράς όταν δεν βρεθεί η ίδια! Υπάρχουν 3 βασικές: serif (Times New Roman, Georgia) (με «μουστάκια») οι γραμμές των γραμμάτων δεν έχουν παντού ίδιο πάχος sans-serif (Arial, Verdana) (χωρίς «μουστάκια») οι γραμμές των γραμμάτων έχουν παντού ίδιο πάχος monospace (Courier New, Lusida Console) (ίσου πλάτους) κάθε γράμμα καταλαμβάνει ίδιο πλάτος (σαν γραφομηχανή!) πχ. h2 {font-family: Verdana, Arial, sans-serif} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: serif σε τυπωμένα βιβλία sans-serif σε οθόνη/web
16 Μέγεθος Χαρακτήρων (1/2) 31 Απόλυτο μέγεθος Με μονάδες μέτρησης ίντσες (in), εκατοστά (cm), χιλιοστά (mm), points (pt), picas (pc) h1 {font-size: 2cm} Με λέξεις κλειδιά (προκαθορισμένα μεγέθη) xx-small, x-small, small, medium, large, x-large, xx-large h1 {font-size: x-large} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: Τα απόλυτα μεγέθη θα πρέπει να αποφεύγονται γιατί: επιβάλλονται στις ρυθμίσεις μεγέθους που πιθανώς έχει ορίζει στον browser, χρήστης με προβλήματα όρασης το αποτέλεσμα επηρεάζεται από τα χαρακτηριστικά της συσκευής (τα pixels είναι μικρότερα στα smartphones απ'ότι στην tv) Μέγεθος Χαρακτήρων (2/2) 32 Σχετικό μέγεθος Σε pixel (εξαρτάται από την ανάλυση οθόνης) p {font-size: 16px} Σχετικό με το default μέγεθος χαρακτήρων στο σημείο που γράφουμε. h2 {font-size: 1.5em}.myVeryBig {font-size: 400%} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: Η χρήση em συσχετίζει ένα μέγεθος με άλλο (με το default της περιοχής). Αυτό επιτρέπει στήσιμο σελίδας με όλα τα μεγέθη να εξαρτώνται μεταξύ τους κάτι που οδηγεί σε σελίδες που εύκολα μετατρέπονται (ή είναι έτοιμες) για προβολή σε οθόνες κάθε μεγέθους. Αλλάζουμε το default μέγεθος και όλα αναπροσαρμόζονται!
17 Στυλ Χαρακτήρων 33 Η ιδιότητα font-style.normal {font-style: normal}.emph1 {font-style: italic}.emph2 {font-style: oblique} Θεωρητική διαφορά italic και oblique Τα italic σχεδιάζονται απ την αρχή από άνθρωπο Τα oblique παράγονται αυτόματα από τον υπολογιστή αν δεν υπάρχει η italic, θα παραχθεί η oblique Που χρειάζεται το στυλ normal; Σε περίπτωση που θέλουμε να επαναφέρουμε το normal στυλ μέσα σε μια ενότητα κειμένου που έχει στυλ italic ή oblique. Βάρος Χαρακτήρων 34 H ιδιότητα font-weight.bold {font-weight: bold}.normal {font-weight: normal} Ορισμός του βάρους με τιμές Πολλαπλάσια του 100 από 100 έως 900 Η τιμή 400 αντιστοιχεί στο φυσιολογικό βάρος Η τιμή 700 αντιστοιχεί στο έντονο βάρος Π.χ..extrastrong {font-weight: 900} Ορισμός του βάρους σε σχέση με το γονέα.stronger {font-weight: bolder}.lighter {font-weight: lighter}
18 Διακόσμηση Χαρακτήρων 35 Η ιδιότητα text-decoration.underline {text-decoration: underline}.overline {text-decoration: overline}.strike {text-decoration: line-through}.blink {text-decoration: blink}.none {text-decoration: none} Παράδειγμα a:link, a:visited {text-decoration: none} Κάνει όλους τους συνδέσμους (είτε τους έχουμε επισκεφτεί είτε όχι) να μην έχουν υπογράμμιση. Μικρά και Κεφαλαία 36 Η ιδιότητα font-variant.sc {font-variant: small-caps}.normalvariant {font-variant: normal} Η ιδιότητα text-transform.capitalize {text-transform: capitalize}.uppercase {text-transform: uppercase}.lowercase {text-transform: lowercase}.none {text-transform: none}
19 Στοίχιση Κειμένου 37 Η ιδιότητα text-align left, right, center, justify Εφαρμόζεται μόνο σε στοιχεία τύπου block που παίρνουν μέσα τους κείμενο. Δεν έχει νόημα να στοιχίσουμε in-line κείμενο (π.χ. δυο λέξεις στη ροή μιας παραγράφου)!!!!!!! Πρέπει αυτές να είναι μόνες τους μια παράγραφος και να στοιχίσουμε την παράγραφο. Απόσταση Χαρακτήρων και Λέξεων 38 H ιδιότητα word-spacing h1 {word-spacing: 3em;} Η ιδιότητα letter-spacing p {letter-spacing: 2px;} Για επιστροφή στην κανονική απόσταση Θέτουμε την τιμή 0 ή normal στην απόσταση Αρνητικές τιμές Έχουν ως αποτέλεσμα την επικάλυψη χαρακτήρων Οι ιδιότητες αυτές κληρονομούνται στα παιδιά Στις σχετικές μονάδες κληρονομείται η προκύπτουσα τιμή και όχι η σχέση με τη default γραμματοσειρά.
20 Λευκά Κενά (White Spaces) 39 Για να φαίνονται όλα τα κενά και οι αλλαγές γραμμών όπως και στον κώδικα p {white-space: pre;} Για να μην γίνεται αλλαγή γραμμής στα κενά p {white-space: nowrap;} Π.χ. μέσα σε κελί πίνακα Για την φυσιολογική θεώρηση των κενών και των αλλαγών γραμμών (τα επιπλέον αγνοούνται) p {white-space: normal;} Εσοχές 40 Η ιδιότητα text-indent Σε σχέση με το μέγεθος των χαρακτήρων p {text-indent: 3.5em} Απόλυτη τιμή p {text-indent: 10px} Σε σχέση με το πλάτος του στοιχείου γονέα p {text-indent: 10%} Θετικές τιμές για την ιδιότητα δημιουργούν την κλασική αριστερή εσοχή πρώτης γραμμής παραγράφου. Αρνητικές τιμές δημιουργούν την κρεμαστή εσοχή πρώτης γραμμής (δηλαδή η πρώτη σειρά ξεκινά αριστερότερα από τις υπόλοιπες!). Για αφαίρεση της εσοχής σε κάποιο στοιχείο, θέτουμε στην ιδιότητα την τιμή 0.
21 Διάστιχο με την Ιδιότητα line-height 41 Σε σχέση με το μέγεθος της γραμματοσειράς Το μέγεθος προκύπτει από την τιμή επί την σχετική μονάδα μέτρησης. p {line-height: 150%} p {line-height: 1.5em} Το μέγεθος προκύπτει από την τιμή επί το μέγεθος γραμμάτων (font-height) που ισχύει: p {line-height: 1.5} Απόλυτο μέγεθος σε οποιαδήποτε, μη σχετική, μονάδα μέτρησης p {line-height: 0.3in} Μοντέλο Κουτιού (Box Model) 42 Κάθε στοιχείο θεωρείται ως παραλληλόγραμμο κουτί, το οποίο περιέχει τις εξής περιοχές: περιεχόμενο (content), το οποίο περιβάλλεται από το παραγέμισμα (padding), το οποίο περιβάλλεται από το περίγραμμα (border), το οποίο περιβάλλεται από το περιθώριο (margin) Χαρακτηριστικά του μοντέλου Τo margin είναι πάντα διάφανο και δεν περιορίζονται απαραίτητα εντός του πατρικού html στοιχείου. Βλ. άσκηση 03 το κενό μεταξύ main και footer Το border μπορεί να έχει διάφορα στυλ. Τυχόν φόντο (background) σε στοιχείο, επικαλύπτει και την περιοχή του padding (πρακτικά, όλα τα εντός border)
22 Απεικόνιση του Box Model 43 Ιδιοτροπίες IE<7 ως προς Box Model 44 Το width σε block element αφορά στο χώρο που διατίθεται για το περιεχόμενο (content) (προδιαγραφές W3C). Σε παλιούς Internet Explorer (<7) συμπεριλάμβανε και τις περιοχές padding και border. Έπρεπε να γράφονται 2 CSS (IE και άλλοι) Νεώτεροι ΙΕ τηρούν τις προδιαγραφές. Για αποφυγή του προβλήματος μην βάζετε border/padding σε div χωροθέτες, που έχουν ρητά δηλωμένο width. Αν σύγχρονος ΙΕ θέλετε σε δεδομένη σελίδα να συμπεριφερθεί σαν παλιός, βάλτε στο head της σελίδας: <meta http-equiv="x-ua-compatible" content="ie=7">
23 Γεωμετρία Περιεχομένου (content) 45 Πλάτος της περιοχής περιεχομένου Απόλυτο μήκος p {width: 200px} Ποσοστό σε σχέση με το πλάτος του στοιχείου γονέα p {width: 90%} Υπολογισμένο αυτόματα (auto) από τον browser προκαθορισμένη ρύθμιση, p {width: auto} Ύψος της περιοχής περιεχομένου Απόλυτο ύψος p {height: 200px} Υπολογισμένο αυτόματα (auto) προκαθορισμένη ρύθμιση, p {height: auto} Πρόσφατα attributes: min-width και min-height εξασφαλίζουν ελάχιστες τιμές πλάτους και ύψους Γεωμετρία Περιγράμματος (border) (1/2) Η ιδιότητα border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Απαιτείται για την εμφάνιση του περιγράμματος Το υπόβαθρο του στοιχείου φαίνεται μέσα από το περίγραμμα όταν αυτό δεν είναι συνεχής γραμμή (π.χ. dotted) Η ιδιότητα border-width Ορίζουμε πάχος περιγράμματος με αριθμητική τιμή και μονάδες μήκους: π.χ. 2px Προκαθορισμένες λεκτικές τιμές: thin, medium, thick Η ιδιότητα border-color Ορίζουμε χρώμα περιγράμματος 46
24 Γεωμετρία Περιγράμματος (border) (2/2) 47 Σύνταξη με σύντομο τρόπο border-color: red green orange blue; Σειρά ρολογιού με αρχή ώρα 12:00: επάνω, δεξιά, κάτω, αριστερά Σύνταξη αναλυτικά με χρήση υπό-ιδιοτήτων border-top-color: red; border-right-width: thick; Μπορούμε να συνδυάσουμε πολλές ιδιότητες border-top: solid red 5px; border-right: yellow dotted; border: thick dashed orange; όχι όμως με σύντομο τρόπο (ωρολογιακά)! Γεωμετρία Περιθωρίου (Margin) (1/2) 48 Το μέγεθος του margin για κάθε πλευρά μπορεί να είναι Απόλυτο μήκος Ποσοστό σε σχέση με το μήκος της πλευράς του στοιχείου γονέα Υπολογισμένο αυτόματα (auto) Στις δύο πρώτες περιπτώσεις, καθορίζεται ως εξής: p {margin: 10px;} Όλες οι πλευρές θα έχουν margin 10px p {margin: 2em 20px;} 2em πάνω και κάτω, 20px αριστερά και δεξιά p {margin: 10px 20% 30px;} 10px πάνω, 20% του γονέα δεξιά και αριστερά, 30px κάτω p {margin: 10px 20px 30px 40px;} 10px πάνω, 20px δεξιά, 30px κάτω, 40px αριστερά (ωρολογιακά)
25 Γεωμετρία Περιθωρίου (Margin) (2/2) 49 Υπο-ιδιότητες για καθορισμό margin μιας πλευράς: margin-top, margin-right, margin-bottom, margin-left H επακριβής τιμή του auto εξαρτάται από το μέγεθος του περιεχομένου του κουτιού όπως αυτό έχει οριστεί με τις ιδιότητες width και height Μια συνήθης χρήση του auto είναι για οριζόντιο κεντράρισμα ενός block στοιχείου με δεδομένο width, μέσα στο πατρικό του (που προφανώς πρέπει να είναι πιο φαρδύ). Αν ένα κουτί τοποθετηθεί πάνω από ένα άλλο, τότε θεωρείται ότι ισχύει μόνο το μεγαλύτερο από τα δύο ενώ το άλλο λέμε ότι καταρρέει (collapse) Γεωμετρία Παραγεμίσματος (Padding) 50 Χρήσιμο για απομάκρυνση από το border του κειμένου που βρίσκεται μέσα στο content. Αποφεύγετε τη χρήση του σε δομικά div με ορισμένο width. Γενικά ισχύουν και εδώ όσα αναφέρθηκαν στα αντίστοιχα θέματα για το margin. Η τιμή του padding κάθε πλευράς μπορεί να είναι: Απόλυτο μήκος π.χ. 20px Σχετικό μήκος: em ή % ως προς το αντίστοιχο του γονέα Υπο-ιδιότητες για καθορισμό padding μιας πλευράς: padding-top, padding-right, padding-bottom, padding-left
26 Ορατότητα Στοιχείων 51 display:none το στοιχείο αγνοείται τελείως κατά τη σχεδίαση της σελίδας (σαν να μην υπάρχει στον κώδικα) έτσι αντιμετωπίζει ο browser τα HTML σχόλια visibility: hidden (ή visible) το στοιχείο καταλαμβάνει κανονικά τη θέση του στο χώρο της σελίδας αλλά, εφόσον visibility:hidden, δεν είναι ορατό. Είναι χρήσιμες ιδιότητες για δημιουργία εφέ απόκρυψης-εμφάνισης σε συνδυασμό με JavaScript Σύνοψη Κύριων Ορισμών για Κανόνες CSS 52 Το βασικότερο σημείο είναι ο επιλογέας! Αυτός καθορίζει το που θα δράσει ο κανόνας. Τα βασικά: Αν είναι html ετικέτα: ο κανόνας δρα αυτόματα σε τέτοια html στοιχεία, πχ h2 { padding: 10px; } Αν είναι με όνομα ίδιο με την τιμή της ιδιότητας id ενός html στοιχείου, τότε δρα αυτόματα μόνο σε αυτό το στοιχείο, πχ #someid { padding: 5px 10px; } <h1 id= someid >μπλα μπλα...<h1> Αν είναι με κάποιο άλλο όνομα με τελεία μπροστά τότε δρα μόνο σε όσα html στοιχεία το ζητήσουμε μέσω της ιδιότητας class. πχ.mycss { padding: 1em 1em 2em 1em } <p class= mycss >μπλα μπλα...<p> Αν συνδυάζει html ετικέτα και όνομα με τελεία, τότε δρα μόνο σε στοιχεία τέτοιας ετικέτας που όμως έχουν (το ζητάμε) και ιδιότητα class. πx ο κανόνας: p.foo { } <p class= foo >μπλα μπλα...<p> το class= foo μπαίνει μόνο σε p
27 Σύνοψη σε Διαδοχικούς Επιλογείς 53 σαλίας Όταν έχω διαδοχικούς επιλογείς ΟΧΙ χωρισμένους με κόμμα τότε πρόκειται για κανόνες που δρουν με βάση την HTML ιεραρχία: #xyz p.foo span {color:red;} Θα δράσει στα html στοιχεία με ετικέτα span που βρίσκονται μέσα σε στοιχείο με ετικέτα p και class="foo", που βρίσκεται μέσα σε στοιχείο με id="xyz". Δεν χρειάζεται να κάνουμε κάτι σε αυτό το span o κανόνας θα δράσει αυτόματα! Ακολουθεί παράδειγμα html κώδικα: <div id= xyz ><p class= foo >Πάρα <span>πολύ</span> εύκολο</p></div> Η λέξη «πολύ» θα τυπωθεί στην οθόνη με κόκκινα γράμματα. Όταν έχω διαδοχικούς επιλογείς χωρισμένους με κόμμα τότε πρόκειται για διαφορετικούς κανόνες με κοινές ρυθμίσεις. #xyz, p.foo, span {color:red;} (τριπλός κανόνας!) ΔΡΑ: αυτόματα σε όλα τα span. σε όλες τις παραγράφους (p) που θα βάλουμε class="foo", αυτόματα στο στοιχείο με id="xyx" (ένα θα είναι, τα id είναι μοναδικά) CCS Μέρος Β Χωροθέτηση με CSS
28 Διαρρύθμιση (Layout) με CSS 55 Πλεονεκτήματα σε σχέση με τους πίνακες Κεντρική διαχείριση εμφάνισης (σε css αρχείο). Εύκολη αναμόρφωση site (σε διαρρύθμιση και μορφοποίηση) με αλλαγή css αρχείου! Μικρότερου μεγέθους αρχεία HTML. Μειονεκτήματα σε σχέση με τους πίνακες Κάποιοι (πλέον παμπάλαιοι) browsers δεν υποστήριζαν σωστά τις css προδιαγραφές (π.χ. IE 5.x, ΙΕ6). Το πρόβλημα δεν υφίσταται πλέον (με σύγχρονους browsers). Καλό είναι να αποφεύγεται η χρήση των ιδιαίτερων css χαρακτηριστικών που υποστηρίζει κάθε browser. Προτιμείστε ό,τι υποστηρίζεται από όλους. Δόμηση της Σελίδας 56 Οι λογικές ενότητες (ζώνες χρήσης) μιας σελίδας θα πρέπει να οριοθετούνται με τη χρήση <div> π.χ. κεφαλίδα, κύριο τμήμα (περιεχομένου), πλαϊνό ή οριζόντιο τμήμα (πλοήγηση-menu), υποσέλιδο, κτλ στα δομικά div ορίζεται attribute id και μορφοποιούνται και χωροθετούνται με βάση δικό τους css κανόνα με επιλογέα το id (π.χ. #header { ρυθμίσεις } Το περιεχόμενο μέσα στις ζώνες χρήσης θα πρέπει να δομείται με κατάλληλες html ετικέτες, ανάλογα και τις ανάγκες. Στα επόμενα slides γίνεται μόνο αναφορά εννοιών. Δείτε οπωσδήποτε τα slides με τα παραδείγματα!
29 Κανονική Ροή, CSS, Πλεύση 57 Στην κανονική ροή (normal flow) τα block στοιχεία χωροθετούνται το ένα κάτω από το άλλο εντός του πατρικού, αρχίζοντας από πάνω-αριστερά τα inline στοιχεία χωροθετούνται στη ροή του κειμένου Στην τοποθέτηση με χρήση CSS τα blocks στοιχεία είτε είναι στην κανονική ροή είτε αφαιρούνται από αυτή και χωροθετούνται ως προς κάποιο σημείο αναφοράς (βλ. pdf με παραδείγματα ) Πλεύση (floating) H ιδιότητα float μετατοπίζει ένα στοιχείο αριστερά ή δεξιά εντός του πατρικού στοιχείου και επιτρέπει να σχεδιάζονται block στοιχεία το ένα δίπλα στο άλλο, κατά παράβαση της σχεδίασης με βάση την κανονική ροή. Τοποθέτηση Κουτιού/Block 58 Υπάρχουν 4 τρόποι τοποθέτησης ενός block 1. Στη φυσιολογική του θέση, σύμφωνα με τη ροή της HTML από πάνω προς τα κάτω (static positioning) 2. Καθορισμός επακριβών συντεταγμένων σε σχέση 1. είτε με το στοιχείο γονέα (absolute) 2. είτε με το παράθυρο του browser (fixed), 3. Μετακίνηση του κουτιού σε σχέση με την προκαθορισμένη θέση του στη ροή της HTML (relative) 4. Αλλοίωση στατικής (static) θέσης με χρήση float Επιπλέον, αν τα κουτιά επικαλύπτονται μεταξύ τους, τότε μπορεί να καθοριστεί η σειρά επικάλυψής τους (3 η διάσταση, z-index) (δεν θα το δούμε)
30 2.1 Απόλυτη Τοποθέτηση (absolute) 59 Για απόλυτη τοποθέτηση χρησιμοποιούμε Σε "πιο έξω" block (συνήθως στον γονέα) το: position: relative; χωρίς περαιτέρω τιμές αυτό είναι το block αναφοράς Στο υπό τοποθέτηση στοιχείο: position: absolute; και ένα ή παρακάτω ζεύγη ιδιότητας τιμής Ιδιότητα: top, right, bottom, left (δηλώνει την πλευρά) Τιμή: π.χ. top:2em; right:-2em; (δηλώνει την απόσταση του υπό τοποθέτηση block από τη δεδομένη πλευρά του block αναφοράς) Αν δεν οριστεί από εμάς block αναφοράς μέσω του position:relative; τότε γίνεται αυτόματα το <body>!!! Παράδειγμα Απόλυτης Τοποθέτησης 60 #div1 { border: solid thin black; background-color: #CACBCB; width: 300px; height: 150px; position: relative; } #div2 { border: dotted thin black; background-color: #BCE0C1; width: 100px; height: 50px; position: absolute; right: 1em; bottom: 1em; } <body> <div id="div1">div1 <div id="div2">div 2</div> </div> </body>
31 2.2 Σταθερή Τοποθέτηση (fixed) 61 Για σταθερή τοποθέτηση (fixed) χρησιμοποιούμε Στο υπό τοποθέτηση στοιχείο βάζουμε: position: fixed; Επιπλέον βάζουμε ένα ή περισσότερα ζεύγη ιδιότητας τιμής, όπου: η ιδιότητα δηλώνει την πλευρά: top, right, bottom, left η τιμή δηλώνει την απόσταση του υπό τοποθέτηση block από τη δεδομένη πλευρά του παραθύρου του browser. π.χ. top: 2em; bottom: -2em; Άρα η τοποθέτηση γίνεται με αναφορά την client area του browser, δηλ. το μέρος στο παράθυρο που απεικονίζει τη σελίδα (βλ. κόκκινο πλαίσιο στο επόμενο παράδειγμα). Προσοχή: Δεν κουνιέται με το scrolling!!! Παράδειγμα fixed Τοποθέτησης 62 #div1 { border: solid thin black; background-color: #CACBCB; width: 300px; height: 150px; } <body> <div id="div1">div1 <div id="div2">div 2</div> </div> </body> #div2 { border: dotted thin black; background-color: #BCE0C1; width: 100px; height: 50px; position: fixed; right: 1em; bottom: 1em; }
32 3. Σχετική Τοποθέτηση (relative) 63 Για σχετική τοποθέτηση (relative), στο υπό τοποθέτηση στοιχείο, χρησιμοποιούμε: το ζεύγος ιδιότητας τιμής: position: relative; ένα ή περισσότερα ζεύγη ιδιότητας τιμής, όπου η ιδιότητα δηλώνει την πλευρά top, right, bottom, left η τιμή δηλώνει την απόσταση του στοιχείου από εκείνη την πλευρά, από το πατρικό του στοιχείο π.χ. top: 2em; right: -2em; Το στοιχείο τοποθετείται αρχικά στη θέση που θα καταλάμβανε στη ομαλή ροή σχεδίασης και μετά μετατοπίζεται όπως λένε οι τιμές: Είναι σαν να το σπρώχνουμε από την πλευρά της ιδιότητας για την οποία δίνουμε τιμή. Αρνητικές τιμές ισοδυναμούν με έλξη! Προσοχή: Ο χώρος που καταλάμβανε αυτό το στοιχείο στην ομαλή ροή σχεδίασης παραμένει δεσμευμένος (και άδειος)!!! Παράδειγμα Σχετικής Τοποθέτησης 64 #div1 { border: solid thin black; background-color: #CACBCB; width: 300px; height: 150px; } #div2 { border: dotted thin black; background-color: #BCE0C1; width: 100px; height: 50px; position: relative; right: -30px; bottom: 0.5em; } Μετατοπίσεις: 0.5em σπρώξιμο από bottom 30px έλξη (λόγω του μείον) από right <body> <div id="div1">div1 <div id="div2">div 2</div> </div> </body>
33 4. Τοποθέτηση με float 65 Για τοποθέτηση με float χρησιμοποιούμε float:left; ( ή float:right; ) Το block στοιχείο που έχει ρύθμιση float: "παρκάρει" αριστερά (ή δεξιά) εντός του πατρικού επιτρέπει σε επόμενα block στοιχεία να απεικονιστούν δεξιά του (ή αριστερά του), εφόσον χωρούν! εκτός κι αν το επόμενο block στοιχείο δεν θέλει "παρέα" στην συγκεκριμένη του πλευρά βάζοντας clear:left (ή clear:right) Με clear:both σε block στοιχείο επαναφέρουμε τον τρόπο σχεδίασης για αυτό και τα επόμενα, σε normal flow. Δείτε οπωσδήποτε τo pdf με όλα τα σχετικά παραδείγματα! Παράδειγμα Τοποθέτησης με float 66 #div1 { border: solid thin black; width: 300px; height: 150px; } #div2 { border: dotted thin black; width: 100px; height: 50px; float: left; } #div3 { border: dotted thin black; width: 100px; height: 70px; float: right; }.clear { border: dotted thin black; clear: both; } <body> <div id="div1">div1 <div id="div2">div 2</div> <div id="div3">div 3</div> <div class="clear">div 4</div> </div></body>
34 Media Queries (CSS3) 67 Επιτρέπουν την ενσωμάτωση στη σελίδα μιας ομάδας κανόνων CSS, μόνο εάν ικανοποιείται μια συνθήκη. Τυπική Σύνταξη (για πλήρη περιγραφή δείτε mediatype and (media feature) {CSS code} Το τμήμα σε πλάγια γράμματα ορίζει την συνθήκη και έχει 2 μέρη. Τα mediatypes (all, screen, print, speech) καθορίζουν το μέσο. Τα media features ορίζουν τους περιορισμούς. max-width, min-width, orientation, device-aspect-ratio, κτλ only screen and (max-width: 500px) { body { background-color: lightblue; }.center { text-align: center; } } Οι 2 κανόνες θα ενσωματωθούν μόνο για προβολή σε οθόνη (screen) και σε αναλύσεις ως 500px πλάτος. Media Queries 68 Μπορείτε επίσης να ενσωματώσετε υπό συνθήκη, εξωτερικό CSS αρχείο. Παράδειγμα: <link rel="stylesheet" media="only screen and (min-width: 480px)" href="mystylesheet.css"> Η χρήση των media queries απαιτεί οργάνωση! Κατανοείστε την λειτουργία τους σε απλά project. Πλέον η οδηγία είναι mobile first, δηλαδή τα sites να σχεδιάζονται έχοντας κατά νου τις μικρές συσκευές και η υποστήριξη μεγάλων οθονών να μπαίνει ως συμπλήρωμα (και όχι το ανάποδο).
35 Media Queries - Παραδείγματα screen and (min-width: 600px) { <κανόνες> } Οι <κανόνες> θα ισχύουν σε πλάτος σελίδας από 600px και screen and (min-width: 400px) and (max-width: 600px) { <κανόνες> } Οι <κανόνες> θα ισχύουν σε πλάτος σελίδας από 400px ως 600px Προσέξτε ότι εδώ είχαμε δήλωση με δύο screen and (max-width: 400px) { <κανόνες> } Οι <κανόνες> θα ισχύουν σε πλάτος σελίδας κάτω από print { <κανόνες> } Οι <κανόνες> θα ισχύουν μόνο στην εκτύπωση της σελίδας. Hint: βάζοντας display:none; σε ένα block, αυτό δεν θα εκτυπωθεί! Για πληρέστερη τεκμηρίωση των media queries δείτε στο
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Το απεικονιστικό μοντέλο μορφοποίησης των CSS
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Γαβαλάς Δαμιανός dgavalas@aegean.gr
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός
Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.
Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε
Διάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός
CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται
Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).
Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)
ΕΠΛ 012 Φύλλα Στυλ (ΙΙ) Τροποποίηση χρωµάτων Color: "όνοµα χρώµατος" rgb (rr,gg,bb) #RRGGBB RGB συνιστώσες όπου rr,gg,bb είναι ακέραιοι από το 0 255 H1 {color: rgb(255,0,0)} κόκκινες επικεφαλίδες background-colorcolor
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας
Περιεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας
ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική
Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα 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. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
CSS Εργαστήριο 5. Θέση και διάταξη
Display - Επίδειξη CSS Εργαστήριο 5. Θέση και διάταξη Η ιδιότητα display καθορίζει πως και εάν ένα στοιχείο εμφανίζεται στην οθόνη. Τα περισσότερα στοιχεία, εξορισμού είναι είτε block είτε inline. Ένα
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Στοιχεία ορισμού θέσης (Positioning Elements)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS
Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης
CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες
Βασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers
Διάλεξη 4η CSS intermediate
Διάλεξη 4η CSS intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Κλάσεις & Ids Εμφώλευση &
Διάλεξη 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
Εισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Εμφάνιση και κρύψιμο στοιχείων
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις
Σπουδές 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 ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας
Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα
Εισαγωγή στο CSS Από: Λία Βέρου
Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται
Εκπαιδευτικά Περιβάλλοντα Διαδικτύου
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Cascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου
Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».
12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ
ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS) Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο
CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης
CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 6 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 3 Απριλίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Positioning Responsive
CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας. Ανδρέας Αθανασόπουλος
CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας Ανδρέας Αθανασόπουλος Πλαϊνή στήλη πλοήγησης Αντικείμενο: Πρόβλημα: Λογισμικό: Ρύθμιση χρώματος και μήκους Πώς δίνουμε χρώμα φόντου και παράλληλα
Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
Σημασιολογικός Ιστός (Semantic Web) - XML
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 8/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας
HTML... 1. Εισαγωγή στην HTML και τα CSS
HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Κειµενογράφοι ετικετών
ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 03 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Τα Επιπλέοντα Στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7
The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Πίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Γαβαλάς Δαμιανός dgavalas@aegean.gr Γραπτή εξέταση H διάρκεια της εξέτασης θα είναι 2 ώρες και 15 Θα απαντήσετε σε
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)
Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
Σχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Πρακτικές συμβουλές κατά την πληκτρολόγηση ., ; :! ( ) " " Άνοιγμα και αποθήκευση εγγράφου Αρχείο, Άνοιγμα. Αρχείο / Αποθήκευση
Επεξεργαστής κειμένου Word 2003 Πρακτικές συμβουλές κατά την πληκτρολόγηση Για να αλλάξουμε παράγραφο πατάμε Enter. Για να αφήσουμε μία κενή γραμμή, πατάμε μία φορά το Enter. Για να γράψουμε την επόμενη
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
2.0 ΒΑΣΙΚΕΣ ΓΝΩΣΕΙΣ-ΟΡΟΛΟΓΙΕΣ
2.0 ΒΑΣΙΚΕΣ ΓΝΩΣΕΙΣ-ΟΡΟΛΟΓΙΕΣ Η σάρωση ενός εγγράφου εισάγει στον υπολογιστή μια εικόνα, ενώ η εκτύπωση μεταφέρει στο χαρτί μια εικόνα από αυτόν. Για να αντιληφθούμε επομένως τα χαρακτηριστικά των σαρωτών
ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ
ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ (Σημειώσεις Word) ΕΚΠΑΙΔΕΥΤΕΣ: ΒΑΡΕΛΑΣ ΙΩΑΝΝΗΣ, ΠΟΖΟΥΚΙΔΗΣ ΚΩΝΣΤΑΝΤΙΝΟΣ MICROSOFT WORD (ΕΚΠΑΙΔΕΥΤΙΚΕΣ ΣΗΜΕΙΩΣΕΙΣ) ΠΕΡΙΕΧΟΜΕΝΑ
ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών
Αυτοµατιµός Γραφείου. Τµήµα Διοίκησης Επιχειρήσεων ΑΤΕΙ- Δυτικής Ελλάδας Μεσολόγγι Δρ. Α. Στεφανή Διάλεξη 2η
Αυτοµατιµός Γραφείου Τµήµα Διοίκησης Επιχειρήσεων ΑΤΕΙ- Δυτικής Ελλάδας Μεσολόγγι Δρ. Α. Στεφανή Διάλεξη 2η Εφαρµογές αυτοµατισµού γραφείου : επεξεργασία κειµένου Μορφοποιήσεις Μορφοποίηση κειµένου Μορφοποίηση
ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557
ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ Της φοιτήτριας Τσαντοπούλου Βαΐα- Αικατερίνη Επιβλέπων καθηγητής Βασίλης Κώστογλου Αρ. Μητρώου: 04/2557 Θεσσαλονίκη
Ενότητα 17 Εκτύπωση Φύλλων Εργασίας και Γραφικών Παραστάσεων
Ενότητα 17 Εκτύπωση Φύλλων Εργασίας και Γραφικών Παραστάσεων 17.1 Το παράθυρο Print Preview Θέλουμε να τυπώσουμε το φύλλο εργασίας μας. Πρέπει όμως να σιγουρευτούμε ότι οι σωστές γραμμές και στήλες θα
ΕΡΩΤΗΣΕΙΣ στην επεξεργασία κειμένου (Word)
1. Πώς δημιουργούμε ένα νέο έγγραφο; 2. Πώς αποθηκεύουμε ένα έγγραφο στη δισκέτα μας; 3. Μπορείτε να περιγράψετε τη βασική οθόνη του Word;. 4. Τι ακριβώς κάνει το εργαλείο ζουμ; 5. Ποιους κανόνες ακολουθεί
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή