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



Σχετικά έγγραφα
Css. FACEtoFACE 32 Χρόνια Εμπειρίας. Εκπαιδευτικός & Εξεταστικός όμιλος Authorized Training & Certification Centers. Επικοινωνία

Στελεχώνου ε το σή ερα το τώρα και το αύριο!

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

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

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

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

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

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

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

Cascading Style Sheets (CSS)

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

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

CSS. Συνοπτική ενημέρωση για ανάλυση Διδάκτρων και Παροχών. Χαρακτηριστικά της Διοίκησης του Εκπαιδευτικού και Εξεταστικού μας ομίλου FacetoFace

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

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

<a href=" στο κείμενο</a>.

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

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

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

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

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

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

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

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

ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ

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

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

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

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

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

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

<HTML> <HEAD> <TITLE> <BODY>

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

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

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML

Cascading Style Sheets

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

Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger. Δημιουργία ιστολογίου

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

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

Εργαστήριο του Μαθήματος: ΕΠΛ001

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

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

Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : / id ot.com /

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

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

Εργαστήριο του Μαθήματος: ΕΠΛ003. Ενότητα 3 Εισαγωγή στο Microsoft Word

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

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

Εισαγωγή στο πρόγραμμα Microsoft word 2003

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

Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8

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

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

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

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

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

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26

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

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

Πώς να δημιουργήσετε ένα Wiki

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

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

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

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

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

Οδηγίες Εγκατάστασης της εφαρμογής Readium και Readium για μαθητές με αμβλυωπία για την ανάγνωση βιβλίων epub σε Υπολογιστή.

ΔΙΑΔΙΚΑΣΙA ΜΕΤΑΦΟΡΑΣ ΥΛΙΚΟΥ ΜΑΘΗΜΑΤΟΣ ΑΠΟ BLACKBOARD VISTA ΣΕ MOODLE

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

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

Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 2

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

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

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

( Απάντηση: Ο τόνος βρίσκεται δεξιά από το γράμμα Λ. ) ( Απάντηση: Κρατάμε πατημένο το πλήκτρο Shift και πατάμε το πλήκτρο 8. )

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

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

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

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

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

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

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word

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

ΕΙΣΑΓΩΓΗ ΣΤΗ ΧΡΗΣΗ Η/Υ ΤΜΗΜΑ ΑΣΟΠΟΝΙΑΣ ΚΑΙ ΙΑΧΕΙΡΙΣΗΣ ΦΥΣΙΚΟΥ ΠΕΡΙΒΑΛΛΟΝΤΟΣ Τ.Ε.Ι. ΛΑΡΙΣΑΣ ΠΑΡΑΡΤΗΜΑ ΚΑΡ ΙΤΣΑΣ ΕΡΓΑΣΤΗΡΙΟ 08 ΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ (ΜΕΡΟΣ 1)

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

ιαχείριση Πληροφοριών στο ιαδίκτυο

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

4. ΠΑΤΗΣΤΕ ΤΟ ΚΟΥΜΠΙ. >> ΓΙΑ ΝΑ ΜΕΤΑΦΕΡΕ ΟΛΑ ΤΑ ΠΕ ΙΑ ΤΗΣ ΛΙΣΤΑΣ ΣΤΟΝ ΚΑΤΑΛΟΓΟ SELECTED FIELDS (ΕΠΙΛΕΓΜΕΝΑ ΠΕ ΙΑ) ΠΑΤΗΣΤΕ ΤΟ ΚΟΥΜΠΙ ΝΕΧΤ

Διάλεξη 6η CSS Advanced

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

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

Οδηγίες για smartphone ή tablet με λογισμικό Android

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

Πώς να δημιουργήσετε ένα Wiki

4 ο ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ ΓΕΝΙΚΟΣ ΣΚΟΠΟΣ :

Εγχειρίδιο Χρήσης V3.0

Άσκηση 10 KTurtle Αν - Κύκλος

Βασίλειος Κοντογιάννης ΠΕ19

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>

Transcript:

