Lecture 4 Creating Markups with XML and CSS References: Parsing and Querying XML Documents in SML ,Ch1 Creating Markup with XML,Ch5 in XML how to program Cascading Style Sheets (CSS), ch4 in XML how to program Originality of XML a W3C standard to complement HTML origins: structured text SGML motivation: HTML describes presentation XML describes contents HTML4.0∈ XML ⊂ SGML http://www.w3.org/TR/2000/REC-xml-20001006 (version 2, 10/2000) 7 Steps to XML Mastery 1. Read before you write --- RSS, SVG 2. Display for the Web --- CSS, XHTML 3. Transform with XSLT --- XPATH, XSLT 4. Apply parsing power --- SAX, DOM 5. Add web services --- UDDI, SOAP 6. Employ the semantic web --- RDF, OWL 7. Ensure XML security --- XML encryption HTML <h1> Bibliography </h1> <p> <i> Foundations of Databases </i> Abiteboul, Hull, Vianu <br> Addison Wesley, 1995 <p> <i> Data on the Web </i> Abiteoul, Buneman, Suciu <br> Morgan Kaufmann, 1999 HTML describes the presentation XML <bibliography> <book> <title> Foundations… </title> <author> Abiteboul </author> <author> Hull </author> <author> Vianu </author> <publisher> Addison Wesley </publisher> <year> 1995 </year> </book> … </bibliography> XML describes the contents XML Terminology tags: book, title, author, … start tag: <book>, end tag: </book> elements: <book>…<book>,<author>…</author> elements are nested empty element: <red></red> abbrv. <red/> an XML document: single root element well formed XML document: if it has matching tags XML: Attributes <book price = “55” currency = “USD”> <title> Foundations of Databases </title> <author> Abiteboul </author> … <year> 1995 </year> </book> attributes are alternative ways to represent data XML: Ids and References <person id=“o555”> <name> Jane </name> </person> <person id=“o456”> <name> Mary </name> <children idref=“o123 o555”/> </person> <person id=“o123” mother=“o456”><name>John</name> </person> ids and references in XML are just attributes XML: CDATA Section Syntax: <![CDATA[ .....any text here...]]> Example: <example> <![CDATA[ some text here </notAtag> <>]]> </example> Char. data in a CDATA section is not processed by the parser. XML: Entity References Syntax: &entityname; Example: <element> this is less than < </element> < < Some entities: > > & & ' ‘ " “ & Unicode char XML: Processing Instructions Syntax: <?target argument?> Example: <product> <name> Alarm Clock </name> <?ringBell 20?> <price> 19.99 </price> </product> The info. contained in a PI is passed to the application using the XML and provides additional application-specific information about the document. XML: Comments Syntax <!-- .... Comment text... --> Yes, they are part of the data model !! They are not processed by the parser! XML Namespaces (1/2) Resolve naming collisions problem http://www.w3.org/TR/REC-xml-names (1/99) name ::= [prefix:]localpart <book xmlns:isbn=“www.isbn-org.org/def”> <title> … </title> <number> 15 </number> <isbn:number> …. </isbn:number> </book> XML Namespaces (2/2) syntactic: <number> , <isbn:number> semantic: provide URL for schema <tag xmlns:mystyle = “http://…”> … defined here <mystyle:title> … </mystyle:title> <mystyle:number> … </tag> XML What For and How? XML is designed for platform-independent exchange of information over Internet Each element is associated with a content model, which is a regular expression over element type and #PCDATA representing text Processing of XML document Parsing Processing Output generation Programming practice Section 5.9: case study of a day planner application Getting familiar with some parser, such as msxml, Xceres, JAXP, and XML4J Supplements to XML Syntax (1/6) Unicode An extension to ASCII character set Supports all spoken languages A major step forward in the internationalization Documents that use encoding other than UTF-8 or UTF-16 must start with an XML declaration <?xml version=“1.0” encoding=“ISO-8859-1”?> Supplements to XML Syntax (2/6) Entity references The name of entity is between an ampersand character and a semicolon, e.g. & For the application, the entity reference is replaced by the content of the entity &us; ≡ “United States” if the value of us is pre- defined as “United States” &#x; provides a hexadecimal representation of the character set, called character reference <?xml version=“1.0” encoding=“ISO-8859-1”?> Supplements to XML Syntax (3/6) Special Attributes xml:space for those applications that discard duplicate spaces, value is either preserve or default xml:lang is used to indicate the language of the content’s content. For example, <p xml:lang=“en-GB”> … </p> Supplements to XML Syntax (4/6) Processing Instructions (PI) Is a mechanism to insert non-XML statements, such as scripts, in the documents. The processing instruction is enclosed in <? and ?>, the first name is the target. XML declaration is a processing instruction <?xml version=“1.0” encoding=“ISO-8859-1”?> Supplements to XML Syntax (5/6) Processing Instructions (PI) Is a mechanism to insert non-XML statements, such as scripts, in the documents. The processing instruction is enclosed in <? and ?>, the first name is the target. XML declaration is a processing instruction <?xml version=“1.0” encoding=“ISO-8859-1”?> Supplements to XML Syntax (6/6) Four Common Errors Forget end tags XML is case sensitive No space in the name of element Quotes are required for attribute value Cascading Style Sheets (CSS) Reference: XML How to Program, ch4 Rendering XML without HTML HTML browsers know how the title element appears, they need not to be told how to style element. XML has no pre-defined set of elements, it needs to be told how to style each element. Both CSS and XSL-FO solve the rendering problem. CSS describes directly how to render documents onscreen or on paper XSLT stylesheet converts the XML elements into, say, HTML elements for display. XSL-FO enhances the styling function. Style declaration CSS specifies the style of page elements separately from the structure of a document or “separates styling from the page content” or “separation of structure from presentation” Style declaration Inline style Style element in head part External style linking Inline style Inside body section, using style attribute, such as <p style=“font-size:20pt”>this is…</p> <p style=“font-size:20pt; color:#0000ff”> this is… </p> Style element in head section <!DOCTYPE HTML ---> <html> ------ <head> <title>….</title> <style type=“text/css”> em {background-color:#8000ff; color: white} h1 {font-family: arial, san-serif} p {font-size:14pt} .special {color: blue} (for style class) </style> </head> ----------- Type attribute of element Style The type attribute specifies the MIME type of the stylesheet. MIME is a standard for specifying the format of content: text/css, text/html, text/javascript, and image/gif. Regular text style sheets use text/css Font-family property arial sans-serif serif (times new roman, Georgia) cursive (script) fantasy (critter) monospace (courier, fixedsys) Font-size in (inches) cm (centimeters) mm (millimeters) pt (points=1/72 in) pc (picas=12pt) Relative length measure em: the size of the font ex: x-height of the font %: percentage Conflicting styles Precedence Author > user > user agent (browser) Child’s or descendant’s properties have greater specificity than those defined for parent or ancestor elements Inheritance Styles for parent and ancestor elements are inherited by child and descendant elements. External style sheet linking An external style sheet is defined, say styles.css, Including the style sheet file in the head section of a html (xml) document <link rel =“stylesheet” type = “text/css” href = “styles.css”> <?xml-stylesheet href = “styles.css” type = “text/css” ?> The Style Sheet File Selectors CSS rules are associated with elements through sectors. Properties Enclosed in curly brackets { } Each property has a name followed by a : Comments Enclosed in /* and */ Positioning Elements (1/2) CSS introduces the position property and a capability called absolute positioning <p><img src=“i.gif” style=“position: absolute; top: 0px; left: 0px; z-index: 1” alt= “first positioned image”></p> <p style= “position: absolute; top:50px; left:50px; z-index:3; font-size:20pt” > positioned text </p> Positioning Elements (2/2) Z-index value indicates the layer over lapping (bigger number outer layout) If no z-index, later element is displayed in front of those that occur earlier Top, left, right, bottom are relative to its containing block for relative positioning Relative positioning Usually used in superscript, subscript, such as span {color: red; font-size: 6em; height: 1em} .super {position: relative; top: -1ex} Defined in between <style type=“text/css”> and </style> of the head section, one may apply the relative position as: <span class=“super”>****</span> which will result in the text at the end of this sentence is in superscript Background (1/2) <style type=“text/css”> body {background-image: url(logo.gif); background-position: bottom right: background-repeat: no-repeat; background-attachment: fixed;} P {font-size: 18pt; color: #aa5588; text: 1em; font-family: arial, san-serif} .dark {font-weight: bold} </style> </head> <body> <p> <span class=“dark”>……….</span> </p> </body> Backgrounds (2/2) Grouping element: span (inline level element) and div (block level element) Font-style: none, italic, oblique Font-weight: bold, normal, bolder, lighter Background-repeat: repeat, no-repeat, repeat-x,