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

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

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

Transcript

1 Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις!! Οδηγίες Στο σημερινό εργαστήριο συνεχίζεται η παρουσίαση των οδηγιών μορφοποίησης. Ειδικότερα, μαθαίνετε βασικές τεχνικές τοποθέτησης (layout) των διαφόρων στοιχείων HTML σε μαι ιστοσελίδα. Η κατασκευή μιας πραγματικής (επαγγελματικής) ιστοσελίδας απαιτεί συνδυασμένη γνώση γραφιστικής και μεθόδων αλληλεπίδρασης ανθρώπου-υπολογιστή. Στο εργαστήριο αυτά δεν καλύπτονται απλά μαθαίνετε τα τεχνικά εργαλεία που επιτρέπουν την κατασκευή τέτοιων ιστοσελίδων! 1. Το μοντέλο κουτιού (box model) κάθε στοιχείου HTML κατά το πρότυπο CSS είναι πολύ σημαντικό για την κατανόηση των μεθόδων τοποθέτησης: διαβάστε για αυτό στο Παράρτημα Α! 2. Διαβάστε το Παράρτημα Β για να μάθετε για τις διάφορες μεθόδους τοποθέτησης (positioning) των στοιχείων HTML που παρέχει το πρότυπο CSS. 3. Διαβάστε το Παράρτημα Γ για βασικές οδηγίες στησίματος ιστοσελίδων (page layouts). Στη συνέχεια, χρησιμοποιήστε το υλικό του 3 ου εργαστηρίου: Δημιουργήστε ένα σταθερό σχήμα (fixed layout) για την αρχική σελίδα. Δημιουργήστε ένα ρευστό σχήμα (fluid layout) για τις υπόλοιπες ιστοσελίδες, με μια στήλη πλοήγησης αριστερά, μια στήλη κυρίως κειμένου, header και footer. (Ε9) 1

2 height Τμήμα Πληροφορικής Παράρτημα A: CSS Box Model. Όπως φαίνεται στο σχήμα 1, κάθε στοιχείο HTML περιβάλλεται κατά το πρότυπο CSS από το παραγέμισμα (padding), το περίγραμμα (border) και το περιθώριο (margin). παραγέμισμα (padding) width περιεχόμενο (content) συγχώνευση κάθετου περιθωρίου περίγραμμα (border) περιθώριο (margin) Παρατηρήστε ότι: Σχήμα 1 1. Οι διαστάσεις (width x height) ενός στοιχείου καθορίζονται από τις διαστάσεις του περιεχομένου, δεν προσμετράται δηλαδή ο χώρος που προσθέτουν τα padding, border, margin. 2. Στην εξ'ορισμού (default) τοποθέτηση των στοιχείων, το κάθετο περιθώριο συγχωνεύεται (σχήμα 1). 3. Για κάθε στοιχείο HTML, ο browser έχει προκαθορισμένα padding και margin, τα οποία μπορείτε να αλλάξετε μέσω κανόνων CSS. Μέγεθος του περιθωρίου (margin) Μπορείτε να ρυθμίσετε το μέγεθος του περιθωρίου ενός στοιχείου σε σταθερό νούμερο, σε διάφορες μονάδες μέτρησης: π.χ. σε pixels (px) ή σε σχέση με το μέγεθος της γραμματοσειράς (em). Επίσης μπορείτε να καθορίσετε το μέγεθος ως ποσοστό (%) του πλάτους (width) του στοιχείου-πατέρα. Τέλος, μπορείτε να δώσετε την τιμή auto, για την οποία θα μιλήσουμε αργότερα. Μπορείτε να δώσετε ξεχωριστές τιμές για τα 4 περιθώρια π.χ.: (Ε9) 2

