Γλώσσες'Σήμανσης' 'Markup' Languages

Transcript

1 Ανασκόπηση Γλώσσες Σήμανσης Γλώσσες'Σήμανσης' 'Markup' Languages Εισαγωγή στην HTML Βασικές έννοιες Σύνταξη Στοιχείων HTML Δομή αρχείων HTML Μοντέλο Αντικειμένου Εγγράφων (DOM) Σημασιολογία Καλές Πρακτικές Τυπολογία HTML εγγράφων -Doctypes Εισαγωγή στους Επάλληλους Οδηγούς Τεχνοτροπίας - Cascading Style Sheets 2 «Περιεχόμενο» Εγγράφων Περιεχόμενο και Παρουσίαση Εγγράφων Έγγραφα - Κείμενα (documents) χαρακτηρίζονται από: Περιεχόμενο Εγγράφου: πληροφοριακό περιεχόμενο, το Περιεχόμενο τους (content) - πληροφορίες τη Λογική δομή τους (Ιεραρχική-δενδρική): σύνολο από λογικά στοιχεία (elements, logical units), ιεραρχικά οργανωμένα σε ένα «δένδρο εγγράφου» (document tree). book author heading chapter heading paragraph section heading paragraph paragraph figure 3 οργανωμένο με βάση κάποια λογική δομή Η λογική δομή καθορίζεται από το είδος του κειμένου (βιβλίο, άρθρο, περιοδικό κλπ) Παρουσίαση Εγγράφου: ο τρόπος της τεχνοτροπίας παρουσίασης (style)-στοιχειοθεσίας (formatting) ενός κειμένου, σε σελίδες χαρτιού, στην οθόνη ενός υπολογιστή, ή με οποιονδήποτε άλλο τρόπο. Συνήθως υπάρχουν κανόνες για το πώς θα παρουσιαστεί ένα κείμενο, ανεξάρτητοι από το περιεχόμενό του. Π.χ.: γραμματοσειρά αρίθμηση παραγράφων στοιχειοθεσία παραγράφων θέση υποσημειώσεων 4

2 Σήμανση Εγγράφων (document markup) SGML Σήμανση εγγράφων (markup): η εισαγωγή και παράθεση στο περιεχομένου ενός εγγράφου μετα-πληροφοριών που αφορούν στο έγγραφο και στο περιεχόμενό του. Οι μεταπληροφορίες αυτές: Αφορούν στην περιγραφή της δομής (structure), της σημασιολογίας (semantics), της παρουσίασης (presentation) ή σε άλλα χαρακτηριστικά του εγγράφου και/ή του περιεχομένου του. Εισάγονται στο έγγραφο κατά τρόπον ώστε ο αναγνώστης του εγγράφου (άνθρωπος ή μηχανή) να μπορεί να ξεχωρίσει χωρίς αμφιβολία το κείμενο από τον «σχολιασμό» του. Καθορίζονται υπό μορφή διακριτών στοιχείων σήμανσης (markup elements), στα οποία εντάσσονται τμήματα του περιεχομένου που συνιστούν ενιαία δομικά, λογικά, σημασιολογικά Τα στοιχεία σήμανσης προσδιορίζονται με οριοθέτηση τμημάτων του περιεχομένου που συνιστούν ενιαία δομικά/λογικά/σημασιολογικά κλπ στοιχεία, με τους αντίστοιχους σημαντήρες/οριοθέτες. Ένας σημαντήρας (tag) αποτελείται από το όνομα του στοιχείου σήμανσης, το οποίο περικλείεται από οριοθέτες σήμανσης (markup delimiters). Π.χ. <author>erik Wilde</author> 5 SGML (Standard Generalized Markup Language): Προδιαγραφή Γενικών Γλωσσών Σήμανσης - ISO Μια γλώσσα «σήμανσης» καθορίζει σημαντήρες/οριοθέτες (tags) και γραμματικούς κανόνες για εισαγωγή των σε έγγραφα (documents). Η αναπαράσταση της δομής ενός εγγράφου γίνεται με την οριοθέτηση τμημάτων του περιεχομένου που συνιστούν ενιαία λογικά στοιχεία, με τους αντίστοιχους σημαντήρες, σύμφωνα με τα πρότυπα της SGML. Π.χ.: <book><author>erik Wilde</author> <heading>wilde s WWW</heading> <chapter id sgml ><heading>sgml</heading> <paragraph>. <section><heading>content & presentation</heading>. </section> Με την εισαγωγή τους σε ένα έγγραφο οι σημαντήρες: Αναπαριστάνουν ρητά («επισημαίνουν») τη δομή/σημασιολογία/παρουσίαση του εγγράφου. Επιτρέπουν τον διαχωρισμό του περιεχομένου (content) από την παρουσίαση (formatting) του εγγράφου. 6 Παράδειγμα SGML Document Type Definition (DTD) <book> <author>erik Wilde</author> <heading>wilde s WWW</heading> <chapter id sgml ><heading>sgml</heading> <paragraph>. <section><heading>content & presentation</heading>. </section> Οι σημαντήρες βοηθούν στην αναγνώριση της δομής του εγγράφου. Κάθε στοιχείο σήμανσης έχει διαφορετική δομή. Επιπρόσθετη πληροφορία μπορεί να ενταχθεί σε ένα στοιχείο σήμανσης με ορισμό ιδιοχαρακτηριστικών (attributes) για τον εναρκτήριο σημαντήρα του. 7 Το DTD καθορίζει τους γραμματικούς κανόνες σύμφωνα με τους οποίους δομείται ένα έγγραφο κωδικοποιημένο σύμφωνα με την SGML. Ομοειδή έγγραφα της SGML, κωδικοποιούνται σύμφωνα με ένα κοινό DTD, πράγμα που διευκολύνει την ηλεκτρονική τους επεξεργασία (αυτόματος έλεγχος ορθότητας, επίλυσης κανόνων παρουσίασης κοκ) Προσδιορίζει: Τα λογικά στοιχεία μιας κατηγορίας εγγράφων: ένα έγγραφο σε SGML είναι ένα σύνολο από στοιχεία (elements), καθένα εκ των οποίων ανήκει σε μια συγκεκριμένη κλάση. Στο DTD ορίζονται επίσης τα ιδιοχαρακτηριστικά (attributes) τα οποία αντιστοιχούν σε κάθε στοιχείο. Τους κανόνες βάση των οποίων συνδυάζονται τα στοιχεία, καθορίζοντας μια δενδρική ιεραρχία. 8

