Web Information Systems (WE-DINF-11912): Lecture 03 - Markup Languages

Web Information Systems Markup Languages Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://vub.academia.edu/BeatSigner 2 December 2005

Hypertext Markup Language (HTML)  HTML is an application of the Standard Generalized Markup Language (SGML)  Simple human-readable markup language that can be manipulated by any text editor  Special tags to define the structure and presentation of a document  headings (<h1>, ... <h6>) and paragraphs (<p>)  lists (<ul> and <li> ) and tables (<table>, <tr> and <td>)  images (<img>)  ...  Hyperlinks to connect different HTML documents  anchor tags (<a href="...">) October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

History of HTML  HTML 1.0 (1993)  HTML 2.0 (1995)  at that time the Netscape Navigator offered much more functionality  HTML 3.2 (1997)  first version developed exclusively by W3C  introduced tables  introduced many elements for the visual appearane of a document which was never the idea of HTML - e.g. <font> element or color attribute - most of them are now deprecated and styles should be used instead October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3

History of HTML ...  HTML 4.0 (1997)  internationalisation (Unicode)  introduction of Cascading Style Sheets (CSS)  XHTML 1.0 (2000)  XHTML 1.1 (2001)  HTML 5 (working draft 2008)  will introduce new elements (e.g. <audio> or <video>) October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

Problems with HTML  Mix of content, structure and presentation  no separation of concerns  structure of content defines the presentation in the browser  "Forgiving" browsers weaken the standard  an HTML document with errors (e.g. missing tags etc.) will still be rendered without any error messages  HTML documents could be checked against the standard - http://validator.w3.org  most existing websites contain "errors" - exercise: can you find a webpage without any errors?  Lacking support for multiple views October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5

Cascading Style Sheets (CSS)  Separation of presentation and content  visualisation of HTML elements defined by styles  enables multiple presentations of the same content  media-specific stylesheets via the media attribute <html> <head> ... <link ref="stylesheet" type="text/css" href="default.css" media="screen, tv" /> <link rel="stylesheet" type="text/css" href="alternative.css" media="print, handheld" /> </head> <body> ... </body> </html> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6

CSS Syntax  The CSS syntax contains three parts  a selector - HTML element  a property and a value - surrounded by curly braces - multiple properties are separted with a semicolon selector {property1:value1;propertyn:valuen}  Example h1 {color:red;font-size:10px} p {color:blue} October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

CSS Inclusion  There are three ways how a style sheet can be inserted  inline style  internal style sheet  external style sheet  Inline style  defined via the style attribute of the corresponding HTML element  still mixes content and presentation and should therefore be avoided <h1 style="color:red;font-size:10px">Urgent Tasks</h1> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

CSS Inclusion ...  Internal style sheet  used when single document has a unique style  defined in the <head> section <html> <head> ... <style type="text/css"> h1 {color:red;font-size:10px} p {color:blue} ... </style> </head> <body> ... </body> </html> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

CSS Inclusion ...  External style sheet (in *.css)  changes to the overall appearance of an entire website can be done in a single file - removes a lot of redundancy - saves a lot of time - leads to more consistent websites <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> ... </body> </html> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

Multiple Style Sheets  Multiple styles will cascade into a single one  properties/values are inherited from more specific style sheets  Overriding priorities (1) default browser style (2) external style sheet (3) internal style sheet (4) inline style (highest priority)  Note that if the link to the external style sheet in the <head> section is placed after the internal style sheet, then the external style sheet will override the internal one October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

What is XML?  Standardised text format for (semi-) structured information  Meta markup language  tool for defining other markup languages - e.g. XHTML, WML, VoiceXML, SVG, Office Open XML (OOXML)  Data surrounded by text markup that describes the data  ordered labeled tree <note date="2009-10-08"> <to>William Van Woensel</to> <from>Beat Signer</from> <content>Let us discuss exercise 3 this afternoon ...</content> </note> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

... and What Is It Not?  XML is not a programming language  however, it can be used to represent program instructions, configuration files etc.  note that there is an XML application (XSLT) which is Turning complete  XML is not a database  XML is often used to store long-term data but it lacks many database features  many existing databases offer an XML import/export  more recently there exist specific XML databases (e.g. Tamino) October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