3 body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; } Εναλλακτικά μπορείτε να ορίσετε όλα τα περιθώρια με μία ιδιότητα: body { margin: 2em } /* all 2em */ body { margin: 1em 2em } /* top&bottom 1em, right&left 2em */ body { margin: 1em 2em 3em } /* top 1em, right&left 2em, bottom 3em */ body { margin: 1em 2em 3em 4em } /* top 1em, right 2em, bottom 3em, left 4em */ Μέγεθος του παραγεμίσματος (padding) Το παραγέμισμα (padding) δημιουργεί χώρο μεταξύ του περιεχομένου και του περιγράμματος. Εμφανίζει το ίδιο χρώμα φόντου με το περιεχόμενο. Ρυθμίζετε το μέγεθος του παραγεμίσματος ακριβώς όπως με το περίγραμμα: οι αντίστοιχες ιδιότητες ονομάζονται padding-top, padding-right, padding-bottom, padding-left και padding. Ιδιότητες του περιγράμματος (border) Για το περίγραμμα ενός στοιχείου HTML μπορείτε να ρυθμίσετε: Το πάχος (width) του περιγράμματος σε κάποιο νούμερο (px, em, κλπ) ή στις τιμές [thin, medium, thick], μέσω της συγκεντρωτικής ιδιότητας border-width (όπως ακριβώς το παράδειγμα με την ιδιότητα margin) ή των ξεχωριστών border-top-width, border-right-width, border-bottom-width, και borderleft-width. Παράδειγμα: h2 { border-width: 1px 2px 1px 2px; } Το στυλ (style) του περιγράμματος, σε κάποιο από τα [none, solid, hidden, dotted, double, dashed, groove, ridge, inset, outset]. Η συγκεντρωτική ιδιότητα ονομάζεται border-style και οι ανεξάρτητες border-top-style, border-right-style, border-bottom-style, border-left-style. Παράδειγμα: p { border-style: solid dotted; } (Ε9) 3

