Markup Languages. Γλώσσες Σήμανσης. Ανασκόπηση. Document Content «Περιεχόμενο» Εγγράφων. Γλώσσες Σήμανσης. Documents characterised by:

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Markup Languages. Γλώσσες Σήμανσης. Ανασκόπηση. Document Content «Περιεχόμενο» Εγγράφων. Γλώσσες Σήμανσης. Documents characterised by:"

Λαλαγη Πυλαρινός
7 χρόνια πριν
Προβολές:

1 What is the logical structure of a documet? Markup Laguages Γλώσσες Σήμανσης What is the differece betwee logical structure (λογική δομή), sematics (σημασιολογία) ad presetatio (παρουσίαση) of a documet? What is the use of tags (οριοθέτες σήμανσης ή σημαντήρες)? What is DTD ad how do we compose oe? What is the differece betwee SGML ad HTML? What is the Ope Web Platform? What is the structure of a HTML file? What is the estig of HTML elemets ad how does it traslate to hierarchical file structure? What is the DOM ad how is it useful? Ανασκόπηση Documet Cotet «Περιεχόμενο» Εγγράφων Γλώσσες Σήμανσης Documets characterised by: Εισαγωγή στην HTML Βασικές έννοιες Σύνταξη Στοιχείων HTML Δομή αρχείων HTML Μοντέλο Αντικειμένου Εγγράφων (DOM) Σημασιολογία Καλές Πρακτικές Cotet - Περιεχόμενο / πληροφορίες Logical Structure - Λογική δομή - Ιεραρχική-δενδρική book author headig chapter Τυπολογία HTML εγγράφων -Doctypes Εισαγωγή στους Επάλληλους Οδηγούς Τεχνοτροπίας - Cascadig Style Sheets headig paragraph sectio headig paragraph paragraph figure 3 4

2 Documet Cotet vs Presetatio Documet markup (Σήμανση Εγγράφων) Cotet: iformatio cotaied i a documet, orgaised accordig to some logical structure Structured defied by the type of the documet (book, article etc) Presetatio: the formattig style applied whe presetig a documet i a physical medium (τεχνοτροπία παρουσίασης-στοιχειοθεσίας) - scree, paper Typically, presetatio follows rules idepedet of the cotet, about: fot paragraph umberig paragram format locatio of foototes etc 5 Markup: isertig ito a documet metadata describig the documet ad its cotets. These metadata: Refer to the descriptio of the structure (δομή), sematics (σημασιολογία), presetatio (παρουσίαση) or other characteristics of the documet ad/or its cotets. Are itroduced i a documet i a way that its reader (huma or program) ca distiguish without hesitatio the cotet from its aotatio («σχολιασμό»). Are defied i the cotext of distict markup elemets (στοιχείων σήμανσης). The markup elemets are specified by markig-up parts of a documet (οριοθέτηση τμημάτων περιεχομένου) which represet distict structural/logical/sematic uits. The mark-up is doe with the use of tags (σημαντήρες) A tag comprises the ame of a markup elemet, eclosed betwee markup delimiters (οριοθέτες σήμανσης): < ad > Eg. <author>erik Wilde</author> 6 SGML SGML (Stadard Geeralized Markup Laguage): A stadard for geeral mark-up laguages - ISO A markup laguages that defies tags ad grammar rules for their itroductio ito documet. The represetatio of a documet s structure happes with the markup of documet parts, which correspod to distict logical uits, usig the correspodig tags ad i compliace to SMGL stadards. Eg: <book><author>erik Wilde</author> <headig>wilde s WWW</headig> <chapter id= sgml ><headig>sgml</headig> <paragraph>. <sectio><headig>cotet & presetatio</headig>. </sectio> By itroducig tags ito a documet, the tags: Represet explicitly the structure/sematics/presetatio of the documet (επισημειώνουν) τη δομή/σημασιολογία/παρουσίαση του εγγράφου). Allow the separatio of the documet s cotet from its formattig. 7 SGML Example <book> <author>erik Wilde</author> <headig>wilde s WWW</headig> <chapter id= sgml ><headig>sgml</headig> <paragraph>. <sectio><headig>cotet & presetatio</headig>. </sectio> Markup tags help us recogise structure Each tag elemet ca have a differet structure Additioal (meta)iformatio ca be iserted to a markup elemet by itroducig attributes (ιδιοχαρακτηριστικά) iside the begiig tag of the elemet. 8

