Scribd
Upload
13 views

unit 2 wt

The document provides a comprehensive overview of HTML, including its basic structure, common tags, and their functions such as headings, paragraphs, lists, tables, and forms. It explains how to create various elements like images, input controls, and frames, along with examples of HTML code. Additionally, it highlights the importance of HTML in web development as the foundational language for creating web pages.

Uploaded by

sabedod122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

unit 2 wt

The document provides a comprehensive overview of HTML, including its basic structure, common tags, and their functions such as headings, paragraphs, lists, tables, and forms. It explains how to create various elements like images, input controls, and frames, along with examples of HTML code. Additionally, it highlights the importance of HTML in web development as the foundational language for creating web pages.

Uploaded by

sabedod122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

<h2>This is aheading</h2>

HTML Common tags:- <h3>This is aheading</h3>


<h4>This is aheading</h4>
HTML is the building block for web pages. HTML is a format that tells a computer how to <h5>This is aheading</h5>
display a web page. The documents themselves are plain text files with special "tags" or codes <h6>This is aheading</h6>
that a web browser uses to interpret and display information on your computer screen. Paragraphs:-

• HTML stands for Hyper Text MarkupLanguage Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the
• An HTML file is a text file containing small markuptags align attribute with a paragraph tag as well.
• The markup tags tell the Web browser how to display thepage
<p align="left">This is a paragraph</p>
• An HTML file must have an htm or html fileextension. <p align="center">this is another paragraph</p>
HTML Tags:- HTML tags are used to mark-up HTML elements .HTML tags are surrounded by
Note: You must indicate paragraphs with <p> elements. A browser ignores any
the two characters < and >. The surrounding characters are called angle brackets. HTML tags
indentations or blank lines in the source text. Without <p> elements, the documentbecomes
normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end
one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.
tag . The text between the start and end tags is the element content . HTML tags are not case
sensitive, <B>means the same as<b>.
Line Breaks:-
The most important tags in HTML are tags that define headings, paragraphs and line breaks. The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
Tag Description The <br> tag forces a line break wherever you place it. It is similar to single spacing in a
<!DOCTYPE...> This tag defines the document type and HTML version. document.
This Code output
<html> This tag encloses the complete HTML document and mainly comprises of
<p>This <br> is a para<br> graph with This
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags. is a para
line breaks</p> graph with line breaks
<head> This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.
Horizontal Rule The element is used for horizontal rules that act as dividers between sections
<title> The <title> tag is used inside the <head> tag to mention the document title.
like this:
<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc. The horizontal rule does not have a closing tag. It takes attributes such as align and width
<p> This tag represents a paragraph. Code Output
<h1> to <h6> Defines header 1 to header 6 <hr width="50%" align="center">

<br> Inserts a single line break Sample html program


<!DOCTYPE html>
<hr> Defines a horizontal rule <html>
<head>
<!--> Defines a comment
<title>This is document title
</title>
Headings:- </head>
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> <body>
defines the smallest. <h1>This is a heading</h1>
<h1>This is a heading</h1> <p>Document contentgoeshere ...... </p>
</body>
</html>

Web Technologies Web Technologies


• Type the above program in notepad and save with some file nameeg:sample.html
• Open the file with browser and the webpage looks likethis

Lists:-HTML offers web authors three ways for specifying lists of information. HTML Definition Lists:- HTML and XHTML supports a list style which is called definition
All lists must contain one or more list elements. Lists are of three types lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal
1) Un ordered list way to present a glossary, list of terms, or other name/value list. Definition List makes use of
2)Ordered List following three tags.
3)Definitionlist 1). <dl> - Defines the start of the list
2). <dt> - A term
HTML Unordered Lists:An unordered list is a collection of related items that have no special 3). <dd> - Termdefinition
order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked 4). </dl> - Defines the end of thelist
with a bullet.
Example
<!DOCTYPE html>
<html>
<!DOCTYPE html> <head>
<html> <title>HTML Definition List</title>
<head> </head>
<title>HTML Unordered List</title> <body>
</head> <dl>
<body> <dt><b>HTML</b></dt><dd>This stands for Hyper Text Markup Language</dd>
<ul> <li>Beetroot</li> <dt><b>HTTP</b></dt><dd>This stands for Hyper Text Transfer Protocol</dd>
<li>Ginger</li><li>Potato</li> </dl>
<li>Radish</li> </body>
</ul> </html>
</body>
</html>
HTML tables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells. The HTML tables are created using the <table>tag inwhich the
HTML Ordered Lists:- items are numbered list instead of bulleted, This list is created by using <tr>tag is used to create table rows and <td>tag is used to create data cells.
<ol>tag.
Example:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>HTML Ordered List</title> <title>HTML Tables</title>
</head> </head>
<body> <body>
<ol> <table border="1">
<li>Beetroot</li> <tr>
<li>Ginger</li> <td>Row 1, Column 1</td><td>Row 1, Column 2</td>
<li>Potato</li> </tr>
<li>Radish</li> <tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td>
</ol> </tr>
</body> </table>
</html> </body>
Web Technologies Page 9 WebTechnolog<ie/h
s tml> Page 10
top Align the image at the top

bottom Align the image at the bottom


Table Heading: Table heading can be defined using <th>tag. This tag will be put to replace Example
<td> tag, which is used to represent actual data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element in any row.
<!DOCTYPE html>
Tables Backgrounds: set table background using one of the following two ways: <html>
1)bgcolor attribute - You can set background color for whole table or just for one cell. <head>
2) background attribute - You can set background image for whole table or just for one cell. You <title>Using Image in Webpage</title>
can also set border color also using bordercolorattribute. </head>
<body><p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
<!DOCTYPE html> </body>
<html> </html>
<head>
<title>HTML Tables</title></head> HTML FORMS:
<body> HTML Forms are required to collect some data from the site visitor. For example, during
<table border="1"bordercolor="red" bgcolor="yellow">
user registration you would like to collect information such as name, email address, credit card,
<tr><th>Name</th> etc. A form will take input from the site visitor and then will post it to a back-end application
<th>Salary</th></tr> such as CGI, ASP Script or PHP script etc. The back-end application will perform required
<td>Jayapal </td><td>50,000.00</td> processing on the passed data based on defined business logic inside the application. There are
</tr> various form elements available like text fields, text area fields, drop-down menus, radio buttons,
<tr><td>Ravi</td><td>45,000.00</td> checkboxes, etc.
</tr>
</table>
</body> <form action="Script URL" method="GET|POST"> form elements like input, text area etc. </form>
</html>

Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page.
Insert Image:
insert any image in the web page by using <img>tag.
<img align="left|right|middle|top|bottom">
Attribute Values

Value Description

left Align the image to the left

right Align the image to the right


<img src="Image URL" ... attributes-
middle Align the image in the middle