4 Το χρώμα (color) του περιγράμματος μέσω της συγκεντρωτικής ιδιότητας border-color ή των αντίστοιχων ανεξάρτητων border-top-color, borderright-color, border-bottom-color, border-left-color. Παράδειγμα: p { border-color: #7f0000; } Για το περίγραμμα, υπάρχει και η ιδιότητα border που επιτρέπει να θέσουμε όλες τις ιδιότητες μαζί, στη σειρά πάχος στυλ χρώμα: p { border: 2px solid red; } (η ιδιότητα border δεν επιτρέπει να θέσουμε ανεξάρτητες τιμές για τα 4 περιγράμματα) Παράρτημα Β: CSS και μέθοδοι τοποθέτησης (positioning). Μέχρι τώρα έχουμε δει τη μέθοδο τοποθέτησης που χρησιμοποιεί εξ'ορισμού ένας browser: ονομάζεται static και τοποθετεί τα στοιχεία HTML στην κανονική ροή (normal flow) τους. Τα στοιχεία HTML εμφανίζονται σε δύο βασικές κατηγορίες: Ως στοιχεία inline, που παρατίθενται στην κανονική ροή το ένα δίπλα στο άλλο, συγκροτώντας το περιεχόμενο της ιστοσελίδας. Τέτοια στοιχεία είναι το απλό κείμενο, οι σύνδεσμοι (<a>), οι εικόνες (<img>), κλπ. Ως block στοιχεία, τα οποία μπορούν να περιέχουν άλλα block ή inline στοιχεία. Στην κανονική ροή εμφάνισης, ο browser τοποθετεί κάθε block στοιχείο μόνο του, χωρίς άλλα block στοιχεία αριστερά και δεξιά του. Τέτοια στοιχεία είναι π.χ. οι παράγραφοι (<p>) και οι επικεφαλίδες (<h...>). Τα στοιχεία div και span Εκτός από τα κανονικά HTML στοιχεία, υπάρχουν δύο στοιχεία γενικής χρήσης που παρέχονται για να βοηθήσουν στο στήσιμο της ιστοσελίδας. Τα στοιχεία αυτά δεν έχουν σημασιολογική ερμηνεία (semantics) και θα πρέπει να τα χρησιμοποιούμε μόνο όταν δεν μπορούμε να χρησιμοποιήσουμε τα κανονικά : Το block στοιχείο div. Το inline στοιχείο span. Συχνά, για να επιλέξουμε στοιχεία div ή span, χρησιμοποιούμε κλάσεις ή ids (βλ. προηγούμενο εργαστήριο). (Ε9) 4

5 Εναλλακτικές Μέθοδοι Τοποθέτησης Το πρότυπο CSS, εκτός από τη μέθοδο static, παρέχει τις εξής εναλλακτικές μεθόδους τοποθέτησης, οι οποίες ενεργοποιούνται μέσω της ιδιότητας position: Α) Τοποθέτηση relative. Πρώτα υπολογίζεται η θέση του στοιχείου με την κανονική ροή και μετά το στοιχείο μετατοπίζεται σε σχέση με την κανονική του θέση. Ο χώρος που έπιανε το στοιχείο στην κανονική ροή δεν καλύπτεται από άλλο στοιχείο. Στη νέα του θέση, το στοιχείο μπορεί να υπερκαλύπτει (overlap) άλλα γειτονικά στοιχεία. Σύμφωνα με τα προηγούμενα, η τοποθέτηση relative έχει περιορισμένη χρησιμότητα σχεδόν πάντα χρησιμοποιείται για άλλον σκοπό (βλ. επόμενη μέθοδο τοποθέτησης). Στο επόμενη παράδειγμα, ένα στοιχείο p με id testpar τοποθετείται 40 pixels δεξιότερα και 10 pixels πιο κάτω από την κανονική του θέση: p#testpar { position: relative; top: 10px; left: 40px; } B) Τοποθέτηση absolute. Εδώ το στοιχείο βγαίνει τελείως έξω από την κανονική ροή : δεν εξαρτάται από την κανονική του θέση ούτε κρατείται κενός ο χώρος που έπιανε αρχικά. Η θέση του καθορίζεται από (κάποιες από) τις ιδιότητες top, right, bottom και left σε σχέση με το περιβάλλον στοιχείο αναφοράς. Εξ'ορισμού, το περιβάλλον στοιχείο αναφοράς (πού είναι το αρχικό σημείο, στο οποίο προστίθενται τα left, top κλπ) είναι η συνολική ιστοσελίδα (στοιχείο body). Αν θέλετε να έχετε ως αναφορά ένα άλλο στοιχείο πατέρα του τρέχοντος, τοποθετήστε τον πατέρα με τη μέθοδο relative (χωρίς να προσδιορίζετε μέγεθος μετατόπισης για τον πατέρα). Το ίδιο συμβαίνει αν ο πατέρας τοποθετηθεί ως absolute. Τα περιθώρια ενός στοιχείου με τοποθέτηση absolute δεν συγχωνεύονται ποτέ. Η μέθοδος τοποθέτησης absolute χρησιμοποιείται συχνά για το στήσιμο ιστοσελίδων, όπου ανεξάρτητα τμήματα κειμένου ή εικόνες πρέπει να πάνε σε συγκεκριμένη θέση (βλ. και Παράστημα Γ). Γ) Τοποθέτηση fixed. Παρόμοια τοποθέτηση με τη μέθοδο absolute, με τη διαφορά ότι το σημείο αναφοράς είναι πάντα το παράθυρο του browser αυτό έχει ως συνέπεια το στοιχείο να είναι ακίνητο κατά το scrolling. Η μέθοδος τοποθέτησης fixed χρησιμοποιείται σε ειδικές μόνο περιπτώσεις, π.χ. για να κρατάει την κορυφή μιας ιστοσελίδας (header) ακίνητη, ανεξάρτητα από το scrolling του χρήστη. (Ε9) 5

