How do I use HTML and XML to

  • Slides: 30
Download presentation
How do I use HTML and XML to present information?

How do I use HTML and XML to present information?

Markup Languages • Set of commands that tell a program how to display content

Markup Languages • Set of commands that tell a program how to display content • Written in plain text • Browser converts markup language to a visual display • HTML, XML are markup languages

Basic HTML Document <HTML> <HEAD> <TITLE>The Title</TITLE> </HEAD> <BODY BGCOLOR=“#CCFFFF”> Here is the content

Basic HTML Document <HTML> <HEAD> <TITLE>The Title</TITLE> </HEAD> <BODY BGCOLOR=“#CCFFFF”> Here is the content of the page </BODY> </HTML>

HTML Components • Tags are enclosed in < > • Tags are closed with

HTML Components • Tags are enclosed in < > • Tags are closed with a / • Elements are an opened and closed tag – Example <TITLE>The Title</TITLE>

HTML Attributes • Tags can have attributes • BGCOLOR is an example • Name

HTML Attributes • Tags can have attributes • BGCOLOR is an example • Name value pairs – BGCOLOR=“#CCFFFF” – BGCOLOR is the name, #CCFFFF is the value • Minimized attributes have no value – SELECTED – BGFIXED

HTML Components • In HTML each tag has a meaning. e. g. <b>Hello</b> <b>bold</b>

HTML Components • In HTML each tag has a meaning. e. g. <b>Hello</b> <b>bold</b> and <i>italicized</i> • You can embed you data in these tags to present the information on the Web. • This structure is defined in a DTD, a Document Type Definition

XML Basics • • • XML - EXtensible Markup Language XML is much like

XML Basics • • • XML - EXtensible Markup Language XML is much like HTML Elements and tags Developer can create new tags as needed Document content is described rather than format • Must be well formed (more about this later)

XML Document Sections An XML document can have the following three sections • Prolog

XML Document Sections An XML document can have the following three sections • Prolog (optional) Stuff before the top-level, start-tag is called the "prolog". • Body • Epilog (optional) Stuff after the top-level, end-tag is called the "epilog"

Sample XML File <? xml version="1. 0"? > <Person> <name>Alan</name> <address>Abbeydale road</address> <city>Sheffield</city> <gender>Male</gender>

Sample XML File <? xml version="1. 0"? > <Person> <name>Alan</name> <address>Abbeydale road</address> <city>Sheffield</city> <gender>Male</gender> </Person> <!--This is a comment--> Prolog BODY Epilog

Another example of the same XML File <Person> <name>Sarah</name> <address>42, Oldbridge Court</address> <address>Oldbridge Road</address>

Another example of the same XML File <Person> <name>Sarah</name> <address>42, Oldbridge Court</address> <address>Oldbridge Road</address> <city>London</city> <gender>Female</gender> </Person>

Creating an XML Document Overview • • Research XML Applications Create a data model

Creating an XML Document Overview • • Research XML Applications Create a data model Write the ‘XML’ document Test the XML document

XML Snippet <customer> <name>John Smith</name> <age>35</age> </customer>

XML Snippet <customer> <name>John Smith</name> <age>35</age> </customer>

XML Entities and Data • Entities are XML files or documents • Data is

XML Entities and Data • Entities are XML files or documents • Data is part of an XML document • May be parsed or unparsed – Parsed holds all character data – Unparsed holds character or non character data

XML Names • Attributes and elements will be named • Standard programming rules apply

XML Names • Attributes and elements will be named • Standard programming rules apply – No spaces – Must begin with a letter – No _ or : • Name must not start with XML in any case

XML Elements • Fields in the XML document • Elements are often nested hierarchically

XML Elements • Fields in the XML document • Elements are often nested hierarchically – Must be nested correctly • All tags must have an ending tag • Elements may have attributes

XML Attributes • Must be in name-value pair format – Height=“ 65” • Any

XML Attributes • Must be in name-value pair format – Height=“ 65” • Any element may have an attribute • Two reserved attributes – Xml: space and xml: lang

XML Character Data • Character data is text in the document, not markup tags