Copyright 2009-2012 -SYSTEM- All rights reserved 2/159

ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background Color Μάθημα 8: Background Image Μάθημα 9: Background Image Repeat Μάθημα 10: Background Image Position Μάθημα 11: Background Image Attachment Μάθημα 12: Text Color Μάθημα 13: Text Align Μάθημα 14: Text Decoration Μάθημα 15: Text Transform Μάθημα 16: Text Direction Μάθημα 17: Text Indent Μάθημα 18: Text Font Family Μάθημα 19: Text Font Style Μάθημα 20: Text Font Size Μάθημα 21: Style Hyperlinks Μάθημα 22: Style Hyperlinks background Color Μάθημα 23: Style Hyperlinks Text Decoration Μάθημα 24: List Style Type Μάθημα 25: List Style Type Circle & Square Μάθημα 26: Photoshop Save for Web Copyright 2009-2012 -SYSTEM- All rights reserved 3/159

Μάθημα 27: List Style Image Μάθημα 28: List Style Position Μάθημα 29: Table Boarder Μάθημα 30: Table Boarder Collapse Μάθημα 31: Table Width Μάθημα 32: Table Align Μάθημα 33: Table Background Color Μάθημα 34: Table Padding Table Μάθημα 35: CSS Model Box Μάθημα 36: Model Box Μάθημα 37: Width Height Element Paragraph Μάθημα 38: DocType Μάθημα 39: Boarder Style Μάθημα 40: Boarder Width Color Μάθημα 41: Navigation Bars & List Oflinks Μάθημα 42: Navigation Bar List Style Type - None Μάθημα 43: Navigation Bar List Background Color Block Μάθημα 44: Navigation Bar Display Inline Μάθημα 45: Navigation Bar Float Μάθημα 46: Navigation Bar - Interactive Bar Μάθημα 47: Μάθημα 48: Image Gallery Μάθημα 49: Image Opacity Μάθημα 50: Image Box - Transbox Μάθημα 51: Grouping Selector Copyright 2009-2012 -SYSTEM- All rights reserved 4/159

ΚΕΦΑΛΑΙΟ 1-2 NEW/ SAVE ΕΙΣΑΓΩΓΗ ΣΤΗ CSS Η CSS (Cascading Style Sheets-Διαδοχικά Φύλλα Στυλ) ή ( αλληλουχία φύλλων στύλ ) είναι μια γλώσσα υπολογιστή που ανήκει στην κατηγορία των γλωσσών φύλλων στυλ που χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης. Χρησιμοποιείται δηλαδή για τον έλεγχο της εμφάνισης ενός εγγράφου που γράφτηκε στις γλώσσες HTML και XHTML, δηλαδή για τον έλεγχο της εμφάνισης μιας ιστοσελίδας και γενικότερα ενός ιστοτόπου. Η CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώμματα, στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την html. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται ως απαραίτητη. ΚΕΦΑΛΑΙΟ 1 ο NEW - SAVE ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ανοίξτε το πρόγραμμα Sublime Text. ΑΠΑΝΤΗΣΗ. Δείξτε Έναρξη/ Προγράμματα/ Sublime Text. 2 ον Ανοίξτε το αρχείο M_01A μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, αποθηκεύστε το με όνομα Μ_01Α και τύπο CSS μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_01Α / επιλέξτε το αρχείο M_01Α.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. 3 ον Ανοίξτε το αρχείο M_01Β μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, αποθηκεύστε το με όνομα Μ_01Β και τύπο CSS μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_01Β / επιλέξτε το αρχείο M_01Β.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. Copyright 2009-2012 -SYSTEM- All rights reserved 5/159

ΚΕΦΑΛΑΙΟ 2 ο ΕΙΣΑΓΩΓΗ ΣΤΗ CSS ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Από ποια αρχικά λέξεων έχουμε το CSS; Α. Cascading Style Sleep. Β. Casting Style Sheets. Γ. Cascading Stolen Sheets. Δ. Cascading Style Sheets. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Cascading Style Sheets 2 ον Τι ορίζει τα στυλ; Α. Τον τρόπο εμφάνισης των στοιχείων που βρίσκονται στον κώδικά HTML. Β. Τον τρόπο αποθήκευσης των στοιχείων που βρίσκονται στον κώδικά HTML. Γ. Τον τρόπο επεξεργασίας των στοιχείων μιας σελίδας. Δ. Τίποτε από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Τον τρόπο εμφάνισης των στοιχείων που βρίσκονται στον κώδικά HTML. 3 ον Για ποιο λόγο προστέθηκαν τα CSS αρχεία; Α. Για να λύνουν μαθηματικά προβλήματα. Β. Για να λύνουν αποθηκευτικά προβλήματα στην HTML4. Γ. Για να λύνουν αυτοματοποιημένα προβλήματα στην HTML 4 μορφοποίησης. Δ. Κανένα από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Για να λύνουν αυτοματοποιημένα προβλήματα στην HTML 4 μορφοποίησης. Copyright 2009-2012 -SYSTEM- All rights reserved 6/159