3 Παράδειγμα DTD Π.χ. DTD βιβλίου: <ELEMENT book (author, heading,chapter+) > <ELEMENT chapter (heading, (paragraph figure)*,section*)> <ELEMENT section (heading, (paragraph figure)*) > <ATTLIST (chapter section) id CDATA #IMPLIED> <ELEMENT author (#PCDATA) > Χρησιμότητα του DTD Δημιουργία Εγγράφων (με σωστή δόμηση) Επικύρωση Εγγράφων (validation) Καθορίζει μια κατηγορία (κλάση) εγγράφων που ακολουθούν μια κοινή γραμματική. Προσδιορίζει: Τα λογικά στοιχεία μια κατηγορίας εγγράφων: ένα έγγραφο σε SGML είναι ένα σύνολο από στοιχεία (elements), καθένα εκ των οποίων ανήκει σε μια συγκεκριμένη κλάση. Στο DTD ορίζονται επίσης τα ιδιοχαρακτηριστικά (attributes) τα οποία αντιστοιχούν σε κάθε στοιχείο. Τους κανόνες βάση των οποίων συνδυάζονται τα στοιχεία, καθορίζοντας μια λογική δομή και δενδρική ιεραρχία Παρουσίαση Εγγράφου 1. Επικύρωση Εγγράφου σύμφωνα με το DTD του. 2. Υποκατάσταση των στοιχείων σήμανσης με εντολές στοιχειοθεσίας (για το χρησιμοποιούμενο συστημα παρουσίασης). 3. Έλεγχος συγκειμένου-context (αλλοιώς εμφανίζεται ένα heading μέσα σε section κι αλλοιώς μέσα σε chapter). 4. Επιπρόσθετες εντολές επεξεργασίας (π.χ. Από τα heading δημιουργείται ευρετήριο). Σύστημα Επεξεργασίας SGML: Γενική Μορφή SGML Declaration DTD Document SGML Declaration:βασικοί ορισμοί και συμβάσεις πάνω στις οποίες στηρίζεται η συγγραφή ενός έγκυρου DTD (π.χ. Λεπτομέρειες για την αναπαράσταση των σημαντήρων). Χρησιμοποιείται από τον parser για την ανάλυση του DTD και του εγγράφου SGML. Parser 11 12

4 Εξειδικευμένος Συντακτικός Αναλυτής SGML Εξειδικευμένος Συντακτικός Αναλυτής SGML Π.χ.: XML DTD Document Π.χ.: HTML Document Parser SGML Declaration SGML Declaration Parser DTD Η γλώσσα HTML Η HTML (Hypertext Markup Language) είναι γλώσσα σήμανσης, η οποία έχει σχεδιασθεί με σκοπό: Τη στοιχειοθέτηση (μορφοτύπηση-formatting) περιεχομένου HyperText Markup Language ανηρτημένου στον Παγκόσμιο Ιστό Την αναμετάδοσή του στο Διαδίκτυο Την αναπαράστασή του σε διαφορετικού είδους οθόνες Χρησιμοποιεί ειδικό συντακτικό που περιλαμβάνει σημαντήρες-markers (tags), οι οποίοι περιβάλλουν στοιχεία του περιεχομένου ιστοσελίδων, καθορίζοντας την ερμηνεία των στοιχείων αυτών από τους διεκπεραιωτές-πελάτη (user agent) του Ιστού. A user agent (διεκπεραιωτής πελάτη) is any software that is used to access web pages on behalf of users: Browsers - Πλοηγοί/Φυλλομετρητές Crawlers, Web robots, Spiders - Ιχνηλάτες, Σοδιαστές, Ρομπότ, Αράχνες 15 16

5 Η γλώσσα HTML Η HTML επιτρέπει την ενσωμάτωση υπερσυνδέσμων (links, δεικτών) προς άλλα κείμενα αλλά και αρχεία ήχου, εικόνων, κινουμένων σχεδίων κλπ. Ετσι, μπορεί να χρησιμοποιηθεί για τον σχεδιασμό και την ανάπτυξη εφαρμογών υπερμέσων. Η HTML είναι επεκτάσιμη γλώσσα, υπό την έννοια ότι σε αυτή μπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της. Τα αρχεία HTML έχουν συνήθως κατάληξη.html ή.htm Αρχεία HTML Τα HTML αρχεία περιέχουν χαρακτήρες ASCII και μπορούν να δημιουργηθούν με έναν οποιονδήποτε επεξεργαστή κειμένου ASCII (editor), όπως ο vi και ο emacs, o notepad κλπ. Υπάρχουν επίσης πληθώρα WYSIWYG εργαλείων συγγραφής HTML σε περιβάλλοντα Windows και Linux. Είναι απαραίτητη η καλή γνώση των προδιαγραφών HTML, παράλληλα με την χρήση κάποιου ισχυρού εργαλείου συγγραφής εφαρμογών HTML. Ο έλεγχος ενός αρχείου HTML μπορεί να γίνει «τοπικά» με τη χρήση πλοηγού και χωρίς να είναι αναγκαία η εγκατάσταση του αρχείου σε διαθέτη ιστού. Το καλύτερο εργαλείο εκμάθησης HTML The Design of HTML The History of HTML Simple, purist design principles 1992: HTML 1.0, Tim-Berners Lee original proposal HTML describes the logical structure of a document Browsers are free to interpret tags differently HTML is a lightweight file format Size of file containing just Hello World : 1993: HTML+, some physical layout 1994: HTML 2.0, standard with best features 1995: Non-standard Netscape features 1996: Competing Netscape and Explorer features 1996: HTML 3.2, the Browser Wars end Postscript PDF 11,274 bytes 4,915 bytes 1997: HTML 4.0, stylesheets are introduced 1999: HTML 4.01, we have a winner 2000: XHTML 1.0, an XML version of HTML 4.01 MS Word 19,456 bytes 2001: XHTML 1.1, modularization HTML 28 bytes : XHTML 2.0, simplified and generalized : HTML a vocabulary and associated APIs for HTML and XHTML 20