3 Documet Type Defiitio (DTD) Defies the grammar rules the determie how to ecode ad structure a documet described i SGML or aother markup laguage. SGML documets belogig to the same class/category are ecoded accordig to a commo DTD, which specifies: The logical elemets i documets of that category, alog with their structure ad attributes. The rules that gover the compositio of these elemets ito more complex oes formig a tree hierarchy. The DTD specificatio facilitates documet processig. I particular: Documet creatio Validatio Presetatio DTD Example DTD of a book: <!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) > Sematic extractio 9 10 Documet presetatio (pritig) steps 1. Documet validatio accordig to its DTD. 2. Substitutio of markup tags with formattig istructios i the presetatio system at had. Geeral SGML Processig SGML Declaratio DTD Documet 3. Cotext cotrol - e.g. the presetatio of a particular head appears differetly if the header is iside differet elemets (e.g. i a sectio or a chapter). 4. Executio of additioal processig istructios (e.g. build a idex from the headigs). Parser SGML Declaratio: βασικοί ορισμοί και συμβάσεις πάνω στις οποίες στηρίζεται η συγγραφή ενός έγκυρου DTD (π.χ. Λεπτομέρειες για την αναπαράσταση των σημαντήρων). Χρησιμοποιείται από τον parser για την ανάλυση του DTD και του εγγράφου SGML

4 Specialised SGML Parser Specialised SGML Parser Π.χ.: XML DTD Documet Π.χ.: HTML Documet Parser SGML Declaratio SGML Declaratio Parser DTD Hypertext Markup Laguage (HTML) HyperText Markup Laguage 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) we will use a ewer versio called HTML5 16

HTML features HTML Files Allows the embeddig of hyperliks (υπερσυνδέσμων, δεικτών) to other HTML documets as well as other files (audio, video, aimatio, biary) Therefore, it ca be used for the desig

5 HTML features HTML Files Allows the embeddig of hyperliks (υπερσυνδέσμων, δεικτών) to other HTML documets as well as other files (audio, video, aimatio, biary) Therefore, it ca be used for the desig ad developmet of hypermedia applicatios. It is extesible, i the sese that ew features ad fuctioalities ca be added without ivalidatig previous versios. HTML files typically have a suffix of.html or.htm (owadays this is ot so commo as before) Cotai ASCII/UTF-8 characters ad ca be created/edited with ay editor like sublime, vi, emacs, otepad. Multiple WYSIWYG tools. Importat to kow ad uderstad the specificatio, i additio to usig a powerful tool. You ca validate HTML files locally by opeig them with your browser. Look at existig files ad lear Sublime Editor The Desig 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! : Postscript PDF MS Word HTML 11,274 bytes 4,915 bytes 19,456 bytes 28 bytes 20

6 The History of HTML 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 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 21 HTML5 Capabilities for supportig more iteractivity, video, graphics, visual effects ad a full API. Adaptable to ay device: PC, laptop, hadehld, tablet, TV. Ope platform with free licesig. The term HTML5 is used to refer to Either the set of techologies that comprise the future: Ope Web Platform: HTML5 specificatio, CSS3, SVG, MathML, Geolocatio, XmlHttpRequest, Cotext 2D, Web Fots (WOFF) κ.α. The boudaries betwee these techologies are ot strict ad chage over time. The HTML5 specificatio per se. ΗΤΜL file structure ad DOM 23

The structure of a HTML file 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.

7 The structure of a HTML file 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. 26 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. <head> <html> <body> 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. <title> <h1> Elemet estig (φώλιασµα) 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. 28

8 The Documet Object Model (DOM) <h1> The Basics of <abbr> title Hypertext Markup Laguage HTML 29

Σχετικά έγγραφα

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

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