Ενσωμάτωση και CSS
- 1. ΤΕΙ Ανατολικής Μακεδονίας & Θράκης Τμήμα Μηχανικών Πληροφορικής ΕΡΓΑΣΤΗΡΙΟ ΠΡΟΗΓΜΕΝΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΤΕΧΝΟΛΟΓΙΩΝ ΚΑΙ ΕΦΑΡΜΟΓΩΝ ΚΙΝΗΤΩΝ ΣΥΣΚΕΥΩΝ aetma.gr Εκπαιδευτικά βιντεομαθήματα Πληροφορικής Α Γενικού Λυκείου
- 2. Πληροφορική Α’ Γενικού Λυκείου Ενότητα 3: Επικοινωνία και διαδίκτυο Κεφ. 11 Εισαγωγή στην HTML 11.3 Ενσωμάτωση
- 3. Πληροφορική Α’ Γενικού Λυκείου Ενότητα 3: Επικοινωνία και διαδίκτυο Κεφ. 11 Εισαγωγή στην HTML 11.4 Καθορίζοντας την εμφάνιση (CSS)
- 4. Ενσωμάτωση (Embedding) Η κυριότερη ετικέτα που χρησιμοποιείται για ενσωμάτωση περιεχομένου είναι η iframe Η ενσωμάτωση μπορεί επίσης να επιτευχθεί με χρήση της ετικέτας div σε συνδυασμό με κώδικα στη γλώσσα προγραμματισμού Javascript.
- 5. 11.4 Καθορίζοντας την εμφάνιση (CSS) • Eίναι μια γλώσσα σήμανσης για τον καθορισμό της μορφής και εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML.
- 6. Καθορίζοντας την εμφάνιση (CSS) Οι κανόνες επιτρέπουν στον συντάκτη να εστιάσει στη δομή και το περιεχόμενο του εγγράφου με τη γλώσσα HTML και να καθορίσει αυτόνομα και ανεξάρτητα τη διάταξη και την εμφάνισή του. Η χρήση ενός συνόλου κανόνων CSS γίνεται συνήθως με σύνδεση του αντίστοιχου αρχείου με επέκταση .css μέσα στο έγγραφο HTML με έναν από τους παρακάτω τρόπους: • με την παρακάτω ετικέτα link (μέσα στην ετικέτα head) : <link rel=″stylesheet″ media=″screen″ href=″to-styl-mou.css″> • με ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style : <style> h1 { color: red; } </style>
- 7. Χαρακτηριστικοί κανόνες μορφοποίησης Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:».
- 8. Οι «επιλογείς» της HTML Οι «επιλογείς» είναι ονόματα ετικετών της γλώσσας HTML αλλά συνήθως χρησιμοποιούνται σε συνδυασμό με κλάσεις ή κωδικούς αναγνώρισης. Αρκεί να γνωρίζουμε ότι οι κλάσεις (ιδιότητα class την ετικετών) ομαδοποιούν κάποια στοιχεία, ενώ οι κωδικοί αναγνώρισης (ιδιότητα id των ετικετών) χρησιμοποιούνται για τον μοναδικό προσδιορισμό κάποιων στοιχείων. • Παράδειγμα επιλογέων σε συνδυασμό με κωδικό αναγνώρισης : • Παράδειγμα επιλογέων σε συνδυασμό με κλάση : P.orismos { padding-left: 20px; border-left: 2px; }
- 10. Τρόποι δημιουργίας εγγράφων HTML Τόσο τα έγγραφα HTML όσο και τα έγγραφα CSS είναι αρχεία απλού κειμένου. Μπορεί λοιπόν να γίνει επεξεργασία τους με οποιονδήποτε κειμενογράφο όπως το σημειωματάριο. Προτείνεται η χρήση ενός κειμενογράφου με δυνατότητες αναγνώρισης σύνταξης, όπως το Notepad++. Εάν υπάρχει ήδη κάποιο κείμενο το οποίο πρέπει να αποθηκευτεί ως ιστοσελίδα, μπορεί να χρησιμοποιηθεί η δυνατότητα αποθήκευσης σε μορφή HTML.
- 11. Εφαρμογές διαδικτύου ειδικά για HTML και CSS •jsfiddle (http://jsfiddle.net) • dabblet (http://dabblet.com) •codepen (http://codepen.io) • cssdesk (http:// cssdesk.com) • Ένα απλό παράδειγμα δοκιμών στο codepen.