WebTechnologies Page11
3) Multi-line text input controls - This is used when the user is required to give details that may
belongerthanasinglesentence.Multi-lineinputcontrolsarecreatedusing HTML
HTML Form Controls: <textarea> tag.
There are different types of form controls that you can use to collect data using HTML form:
➢ Text InputControls
➢ Checkboxes Controls <!DOCTYPE html>
➢ Radio BoxControls <html>
➢ Select BoxControls <head>
➢ File Selectboxes <title>Multiple-Line Input Control</title>
➢ Hidden Controls </head>
➢ ClickableButtons <body>
➢ Submit and ResetButton <form> Description: <br />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
Text Input Controls:-
</form>
There are three types of text input used on forms:
</body>
1) Single-line text input controls - This control is used for items that require only one </html>
line of user input, such as search boxes or names. They are created usingHTML
<input>tag. Checkboxes Controls:-
Checkboxes are used when more than one option is required to be selected. They are also
<input type="text">defines a one-line input field for text input: created using HTML <input> tag but type attribute is set to checkbox.
Here is an example HTML code for a form with two checkboxes:
Example:
<!DOCTYPE html>
<form> <html><head><title>Checkbox Control</title></head>
Firstname:<br> <body>
<input type="text"name="firstname"><br> <form>
Lastname:<br> <input type="checkbox" name="C++" value="on"> C++
<input type="text" name="lastname"> <br>
</form> <input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on"> JAVA
2) Password input controls - This is also a single-line text input but it masks the character as </form>
soon as a user enters it. They are also created using HTML <input>tag. </body></html>
Input Type Password
Radio Button Control:-
Radio buttons are used when out of many options, just one option is required to be selected.
<input type="password">defines a password field: They are also created using HTML <input> tag but type attribute is set toradio.

<!DOCTYPE html>
<html><head><title>Radio Box Control</title></head>
<form> <body><p>Select a Course</p>
User name:<br> <form>
<input type="text" name="username"><br> <input type="radio" name="subject" value="C++"> C++
User password:<br> <br>
<input type="radio" name="subject" value="JAVA"> JAVA
<input type="password" name="psw">
<br>
</form> <input type="radio" name="subject" value="HTML"> HTML
</form> </body></html>

Web Technologies Web Technologies


Select Box Controls :- A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a user can select one or more
options.

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head> Button Controls:-
<body> There are various ways in HTML to create clickable buttons. You can also create a clickable
<form>
button using <input> tag by setting its type attribute to button. The type attribute can take the
<select name="dropdown">
<option value="C++" selected>C++</option> following values:
<option value="JAVA">JAVA</option>
<option value="HTML">HTML</option>
</select>
</form>
</body>
</html>

File Select boxes:- If you want to allow a user to upload a file to your web site, you will need to
use a file upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.

<!DOCTYPE html>
<html>
<head> <!DOCTYPE html>
<title>File Upload Box</title> <html>
</head> <head>
<body> <title>File Upload Box</title>
<p>File Upload Box</p> </head>
<form>
<body>
<input type="file" name="fileupload" accept="image/*" />
</form> <form>
</body> <input type="submit" name="submit" value="Submit" />
</html> <input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="test1.png" />
</form>
Hidden Controls:- Hidden form controls are used to hide data inside the page which later on can </body></html>
be pushed to the server. This control hides inside the code and does not appear on the actual
page. For example, following hidden form is being used to keep current page number. When a
user will click next page then the value of hidden control will be sent to the web server and there
it will decide which page will be displayed next based on the passed currentpage. HTML frames: These are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the browser window
<html><head> <title>File Upload Box</title> </head> is known as a frameset. The window is divided into frames in a similar way the tables
<body>
<form>
areorganized: into rows andcolumns.
<p>This is page 10</p> To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset>
<input type="hidden" name="pagename" value="10" /> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
Web Technologies</form> </body> </html> Web Technologies
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
Internal CSS: An internal CSS is used to define a style for a single HTML page. An internal
CSS is defined in the <head> section of an HTML page, within a <style> element:
Note: HTML <frame>Tag. Not Supported in HTML5.
<html>
<head>
<frameset cols="25%,50%,25%"> <style>
<framesrc="frame_a.htm"> body {background-color: powderblue;}
<framesrc="frame_b.htm"> h1 {color: blue;}
<framesrc="frame_c.htm"> p {color:red;}
</frameset> </style>
</head>
<body>
<!DOCTYPE html> <h1>This is aheading</h1>
<html>
<p>This is aparagraph.</p>
<head>
</body>
<title>Page Title</title>
</html>
</head>
<body>
<iframe src="sample1.html" height="400" width="400"frameborder="1">
<h1>This is aHeading</h1> External CSS:-
<p>This is aparagraph.</p> An external style sheet is used to define the style for many HTML pages. With an external style
</iframe> sheet, you can change the look of an entire web site, by changing one file! To use an external
</body> style sheet, add a link to it in the <head> section of the HTML page:
</html>
CSS stands for Cascading Style Sheets <html>
CSS describes how HTML elements are to be displayed on screen, paper, or in other media. <head>
CSS saves a lot of work. It can control the layout of multiple web pages all at once. <link rel="stylesheet" href="styles.css">
CSS can be added to HTML elements in 3 ways: </head>
<body>
➢ Inline - by using the style attribute in HTMLelements <h1>This is aheading</h1>
➢ Internal - by using a <style> element in the <head>section <p>This is aparagraph.</p>
➢ External - by using an external CSSfile </body>
Inline CSS </html>
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element. An external style sheet can be written in any text editor. The file must not contain any HTML
This example sets the text color of the <h1> element to blue: code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
<h1 style="color:blue;">This is a Blue Heading</h1>
body { background-color: powderblue; }

h1 { color:blue; }
<html> <head> <title>Page Title</title></head>
<body> p { color:red; }
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
Web Technologies Page 17

WebTechnologies Page18
XML - XML stands for Extensible Mark-up Language, developed by W3C in 1996. It is a
CSS Fonts: The CSS color property defines the text color to be used. text-based mark-up language derived from Standard Generalized Mark-up Language
The CSS font-family property defines the font to be used.
(SGML). XML 1.0 was officially adopted as a W3C recommendation in 1998. XML was
The CSS font-size property defines the text size to be used.
designed to carry data, not to display data. XML is designed to be self-descriptive. XML is a
subset of SGML that can define your own tags. A Meta Language and tags describe the
<html>
content. XML Supports CSS, XSL, DOM. XML does not qualify to be a programming
<head>
<style> language as it does not performs any computation or algorithms. It is usually stored in a
h1 { simple text file and is processed by special software that is capable of interpretingXML.
color: blue;
font-family: verdana; The Difference between XML and HTML
font-size: 300%; 1. HTML is about displaying information, where asXML is about carrying information. In
} other words, XML was created to structure, store, and transport information. HTML was
p{ designed to display thedata.
color: red; 2. Using XML, we can create own tags where as in HTML it is not possible instead it offers
font-family: courier;
several built intags.
font-size: 160%;
} 3. XML is platform independent neutral and languageindependent.
</style> 4. XML tags and attribute names are case-sensitive where as in HTML it isnot.
</head> 5. XML attribute values must be single or double quoted where as in HTML it is not
<body> compulsory.
<h1>This is aheading</h1> 6. XML elements must be properlynested.
<p>This is aparagraph.</p>
7. All XML elements must have a closingtag.
</body>
</html> Well Formed XML Documents
A "Well Formed" XML document must have the following correct XML syntax:
CSS Border: The CSS border property defines a border around an HTML element. - XML documents must have a rootelement
CSS Padding: The CSS padding property defines a padding (space) between the text and the - XML elements must have a closing tag(start tag must have matching endtag).
border. - XML tags are casesensitive
- XML elements must be properly nestedEx:<one><two>Hello</two></one>
CSS Margin: The CSS margin property defines a margin (space) outside the border. - XML attribute values must bequoted
XML with correct syntax is "Well Formed" XML. XML validated against a DTD is "Valid"
<html><head> XML
<style>h
1{
color: blue;
font-family: verdana;
font-size: 300%; }
p{
color: red; font-size: 160%; border: 2px solid powderblue; padding: 30px; margin: 50px; }
</style>
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html>

Web Technologies Page 19

