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

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Γλώσσες'Σήμανσης' '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 επιτρέπει την επιλογή με βάση χαρακτηριστικά συγκεκριμένων τμημάτων των τιμών ιδιοχαρακτηριστικών, π.χ. καταλήξεις ονομάτων αρχείων. Βλ. 48

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 κλειδολέξεις χρωμάτων (http://reference.sitepoint.com/ 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

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

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες

Διαβάστε περισσότερα

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

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

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

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 19/5/2007

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 19/5/2007 Οδηγίες: Να απαντηθούν όλες οι ερωτήσεις. Αν κάπου κάνετε κάποιες υποθέσεις να αναφερθούν στη σχετική ερώτηση. Όλα τα αρχεία που αναφέρονται στα προβλήματα βρίσκονται στον ίδιο φάκελο με το εκτελέσιμο

Διαβάστε περισσότερα

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

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

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

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Εργαστήριο 9. Styling with Javascript

Εργαστήριο 9. Styling with Javascript Εργαστήριο 9 Styling with Javascript Pimp my Text with Javascript Today you'll write a page where the user can type text into a box, and by clicking on UI controls, the user can "pimp out" the text by

Διαβάστε περισσότερα

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 6/5/2006

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 6/5/2006 Οδηγίες: Να απαντηθούν όλες οι ερωτήσεις. Ολοι οι αριθμοί που αναφέρονται σε όλα τα ερωτήματα είναι μικρότεροι το 1000 εκτός αν ορίζεται διαφορετικά στη διατύπωση του προβλήματος. Διάρκεια: 3,5 ώρες Καλή

Διαβάστε περισσότερα

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

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS

Διαβάστε περισσότερα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

2 Composition. Invertible Mappings

2 Composition. Invertible Mappings Arkansas Tech University MATH 4033: Elementary Modern Algebra Dr. Marcel B. Finan Composition. Invertible Mappings In this section we discuss two procedures for creating new mappings from old ones, namely,

Διαβάστε περισσότερα

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ - ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ ΕΠΛ 133: ΑΝΤΙΚΕΙΜΕΝΟΣΤΡΕΦΗΣ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΕΡΓΑΣΤΗΡΙΟ 3 Javadoc Tutorial

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ - ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ ΕΠΛ 133: ΑΝΤΙΚΕΙΜΕΝΟΣΤΡΕΦΗΣ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΕΡΓΑΣΤΗΡΙΟ 3 Javadoc Tutorial ΕΡΓΑΣΤΗΡΙΟ 3 Javadoc Tutorial Introduction Το Javadoc είναι ένα εργαλείο που παράγει αρχεία html (παρόμοιο με τις σελίδες στη διεύθυνση http://docs.oracle.com/javase/8/docs/api/index.html) από τα σχόλια

Διαβάστε περισσότερα

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ Α. Διαβάστε τις ειδήσεις και εν συνεχεία σημειώστε. Οπτική γωνία είδησης 1:.

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ Α.  Διαβάστε τις ειδήσεις και εν συνεχεία σημειώστε. Οπτική γωνία είδησης 1:. ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ Α 2 ειδήσεις από ελληνικές εφημερίδες: 1. Τα Νέα, 13-4-2010, Σε ανθρώπινο λάθος αποδίδουν τη συντριβή του αεροσκάφους, http://www.tanea.gr/default.asp?pid=2&artid=4569526&ct=2 2. Τα Νέα,

Διαβάστε περισσότερα

department listing department name αχχουντσ ϕανε βαλικτ δδσϕηασδδη σδηφγ ασκϕηλκ τεχηνιχαλ αλαν ϕουν διξ τεχηνιχαλ ϕοην µαριανι

department listing department name αχχουντσ ϕανε βαλικτ δδσϕηασδδη σδηφγ ασκϕηλκ τεχηνιχαλ αλαν ϕουν διξ τεχηνιχαλ ϕοην µαριανι She selects the option. Jenny starts with the al listing. This has employees listed within She drills down through the employee. The inferred ER sttricture relates this to the redcords in the databasee

Διαβάστε περισσότερα

Right Rear Door. Let's now finish the door hinge saga with the right rear door

Right Rear Door. Let's now finish the door hinge saga with the right rear door Right Rear Door Let's now finish the door hinge saga with the right rear door You may have been already guessed my steps, so there is not much to describe in detail. Old upper one file:///c /Documents

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

EE512: Error Control Coding

EE512: Error Control Coding EE512: Error Control Coding Solution for Assignment on Finite Fields February 16, 2007 1. (a) Addition and Multiplication tables for GF (5) and GF (7) are shown in Tables 1 and 2. + 0 1 2 3 4 0 0 1 2 3

Διαβάστε περισσότερα

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

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box

Διαβάστε περισσότερα

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

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

ΚΥΠΡΙΑΚΟΣ ΣΥΝΔΕΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY 21 ος ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Δεύτερος Γύρος - 30 Μαρτίου 2011

ΚΥΠΡΙΑΚΟΣ ΣΥΝΔΕΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY 21 ος ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Δεύτερος Γύρος - 30 Μαρτίου 2011 Διάρκεια Διαγωνισμού: 3 ώρες Απαντήστε όλες τις ερωτήσεις Μέγιστο Βάρος (20 Μονάδες) Δίνεται ένα σύνολο από N σφαιρίδια τα οποία δεν έχουν όλα το ίδιο βάρος μεταξύ τους και ένα κουτί που αντέχει μέχρι

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

Physical DB Design. B-Trees Index files can become quite large for large main files Indices on index files are possible.

Physical DB Design. B-Trees Index files can become quite large for large main files Indices on index files are possible. B-Trees Index files can become quite large for large main files Indices on index files are possible 3 rd -level index 2 nd -level index 1 st -level index Main file 1 The 1 st -level index consists of pairs

Διαβάστε περισσότερα

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ. του Γεράσιμου Τουλιάτου ΑΜ: 697

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ. του Γεράσιμου Τουλιάτου ΑΜ: 697 ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΣΤΑ ΠΛΑΙΣΙΑ ΤΟΥ ΜΕΤΑΠΤΥΧΙΑΚΟΥ ΔΙΠΛΩΜΑΤΟΣ ΕΙΔΙΚΕΥΣΗΣ ΕΠΙΣΤΗΜΗ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑ ΤΩΝ ΥΠΟΛΟΓΙΣΤΩΝ του Γεράσιμου Τουλιάτου

Διαβάστε περισσότερα

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 11/3/2006

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 11/3/2006 ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 11/3/26 Οδηγίες: Να απαντηθούν όλες οι ερωτήσεις. Ολοι οι αριθμοί που αναφέρονται σε όλα τα ερωτήματα μικρότεροι το 1 εκτός αν ορίζεται διαφορετικά στη διατύπωση

Διαβάστε περισσότερα

Homework 3 Solutions

Homework 3 Solutions Homework 3 Solutions Igor Yanovsky (Math 151A TA) Problem 1: Compute the absolute error and relative error in approximations of p by p. (Use calculator!) a) p π, p 22/7; b) p π, p 3.141. Solution: For