ΚΕΦΑΛΑΙΟ 3 ΤΡΟΠΟΣ ΣΥΝΤΑΞΗΣ CSS Ένας κανόνας CSS έχει δύο κύρια μέρη: έναν επιλογέα, και μία ή περισσότερες δηλώσεις. Ο επιλογέας είναι συνήθως το στοιχείο που θέλετε να έχει στυλ. Κάθε δήλωση αποτελείται από μία αγκύλη και μια τιμή. Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και οι ομάδες δήλωση περιβάλλονται από αγκύλες. Παράδειγμα CSS Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και οι ομάδες δήλωση περιβάλλονται από αγκύλες: p color:blue;font-size:12; Καλό είναι για το CSS κάθε δήλωση να είναι σε μια ξεχωριστεί γραμμή. p color:blue; font-size:12; ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Από πόσα μέρη αποτελείται ένας κανόνας CSS; Α. Από ένα μέρος. Β. Από δύο μέρη. Γ. Από τρία μέρη. Δ. Από κανένα. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Από δύο μέρη. 2 ον Τι είναι ο επιλογέας (selector); Α. Είναι συνήθως το στοιχείου που θέλουμε να έχει στυλ. Β. Είναι οι αγκύλες που πληκτρολογούμε μέσα τις ετικέτες. Γ. Είναι η αξία του κάθε στοιχείου Δ. Κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Είναι το στοιχείο που θέλουμε να έχει στυλ. 3 ον Με ποιο χαρακτήρα διαχωρίζεται η κάθε ενέργεια; Α. Με κόμμα. Β. Με κενό. Γ. Με αγκύλες. Copyright 2009-2012 -SYSTEM- All rights reserved 7/159

Δ. Με ελληνικό ερωτηματικό. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Με ελληνικό ερωτηματικό. 4 ον Πόσους τρόπους γραφής έχουμε στο CSS; Α. Δύο Β. Έναν Γ. Τρείς ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Δύο. ΚΕΦΑΛΑΙΟ 4 CSS ΣΧΟΛΙΑ Σχόλια χρησιμοποιούνται για να σας βοηθήσουν κατά την επεξεργασία του πηγαίου κώδικα σε κάποια άλλη στιγμή. Επισημαίνουμε ότι τα Σχόλια αγνοούνται από τους browsers. Ένα σχόλιο CSS ξεκινάει με "/ *", και τελειώνει με "* /". /*ΔΗΜΙΟΥΡΓΙΑΣ 2012-FACETOFACE.GR*/ p color:blue; font-size:12; ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Για ποιο λόγο χρησιμοποιούνται τα σχόλια; Α. Για επεξήγηση. Β. Για Βοήθεια. Γ. Και για τα δύο. Δ. Για κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Και για τα δύο. 2 ον Συμπληρώστε τη σωστή πρόταση. Τα σχόλια Α. Εμφανίζονται στους Browsers. Β. Δεν υποστηρίζονται από Browsers. Γ. Ενδιαφέρουν τους επισκέπτες. Δ. Αγνοούνται από τους Browsers. Copyright 2009-2012 -SYSTEM- All rights reserved 8/159

ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Αγνοούνται από τους browsers. 3 ον Με τι χρώμα εμφανίζονται τα σχόλια; Α. Άσπρο. Β. Κίτρινο. Γ. Κόκκινο. Δ. Γκρι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Γκρι. 4 ον Ποιος από τους παρακάτω είναι ο σωστός τρόπος πληκτρολόγησης ενός σχολίου; Α. /* Ημερομηνία Δημιουργίας/. Β. * Ημερομηνία Δημιουργίας*. Γ. /*Ημερομηνία Δημιουργίας*/. Δ. /Ημερομηνία Δημιουργίας/. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. /*Ημερομηνία Δημιουργίας*/. Copyright 2009-2012 -SYSTEM- All rights reserved 9/159