6 Δ) Η χρήση των floats. Αν και δεν αποτελούν μία ακόμα μέθοδο τοποθέτησης (positioning), τα floats χρησιμοποιούνται ευρέως για το στήσιμο ιστοσελίδων! Σε προηγούμενο εργαστήριο χρησιμοποιήσαμε την ιδιότητα float για να μετακινήσουμε εικόνες αριστερά ή δεξιά του κειμένου. Το ίδιο μπορεί να γίνει με κάθε στοιχείο HTML, αρκεί να ορίσουμε το μέγεθός του (οι εικόνες έχουν εξ'ορισμού μέγεθος, ενώ π.χ. μια παράγραφος όχι απλώνεται όσο περισσότερο γίνεται). p#test { float: left; width:200px; } Float γίνεται αριστερά ή δεξιά: ένα στοιχείο float αριστερά (δεξιά) βγαίνει από την κανονική ροή και μετατοπίζεται όσο αριστερότερα (δεξιότερα) είναι δυνατόν. Τα επόμενα στοιχεία ρέουν στα δεξιά (αριστερά) του στοιχείου float. Τα περιθώρια ενός στοιχείου float δεν συγχωνεύονται ποτέ. Η ιδιότητα clear με τιμές [left, right, both] περιγράφει ποια πλευρά ενός στοιχείου δεν μπορεί να είναι γειτονική με ένα προηγούμενο στοιχείο float. Και η ιδιότητα αυτή χρειάζεται για το στήσιμο ιστοσελίδων (βλ. Παράρτημα Γ). Παράρτημα Γ: Βασικές τεχνικές στησίματος ιστοσελίδων. Όσο κι αν ακούγεται απίστευτο, το πρότυπο CSS δεν έχει καταλήξει (ακόμα) στον οριστικό τρόπο στησίματος ιστοσελίδων. Έτσι, πρέπει να αρκεστούμε στα εργαλεία που είδαμε στα Παραρτήματα Α και Β. Οι τεχνικές που χρησιμοποιούνται είναι πάρα πολλές εδώ παρουσιάζονται κάποιες βασικές παραλλαγές μόνο! στοιχείο 1 στοιχείο 2 στοιχείο 3 πλοήγηση header στήλη κειμένου βοηθητική στήλη ιστοσελίδα Α Σχήμα 2 ιστοσελίδα Β Πάρα πολλές ιστοσελίδες έχουν μία από τις δύο μορφές του σχήματος 2: Η πρώτη μορφή (A) εμφανίζεται σε αρχικές ιστοσελίδες. Οι σελίδες αυτές είναι το σημείο εισόδου προς άλλες σελίδες περιεχομένου. Εδώ μας ενδιαφέρει κυρίως η στυλιστική αισθητική κι όχι το περιεχόμενο. Πρέπει να έχουμε απόλυτο έλεγχο της εμφάνισης (συχνά σε επίπεδο pixel). Στην ιστοσελίδα εμφανίζονται μεμονωμένα στοιχεία: εικόνες, πολύ σύντομο (Ε9) 6

7 κείμενο, logos κ.οκ. Οι σελίδες αυτού του τύπου πρέπει να δείχνουν όλα τα στοιχεία σε μία οθόνη και να μην απαιτούν scrolling. Η δεύτερη μορφή (B) αντιπροσωπεύει σελίδες κειμένου. Είναι διατεταγμένη σε στήλες: μία κεντρική με το περιεχόμενο κείμενο, μία δεύτερη στήλη με μενού πλοήγησης και ενδεχομένως μια τρίτη στήλη με βοηθητικούς συνδέσμους και μικρά κομμάτια κειμένου. Σχεδόν πάντα υπάρχει ένα τμήμα στην κορυφή (header) και ένα αντίστοιχο στο τέλος (footer). Στις σελίδες αυτού του τύπου μας ενδιαφέρει πιο πολύ η ευχρηστία. Ο λεπτομερής έλεγχος θέσης των στοιχείων δεν είναι αναγκαίος, ενώ το scrolling για την εμφάνιση περισσότερου κειμένου είναι σύνηθες. A) Σταθερό σχήμα (fixed layout). Σύμφωνα με την τεχνική αυτή, θεωρούμε ότι όλα τα βασικά block στοιχεία της ιστοσελίδας (συνήθως χρησιμοποιούνται στοιχεία div) έχουν σταθερό και προκαθορισμένο μέγεθος (width, height, σε pixels ή %) και θέση. Η τοποθέτηση είναι absolute και οι ιδιότητες left, top χρησιμοποιούνται για κάθε στοιχείο. Τα πάντα βρίσκονται μέσα σε ένα στοιχείο div ( main container ), το οποίο έχει τοποθέτηση relative (ώστε να αποτελεί το περιβάλλον στοιχείο αναφοράς) και σταθερό μέγεθος (συνηθίζεται να είναι 760 ή 960 pixels). Η δήλωση των περιθωρίων για το στοιχείο αυτό είναι: #main-container { margin: 0 auto; } κάτι που σημαίνει χωρίς περιθώριο πάνω και κάτω, κεντραρισμένο αριστερα-δεξιά. Το περιβάλλον αυτό στοιχείο προσφέρει πάντα σταθερό συνολικό μέγεθος και αποτελεί το πλαίσιο αναφοράς για τα μεγέθη των στοιχείων μέσα σε αυτό. Επιπλέον, επειδή κάθε browser έχει τη δική του ιδέα για τα εξ'ορισμού margins και paddings κάθε στοιχείου (ακόμα και του body), συχνά φροντίζουμε πριν από κάθε άλλο να εξουδετερώσουμε τα προκαθορισμένα αυτά νούμερα: * { margin: 0; padding: 0; } position: absolute; top:...px; left:...px; width:...px; height:...px; margin: 0 auto; position: relative; width:...px; στοιχείο main-container ιστοσελίδα Σχήμα 3 (Ε9) 7