Διαβάστε περισσότερα

CHAPTER 25 SOLVING EQUATIONS BY ITERATIVE METHODS

CHAPTER 25 SOLVING EQUATIONS BY ITERATIVE METHODS CHAPTER 5 SOLVING EQUATIONS BY ITERATIVE METHODS EXERCISE 104 Page 8 1. Find the positive root of the equation x + 3x 5 = 0, correct to 3 significant figures, using the method of bisection. Let f(x) =

Διαβάστε περισσότερα

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

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΤΜΗΜΑ ΝΟΣΗΛΕΥΤΙΚΗΣ

ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΤΜΗΜΑ ΝΟΣΗΛΕΥΤΙΚΗΣ ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΤΜΗΜΑ ΝΟΣΗΛΕΥΤΙΚΗΣ ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ ΨΥΧΟΛΟΓΙΚΕΣ ΕΠΙΠΤΩΣΕΙΣ ΣΕ ΓΥΝΑΙΚΕΣ ΜΕΤΑ ΑΠΟ ΜΑΣΤΕΚΤΟΜΗ ΓΕΩΡΓΙΑ ΤΡΙΣΟΚΚΑ Λευκωσία 2012 ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΣΧΟΛΗ ΕΠΙΣΤΗΜΩΝ

Διαβάστε περισσότερα

EPL 603 TOPICS IN SOFTWARE ENGINEERING. Lab 5: Component Adaptation Environment (COPE)

EPL 603 TOPICS IN SOFTWARE ENGINEERING. Lab 5: Component Adaptation Environment (COPE) EPL 603 TOPICS IN SOFTWARE ENGINEERING Lab 5: Component Adaptation Environment (COPE) Performing Static Analysis 1 Class Name: The fully qualified name of the specific class Type: The type of the class

Διαβάστε περισσότερα

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

Βασικά στοιχεία του CSS Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr

Γαβαλάς Δαμιανός dgavalas@aegean.gr Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Κειµενογράφοι ετικετών

