3 Μ. Δικαιάκος, EΠΛ425. n Σήμανση εγγράφων (markup): η εισαγωγή και παράθεση στο. n Αφορούν στην περιγραφή της δομής (structure), της σημασιολογίας

Transcript

1 Ποιά είναι η λογική δομή ενός εγγράφου; Πώς διαφοροποιείται η λογική δομή, από τη σημασιολογία και την παρουσίαση ενός εγγράφου; Γλώσσες Σήμανσης Markup Laguages Ποιά η χρήση των οριοθετών σήμανσης (σημαντήρων); Τι είναι το DTD και πώς συντάσσεται; Ποιά η διαφορά SGML και HTML; Ποιά είναι πιο γενική; Tι είναι το Ope Web Platform; Ποιά είναι η δομή ενός HTML αρχείου; Τι σημαίνει φώλιασμα στοιχείων HTML και πώς ισοδυναμεί με την ιεραρχική οργάνωσης αρχείων; Tι είναι το DOM και σε τι χρησιμεύει; Ανασκόπηση «Περιεχόμενο» Εγγράφων Γλώσσες Σήμανσης Εισαγωγή στην HTML Βασικές έννοιες Σύνταξη Στοιχείων HTML Δομή αρχείων HTML Μοντέλο Αντικειμένου Εγγράφων (DOM) Σημασιολογία Καλές Πρακτικές Έγγραφα - Κείμενα (documets) χαρακτηρίζονται από: το Περιεχόμενο τους (cotet) - πληροφορίες τη Λογική δομή τους (Ιεραρχική-δενδρική): σύνολο από λογικά στοιχεία (elemets, logical uits), ιεραρχικά οργανωμένα σε ένα «δένδρο εγγράφου» (documet tree). book author headig chapter Τυπολογία HTML εγγράφων -Doctypes Εισαγωγή στους Επάλληλους Οδηγούς Τεχνοτροπίας - Cascadig Style Sheets headig paragraph sectio 3 headig paragraph paragraph figure 4 Περιεχόμενο και Παρουσίαση Εγγράφων Σήμανση Εγγράφων (documet markup) Περιεχόμενο Εγγράφου: πληροφοριακό περιεχόμενο, οργανωμένο με βάση κάποια λογική δομή Η λογική δομή καθορίζεται από το είδος του κειμένου (βιβλίο, άρθρο, περιοδικό κλπ) Παρουσίαση Εγγράφου: ο τρόπος της τεχνοτροπίας παρουσίασης (style)-στοιχειοθεσίας (formattig) ενός κειμένου, σε σελίδες χαρτιού, στην οθόνη ενός υπολογιστή, ή με οποιονδήποτε άλλο τρόπο. Συνήθως υπάρχουν κανόνες για το πώς θα παρουσιαστεί ένα κείμενο, ανεξάρτητοι από το περιεχόμενό του. Π.χ.: γραμματοσειρά αρίθμηση παραγράφων στοιχειοθεσία παραγράφων θέση υποσημειώσεων 5 Σήμανση εγγράφων (markup): η εισαγωγή και παράθεση στο περιεχομένο ενός εγγράφου μετα-πληροφοριών που αφορούν στο έγγραφο και στο περιεχόμενό του. Οι μεταπληροφορίες αυτές: Αφορούν στην περιγραφή της δομής (structure), της σημασιολογίας (sematics), της παρουσίασης (presetatio) ή σε άλλα χαρακτηριστικά του εγγράφου και/ή του περιεχομένου του. Εισάγονται στο έγγραφο κατά τρόπον ώστε ο αναγνώστης του εγγράφου (άνθρωπος ή μηχανή) να μπορεί να ξεχωρίσει χωρίς αμφιβολία το κείμενο από τον «σχολιασμό» του. Καθορίζονται υπό μορφή διακριτών στοιχείων σήμανσης (markup elemets). Τα στοιχεία σήμανσης προσδιορίζονται με οριοθέτηση τμημάτων του περιεχομένου που συνιστούν ενιαία δομικά/λογικά/ σημασιολογικά κλπ στοιχεία με τους αντίστοιχους σημαντήρες. Ένας σημαντήρας (tag) αποτελείται από το όνομα του στοιχείου σήμανσης, το οποίο περικλείεται από οριοθέτες σήμανσης (markup delimiters). Π.χ. <author>erik Wilde</author> 6

