Tutorial 11 Creating XML Document

Objectives Describe the history of XML and the uses of XML documents Understand XML vocabularies Define well-formed and valid XML documents, and describe the basic structure of an XML document Create an XML declaration Work with XML comments Work with XML parsers and understand how Web browsers work with XML documents New Perspectives on HTML, CSS, and XML 4th edition

Objectives (continue) Create XML elements and attributes Work with character and entity references Describe how XML handles parsed character data, character data, and white space Create an XML processing instruction to apply a style sheet to an XML document Declare a default namespace for an XML vocabulary and apply the namespaceAccess desktop icons and gadgets on the desktop New Perspectives on HTML, CSS, and XML 4th edition

Introducing XML XML stands for Extensible Markup Language. It is markup language that can be extended and modified to match the needs of the document author and data being recorded. XML has some advantages in presenting structured content. Because it is extensible, XML can be used to create a wide variety of document types. New Perspectives on HTML, CSS, and XML 4th edition 4

Introducing XML XML has its roots in Standard Generalized Markup Language (SGML) which was introduced in the 1980s. SGML is device-independent and system-independent. SGML is difficult to learn and to apply because of its power, scope, and flexibility. XML is a language used to create vocabularies for other markup languages but does not have SGML complexity. New Perspectives on HTML, CSS, and XML 4th edition 5

XML Syntax Rules New Perspectives on HTML, CSS, and XML 4th edition 6

XML Today XML was originally created to structure, store, and transport information. XML has become the most common tool for data transmission among various applications. XML is used across a variety of industries. XML is used in all major Web sites. Many software applications (Excel and Word), and server languages (Java, .NET, Perl, PHP) can read and create XML files. New Perspectives on HTML, CSS, and XML 4th edition 7