ΚΕΦΑΛΑΙΟ 5 ID Εκτός από τον καθορισμό ενός στυλ για ένα HTML στοιχείο, το CSS σας επιτρέπει να ορίσετε τη δική σας επιλογή που ονομάζεται "id" και "κατηγορία". Ο επιλογέας id χρησιμοποιείται για να καθορίσετε ένα στυλ για ένα ενιαίο, μοναδικό στοιχείο. Ο κωδικός επιλογής χρησιμοποιεί το χαρακτηριστικό id του στοιχείου HTML, και ορίζεται με "#". Μεταφέρεστε στο αρχείο HTML πχ. Πληκτρολογείτε <p id= css1 Ο κανόνας στυλ που ακολουθεί θα πρέπει να εφαρμόζονται στο στοιχείο με id = "css1p": #css1p color:blue; font-size:12; Σας επισημαίνουμε ότι δεν πρέπει να ξεκινήσετε ένα όνομα με ένα αναγνωριστικό αριθμό! Διότι δεν θα λειτουργήσει σε Mozilla / Firefox. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι ορίζει η ετικέτα ID; Α. Καθορίζει ένα στυλ για τις παραγράφους. Β. Καθορίζει ένα στυλ για ένα μοναδικό στοιχείο. Γ. Και τα δύο Δ. Κανένας από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Καθορίζει ένα στυλ για ένα μοναδικό στοιχείο. 2 ον Ανοίξτε το αρχείο M_05 μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο στο Sublime Text με όνομα Μ_05 και τύπο CSS και αποθηκεύστε μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_05 / επιλέξτε το αρχείο M_05.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/New/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. Copyright 2009-2012 -SYSTEM- All rights reserved 10/159

3 ον Στο αρχείο M_05.html, στη γραμμή 5 προσθέστε την ετικέτα: <link rel="stylesheet" type="css" href="m_05.css">. ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_05.html, μεταβείτε στη γραμμή 5 και πληκτρολογήστε την ετικέτα: <link rel="stylesheet" type="css" href="m_05.css">. 4 ον Αλλάξτε το χρώμα της 1 ης παραγράφου σε μπλε. ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_05.CSS, πληκτρολογήστε: body p color:blue; 5 ον Αποθηκεύστε στο δικό σας USB με όνομα Μ_05.html, στη συνέχεια, αποθηκεύστε και τις αλλαγές στο αρχείο Μ_05.CSS και κάντε προεπισκόπηση μέσα από τον Google Chrome το αρχείο Μ_05.html. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση. Μεταβείτε στο αρχείο Μ-05.CSS και δείξτε File/ Save. Τέλος, εντοπίστε το μέσα από το USB/ δεξί πάτημα/ Άνοιγμα με./ Google Chrome. Copyright 2009-2012 -SYSTEM- All rights reserved 11/159

ΚΕΦΑΛΑΙΟ 6 CLASS Ο επιλογέας κλάση χρησιμοποιείται για να καθορίσετε ένα στυλ για μια ομάδα στοιχείων. Σε αντίθεση με το id επιλογέα, που προσδιορίζει ένα στοιχείο. Αυτό σας επιτρέπει να ορίσετε ένα συγκεκριμένο στυλ ταυτόχρονα για πολλά στοιχεία της HTML με την ίδια κατηγορία. Η Class κλάση επιλογή χρησιμοποιεί το χαρακτηριστικό HTML Class, και ορίζεται με μία τελεία "." Σας επισημαίνουμε ότι δεν πρέπει,να ξεκινήσετε ένα όνομα κατηγορίας με μια σειρά! Διότι αυτό υποστηρίζεται μόνο στον Internet Explorer..title1 text-align:center; Μπορείτε επίσης να καθορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα πρέπει να επηρεαστεί από μια κλάση. Στο παρακάτω παράδειγμα, όλα τα στοιχεία p με class = "center" θα είναι στοιχισμένο στο κέντρο: ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι ορίζει η ετικέτα Class; Α. Καθορίζει ένα όνομα για το αρχείο. Β. Καθορίζει ένα όνομα για μια ομάδα στοιχείων. Γ. Καθορίζει τη μορφοποίηση μιας ομάδας στοιχείων. Δ. Κανένας από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Καθορίζει τη μορφοποίηση μιας ομάδας στοιχείων. 2 ον Ανοίξτε το αρχείο M_06 μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο στο Sublime Text με όνομα Μ_06 και τύπο CSS και αποθηκεύστε μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_06 / επιλέξτε το αρχείο M_06.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/New/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. Copyright 2009-2012 -SYSTEM- All rights reserved 12/159