2 SGML SGML (Stadard Geeralized Markup Laguage): Προδιαγραφή Γενικών Γλωσσών Σήμανσης - ISO Μια γλώσσα «σήμανσης» καθορίζει σημαντήρες (tags - οριοθέτες σήμανσης) και γραμματικούς κανόνες για εισαγωγή των σε έγγραφα (documets). Η αναπαράσταση της δομής ενός εγγράφου γίνεται με την οριοθέτηση τμημάτων του περιεχομένου που συνιστούν ενιαία λογικά στοιχεία, με τους αντίστοιχους σημαντήρες, σύμφωνα με τα πρότυπα της SGML. Π.χ.: <book><author>erik Wilde</author> <headig>wilde s WWW</headig> <chapter id= sgml ><headig>sgml</headig> <paragraph>. <sectio><headig>cotet & presetatio</headig>. </sectio> Με την εισαγωγή τους σε ένα έγγραφο οι σημαντήρες: Αναπαριστάνουν ρητά (επισημειώνουν) τη δομή/σημασιολογία/παρουσίαση του εγγράφου. Επιτρέπουν τον διαχωρισμό του περιεχομένου (cotet) από την παρουσίαση (formattig) του εγγράφου. 7 Παράδειγμα SGML <book> <author>erik Wilde</author> <headig>wilde s WWW</headig> <chapter id= sgml ><headig>sgml</headig> <paragraph>. <sectio><headig>cotet & presetatio</headig>. </sectio> Οι σημαντήρες βοηθούν στην αναγνώριση της δομής του εγγράφου. Κάθε στοιχείο σήμανσης μπορεί να έχει διαφορετική δομή. Επιπρόσθετη πληροφορία μπορεί να ενταχθεί σε ένα στοιχείο σήμανσης με ορισμό ιδιοχαρακτηριστικών (attributes) για τον εναρκτήριο σημαντήρα του. 8 Documet Type Defiitio (DTD) Το DTD καθορίζει τους γραμματικούς κανόνες σύμφωνα με τους οποίους δομείται ένα έγγραφο κωδικοποιημένο σύμφωνα με την SGML. Ομοειδή έγγραφα της SGML, κωδικοποιούνται σύμφωνα με ένα κοινό DTD, πράγμα που διευκολύνει την ηλεκτρονική τους επεξεργασία (αυτόματος έλεγχος ορθότητας, επίλυσης κανόνων παρουσίασης κοκ) Προσδιορίζει: Τα λογικά στοιχεία μιας κατηγορίας εγγράφων: ένα έγγραφο σε SGML είναι ένα σύνολο από στοιχεία (elemets), καθένα εκ των οποίων ανήκει σε μια συγκεκριμένη κλάση. Στο DTD ορίζονται επίσης τα ιδιοχαρακτηριστικά-κατηγορήματα (attributes) τα οποία αντιστοιχούν σε κάθε στοιχείο. Τους κανόνες συνδυασμού των στοιχείων, βάση των οποίων καθορίζεται μια δενδρική ιεραρχία. Παράδειγμα DTD Π.χ. DTD βιβλίου: <!ELEMENT book (author, headig,chapter+) > <!ELEMENT chapter (headig, (paragraph figure)*,sectio*)> <!ELEMENT sectio (headig, (paragraph figure)*) > <!ATTLIST (chapter sectio) id CDATA #IMPLIED> <!ELEMENT author (#PCDATA) > 9 10 Χρησιμότητα του DTD Παρουσίαση (εκτύπωση) Εγγράφου Δημιουργία Εγγράφων (με σωστή δόμηση) 1. Επικύρωση Εγγράφου σύμφωνα με το DTD του. Επικύρωση Εγγράφων (validatio) Καθορίζει μια κατηγορία (κλάση) εγγράφων που ακολουθούν μια κοινή γραμματική. 2. Υποκατάσταση των στοιχείων σήμανσης με εντολές στοιχειοθεσίας (για το χρησιμοποιούμενο συστημα παρουσίασης). 3. Έλεγχος συγκειμένου-cotext (αλλοιώς εμφανίζεται ένα headig μέσα σε sectio κι αλλοιώς μέσα σε chapter). 4. Επιπρόσθετες εντολές επεξεργασίας (π.χ. Από τα headig δημιουργείται ευρετήριο)

