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
Bibliography
Foundations of Databases Abiteboul, Hull, Vianu
Addison Wesley, 1995
Data on the Web Abiteoul, Buneman, Suciu
Morgan Kaufmann, 1999 HTML describes the presentation XML
tags: book, title, author, … start tag:
empty element:
an XML document: single root element
well formed XML document: if it has matching tags XML: Attributes
ids and references in XML are just attributes XML: CDATA Section
Syntax:
Example:
Char. data in a CDATA section is not processed by the parser. XML: Entity References
Syntax: &entityname;
Example:
Some entities: > >
& &
' ‘
" “
& Unicode char XML: Processing Instructions
Syntax: Example:
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
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
syntactic:
semantic: provide URL for schema
… defined here
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
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 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,
…
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 , the first name is the target.
XML declaration is a processing instruction 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 , the first name is the target.
XML declaration is a processing instruction 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
this is…
this is…
Style element in head section------
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
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
positioned text
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 of the head section, one may apply the relative position as: **** which will result in the text at the end of this sentence is in superscript Background (1/2)
……….
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, repeat-y Background-attachment: scroll or fixed Text-align: center, left, right, justify Text flow and Box Model (1/3)
Floating allows moving an element to one side of screen
For block-level element (BOX model), the content of each element is surrounded by padding, border, margin (from inside to outside) Text flow and Box Model (2/3)
Margin
Specifies the distance between the edge of the element and any other element on the page. (choices: top, bottom, left, right)
Padding
Specifies the distance between the content inside an element and the edge of the element (choices: top, right, left, bottom) Text flow and Box Model (3/3)
Border lies between the padding space and the margin space
Three properties: border-width, border- style, border-color
Border-width : thick, medium, thin
Border-style: none, hidden, dotted, dashed, solid, double, grove, ridge, inset, outset Some CSS property values
Color
background-color: #00FF00
color: rgb(0,0,255)
color: rgb(0%,0%,100%)
font-size, font-weight, font-style text-align, vertical-align, text-indent, … background-image: url(logo.gif) User style sheets
In case user style sheet is designed to override author style sheet … .note {font-size:1.5em}, 1.5 times of font-size = 18pt, if default font size is 12pt With font-size conflicting, relative measurement (.em .ex) has preference over absolute measurement IE is capable of setting desired user style sheet Programming practices
Exercising Figure 4.2 – 4.5 for basic stylesheet practice.
Exercising Figure 4.10 for text float
Exercising Figure 4.12 for Box model practice.