8 Συνοπτικά η ιδέα φαίνεται στο σχήμα 3. Το σταθερό σχήμα μας επιτρέπει τον απόλυτο έλεγχο τοποθέτησης και είναι κατάλληλο για αρχικές ιστοσελίδες. Από την άλλη πλευρά, προσαρμόζεται πολύ δύσκολα σε οθόνες με διαφορετικές διαστάσεις, ιδίως σε πολύ μικρές συσκευές. Β) Ρευστό σχήμα (fluid layout). Στο σχήμα αυτό χρησιμοποιούνται float στοιχεία (div) και τα μεγέθη προσαρμόζονται στο τρέχον μέγεθος του παραθύρου. Δεν έχετε τον απόλυτο έλεγχο τοποθέτησης και τα διάφορα στοιχεία παρουσιάζονται ως στήλες περιεχομένου. Το σχήμα είναι ιδιαίτερα κατάλληλο για ιστοσελίδες κειμένου. float: left; width:...px; header πλοήγηση στήλη κειμένου clear: both; footer main-container ιστοσελίδα margin-left:...px; margin: 0 auto; width:...%; Σχήμα 4 Το σχήμα 4 δείχνει πώς μπορεί να κατασκευαστεί ένα σχήμα με 2 στήλες, header και footer. Η στήλη πλοήγησης είναι float:left και έχει σταθερό μέγεθος. Η προσαρμοστικότητα του σχήματος οφείλεται στο πλάτος της κύριας στήλης κειμένου που μπορεί να αυξομειώνεται. Δώστε το κατάλληλο αριστερό περιθώριο στο κυρίως κείμενο (left-margin) για να το εμποδίσετε να τυλιχτεί κάτω από τη στήλη πλοήγησης. Εφόσον υπάρχουν στοιχεία float, είναι σημαντικό το στοιχείο footer να έχει την ιδιότητα clear: both για να αποφύγει πιθανή τοποθέτηση στα δεξιά του στοιχείου float. Το ίδιο σχήμα επεκτείνεται στις 3 στήλες, με το αντίστοιχο στοιχείο float δεξιά. Μπορείτε να περιορίσετε την κύρια στήλη με τις ιδιότητες ελάχιστου ή/και μέγιστου μήκους (min-width και max-width αντίστοιχα). Μια δεύτερη παραλλαγή χρησιμοποιεί το float:left για όλες τις στήλες (στοιχεία div), με μέγεθος σε ποσοστά (%). Στην περίπτωση αυτή θα πρέπει να θυμάστε ότι το περιβάλλον στοιχείο, αν περιέχει μόνο floats, δεν τα περικλείει στο ύψος! Αυτό ίσως δημιουργήσει προβλήματα, όπως π.χ. όταν περιμένετε ότι το χρώμα φόντου του (Ε9) 8