3 Σύστημα Επεξεργασίας SGML: Γενική Μορφή Εξειδικευμένος Συντακτικός Αναλυτής SGML SGML Declaratio DTD Documet Π.χ.: XML DTD Documet Parser SGML Declaratio: βασικοί ορισμοί και συμβάσεις πάνω στις οποίες στηρίζεται η συγγραφή ενός έγκυρου DTD (π.χ. Λεπτομέρειες για την αναπαράσταση των σημαντήρων). Χρησιμοποιείται από τον parser για την ανάλυση του DTD και του εγγράφου SGML. Parser SGML Declaratio Εξειδικευμένος Συντακτικός Αναλυτής SGML Π.χ.: HTML Documet HyperText Markup Laguage SGML Declaratio Parser DTD 15 Hypertext Markup Laguage (HTML) describes the cotet (περιεχόμενο) ad structure (δομή) of iformatio o a web page ot the same as the presetatio (παρουσίαση - appearace o scree) surrouds text cotet with opeig ad closig tags (σημαντήρες-markers) each tag's ame is called a elemet (στοιχείο) sytax: <elemet> cotet </elemet> example: <p>this is a paragraph</p> most whitespace is isigificat i HTML (igored or collapsed to a sigle space) Η γλώσσα HTML Η HTML επιτρέπει την ενσωμάτωση υπερσυνδέσμων (liks, δεικτών) προς άλλα κείμενα αλλά και αρχεία ήχου, εικόνων, κινουμένων σχεδίων κλπ. Ετσι, μπορεί να χρησιμοποιηθεί για τον σχεδιασμό και την ανάπτυξη εφαρμογών υπερμέσων. Η HTML είναι επεκτάσιμη γλώσσα, υπό την έννοια ότι σε αυτή μπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της. Τα αρχεία HTML έχουν συνήθως κατάληξη.html ή.htm we will use a ewer versio called HTML

4 Αρχεία HTML Τα HTML αρχεία περιέχουν χαρακτήρες ASCII/UTF-8 και μπορούν να δημιουργηθούν με έναν οποιονδήποτε επεξεργαστή κειμένου (editor), όπως ο sublime, o vi, ο emacs, o otepad κλπ. Sublime Editor Υπάρχουν επίσης πληθώρα WYSIWYG εργαλείων συγγραφής HTML σε περιβάλλοντα Widows και Liux. Είναι απαραίτητη η καλή γνώση των προδιαγραφών HTML, παράλληλα με την χρήση κάποιου ισχυρού εργαλείου συγγραφής εφαρμογών HTML. Ο έλεγχος ενός αρχείου HTML μπορεί να γίνει «τοπικά» με τη χρήση πλοηγού και χωρίς να είναι αναγκαία η εγκατάσταση του αρχείου σε διαθέτη ιστού. Το καλύτερο εργαλείο εκμάθησης HTML The Desig of HTML The History of HTML Simple, purist desig priciples HTML describes the logical structure of a documet Browsers are free to iterpret tags differetly HTML is a lightweight file format Size of file cotaiig just Hello World! : 1992: HTML 1.0, Tim-Berers Lee origial proposal 1993: HTML+, some physical layout 1994: HTML 2.0, stadard with best features 1995: No-stadard Netscape features 1996: Competig Netscape ad Explorer features 1996: HTML 3.2, the Browser Wars ed 1997: HTML 4.0, stylesheets are itroduced Postscript PDF MS Word HTML 11,274 bytes 4,915 bytes 19,456 bytes 28 bytes 1999: HTML 4.01, we have a wier! 2000: XHTML 1.0, a XML versio of HTML : XHTML 1.1, modularizatio 2002: XHTML 2.0, simplified ad geeralized (workig draft) 28/10/2014: HTML 5.0 -W3C Stable Recommedatio HTML5 Δυνατότητες για ιστιακές εφαρμογές με υποστήριξη περισσότερης αλληλεπιδραστικότητας, βίντεο, γραφικών, εφέ τεχνοτροπίας και πλήρες σύνολο API. Προσαρμόζεται σε κάθε συσκευή: επιτραπέζιο Η/Υ, κινητό, πινάκιο, τηλεόραση. Ανοιχτή πλατφόρμα με δωρεάν αδειοδότηση. Ο όρος HTML5 χρησιμοποιείται με δύο τρόπους, αναφερόμενος είτε στο σύνολο των τεχνολογιών που αποτελούν τη μελλοντική ανοικτή πλατφόρμα Ιστού: Ope Web Platform: HTML5 specificatio, CSS3, SVG, MathML, Geolocatio, XmlHttpRequest, Cotext 2D, Web Fots (WOFF) κ.α. Τα σύνορα ανάμεσα σε αυτές τις τεχνολογίες είναι άτυπα και αλλάζουν με το χρόνο. στην προδιαγραφή HTML5. 24