XML Example <?xml version="1.0"?> <publications> <publication type="inproceedings"> <title>An Architecture for Open Cross-Media Annotation Services</title> <author> <surname>Signer</surname> <forename>Beat</forename> </author> <author> <surname>Norrie</surname> <forename>Moira</forename> </author> <howpublished>Proceedings of WISE 2009</howpublished> <month>10</month> <year>2009</year> </publication> <publication type="article"> ... </publications> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

XML Specification  http://www.w3.org/TR/xml/  Provides a grammar for XML documents in terms of  placement of tags  legal element names  how attributes are attached to elements  ...  General tools  parsers that can parse all XML documents regardless of particular application tags  editors and various programming APIs October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

XML Tree Document Structure  An XML document tree can contain 7 kinds of nodes  root node - always exactly one root node  elements nodes  attribute nodes - name/value pairs  text nodes  comment nodes  processing instruction nodes - <? ... ?> is used to pass information to a specific application  namespace nodes October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

Well-Formedness and Validity  An XML document is well-formed if it follows the rules of the XML specification  An XML document is valid according to its Document Type Definition (DTD) or XML Schema  An XML document is valid if it is completely self- describing about its structure and content through  the document content  auxiliary files referred to in the document October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

XML Differences from HTML  XML is a tool for specifying markup languages rather than a markup language itself  “special markup languages for special applications”  XML is not a presentation language  defines content rather than presentation  HTML mixes content, structure and presentation  XML designed to support a number of applications and not just web browsing  XML documents should be well-formed and valid  XML documents are easier to process by a program October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

XML Differences from HTML …  Readability is more important than conciseness  e.g. <tablerow> rather than <tr>  Matching of tags is case significant  e.g. start tag <Bold> does not match end tag </BOLD>  Markup requires matching start and end tags  e.g. <p> and </p>  exceptions are special non-enclosing tags e.g. <br /> or <image ... />  Whitespaces in texts are significant October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

XHTML  XHTML is a reformulation of HTML to make it an XML application  accept that HTML is here to stay  improve it by using XML  use benefits of XML with minimal effort  XHTML 1.1 is a formal recommendation of W3C October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

Differences between XHTML and HTML  Documents must be valid  XHTML namespace must be declared in <html> element  <head> and <body> elements cannot be omitted  <title> element must be the first element in the <head>  End tags required for non-empty clauses  Empty elements must consist of a start-tag/end-tag pair or an empty element  Element and attribute names must be in lowercase  Attribute values must always be quoted  Attribute names cannot be used without a value October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