9 περιβάλλοντος στοιχείου θα φαίνεται έως το τέλος των στηλών που περικλείει (αυτό δεν θα συμβεί!). Υπάρχουν διάφορες λύσεις για το θέμα: ψάξτε στο διαδίκτυο για css containing floats. Μια σημασιολογική προσθήκη... Στις διάφορες μεθόδους τοποθέτησης, τα στοιχεία που χρησιμοποιούνται σχεδόν αποκλειστικά είναι τύπου div. Η νεώτερη έκδοση της HTML όμως, προσφέρει τα παρακάτω στοιχεία με σημασιολογική ερμηνεία: nav, για στοιχεία που περιέχουν συνδέσμους πλοήγησης στην σελίδα/site header, για στοιχεία στην κορυφή της σελίδας και footer, για τα στοιχεία που βρίσκονται στο τέλος. Αν και η υποστήριξη από όλους τους browsers δεν είναι ακόμα πλήρης (http://caniuse.com/#feat=html5semantic), μπορείτε να τα χρησιμοποιήσετε αντί των γενικών στοιχείων div! (Ε9) 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Διάλεξη 6η CSS Advanced

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

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

Cascading Style Sheets (CSS)

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

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

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

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

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

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

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

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

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

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

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

Διάλεξη 4η CSS intermediate

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας. Ανδρέας Αθανασόπουλος

CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας. Ανδρέας Αθανασόπουλος CSS για προχωρημένους: Πλαϊνή στήλη πλοήγησης ιστοσελίδας Ανδρέας Αθανασόπουλος Πλαϊνή στήλη πλοήγησης Αντικείμενο: Πρόβλημα: Λογισμικό: Ρύθμιση χρώματος και μήκους Πώς δίνουμε χρώμα φόντου και παράλληλα

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Εργαστήριο #10 (Ε10) 1

Εργαστήριο #10 (Ε10) 1 Εργαστήριο #10 Από τα προηγούμενα εργαστήρια......θα χρειαστείτε ορισμένες από τις οδηγίες μορφοποίησης CSS (ανατρέξτε στις εκφωνήσεις του 8 ου και 9 ου εργαστηρίου).! Οδηγίες Στη δυναμική δημιουργία ιστοσελίδων

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

Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις

Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Γαβαλάς Δαμιανός dgavalas@aegean.gr Γραπτή εξέταση H διάρκεια της εξέτασης θα είναι 2 ώρες και 15 Θα απαντήσετε σε

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

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

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

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

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

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

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

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

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

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

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

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

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

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

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

ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)

ΕΠΛ 012. Φύλλα Στυλ (ΙΙ) ΕΠΛ 012 Φύλλα Στυλ (ΙΙ) Τροποποίηση χρωµάτων Color: "όνοµα χρώµατος" rgb (rr,gg,bb) #RRGGBB RGB συνιστώσες όπου rr,gg,bb είναι ακέραιοι από το 0 255 H1 {color: rgb(255,0,0)} κόκκινες επικεφαλίδες background-colorcolor

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

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

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

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

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

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

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

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

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

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

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

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

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

Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων.

Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Στην παρούσα άσκηση πρόκειται να δημιουργήσετε έναν ιστότοπο, ο οποίος θα αποτελείται από πολλές ιστοσελίδες που θα προβάλουν τα εκθέματα

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

Δημιουργία ενός κενού πίνακα

Δημιουργία ενός κενού πίνακα 3.4.1.1 Δημιουργία ενός κενού πίνακα Ένας πίνακας αποτελείται από έναν αριθμό γραμμών και στηλών που δημιουργούν ένα πλέγμα. Σε αυτό το πλέγμα είναι πιθανή η ύπαρξη ή μη περιθωρίων. Κάθε κελί του πίνακα

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

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

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

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

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

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

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

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS 3. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

CSS 3. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ CSS 3 Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ Τύπνη ζηνηρείσλ Κάζε ζηνηρείν HTML είλαη: block-level h1, p, div, inline-level

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

CSS 2. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

CSS 2. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ CSS 2 Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ Σηόρνο ηεο ώξαο Δπέθηαζε ησλ γλώζεσλ ηνπ CSS 1 Κιάζεηο θαη id Δκθώιεπζε

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ

ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ ΤΕΙ Σερρών Σχολή Τεχνολογικών Εφαρμογών, Τμήμα Πληροφορικής και Επικοινωνιών Προγραμματιστικές Εφαρμογές στο Διαδίκτυο (Θ) Τελική Εξέταση Διδάσκων: Δ. Κοτζίνος Όνοµα: Α.Μ. : Εξάµηνο : Αίθουσα Έδωσα Project

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

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

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

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

ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557

ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557 ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ Της φοιτήτριας Τσαντοπούλου Βαΐα- Αικατερίνη Επιβλέπων καθηγητής Βασίλης Κώστογλου Αρ. Μητρώου: 04/2557 Θεσσαλονίκη

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

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

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

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

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

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

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

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

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

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