Κειµενογράφοι ετικετών ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε

Διαβάστε περισσότερα

Chapter 2 * * * * * * * Introduction to Verbs * * * * * * *

Chapter 2 * * * * * * * Introduction to Verbs * * * * * * * Chapter 2 * * * * * * * Introduction to Verbs * * * * * * * In the first chapter, we practiced the skill of reading Greek words. Now we want to try to understand some parts of what we read. There are a

Διαβάστε περισσότερα

Code Breaker. TEACHER s NOTES

Code Breaker. TEACHER s NOTES TEACHER s NOTES Time: 50 minutes Learning Outcomes: To relate the genetic code to the assembly of proteins To summarize factors that lead to different types of mutations To distinguish among positive,

Διαβάστε περισσότερα

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 24/3/2007

ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 24/3/2007 Οδηγίες: Να απαντηθούν όλες οι ερωτήσεις. Όλοι οι αριθμοί που αναφέρονται σε όλα τα ερωτήματα μικρότεροι του 10000 εκτός αν ορίζεται διαφορετικά στη διατύπωση του προβλήματος. Αν κάπου κάνετε κάποιες υποθέσεις

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

Math 6 SL Probability Distributions Practice Test Mark Scheme

Math 6 SL Probability Distributions Practice Test Mark Scheme Math 6 SL Probability Distributions Practice Test Mark Scheme. (a) Note: Award A for vertical line to right of mean, A for shading to right of their vertical line. AA N (b) evidence of recognizing symmetry

Διαβάστε περισσότερα

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ. Ψηφιακή Οικονομία. Διάλεξη 7η: Consumer Behavior Mαρίνα Μπιτσάκη Τμήμα Επιστήμης Υπολογιστών

ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ. Ψηφιακή Οικονομία. Διάλεξη 7η: Consumer Behavior Mαρίνα Μπιτσάκη Τμήμα Επιστήμης Υπολογιστών ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ Ψηφιακή Οικονομία Διάλεξη 7η: Consumer Behavior Mαρίνα Μπιτσάκη Τμήμα Επιστήμης Υπολογιστών Τέλος Ενότητας Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Adjectives. Describing the Qualities of Things. A lesson for the Paideia web-app Ian W. Scott, 2015

Adjectives. Describing the Qualities of Things. A lesson for the Paideia web-app Ian W. Scott, 2015 Adjectives Describing the Qualities of Things A lesson for the Paideia web-app Ian W. Scott, 2015 Getting Started with Adjectives It's hard to say much using only nouns and pronouns Simon is a father.

Διαβάστε περισσότερα

Διάλεξη 6η CSS Advanced

