html, css, and xml tutorial 11 creating xml document

HTML, CSS, and XML

Tutorial 11Creating XML Document

XPXPXPXPObjectives• 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 documentsNew Perspectives on HTML, CSS, and XML 4th edition 2

XPXPXPXPObjectives (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 3

XPXPXPXPIntroducing 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.


XPXPXPXPIntroducing 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.


XPXPXPXPXML Syntax Rules


XPXPXPXPXML 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.


XPXPXPXPXML 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.


XPXPXPXPXML Vocabularies


XPXPXPXPWell-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.


XPXPXPXPThe 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)


XPXPXPXPThe Structure of an XML Document


XPXPXPXPThe 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.


XPXPXPXPThe 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” ?>


XPXPXPXPInserting 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 • This is the same syntax for HTML comments

XPXPXPXP


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.

XPXPXPXP


XML Parsing Process

XPXPXPXP


Exchanger XML Editor

XPXPXPXPWorking 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>


XPXPXPXPWorking 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>


XPXPXPXPNesting 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>


XPXPXPXPThe 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.


XPXPXPXP


The Element Hierarchy

XPXPXPXPCharting the Element Hierarchy


XPXPXPXPWriting the Document Body


XPXPXPXPWorking 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” />


XPXPXPXP


Working with Attributes

XPXPXPXPUsing 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;



• 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.


XPXPXPXPParsed 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


XPXPXPXPCharacter 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.


XPXPXPXPCreating 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 &.


XPXPXPXPCreating 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>


XPXPXPXPExample of CDATA Section


XPXPXPXPFormatting 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.


XPXPXPXPFormatting XML Data with CSS


XPXPXPXPApplying 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.


XPXPXPXPApplying 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.


XPXPXPXPInserting 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” ?>


XPXPXPXPThe sjbpet.xml Document with Style Sheet Applied


XPXPXPXP


Working with Namespaces• Namespace – a defined collection of element

and attribute names.• Applying a namespace to an XML document

involves two steps:1. Declare the namespace.2. Identify the elements and attributes within the

document that belong to that namespace.

XPXPXPXP


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>

XPXPXPXP


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”>

html, css, and xml tutorial 11 creating xml document

Documents

xml xml

xml document xml documents

xp xml today xml

structure of xml

xml files

xml vocabulary

xml parsers

xml tutorial