CTEC-153: ΦΥΛΛΑ ΕΡΓΑΣΙΑΣ

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

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

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

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

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

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

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

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

HTML Εργαστήριο 5. Δομή εγγράφου

HTML Εργαστήριο 5. Δομή εγγράφου Ετικέτα HTML 5 HTML Εργαστήριο 5. Δομή εγγράφου 1. Αρχικά, θα πρέπει να ορίσετε ότι η σελίδα που ακολουθεί είναι τύπου html 5. Αυτό μπορεί να επιτευχθεί προσθέτοντας στην δομή που ήδη γνωρίζετε και πριν

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

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

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

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

ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML

ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)

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

CSS. Προγρ/σμός Εφαρμογών Διαδικτύου. (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών. Τμήμα Μηχανικών Πληροφορικής ΤΕ.

CSS. Προγρ/σμός Εφαρμογών Διαδικτύου. (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών. Τμήμα Μηχανικών Πληροφορικής ΤΕ. CSS Cascading Style Sheets Προγρ/σμός Εφαρμογών Διαδικτύου (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών Τμήμα Μηχανικών Πληροφορικής ΤΕ ΤΕΙ Θεσσαλίας Τι Είναι τα CSS; 2 Cascading (στοιβαγμένα) Style

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

ΠΕΡΙΕΧΟΜΕΝΑ. Κεφάλαιο 3: Προσθήκη πλαισίων...65 Τρόπος λειτουργίας των πλαισίων Δημιουργία πλαισιοσυνόλου Χρήση του πάνελ Frames...

ΠΕΡΙΕΧΟΜΕΝΑ. Κεφάλαιο 3: Προσθήκη πλαισίων...65 Τρόπος λειτουργίας των πλαισίων Δημιουργία πλαισιοσυνόλου Χρήση του πάνελ Frames... ΠΕΡΙΕΧΟΜΕΝΑ Εισαγωγή...11 Κεφάλαιο 1: Προσθήκη πινάκων...15 Δημιουργία διάταξης χωρίς πίνακες... 16 Δημιουργία πίνακα... 18 Επιλογή στοιχείων πίνακα... 23 Χρήση κατάστασης Διευρυμένων πινάκων για επιλογή...

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

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

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

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

1 ο ΓΥΜΝΑΣΙΟ ΘΕΡΜΗΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΧΑΡΑΚΤΗΡΩΝ. Μάθημα: Πληροφορική Α' Γυμν. Ενότητα: Επεξεργασία κειμένου

1 ο ΓΥΜΝΑΣΙΟ ΘΕΡΜΗΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΧΑΡΑΚΤΗΡΩΝ. Μάθημα: Πληροφορική Α' Γυμν. Ενότητα: Επεξεργασία κειμένου 1 ο ΓΥΜΝΑΣΙΟ ΘΕΡΜΗΣ Μάθημα: Πληροφορική Α' Γυμν. Ενότητα: Επεξεργασία κειμένου ΜΟΡΦΟΠΟΙΗΣΕΙΣ Τα κυριότερα είδη μορφοποιήσεων είναι: Μορφοποιήσεις Χαρακτήρων Μορφοποιήσεις Παραγράφων Οι Μορφοποιήσεις Χαρακτήρων

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

Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο. Microsoft Word Μέρος 2

Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο. Microsoft Word Μέρος 2 Πανεπιστήμιο Κύπρου Τμήμα Πληροφορικής Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο ΕΠΛ001 Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο Microsoft Word Μέρος 2 Παναγιώτης Χατζηχριστοδούλου Εισαγωγή

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

Προγραμματισμός Παγκόσμιου Ιστού

Προγραμματισμός Παγκόσμιου Ιστού Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 7 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 04 Απριλίου 2016 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Σύνοψη Ιεραρχία

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

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

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

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

Επεξεργαστής Κειμένου: (Microsoft Word)

Επεξεργαστής Κειμένου: (Microsoft Word) Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου

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

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

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

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

D3 Tips and Tricks. Το HTML μέρος του κώδικα

D3 Tips and Tricks. Το HTML μέρος του κώδικα D3 Tips and Tricks Το HTML μέρος του κώδικα Τα δύο τμήματα που πρέπει να συμπληρωθούν για να κατασκευαστεί μία οπτικοποίηση με D3 είναι το CSS κομμάτι και ο κώδικας D3 με JavaScript. Θα κατασκευάσουμε

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

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

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

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο. Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα

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

ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL

ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL 1. Εισαγωγή δεδομένων σε φύλλο εργασίας του Microsoft Excel Για να τοποθετήσουμε τις μετρήσεις μας σε ένα φύλλο Excel, κάνουμε κλικ στο κελί στο οποίο θέλουμε να τοποθετήσουμε

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

Εγχειρίδιο για τη δημιουργία Newsletter στο Word

Εγχειρίδιο για τη δημιουργία Newsletter στο Word Εγχειρίδιο για τη δημιουργία Newsletter στο Word Παράδειγμα Εικόνας Πρόλογος Αυτό το πρότυπο του Word θα σας δώσει τη δυνατότητα να δημιουργήσετε τα προσωπικά σας Newsletter στο MS Word. Μπορείτε να επιλέξετε

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

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

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

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

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Word 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Γραμμή

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

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

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

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

Coding Bootcamp. Εισαγωγή στo CSS

Coding Bootcamp. Εισαγωγή στo CSS Εισαγωγή στo CSS CSS (Cascading Style Sheets) Η Html σχεδιάστηκε αρχικά για να προβάλλει κείμενο και είχε σκοπό να «ορίσει» το περιεχόμενο μιας σελίδας υπό την έννοια ποιο κείμενο είναι επικεφαλίδα, ποιο

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

Εργαστηριακή Άσκηση 4 Μορφοποίηση Κειμένου μέσω του

Εργαστηριακή Άσκηση 4 Μορφοποίηση Κειμένου μέσω του Μορφοποίηση χαρακτήρων Όταν ανοίγουμε το Word η γραμματοσειρά που υπάρχει είναι προκαθορισμένη. Το πλαίσιο διαλόγου Γραμματοσειρά μας επιτρέπει να κάνουμε περισσότερες μορφοποιήσεις. Επιλέγουμε Μορφή Απόσταση

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

Πίνακες, περιγράµµατα και σκίαση

Πίνακες, περιγράµµατα και σκίαση Πίνακες, περιγράµµατα και σκίαση Οι πίνακες Οι πίνακες είναι ορθογώνια πλαίσια που χωρίζονται σε γραµµές και στήλες. Η τοµή µιας γραµµής µε µια στήλη προσδιορίζει ένα κελί. Τα στοιχεία, που παρουσιάζουµε,

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

1. Κατανόηση Και Αλλαγή Μεταξύ Προβολών Εμφάνισης Της Παρουσίασης. 1. Κατανόηση Και Αλλαγή Μεταξύ Προβολών Εμφάνισης Της Παρουσίασης

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

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

Μενού Προβολή. Προβολές εγγράφου

Μενού Προβολή. Προβολές εγγράφου Μενού Προβολή Προβολές εγγράφου Το Word παρέχει πέντε διαφορετικού είδους προβολές στον χρήστη, οι οποίες και βρίσκονται στο μενού Προβολή (View). Εναλλακτικά μπορούμε να επιλέξουμε το είδος προβολής που

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

Σχεδιασμός και ανάπτυξη ενός Web Site. Αθ. Ανδρούτσος

Σχεδιασμός και ανάπτυξη ενός Web Site. Αθ. Ανδρούτσος Σχεδιασμός και ανάπτυξη ενός Web Site Αθ. Ανδρούτσος 1. Εισαγωγή Με τον όρο Web-based εφαρμογή εννοούμε ένα σύνολο τεχνολογιών με κοινό χαρακτηριστικό την δυνατότητα επικοινωνίας μέσω του πρωτοκόλλου http

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