Διάλεξη 6η CSS Advanced Διάλεξη 6η CSS Advanced Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e. (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Block & Inline elements Advanced

Διαβάστε περισσότερα

Σημασιολογικός Ιστός (Semantic Web) - XML

Σημασιολογικός Ιστός (Semantic Web) - XML Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 22/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων

Διαβάστε περισσότερα

How to register an account with the Hellenic Community of Sheffield.

How to register an account with the Hellenic Community of Sheffield. How to register an account with the Hellenic Community of Sheffield. (1) EN: Go to address GR: Πηγαίνετε στη διεύθυνση: http://www.helleniccommunityofsheffield.com (2) EN: At the bottom of the page, click

Διαβάστε περισσότερα

14 Lesson 2: The Omega Verb - Present Tense

14 Lesson 2: The Omega Verb - Present Tense Lesson 2: The Omega Verb - Present Tense Day one I. Word Study and Grammar 1. Most Greek verbs end in in the first person singular. 2. The present tense is formed by adding endings to the present stem.

Διαβάστε περισσότερα

Paper Reference. Paper Reference(s) 1776/04 Edexcel GCSE Modern Greek Paper 4 Writing. Thursday 21 May 2009 Afternoon Time: 1 hour 15 minutes

Paper Reference. Paper Reference(s) 1776/04 Edexcel GCSE Modern Greek Paper 4 Writing. Thursday 21 May 2009 Afternoon Time: 1 hour 15 minutes Centre No. Candidate No. Paper Reference(s) 1776/04 Edexcel GCSE Modern Greek Paper 4 Writing Thursday 21 May 2009 Afternoon Time: 1 hour 15 minutes Materials required for examination Nil Paper Reference

Διαβάστε περισσότερα

Section 1: Listening and responding. Presenter: Niki Farfara MGTAV VCE Seminar 7 August 2016

Section 1: Listening and responding. Presenter: Niki Farfara MGTAV VCE Seminar 7 August 2016 Section 1: Listening and responding Presenter: Niki Farfara MGTAV VCE Seminar 7 August 2016 Section 1: Listening and responding Section 1: Listening and Responding/ Aκουστική εξέταση Στο πρώτο μέρος της

Διαβάστε περισσότερα

Υλοποίηση Δικτυακών Υποδομών και Υπηρεσιών: OSPF Cost

Υλοποίηση Δικτυακών Υποδομών και Υπηρεσιών: OSPF Cost Υλοποίηση Δικτυακών Υποδομών και Υπηρεσιών: OSPF Cost Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Basic OSPF Configuration Υλοποίηση Δικτυακών Υποδομών

Διαβάστε περισσότερα

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

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

Door Hinge replacement (Rear Left Door)

Door Hinge replacement (Rear Left Door) Door Hinge replacement (Rear Left Door) We will continue the previous article by replacing the hinges of the rear left hand side door. I will use again the same procedure and means I employed during the

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Main source: "Discrete-time systems and computer control" by Α. ΣΚΟΔΡΑΣ ΨΗΦΙΑΚΟΣ ΕΛΕΓΧΟΣ ΔΙΑΛΕΞΗ 4 ΔΙΑΦΑΝΕΙΑ 1

Main source: Discrete-time systems and computer control by Α. ΣΚΟΔΡΑΣ ΨΗΦΙΑΚΟΣ ΕΛΕΓΧΟΣ ΔΙΑΛΕΞΗ 4 ΔΙΑΦΑΝΕΙΑ 1 Main source: "Discrete-time systems and computer control" by Α. ΣΚΟΔΡΑΣ ΨΗΦΙΑΚΟΣ ΕΛΕΓΧΟΣ ΔΙΑΛΕΞΗ 4 ΔΙΑΦΑΝΕΙΑ 1 A Brief History of Sampling Research 1915 - Edmund Taylor Whittaker (1873-1956) devised a

Διαβάστε περισσότερα

4.6 Autoregressive Moving Average Model ARMA(1,1)

4.6 Autoregressive Moving Average Model ARMA(1,1) 84 CHAPTER 4. STATIONARY TS MODELS 4.6 Autoregressive Moving Average Model ARMA(,) This section is an introduction to a wide class of models ARMA(p,q) which we will consider in more detail later in this

Διαβάστε περισσότερα

Advanced Subsidiary Unit 1: Understanding and Written Response

Advanced Subsidiary Unit 1: Understanding and Written Response Write your name here Surname Other names Edexcel GE entre Number andidate Number Greek dvanced Subsidiary Unit 1: Understanding and Written Response Thursday 16 May 2013 Morning Time: 2 hours 45 minutes

Διαβάστε περισσότερα

Démographie spatiale/spatial Demography

Démographie spatiale/spatial Demography ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΙΑΣ Démographie spatiale/spatial Demography Session 1: Introduction to spatial demography Basic concepts Michail Agorastakis Department of Planning & Regional Development Άδειες Χρήσης

Διαβάστε περισσότερα

ω ω ω ω ω ω+2 ω ω+2 + ω ω ω ω+2 + ω ω+1 ω ω+2 2 ω ω ω ω ω ω ω ω+1 ω ω2 ω ω2 + ω ω ω2 + ω ω ω ω2 + ω ω+1 ω ω2 + ω ω+1 + ω ω ω ω2 + ω

ω ω ω ω ω ω+2 ω ω+2 + ω ω ω ω+2 + ω ω+1 ω ω+2 2 ω ω ω ω ω ω ω ω+1 ω ω2 ω ω2 + ω ω ω2 + ω ω ω ω2 + ω ω+1 ω ω2 + ω ω+1 + ω ω ω ω2 + ω 0 1 2 3 4 5 6 ω ω + 1 ω + 2 ω + 3 ω + 4 ω2 ω2 + 1 ω2 + 2 ω2 + 3 ω3 ω3 + 1 ω3 + 2 ω4 ω4 + 1 ω5 ω 2 ω 2 + 1 ω 2 + 2 ω 2 + ω ω 2 + ω + 1 ω 2 + ω2 ω 2 2 ω 2 2 + 1 ω 2 2 + ω ω 2 3 ω 3 ω 3 + 1 ω 3 + ω ω 3 +

Διαβάστε περισσότερα

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

ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)

Διαβάστε περισσότερα

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

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:

Διαβάστε περισσότερα

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000 NUTWBCAM

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000 NUTWBCAM NUTWBCAM A.S. DRIGAS Applied Technologies Department NCSR DEMOKRITOS Ag. Paraskevi GREECE dr@imm.demokritos.gr http://imm.demokritos.gr Το NutWBCam είναι ένα RealVideo πρόγραµµα που σας δίνει τη δυνατότητα

Διαβάστε περισσότερα

SPEEDO AQUABEAT. Specially Designed for Aquatic Athletes and Active People

SPEEDO AQUABEAT. Specially Designed for Aquatic Athletes and Active People SPEEDO AQUABEAT TM Specially Designed for Aquatic Athletes and Active People 1 2 Decrease Volume Increase Volume Reset EarphonesUSBJack Power Off / Rewind Power On / Fast Forward Goggle clip LED Status

Διαβάστε περισσότερα

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),

Διαβάστε περισσότερα

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

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας

Διαβάστε περισσότερα

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

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Συστήματα Διαχείρισης Βάσεων Δεδομένων

Συστήματα Διαχείρισης Βάσεων Δεδομένων ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ Συστήματα Διαχείρισης Βάσεων Δεδομένων Φροντιστήριο 9: Transactions - part 1 Δημήτρης Πλεξουσάκης Τμήμα Επιστήμης Υπολογιστών Tutorial on Undo, Redo and Undo/Redo

Διαβάστε περισσότερα

Εγκατάσταση λογισμικού και αναβάθμιση συσκευής Device software installation and software upgrade

Εγκατάσταση λογισμικού και αναβάθμιση συσκευής Device software installation and software upgrade Για να ελέγξετε το λογισμικό που έχει τώρα η συσκευή κάντε κλικ Menu > Options > Device > About Device Versions. Στο πιο κάτω παράδειγμα η συσκευή έχει έκδοση λογισμικού 6.0.0.546 με πλατφόρμα 6.6.0.207.

Διαβάστε περισσότερα

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

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

TaxiCounter Android App. Περδίκης Ανδρέας ME10069

TaxiCounter Android App. Περδίκης Ανδρέας ME10069 TaxiCounter Android App Περδίκης Ανδρέας ME10069 Content Android Operating System Development Tools Taxi Counter Algorithm Design Development Process Android Operating System Android is a Linux-based operating

Διαβάστε περισσότερα

Μηχανική Μάθηση Hypothesis Testing

Μηχανική Μάθηση Hypothesis Testing ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ Μηχανική Μάθηση Hypothesis Testing Γιώργος Μπορμπουδάκης Τμήμα Επιστήμης Υπολογιστών Procedure 1. Form the null (H 0 ) and alternative (H 1 ) hypothesis 2. Consider

Διαβάστε περισσότερα

Διάλεξη 4η CSS intermediate

Διάλεξη 4η CSS intermediate Διάλεξη 4η CSS intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Κλάσεις & Ids Εμφώλευση &

Διαβάστε περισσότερα

Section 9.2 Polar Equations and Graphs

Section 9.2 Polar Equations and Graphs 180 Section 9. Polar Equations and Graphs In this section, we will be graphing polar equations on a polar grid. In the first few examples, we will write the polar equation in rectangular form to help identify

Διαβάστε περισσότερα

Συντακτικές λειτουργίες

Συντακτικές λειτουργίες 2 Συντακτικές λειτουργίες (Syntactic functions) A. Πτώσεις και συντακτικές λειτουργίες (Cases and syntactic functions) The subject can be identified by asking ποιος (who) or τι (what) the sentence is about.

Διαβάστε περισσότερα

ΕΠΙΧΕΙΡΗΣΙΑΚΗ ΑΛΛΗΛΟΓΡΑΦΙΑ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑ ΣΤΗΝ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ

ΕΠΙΧΕΙΡΗΣΙΑΚΗ ΑΛΛΗΛΟΓΡΑΦΙΑ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑ ΣΤΗΝ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ Ανοικτά Ακαδημαϊκά Μαθήματα στο ΤΕΙ Ιονίων Νήσων ΕΠΙΧΕΙΡΗΣΙΑΚΗ ΑΛΛΗΛΟΓΡΑΦΙΑ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑ ΣΤΗΝ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ Ενότητα 4: English a Language of Economy Το περιεχόμενο του μαθήματος διατίθεται με άδεια

Διαβάστε περισσότερα

Πώς μπορεί κανείς να έχει έναν διερμηνέα κατά την επίσκεψή του στον Οικογενειακό του Γιατρό στο Ίσλινγκτον Getting an interpreter when you visit your