6 Σύνταξη Στοιχείων HTML <p id="example">this is a paragraph.</p> <p> - σημαντήρας (marker/tag): ό,τι έπεται, πρέπει να θεωρείται παράγραφος Ιδιοχαρακτηριστικό (attribute) </p> - σημαντήρας (closing tag) ο οποίος επισημαίνει το τέλος της παραγράφου Στοιχείο ΗΤΜL (element) Σύνταξη Στοιχείων HTML A basic element in HTML consists of two markers (σημαντήρες) around a block of text. In almost every case elements can contain sub-elements Some elements do not contain text or sub-elements (eg. img) Elements can also have attributes, which can modify the behavior of the element and introduce extra meaning. Many attributes in HTML are common to all elements, though some are specific to a given element or elements. They are always of the form keyword="value". The value is often surrounded by single or double quotes Attributes and their possible values are mostly defined by the HTML specifications you cannot make up your own attributes without making the HTML invalid. The only real exceptions are the id and class attributes their values are entirely under your control, as they are for defining custom meanings Κατηγορίες Στοιχείων ΗΤΜL Στοιχεία block level: higher-level, normally informing the structure of the document. It may help to think of block level elements being those that start on a new line, breaking away from what went before. Some common block level elements include paragraphs, list items, headings and tables. Στοιχεία inline: those that are contained within block level structural elements and surround only small parts of the document s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; it is the kind of element that would appear in a paragraph of text. Some common inline elements include hypertext links, emphasized words, abbreviations, and short quotations. H HTML5 τροποποιεί και επεκτείνει τις κατηγορίες στοιχείων HTML: metadata, flow, sectioning, heading, embedded, κλπ Η δομή ενός αρχείου HTML Document type element, or doctype: mainly serves to get the browser to render the HTML in what is called "standards mode", so it will work correctly. It also lets validation software know what version of HTML to validate your code against. Html element: a wrapper around the entire document; the closing html tag is the last thing in any document. Inside the html element: the head element, a wrapper to contain information about the document (the metadata). After the head element: a body element - the wrapper to contain the actual content of the page in this case, only a level-one header (h1) element, which contains the text An even simpler HTML example. Elements often contain other elements. HTML body ends up involving many nested elements. Structural elements such as article, header and div create the overall structure of the document, and will contain subdivisions. These will contain headings, paragraphs, lists and so on. Paragraphs can contain elements that make links to other documents, quotes, emphasis and so on

