1 / 12

IST 221 Internet Concepts and Applications

IST 221 Internet Concepts and Applications. Introduction to XML II CSS and XSLT Style Sheets. Display XML Documents with Style Sheets. Two type of style sheets could be used to provide style information for the elements in the xml document

miach
Download Presentation

IST 221 Internet Concepts and Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IST 221 Internet Concepts and Applications Introduction to XML II CSS and XSLT Style Sheets

  2. Display XML Documents with Style Sheets • Two type of style sheets could be used to provide style information for the elements in the xml document • CSS : lists element’s css attributes and associated values • XSLT: contains templates that describe the desired document structure into which the data of an xml document can be inserted.

  3. Display XML Documents with CSS • Create a CSS that lists all the style rules for the Elements in the xml document. element_1{style_ attr1: value1; style_att2:value_2} • Examples of style attributes: color, font-size, margin-left, and display. • Attribute “display” takes on two values: inline (default) and block.

  4. Display XML Documents with CSS • To connect the external CSS to the xml document, include the following statement in the xml document • <? xml-stylesheet type = “text/css” href = “style_sheet.css” ?> where would you add this statement? Put this after xml declare and before root element.

  5. Display XML Documents with XSLT Style Sheets • XSL Extensible Stylesheet Language • XSL transformation (XSLT) • Transform an XML document into different form, in particular, HTML • A XSLT style sheet contains one or more templates that describe the desired document format and structure.

  6. XSLT Structure • A XSLT style sheet is an xml document containing one root element: xsl:stylesheet and one or more templates under the root element. • i.e. XML declaration needs to be included:what is this? • Stylesheet tags <xsl:stylesheet version = “1.0” xmlns:xsl = “http://www.w3.org/1999/XSL/Format” xmlns = “http://www.w3.org/TR/xhtml1/strict”> …………….template goes here. </xsl:stylesheet>

  7. XSLT Structure (continued) • Template tags: to specify the structure and display for elements on the associated xml file <xsl:template match = “/”> structure rules for root element <xsl:template match = “plane”> structure rules for element “plane” • Close with </xsl:template> tag

  8. XSLT Structure (continued) • value-of tag: to display the value of a element value of select = “plane/[year]” <xsl:value-of select = “element[/child_element]”> • for-each tag: to display siblings. • select each child-element of a specific element <xsl:for-each select = “root_element[/child_element]” >and create a loop. • HTML tags could be used to specify content.

  9. Merge an XSLT stylesheet into an XML Document like a mail merge • An XSL style sheet is saved as an .xsl file • Add the following statement into the corresponding XML document <? xml-stylesheet type = “text/xsl” href = “xslstyle_sheet.xsl” ?>

  10. Exercises • 8.2 Implement an external planes.css for planes.xml. Include the following style rules: • ad ( style attributes and associated values) • display: block • margin-top: 15 px • color: blue • year, make and model • color: red • font-size: 16pt • color, description • display: block • margin-left: 20 px • font-size: 16pt

  11. Exercises • seller • display: block • margin-left: 15 px • font-size: 14pt • location • display: block • margin-left: 40 px • city, state • font-size: 12pt • Connect the CSS to planes.xml from Ex 8.1 • Display the file planes.xml

  12. Exercises • Exercises 8.3: download xslplane.xml and xslplane.xsl • Exercise 8.4: download xslplanes.xml and xslplanes.xsl • We will be discussing the structures of the two set of files • Question: What are the differences between using CSS and XSL style sheets for an XML document?

More Related