Web Technologies
What is Markup? Syntax 4: <!ELEMENT element-name (ANY)>
XML is a markup language that defines set of rules for encoding documents in a format that The keyword ANY declares an element with any content.
is both human-readable andmachine-readable. Example:
<!ELEMENT note (#PCDATA)>
Example for XML Document
Elements with children (sequences)
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!—xml declaration-->
Elements with one or more children are defined with the name of the children elements inside
<note>
the parentheses:
<to>MRCET</to>
<from>MRGI</from> <!ELEMENT parent-name (child-element-name)>EX:<!ELEMENT student (id)>
<heading>KALPANA</heading> <!ELEMENT id (#PCDATA)> or
<body>Hello, world! </body> <!ELEMENT element-name(child-element-name,child-element-name,. ..... )>
</note> Example: <!ELEMENT note (to,from,heading,body)>
• Xml document begins with XML declaration statement: <? xml version="1.0" When children are declared in a sequence separated by commas, the children must appear in
encoding="ISO-8859-1"?>. the same sequence in the document. In a full declaration, the children must also be declared,
• The next line describes the root element of the document:<note>. and the children can also have children. The full declaration of the note document will be:
• This element is "the parent" of all otherelements. <!ELEMENT note (to,from,heading,body)>
• The next 4 lines describe 4child elements of the root: to, from, heading, and body. And <!ELEMENTto (#CDATA)>
finally the last line defines the end of the root element : </note>. <!ELEMENTfrom (#CDATA)>
• The XML declaration has no closing tag i.e.</?xml> <!ELEMENT heading (#CDATA)>
• The default standalone value is set to no. Setting it to yes tells the processor there are no <!ELEMENTbody (#CDATA)>
external declarations (DTD) required for parsing the document. The file name extension
used for xml program is.xml. 2. Tags
Valid XML document Tags are used to markup elements. A starting tag like <element_name> mark up the
If an XML document is well-formed and has an associated Document Type Declaration beginning of an element, and an ending tag like </element_name> mark up the end of an
(DTD), then it is said to be a valid XML document. We will study more about DTD in the element.
chapter XML - DTDs. Examples:
A body element: <body>body text in between</body>.
XML DTD A message element: <message>some message in between</message>
Document Type Definition purpose is to define the structure of an XML document. It defines
the structure with a list of defined elements in the xml document. Using DTD we can specify 3. Attribute: The attributes are generally used to specify the values of the element. These are
the various elements types, attributes and their relationship with one another. Basically DTD specified within the double quotes. Ex: <flagtype=‖true‖>
is used to specify the set of rules for structuring data in any XML file. 4. Entities
Why use a DTD? Entities as variables used to define common text. Entity references are references to entities.
XML provides an application independent way of sharing data. With a DTD, independent Most of you will known the HTML entity reference: "&nbsp;" that is used to insert an extra
groups of people can agree to use a common DTD for interchanging data. Your application space in an HTML document. Entities are expanded when a document is parsed by an XML
can use a standard DTD to verify that data that you receive from the outside world is valid. parser.
You can also use a DTD to verify your own data. The following entities are predefined in XML:
&lt; (<), &gt;(>), &amp;(&), &quot;(") and &apos;(').
DTD - XML building blocks
Various building blocks of XML are- 5. CDATA: It stands for character data. CDATA is text that will NOT be parsed by a
1. Elements: The basic entity is element. The elements are used for defining the tags. The parser. Tags inside the text will NOT be treated as markup and entities will not beexpanded.
elements typically consist of opening and closing tag. Mostly only one element is used to 6. PCDATA: It stands for Parsed Character Data(i.e., text). Any parsed character data should
define a singletag. not contain the markup characters. The markup characters are < or > or &. If we want to use
Syntax1: <!ELEMENT element-name (element-content)> these characters then make use of &lt; , &gt; or &amp;. Think of character data as the text
Syntax 2: <!ELEMENT element-name (#CDATA)> found between the start tag and the end tag of an XML element. PCDATA is text that will be
#CDATA means the element contains character data that is not supposed to be parsed by a parsed by a parser. Tags inside the text will be treated as markup and entities will be
parser. or expanded.
Syntax 3: <!ELEMENT element-name (#PCDATA)>
#PCDATA means that the element contains data that IS going to be parsed by a parser. or <!DOCTYPE note

Web Technologies Web Technologies


[ DTD- Immediately after the XML header, the document type declaration follows, commonly
<!ELEMENT note (to,from,heading,body)> referred to as the DOCTYPE:
<!ELEMENT to (#PCDATA)>
<!DOCTYPE address [
<!ELEMENT from (#PCDATA)>
The DOCTYPE declaration has an exclamation mark (!) at the start of the element name. The
<!ELEMENT heading (#PCDATA)>
DOCTYPE informs the parser that a DTD is associated with this XML document.
<!ELEMENT body (#PCDATA)>
]> DTD Body- The DOCTYPE declaration is followed by body of the DTD, where you declare
elements, attributes, entities, and notations:
Where PCDATA refers parsed character data. In the above xml document the elements to,
<!ELEMENT address (name,company,phone)>
from, heading, body carries some text, so that, these elements are declared to carry text in
<!ELEMENT name (#PCDATA)>
DTD file.
<!ELEMENT company (#PCDATA)>
This definition file is stored with .dtd extension. <!ELEMENT phone_no (#PCDATA)>
DTD identifier is an identifier for the document type definition, which may be the path to a Several elements are declared here that make up the vocabulary of the <name> document.
file on the system or URL to a file on the internet. If the DTD is pointing to external path, it <!ELEMENT name (#PCDATA)> defines the element name to be of type "#PCDATA".
is called ExternalSubset. Here #PCDATA means parse-able text data. End Declaration - Finally, the declaration
The square brackets [ ] enclose an optional list of entity declarations called Internal Subset. section of the DTD is closed using a closing bracket and a closing angle bracket (]>). This
effectively ends the definition, and thereafter, the XML document followsimmediately.
Types of DTD:
Rules
1. InternalDTD
✓ The document type declaration must appear at the start of the document (preceded only by
2. ExternalDTD
the XML header) — it is not permitted anywhere else within thedocument.
1. Internal DTD ✓ Similar to the DOCTYPE declaration, the element declarations must start with an
A DTD is referred to as an internal DTD if elements are declared within the XML files. To exclamationmark.
refer it as internal DTD, standalone attribute in XML declaration must be set to yes. This ✓ The Name in the document type declaration must match the element type of the root
means, the declaration works independent of external source. element.
Syntax: External DTD
The syntax of internal DTD is as shown: In external DTD elements are declared outside the XML file. They are accessed by
specifying the system attributes which may be either the legal .dtd file or a valid URL. To
<!DOCTYPE root-element [element-declarations]>
refer it as external DTD, standalone attribute in the XML declaration must be set as no. This
Where root-element is the name of root element and element-declarations is where you means, declaration includes information from the externalsource.
declare the elements.
Syntax Following is the syntax for external DTD:
Example:
<!DOCTYPE root-element SYSTEM "file-name">
Following is a simple example of internal DTD:
where file-name is the file with .dtd extension.
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<!DOCTYPE address [ Example The following example shows external DTDusage:
<!ELEMENT address (name,company,phone)> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!ELEMENT name (#PCDATA)> <!DOCTYPE address SYSTEM "address.dtd">
<!ELEMENT company (#PCDATA)> <address>
<!ELEMENT phone (#PCDATA)> <name>Kalpana</name>
]> <company>MRCET</company>
<address> <phone>(040) 123-4567</phone>
<name>Kalpana</name> </address>
<company>MRCET</company>
The content of the DTD file address.dtd are as shown:
<phone>(040) 123-4567</phone>
<!ELEMENT address (name,company,phone)>
</address>
<!ELEMENT name (#PCDATA)>
Let us go through the above code: <!ELEMENT company (#PCDATA)>
Start Declaration- Begin the XML declaration with following statement <?xml version="1.0" <!ELEMENT phone (#PCDATA)>
encoding="UTF-8" standalone="yes" ?>
Types
You can refer to an external DTD by using either system identifiers or public identifiers.

Web Technologies Web Technologies


<contact xmlns:xsi=http://www.w3.org/2001/XMLSchema-
instancexsi:noNamespaceSchemaLocation=”contact.xsd”>
SYSTEM IDENTIFIERS
<name>KALPANA</name>
A system identifier enables you to specify the location of an external file containing DTD
<company>04024056789</company>
declarations. Syntax is as follows:
<phone>9876543210</phone>
<!DOCTYPE name SYSTEM "address.dtd" [...]>
</contact>
As you can see, it contains keyword SYSTEM and a URI reference pointing to the location of
Limitations of DTD:
the document.
• There is no built-in data type inDTDs.
PUBLIC IDENTIFIERS • No new data type can be created inDTDs.
Public identifiers provide a mechanism to locate DTD resources and are written as below:
<!DOCTYPE name PUBLIC "-//Beginning XML//DTD Address Example//EN"> • The use of cardinality (no. of occurrences) in DTDs islimited.
• Namespaces are notsupported.
As you can see, it begins with keyword PUBLIC, followed by a specialized identifier. Public
• DTDs provide very limited support for modularity andreuse.
identifiers are used to identify an entry in a catalog. Public identifiers can follow any format;
however, a commonly used format is called Formal Public Identifiers, or FPIs. • We cannot put any restrictions on textcontent.
• Defaults for elements cannot bespecified.
• DTDs are written in a non-XML format and are difficult tovalidate.
XML Schemas Strengths of Schema:
• XML Schema is commonly known as XML Schema Definition (XSD). It is used to • XML schemas provide much greater specificity thanDTDs.
describe and validate the structure and the content of XML data. XML schema defines the • They supports large number of built-in-datatypes.
elements, attributes and data types. Schema element supports Namespaces. It is similar to • They arenamespace-aware.
a database schema that describes the data in a database. XSD extension is“.xsd”. • They are extensible to futureadditions.
• This can be used as an alternative to XML DTD. The XML schema became the W#C
• They support theuniqueness.
recommendation in2001.
• It is easier to define data facets (restrictions ondata).
• XML schema defines elements, attributes, element having child elements, order of child
elements. It also defines fixed and default values of elements andattributes.
• XML schema also allows the developer to us datatypes. SCHEMA STRUCTURE
The Schema Element
Syntax :You need to declare a schema in your XML document as follows: <xs: schema xmlns: xs="http://www.w3.org/2001/XMLSchema">
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
Element definitions
Example : contact.xsd As we saw in the chapter XML - Elements, elements are the building blocks of XML
The following example shows how to use schema: document. An element can be defined within an XSD as follows:
<?xml version="1.0" encoding="UTF-8"?> <xs:element name="x" type="y"/>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
Data types:
<xs:element name="contact">
These can be used to specify the type of data stored in an Element.
<xs:complexType>
• String (xs:string)
<xs:sequence>
• Date (xs:date or xs:time)
<xs:element name="name" type="xs:string" />
• Numeric (xs:integeror xs:decimal)
<xs:element name="company" type="xs:string" />
<xs:element name="phone" type="xs:int" /> • Boolean (xs:boolean)
</xs:sequence> EX: Sample.xsd
</xs:complexType> <?xml version=‖1.0‖ encoading=‖UTF-8‖?>
</xs:element> <xs:schema xmlns:xs=http://www.w3.org/XMLSchema>
</xs:schema> <xs:element name="sname‖ type=‖xs:string"/>
The basic idea behind XML Schemas is that they describe the legitimate format that an XML /* <xs:element name="dob” type=”xs:date"/>
document can take. <xs:element name="dobtime” type=”xs:time"/>
XML Document: myschema.xml <xs:element name="marks” type=”xs:integer"/>
<?xml version="1.0" encoding="UTF-8"?> <xs:element name="avg” type=”xs:decimal"/>
<xs:element name="flag” type=”xs:boolean"/>*/

Web Technologies Web Technologies


</xs:schema> <xs:element name="Address1">
<xs:complexType>
Sample.xml:
<xs:sequence>
<?xml version=‖1.0‖ encoading=‖UTF-8‖?>
<xs:element name="address" type="AddressType" />
<sname xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
<xs:element name="phone1" type="xs:int" />
xsi:noNamespaceSchemaLocation="sample.xsd">
</xs:sequence>
Kalpana /*yyyy-mm-dd 23:14:34 600 92.5 true/false */
</xs:complexType>
</sname>
</xs:element>
Definition Types <xs:element name="Address2">
You can define XML schema elements in following ways: <xs:complexType>
<xs:sequence>
Simple Type - Simple type element is used only in the context of the text. Some of
<xs:element name="address" type="AddressType" />
predefined simple types are: xs:integer, xs:boolean, xs:string, xs:date. Forexample:
<xs:element name="phone2" type="xs:int" />
<xs:element name="phone_number" type="xs:int" />
</xs:sequence></xs:complexType></xs:element>
<phone>9876543210</phone>
Instead of having to define the name and the company twice (once for Address1 and once for
Default and Fixed Values for Simple Elements Address2), we now have a single definition. This makes maintenance simpler, i.e., if you
In the following example the default value is "red": decide to add "Postcode" elements to the address, you need to add them at just one place.
<xs:element name="color" type="xs:string" default="red"/>
Attributes
In the following example the fixed value is "red":
Simple elements cannot have attributes. If an element has attributes, it is considered to be of a
<xs:element name="color" type="xs:string" fixed="red"/>
complex type. But the attribute itself is always declared as a simple type. Attributes in XSD
provide extra information within an element. Attributes have name and type property as
Complex Type - A complex type is a container for other element definitions. This allows you
shown below:
to specify which child elements an element can contain and to provide some structure within
<xs:attribute name="x" type="y"/>
your XML documents. For example:
Ex: <lastname lang="EN">Smith</lastname>
<xs:element name="Address">
<xs:complexType> <xs:attribute name="lang" type="xs:string"/>
<xs:sequence> Default and Fixed Values for Attributes
<xs:element name="name" type="xs:string"/>
<xs:attribute name="lang" type="xs:string" default="EN"/>
<xs:element name="company" type="xs:string"/>
<xs:element name="phone" type="xs:int" /> <xs:attribute name="lang" type="xs:string" fixed="EN"/>
</xs:sequence> Optional and Required Attributes
</xs:complexType> Attributes are optional by default. To specify that the attribute is required, use the "use"
</xs:element> attribute:
In the above example, Address element consists of child elements. This is a container for <xs:attribute name="lang" type="xs:string" use="required"/>
other <xs:element> definitions, that allows to build a simple hierarchy of elements in the
XML document. Restrictions on Content
When an XML element or attribute has a data type defined, it puts restrictions on the
Global Types - With global type, you can define a single type in your document, which can element's or attribute's content. If an XML element is of type "xs:date" and contains a string
be used by all other references. For example, suppose you want to generalize the person and like "Hello World", the element will not validate.
company for different addresses of the company. In such case, you can define a general type
as below: Restrictions on Values:
<xs:element name="AddressType"> The value of age cannot be lower than 0 or greater than 120:
<xs:complexType> <xs:element name="age">
<xs:sequence> <xs:simpleType>
<xs:element name="name" type="xs:string"/> <xs:restriction base="xs:integer">
<xs:element name="company" type="xs:string"/> <xs:minInclusive value="0"/>
</xs:sequence>
<xs:maxInclusive value="120"/>
</xs:complexType>
</xs:element> </xs:restriction>
</xs:simpleType></xs:element>
Now let us use this type in our example as below:

Web Technologies Web Technologies


Restrictions on a Set of Values
Note: When using the <all> indicator you can set the <minOccurs> indicator to 0 or 1 and the
The example below defines an element called "car" with a restriction. The only acceptable
<maxOccurs> indicator can only be set to 1 (the <minOccurs> and <maxOccurs> are
values are: Audi, Golf, BMW:
described later).
<xs:element name="car">
Choice Indicator
<xs:simpleType>
<xs:restriction base="xs:string"> The <choice> indicator specifies that either one child element or another can occur:
<xs:element name="person">
<xs:enumeration value="Audi"/>
<xs:complexType>
<xs:enumeration value="Golf"/> <xs:choice>
<xs:enumeration value="BMW"/> <xs:element name="employee" type="employee"/>
</xs:restriction> <xs:element name="member" type="member"/>
</xs:simpleType> </xs:choice></xs:complexType> </xs:element>
</xs:element> Sequence Indicator
Restrictions on Length
To limit the length of a value in an element, we would use the length, maxLength, and The <sequence> indicator specifies that the child elements must appear in a specific order:
minLength constraints. The value must be exactly eight characters: <xs:element name="person">
<xs:element name="password"> <xs:complexType>
<xs:simpleType> <xs:sequence>
<xs:restriction base="xs:string"> <xs:element name="firstname" type="xs:string"/>
<xs:lengthvalue="8"/> [<xs:minLengthvalue="5"/> <xs:maxLengthvalue="8"/>] <xs:element name="lastname" type="xs:string"/>
</xs:restriction></xs:simpleType></xs:element> </xs:sequence></xs:complexType></xs:element>
→Occurrence Indicators
XSD Indicators Occurrence indicators are used to define how often an element can occur.
We can control HOW elements are to be used in documents with indicators. Note: For all "Order" and "Group" indicators (any, all, choice, sequence, group name, and group
Indicators: There are seven indicators reference) the default value for maxOccurs and minOccurs is 1.
Order indicators:
• All maxOccurs Indicator
• Choice The <maxOccurs> indicator specifies the maximum number of times an element can occur:
• Sequence <xs:element name="person">
Occurrence indicators: <xs:complexType>
• maxOccurs <xs:sequence>
• minOccurs <xs:element name="full_name" type="xs:string"/>
Group indicators: <xs:element name="child_name" type="xs:string" maxOccurs="10"/>
• Groupname </xs:sequence>
• attributeGroupname </xs:complexType>
</xs:element>
→Order Indicators
Order indicators are used to define the order of the elements. minOccurs Indicator
All Indicator The <minOccurs> indicator specifies the minimum number of times an element can occur:
The <all> indicator specifies that the child elements can appear in any order, and that each <xs:element name="person">
child element must occur only once: <xs:complexType>
<xs:element name="person"> <xs:sequence>
<xs:complexType> <xs:element name="full_name" type="xs:string"/>
<xs:all> <xs:element name="child_name" type="xs:string" maxOccurs="10" minOccurs="0"/>
<xs:element name="firstname"type="xs:string"/> </xs:sequence>
<xs:element name="lastname"type="xs:string"/> </xs:complexType>
</xs:all> </xs:element>
</xs:complexType> Tip: To allow an element to appear an unlimited number of times, use the
</xs:element> maxOccurs="unbounded" statement:

Web Technologies Web Technologies


You must define an all, choice, or sequence element inside the group declaration. Thefolloing
EX: An XML file called "Myfamily.xml":
example defines a group named "persongroup", that defines a group of elements that must
<?xml version="1.0" encoding="UTF-8"?>
occur in an exact sequence:
<persons xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="family.xsd"> <xs:group name="persongroup">
<person> <xs:sequence>
<full_name>KALPANA</full_name> <xs:element name="firstname" type="xs:string"/>
<child_name>mrcet</child_name>
<xs:element name="lastname" type="xs:string"/>
</person>
<person> <xs:element name="birthday" type="xs:date"/>
<full_name>Tove Refsnes</full_name> </xs:sequence>
<child_name>Hege</child_name> </xs:group>
<child_name>Stale</child_name>
<child_name>Jim</child_name> After you have defined a group, you can reference it in another definition, like this:
<child_name>Borge</child_name> <xs:element name="person" type="personinfo"/>
</person> <xs:complexType name="personinfo">
<person> <xs:sequence>
<full_name>Stale Refsnes</full_name>
<xs:group ref="persongroup"/>
</person>
</persons> <xs:element name="country" type="xs:string"/>
</xs:sequence>
The XML file above contains a root element named "persons". Inside this root element we
</xs:complexType>
have defined three "person" elements. Each "person" element must contain a "full_name"
element and it can contain up to five "child_name" elements.
Here is the schema file "family.xsd": Attribute Groups
Attribute groups are defined with the attributeGroup declaration, like this:
<?xml version="1.0" encoding="UTF-8"?> <xs:attributeGroup name="groupname">
<xs:schema ...
xmlns:xs=http://www.w3.org/2001/XMLSchemaelementFor </xs:attributeGroup>
mDefault="qualified">
<xs:element name="persons"> The following example defines an attribute group named "personattrgroup":
<xs:complexType> <xs:attributeGroup name="personattrgroup">
<xs:sequence> <xs:attribute name="firstname" type="xs:string"/>
<xs:element name="person" maxOccurs="unbounded"> <xs:attribute name="lastname" type="xs:string"/>
<xs:complexType> <xs:attribute name="birthday" type="xs:date"/>
<xs:sequence> </xs:attributeGroup>
<xs:element name="full_name" type="xs:string"/>
<xs:element name="child_name" type="xs:string" minOccurs="0" maxOccurs="5"/> After you have defined an attribute group, you can reference it in another definition, like this:
</xs:sequence> <xs:element name="person">
</xs:complexType> <xs:complexType>
</xs:element> <xs:attributeGroup ref="personattrgroup"/></xs:complexType></xs:element>
</xs:sequence>
</xs:complexType> Example Program: "shiporder.xml"
</xs:element> <?xml version="1.0" encoding="UTF-8"?>
</xs:schema> <shiporder orderid="889923"
xmlns:xsi=http://www.w3.org/2001/XMLSchema-
→Group Indicators: Group indicators are used to define related sets of elements.
instancexsi:noNamespaceSchemaLocation="shiporder.xs
Element Groups d">
Element groups are defined with the group declaration, like this: <orderperson>John Smith</orderperson>
<xs:group name="groupname"> <shipto>
... <name>Ola Nordmann</name>
</xs:group> <address>Langgt 23</address>

Web Technologies Web Technologies


<city>4000 Stavanger</city> PCDATA is parsed. In a schema you can have primitive data types and custom data types
like you have used inprogramming.
<country>Norway</country>
Schema vs. DTD
</shipto> • XML Schemas are extensible to future additions
<item> • XML Schemas are richer and more powerful than DTDs
<title>Empire Burlesque</title> • XML Schemas are written in XML
<note>Special Edition</note> • XML Schemas support datatypes
<quantity>1</quantity> • XML Schemas support namespaces
<price>10.90</price>
</item> XML Parsers
<item> An XML parser converts an XML document into an XML DOM object - which can then be
<title>Hide yourheart</title> <quantity>1</quantity> manipulated with a JavaScript.
<price>9.90</price></item>
</shiporder>
Create an XML Schema "shiporder.xsd":
Two types of XML parsers:
<?xml version="1.0" encoding="UTF-8" ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> ➢ ValidatingParser
<xs:element name="shiporder"> • It requires document type declaration
<xs:complexType> • It generates error if document doesnot
<xs:sequence> o Conform with DTDand
<xs:element name="orderperson" type="xs:string"/> o Meet XML validityconstraints
<xs:element name="shipto"> ➢ Non-validating Parser
<xs:complexType> • It checks well-formedness for xmldocument
<xs:sequence> • It can ignore externalDTD
<xs:element name="name" type="xs:string"/>
<xs:element name="address" type="xs:string"/> What is XML Parser?
<xs:element name="city" type="xs:string"/> XML Parser provides way how to access or modify data present in an XML document. Java
<xs:element name="country" type="xs:string"/> provides multiple options to parse XML document. Following are various types of parsers
</xs:sequence> which are commonly used to parse XML documents.
</xs:complexType>
</xs:element> Types of parsers:
<xs:element name="item" maxOccurs="unbounded"> • Dom Parser - Parses the document by loading the complete contents of the document and
<xs:complexType> creating its complete hiearchical tree inmemory.
<xs:sequence> • SAX Parser - Parses the document on event based triggers. Does not load the complete
<xs:element name="title" type="xs:string"/> document into thememory.
<xs:element name="note" type="xs:string" minOccurs="0"/> • JDOM Parser - Parses the document in similar fashion to DOM parser but in more easier
<xs:element name="quantity" type="xs:positiveInteger"/> way.
<xs:element name="price" type="xs:decimal"/> • StAX Parser - Parses the document in similar fashion to SAX parser but in more efficient
</xs:sequence>
way.
</xs:complexType>
• XPath Parser - Parses the XML based on expression and is used extensively in
</xs:element> conjuction withXSLT.
</xs:sequence> • DOM4J Parser - A java library to parse XML, XPath and XSLT using Java Collections
<xs:attribute name="orderid" type="xs:string" use="required"/> Framework , provides support for DOM, SAX andJAXP.
</xs:complexType>
</xs:element>
DOM-Document Object Model
</xs:schema>
The Document Object Model protocol converts an XML document into a collection of
XML DTD vs XML Schema objects in your program. XML documents have a hierarchy of informational units called
The schema has more advantages over DTD. A DTD can have two types of data in it, namely nodes; this hierarchy allows a developer to navigate through the tree looking for specific
the CDATA and the PCDATA. The CDATA is not parsed by the parser whereas the information. Because it is based on a hierarchy of information, the DOM is said to be tree
based. DOM is a way of describing those nodes and the relationships betweenthem.
Web Technologies Web Technologies
You can then manipulate the object model in any way that makes sense. This mechanism is Steps to Using DOM Parser
also known as the "random access" protocol, because you can visit any part of the data at any Let‘s note down some broad steps involved in using a DOM parser for parsing any XML file
time. You can then modify the data, remove it, or insert new data. injava.

The XML DOM, on the other hand, also provides an API that allows a developer to add, edit,
move, or remove nodes in the tree at any point in order to create an application. A DOM
parser creates a tree structure in memory from the input document and then waits for requests
from client. A DOM parser always serves the client application with the entire document no
matter how much is actually needed by the client. With DOM parser, method calls in client
application have to be explicit and forms a kind of chained method calls.
Document Object Model is for defining the standard for accessing and manipulating XML
documents. XML DOM is used for
DOM based XML Parsing:(tree based)
• Loading the xmldocument JAXP is a tool, stands for Java Api for Xml Processing, used for accessing and manipulating
• Accessing the xmldocument xml document in a tree based manner.
• Deleting the elements of xmldocument The following DOM javaClasses are necessary to process the XML document:
• Changing the elements of xml document • DocumentBuilderFactory class creates the instance ofDocumentBuilder.
According to the DOM, everything in an XML document is a node. It considers • DocumentBuilder produces a Document (a DOM) that conforms to the DOM specification.
The following methods and properties are necessary to process the XMLdocument:
• The entire document is a documentnode
Property Meaning
• Every XML element is an elementnode nodeName Finding the name of the node
• The text in the XML elements are textnodes nodeValue Obtaining value of the node
• Every attribute is an attributenode parentNode To get parnet node
• Comments are comment nodes childNodes Obtain child nodes
Attributes For getting the attributes values
The W3C DOM specification is divided into three major parts:
DOM Core- This portion defines the basic set of interfaces and objects for any structured Method Meaning
documents. getElementByTagName(name) To access the element by specifying its name
XML DOM- This part specifies the standard set of objects and interfaces for XML appendChild(node) To insert a child node
documents only. removeChild(node) To remove existing child node
HTML DOM- This part specifies the objects and interfaces for HTML documents only.
DOM Levels <html>
<body> BODY
• Level 1 Core: W3C Recommendation, October1998 <h1>Heading 1</h1>
lastChild

parentNode
<p>Paragraph.</p>
✓ It has feature for primitive navigation and manipulation of XMLtrees

firstChild
HEAD
<h2>Heading 2</h2>

✓ other Level 1 features are: All HTMLfeatures BODY </body>


<p>Paragraph.</p>
nextSibling nextSibling nextSibling
• Level 2 Core: W3C Recommendation, November2000 </html>

✓ It adds Namespace support and minor newfeatures


H1
#text
H1 P H2 P
previousSibling previousSibling previousSibling
✓ other Level 2 features are: Events, Views, Style, Traversal andRange

parentNode

parentNode

parentNode

parentNode
P

firstChild

firstChild

firstChild

firstChild
lastChild

lastChild

lastChild

lastChild
• Level 3 Core: W3C Working Draft, April2002
#text

H2
✓ It supports: Schemas, XPath, XSL, XSLT #text

P #text #text #text #text


We can access and parse the XML document in two ways: #text

➢ Parsingusing DOM (treebased)


➢ Parsing using SAX (Eventbased)
Parsing the XML doc. using DOM methods and properties are called as tree based approach
whereas using SAX (Simple Api for Xml) methods and properties are called as event based
approach.

Web Technologies Web Technologies


DOM Document Object DOM Advantages & Disadvantages
✓ There are12 types of nodes in a DOM Documentobject
ADVANTAGES
- Robust API for the DOMtree
1. Document node 7. EntityReferencenode - Relativelysimpletomodifythedatastructureandextractdata
2. Elementnode 8. Entitynode - It is goodwhen randomaccesstowidelyseparated partsofadocumentisrequired
3. Textnode 9. Commentnode - It supports both read and writeoperations
4. Attributenode 10. DocumentTypenode -
5. Processing instructionnode 11. DocumentFragmentnode Disadvantages
6. CDATA Sectionnode 12. Notationnode
Examples for Document method
<html>
<head>
<title>Change the Background</title>
</head>
<body>
<script language = "JavaScript">
function background()
{ var color = document.bg.color.value;
document.body.style.backgroundColor=color; }
</script>
<form name="bg">
Type the Color Name:<input type="text" name="color" size="20">
<br>
Click the Submit Button to change this Background color as your Color.
<br>
<input type="button" value="Submit" onClick='background()'>
</form>
</body>
</html>
DOM NODE Methods
Method Name Description

appendChild Appends a child node.


cloneNode Duplicates the node.
getAttributes Returns the node‘s attributes.
getChildNodes Returns the node‘s child nodes.
getNodeName Returns the node‘s name.
getNodeType Returns the node‘s type (e.g., element, attribute,
text, etc.).
getNodeValue Returns the node‘s value.
getParentNode Returns the node‘s parent.
hasChildNodes Returns true if the node has child nodes.
removeChild Removes a child node from thenode.
replaceChild Replaces a child node with another node.
setNodeValue Sets the node‘s value.
insertBefore Appends a child node in front of a childnode.

Web Technologies Page Web Technologies Page


- Stores the entire document in memory, It is memoryinefficient <phone>9959967192</phone>
- AsDomwaswrittenforanylanguage,methodnamingconventionsdon‘tfollowstandard java </personal_inf>
programmingconventions <dept>CSE</dept>
<col>MRCET</col>
DOM or SAX <group>MRGI</group>
</faculty>
DOM OUTPUT: XML document student is loaded
- Suitable for smalldocuments
- Easily modifydocument ActiveXObject: It creates empty xml document object.
- Memory intensive;Load the complete XMLdocument Use separate function for Loading an XML document: two.html
<html><head>
SAX <script type=‖text/javascript‖>
- Suitable for large documents; saves significant amounts ofmemory Function My_function(doc_file)
- Only traverse document once, start toend {
- Eventdriven try
- Limited standardfunctions. {
- xmlDocument=new ActiveXObject(―Microsoft.XMLDOM‖);
Loading an XML file:one.html }
<html><body> catch(e)
<script type=‖text/javascript‖> {
try try
{ {
xmlDocument=new ActiveXObject(―Microsoft.XMLDOM‖);
xmlDocument=document.implementation.createDocument("","",null);
} }
catch(e) catch(e){alert(e.message)}
{ }
try { try
xmlDocument=document.implementation.createDocument("","",null); {
} xmlDocument.async=false;
catch(e){alert(e.message)} xmlDocument.load(―faculty.xml‖);
} return(xmlDocument);
try }
{ catch(e){alert(e.message)}
xmlDocument.async=false; return(null);
xmlDocument.load(―faculty.xml‖); }
document.write(―XML document student is loaded‖); </script>
} </head>
catch(e){alert(e.message)} <body>
</script> <script type=‖text/javascript‖>
</body></html> xmlDoc=‖My_function(―faculty.xml‖);
faculty.xml: document.write(―XML document student is loaded‖);
<?xml version=‖1.0‖?> </script>
< faculty >
</body></html>
<eno>30</eno>
OUTPUT: XML document student is loaded
<personal_inf>
<name>Kalpana</name> Use of properties and methods: three.html
<address>Hyd</address> <html><head>

Web Technologies Page Web Technologies Page


<script type=‖text/javascript‖ src=‖my_function_file.js‖></script>
<script type=‖text/javascript‖ src=‖my_function_file.js‖></script>
</head><body>
</head><body>
<script type=‖text/javascript‖>
<script
xmlDocument=My_function(“faculty.xml”);
type=‖text/javascript‖>xmlDoc=My_function(“faculty
document.write(―XMLdocumentfacultyisloadedandcontentofthisfileis:‖);
1.xml”); value=xmlDoc.
document.write(―<br>‖);
getElementsByTagName(―name‖);
document.write(―ENO:‖+
document.write(―value[0].childNodes[0].nodeValue‖);
xmlDocument.getElementsByTagName(―eno‖)[0].childNodes[0].nodeValue);
</script></body></html>
document.write(―<br>‖);
OUTPUT: Kalpana
document.write(―Name:‖+
xmlDocument.getElementsByTagName(―name‖)[0].childNodes[0].nodeValue); XHTML: eXtensible Hypertext Markup Language
document.write(―<br>‖); Hypertext is simply a piece of text that works as a link. Markup language is a language of
document.write(―ADDRESS:‖+ writing layout information within documents. The XHTML recommended by W3C. Basically an
xmlDocument.getElementsByTagName(―address‖)[0].childNodes[0].nodeValue); XHTML document is a plain text file and it is very much similar to HTML. It contains rich text,
document.write(―<br>‖); means text with tags. The extension to this program should b either html or htm. These programs
document.write(―PHONE:‖+ can be opened in some web browsers and the corresponding web page can be viewed.
xmlDocument.getElementsByTagName(―phone‖)[0].childNodes[0].nodeValue); HTML Vs XHTML
document.write(―<br>‖); HTML XHTML
document.write(―DEPARTMENT:‖+ 1. The HTML tags are case insensitive. 1. The XHTML tags are case sensitive.
xmlDocument.getElementsByTagName(―dept‖)[0].childNodes[0].nodeValue); EX:<BoDy>--------- </body> EX:<body> -------- </body>
document.write(―<br>‖); 2. We can omit the closing tags sometimes. 2. For every tag there must be a closing tag.
document.write(―COLLEGE:‖+ EX: <h1>---------</h1>or<h1------------ />
xmlDocument.getElementsByTagName(―col‖)[0].childNodes[0].nodeValue); 3. The attribute values not always 3. The attribute values are must be quoted.
necessary to quote.
document.write(―<br>‖);
4. In HTML there are some implicit 4. In XHTML the attribute values must be
document.write(―GROUP:‖+ attribute values. specified explicitly.
xmlDocument.getElementsByTagName(―group‖)[0].childNodes[0].nodeValue); 5. In HTML even if we do not follow the 5. In XHTML the nesting rules must be
</script> nesting rules strictly it does not cause much strictly followed. These nesting rules are-
</body> difference. - A form element cannot contain another form
</html> element.
OUTPUT: -an anchor element does not contain another
XML document faculty is loaded and content of this file is form element
-List element cannot be nested in the list
ENO: 30
element
NAME: Kalpana -If there are two nested elements then the
ADDRESS: Hyd inner element must be enclosed first before
PHONE: 9959967192 closing the outerelement
DEPARTMENT: CSE -Text element cannot be directly nested in
COLLEGE: MRCET form element
GROUP: MRGI
The relationship between SGML, XML, HTML and XHTML is as given below
We can access any XML element using the index value: four.html
<html><head>

Web Technologies Page Web Technologies Page


• Attr Represents an attribute of anelement.

• Text The actual content of an Element orAttr.


• Document Represents the entire XML document. A Document object is often referred to
Standard structure: DOCTYPE, html, head and body
The doctype is specified by the DTD. The XHTML syntax rules are specified by the file as a DOMtree.
xhtml11.dtd file.There are 3 types of DTDs. Common DOM methods
1. XHTML 1.0 Strict: clean markupcode When you are working with the DOM, there are several methods you'll use often:
2. XHTML 1.0 Transitional: Use some html features in the existing XHTMLdocument. • Document.getDocumentElement() - Returns the root element of thedocument.
3. XHTML 1.0 Frameset: Use of Frames in an XHTMLdocument.
• Node.getFirstChild() - Returns the first child of a givenNode.
EX: • Node.getLastChild() - Returns the last child of a givenNode.
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" • Node.getNextSibling() - These methods return the next sibling of a givenNode.
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> • Node.getPreviousSibling() - These methods return the previous sibling of a givenNode.
<html xmlns="http://www.w3c.org/1999/xhtml"> • Node.getAttribute(attrName) - For a given Node, returns the attribute with the
<head> requestedname.
<title>Sample XHTML Document</title>
Steps to Using DOM
</head>
<body bgcolor=‖#FF0000‖> Following are the steps used while parsing a document using DOM Parser.
<basefont face=‖arial‖ size=‖14‖ color=‖white‖>
• Import XML-relatedpackages.
<h1>MRCET</h1>
<h2>MRCET</h2> • Create aDocumentBuilder
<h3>MRCET</h3> • Create a Document from a file orstream
<h4> KALPANA</h4> • Extract the rootelement
<h5> KALPANA</h5> • Examineattributes
<h6>KALPANA</h6> • Examinesub-elements
<p><center> XHTML syntax rules are specified by the file xhtml11.dtd file. </center></p>
<divalign="right"><b>XHTMLstandardsforeXtensibleHypertextMarkupLanguage.</b>XHT DOM
ML syntax rules are specified by the file xhtml11.dtdfile.</div>
<pre><b>XHTML standards for <i>eXtensible Hypertext Markup
Language.</i></b>XHTML syntax rules are specified by the file
xhtml11.dtdfile.</pre>
</basefont>
</body>
</html>

DOM in JAVA
DOM interfaces
The DOM defines several Java interfaces. Here are the most common interfaces:
• Node - The base datatype of theDOM.
• Element - The vast majority of the objects you'll deal with areElements.

Web Technologies Page Web Technologies Page


import java.io.*; SAX:
import javax.xml.parsers.*;
import org.w3c.dom.*; SAX (the Simple API for XML) is an event-based parser for xml documents. Unlike a DOM
import org.xml.sax.*; parser, a SAX parser creates no parse tree. SAX is a streaming interface for XML, which means
public class parsing_DOMDemo that applications using SAX receive event notifications about the XML document being
{ processed an element, and attribute, at a time in sequential order starting at the top of the
public static void main(String[] args) document, and ending with the closing of the ROOT element.
{ • Reads an XML document from top to bottom, recognizing the tokens that make up a
try well-formed XMLdocument
{ • Tokens are processed in the same order that they appear in thedocument
System.out.println(―enter the name of XML document‖); • Reports the application program the nature of tokens that the parser has encountered as
BufferedReader input=new Bufferedreader(new InputStreamReader(System.in)); theyoccur
String file_name=input.readLine(); • The application program provides an "event" handler that must be registered with the
File fp=new File(file_name); parser
if(fp.exists()) • As the tokens are identified, callback methods in the handler are invoked with the
{ relevantinformation
try
{ When to use?
DocumentBuilderFactory Factory_obj= DocumentBuilderFactory.newInstance(); You should use a SAX parser when:
• You can process the XML document in a linear fashion from the topdown
• The document is not deeplynested
DocumentBuilder builder=Factory_obj.newDocumentBuilder();
• You are processing a very large XML document whose DOM tree would consume too
InputSource ip_src=new InputSource(file_name);
much memory.Typical DOM implementations use ten bytes of memory to represent one
Document doc=builder.parse(ip_src);
byte ofXML
System.out.println(―file_name+‖is well-formed.‖);
• The problem to be solved involves only part of the XMLdocument
}
catch (Exception e)
{
System.out.println(file_name+‖is not well-formed.‖);
System.exit(1);
} }
else
{
System.out.println(―file not found:‖+file_name);
}}
catch(IOException ex)
{
ex.printStackTrace();
}
}}

Web Technologies Page Web Technologies Page


• Data is available as soon as it is seen by the parser, so SAX works well for an XML an XML document element.
document that arrives over astream
ContentHandler Interface
Disadvantages of SAX This interface specifies the callback methods that the SAX parser uses to notify an application
• We have no random access to an XML document since it is processed in a forward-only program of the components of the XML document that it has seen.
manner • void startDocument() - Called at the beginning of adocument.
• If you need to keep track of data the parser has seen or change the order of items, you • void endDocument() - Called at the end of adocument.
must write the code and store the data on yourown • void startElement(String uri, String localName, String qName, Attributes atts) -
• The data is broken into pieces and clients never have all the information as a whole Called at the beginning of anelement.
unless they create their own datastructure • void endElement(String uri, String localName,String qName) - Called at the end of
The kinds of events are: anelement.
• void characters(char[] ch, int start, int length) - Called when character data is
• The start of the document isencountered encountered.
• The end of the document isencountered • void ignorableWhitespace( char[] ch, int start, int length) - Called when a DTD is
present and ignorable whitespace isencountered.
• The start tag of an element isencountered
• void processingInstruction(String target, String data) - Called when a processing
• The end tag of an element isencountered instruction isrecognized.
• Character data isencountered • void setDocumentLocator(Locator locator)) - Provides a Locator that can be used to
• A processing instruction isencountered identify positions in thedocument.
• void skippedEntity(String name) - Called when an unresolved entity isencountered.
Scanning the XML file from start to end, each event invokes a corresponding callback method • void startPrefixMapping(String prefix, String uri) - Called when a new namespace
that the programmer writes. mapping isdefined.
• void endPrefixMapping(String prefix) - Called when a namespace definition ends its
SAX packages scope.
javax.xml.parsers: Attributes Interface
org.xml.sax: Describing few interfaces forparsing This interface specifies methods for processing the attributes connected to an element.
• int getLength() - Returns number of attributes,etc.
SAX classes
• SAXParser Defines the API that wraps an XMLReader implementationclass SAX simple API for XML
• SAXParserFactoryDefinesafactoryAPIthatenablesapplicationstoconfigureand import java.io.*;
obtain a SAX based parser to parse XMLdocuments import org.xml.sax;
• ContentHandler Receive notification of the logical content of adocument. import org.xml.sax.helpers;
public class parsing_SAXDemo
• DTDHandler Receive notification of basic DTD-relatedevents. {
• EntityResolver Basic interface for resolvingentities. public static void main(String[] args) throws IOException
• ErrorHandler Basic interface for SAX errorhandlers. {
• DefaultHandler Default base class for SAX eventhandlers. try{
System.out.println( enter the name of XML docu );
SAX parser methods BufferedReader input=new Bufferedreader(new InputStreamReader(System.in));
String file_name=input.readLine();
StartDocument() and endDocument() – methods called at the start and end of an XML
File fp=new File(file_name);
document. if(fp.exists())
StartElement() and endElement() – methods called at the start and end of a document {
element. try
Characters() – method called with the text contents in between the start and end tags of {
XMLReader reader=XMLReaderFactory.createXMLReader();

Web Technologies Page Web Technologies Page


reader.parse(file_name);
System.out.println( file_name+ is well-formed. );
}
catch (Exception e)
{
System.out.println(file_name+‖is not well-formed.‖);
System.exit(1);
}
}
else
{
System.out.println( file not file_name);
}
}
catch(IOException ex){ex.printStackTrace();}

}}

PHP started out as a small open source project that evolved as more and more people found out
how useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994.

Differences between DOM and SAX


DOM SAX
Stores the entire XML document into memory Parses node by node
before processing
Occupies more memory Doesn‘t store the XML in memory
We can insert or delete nodes We can‘t insert or delete a node
DOM is a tree model parser SAX is an event based parser
Document Object Model (DOM) API SAX is a Simple API for XML
Preserves comments Doesn‘t preserve comments
DOM is slower than SAX, heavy weight. SAX generally runs a little faster than DOM,
light weight.
Traverse in any direction. Top to bottom traversing is done in this
approach
Random Access Serial Access
Packages required to import Packages required to import
import javax.xml.parsers.*; import java.xml.parsers.*;
import javax.xml.parsers.DocumentBuilder; import org.xml.sax.*;
import import org.xml.sax.helpers;
javax.xml.parsers.DocumentBuilderFactory;

Web Technologies

You might also like