Πώς μπορεί κανείς να έχει έναν διερμηνέα κατά την επίσκεψή του στον Οικογενειακό του Γιατρό στο Ίσλινγκτον Getting an interpreter when you visit your Πώς μπορεί κανείς να έχει έναν διερμηνέα κατά την επίσκεψή του στον Οικογενειακό του Γιατρό στο Ίσλινγκτον Getting an interpreter when you visit your GP practice in Islington Σε όλα τα Ιατρεία Οικογενειακού

Διαβάστε περισσότερα

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

Εκπαιδευτικά Περιβάλλοντα Διαδικτύου ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

Διαβάστε περισσότερα

Στο εστιατόριο «ToDokimasesPrinToBgaleisStonKosmo?» έξω από τους δακτυλίους του Κρόνου, οι παραγγελίες γίνονται ηλεκτρονικά.

Στο εστιατόριο «ToDokimasesPrinToBgaleisStonKosmo?» έξω από τους δακτυλίους του Κρόνου, οι παραγγελίες γίνονται ηλεκτρονικά. Διαστημικό εστιατόριο του (Μ)ΑστροΈκτορα Στο εστιατόριο «ToDokimasesPrinToBgaleisStonKosmo?» έξω από τους δακτυλίους του Κρόνου, οι παραγγελίες γίνονται ηλεκτρονικά. Μόλις μια παρέα πελατών κάτσει σε ένα

Διαβάστε περισσότερα

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

Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε

Διαβάστε περισσότερα

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

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Terabyte Technology Ltd

Terabyte Technology Ltd Terabyte Technology Ltd is a Web and Graphic design company in Limassol with dedicated staff who will endeavour to deliver the highest quality of work in our field. We offer a range of services such as

Διαβάστε περισσότερα

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

Σπουδές 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

Διαβάστε περισσότερα

(1) Describe the process by which mercury atoms become excited in a fluorescent tube (3)

(1) Describe the process by which mercury atoms become excited in a fluorescent tube (3) Q1. (a) A fluorescent tube is filled with mercury vapour at low pressure. In order to emit electromagnetic radiation the mercury atoms must first be excited. (i) What is meant by an excited atom? (1) (ii)

Διαβάστε περισσότερα

VBA ΣΤΟ WORD. 1. Συχνά, όταν ήθελα να δώσω ένα φυλλάδιο εργασίας με ασκήσεις στους μαθητές έκανα το εξής: Version 25-7-2015 ΗΜΙΤΕΛΗΣ!!!!

VBA ΣΤΟ WORD. 1. Συχνά, όταν ήθελα να δώσω ένα φυλλάδιο εργασίας με ασκήσεις στους μαθητές έκανα το εξής: Version 25-7-2015 ΗΜΙΤΕΛΗΣ!!!! VBA ΣΤΟ WORD Version 25-7-2015 ΗΜΙΤΕΛΗΣ!!!! Μου παρουσιάστηκαν δύο θέματα. 1. Συχνά, όταν ήθελα να δώσω ένα φυλλάδιο εργασίας με ασκήσεις στους μαθητές έκανα το εξής: Εγραφα σε ένα αρχείο του Word τις

Διαβάστε περισσότερα

Ενότητα 2 Εργαλεία για την αναζήτηση εργασίας: Το Βιογραφικό Σημείωμα

Ενότητα 2 Εργαλεία για την αναζήτηση εργασίας: Το Βιογραφικό Σημείωμα CURRICULUM VITAE Ενότητα 2 Εργαλεία για την αναζήτηση εργασίας: Το Βιογραφικό Σημείωμα 1.What is it? Τι είναι αυτό 2.Chronological example of a CV Χρονολογικό Παράδειγμα Βιογραφικού 3.Steps to send your

Διαβάστε περισσότερα

1) Abstract (To be organized as: background, aim, workpackages, expected results) (300 words max) Το όριο λέξεων θα είναι ελαστικό.

1) Abstract (To be organized as: background, aim, workpackages, expected results) (300 words max) Το όριο λέξεων θα είναι ελαστικό. UΓενικές Επισημάνσεις 1. Παρακάτω θα βρείτε απαντήσεις του Υπουργείου, σχετικά με τη συμπλήρωση της ηλεκτρονικής φόρμας. Διευκρινίζεται ότι στα περισσότερα θέματα οι απαντήσεις ήταν προφορικές (τηλεφωνικά),

Διαβάστε περισσότερα

Δημιουργία Λογαριασμού Διαχείρισης Business Telephony Create a Management Account for Business Telephony