7 Στοιχεία γενικής χρήσης: div, span H HTML μας παρέχει δύο γενικούς σημαντήρες για την επισήμανση περιεχομένου σε περιπτώσεις όπου δεν υπάρχει σημαντήρας κατάλληλος για την περιγραφή του περιεχομένου. <div> is used to wrap block-level elements. if you wanted to identify three paragraphs as the main content of the page, and a list and two paragraphs as the navigation menu of the page, you would wrap them in <div>s with suitable classes, such as class "content" or class "menu". <span> is used to wrap inline elements/content. if you wanted to identify a few words of text inside a paragraph as an editor s note or warning note with a special style, you d wrap them in <span>s. The Document Object Model (DOM) <h1> The Basics of <abbr> title HTML The Document Object Model (DOM) When a browser renders HTML for display, it converts it into a Document Object Model (DOM), which can be thought of as a treelike structure, or hierarchy. Every element, attribute, and chunk of text is represented by a node, which is a generic container for a piece of content inside the DOM. When an element contains another element, the contained element can be referred to as a child, and the container can be referred to as a parent. If you have two elements inside another element, those elements are at the same level in the DOM, and are referred to as siblings. A well-formed DOM is essential to make sure that browsers interpret your web page structure correctly and consistently. When you start working with CSS and JavaScript, you ll see that you need to travel up and down the different levels of the DOM hierarchy to select elements you want to manipulate. The only way to ensure that this will work correctly is to make sure that the DOM is well-formed. Σημασιολογία Σημασιολογία (semantics): η σημασία μια λέξης, μιας φράσης, μιας πρότασης κλπ. Wikipedia: «Πρώτος ο Reisig χρησιμοποίησε τον όρο σημασιολογία (Semasiologie) για να δηλώσει τον κλάδο της επιστήμης που εξετάζει τις σημασίες των λέξεων. Έπειτα ο γάλλος σημασιολόγος Breal χρησιμοποίησε τον όρο sémantique (αγγλ. semantics, γερμ. Semantik) απο το ελληνικό επίθετο σημαντικός ("ο σημαίνων" ή "ο έχων σημασία ).» Σημασία είναι το σύνολο των παραδειγματικών και των συνταγματικών σημασιολογικών σχέσεων που χαρακτηρίζουν κάθε λέξη. Το περιεχόμενο ενός αρχείου HTML έχει καλά εκπεφρασμένη σημασιολογία (good semantics) όταν: Η HTML είναι αυτο-περιγραφική Το HTML στοιχείo που περικλείει κάποιο τμήμα περιεχομένου ταιριάζει στην επιδιωκόμενη «σήμανση» (markup) του τμήματος αυτού 27 28

8 «Kαλή» σημασιολογία ΗΤML αρχείων Παράδειγμα: Mark up a top-level heading followed by two lowerlevel headings, with content in between them, we could do it like this: <font size="5">information about cats</font> <font size="2">this document contains information about cats.</font> <font size="4">feeding cats</font> <font size="2">cats eat cat food.</font> <font size="4">cat games</font> <font size="2">cats like to play with balls of wool, and chase mice.</font> Πόσο καλή είναι αυτή η λύση; Φέρει το επιδιωκόμενο αποτέλεσμα στοιχειοθέτησης. Όμως: Η χρήση των στοιχείων <font> είναι απηρχειωμένη, κακή πρακτική και πρέπει να αποφεύγεται. Επιβάλλεται ο διαχωρισμός της περιγραφής της δομής του περιεχομένου από την περιγραφή της τεχνοτροπίας (CSS). Σημασία της «καλής» σημασιολογίας Άλλη λύση είναι η σύνδεση του περιεχομένου με οδηγούς τεχνοτροπίας (stylesheets) με αξιοποίηση του στοιχείου div: <div id="top-heading">information about cats</div> <div class="paragraph">this document contains information about cats.</div> <div class="second-level-heading">feeding cats</div> <div class="paragraph">cats eat cat food.</div> <div class="second-level-heading">cat games</div> <div class="paragraph">cats like to play with balls of wool, and chase mice.</div> Το πρόβλημα είναι ότι τα στοιχεία div είναι περιβλήματα (containers) γενικής χρήσης και δεν έχουν ειδικό σημασιολογικό περιεχόμενο. Δεν περιγράφεται η επιδιωκόμενη δομή του περιεχομένου, έστω κι αν αυτό στοιχειοθετηθεί σωστά Σημασία της «καλής» σημασιολογίας Μια τρίτη λύση χρησιμοποιεί στοιχεία heading για να προσδιορίσει τις επικεφαλίδες και στοιχεία paragraph για να προσδιορίσει κείμενο παραγράφων: Η επιθυμητή λογική δομή δεν βασίζεται σε οδηγίες τεχνοτροπίας αλλά στην σωστή περιγραφή του κειμένου, η οποία είναι αυτοπεριγραφική, χωρίς αμφισημία και κατανοητή από τις μηχανές. <h1>information about cats</h1> <p>this document contains information about cats.</p> <h2>feeding cats</h2> <p>cats eat cat food.</p> <h2>cat games</h2> <p>cats like to play with balls of wool, and chase mice.</p> Σημασία της «καλής» σημασιολογίας Γιατί είναι κακή η έλλειψη σημασιολογικής περιγραφής περιεχομένου; People with impaired vision use an assistive technology called a screen reader to read web pages out to them. These use semantics in many ways for example, they use headings to navigate the different pieces of content, so the users can find what they want on a page. If there are no heading elements present, it is impossible for these users to effectively navigate the content. Search engines such as Google and Yahoo use keywords they find on pages to index and rank content, and they give more weight to keywords in headings. If your content contains no headings, it will be less likely to come up in search results, so fewer users will find it

9 Καλές πρακτικές Οι πλοηγοί HTML είναι γενικώς ανεκτικοί σε εσφαλμένο κώδικα HTML. Ωστόσο, ενδείκνυται να ακολουθούμε ορισμένες γενικές καλές πρακτικές στη συγγραφή HTML: Separate content from presentation you should keep all content inside the HTML, but separate all styling information into CSS. This means not using presentational elements like <font>. Make sure your text is always well-worded and easily readable. Make sure your content is as usable and accessible as possible. Why separate content from presentation? Efficiency of code: Larger files take longer to download. Don t waste bandwidth on large pages with styling and layout info. Better alternative: make HTML files stripped down and neat, and include the styling and layout information just once in a separate CSS file. Ease of maintenance: If styling and layout is only specified in one place, only have to make updates in one place to change appearance. Accessibility: Visually impaired users can use a screen reader to access the information through sound rather than sight it literally reads the page out to them, and it can do a much better job of helping people to find their way around your web page if it has a proper semantic structure, such as headings and paragraphs. In addition keyboard controls on web pages (important for those with mobility impairments that can't use a mouse) work much better if they are built using best practices Why separate content from presentation? Καλές πρακτικές Device compatibility: If your HTML/XHTML page is just plain markup, with no style information, it can be reformatted for different devices with vastly differing attributes (eg screen size) by simply applying an alternative style sheet. CSS also natively allows you to specify different style sheets for different presentation methods/media types (eg viewing on the screen, printing out, viewing on a mobile device.) Web crawlers/search engines: A search engine uses a crawler to read through your pages. If that crawler has trouble finding the content of your pages, or mis-interprets what s important because you haven t defined headings as headings and so on, then your rankings in relevant search results will probably suffer. It s just good practice: Talk to any professional standards-aware web developer or designer, and they ll tell you that separating content, style, and behavior is the best way to develop a web application

10 Ορολογία Cascading Style Sheet Επάλληλοι Οδηγοί Τεχνοτροπίας Εισαγωγή στoυς Επάλληλους Οδηγούς Τεχνοτροπίας (Cascading Style Sheets) Διαδοχικά Φύλλα Στυλ Αλληλουχία Φύλλων Στυλ Ειρμός Οδηγών Τεχνοτροπίας 38 Ο ρόλος των Cascading Style Sheets Οι σημαντήρες της HTML προσδιορίζουν τη δομή των εγγράφων HTML και υποδηλώνουν την λειτουργικότητα επιγραφόμενων τμημάτων του περιεχομένου. Οι Επάλληλοι Οδηγοί Τεχνοτροπίας (CSS) προσδιορίζουν την παρουσίαση του περιεχομένου σε κάποιο συγκεκριμένο μέσο: οθόνη πλοηγού σε Η/Υ, χαρτί εκτυπωτή, οθόνη κινητού κλπ Τα CSS μεριμνούν για styling (τεχνοτροπία), spacing (αποστάσεις), positioning (στοιχειοθεσία) Η γραμματική των CSS επιτρέπει τη δήλωση οδηγιών (οδηγών, κανόνων) που προσδιορίζουν: ποιοί κανόνες τεχνοτροπίας και στοιχειοθεσίας εφαρμόζονται στην παρουσίαση ποιών στοιχείων HTML, και ποιές ιδιότητες (χρώματος, μεγέθους, γραμματοσειράς) αντιστοιχούν σε κάθε κανόνα. Τα CSS δεν είναι γλώσσα προγραμματισμού ή γλώσσα σήμανσης αλλά γλώσσα καθορισμού κανόνων/οδηγιών με στόχο τον διαχωρισμό περιεχομένου από την παρουσίασή του. 39 Σύνταξη Οδηγών Τεχνοτροπίας selector { property1:value; property2:value; property3:value; } p { margin:5px; font-family:arial; color:blue; } selector: identifies the HTML elements that the rule will be applied to, identified by the actual element name, eg body, or by other means. curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons, properties define what you want to do to the element(s) you have selected; properties can affect element color, background color, position, margins, padding, font type, and many other things. values are the values that you want to change each property of the selected elements to. Values are dependent on the property. 40

11 CSS Properties and Selectors The essential concepts are selectors (επιλογείς) and properties (ιδιότητες) Properties may have different values: color red, yellow, rgb(212,120,20) font-style normal, italics, oblique font-size 12pt, larger, 150%, 1.5em text-align left, right, center, justify line-height normal, 1.2em, 120% Κατηγορίες Επιλογέων CSS (Selectors) Type/Element selectors Class selectors ID selectors Universal selectors Attribute selectors Child selectors Descendent selectors Adjacent sibling selectors Pseudo-classes Pseudo-elements display block, inline, list-item, none Επιλογείς τύπου (simple selectors) Επιλέγουν ένα στοιχείο με βάση τον τύπο του στοιχείου. The selector is a tag name or a list of tag names, separated by commas Π.χ.: p { color : green } h1 { color : blue } h2 { color : blue } h3 { color : blue } Ομαδοποίηση h1, h2, h3 { color : blue } για οικονομία χώρου Επιλογείς CLASS Ένας επιλογέας CLASS συνταιριάζει σε εκείνα τα Στοιχεία HTML που έχουν ιδιοχαρακτηριστικό class με τιμή ίδια με την τιμή που ανατίθεται στον επιλογέα. Π.χ. ο οδηγός:.example {} εφαρμόζεται στα Στοιχεία: <p class="example">, <li class="example"> ή <div class="example"> Η χρήση του ιδιοχαρακτηριστικού CLASS γίνεται για να μπορούν οι συγγραφείς HTML να ομαδοποιούν διαφορετικά Στοιχεία σε κατηγορίες με κοινές προδιαγραφές τεχνοτροπίας. Συνιστάται ο προσδιορισμός κλάσεων στοιχείων των αρχείων μιας εφαρμογής, πριν ξεκινήσει η συγγραφή της εφαρμογής

12 Επιλογείς ID Η χρήση του ιδιοχαρακτηριστικού ID σε συνδυασμό με CSS γίνεται για τον μοναδικό προσδιορισμό της εμφάνισης ενός συγκεκριμένου στιγμιοτύπου ενός στοιχείου HTML. Σημειωτέον ότι δύο στιγμιότυπα του ίδιου στοιχείου δεν Π.χ.: μπορούν να έχουν το ίδιο ID. <P ID= COPYRIGHT >The copyright for. #COPYRIGHT { font-size: small } Συνδυασμός επιλογέων Δύο ή περισσότεροι επιλογείς μπορούν να συνδυασθούν για τον προσδιορισμό πιο συγκεκριμένων κανόνων:: p.warning{} matches all paragraphs with the class of warning div#example{} matches the element with the id attribute example, but only when it is a div p.info, li.highlight{} matches: paragraphs with a class of info and list items with a class of highlight Καθολικός Επιλογέας (universal selector) Επιλέγει όλα τα στοιχεία μιας ιστοσελίδας και εφαρμόζει σε αυτά κοινούς κανόνες τεχνοτροπίας * {color: red;} 47 Επιλογείς Ιδιοχαρακτηριστικών (attribute selectors) Επιτρέπουν την επιλογή Στοιχείων με βάση τα ιδιοχαρακτηριστικά που αυτά καθορίζουν. Π.χ. μπορείτε να επιλέξετε κάθε Στοιχείο img με ιδιοχαρακτηριστικό alt ως εξής: img[alt] { border: 1px solid #000000;} Μπορείτε επίσης να επιλέξετε Στοιχεία με βάση τις τιμές συγκεκριμένων ιδιοχαρακτηριστικών που αυτά καθορίζουν. Π.χ: img[src="alert.gif"] { border: 1px solid #000000;} H CSS3 επιτρέπει την επιλογή με βάση χαρακτηριστικά συγκεκριμένων τμημάτων των τιμών ιδιοχαρακτηριστικών, π.χ. καταλήξεις ονομάτων αρχείων. Βλ

13 Επιλογείς τέκνων (child selectors) You can use a child selector to select just specific elements that are children of other specific elements. For example, the following rule will turn to blue the text of strong elements that are children of h3 elements, but no other strong elements: h3 > strong { color: blue; } Επιλογείς απογόνων (descendent) Descendent selectors are very similar to child selectors, except that child selectors only select direct descendants. Descendent selectors select suitable elements anywhere in the element hierarchy, not just direct descendants. How to select all em elements inside div? <div> <em>hello</em> <p>in this paragraph I will say <em>goodbye</em>. </p> </div> div > em {... } div em {... } Επιλογείς αδελφών εν σειρά (adjacent sibling) These selectors allow you to select a specific element that comes directly after another specific element, on the same level in the element hierarchy. For example, if you wanted to select all p elements that come immediately after h2 elements, but no other p elements, you could use the following rule: h2 + p {... } Επιλογείς συγκειμένου (context selectors) Επιτρέπουν τον καθορισμό της εμφάνισης ενός στοιχείου από το συγκείμενο της θέσης στην οποία αυτό τοποθετείται. Γι αυτό τον σκοπό, χρησιμοποιούμε συνδυασμούς απλών επιλογέων, οι οποίοι προσδιορίζουν το συγκείμενο (context) στο οποίο εφαρμόζονται οι οδηγίες εμφάνισης που ακολουθούν. Π.χ.: li p { margin-top: 0mm} -- όλα τα στοιχεία P που προκύπτουν στο περιεχόμενο ενός στοιχείου LI table.small p { font-size: smaller } όλες οι παράγραφοι που βρίσκονται μέσα σε ένα στοιχείο κλάσης τύπου SMALL, το οποίο είναι τμήμα ενός πίνακα Σημ. Οι απλοί επιλογείς που εμφανίζονται στ αριστερά ενός επιλογέα συγκειμένου, πρέπει να βρίσκονται σε υψηλότερο επίπεδο της ιεραρχίας DOM από αυτούς που βρίσκονται δεξιότερα

14 Εξωτερικοί επιλογείς Σε ορισμένες περιπτώσεις είναι επιθυμητή η εμφάνιση περιεχομένου με βάση πληροφορίες εξωτερικές στο αντίστοιχο αρχείο HTML. To CSS1 ορίζει δύο τύπους εξωτερικών πληροφοριών: Ψευδοκλάσεις: styles that apply when something happens, rather than because the target element simply exists Ψευδοστοιχεία: αφορούν σε τμήματα του περιεχομένου τα οποία δεν σημαίνονται ρητώς από την HTML. Π.χ., το πρώτο γράμμα μιας παραγράφου, το οποίο αναλόγως του τύπου της παρουσίασης, μπορεί να τύχει διαφορετικής παρουσίασης. 53 Ψευδοκλάσεις Το CSS1 καθορίζει ψευδοκλάσεις, οι οποίες σχετίζονται με δυνατές καταστάσεις στις οποίες μπορεί να βρεθεί ένας υπερσύνδεσμος-στοιχείο <A>: :link - ο σύνδεσμος δεν έχει επιλεγεί από τον χρήστη για το άνοιγμα κάποιου άλλου αρχείου - αποτελεί την προκαθορισμένη κατάσταση ενός συνδέσμου. :visited - ο σύνδεσμος έχει επιλεγεί προηγουμένως (η πληροφορία αυτή διατηρείται στον πλοηγό). Μέσω της λέξης κλειδί visited, μπορούμε να καθορίσουμε την εμφάνιση επιλεγμένων αγκυρών. :hover - ο δρομέας του ποντικιού βρίσκεται πάνω από το στοιχείο HTML :focus ή :active - αφορά σε υπερσύνδεσμο την (σύντομη) χρονική στιγμή που αυτός επιλέγεται από τον χρήστη ή που έχει τον δρομέα του πληκτρολογίου πάνω του :first-child - selects any instance of the element that is the first child element of its parent :lang - selects elements whose languages have been set to the specified language using the lang attribute 54 Παραδείγματα ψευδοκλάσεων Παραδείγματα ψευδοκλάσεων a:link { color: green } a:active { color: red } a:visited{ color:blue } if you don't specify these rules in the same order as they are shown, they might not work as you expect. This is due to the way specificity causes later rules in the stylesheet to override earlier rules a:link { color: blue; } a:visited { color: gray; } a:hover, a:focus { text-decoration:none; } a:active { font-weight: bold; } The :focus pseudo-class is also useful as a usability aid in forms. For example, you can highlight the input field that has the active blinking cursor inside it with a rule like this: input:focus { border: 2px solid black; background color: lightgray; } 55 56

15 Ψευδοστοιχεία Καθορίζονται από τμήματα του περιεχομένου τα οποία δεν επισημαίνονται ρητά από υπάρχοντα στοιχεία ΗΤΜL: first-letter first-line Παράδειγμα: Συντομογραφίες (CSS shorthand) Συντομογραφία CSS (shorthand): ο συνδυασμός πολλών σχετικών κανόνων CSS σε έναν κανόνα. Συνδυάζοντας πολλαπλές ιδιότητες CSS σε μια εντολή, μπορούμε να μειώσουμε το μέγεθος του κώδικα CSS που γράφουμε. p.initial.first-letter {font-size:200%; float: left } p.initial.first-line { text-transform: uppercase } Εξήγηση: η πρώτη παράγραφος ενός κεφαλαίου ή υποκεφαλαίου, η οποία σημαίνεται ως ανήκουσα στην κλάση INITIAL, εμφανίζεται με το πρώτο γράμμα της διπλάσιο από το υπόλοιπο κείμενο. Το γράμμα αυτό εμφανίζεται σε διαφορετική στοίχιση από τα υπόλοιπα. Η πρώτη γραμμή της παραγράφου αυτής εμφανίζεται με κεφαλαία γράμματα Συντομογραφίες (CSS shorthand) border: 2px solid black; border-width: 2px; border-style: solid; border-color: black; div.foo { margin-top: 1em; margin-right: 1.5em; margin-bottom: 2em; margin-left: 2.5em; } border-bottom-color: border-top-color: border-left-color: border-right-color: border-color: blue red green yellow div.foo { margin: 1em 1.5em 2em 2.5em; } div.foo { margin: 2px; } Συντομογραφίες: margin (περιθώριο) Same value applied to all four sides: margin: 2px; First value applied to the top and bottom, second value to the left and right: margin: 2px 5px;. First and third values applied to the top and bottom respectively, second value applied to the left and right: margin: 2px 5px 1px; Generally, the wisest course is to provide all four values to shorthand properties, for reasons of legibility. This advice also applies to the padding shorthand property

16 Μονάδες Μέτρησης στους CSS When specifying the size of any dimension in CSS e.g., width, font size, margin, etc. you have many options available to you for the CSS measurement units you specify the measurements in. Best practices: It is usually best to size text using ems, as then the text will resize proportionally to its surroundings when browser resize controls are used, even in older browsers such as Internet Explorer 6. If you want a column of content to always remain the same size, then pixels will usually suffice. If you want a column of content to resize proportionally to browser width, percentages are ideal. Μήκος Περιγραφή μήκους σε σχέση με το μέγεθος της γραμματοσειράς (em πλάτος M, ex ύψος x ) ή της οθόνης (px μέγεθος ενός εικονοστοιχείου). Απόλυτα μήκη: in, cm, mm, pt, pc Καθορισμός χωμάτων στους CSS Hex values: you specify six hexadecimal values, two for the red, green, and blue channels that make up each color, preceded by a # sign Each hex value has 16 possible values (0 to 9, then a to f). Each of the three color channels (R, G, and B) has a possible 256 values (16 x 16). So the total number of possible colors you can choose from is 256 x 256 x ,777,216. p { color: #ff0000; } RGB or RGBa: similar to Hex, except that you specify the values for R, G, Β in either decimal numbers or percentages (0-255 or 0%-100%): p {color: rgb(255, 0, 0); } /* equivalent to #ff0000 */ RGBa (CSS3): provides a way to specify color transparency p {color: rgba(255, 0, 0,0.95); } Χρώματα στους CSS 17 κλειδολέξεις χρωμάτων ( css/colorvalues) Π.χ. p { color: red; } Guaranteed to be displayable by all graphical browsers on all color monitors black purple navy olive blue 0000FF gray green silver C0C0C0 teal red FF0000 lime 00FF00 fuchia FF00FF aqua 00FFFF yellow FFFF00 maroon white FFFFFF orange FFA500(added in CSS 2.1) 63 64

17 Χρώματα στους CSS HSL/HSLa: stands for Hue Saturation Lightness (Απόχρωση, Κορεσμός, Φωτεινότητα) Hue: values from 0 to 360 Saturation and Lightness: values from 0 to 100% Examples: hsl(0, 100%, 50%) - Red hsl(60, 100%, 50%) - Yellow hsl(120, 100%, 50%) - Green hsl(180, 100%, 50%) - Cyan hsl(240, 100%, 50%) - Blue hsl(300, 100%, 50%) - Magenta/Purple Εφαρμογή των CSS στην ΗΤΜL Η εφαρμογή των επάλληλων οδηγών τεχνοτροπίας σε αρχεία HTML γίνεται με τρεις διαφορετικούς τρόπους: Εσωγραμμικοί οδηγοί τεχνοτροπίας (inline styles) Ενσωματωμένοι οδηγοί τεχνοτροπίας (embedded styles) Σύνδεση CSS με ΗΤΜL Εξωτερικοί οδηγοί τεχνοτροπίας (external style sheets) Εκτός αν έχετε πολύ καλούς λόγους για υιοθέτηση των δύο πρώτων τρόπων εφαρμογής CSS, συνιστάται όπως ακολουθείτε τον τρίτο τρόπο για τον συνδυασμό οδηγών τεχνοτροπίας και αρχείων HTML 68

18 Εσωγραμμικοί Οδηγοί Τεχνοτροπίας Η χρήση τους γίνεται με τη βοήθεια του γενικού ιδιοχαρακτηριστικού style: <p style "background:blue; color:white; padding:5px;">paragraph</p> Μέσα στο style, παραθέτουμε τον κατάλογο των επιθυμητών ιδιοτήτων CSS και τις τιμές τους, χωρισμένες με ; Benefit: browser will be forced to use these settings. Any other styles defined in other style sheets or even embedded in the head of the document will be overridden by these styles. Problem: makes maintenance lot harder than it should be. Problem: you don t take advantage of the most powerful part of CSS, the cascade (αλληλουχία, επαλληλία) Using the cascade means you define a look and feel in one place and the browser applies it to all the elements that match a certain rule. Ενσωματωμένοι Ο.Τ. Τοποθετούνται στο στοιχείο head ενός αρχείου HTML, εντός Στοιχείου style: <style type="text/css" media="screen"> p { color:white; background:blue; padding:5px; } </style> Benefit: you don t need to add a style attribute to each paragraph you can style them all with one single definition. Problem: still limited to one document Ιδιοχαρακτηριστικό media Χρησιμοποιείται στο στοιχείο style για να καθορίσει το μέσο στο οποίο εφαρμόζεται ο σχετικός οδηγός τεχνοτροπίας (οθόνη Η/Υ, συσκευή παλάμης, εκτυπωτής κλπ) Δυνατές τιμές media: screen for displaying on monitors. print - to define what a printout should look like. handheld look&feel on mobile and handheld devices. projection for presentations done in HTML using projectors braille for braille tactile feedback devices 71 72

19 Εξωτερικοί Οδηγοί Τεχνοτροπίας Όλοι οι κανόνες τεχνοτροπίας τοποθετούνται σε ένα αρχείο, το όνομα του οποίου καταλήγει σε.css και συνδυάζεται με τα HTML αρχεία με χρήση του στοιχείου link το οποίο τοποθετείται εντός του στοιχείου head των αρχείων. <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> The href attribute points to the CSS file The media attribute defines which media should get these styles applied to it (screen in this case), and the type defines what the linked resource is (a file extension is not enough to determine that). This is the best of all worlds: keep look and feel definitions all in one single file; you can make site-wide changes by changing one file and cache Εισαγωγή Οδηγών Τεχνοτροπίας Εναλλακτικά, μπορούμε να συνδέσουμε οδηγούς τεχνοτροπίας σε ένα αρχείο HTML με χρήση σε συνδυασμό με ενσωματωμένους οδηγούς: <style type="text/css" url("styles.css"); /* other import stmts or CSS styles could go here*/ </style> πρέπει να εμφανίζεται πάντοτε πρώτο στον ενσωματωμένο οδηγό. Μπορεί να καθοριστεί ότι ο εισαγώμενος οδηγός εφαρμόζεται μόνο για συγκεκριμένο τύπο media: <style url("styles.css") screen; </style> Γιατί η δεν αναγνωρίζεται από παλιότερους πλοηγούς, οι οποίοι το αγνοούν (Netscape 4 and older, and IE 4 and older if you omit the brackets from around the filename). Επομένως, μπορείτε να για να «κρύψετε» οδηγούς τεχνοτροπίας από παλαιότερους πλοηγούς, οι οποίοι διαφορετικά θα χρησιμοποιούσαν τους οδηγούς σας με λάθος τρόπο

20 Επαλληλία Οδηγών Τεχνοτροπίας Βασικές αρχές συνδυασμού πολλαπλών οδηγιών CSS: Συνδυασμός πολλαπλών CSS (Κληρονομικότητα και Επαλληλία) Κληρονομικότητα (inheritance): the mechanism by which certain properties are passed from a parent element on to its children. Επαλληλία - αλληλοδιαδοχή (cascade): It s the mechanism that controls the end result when multiple conflicting and overlapping CSS declarations apply to the same element. 78 Inheritance If it didn t exist, you d have to specify every property for every HTML element, every time you wrote a web page. It makes things a lot easier to be able to, for example, set a default font on the <body> element and know that it will be inherited by all <body> s children. You can then override this declaration for specific elements later on,: body { font-family: georgia; } h1, h2, h3 { font-family: helvetica; } /* This overrides the first rule, because it appears later in the code */ Every element in an HTML document except the root element <html>, will inherit all inheritable properties from its parent. Not all CSS properties are inherited, because that wouldn t make sense. For instance, margins are not inherited, since it s unlikely that a child element should need the same margins as its parent. In most cases common sense will tell you which properties are inherited and which aren t. 79 Επαλληλία (Cascade) Στα στοιχεία ενός εγγράφου ΗΤΜL συνήθως «εφαρμόζονται» περισσότερες της μιάς οδηγίες τεχνοτροπίας προερχόμενες από: εξωτερικούς, ενσωματωμένους και εσωγραμμικούς οδηγούς CSS τις προτιμήσεις του χρήστη του πλοηγού τις προκαθορισμένες προτιμήσεις του πλοηγού κλπ. Οι αρχές της επαλληλίας (αλληλοδιαδοχής) καθορίζουν ποιές οδηγίες υπερισχύουν στην στοιχειοθεσία ενός Στοιχείου, σε περιπτώσεις εφαρμογής πολλαπλών (συγκρουόμενων) οδηγιών στο Στοιχείο αυτό. Η επαλληλία στηρίζεται σε τρεις βασικές αρχές, με βάση τις οποίες καθορίζεται η σειρά εφαρμογής οδηγιών CSS: Σημαντικότητα (Importance) Εξειδίκευση (Specificity) Σειρά εμφάνισης (Source order) If two declarations have the same importance, the specificity of the rules decides which one will apply. If the rules have the same specificity, then source order controls which rule will win. 80

21 Σημαντικότητα CSS Η σημαντικότητα μιας οδηγίας CSS εξαρτάται από το πού δηλώνεται η οδηγία αυτή. Σε περίπτωση συγκρούσεων, οι οδηγίες εφαρμόζονται με την ακόλουθη σειρά: 1. Οδηγίες Εμφάνισης Πλοηγού (User agent style sheets) 2. Οδηγίες Εμφάνισης Χρήστη: καθορίζονται με επιλογές του χρήστη πάνω στον πλοηγό και επικρατούν των default οδηγιών του πλοηγού (Normal declarations in user style sheets) 3. Οδηγίες Εμφάνισης Σχεδιαστή (Normal declarations in author style sheets) 4. Important declarations in author style sheets 5. Important declarations in user style sheets Important: οδηγίες τεχνοτροπίας που έχουν σημειωθεί ως important. * {font-family: Helvetica important; } Oι οδηγίες που έχουν δηλωθεί πιό κοντά σε ένα Στοιχείο HTML υπερισχύουν αυτών που έχουν δηλωθεί πιο πριν. Εφαρμογή πολλαπλών οδηγών τεχνοτροπίας Browser <BODY> <UL> <LI> Browser style-sheet HTML Document <HTML> <HEAD> <LINK REL= stylesheet HREF= > <LINK REL= stylesheet HREF= > <BODY> </HTML> <BODY> <UL> <LI> User style-sheet <BODY> <UL> <LI> 1. designer style-sheet <BODY> <UL> <LI> 2. designer style-sheet Εξειδίκευση (Specificity) Εξειδίκευση: a measure of how specific a rule s selector is. A selector with low specificity may match many elements (like p, which matches every paragraph in the document), while a selector with high specificity might only match a single element on a page (like #nav, which only matches the element with an id of nav). If two or more rules are conflicting, and they all have the same importance, then the rule with the most specific selector will win. We define the specificity value of a selector as having four components: [A, B, C, D] Component A is the most specific, D the least. You can string these 4 components together to calculate specificity of any rule. A is 1 for a declaration in a style attribute, otherwise it is 0. B is the number of id selectors in the selector (those that begin with a #). C is the number of attribute selectors, class selectors, and pseudo-classes. D is the number of element selectors and pseudo-elements in the selector. CSS declarations in a style attribute don t have a selector: their specificity is always 1,0,0,

22 Εξειδίκευση (Specificity) It s worth noting that combinators (like >, +, and the white space) do not affect a selector s specificity. The universal selector (*) has no impact on specificity, either. Also worth noting is that there is a difference in specificity between an id selector and an attribute selector that happens to refer to an id attribute. Although they match the same element, they have very different specificities. The specificity of #nav is 0,1,0,0 while the specificity of [id="nav"] is only 0,0,1,0. Επίλυση συγκρούσεων - σύνοψη 1. Βρες όλους τους κανόνες που εφαρμόζονται σε κάποιο στοιχείο. 2. Ταξινόμησε τους κανόνες με βάση το ρητά καθορισμένο βάρος τους (ένας κανόνας μπορεί να σηματοδοτηθεί ως important για να έχει προτεραιότητα. Εφόσον βρεθεί μόνο ένας τέτοιος κανόνας, η αναζήτησή μας σταματάει εδώ). 3. Ταξινόμησε τους κανόνες με βάση την προέλευσή τους: μεγαλύτερη προτεραιότητα δίνεται στους εξειδικευμένους κανόνες του σχεδιαστή. Μετά από αυτό το βήμα, απομένουν μόνο κανόνες οι οποίοι προέρχονται από το ίδιο stylesheet. 4. Ταξινόμησε τους κανόνες με βάση την εξειδίκευσή τους. Π.χ., ένας κανόνας για το P είναι πιό γενικός από τον κανόνα για το LI P. Ο βαθμός εξειδίκευσης είναι ανάλογος με το πλήθος των ιδιοχαρακτηριστικών ID, CLASS, και των ονομάτων στοιχείων που εμπλέκονται στον επιλογέα. 5. Ταξινόμησε τους κανόνες με βάση την σειρά ορισμού τους οι τελευταίοι στο stylesheet επικρατούν των πρώτων Σειρά εμφάνισης (source order) If two declarations affect the same element and have the same importance and the same specificity, the final distinguishing mark is the source order. The declaration that appears later in the style sheet wins. If you have a single, external style sheet, then the declarations at the end of the file will override those that occur earlier in the file if there s a conflict. The conflicting declarations could also occur in different style sheets. In that case, the order in which the style sheets are linked, included, or imported controls which declaration will be applied. Long form values can be used to override specific parts of shorthand values. For example, you can specify border width, color, and style using the following declaration: border: 1px black solid; Then later on in the style sheet you can specify the following to only CSS3 override border-width: border-width: 2px; CSS3 is a new spec that adds new features to CSS to provide solutions to problems and implementations of common design patterns that previously were only available via hacks or scripting. Work started on the CSS3 specification in 1998, yet only in the last couple of years (circa 2012) have any of the parts of CSS3 been brought close to completion, or seen support in browsers. However, many parts of CSS3 now work across most of the modern set of browsers. CSS3 is modular, meaning that the different parts of the specification are organized into modules of related functionality, so that they are easier to work on and learn