Βάσεις Δεδομένων. Dept. Of Mathematics University of Ioannina
|
|
|
- Σπυριδούλα Οικονόμου
- 7 χρόνια πριν
- Προβολές:
Transcript
1 Βάσεις Δεδομένων Κωδικός Μαθήματος: MK741 Είδος Μαθήματος: Επιλογής-Εργαστηριακό Εξάμηνο: 7o Διδάσκων: Κοντογιάννης Σωτήριος Dept. Of Mathematics University of Ioannina
2 Εισαγωγή στα Cascading Styles Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων μας. Μπορούν να μας γλυτώσουν από πολύ χρόνο και κόπο και μας δίνουν τη δυνατότητα να σχεδιάζουμε τις ιστοσελίδες μας με μια εντελώς καινούργια φιλοσοφία. Η κατανόηση των CSS απαιτεί να υπάρχει κάποια βασική εμπειρία με την HTML. Στο ερώτημα ποια είναι η διαφορά ανάμεσα στα CSS και την HTML, μπορούμε να πούμε ότι η HTML χρησιμοποιείται για να δομήσει το περιεχόμενο (content), ενώ τα CSS χρησιμοποιούνται για τη διαμόρφωση ή μορφοποίηση (formatting) του δομημένου περιεχομένου. Θα δούμε τώρα πώς μπορούμε να δημιουργήσουμε το πρώτο μας φύλλο στυλ (style sheet). Θα πρέπει να έχουμε υπόψη μας ότι πολλές από τις ιδιότητες που χρησιμοποιούνται στα CSS είναι παρόμοιες μ αυτές της HTML. 2
3 Βασική Σύνταξη των CSS Θέλουμε να έχουμε ένα ωραίο κόκκινο χρώμα για το φόντο (background) μιας ιστοσελίδας. Με την HTML θα είχαμε γράψει τα εξής : <body bgcolor="#ff0000"> Με τα CSS μπορούμε να επιτύχουμε το ίδιο αποτέλεσμα ως εξής : body { background-color: #FF0000; Όπως μπορούμε να δούμε, οι κωδικοί είναι περίπου οι ίδιοι και για την HTML και για τα CSS. Από το παραπάνω παράδειγμα μπορούμε να δούμε και το βασικό μοντέλο των CSS : selector (επιλογέας) { property (ιδιότητα): value (τιμή); 3
4 Εφαρμογή των CSS σε HTML (1) Υπάρχουν τρεις τρόποι που μπορούμε να χρησιμοποιήσουμε για να εφαρμόσουμε ένα CSS σ ένα HTML έγγραφο: Μέθοδος 1 : In-line (attribute style) Ο πρώτος τρόπος για να εφαρμόσουμε ένα CSS σ ένα HTML κείμενο είναι να χρησιμοποιήσουμε την ιδιότητα (attribute) style της HTML. Το είδαμε ήδη προηγουμένως με το κόκκινο χρώμα φόντου και μπορεί να εφαρμοσθεί ως εξής : <!doctype html> <html><head> <title>παράδειγμα</title> </head> <body style="background-color: #FF0000;"> <p>αυτή είναι μια κόκκινη σελίδα</p> </body> </html> 4
5 Εφαρμογή των CSS σε HTML (2) Μέθοδος 2 : Εσωτερικό-Internal (tag style) Ένας άλλος τρόπος είναι να γράψουμε τον κώδικα για τα CSS με το HTML tag <style>, ως εξής : <html> <head> <title>παράδειγμα</title> <style type="text/css"> body { background-color: #FF0000; </style> </head> <body> <p>αυτή είναι μια κόκκινη σελίδα</p> </body> </html> 5
6 Εφαρμογή των CSS σε HTML (3) Μέθοδος 3 : Εξωτερικό-External (link to a style sheet) Ο τρίτος τρόπος, που είναι αυτός που συνιστάται να χρησιμοποιούμε, είναι ένας σύνδεσμος (link) προς ένα εξωτερικό αρχείο φύλλου στυλ (external style sheet). Αυτή η μέθοδος θα χρησιμοποιηθεί σ όλα τα παραδείγματα που ακολουθούν. Ένα εξωτερικό αρχείο φύλλου στυλ (external style sheet) είναι απλά ένα αρχείο κειμένου (text file) που έχει επέκταση (extension).css. Μπορούμε να το τοποθετήσουμε (upload) στον Web server, όπως όλα τα άλλα αρχεία. Για παράδειγμα, ας υποθέσουμε ότι το αρχείο μας style sheet έχει όνομα style.css και βρίσκεται στον φάκελο style. Για να δημιουργήσουμε έναν σύνδεσμο (link) από το HTML έγγραφο, που είναι το index.html, προς το αρχείο του style sheet, που είναι το style.css, θα πρέπει να γράψουμε τον εξής κώδικα: <link rel="stylesheet" type="text/css" href="style/style.css" /> Η διαδρομή (path) προς το style sheet προσδιορίζεται με την ιδιότητα (attribute) href. Η παραπάνω γραμμή κώδικα πρέπει να τοποθετηθεί στο τμήμα header του HTML κώδικα, δηλ. ανάμεσα στα tags <head> και </head>, ως εξής : 6
7 Εφαρμογή των CSS σε HTML (4) <html> <head> <title>κύρια Ιστοσελίδα</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <h1>το Πρώτο μας Φύλλο Στυλ</h1> </body> </html> // File style.css body { background-color: #FF0000; background-image: url( ioannina.jpg"); h1 { color: #ff0000; //RGB HEX notation background-color: #FC9804; 7
8 Βασική Σύνταξη των CSS(1) Η Ιδιότητα background-repeat Στο παραπάνω παράδειγμα, παρατηρούμε ότι εξ ορισμού η εικόνα επαναλαμβάνεται και προς την οριζόντια και προς την κατακόρυφη κατεύθυνση για να καλύψει ολόκληρη την οθόνη. Με την ιδιότητα background-repeat μπορούμε να ελέγχουμε την επανάληψη μιας εικόνας φόντου. Η ιδιότητα background-repeat μπορεί να έχει τις εξής τέσσερις τιμές : body { background-color: #FFCC66; background-image: url( ioannina.jpg"); background-repeat: no-repeat; 8
9 Βασική Σύνταξη των CSS(2) Η ιδιότητα background-attachment Με την ιδιότητα background-attachment μπορούμε να καθορίσουμε αν μια εικόνα φόντου θα είναι σταθερή (fixed) ή θα κυλάει (scrolls) μαζί με τα περιεχόμενα της ιστοσελίδας. Μια εικόνα φόντου που είναι σταθερή (fixed) δεν θα μετακινείται μαζί με το κείμενο όταν ο χρήστης κυλάει τα περιεχόμενα της ιστοσελίδας, ενώ μια μη κλειδωμένη εικόνα φόντου θα κυλάει μαζί με τα περιεχόμενα της ιστοσελίδας (εξ ορισμού). Ο παρακάτω πίνακας παρουσιάζει τις δύο διαφορετικές τιμές που μπορεί να λάβει η ιδιότητα background-attachment : body { background-color: #FFCC66; background-image: url( ioannina.jpg"); background-repeat: no-repeat; background-attachment: fixed; 9
10 Βασική Σύνταξη των CSS(3) Η ιδιότητα background-position Εξ ορισμού, μια εικόνα φόντου τοποθετείται στην πάνω αριστερή γωνία της οθόνης. Με την ιδιότητα background-position μπορούμε να αλλάξουμε αυτή τη ρύθμιση και να τοποθετήσουμε την εικόνα φόντου οπουδήποτε θέλουμε στην οθόνη. Υπάρχουν τρεις διαφορετικοί τρόποι για να προσδιορίσουμε τη θέση μιας εικόνας φόντου μέσα στην οθόνη. Για παράδειγμα, μπορούμε να ορίσουμε τις συντεταγμένες της εικόνας με τις τιμές '100px 200px', οπότε η εικόνα φόντου θα τοποθετηθεί σε απόσταση 100px (pixels) από την αριστερή πλευρά της οθόνης και 200px (pixels) από την κορυφή της οθόνης, στην ουσία του παραθύρου του φυλλομετρητή. Ένας άλλος τρόπος είναι να δηλώσουμε την απόσταση σε ποσοστά, όπου οι τιμές 0% 0% σημαίνουν την πάνω αριστερή γωνία της οθόνης, οι τιμές 50% 50% το κέντρο της οθόνης και οι τιμές 100% 100% την κάτω δεξιά γωνία της οθόνης. Ένας τρίτος τρόπος είναι να χρησιμοποιήσουμε τις δεσμευμένες λέξεις top, bottom, center, left και right και να κάνουμε συνδυασμούς, όπως top left, center center, top right, bottom right κ.ά. 10
11 Βασική Σύνταξη των CSS(4) Ο παρακάτω κώδικας θα τοποθετήσει την εικόνα φόντου στην κάτω δεξιά γωνία (bottom right) της οθόνης : body { background-color: #FFCC66; background-image: url( ioannina.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; 11
12 Βασική Σύνταξη των CSS(5) Η ιδιότητα font-family Η ιδιότητα font-family χρησιμοποιείται για να ορίσει μια λίστα προτεραιότητας από γραμματοσειρές που θα χρησιμοποιηθούν για να εμφανισθεί ένα συγκεκριμένο στοιχείο ή μια ιστοσελίδα. Αν η πρώτη γραμματοσειρά που υπάρχει στη λίστα δεν είναι εγκατεστημένη στον υπολογιστή από τον οποίο γίνεται η πρόσβαση στο site, θα δοκιμασθεί η επόμενη γραμματοσειρά κοκ μέχρι να βρεθεί κάποια που να ταιριάζει. Υπάρχουν δύο είδη ονομάτων που χρησιμοποιούνται για να κατηγοριοποιηθούν οι γραμματοσειρές: τα family-names και τα generic families. Παραδείγματα ενός family-name, που τα ξέρουμε και ως font, είναι για παράδειγμα τα "Arial", "Times New Roman", "Tahoma" κ.ά. Τα generic families είναι ομάδες από family-names με παρόμοια εμφάνιση. Ένα παράδειγμα είναι το sans-serif, που είναι μια συλλογή από γραμματοσειρές 12
13 Γραμματοσειρές (1) Bitmap Fonts (PCF, AFM, PSF, BDF): Είναι γραμματοσειρές ενός συγκεκριμένου μεγέθους. Το μέγεθος των γραμμάτων καθορίζεται από επανασχηματισμό (μεγέθυνση) και φιλτράρισμα (antialiasing) της γραμματοσειράς βάσης Type 1-3 X fonts: Οι Postscript γραμματοσειρές Type-1 δημιουργήθηκαν από την ADOBE το Είναι διανυσματικές γραμματοσειρές. Οι γραμματοσειρές αυτές περιέχουν την πληροφορία πώς να σχεδιαστεί μία γραμματοσειρά από την ίδιο το γράμμα σε ένα μέγεθος (svg). Οι Truetype γραμματοσειρές δημιουργήθηκαν το 1983 από την Apple. H Micro$oft επέλεξε τις TrueType γραμματοσειρές ώς βασικές γραμματοσειρές των Windows (1990). Οι Truetype γραμματοσειρές έχουν καλύτερη Unicode υποστήριξη. Ώς διάδοχο των Truetype γραμματοσειρών η Microsoft μαζί με την Adobe δημιούργησαν (2000) τις OpenType γραμματοσειρές και μετέτρεψαν όλες τις γραμματοσειρές τους σε OpenType (glyph substitution-ligatures) 13
14 Best Greek fonts: 1.Google font Family OpenSans ( 2.Arno Pro -TTF ( 3. Ubuntu font Family (1001 fonts) - OpenType ( 4. Sun Java6 Fonts Lucida TTF 5.Microsoft Msttcorefonts family (Arial-Times New Roman) 6. Gentium fonts (ttf-gentium) 7. Dustimo fonts (ttf-dustin) 14
15 Βασική Σύνταξη των CSS(6) Η ιδιότητα font-family: Στο generic family serif ανήκουν οι γραμματοσειρές Times New Roman, Garamond και Georgia, όπου όλες έχουν κοντά πόδια (feet). Στο generic family sans-serif ανήκουν οι γραμματοσειρές Trebuchet, Arial και Verdana. Στο generic family monospace ανήκουν οι γραμματοσειρές Courier, Courier New και Andele Mono, όπου όλοι οι χαρακτήρες τους έχουν το ίδιο πλάτος. Όταν εμφανίζουμε τις γραμματοσειρές για την ιστοσελίδα μας, θα πρέπει να ξεκινάμε με τις πιο δημοφιλείς γραμματοσειρές και μετά με κάποιες εναλλακτικές. Αποτελεί καλή πρακτική να χρησιμοποιούμε μια γραμματοσειρά από generic family. Έτσι, η ιστοσελίδα θα εμφανισθεί με μια γραμματοσειρά της ίδιας οικογένειας αν δεν βρεθεί κάποια από τις προηγούμενες γραμματοσειρές. 15
16 Βασική Σύνταξη των CSS(7) Ένα παράδειγμα χρήσης της ιδιότητας font-family μπορεί να είναι το εξής : h1 { font-family: arial, verdana, sans-serif; h2 { font-family: "Times New Roman", serif; Η ιδιότητα font-style Η ιδιότητα font-style κάνει τη μορφοποίηση της επιλεγμένης γραμματοσειράς να είναι normal, italic ή oblique. Η ιδιότητα font-variant Η ιδιότητα font-variant χρησιμοποιείται για να επιλέξουμε ανάμεσα στις παραλλαγές normal ή small-caps μιας γραμματοσειράς. Μια γραμματοσειρά του τύπου small-caps χρησιμοποιεί μικρού μεγέθους κεφαλαία γράμματα αντί για μικρά (πεζά) γράμματα. Η ιδιότητα font-weight Η ιδιότητα font-weight περιγράφει πόσο έντονα θα πρέπει να εμφανίζεται μια γραμματοσειρά. Μια γραμματοσειρά μπορεί να είναι είτε normal ή bold. Η ιδιότητα font-size Η ιδιότητα font-size ορίζει το μέγεθος μιας γραμματοσειράς. Υπάρχουν πολλές μονάδες, όπως pixels, points και εκατοστά. 16
17 Βασική Σύνταξη των CSS(8) Παράδειγμα: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; Η ιδιότητα text-indent Με την ιδιότητα text-indent μπορούμε να κάνουμε το κείμενο των παραγράφων να είναι πιο εμφανίσιμο εφαρμόζοντας μια εσοχή (indent) στην πρώτη γραμμή της παραγράφου. p { text-indent: 30px; Η ιδιότητα text-align Η ιδιότητα text-align αντιστοιχεί με την ιδιότητα align που χρησιμοποιείται σε παλαιότερες εκδόσεις της HTML. Ένα κείμενο μπορεί να είναι στοιχισμένο (aligned) στα αριστερά (left) ή στα δεξιά (right) ή και στο κέντρο (center). Υπάρχει και η τιμή justify για να έχουμε πλήρη στοίχιση. 17
18 Βασική Σύνταξη των CSS(9) Η ιδιότητα text decoration Με την ιδιότητα text-decoration μπορούμε να προσθέσουμε διαφορετική διακόσμηση ή και εφέ σ ένα κείμενο. Για παράδειγμα, μπορούμε να υπογραμμίσουμε (underline) ένα κείμενο, να βάλουμε μια γραμμή διαμέσου (line-through) ή πάνω από το κείμενο (overline) κλπ. h1 { text-decoration: underline; h2 { text-decoration: overline; h3 { text-decoration: line-through; Η ιδιότητα letter-spacing Η απόσταση ανάμεσα στους χαρακτήρες του κειμένου μπορεί να ορισθεί με την ιδιότητα letter-spacing, η τιμή της οποίας είναι το επιθυμητό πλάτος. p { letter-spacing: 3px; 18
19 Βασική Σύνταξη των CSS(10) Η ιδιότητα text-transform Με την ιδιότητα text-transform μπορούμε να ελέγχουμε τον τρόπο γραφής ενός κειμένου όσον αφορά το αν τα γράμματα θα εμφανίζονται ως πεζά ή κεφαλαία (capitalization). Μπορούμε να επιλέξουμε να είναι κεφαλαίο μόνο το πρώτο γράμμα της κάθε λέξης (capitalize) ή όλα τα γράμματα κεφαλαία (uppercase) ή όλα τα γράμματα πεζά (lowercase) ανεξάρτητα από το πώς είναι το αρχικό κείμενο στον HTML κώδικα. Για παράδειγμα, αν έχουμε τη λέξη ioannina", μπορούμε να επιλέξουμε να την εμφανίσουμε ως IOANNINA" ή και ως Ioannina". Υπάρχουν τέσσερις δυνατές τιμές για την ιδιότητα text-transform: 1. capitalize: Κάνει κεφαλαίο μόνο το πρώτο γράμμα της κάθε λέξης. Για παράδειγμα, το ioannina for ever" θα γίνει Ioannina For Ever". 2. uppercase: Κάνει όλα τα γράμματα κεφαλαία (uppercase), δηλ. το ioannina for ever" θα γίνει IOANNINA FOR EVER". 19
20 Βασική Σύνταξη των CSS(11) 3. Lowercase: Κάνει όλα τα γράμματα πεζά (lowercase), δηλ. το IOANNINA FOR EVER" θα γίνει ioannina for ever. 4. None: Δεν κάνει κανέναν μετασχηματισμό, δηλ. το κείμενο εμφανίζεται όπως και στον HTML κώδικα. Παράδειγμα: h1 { text-transform: uppercase; li { text-transform: capitalize; 20
21 Το Class και το Id Μερικές φορές θέλουμε να εφαρμόσουμε ένα ειδικό στυλ (style) σ ένα συγκεκριμένο στοιχείο (element) ή σε μια συγκεκριμένη ομάδα στοιχείων (group of elements). Θα δούμε το πώς μπορούμε να χρησιμοποιήσουμε το class και το id για να ορίσουμε ιδιότητες για επιλεγμένα στοιχεία. Ομαδοποίηση Στοιχείων με το Class: Ας υποθέσουμε ότι έχουμε δύο λίστες από links για διαφορετικά σταφύλια που χρησιμοποιούνται για άσπρο κρασί (white wine) και για κόκκινο κρασί (red wine). Ο HTML κώδικας θα είναι ως εξής : <p>σταφύλια για άσπρο κρασί : </p><ul> <li><a href="ri.htm">riesling</a></li> <li><a href="ch.htm">chardonnay</a></li> <li><a href="pb.htm">pinot Blanc</a></li></ul> <p>σταφύλια για κόκκινο κρασί : </p><ul> <li><a href="cs.htm">cabernet Sauvignon</a></li> <li><a href="me.htm">merlot</a></li> <li><a href="pn.htm">pinot Noir</a></li></ul> 21
22 Ομαδοποίηση με το class (1) Θέλουμε τώρα οι σύνδεσμοι για το άσπρο κρασί (white wine links) να έχουν κίτρινο χρώμα (yellow), οι σύνδεσμοι για το κόκκινο κρασί (red wine links) να έχουν κόκκινο χρώμα (red) και οι υπόλοιποι σύνδεσμοι της ιστοσελίδας να παραμείνουν μπλε (blue). Για να το επιτύχουμε αυτό, θα διαιρέσουμε τα links σε δύο κατηγορίες, εκχωρώντας μια τάξη (class) σε κάθε link κάνοντας χρήση της ιδιότητας (attribute) class, ως εξής: <p>σταφύλια για άσπρο κρασί : </p><ul> <li><a href="ri.htm" class="whitewine">riesling</a></li> <li><a href="ch.htm" class="whitewine">chardonnay</a></li> <li><a href="pb.htm" class="whitewine">pinot Blanc</a></li> </ul> <p>σταφύλια για κόκκινο κρασί : </p> <ul> <li><a href="cs.htm" class="redwine">cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">merlot</a></li> <li><a href="pn.htm" class="redwine">pinot Noir</a></li> </ul> 22
23 Ομαδοποίηση με το class (2) Μπορούμε τώρα να ορίσουμε ξεχωριστές ιδιότητες για τα links που ανήκουν στις τάξεις whitewine και redwine, αντίστοιχα, ως εξής: a { color: blue; a.whitewine { color: #FFBB00; a.redwine { color: #800000; Όπως βλέπουμε από το παραπάνω παράδειγμα, μπορούμε να ορίσουμε τις ιδιότητες των στοιχείων που ανήκουν σε μια συγκεκριμένη τάξη (class) χρησιμοποιώντας το επίθεμα.classname στο stylesheet του εγγράφου. 23
24 Ομαδοποίηση με το id (1) Εκτός από την ομαδοποίηση των στοιχείων, μπορούμε να αναγνωρίσουμε και ένα στοιχείο μεμονωμένα με την ιδιότητα (attribute) id. Εκείνο που θα πρέπει να έχουμε υπόψη μας είναι ότι δεν μπορούν να υπάρχουν δύο στοιχεία (elements) στην ίδια ιστοσελίδα με το ίδιο id. Δηλαδή το κάθε id θα πρέπει να είναι μοναδικό. Αν αυτό αποτελεί πρόβλημα, μπορούμε να χρησιμοποιήσουμε την ιδιότητα (attribute) class. Ακολουθεί ένα παράδειγμα χρήσης του id : <h1 id="c1">κεφάλαιο 1</h1>... <h2 id="c1-1">κεφάλαιο 1.1</h2>... <h2 id="c1-2">κεφάλαιο 1.2</h2>... <h1 id="c2">κεφάλαιο 2</h1> 24
25 Ομαδοποίηση με το id (2) Μπορούμε τώρα να ορίσουμε ξεχωριστές ιδιότητες τις επικεφαλίδες που ανήκουν στα κεφάλαια 1 και 2, ως εξής: h1,h2 { color: blue; h1#c1,h2#c1-1,h2#c1-2 { color: #FFBB00; h1#c2 { color: #800000; Όπως βλέπουμε από το παραπάνω παράδειγμα, μπορούμε να ορίσουμε τις ιδιότητες των στοιχείων που ανήκουν σε συγκεκριμένη id χρησιμοποιώντας το επίθεμα #id_name στο stylesheet του εγγράφου. 25
26 Ομαδοποίηση με το span (1) Το στοιχείο <span> είναι αυτό που μπορούμε να αποκαλέσουμε ουδέτερο στοιχείο καθώς δεν προσθέτει τίποτα στο ίδιο το έγγραφο. Αλλά με τα CSS, το <span> μπορεί να χρησιμοποιηθεί για να προσθέσουμε οπτικά χαρακτηριστικά σε συγκεκριμένα κομμάτια κειμένου των εγγράφων μας. Παράδειγμα: <p>στην Περιφέρεια Δυτικής Μακεδονίας ανήκουν οι Νομοί Γρεβενών, Καστοριάς, Κοζάνης και Φλώρινας.</p> Ας υποθέσουμε ότι θέλουμε στο παραπάνω κομμάτι κειμένου να εμφανίζονται οι τέσσερις νομοί της Δυτικής Μακεδονίας με κόκκινο χρώμα (red). Για να γίνει αυτό, μπορούμε να απομονώσουμε τους νομούς με το <span> και σε κάθε span να αντιστοιχίσουμε μια τάξη (class), στην οποία μπορούμε να προσδώσουμε ένα χρώμα με το stylesheet. <p> Στην Περιφέρεια Δυτικής Μακεδονίας ανήκουν οι Νομοί <span class="nomos"> Γρεβενών</span>, <span class="nomos"> Καστοριάς</span>, <span class="nomos"> Κοζάνης</span> και <span class="nomos"> Φλώρινας</span>.</p> 26
27 Ομαδοποίηση με το span (2) Το CSS θα είναι το εξής : span.nomos { color:red; Ένας άλλος τρόπος για να πετύχουμε το παραπάνω αποτέλεσμα, θα ήταν να αποδώσουμε ένα id σε κάθε νομό, αλλά αυτό θα πρέπει να είναι μοναδικό για τον κάθε νομό, οπότε σε περίπτωση που έχουμε πολλά τέτοια στοιχεία, δεν αποτελεί και την καλύτερη δυνατή λύση η χρήση του id. 27
28 Ομαδοποίηση με το div (1) Ενώ το <span> χρησιμοποιείται μέσα σ ένα στοιχείο επιπέδου μπλοκ, το <div> χρησιμοποιείται για να ομαδοποιήσει ένα ή περισσότερα στοιχεία επιπέδου μπλοκ. Εκτός απ αυτή τη μικρή διαφορά, τα δύο αυτά στοιχεία κάνουν την ίδια περίπου δουλειά. Παράδειγμα : <div id="thessaly"> <ul> <li>καρδίτσα</li> <li>λάρισα</li> <li>μαγνησία</li> <li>τρίκαλα</li> </ul></div> <div id="epirus"> <ul> <li>άρτα</li> <li>θεσπρωτία</li> <li>ιωάννινα</li> <li>πρέβεζα</li> </ul></div> Θέλουμε τώρα το φόντο της λίστας με τους νομούς της Θεσσαλίας να έχει χρώμα μπλε και το φόντο της λίστας με τους νομούς της Ηπείρου να έχει χρώμα κόκκινο. 28
29 Ομαδοποίηση με το div (2) Ο κώδικας για το style sheet θα πρέπει να είναι ο εξής : #thessaly { #epirus { background:blue; background:red; Στη συνέχεια θα ασχοληθούμε με το BOX μοντέλο που είναι πολύ χρήσιμο για την εμφόλευση των div ή για την παρουσίαση πινάκων και μορφοποίησης αυτών. SOS!!! Χρησιμοποιούμε τη # για το id και την. για την κλάση!!!! 29
30 Το BOX μοντέλο Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box model περιέχει επίσης λεπτομέρειες σχετικά με τη ρύθμιση των τιμών των εξής στοιχείων : margin (περιθώριο), border (περίγραμμα), padding (γέμισμα) και content (περιεχόμενο). Το παρακάτω σχεδιάγραμμα δείχνει πώς είναι δομημένο το box model μιας ιστοσελίδας : 30
31 Μονάδες Μέτρησης (1) Οι μονάδες μέτρησης που χρησιμοποιούνται στο BOX μοντέλο είναι οι εξής: Κατηγορία 1: Απόλυτες μονάδες μέτρησης -Pixels (px) -Points (pt) (Συνήθως χρησιμοποιούνται σε γραμματοσείρές - One point is equal to 1/72 of an inch) -cm or in (Συνήθως δεν χρησιμοποιούνται γιατί επιρεάζονται άμμεσα από τις διαστάσεις τις οθόνης). - pc picas (1pc = 12 pt) Κατηγορία 2: Σχετικές μονάδες μέτρησης -% (% της διάστασης της οθόνης, τόσο για το πλάτος όσο και για το ύψος) -em (Σχετική μονάδα αναφοράς ώς προς το μέγεθος της εξ ορισμού γραμματοσειράς εμφάνισης του τρέχοντος στοιχείου της σελίδας) -rem (Σχετική μονάδα αναφοράς ως προς το μέγεθος γραμματοσειράς του κυρίως στοιχείου της σελίδας root element body) Η εξ ορισμού μονάδα είναι τα pixels.!!!! pixels don't equal physical pixels. Today, px in a stylesheet means 1/96th of an inch.!!!! 31
32 Μονάδες Μέτρησης (2) Σχέση μεταξύ των μονάδων: 1em = 12pt = 16px = 100% 32
33 Μονάδες Μέτρησης (3) Πίνακας μονάδων Αναφορά Γραματοσειρές: 33
34 Η ιδιότητα margin Ένα στοιχείο (element) έχει τέσσερις πλευρές : right (δεξιά), left (αριστερά), top (πάνω) και bottom (κάτω). Το margin (περιθώριο) είναι η απόσταση από την κάθε πλευρά μέχρι το γειτονικό στοιχείο ή μέχρι τα όρια (borders) του εγγράφου (document). Ως πρώτο παράδειγμα, θα δούμε το πώς μπορούμε να ορίσουμε περιθώρια (margins) για το ίδιο το έγγραφο, δηλ. για το στοιχείο <body>. Το επόμενο σχεδιάγραμμα δείχνει τις τιμές που θέλουμε να έχουν τα περιθώρια στις ιστοσελίδες μας. body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; 34
35 Η ιδιότητα padding (1) Το padding μπορούμε να πούμε ότι είναι το γέμισμα (filling) και είναι μια ιδιότητα που δεν επηρεάζει την απόσταση ανάμεσα σε κάποια στοιχεία αλλά ορίζει την εσωτερική απόσταση ανάμεσα στο περίγραμμα (border) και τα περιεχόμενα (content) του στοιχείου. Θα δούμε ένα απλό παράδειγμα όπου όλες οι επικεφαλίδες έχουν κάποιο χρώμα φόντου για να μπορούμε να τις ξεχωρίσουμε : h1 { h2 { background: yellow; background: orange; 35
36 Η ιδιότητα padding (2) Δίνοντας τιμές στην ιδιότητα padding, από μια για top, right, bottom και left, για τα στοιχεία h1 και h2, μπορούμε να ορίσουμε πόσο γέμισμα (filling) θα υπάρχει γύρω από το κείμενο της κάθε επικεφαλίδας : h1 { background: yellow; padding: 20px 20px 20px 80px; h2 { background: orange; padding-left:120px; 36
37 Tα περιγράμματα (borders) (1) Τα περιγράμματα (borders) μπορούν να χρησιμοποιηθούν σε πολλές περιπτώσεις, όπως για παράδειγμα ως διακοσμητικά στοιχεία ή για την υπογράμμιση του διαχωρισμού δύο πραγμάτων. Με τα CSS έχουμε πάρα πολλές επιλογές για να χρησιμοποιήσουμε τα περιγράμματα στις ιστοσελίδες μας. Το πλάτος (border-width) Το πλάτος (width) των περιγραμμάτων ορίζεται με την ιδιότητα border-width, η οποία μπορεί να πάρει μια τις τιμές thin, medium και thick ή και μια αριθμητική τιμή σε pixels. Το παρακάτω σχήμα δείχνει τις πιθανές τιμές της ιδιότητας border-width : 37
38 Tα περιγράμματα (borders) (2) Το χρώμα (border-color) Η ιδιότητα border-color ορίζει το χρώμα του περιγράμματος και οι τιμές που μπορεί να πάρει είναι οι γνωστές τιμές των χρωμάτων, όπως για παράδειγμα "#123456", "rgb(123, 123, 123)" ή yellow". Το στυλ (border-style) Υπάρχουν διαφορετικοί τύποι (στυλ) περιγραμμάτων που μπορούμε να επιλέξουμε. Τα περιγράμματα αυτά έχουν χρώμα "gold" και πάχος "thick" αλλά μπορούν φυσικά να έχουν διαφορετικά χρώματα και διαφορετικά πάχη. Αν δεν θέλουμε να έχει περίγραμμα η ιστοσελίδα μας, μπορούμε να χρησιμοποιήσουμε μια από τις τιμές none ή hidden. 38
39 Tα περιγράμματα (borders) (3) 39
40 Tα περιγράμματα (borders) (4) Σύνθετα περιγράμματα 1. dotted solid double dashed div { border-width:5px; border-style:dotted solid double dashed; 2. doted solid div { border-width:5px; border-style:dotted solid; 40
41 O κώδικας χρωμάτων (1) RGB color code: 16 εκατομμύρια διαφορετικά χρώματα Ο συνδυασμός του κόκκινου, του πράσινου και του μπλε με τιμές από 0 έως 255, δίνει πάνω από 16 εκατομμύρια διαφορετικά χρώματα (256 x 256 x 256). 41
42 O κώδικας χρωμάτων (2) H διαφάνεια μπορεί να επηρεάσει τόσο το χρώμα ενός περιγράμματος όσο και μίας εικόνας.. Η ιδιότητα Opacity (transparency) H ιδιότητα αυτή παίρνει τιμές από 0.0 έως και 1.0. Όσο πιο χαμηλή η τιμή τόσο πιο διαφανές το χρώμα-εικόνα. Παράδειγμα: img { opacity:0.5; ή (για τον Internet Explorer) filter : alpha (opacity=50); Η ιδιότητα hover: Ενεργοποιείται όταν διαγράφουμε με το ποντίκι πάνω από ένα περίγραμμα. Παράδειγμα: img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ img:hover { opacity: 1.0; filter: Dept. Of alpha(opacity=100); Mathematics - University of Ioannina /* For IE8 and earlier */ 42
43 O κώδικας χρωμάτων (3) Χρήση της ιδιότητας rgba(red, GREEN, BLUE, OPAQUE) Παράδειγμα: div { background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */ Παράδειγμα κείμενο διαφανές σε κουτί εικόνας: 43
44 Παράδειγμα Διαφανούς κειμένου σε κουτί εικόνας <html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ div.transbox p { margin: 5%; font-weight: bold; color: #000000; </style> <body> <div class="background"> <div class="transbox"> <p>this is some text that is placed in the transparent box.</p> </div> </div> </body> </html> 44
45 Μοντέλο κουτιού χρήση στα CSS 45
46 DIV ιδιότητες - τo ύψος και το πλάτος Ορισμός του πλάτους (width) και του ύψους του div Με την ιδιότητα width μπορούμε να ορίσουμε ένα συγκεκριμένο πλάτος για ένα στοιχείο. Ο παρακάτω κώδικας δημιουργεί ένα πλαίσιο (box) μέσα στο οποίο μπορεί να υπάρχει κάποιο κείμενο : <div class="box"> το κείμενο γράφεται εδώ </div> div.box { width: 200px; height: 50px; border: 1px solid black; background: orange; 46
47 Div - Tα επιπλέοντα στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά σημαίνει ότι το πλαίσιο του στοιχείου (box) μαζί με τα περιεχόμενά του (contents) μπορεί να τοποθετηθεί είτε δεξιά είτε αριστερά σ ένα έγγραφο. <div id="picture"> <img src="image.jpg" alt="my image"> </div> <p>...</p> Για να κάνουμε την εικόνα να επιπλέει στα αριστερά και το κείμενο να την περιβάλλει, αρκεί να ορίσουμε το πλάτος (width) του πλαισίου (box) που περικλείει την εικόνα και να δώσουμε την τιμή left στην ιδιότητα float, ως εξής : #picture { float: left; width: 100px; 47
48 DIV - Δημιουργία στηλών Η ιδιότητα float μπορεί επίσης να χρησιμοποιηθεί για τις στήλες (columns) σ ένα έγγραφο. Για να δημιουργήσουμε στήλες, θα πρέπει να δομήσουμε τον HTML κώδικα με το tag <div>, ως εξής : <div id="column1"> <p>...</p></div> <div id="column2"> <p>...</p></div> <div id="column3"> <p>...</p> </div> Τώρα ορίζουμε το πλάτος των στηλών ως ποσοστό, π.χ. 33%, και αφήνουμε την κάθε στήλη να πάει στα αριστερά με την τιμή left στην ιδιότητα float, ως εξής : #column1 { float:left; width: 33%; border-width:1px;border-style:dotted #column2 { float:left; width: 33%; border-width:1px;border-style:solid #column3 { float:left; 48
49 H ιδιότητα clear Η ιδιότητα clear χρησιμοποιείται για να ελέγχει το πώς θα συμπεριφέρονται τα επόμενα στοιχεία των στοιχείων που επιπλέουν. Εξ ορισμού, τα επόμενα στοιχεία μετακινούνται για να γεμίσουν τον διαθέσιμο χώρο ο οποίος θα ελευθερωθεί όταν ένα πλαίσιο (box) τοποθετείται σε μια πλευρά. Η ιδιότητα clear μπορεί να λάβει μια από τις τιμές left, right, both ή none. <div id="picture"> <img src="image.jpg" alt="my image"> </div> <h1>my image header</h1> <p class="floatstop">this paragraph does not float...</p> Για να εμποδίσουμε το κείμενο από το να πάει δίπλα στην εικόνα, μπορούμε να προσθέσουμε τα εξής στον κώδικα των CSS : #picture { float:left; width: 100px;.floatstop { clear:both; 49
50 Toποθέτηση των στοιχείων divs (1) Με την ιδιότητα position των CSS, μπορούμε να τοποθετήσουμε ένα στοιχείο ακριβώς εκεί που θέλουμε να βρίσκεται μέσα στην ιστοσελίδα. Μαζί με την ιδιότητα float, η ιδιότητα position μάς δίνει πολλές δυνατότητες για να δημιουργήσουμε μια προηγμένη και ακριβή διάταξη (layout). Για να μπορέσουμε να κατανοήσουμε την ιδιότητα position, θα πρέπει να φανταστούμε ένα παράθυρο φυλλομετρητή ως ένα σύστημα συντεταγμένων. Η βασική αρχή της ιδιότητας position των CSS είναι ότι μπορούμε να τοποθετήσουμε ένα πλαίσιο (box) οπουδήποτε σ αυτό το σύστημα συντεταγμένων. Ας υποθέσουμε ότι θέλουμε να τοποθετήσουμε μια επικεφαλίδα (headline). Με το box model, η επικεφαλίδα θα εμφανίζεται ως εξής : 50
51 Toποθέτηση των στοιχείων divs (2) Αν θέλουμε αυτή η επικεφαλίδα να βρίσκεται 100px από την κορυφή Όπως μπορούμε να δούμε, η (top) του εγγράφου και 200px από την αριστερή πλευρά (left) του τοποθέτηση των στοιχείων με τη εγγράφου, θα πρέπει να γράψουμε τα εξής στον κώδικα CSS : χρήση των CSS αποτελεί μια τεχνική με μεγάλη ακρίβεια στην h1 { τοποθέτηση των αντικειμένων και position:absolute; είναι πολύ καλύτερη από τη χρήση top: 100px; πινάκων (tables) ή διαφανών left: 200px; εικόνων (transparent images). Το αποτέλεσμα θα είναι το εξής : 51
52 Toποθέτηση των στοιχείων Απόλυτη τοποθέτηση Ένα στοιχείο που τοποθετείται απόλυτα (absolute positioning) τοποθετείται σε σχέση με τον τελευταίο μη στατικό πρόγονό του. Για να τοποθετήσουμε ένα έγγραφο απόλυτα, θα πρέπει να δώσουμε την τιμή absolute στην ιδιότητα position και μετά μπορούμε να χρησιμοποιήσουμε τις τιμές left, right, top και bottom για να τοποθετήσουμε το πλαίσιο (box). #box1 { position:absolute; top: 50px; left: 50px; #box2 { position:absolute; top: 50px; right: 50px; #box3 { position:absolute; bottom: 50px; right: 50px; #box4 { 52
53 Toποθέτηση των στοιχείων Σχετική τοποθέτηση Στη σχετική τοποθέτηση το στοιχείο τοποθετείται σχετικά ως προς την θέση του στην οθόνη του φυλλομετρητή. Για να τοποθετήσουμε ένα στοιχείο σε σχετική θέση (relative positioning), θα πρέπει να δώσουμε την τιμή relative στην ιδιότητα position. Η θέση ενός στοιχείου που τοποθετείται σχετικά υπολογίζεται από την αρχική θέση που είχε στο έγγραφο. Αυτό σημαίνει ότι μπορούμε να μετακινήσουμε το στοιχείο προς τα δεξιά (right), προς τα αριστερά (left), προς τα πάνω (up) ή προς τα κάτω (down). Θα τοποθετήσουμε τώρα τρεις εικόνες σχετικά με την αρχική τους θέση στην ιστοσελίδα : #dog1 { position:relative; left: 350px; bottom: 150px; #dog2 { position:relative; 53
54 Toποθέτηση των στοιχείων - παράδειγμα <!DOCTYPE html> <html> <head> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; </style> </head> <div class="relative">this div element has position: relative; <div class="absolute">this div element has position: absolute;</div> </div> 54
55 Toποθέτηση των στοιχείων (fixed-static) Όλα τα HTML στοιχεία τοποθετούνται με στατική τοποθέτηση εξ ορισμού: div.static { position: static; border: 3px solid #73AD21; Ένα στοιχείο μπορεί να τοποθετηθεί σε συγκεκριμένη θέση ως προς το παράθυρο του φυλλομετρητή και να παραμένει μόνιμα εκεί ότι μετακίνηση και να γίνει στο παράθυρο (scroll). Η θέση τοποθέτηση αυτής είναι η fixed: div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; 55
56 H ιδιότητα z-index Τα CSS δουλεύουν σε τρεις διαστάσεις : ύψος (height), πλάτος (width) και βάθος (depth). Έχουμε ήδη δει τις δύο πρώτες διαστάσεις νωρίτερα και τώρα θα δούμε το πώς μπορούμε να τοποθετήσουμε κάποια στοιχεία το ένα πάνω από το άλλο και να δημιουργήσουμε έτσι επίπεδα (layers). Για να γίνει αυτό, θα πρέπει να εκχωρήσουμε σε κάθε στοιχείο έναν αριθμό, που είναι γνωστός με τον όρο z-index. Αυτό που ισχύει είναι ότι ένα στοιχείο που έχει μεγαλύτερο αριθμό z-index θα επικαλύπτει (overlaps) ένα άλλο στοιχείο που έχει μικρότερο αριθμό z-index. Ας υποθέσουμε ότι έχουμε 5 τραπουλόχαρτα σε αντίστοιχες εικόνες. Θέλουμε να δημιουργήσουμε την εξής διάταξη στην ιστοσελίδα μας : 56
57 Z-index παράδειγμα #ten_of_diamonds { position: absolute; left: 100px; bottom: 100px; z-index: 1; #jack_of_diamonds { position: absolute; left: 115px; bottom: 115px; z-index: 2; #queen_of_diamonds { position: absolute; left: 130px; bottom: 130px; z-index: 3; #king_of_diamonds { position: absolute; left: 145px; bottom: 145px; z-index: 4; #ace_of_diamonds { position: absolute; left: 160px; bottom: 160px; z-index: 5; 57
58 Βασική Σύνταξη των CSS(12) Σύνδεσμοι και ψευδοκλάσεις Οι ψευδοκλάσεις (pseudo-class) της CSS χρησιμοποιούνται για να εκμεταλλευτούν τις καταστάσεις που μπορεί να έχει ένας σύνδεσμος και οι οποίες είναι οι παρακάτω: link, κανονικός σύνδεσμος τον οποίον δεν έχει επισκεφτεί ο χρήστης στο παρελθόν visited, σύνδεσμος που έχει επισκεφτεί ο χρήστης στο παρελθόν και υπάρχει στην cache memory του browser του hover, σύνδεσμος στον οποίον ο χρήστης έχει τον δείκτη του ποντικιού του επάνω απο αυτόν active, σύνδεσμος όταν ο χρήστης κάνει κλικ και δεν έχει ακόμη ελευθερώσει του κουμπί του ποντικιού του Η σύνταξη των ψευδοκλάσεων στους συνδέσμους είναι η παρακάτω: Σύνταξη των ψευδοκλάσεων a:ψευδοκλάση { ιδιότητα: τιμή; 58
59 Βασική Σύνταξη των CSS(13) Στυλ σε όλους τους συνδέσμους a:link { color: blue; font-weight : bold; font-size : 14px; text-decoration: underline;; Στυλ σε όλους τους συνδέσμους που ο χρήστης εστιάζει με το ποντίκι του a:hover { color: navy; font-weight : bold; font-size : 14px; text-decoration: none; Στυλ σε όλους τους συνδέσμους που ο χρήστης έχει επισκεφτεί στο παρελθόν a:visited { font-weight : bold; font-size : 14px; 59
60 CSS lists List style: Παράδειγμα: ul { list-style: square url("sqpurple.gif"); List type: ul.circle {list-style-type: circle; ul.square {list-style-type: square; ol.upper-roman {list-style-type: upper-roman; ol.lower-alpha {list-style-type: lower-alpha; ol.upper-greek {list-style-type: upper-greek; ol.lower-greek {list-style-type: lower-greek; 60
61 CSS tables (1) 1. Table borders: table, th, td { border: 1px solid black; Προσοχή ο παραπάνω πίνακας έχει διπλούς borders. Αυτό γιατί ο πίνακας και η επικεφαλίδα - κάθε κελί έχουν το δικό τους border Για να αφεραιθούν οι διπλοί borders πρέπει να γίνει collapse ο border του πίνακα: table { border-collapse: collapse; table, th, td { border: 1px solid black; 61
62 CSS tables (2) Table Width-Height: table { width: 100%; th { height: 50px; Align: (Horizontal ή Vertical) Horizontal : left, right, center Vertical: top, bottom, middle 62
63 CSS tables (3) Align: 15px Peter 15px td { height: 50px; vertical-align: bottom; text-align: left; Table padding: padding: 15px; 63
64 CSS tables (4) Select specific cell borders: border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; Παράδειγμα: th, td { border-bottom: 1px solid #ddd; Hoverable Table: Χρήση του hover επιλογέα tr:hover {background-color: #f5f5f5 64
65 CSS tables (5) Table Color: Παράδειγμα: th { background-color: #4CAF50; color: white; Striped Zebra columns: nth child selector: tr:nth-child(even) {background-color: #f2f2f2 Responsive Table: Πίνακας που εμφανίζει scrollbars εάν η οθόνη είναι πολύ μικρή για να εμφανίσει τον πλήρες πίνακα (overflow-x, overflow-y) Παράδειγμα: <div style="overflow-x:auto;"> <table>... table content... </table> </div> 65
66 CSS tables (6) Empty cells hide: table { border-collapse: separate; empty-cells: hide; Border space: table { border-collapse: separate; border-spacing: 10px 50px; Caption side: caption { caption-side: bottom; Border style: tr { border-style: solid; 66
67 Navigation Bar (1) Το Navigation Bar δεν είναι τίποτα περισσότερο από μία λίστα συνδέσμων: Παράδειγμα: <ul> <li><a href="default.asp">home</a></li> <li><a href="news.asp">news</a></li> <li><a href="contact.asp">contact</a></li> <li><a href="about.asp">about</a></li> </ul> Βήμα 1: Αφαιρούμε bullets margins και padding: ul { list-style-type: none; margin: 0; padding: 0; Bήμα 2: Βάζω τους συνδέσμους σε μπλόκ: li a { display: block; width: 60px; background-color: #dddddd; 67
68 Navigation Bar (2) Βήμα 3: Αλλάζω τη διακόσμηση των συνδέσμων και ορίζω αλλαγή χρώματος στο event hover: ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; /* Change the link color on hover */ li a:hover { background-color: #555; color: white; CSS Menu 68
69 Navigation Bar (3) Βήμα 4: Ορίζω ενεργό σύνδεσμο.active { background-color: #4CAF50; color: white; Βήμα 5: Kόλάω το Vertical NavBar σε μία περιοχή της οθόνης ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* Full height */ position: fixed; /* Make it stick, even on scroll */ overflow: auto; /* Enable scrolling if the sidenav has too much content */ 69
70 Horizontal NavBar ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; li { float: left; li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; 70
71 Drop-Down Text <style>.dropdown { position: relative; display: inline-block;.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px Δύο 0px κλάσεις rgba(0,0,0,0.2); με την ίδια μορφοποίηση padding: 12px 16px; z-index: 1;.dropdown:hover.dropdown-content { display: block; </style> <div class="dropdown"> <span>mouse over me</span> <div class="dropdowncontent"> <p>hello World!</p> </div> </div> 71
72 Drop-Down Image <style>.dropdown { position: relative; display: inline-block;.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);.dropdown:hover.dropdown-content { display: block;.desc { padding: 15px; text-align: center; </style> <div class="dropdown"> <img src="img_fjords.jpg" alt="norway" width="100" height="50"> <div class="dropdown-content"> <img src="img_fjords.jpg" alt="trolltunga Norway" width="300" height="200"> <div class="desc">beautiful Trolltunga, Norway</div> </div> </div> 72
73 Drop-Down Menu (1) dropdown-content a { color: black; <style> padding: 12px 16px;.dropbtn { text-decoration: none; color: white; display: block; padding: 16px; font-size: 16px;.dropdown:hover.dropdown-content { border: none; display: block; cursor: pointer; </style>.dropdown { position: relative; display: inline-block;.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: Dept. Of Mathematics 160px; - University of Ioannina 73
74 Drop-Down Menu (2) <div class="dropdown"> <button class="dropbtn">dropdown</button> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </div> 1. Display Attribute: Καθορίζει το είδος του κουτίου για ένα HTML στοιχείο. 1) inline (Ίδιο με το span) 2) block (Σαν μία παράγραφο) 3) table (Σαν ένας πίνακας) 4) list-item (Σαν ένα στοιχείο λίστας) 5) inherit ( Ίδιο αντικείμενο με τον γονέα του) 6) none (κρυφό αντικείμενο) 74
75 Drop-Down Menu (3) 2. Box shadow Βάζει σκιά γύρω από το στοιχείο Σύνταξη: box-shadow: none h-shadow v-shadow blur spread color inset initial inherit; Παράδειγμα: div { box-shadow: 10px 10px 5px #888888; 3. RGBA Color: Χρώμα με διαφάνεια μαζί rgba(0,0,0,0.2); 4.Cursor: Καθορισμό της όψης του δρομέα cursor: pointer; Επιλογές: filename=trycss_cursor 75
76 Tooltips Ένα tooltip χρησιμοποιείται για τον προσδιορισμό επιπρόσθετης πληροφορίας σε ένα στοιχείο όταν ο χρήστης μετακινεί το ποντίκι πάνω στο στοιχείο αυτό: <div class="tooltip">hover over me <span class="tooltiptext">tooltip text</span> </div>.tooltip.tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1;.tooltip:hover.tooltiptext { visibility: visible; 76
77 Οι μετρητές είναι μεταβλητές που μπορούν να αυξάνουν και να εμφανίζουν πόσες φορές χρησιμοποιήθηκαν: CSS counters (1) Ιδιότητες Μετρητών: 1. counter-reset: αρχικοποιεί ένα μετρητή 2. counter-increment: αυξάνει ένα μετρητή 3. content: Εισαγωγή περιεχομένου 4. counter(), counters(): Εμφάνιση της τιμής του μετρητή Παράδειγμα: body { counter-reset: section; h2::before { counter-increment: section; content: "Section " counter(section) ": "; Αρχικοποίηση μετρητή section Αύξηση μετρητή Εμφάνιση τιμής μετρητή μπροστά από κάθε h2 77
78 CSS counters (2) Παράδειγμα: <style> ol { counter-reset: section; list-style-type: none; li::before { counter-increment: section; content: counters(section,".") " "; </style> <ol> <li>item</li> <li>item <ol> <li>item</li> <li>item</li></ol></ol> 78
Η Βίβλος των CSS. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας
Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση
Διάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Τα Επιπλέοντα Στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο
Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.
Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται
Περιεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Εμφάνιση και κρύψιμο στοιχείων
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,
CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης
CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Γαβαλάς Δαμιανός 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 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
Στοιχεία ορισμού θέσης (Positioning Elements)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS
Το απεικονιστικό μοντέλο μορφοποίησης των CSS
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει
Σπουδές 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
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Διάλεξη 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
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Εισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).
Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
CSS Εργαστήριο 5. Θέση και διάταξη
Display - Επίδειξη CSS Εργαστήριο 5. Θέση και διάταξη Η ιδιότητα display καθορίζει πως και εάν ένα στοιχείο εμφανίζεται στην οθόνη. Τα περισσότερα στοιχεία, εξορισμού είναι είτε block είτε inline. Ένα
Βασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers
CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης
CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά
Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
Εκπαιδευτικά Περιβάλλοντα Διαδικτύου
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 03 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Γαβαλάς Δαμιανός dgavalas@aegean.gr
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα
Cascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: Τρόπος 1:
ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Εισαγωγή Εικόνας 2. Εισαγωγή Αρχείου Γραφικού 3. Εισαγωγή Αυτόματου Σχήματος 4. Τροποποίηση Γραφικών Αντικειμένων 5. Αλλαγή Μεγέθους Γραφικού Αντικειμένου 6. Περιστροφή Γραφικού Αντικειμένου
ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών
CTEC-153: ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ
ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Μορφοποίηση Αριθμών 2. Αλλαγή Μεγέθους Και Τύπου Γραμματοσειράς 3. Χρησιμοποίηση Πλάγιων, Έντονων, Υπογραμμισμένων Χαρακτήρων 4. Αλλαγή Χρώματος Γραμματοσειράς 5. Παράθυρο Διαλόγου
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 6 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 3 Απριλίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Positioning Responsive
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Εργαστήριο του Μαθήματος: ΕΠΛ003. Ενότητα 3 Εισαγωγή στο Microsoft Word
Εργαστήριο του Μαθήματος: ΕΠΛ003 Ενότητα 3 Εισαγωγή στο Microsoft Word 1 Πως αρχίζουμε το Microsoft Word Για να αρχίσουμε το Word, πρέπει να κάνουμε double click στο εικονίδιο του Word που βρίσκεται στον
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
Εργαστήριο του Μαθήματος: ΕΠΛ001
www.epl001lab.weebly.com Εργαστήριο του Μαθήματος: ΕΠΛ001 Ενότητα 3 Εισαγωγή στο Microsoft Word Πως αρχίζουμε το Microsoft Word Για να αρχίσουμε το Word, πρέπει να κάνουμε double click στο εικονίδιο του
1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών
ΜΑΘΗΜΑ 6 ΣΤΟΧΟΙ: 1. Δημιουργία Ενός Πίνακα 2. Εισαγωγή Και Μετακίνηση Δεδομένων 3. Επιλογή Κελιού, Στήλης, Γραμμής, Πίνακα 4. Εισαγωγή Στήλης Και Γραμμής 5. Διαγραφή Κελιού, Στήλης, Γραμμής Και Πίνακα
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Εισαγωγή στο CSS Από: Λία Βέρου
Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται
Στελεχώνου ε το σή ερα το τώρα και το αύριο!
Web HTML & CSS Εκπαιδευτικός & Εξεταστικός όμιλος FACEtoFACE Authorized Training & Certification Centers E.O.P.P.E.P Πιστοποιημένο Εκπαιδευτικό & Εξεταστικό Κέντρο Αθήνας Από το Υπουργείο Παιδείας Authorized
Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας
Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα
Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου
Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο
Σημασιολογικός Ιστός (Semantic Web) - XML
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 8/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο
12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».
12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Πίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας
ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας
ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός
<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων.
Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Στην παρούσα άσκηση πρόκειται να δημιουργήσετε έναν ιστότοπο, ο οποίος θα αποτελείται από πολλές ιστοσελίδες που θα προβάλουν τα εκθέματα