Δημιουργία Λογαριασμού Διαχείρισης Business Telephony Create a Management Account for Business Telephony Δημιουργία Λογαριασμού Διαχείρισης Business Telephony Create a Management Account for Business Telephony Ελληνικά Ι English 1/7 Δημιουργία Λογαριασμού Διαχείρισης Επιχειρηματικής Τηλεφωνίας μέσω της ιστοσελίδας

Διαβάστε περισσότερα

TMA4115 Matematikk 3

TMA4115 Matematikk 3 TMA4115 Matematikk 3 Andrew Stacey Norges Teknisk-Naturvitenskapelige Universitet Trondheim Spring 2010 Lecture 12: Mathematics Marvellous Matrices Andrew Stacey Norges Teknisk-Naturvitenskapelige Universitet

Διαβάστε περισσότερα

Web 論 文. Performance Evaluation and Renewal of Department s Official Web Site. Akira TAKAHASHI and Kenji KAMIMURA

Web 論 文. Performance Evaluation and Renewal of Department s Official Web Site. Akira TAKAHASHI and Kenji KAMIMURA 長 岡 工 業 高 等 専 門 学 校 研 究 紀 要 第 49 巻 (2013) 論 文 Web Department of Electronic Control Engineering, Nagaoka National College of Technology Performance Evaluation and Renewal of Department s Official Web Site

Διαβάστε περισσότερα

Objectives-Στόχοι: -Helping your Child become a fantastic language learner «Βοηθώντας το παιδί σας να γίνει εξαιρετικό στην εκμάθηση γλωσσών» 6/2/2014

Objectives-Στόχοι: -Helping your Child become a fantastic language learner «Βοηθώντας το παιδί σας να γίνει εξαιρετικό στην εκμάθηση γλωσσών» 6/2/2014 -Helping your Child become a fantastic language learner «Βοηθώντας το παιδί σας να γίνει εξαιρετικό στην εκμάθηση γλωσσών» Dr Caroline Linse Queens University, Belfast, Northern Ireland Objectives-Στόχοι:

Διαβάστε περισσότερα

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική

Διαβάστε περισσότερα

Στοιχεία ορισμού θέσης (Positioning Elements)

Στοιχεία ορισμού θέσης (Positioning Elements) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS

Διαβάστε περισσότερα

ΠΑΝΔΠΙΣΗΜΙΟ ΜΑΚΔΓΟΝΙΑ ΠΡΟΓΡΑΜΜΑ ΜΔΣΑΠΣΤΥΙΑΚΧΝ ΠΟΤΓΧΝ ΣΜΗΜΑΣΟ ΔΦΑΡΜΟΜΔΝΗ ΠΛΗΡΟΦΟΡΙΚΗ

ΠΑΝΔΠΙΣΗΜΙΟ ΜΑΚΔΓΟΝΙΑ ΠΡΟΓΡΑΜΜΑ ΜΔΣΑΠΣΤΥΙΑΚΧΝ ΠΟΤΓΧΝ ΣΜΗΜΑΣΟ ΔΦΑΡΜΟΜΔΝΗ ΠΛΗΡΟΦΟΡΙΚΗ ΠΑΝΔΠΙΣΗΜΙΟ ΜΑΚΔΓΟΝΙΑ ΠΡΟΓΡΑΜΜΑ ΜΔΣΑΠΣΤΥΙΑΚΧΝ ΠΟΤΓΧΝ ΣΜΗΜΑΣΟ ΔΦΑΡΜΟΜΔΝΗ ΠΛΗΡΟΦΟΡΙΚΗ ΑΝΑΠΣΤΞΗ ΓΤΝΑΜΙΚΗ ΙΣΟΔΛΙΓΑ ΓΙΑ ΣΟ ΓΔΝΙΚΟ ΚΑΣΑΣΗΜΑ ΚΡΑΣΗΗ ΓΡΔΒΔΝΧΝ ΜΔ ΣΗ ΒΟΗΘΔΙΑ PHP MYSQL Γηπισκαηηθή Δξγαζία ηνπ Υξήζηνπ

Διαβάστε περισσότερα

Potential Dividers. 46 minutes. 46 marks. Page 1 of 11

Potential Dividers. 46 minutes. 46 marks. Page 1 of 11 Potential Dividers 46 minutes 46 marks Page 1 of 11 Q1. In the circuit shown in the figure below, the battery, of negligible internal resistance, has an emf of 30 V. The pd across the lamp is 6.0 V and

