Εισαγωγή στην HTML Κεφ. HTML + CSS
Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα
Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη ΑΕΚ Πλατανιάς HTML αρχείο Περιέχει το περιεχόμενο CSS Περιέχει κανόνες πως ο φυλλομετρητής θα εμφανίσει το περιεχόμενο Ο λ υ μ π ι α κ ό ς Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη ΑΕΚ Πλατανιάς
Πολύ ωραία...αλλά πες τα πιο απλά Στο αρχείο HTML λοιπόν, έχουμε το περιεχόμενο που θέλουμε να προβάλλουμε (κείμενα, εικόνες, βίντεο κτλ). Οι κανόνες CSS είναι για να πουν πως να προβάλει το περιεχόμενο ο φυλλομετρητής. Στο αρχείο HTML πρέπει να πούμε που θα βρει τους κανόνες CSS για το πως θα προβληθεί το περιεχόμενο.
Eνσωμάτωση κώδικα CSS Η ενσωμάτωση του κώδικα CSS μπορεί να πραγματοποιηθεί με 3 τρόπους σ' ένα αρχείο HTML Α. Internal Style Sheet Β. External Style Sheet (ΠΡΟΤΕΙΝΕΤΑΙ) Γ. Inline Style Sheet
Α. Internal Style Sheet Εισαγωγή απευθείας του κώδικα CSS μέσω της ετικέτας <style> στο <head> του αρχείου HTML. <head>... <style type="text/css"> h1 { color:blue; font-size:12px; } </style>... </head>
Β. External Style Sheet (ΠΡΟΤΕΙΝΕΤΑΙ) Δημιουργία ξεχωριστού αρχείου με κατάληξη.css και εισαγωγή του στην HTML μέσω της ετικέτας <link>. Με αυτό τον τρόπο μπορούμε να χρησιμοποιούμε/εισάγουμε το ίδιο αρχείο CSS σε πολλές ιστοσελίδες/αρχεία HTML. <head>... <link rel="stylesheet" type="text/css" href="mystyle.css" />... </head>
Γ. Inline Style Sheet Εισαγωγή του κώδικα CSS απευθείας στην ετικέτα (tag) που επιθυμούμε μέσω του χαρακτηριστικού (attribute) "style". <h1 style="color:blue;font-size:12px;"> Επικεφαλίδα </h1>
Τρόπος σύνταξης Μια έκφραση ή κανόνας CSS αποτελείται από 2 τμήματα: (α) τον επιλογέα (selector) και (β) τις δηλώσεις (declarations). Η κάθε δήλωση (declaration) αποτελείτε από την ιδιότητα (property)που επιθυμούμε να καθορίσουμε και την τιμή (value) την οποία δίνουμε.
Τρόπος σύνταξης ΕΠΙΛΟΓΕΑΣ {ΙΔΙΟΤΗΤΑ: ΤΙΜΗ; ΙΔΙΟΤΗΤΑ:ΤΙΜΗ;...;} Ο ΕΠΙΛΟΓΕΑΣ (selector) προσδιορίζει το στοιχείο (element) της HTML, του οποίου η μορφοποίηση θα επηρεαστεί. Όπως και η HTML, έτσι και η CSS δεν διακρίνει μεταξύ πεζών και κεφαλαίων. Παράδειγμα, ο κώδικας: p {Border:1px solid red; color:yellow; background-color:green;} καθορίζει ότι οι παράγραφοι του κειμένου (ό,τι δηλαδή σημαίνεται με <p> εντός της σελίδας) θα εμφανίζονται με κόκκινο περίγραμμα πάχους ενός pixel (px), κίτρινα γράμματα και πράσινο φόντο (όπως στην Εικόνα 12.1). Το τελευταίο ερωτηματικό μπορεί και να λείπει.
Το Class και το Id Μερικές φορές θέλουμε να εφαρμόσουμε ένα ειδικό στυλ (style) σ ένα συγκεκριμένο στοιχείο (element) ή σε μια συγκεκριμένη ομάδα στοιχείων (groupof elements). Θα δούμε το πώς μπορούμε να χρησιμοποιήσουμε το class και το id για να ορίσουμε ιδιότητες για επιλεγμένα στοιχεία. Για παράδειγμα, θα μας απασχολήσουν θέματα όπως το πώς μπορούμε να χρωματίσουμε μια συγκεκριμένη κεφαλίδα (headline) διαφορετικά από τις άλλες κεφαλίδες της ίδιας ιστοσελίδας ή το πώς μπορούμε να ομαδοποιήσουμε τα links σε διαφορετικές κατηγορίες και να δώσουμε σε κάθε κατηγορία ένα ειδικό στυλ.
Σύνταξη με κλάσεις (classes) Ο μηχανισμός ορισμού κλάσεων της CSS μας επιτρέπει να ορίσουμε κλάσεις, δηλαδή σύνολα από χαρακτηριστικά CSS. Ο ορισμός της κλάσης γίνεται με τη μορφή:.ονομα ΚΛΑΣΗΣ { ΙΔΙΟΤΗΤΑ: ΤΙΜΗ; ΙΔΙΟΤΗΤΑ: ΤΙΜΗ; } Κάθε κλάση, δηλαδή, περικλείει πολλές ιδιότητες και τις τιμές τους σε έναν ορισμό, ο οποίος μπορεί να χρησιμοποιείται πολλαπλώς
Σύνταξη με κλάσεις (classes) Ένα παράδειγμα ορισμού κλάσης φαίνεται εδώ:.maintxt { color:red; padding:10px; border:1px solid red; } O παραπάνω απλός κώδικας ορίζει μία κλάση με όνομα maintxt και ιδιότητες: κόκκινο χρώμα γραμμάτων (color:red), εσωτερικό περιθώριο 10 pixel (padding:10px) και περίγραμμα συνεχές, κόκκινου χρώματος και πάχους 1 pixel (border:1px solid red). Σε όποια ετικέτα HTML εφαρμοστεί αυτή η κλάση αποκτά αυτές τις ιδιότητες. Η εφαρμογή αυτή γίνεται πολύ απλά, π.χ. σε μία παράγραφο ή σε ένα κελί πίνακα: <p class= maintxt > <Μπλα μπλα..</p>
Αναγνώριση Στοιχείου με το Id Εκτός από την ομαδοποίηση των στοιχείων, μπορούμε να αναγνωρίσουμε και ένα στοιχείο μεμονωμένα με την ιδιότητα (attribute) id. Εκείνο που θα πρέπει να έχουμε υπόψη μας είναι ότι δεν μπορούν να υπάρχουν δύο στοιχεία (elements) στην ίδια ιστοσελίδα με το ίδιο id. Δηλαδή το κάθε id θα πρέπει να είναι μοναδικό. Αν αυτό αποτελεί πρόβλημα, μπορούμε να χρησιμοποιήσουμε την ιδιότητα (attribute) class.
Αναγνώριση Στοιχείου με το Id Με τον όρο id εννοούμε ένα δικό μας όνομα που δίνουμε σε έναν κανόνα. Ο σκοπός μιας τέτοιας χρήσης είναι να το χρησιμοποιήσουμε ως ιδιότητα μέσα σε μια ετικέτα html έτσι ώστε να εφαρμοστεί η μορφοποίηση που θα ορίσουμε μόνο σε αυτή την ετικέτα. Ο επιλογέας σε μια τέτοια περίπτωση ξεκινάει με το σύμβολο # και ακολουθεί το όνομα που δίνουμε. Για παράδειγμα:
Αναγνώριση Στοιχείου με το Id #para1 { text-align: left; color: blue; <p id="para1">hello World!</p> <p>αυτή η παράγραφος δεν επηρεάζεται απο το διπλανό</p> }