XML Character Data • Character data is text in the document, not markup tags • Certain characters are reserved and must be entered using character references • & < > are typical character references

XML Comments • Just like HTML comments <!--This is a comment-->

XML Comments • Just like HTML comments <!--This is a comment-->

Tools used to develop HTML & XML Documents HTML – You can develop HTML

Tools used to develop HTML & XML Documents HTML – You can develop HTML documents in Front. Page or Dreamweaver XML - You can develop XML documents in XMLSpy

The main difference between XML and HTML XML was designed to carry data. XML

The main difference between XML and HTML XML was designed to carry data. XML was designed to describe HTML was designed to display data and to focus on what data is data and to focus on how data looks. XML is about describing information HTML is about displaying information,

XML Syntax The syntax rules of XML are very simple and very Strict. Lets

XML Syntax The syntax rules of XML are very simple and very Strict. Lets start by reviewing a simple XML file <? xml version="1. 0" encoding="ISO-8859 -1" ? > <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

A simple XML file containing data about an Email <? xml version="1. 0" encoding="ISO-8859

A simple XML file containing data about an Email <? xml version="1. 0" encoding="ISO-8859 -1" ? > <note> This line defines that this is an XML file This is the root element <to>Tove</to> These are the child elements <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

The same XML file with an error <? xml version="1. 0" encoding="ISO-8859 -1" ?

The same XML file with an error <? xml version="1. 0" encoding="ISO-8859 -1" ? > <note> <to>Tove</to> <from>Jani</Ffrom> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The XML page cannot be displayed cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later. End tag 'Ffrom' does not match the start tag 'from'. Line 5, Position 14 <from>Jani</Ffrom> -------^

XML Syntax All XML elements must have a closing tag In HTML, you would

XML Syntax All XML elements must have a closing tag In HTML, you would write <p> This is a paragraph In XML, you would write <p> This is a paragraph </p> XML Tags are case sensitive This is incorrect <Student> Phil</student> This is correct <Student> Phil</Student>

XML Syntax All XML elements must be properly nested This is incorrect <note> <To>

XML Syntax All XML elements must be properly nested This is incorrect <note> <To> Tove</note></To> This is correct <note> <To> Tove</To></note> All XML documents must have a root tag and only one root tag <root> <child> <subchild> </child> </root>

XML ELEMENTS XML Elements have Relationships XML elements have a child parent relationship Lets

XML ELEMENTS XML Elements have Relationships XML elements have a child parent relationship Lets review the following structure Book Title: My First XML Chapter 1: Introduction to XML • What is HTML • What is XML Chapter 2: XML Syntax • Elements must have a closing tag • Elements must be properly nested

XML ELEMENTS The book details structure in XML would look like <book> <title>My First

XML ELEMENTS The book details structure in XML would look like <book> <title>My First XML</title> <prod id="33 -657" media="paper"></prod> <chapter>Introduction to XML <para>What is HTML</para> <para>What is XML</para> </chapter> <chapter>XML Syntax <para>Elements must have a closing tag</para> <para>Elements must be properly nested</para> </chapter> </book>

XML ELEMENTS Book is the root element. Title, prod, and chapter are child elements

XML ELEMENTS Book is the root element. Title, prod, and chapter are child elements of book. Book is the parent element of title, prod, and chapter. Title, prod, and chapter are siblings (or sister elements) because they have the same parent.

"Well Formed" XML documents A "Well Formed" XML document has correct XML syntax. A

"Well Formed" XML documents A "Well Formed" XML document has correct XML syntax. A "Well Formed" XML document is a document that conforms to the XML syntax rules that were described in the previous slides

XML was not designed to DO anything Maybe it is a little hard to

XML was not designed to DO anything Maybe it is a little hard to understand, but XML does not DO anything. XML is created to structure, store, and to send information. The following example is a note to Tove from Jani, stored as XML: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The note has a header, and a message body. It also has sender and receiver information. But still, this XML document does not DO anything. It is just pure information wrapped in XML tags. Someone must write a piece of software to send, receive, or display it.