5 Δομή αρχείων ΗΤΜL και DOM Η δομή ενός αρχείου HTML Documet type elemet, or doctype: maily serves to get the browser to reder the HTML i what is called "stadards mode", so it will work correctly. It also lets validatio software kow what versio of HTML to validate your code agaist. html elemet: a wrapper aroud the etire documet; the closig html tag is the last thig i ay documet. Iside the html elemet: the head elemet, a wrapper to cotai iformatio about the documet (the metadata). After the head elemet: a body elemet - the wrapper to cotai the actual cotet of the page -i this case, oly a level-oe header (h1) elemet, which cotais the text A eve simpler HTML example. Elemets ofte cotai other elemets. HTML body eds up ivolvig may ested elemets (φωλιασμένα στοιχεία). Structural elemets such as article, header ad div create the overall structure of the documet, ad will cotai subdivisios. These will cotai headigs, paragraphs, lists ad so o. Paragraphs ca cotai elemets that make liks to other documets, quotes, emphasis ad so o. <html> <head> <body> <title> <h1> Elemet estig (φώλιασµα) 27 The Documet Object Model (DOM) The Documet Object Model (DOM) Whe a browser reders HTML for display, it coverts it ito a Documet Object Model (DOM), which ca be thought of as a tree-like structure, or hierarchy. Every elemet, attribute, ad chuk of text is represeted by a ode, which is a geeric cotaier for a piece of cotet iside the DOM. Whe a elemet cotais aother elemet, the cotaied elemet ca be referred to as a child (παιδί), ad the cotaier ca be referred to as a paret (γονέας). If you have two elemets iside aother elemet, those elemets are at the same level i the DOM, ad are referred to as sibligs (αδέλφια). These terms are stadard computer sciece terms used whe talkig about data models. A well-formed DOM is essetial to make sure that browsers iterpret your web page structure correctly ad cosistetly. Whe usig CSS ad JavaScript, you eed to travel up ad dow the differet levels of the DOM hierarchy to select elemets you wat to maipulate. The oly way to esure this will work correctly is to make sure that the DOM is well-formed. 29 The Basics of <h1> title <abbr> Hypertext Markup Laguage HTML 30

6 Elemets, Tags, Attributes Οργάνωση, δομή και κωδικοποίηση αρχείων HTML. Κωδικοποίηση Χαρακτήρων και Καθορισμός Γλώσσας Περιεχομένου A basic elemet (στοιχείο) i HTML cosists of two tagsmarkers (σημαντήρες) aroud a block of text. I almost every case elemets ca cotai sub-elemets Some elemets do ot cotai text or sub-elemets (eg. img) Elemets ca also have attributes (ιδιοχαρακτηριστικά), which ca modify the behaviour of the elemet ad itroduce extra meaig. May attributes i HTML are commo to all elemets, though some are specific to a give elemet or elemets. They are always of the form keyword="value". The value is ofte surrouded by sigle or double quotes Attributes ad their possible values are mostly defied by the HTML specificatios you caot make up your ow attributes without makig the HTML ivalid. The oly real exceptios are the id ad class attributes their values are etirely uder your cotrol, as they are for defiig custom meaigs. 32 Σύνταξη Στοιχείων HTML More about HTML tags Ιδιοχαρακτηριστικό (attribute) <p id="example">this is a paragraph.</p> <p> - σημαντήρας (marker/ </p> - καταληκτικός tag): ό,τι έπεται, θεωρείται σημαντήρας (closig παράγραφος tag) ο οποίος Στοιχείο ΗΤΜL (elemet) επισημαίνει το τέλος της παραγράφου some tags ca cotai additioal iformatio called a:ributes sytax: <elemet a'ribute="value" a'ribute="value"> cotet < /elemet> example: <a href="page2.html">next page</a> some tags do't cotai cotet; ca be opeed ad closed i oe tag sytax: <elemet a'ribute="value" a'ribute="value" /> example: <hr /> example: <img src="buy.jpg" alt="pic from Easter" /> Κατηγορίες στοιχείων ΗΤΜL5 Block ad ilie elemets Each elemet i HTML5 falls ito zero or more categories that group elemets with similar characteristics together. The followig broad categories are used i HTML5 specificatio: Metadata cotet Flow cotet Sectioig cotet Headig cotet Phrasig cotet Embedded cotet Iteractive cotet block elemets (μπλοκ) cotai a etire large regio of cotet examples: paragraphs, lists, table cells the browser places a margi of whitespace betwee block elemets for separatio ilie elemets (ενδογραμμικά) affect a small amout of cotet examples: bold text, code fragmets, images, liks, emphasized words, abbreviatios, ad short quotatios. the browser allows may ilie elemets to appear o the same lie must be ested iside a block elemet 35 36