Evolution of XML  Descendant of Standard Generalized Markup Language (SGML)  SGML is more powerful but (too) complex  HTML is an SGML application  XML was developed as a “SGML-Lite” version  XML 1.0 published in February 1998  Since then numerous associated standards have been published (http://www.w3.org/xml/) October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

Why has XML been so Successful?  Simple  General  Accepted  Many associated standards  Many (free) tools available October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

XML Technologies XLink XPointer XQuery XPath XSLT October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

XML Technologies ...  XPath and XPointer  addressing of XML elements and parts of elements  XSL (Extensible Stylesheet Language)  transforming XML documents  Xlink (XML Linking Language)  linking in XML  XQuery (XML Query Language)  querying XML documents  Document Type Definition (DTD) and XML Schema  definition of schemas for XML documents  DTDs have a very limited expressive power  XML Schema introduces datatypes, inheritance etc. October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

Overview of XML Technologies ...  SAX (Simple API for XML) and DOM (Document Object Model)  XML programming APIs  RDF (Resource Description Framework)  semantic web October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

Document Object Model (DOM)  Defines a language neutral API for accessing and manipulating XML documents as a tree structure  Entire document must be read an parsed before it can be used by a DOM application  not suited for large documents  Two different types of DOM Core interfaces for accessing supported content types  generic Node interface  node type-specific interfaces  Various available DOM parsers  JDOM specifically for Java October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

Document Object Model (DOM) ...  Different DOM levels  DOM Level 1 - concentrates on HTML and XML document models - contains functionality for document navigation and manipulation  DOM Level 2 - supports XML Namespaces - stylesheet object model and operations to manipulate it  DOM Level 3 - specifies content models (DTD and Schemas) October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

XPath  Expression language to address elements of an XML document  A location path is a sequence of location steps separated by a slash (/)  XPath expressions look similar to file pathnames /publications/publication //author[3]  Used in XPointer, XSLT and XQuery October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

XML Pointer Language (XPointer)  Addressing points or ranges in XML documents  Uses XPath expressions  Introduces addressing relative to elements  supports links to points without anchors October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

XML Linking Language (XLink)  Standard way for creating links in XML documents  Fixes limitations of HTML links where  anchors must be placed within documents  only entire documents or predefined marks (#) can be linked  only one-to-one unidirectional links are supported  XLinks can be defined in separate documents  Two types of links  simple links - associate exactly one local and one remote resource (similar to HTML links)  extended links - associate an arbitrary number of resources October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

XML Linking Language (XLink) ...  Other XLink features  linking parts of resources  links can be defined at the attribute level  typed links  The Annotea project uses Annotea Project XLink for managing external annotations  e.g. in the Amaya Web Browser October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

Simple API for XML (SAX)  Event-based API for XML document parsing  many free parsers available (e.g. Apache Xerces)  Scans the document from start to end and invokes callback methods  Different kinds of events  start of document  end of document  start tag of an element  end tag of an element  character data  processing instruction October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

XML Transformations  Developers want to be able to transform data from one format to another  processing of XML documents - XML to XML transformation  post-processing of documents - e.g. XML to XHTML, XML to WML, XML to PDF, ...  The XSL Transformation (XSLT) can be used for exactly that purpose October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

XSLT Processor DOM XSLT XML Document Processor XHTML, WML, ... Parser Source Tree Result Tree DTD DTD Stylesheet Tree XSLT Stylesheet  The XSLT processor (e.g. Xalan) applies an XSLT stylesheet to a document and produces a result document October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

XSL Transformations (XSLT)  Most important part of XSL  uses XPath for the navigation  XSLT is an expression-based language based on functional programming concepts  XSLT uses  pattern matching to select parts of documents  templates to perform transformations  Most web browsers support XSLT  transformation can be done on the client side based on an XML document and an associated XSLT document October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

Example <?xml version="1.0"?> <publications> <publication type="inproceedings"> <title>An Architecture for Open Cross-Media Annotation Services</title> <author> <surname>Signer</surname> <forename>Beat</forename> </author> <author> <surname>Norrie</surname> <forename>Moira</forename> </author> <howpublished>Proceedings of WISE 2009</howpublished> <month>10</month> <year>2009</year> </publication> <publication type="article"> ... </publications> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

XSLT Stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http.w3.org/1999/XSL/Transform"> <xsl:template match="person"> <p> <xsl:value-of select="surname"/> </p> </xsl:template> </xsl:stylesheet> output <?xml version="1.0" encoding="utf-8"?> <p> Signer </p> <p> Norrie </p> October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

Other XSLT Statements  <xsl:for-each select="...">  select every XML element of a specified node-set  <xsl:if test="...">  conditional test  <xsl:sort select="..."/>  sort the output  ...  Have a look at the XSLT/XPath reference document that is available on PointCarré October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

Exercise 3  Hands-on experience with XML and XSLT  transform one XML document into another XML document  transform an XML document into an XHTML document October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

References  HTML Tutorial  http://www.w3schools.com/html/  W3C Markup Validation Service  http://validator.w3.org  CSS Tutorial  http://www.w3schools.com/css/  Elliotte Rusty Harold and W. Scott Means, XML in a Nutshell, O'Reilly Media, September 2004  XML and XML Technology Tutorials  http://www.w3schools.com October 8, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41

Next Week Universal Client Access 2 December 2005

Web Information Systems (WE-DINF-11912): Lecture 03 - Markup Languages

0 comments

Notes on slide 1

1 Favorite