3 ον Στο αρχείο M_06.html, στη γραμμή 5 προσθέστε την ετικέτα: <link rel="stylesheet" type="css" href="m_06.css">. Στη συνέχεια, αλλάξτε το χρώμα της 1 ης παραγράφου σε μπλε και αλλάξτε και τη ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_06.html, μεταβείτε στη γραμμή 5 και πληκτρολογήστε την ετικέτα: <link rel="stylesheet" type="css" href="m_06.css">. Με επιλεγμένο το αρχείο Μ_06.CSS, πληκτρολογήστε: body p color:blue; 4 ον Ορίστε στο αρχείο Μ_06.html, ο τίτλος με στυλ επικεφαλίδας Η1 να έχει στοίχιση κέντρο. ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_06.html, μεταβείτε στη γραμμή 10 και πληκτρολογήστε την ετικέτα: <h1 class="title12">χρώματα Ίριδας</h1>. Στη συνέχεια, επιλέξτε το αρχείο Μ_06.CSS και στη γραμμή 6 πληκτρολογήστε:.title1 text-align:center; 5 ον Αποθηκεύστε στο δικό σας USB με όνομα Μ_06.html, στη συνέχεια, αποθηκεύστε και τις αλλαγές στο αρχείο Μ_06.CSS και κάντε προεπισκόπηση μέσα από τον Google Chrome το αρχείο Μ_06.html. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση. Μεταβείτε στο αρχείο Μ-06.CSS και δείξτε File/ Save. Τέλος, εντοπίστε το μέσα από το USB/ δεξί πάτημα/ Άνοιγμα με./ Google Chrome. Copyright 2009-2012 -SYSTEM- All rights reserved 13/159

Copyright 2009-2012 -SYSTEM- All rights reserved 14/159

ΚΕΦΑΛΑΙΟ 7 BACKGROUND COLOR www.colorpicker.com Το χρώμα φόντου, καθορίζει το χρώμα του φόντου ενός στοιχείου. Το χρώμα του φόντου μιας σελίδας καθορίζεται από τον επιλογέα του σώματος: body background-color:#fb2dbe; ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ποια από τις παρακάτω διευθύνσεις μπορείτε να χρησιμοποιήσετε για την επιλογή χρώματος; Α. www.backgroundcolor.com Β. www.colorpicker.gr Γ. www.colorpicker.com Δ. Καμία από τις παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. www.colorpicker.com 2 ον Ανοίξτε το αρχείο M_07 μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο στο Sublime Text με όνομα Μ_07 και τύπο CSS και αποθηκεύστε μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_07 / επιλέξτε το αρχείο M_07.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/New/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. 3 ον Μέσω του φυλλομετρητή, μεταβείτε στη διεύθυνση www.colorpicker.com. ΑΠΑΝΤΗΣΗ. Διπλό πάτημα επάνω στο φυλλομετρητή/ στη γραμμή διευθύνσεων πληκτρολογήστε τη διεύθυνση www.colorpicker.com και πατήστε enter. 4 ον Αλλάξτε το χρώμα του φόντου σε #D9A9F5. ΑΠΑΝΤΗΣΗ. Στη σελίδα του colorpicker εντοπίστε το χρώμα #D9AF5 και αντιγράψτε τον κωδικό του ονόματός. Με επιλεγμένο το αρχείο M_07.CSS, πληκτρολογήστε την ετικέτα: body Copyright 2009-2012 -SYSTEM- All rights reserved 15/159