7 Doctype Η δήλωση doctype τοποθετείται στην κορυφή ενός αρχείου ΗΤML, πριν τον σημαντήρα <html> Δηλώνει τον τύπο της HTML που πρέπει να αναμένεται στο περιεχόμενο του αρχείου: Με βάση αυτόν τον τύπο θα γίνει ο έλεγχος εγκυρότητας της HTML από τον πλοηγό (βλ. W3C HTML validator) H δήλωση έγκυρου doctype καθοδηγεί τον πλοηγό όπως πραγματοποιήσει σάρωση σύμφωνα με τις προδιαγραφές ("stadards mode") και στοιχειοθετήσει την ιστοσελίδα σύμφωνα με τους οδηγούς τεχνοτροπίας CSS. Αν το doctype απουσιάζει ή είναι άκυρο, ο πλοηγός υιοθετεί σάρωση ιδιορρυθμίας ( quirks mode ), συμβατή με παλαιότερες πρακτικές και πλοηγούς, θεωρώντας ότι το αρχείο είναι παλιό ή δεν ακολουθεί τις προδιαγραφές. Η διαφοροποίηση αφορά κυρίως στην ερμηνεία του CSS και όχι της HTML. Ως σχεδιαστής εφαρμογών Ιστού καλό είναι να διασφαλίσετε σάρωση προδιαγραφών, χρησιμοποιώντας σωστό doctype! Doctype HTML 4.01 strict: validates agaist the HTML 4.01 spec o presetatioal markup or deprecated elemets or frame sets allowed validates loose HTML style marks (miimized & o-quoted attributes) HTML 4.01 trasitioal: validates agaist the HTML 4.01 spec Allows some presetatioal markup ad deprecated elemets (<fot>) but ot framesets. XML strict & trasitioal: XHTML 1.0 equivalets of HTML 4.01 doctypes Fuctioally the same with HTML 4.01, except that they wo't validate loose HTML style markup: it all eeds to be well formed XML ΗΤΜL5: recommeded eve if you do't pla to start usig ay of the ew HTML5 features - still validates most of the HTML 4/XHTML 1.0 features Καθορισμός γλώσσας και χαρακτήρων HTML 5 HTML 4.01 Καθορισμός πρωταρχικής γλώσσας (primary laguage) του κειμένου, μέσω του ιδιοχαρακτηριστικού lag (DOCTYPE ΗΤΜL ή XHTML1.0 - text/html) ή xml:lag (DOCTYPE XHTML1.0 - text/xml): <html lag= e-gb >... </html> Βλ. για τις κωδικοποιήσεις γλωσσών Καθορισμός κωδικοποίησης χαρακτήρων ενός αρχείου (HTML5): <meta charset= utf-8 > utf-8 is the uiversal character ecodig, which icludes pretty much ay character that you might wat to use o a web page, from ay commo huma laguage, so it is a good idea to declare this to make sure you HTML has full iteratioal capabilities. 40 Kωδικοποίηση χαρακτήρων: Charset Good practice to declare the character set of your documet to protect agaist a serious security risk. Whe the web server does ot iclude a explicit character ecodig i its HTTP respose, Iteret Explorer will attempt to guess the ecodig. If certai strigs of user iput -- say, +ADw-script+AD4-alert(1)+ADw-/script+AD4- are echoed back early eough i the HTML page, Iteret Explorer may icorrectly guess that the page is ecoded i UTF-7. Suddely, the otherwise harmless user iput becomes active HTML ad will execute. UTF-8 Character ecodig capable of ecodig all possible characters, or code poits, defied by Uicode. The ame is derived from: Uiversal Coded Character Set + Trasformatio Format 8-bit. The ecodig is variable-legth, uses 8-bit code uits, ad offers backward compatibility with ASCII. UTF-8 is the domiat character ecodig for the World Wide Web, accoutig for 86.4% of all Web pages i Jauary The Iteret Mail Cosortium (IMC) recommeds that all programs be able to use UTF-8, ad the W3C recommeds UTF-8 as the default ecodig i XML ad HTML. Ecodes each of the 1,112,064 valid code poits i the Uicode code space (1,114,112 code poits mius 2,048 surrogate code poits) usig oe to four 8-bit bytes. Code poits with lower umerical values (i.e., earlier code positios i the Uicode character set, which ted to occur more frequetly) are ecoded usig fewer bytes

8