XML Today (continue) All major databases can read and create XML files. On Web pages the structure of XML closely matches the structure used to display the same information in HTML. Mobile device platforms (Google’s Android and Apple’s iOS use XML in a variety of ways. New Perspectives on HTML, CSS, and XML 4th edition 8

XML Vocabularies New Perspectives on HTML, CSS, and XML 4th edition 9

Well-Formed and Valid XML Documents An XML document is well-formed if it contains no syntax errors and satisfies the general specifications for XML code as laid out by the W3C. A well-formed XML document that satisfies the rules of a DTD or schema is said to be a valid document. New Perspectives on HTML, CSS, and XML 4th edition 10

The Structure of an XML Document XML documents consist of three parts The prolog The document body The epilog The prolog is optional and provides information about the document itself XML declaration Processing instructions Comments lines Document type declaration (DTD) New Perspectives on HTML, CSS, and XML 4th edition 11

The Structure of an XML Document New Perspectives on HTML, CSS, and XML 4th edition 12

The Structure of an XML Document The document body contains the document’s content in a hierarchical tree structure. The epilog is also optional and contains any final comments or processing instructions. New Perspectives on HTML, CSS, and XML 4th edition 13

The XML Declaration The XML declaration is always the first part of the prolog in an XML document. It signals to the program reading the file that the document is written in XML, and it provides information about how that code is to be interpreted by the program. The syntax is: <?xml version=“version number” encoding=“encoding type” standalone=“yes | no” ?> A sample declaration: <?xml version=“1.0” encoding=“UTF-8” standalone=“yes” ?> New Perspectives on HTML, CSS, and XML 4th edition 14

Inserting Comments Comments can appear anywhere in the prolog go after the XML declaration. Comments provide additional information about what the document will be used for and how it was created. The syntax for comments is <!-- comment --> This is the same syntax for HTML comments <!-- This document contains data on SJB Pet Butique holiday specials File name: sjbpet.xml Author: Patricia Dean Date: 9/18/2016 --> New Perspectives on HTML, CSS, and XML 4th edition 15

XML Parsers Parser (or processor) is a program that reads and interprets an XML document. Parser interprets a document’s code and verifies that it satisfies all the XML specifications for document structure and syntax. Parsers are strict. All major Web browsers include an XML parser. New Perspectives on HTML, CSS, and XML 4th edition

XML Parsing Process New Perspectives on HTML, CSS, and XML 4th edition

Exchanger XML Editor New Perspectives on HTML, CSS, and XML 4th edition

Working with Elements Elements are the basic building blocks of XML. An element can have text content and child element content. The content is stored between an opening tag and a closing tag, just as in HTML. The syntax of an XML element with text: <element>content</element> Example: <manufacturer>SJB Pet Boutique</manufacturer> New Perspectives on HTML, CSS, and XML 4th edition 19

Working with Elements Element names are case sensitive. Element names must begin with a letter or the underscore and cannot contain blank spaces. The element’s name in closing tag must exactly match the name in the opening tag. An empty element with a single tag: <element /> An empty element with a pair of tags: <element></element> New Perspectives on HTML, CSS, and XML 4th edition 20

Nesting Elements An element contained within another element. Nested elements also called child elements. Child elements must be enclosed within their parent elements. Example: <product> <productName>Dog Shirt Gift Basket</productName> <manufacturer>SJB Pet Boutique</manufacturer> <description>Something for every day of the week</description> <price>35.99</price> <productItems>1200, 1201, 1202, 1203, 1204 </productItems> </product> New Perspectives on HTML, CSS, and XML 4th edition 21

The Element Hierarchy All elements in the body are children of a single element called the root or document element. There can be only one root element. The familial relationship of parent, child, and sibling extends throughout the entire document body. New Perspectives on HTML, CSS, and XML 4th edition 22

The Element Hierarchy New Perspectives on HTML, CSS, and XML 4th edition

Charting the Element Hierarchy New Perspectives on HTML, CSS, and XML 4th edition 24

Writing the Document Body New Perspectives on HTML, CSS, and XML 4th edition 25

Working with Attributes An attribute is a feature or characteristic of an element. Every element can contain one or more attributes. Attributes are text strings and must be placed in single or double quotes. The syntax is: <element attribute=“value”> … </element> or <element attribute=“value” /> New Perspectives on HTML, CSS, and XML 4th edition 26

Working with Attributes New Perspectives on HTML, CSS, and XML 4th edition

Using Character and Entity References Special characters, such as the € symbol, can be inserted into your XML document by using a character reference. The syntax is: &#nnn; Some symbols also can be identified using entity reference. The syntax is: &#entity; New Perspectives on HTML, CSS, and XML 4th edition 28

Using Character and Entity References nnn is a character reference number or name from the ISO/IEC character set. entity is the name assigned to the symbol. ISO/IEC character set is an international numbering system for referencing characters from virtually any language. Character references in XML are the same as in HTML. New Perspectives on HTML, CSS, and XML 4th edition 29

Using Character and Entity References New Perspectives on HTML, CSS, and XML 4th edition 30

Using Character and Entity References New Perspectives on HTML, CSS, and XML 4th edition 31

Parsed Character Data Parsed character data (PCDATA) consists of all those characters that XML treats as parts of the code of XML document The XML declaration The opening and closing tags of an element Empty element tags Character or entity references Comments New Perspectives on HTML, CSS, and XML 4th edition 32

Character Data and White Space Character data is not processed, but instead is treated as pure data content. White space refers to nonprintable characters such as spaces (created by pressing the Spacebar), new line characters (created by pressing the Enter key), or tab characters (created by pressing the Tab key). HTML applies white space stripping, in which consecutive occurrences of white space are treated as a single space. New Perspectives on HTML, CSS, and XML 4th edition 33

Creating a CDATA Section A CDATA section is a block of text that XML treats as character data only. The syntax to create a CDATA section is: <! [CDATA [ character data ] ]> A CDATA section may contain most markup characters, such as <, >, and &. New Perspectives on HTML, CSS, and XML 4th edition 34

Creating CDATA Section This example shows an element named htmlcode that contains a CDATA section, which is used to store several HTML tags: <htmlcode> <![CDATA[ <h1>SJB Pet Boutique</h1> <h2>Fashion for Pets and Their Humans</h2> ]]> </htmlcode> New Perspectives on HTML, CSS, and XML 4th edition 35

Example of CDATA Section New Perspectives on HTML, CSS, and XML 4th edition 36

Formatting XML Data with CSS XML documents do not include any information about how they should be rendered. Rendering is determined solely by the parser. Link the XML document to a style sheet to format the document. The XML parser will combine the style sheet with the XML document and will render a single formatted document. New Perspectives on HTML, CSS, and XML 4th edition 37

Formatting XML Data with CSS New Perspectives on HTML, CSS, and XML 4th edition 38

Applying a Style to an Element Cascading Style Sheets (CSS) – style sheet language. To apply a style sheet to a document, use the following style declaration: selector { attribute1: value1; attribute2: value2; … } selector is an element (or set of elements, separated by comma) from the XML document. attribute and value are the style attributes and attribute values to be applied to the document. New Perspectives on HTML, CSS, and XML 4th edition 39

Applying a Style to an Element For example: author { color: red; font-weight: bold; } Will display the text of the artist element in a red boldface type. New Perspectives on HTML, CSS, and XML 4th edition 40

Inserting a Processing Instruction The link from the XML document to a style sheet is created using a processing instruction. A processing instruction is a command that tells an XML parser how to process the document. Processing instruction syntax: <?target instruction ?> target identifies the program (or object) to which the processing instruction is directed and instruction is information that the document passes on to the parser for processing <?xml-stylesheet type=”text/css” href=”url” media=”type” ?> New Perspectives on HTML, CSS, and XML 4th edition 41

The sjbpet.xml Document with Style Sheet Applied New Perspectives on HTML, CSS, and XML 4th edition 42

Working with Namespaces Namespace – a defined collection of element and attribute names. Applying a namespace to an XML document involves two steps: Declare the namespace. Identify the elements and attributes within the document that belong to that namespace. New Perspectives on HTML, CSS, and XML 4th edition

Declaring a Namespace Syntax: <element xmlns:prefix=”uri”> ... </element> element is the element in which the namespace is declared, prefix is a string of characters that you’ll add to element and attribute names to associate them with the declared namespace, and uri is a Uniform Resource Identifier (URI)—a text string that uniquely identifies a resource. Example: <products xmlns:prd=”http://example.com/sjbpetboutique/products”> ... </products> New Perspectives on HTML, CSS, and XML 4th edition

Applying a Default Namespace A default namespace is declared omitting the prefix in the namespace declaration. Syntax: <element xmlns=”uri”> ... </element> Example: <products xmlns=”http://example.com/sjbpetboutique/products”> New Perspectives on HTML, CSS, and XML 4th edition