Διαβάστε περισσότερα

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

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΥΠΟΛΟΓΙΣΤΩΝ ΤΟΜΕΑΣ ΣΥΣΤΗΜΑΤΩΝ ΗΛΕΚΤΡΙΚΗΣ ΕΝΕΡΓΕΙΑΣ ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΥΠΟΛΟΓΙΣΤΩΝ ΤΟΜΕΑΣ ΣΥΣΤΗΜΑΤΩΝ ΗΛΕΚΤΡΙΚΗΣ ΕΝΕΡΓΕΙΑΣ ιπλωµατική Εργασία του φοιτητή του τµήµατος Ηλεκτρολόγων Μηχανικών και Τεχνολογίας Ηλεκτρονικών

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

Λέξεις, φράσεις και προτάσεις

Λέξεις, φράσεις και προτάσεις 1 Λέξεις, φράσεις και προτάσεις (Words, phrases and clauses) The Greek language, like all human languages, has a Lexicon and a Grammar that are used to create sentences. The Lexicon consists of the words

Διαβάστε περισσότερα

ΕΙΣΑΓΩΓΗ ΣΤΗ ΣΤΑΤΙΣΤΙΚΗ ΑΝΑΛΥΣΗ

ΕΙΣΑΓΩΓΗ ΣΤΗ ΣΤΑΤΙΣΤΙΚΗ ΑΝΑΛΥΣΗ ΕΙΣΑΓΩΓΗ ΣΤΗ ΣΤΑΤΙΣΤΙΚΗ ΑΝΑΛΥΣΗ ΕΛΕΝΑ ΦΛΟΚΑ Επίκουρος Καθηγήτρια Τµήµα Φυσικής, Τοµέας Φυσικής Περιβάλλοντος- Μετεωρολογίας ΓΕΝΙΚΟΙ ΟΡΙΣΜΟΙ Πληθυσµός Σύνολο ατόµων ή αντικειµένων στα οποία αναφέρονται

Διαβάστε περισσότερα

ΕΠΙΧΕΙΡΗΣΙΑΚΗ ΑΛΛΗΛΟΓΡΑΦΙΑ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑ ΣΤΗΝ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ

ΕΠΙΧΕΙΡΗΣΙΑΚΗ ΑΛΛΗΛΟΓΡΑΦΙΑ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑ ΣΤΗΝ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ Ανοικτά Ακαδημαϊκά Μαθήματα στο ΤΕΙ Ιονίων Νήσων ΕΠΙΧΕΙΡΗΣΙΑΚΗ ΑΛΛΗΛΟΓΡΑΦΙΑ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑ ΣΤΗΝ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ Ενότητα 1: Elements of Syntactic Structure Το περιεχόμενο του μαθήματος διατίθεται με άδεια

Διαβάστε περισσότερα

ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ ΣΕ ΕΙΔΙΚΑ ΘΕΜΑΤΑ ΔΙΕΘΝΩΝ ΣΧΕΣΕΩΝ & ΟΙΚΟΝΟΜΙΑΣ

ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ ΣΕ ΕΙΔΙΚΑ ΘΕΜΑΤΑ ΔΙΕΘΝΩΝ ΣΧΕΣΕΩΝ & ΟΙΚΟΝΟΜΙΑΣ ΑΓΓΛΙΚΗ ΓΛΩΣΣΑ ΣΕ ΕΙΔΙΚΑ ΘΕΜΑΤΑ ΔΙΕΘΝΩΝ ΣΧΕΣΕΩΝ & ΟΙΚΟΝΟΜΙΑΣ Ενότητα 1β: Principles of PS Ιφιγένεια Μαχίλη Τμήμα Οικονομικών Επιστημών Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης

Διαβάστε περισσότερα

BECAUSE WE REALLY WANT TO KNOW WHAT YOU THINK ABOUT SCHOOL AND YOUR GARDEN. Fairly true If I decide to learn something hard, I can.

BECAUSE WE REALLY WANT TO KNOW WHAT YOU THINK ABOUT SCHOOL AND YOUR GARDEN. Fairly true If I decide to learn something hard, I can. BECAUSE WE REALLY WANT TO KNOW WHAT YOU THINK ABOUT SCHOOL AND YOUR GARDEN Name GRADE Science Teacher A. What do I think about School? bit I try hard to do well in school. I look forward to coming to school.

Διαβάστε περισσότερα

Calculating the propagation delay of coaxial cable

Calculating the propagation delay of coaxial cable Your source for quality GNSS Networking Solutions and Design Services! Page 1 of 5 Calculating the propagation delay of coaxial cable The delay of a cable or velocity factor is determined by the dielectric

Διαβάστε περισσότερα