Η Βίβλος των CSS. Εισαγωγή στα CSS
|
|
|
- Ματθαίος Ράγκος
- 7 χρόνια πριν
- Προβολές:
Transcript
1 Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων μας. Μπορούν να μας γλυτώσουν από πολύ χρόνο και κόπο και μας δίνουν τη δυνατότητα να σχεδιάζουμε τις ιστοσελίδες μας με μια εντελώς καινούργια φιλοσοφία. Η κατανόηση των CSS απαιτεί να υπάρχει κάποια βασική εμπειρία με την HTML. Για να δουλέψουμε με τα CSS δεν χρειάζεται απαραίτητα να χρησιμοποιήσουμε κάποιο πρόγραμμα δημιουργίας ιστοσελίδων, όπως είναι τα γνωστά FrontPage, DreamWeaver ή και το Word. Αυτό που χρειαζόμαστε είναι ένας απλός επεξεργαστής κειμένου, όπως είναι το Σημειωματάριο (Notepad) των Windows. Μπορούμε να χρησιμοποιήσουμε όποιον φυλλομετρητή (browser) επιθυμούμε για να βλέπουμε πώς θα εμφανίζονται οι ιστοσελίδες που θα δημιουργούμε. Συνεπώς αυτό που χρειαζόμαστε είναι ένας φυλλομετρητής (browser) και ένας απλός επεξεργαστής κειμένου (text editor). Στο ερώτημα τι μπορούμε να κάνουμε με τα CSS, θα πρέπει να γνωρίζουμε ότι τα CSS είναι μια γλώσσα στυλ (style language) που ορίζουν τη διάταξη (layout) των HTML εγγράφων. Για παράδειγμα, τα CSS έχουν να κάνουν με γραμματοσειρές (fonts), με χρώματα (colours), με περιθώρια (margins), με εικόνες φόντου (background images) και με πολλά άλλα. Με τηνhtml θα δυσκολευτούμε να αλλάξουμε τη διάταξη των ιστοσελίδων μας, αλλά τα CSS προσφέρουν πολλές επιλογές και είναι πολύ πιο συγκεκριμένα στις λεπτομέρειες. Επιπλέον, υποστηρίζονται απ όλους τους φυλλομετρητές. Στο ερώτημα ποια είναι η διαφορά ανάμεσα στα CSS και την HTML, μπορούμε να πούμε ότι η HTML χρησιμοποιείται για να δομήσει το περιεχόμενο (content), ενώ τα CSS χρησιμοποιούνται για τη διαμόρφωση ή μορφοποίηση (formatting) του δομημένου περιεχομένου. Σύντομα θα γίνει σαφές το τι εννοούμε. Από το ξεκίνημά της, η HTML χρησιμοποιείτο μόνο για να μπορούμε να προσθέτουμε δομή στο κείμενο, όπως για να επισημαίνουμε ποια είναι κεφαλίδα (headline) ή ποια είναι παράγραφος (paragraph) με τα γνωστά tags (ετικέτες) της HTML, όπως είναι τα <h1> και <p>. Όμως, καθώς η δημοτικότητα του Web αύξανε συνεχώς, οι σχεδιαστές των ιστοσελίδων άρχισαν να ψάχνουν για επιπλέον δυνατότητες, όπως προσθήκη διάταξης (layout) στα έγγραφα. Για να γίνει αυτό, οι φυλλομετρητές επινόησαν καινούργια HTML tags, όπως για παράδειγμα το <font>, τα οποία διέφεραν από τα αρχικά HTML tags καθώς όριζαν τη διάταξη και όχι τη δομή μιας ιστοσελίδας. Στο ερώτημα τι έχουν να μου προσφέρουν τα CSS, μπορούμε να πούμε ότι τα CSS αποτέλεσαν μια επανάσταση στον κόσμο του Web design και τα μεγάλα πλεονεκτήματά τους είναι τα εξής: Δυνατότητα για τον ταυτόχρονο έλεγχο της διάταξης (layout) πολλών εγγράφων από ένα μόνο φύλλο στυλ (style sheet). Πιο ακριβής έλεγχος της διάταξης (layout) των ιστοσελίδων. Εφαρμογή διαφορετικής διάταξης σε διαφορετικές εξόδους, όπως screen, print κ.ά. Αναρίθμητες προηγμένες και εξεζητημένες τεχνικές. 1
2 Η Βασική Σύνταξη των CSS Θα δούμε τώρα πώς μπορούμε να δημιουργήσουμε το πρώτο μας φύλλο στυλ (style sheet). Θα πρέπει να έχουμε υπόψη μας ότι πολλές από τις ιδιότητες που χρησιμοποιούνται στα CSS είναι παρόμοιες μ αυτές της HTML. Ας υποθέσουμε ότι θέλουμε να έχουμε ένα ωραίο κόκκινο χρώμα για το φόντο (background) μιας ιστοσελίδας. Με την HTML θα είχαμε γράψει τα εξής : <body bgcolor="#ff0000"> Με τα CSS μπορούμε να επιτύχουμε το ίδιο αποτέλεσμα ως εξής : background-color: #FF0000; Όπως μπορούμε να δούμε, οι κωδικοί είναι περίπου οι ίδιοι και για την HTML και για τα CSS. Από το παραπάνω παράδειγμα μπορούμε να δούμε και το βασικό μοντέλο των CSS : selector (επιλογέας) { property (ιδιότητα): value (τιμή); selector property value Σε ποια tags Μια ιδιότητα Η τιμή της ιδιότητας, εφαρμόζεται είναι το χρώμα όπως π.χ. κόκκινο η ιδιότητα φόντου για το χρώμα φόντου (π.χ. body) (background color) Εφαρμογή των CSS σ ένα HTML Έγγραφο Υπάρχουν τρεις τρόποι που μπορούμε να χρησιμοποιήσουμε για να εφαρμόσουμε ένα CSS σ ένα HTML έγγραφο. Μέθοδος 1 : In-line (attribute style) Ο πρώτος τρόπος για να εφαρμόσουμε ένα CSS σ ένα HTML κείμενο είναι να χρησιμοποιήσουμε την ιδιότητα (attribute) style της HTML. Το είδαμε ήδη προηγουμένως με το κόκκινο χρώμα φόντου και μπορεί να εφαρμοσθεί ως εξής : <html> <head> </head> <title>παράδειγμα</title> 2
3 <body style="background-color: #FF0000;"> <p>αυτή είναι μια κόκκινη σελίδα</p> </body> </html> Μέθοδος 2 : Εσωτερικό-Internal (tag style) Ένας άλλος τρόπος είναι να γράψουμε τον κώδικα για τα CSS με το HTML tag <style>, ως εξής : <html> <head> <title>παράδειγμα</title> <style type="text/css"> background-color: #FF0000; </style> </head> <body> <p>αυτή είναι μια κόκκινη σελίδα</p> </body> </html> Μέθοδος 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 έγγραφο, που είναι το default.htm, προς το αρχείο του style sheet, που είναι το style.css, θα πρέπει να γράψουμε τον εξής κώδικα : <link rel="stylesheet" type="text/css" href="style/style.css" /> Η διαδρομή (path) προς το style sheet προσδιορίζεται με την ιδιότητα (attribute) href. Η παραπάνω γραμμή κώδικα πρέπει να τοποθετηθεί στο τμήμα header του HTML κώδικα, δηλ. ανάμεσα στα tags <head> και </head>, ως εξής : 3
4 <html> <head> <title>κύρια Ιστοσελίδα</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> Ο παραπάνω σύνδεσμος (link) λέει στον φυλλομετρητή ότι θα πρέπει να χρησιμοποιήσει τη διάταξη (layout) που υπάρχει στο συγκεκριμένο CSS αρχείο όταν πρόκειται να εμφανίσει το περιεχόμενο του τρέχοντος HTML αρχείου. Αυτό που είναι πολύ καλό με τη μέθοδο αυτή είναι ότι μπορούμε να συνδέσουμε πολλά HTML αρχεία με το ίδιο αρχείο style sheet. Μ άλλα λόγια, ένα αρχείο CSS μπορεί να χρησιμοποιηθεί για να μπορούμε να ελέγχουμε το layout πολλών HTML εγγράφων ταυτόχρονα. Για να το δούμε αυτό και στην πράξη, μπορούμε να δημιουργήσουμε δύο αρχεία, ένα HTML και ένα CSS, με το εξής περιεχόμενο : default.htm <html> <head> </head> <body> </body> </html> <title>κύρια Ιστοσελίδα</title> <link rel="stylesheet" type="text/css" href="style.css" /> <h1>το Πρώτο μας Φύλλο Στυλ</h1> style.css background-color: #FF0000; Θα πρέπει να δημιουργήσουμε τα αρχεία και να τα αποθηκεύσουμε με τις σωστές επεκτάσεις.htm και.css και φυσικά να τα τοποθετήσουμε και στον ίδιο φάκελο. Μετά, μόλις ανοίξουμε την ιστοσελίδα default.htm με τον φυλλομετρητή μας, θα διαπιστώσουμε ότι θα έχει κόκκινο φόντο. Αλλαγή Χρώματος και Φόντου Θα δούμε τώρα το πώς μπορούμε να εφαρμόσουμε χρώματα (colors) και χρώματα φόντου (background colors) στις ιστοσελίδες μας. Θα δούμε επίσης και προηγμένες μεθόδους για την τοποθέτηση και τον έλεγχο των εικόνων φόντου (background images). 4
5 Η Ιδιότητα color Η ιδιότητα color περιγράφει το χρώμα προσκηνίου (foreground color) ενός στοιχείου. Για παράδειγμα, ας υποθέσουμε ότι θέλουμε όλες οι επικεφαλίδες (headlines) ενός εγγράφου να έχουν χρώμα κόκκινο (red). Οι επικεφαλίδες χαρακτηρίζονται με το tag <h1> και ο παρακάτω κώδικας ορίζει σε κόκκινο το χρώμα των στοιχείων <h1> : color: #ff0000; Τα χρώματα μπορούν να γραφούν με τις δεκαεξαδικές τους τιμές, όπως στο παραπάνω παράδειγμα (#ff0000), ή μπορούμε να χρησιμοποιήσουμε τα ονόματα των χρωμάτων ("red") ή και τις τιμές RGB : rgb(255, 0, 0). Η Ιδιότητα background-color Η ιδιότητα background-color περιγράφει το χρώμα φόντου (background color) ενός στοιχείου. Ως γνωστόν, το στοιχείο <body> περιέχει όλο το κείμενο ενός HTML εγγράφου και έτσι για να αλλάξουμε το χρώμα φόντου μιας ιστοσελίδας, θα πρέπει να εφαρμόσουμε την ιδιότητα background-color στο στοιχείο <body>. Μπορούμε επίσης να εφαρμόσουμε χρώμα φόντου και σ άλλα στοιχεία, όπως σε επικεφαλίδες (headlines) και σε απλό κείμενο (text). Στο παρακάτω παράδειγμα, εφαρμόζουμε διαφορετικά χρώματα φόντου στα στοιχεία <body> και <h1>. background-color: #FFCC66; color: #990000; background-color: #FC9804; Βλέπουμε ότι για να εφαρμόσουμε δύο ιδιότητες σ ένα στοιχείο, όπως το <h1>, τις ξεχωρίζουμε με το σύμβολο ;. Η Ιδιότητα background-image Η ιδιότητα background-image χρησιμοποιείται για να εισάγουμε μια εικόνα φόντου (background image) σε μια ιστοσελίδα. Απλά εφαρμόζουμε την ιδιότητα backgroundimage στο tag<body> και προσδιορίζουμε το όνομα και τη θέση του αρχείου της εικόνας. background-color: #FFCC66; background-image: url("florina1.jpg"); 5
6 color: red; background-color: blue; Βλέπουμε ότι προσδιορίζουμε το όνομα και τη θέση της εικόνας με την έκφραση url("florina1.jpg"). Αυτό βέβαια προϋποθέτει ότι η εικόνα βρίσκεται στον ίδιο φάκελο με το φύλλο στυλ (style sheet). Μπορούμε να αναφερόμαστε και σε εικόνες που βρίσκονται σ άλλους φακέλους με την έκφραση url("../images/florina1.jpg") ή που βρίσκονται ακόμη και στο Internet, αρκεί να ορίσουμε την πλήρη διεύθυνση του αρχείου με την έκφραση url(" Η Ιδιότητα background-repeat Στο παραπάνω παράδειγμα, παρατηρούμε ότι εξ ορισμού η εικόνα επαναλαμβάνεται και προς την οριζόντια και προς την κατακόρυφη κατεύθυνση για να καλύψει ολόκληρη την οθόνη. Με την ιδιότητα background-repeat μπορούμε να ελέγχουμε την επανάληψη μιας εικόνας φόντου. Η ιδιότητα background-repeat μπορεί να έχει τις εξής τέσσερις τιμές : Τιμή background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: no-repeat Περιγραφή Η εικόνα επαναλαμβάνεται μόνο οριζόντια Η εικόνα επαναλαμβάνεται μόνο κατακόρυφα Η εικόνα επαναλαμβάνεται και οριζόντια και κατακόρυφα (εξ ορισμού) Η εικόνα δεν επαναλαμβάνεται Για παράδειγμα, για να αποφύγουμε την επανάληψη μιας εικόνας φόντου (background image), θα πρέπει να γράψουμε τον εξής κώδικα : background-color: #FFCC66; background-image: url("florina1.jpg"); background-repeat: no-repeat; color: green; background-color: #FC9804; 6
7 Η ιδιότητα background-attachment Με την ιδιότητα background-attachment μπορούμε να καθορίσουμε αν μια εικόνα φόντου θα είναι σταθερή (fixed) ή θα κυλάει (scrolls) μαζί με τα περιεχόμενα της ιστοσελίδας. Μια εικόνα φόντου που είναι σταθερή (fixed) δεν θα μετακινείται μαζί με το κείμενο όταν ο χρήστης κυλάει τα περιεχόμενα της ιστοσελίδας, ενώ μια μη κλειδωμένη εικόνα φόντου θα κυλάει μαζί με τα περιεχόμενα της ιστοσελίδας (εξ ορισμού). Ο παρακάτω πίνακας παρουσιάζει τις δύο διαφορετικές τιμές που μπορεί να λάβει η ιδιότητα background-attachment : Τιμή background-attachment: scroll background-attachment: fixed Περιγραφή Η εικόνα κυλάει μαζί με την ιστοσελίδα μη κλειδωμένη Η εικόνα είναι κλειδωμένη Ο παρακάτω κώδικας κάνει την εικόνα φόντου της ιστοσελίδας να μην επαναλαμβάνεται (norepeat) και να είναι κλειδωμένη (fixed) : background-color: #FFCC66; background-image: url("florina1.jpg"); background-repeat: no-repeat; background-attachment: fixed; color: #990000; background-color: #FC9804; Η ιδιότητα 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 κ.ά. Ο παρακάτω πίνακας έχει μερικά χαρακτηριστικά παραδείγματα : 7
8 Τιμή background-position: 2cm 2cm background-position: 50% 25% background-position: top right Περιγραφή Η εικόνα φόντου θα τοποθετηθεί 2 cm από τα αριστερά και 2 cm από την κορυφή Η εικόνα φόντου θα τοποθετηθεί στο κέντρο οριζόντια και κατά το ένα τέταρτο από την κορυφή Η εικόνα φόντου θα τοποθετηθεί στην πάνω δεξιά γωνία (topright) της οθόνης Ο παρακάτω κώδικας θα τοποθετήσει την εικόνα φόντου στην κάτω δεξιά γωνία (bottom right) της οθόνης : background-color: #FFCC66; background-image: url("florina1.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; color: #990000; background-color: #FC9804; Η ιδιότητα background Η ιδιότητα background αποτελεί μια συντόμευση γι όλες τις ιδιότητες του αντικειμένου background που είδαμε προηγουμένως και μας δίνει τη δυνατότητα να γράψουμε όλες τις ιδιότητες σε μια γραμμή κώδικα. Για παράδειγμα, ας δούμε τις επόμενες πέντε γραμμές κώδικα : background-color: #FFCC66; background-image: url("florina1.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Με τη χρήση της ιδιότητας background μπορούμε να πετύχουμε το ίδιο αποτέλεσμα σε μία μόνο γραμμή κώδικα : background: #FFCC66 url("florina1.jpg") no-repeat fixed right bottom; Η σειρά αναγραφής των ιδιοτήτων είναι η εξής : [background-color] [background-image] [background-repeat] [backgroundattachment] [background-position] 8
9 Αν παραλείψουμε κάποια ιδιότητα, θα εκληφθεί η προκαθορισμένη (default) τιμή της. Για παράδειγμα, αν παραλειφθούν οι δύο τελευταίες ιδιότητες, backgroundattachment καιbackground-position, θα έχουμε το εξής : background: #FFCC66 url("florina1.jpg") no-repeat; Για τις δύο ιδιότητες που δεν δώσαμε τιμή, θα εκληφθούν οι προκαθορισμένες τιμές, που είναι οι scroll και top left. Είδαμε ήδη αρκετές νέες τεχνικές μορφοποίησης με τη βοήθεια των CSS που θα ήταν αδύνατο να τις κάνουμε με την απλή HTML. Οι Γραμματοσειρές (Fonts) Θα δούμε τώρα τις γραμματοσειρές (fonts) και πώς μπορούμε να τις εφαρμόσουμε με τη βοήθεια των CSS. Η ιδιότητα font-family Η ιδιότητα font-family χρησιμοποιείται για να ορίσει μια λίστα προτεραιότητας από γραμματοσειρές που θα χρησιμοποιηθούν για να εμφανισθεί ένα συγκεκριμένο στοιχείο ή μια ιστοσελίδα. Αν η πρώτη γραμματοσειρά που υπάρχει στη λίστα δεν είναι εγκατεστημένη στον υπολογιστή από τον οποίο γίνεται η πρόσβαση στο site, θα δοκιμασθεί η επόμενη γραμματοσειρά κοκ μέχρι να βρεθεί κάποια που να ταιριάζει. Υπάρχουν δύο είδη ονομάτων που χρησιμοποιούνται για να κατηγοριοποιηθούν οι γραμματοσειρές : τα family-names και τα generic families. Παραδείγματα ενός family-name, που τα ξέρουμε και ως font, είναι για παράδειγμα τα "Arial", "Times New Roman", "Tahoma" κ.ά. Τα generic families είναι ομάδες από family-names με παρόμοια εμφάνιση. Ένα παράδειγμα είναι το sans-serif, που είναι μια συλλογή από γραμματοσειρές χωρίς πόδια (feet). Στο generic family serif ανήκουν οι γραμματοσειρές Times New Roman, Garamond και Georgia, όπου όλες έχουν πόδια (feet). Στο generic family sans-serif ανήκουν οι γραμματοσειρέςtrebuchet, Arial και Verdana, όπου όλες δεν έχουν πόδια (feet). Στο generic family monospace ανήκουν οι γραμματοσειρές Courier, Courier New και Andele Mono, όπου όλοι οι χαρακτήρες τους έχουν το ίδιο πλάτος. Όταν εμφανίζουμε τις γραμματοσειρές για την ιστοσελίδα μας, θα πρέπει να ξεκινάμε με τις πιο δημοφιλείς γραμματοσειρές και μετά με κάποιες εναλλακτικές. Αποτελεί καλή πρακτική να ολοκληρώνουμε τη λίστα με μια γραμματοσειρά από generic family. Έτσι, η ιστοσελίδα θα εμφανισθεί με μια γραμματοσειρά της ίδιας οικογένειας αν δεν βρεθεί κάποια από τις προηγούμενες γραμματοσειρές. Ένα παράδειγμα χρήσης της ιδιότητας font-family μπορεί να είναι το εξής : h2 { font-family: arial, verdana, sans-serif; 9
10 font-family: "Times New Roman", serif; Σύμφωνα με τον παραπάνω κώδικα, οι επικεφαλίδες (headlines) που είναι μαρκαρισμένες με το tag <h1> θα εμφανισθούν με τη γραμματοσειρά "Arial". Αν αυτή η γραμματοσειρά δεν είναι εγκατεστημένη στον υπολογιστή του χρήστη, θα χρησιμοποιηθεί η "Verdana" και αν καμία απ αυτές δεν είναι διαθέσιμη, θα χρησιμοποιηθεί μια γραμματοσειρά από την οικογένεια sans-serif, ώστε να εμφανισθεί σωστά το κείμενο των επικεφαλίδων. Επειδή το όνομα της γραμματοσειράς "Times New Roman" περιέχει κενούς χαρακτήρες, χρησιμοποιήσαμε διπλά εισαγωγικά για να το προσδιορίσουμε. Η ιδιότητα font-style Η ιδιότητα font-style κάνει τη μορφοποίηση της επιλεγμένης γραμματοσειράς να είναι normal, italic ή oblique. Στο επόμενο παράδειγμα, όλες οι επικεφαλίδες που είναι μαρκαρισμένες με το tag <h2> θα εμφανισθούν με πλάγια γράμματα. h2 { font-family: arial, verdana, sans-serif; font-family: "Times New Roman", serif; font-style: italic; Η ιδιότητα font-variant Η ιδιότητα font-variant χρησιμοποιείται για να επιλέξουμε ανάμεσα στις παραλλαγές normal ή small-caps μιας γραμματοσειράς. Μια γραμματοσειρά του τύπου smallcaps χρησιμοποιεί μικρού μεγέθους κεφαλαία γράμματα αντί για μικρά (πεζά) γράμματα. Στην περίπτωση που η ιδιότητα font-variant είναι ορισμένη στην τιμή small-caps και δεν υπάρχει διαθέσιμη κάποια γραμματοσειρά που να την υποστηρίζει, ο φυλλομετρητής είναι πολύ πιθανό να εμφανίσει το κείμενο με κανονικά κεφαλαία γράμματα. Ακολουθούν παραδείγματα : h2 { font-variant: small-caps; font-variant: normal; 10
11 Η ιδιότητα font-weight Η ιδιότητα font-weight περιγράφει πόσο έντονα θα πρέπει να εμφανίζεται μια γραμματοσειρά. Μια γραμματοσειρά μπορεί να είναι είτε normal ή bold. Μερικοί φυλλομετρητές υποστηρίζουν ακόμη και αριθμούς από το 100 έως το 900 για να προσδιορίσουν με ακρίβεια το πόσο έντονη θέλουμε να είναι η γραμματοσειρά. Ακολουθούν παραδείγματα : p { td { font-family: arial, verdana, sans-serif; font-family: arial, verdana, sans-serif; font-weight: bold; Η ιδιότητα font-size Η ιδιότητα font-size ορίζει το μέγεθος μιας γραμματοσειράς. Υπάρχουν πολλές μονάδες, όπως pixels, points και εκατοστά, που μπορούμε να χρησιμοποιήσουμε για να προσδιορίσουμε το μέγεθος μιας γραμματοσειράς. Ακολουθούν παραδείγματα : h2 { h3 { p { font-size: 30px; font-size: 12pt; font-size: 120%; font-size: 1em; Με τις μονάδες px και pt προσδιορίζουμε το μέγεθος με απόλυτες τιμές, ενώ με τις μονάδες % και em προσδιορίζουμε το μέγεθος με σχετικές τιμές. 11
12 Η ιδιότητα font Με την ιδιότητα font μπορούμε να προσδιορίσουμε όλες τις ιδιότητες font σε μία μόνο γραμμή. Για παράδειγμα, οι επόμενες τέσσερις γραμμές κώδικα περιγράφουν τις ιδιότητες γραμματοσειράς του tag <p> : p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; Με την ιδιότητα font μπορούμε να επιτύχουμε το ίδιο αποτέλεσμα, αλλά με μία μόνο γραμμή κώδικα : p { font: italic bold 30px arial, sans-serif; Η σειρά αναγραφής των τιμών των ιδιοτήτων για την ιδιότητα font είναι η εξής : font-style font-variant font-weight font-size font-family Και μην ξεχνάτε: Η τεχνολογία των Διαδοχικών Φύλλων Στυλ (CSS) σας γλυτώνει από χρόνο και κάνει τη ζωή σας ευκολότερη. 12
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Εργαλεία Ανάπτυξης Εφαρμογών 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 χρησιμοποιείται για τη μορφοποίηση
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Περιεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
Διάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Βασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Γαβαλάς Δαμιανός 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. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας
Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα
Εισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.
Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).
Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Cascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης
CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.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
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
Στοιχεία ορισμού θέσης (Positioning Elements)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς
3.3.1.1 Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς Γραμματοσειρές Η λέξη γραμματοσειρά αναφέρεται στο στυλ που εμφανίζονται τα γράμματα. Παρακάτω ακολουθούν κάποια παραδείγματα,
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
Εκπαιδευτικά Περιβάλλοντα Διαδικτύου
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Φόντο (background) και Περίγραμμα (border) στοιχείου ιστοσελίδας Παρουσίαση 16 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Γαβαλάς Δαμιανός dgavalas@aegean.gr
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας
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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ
ΠΕΡΙΕΧΟΜΕΝΑ Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Α Δομή και λειτουργία προσωπικού υπολογιστή...11 ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Β Δομή και χρήση λειτουργικών συστημάτων DOS, UNIX και λειτουργικού
CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Το απεικονιστικό μοντέλο μορφοποίησης των CSS
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει
Ε Έκδοση 1 / ΟΔΗΓΙΕΣ (ΗΛΕΚΤΡΟΝΙΚΗΣ) ΜΟΡΦΟΠΟΙΗΣΗΣ ΚΑΝΟΝΙΣΤΙΚΩΝ ΚΕΙΜΕΝΩΝ 01 ΓΕΝΙΚΑ 01 ΓΕΝΙΚΕΣ ΟΔΗΓΙΕΣ
Ε 01.01.30 ΓΕΝΙΚΗ ΔΙΕΥΘΥΝΣΗ ΥΠΟΔΟΜΗΣ ΔΙΕΥΘΥΝΣΗ ΓΡΑΜΜΗΣ Έκδοση 1 / 18.2.2009 01 ΓΕΝΙΚΑ 01 ΓΕΝΙΚΕΣ ΟΔΗΓΙΕΣ 30 ΟΔΗΓΙΕΣ (ΗΛΕΚΤΡΟΝΙΚΗΣ) ΜΟΡΦΟΠΟΙΗΣΗΣ ΚΑΝΟΝΙΣΤΙΚΩΝ ΚΕΙΜΕΝΩΝ Η Οδηγία τέθηκε σε ισχύ με την υπ αριθμ.
HTML... 1. Εισαγωγή στην HTML και τα CSS
HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα
Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Εισαγωγή στο πρόγραμμα Microsoft word 2003
Εισαγωγή στο πρόγραμμα Microsoft word 2003 Έναρξη 1. Εκκίνηση του προγράμματος Για να ξεκινήσουμε το Word, πατάμε στο κουμπί Εναρξη και από το μενού που εμφανίζεται επιλέγουμε Προγράμματα και Microsoft
Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.
Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,
ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
Εισαγωγή στο CSS Από: Λία Βέρου
Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται
Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)
Εισαγωγή στο Word. Κεντρική οθόνη του Word
Εισαγωγή στο Word Το Word είναι το δημοφιλέστερο πρόγραμμα επεξεργασίας κειμένου. Τα κύρια χαρακτηριστικά του είναι η εύκολη και γρήγορη δημιουργία και επεξεργασία εγγράφων. Κεντρική οθόνη του Word Το
Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου
Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο
ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ
ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS) Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Ετικέτες (tags) 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2. Δομή εγγράφου (αρχείου html) 3. Δημιουργία αρχείου html 4.
Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2
ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards
Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Τα Επιπλέοντα Στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά
Επεξεργαστής Κειμένου: (Microsoft Word)
Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου
1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα
1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1. Σύστημα Συντεταγμένων Το σύστημα συντεταγμένων που έχουμε συνηθίσει από το σχολείο τοποθετούσε το σημείο (0,0) στο σημείο τομής των δυο αξόνων Χ και Υ.
Κειµενογράφοι ετικετών
ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε
Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7
Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες
Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Εργαστήριο του Μαθήματος: ΕΠΛ003. Ενότητα 3 Εισαγωγή στο Microsoft Word
Εργαστήριο του Μαθήματος: ΕΠΛ003 Ενότητα 3 Εισαγωγή στο Microsoft Word 1 Πως αρχίζουμε το Microsoft Word Για να αρχίσουμε το Word, πρέπει να κάνουμε double click στο εικονίδιο του Word που βρίσκεται στον
Ενότητα 17 Εκτύπωση Φύλλων Εργασίας και Γραφικών Παραστάσεων
Ενότητα 17 Εκτύπωση Φύλλων Εργασίας και Γραφικών Παραστάσεων 17.1 Το παράθυρο Print Preview Θέλουμε να τυπώσουμε το φύλλο εργασίας μας. Πρέπει όμως να σιγουρευτούμε ότι οι σωστές γραμμές και στήλες θα
Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο
FrontPage 2003 Πρακτικός Οδηγός Χρήσης Το FrontPage είναι ένα πρόγραμμα δημιουργίας ιστοσελίδων και δικτυακών τόπων που επιτρέπει το σχεδιασμό ιστοσελίδων μέσα από γραφικό περιβάλλον αλλά και την ταυτόχρονη
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Οδηγός γρήγορης εκκίνησης
Οδηγός γρήγορης εκκίνησης Το Microsoft Word 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Γραμμή
Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)
PEOPLECERT Hellas A.E - Φορέας Πιστοποίησης Ανθρώπινου Δυναμικού Κοραή 3, 105 64 Αθήνα, Τηλ.: 210 372 9100, Fax: 210 372 9101, e-mail: info@peoplecert.org, www.peoplecert.org Πνευματικά Δικαιώματα 2013
Εργαστήριο του Μαθήματος: ΕΠΛ001
www.epl001lab.weebly.com Εργαστήριο του Μαθήματος: ΕΠΛ001 Ενότητα 3 Εισαγωγή στο Microsoft Word Πως αρχίζουμε το Microsoft Word Για να αρχίσουμε το Word, πρέπει να κάνουμε double click στο εικονίδιο του
Αυτοµατιµός Γραφείου. Τµήµα Διοίκησης Επιχειρήσεων ΑΤΕΙ- Δυτικής Ελλάδας Μεσολόγγι Δρ. Α. Στεφανή Διάλεξη 2η
Αυτοµατιµός Γραφείου Τµήµα Διοίκησης Επιχειρήσεων ΑΤΕΙ- Δυτικής Ελλάδας Μεσολόγγι Δρ. Α. Στεφανή Διάλεξη 2η Εφαρµογές αυτοµατισµού γραφείου : επεξεργασία κειµένου Μορφοποιήσεις Μορφοποίηση κειµένου Μορφοποίηση