Scribd
Upload
1 views

html

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, originally developed in 1991 and currently at version HTML5. Learning HTML is essential for web development as it allows users to create websites, understand web structure, and facilitates the use of other programming languages. The document covers HTML tags, elements, lists, tables, images, and forms, providing examples and explanations of their usage.

Uploaded by

alexanderthehacker781
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

html

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, originally developed in 1991 and currently at version HTML5. Learning HTML is essential for web development as it allows users to create websites, understand web structure, and facilitates the use of other programming languages. The document covers HTML tags, elements, lists, tables, images, and forms, providing examples and explanations of their usage.

Uploaded by

alexanderthehacker781
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

UNIT – II

HTML(Hyper Text Markup Language): HTML stands for Hyper Text Markup Language, which is
the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but
"HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major
version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we
are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link",
etc.

Why to Learn HTML?


Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in
HTML language.
HTML is a MUST for students and working professionals to become a great Software Engineer specially
when they are working in Web Development Domain. I will list down some of the key advantages of
learning HTML:

• Create Web site - You can create a website or customize an existing web template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS
designing is a must skill.
• Understand web - If you want to optimize your website, to boost its speed and performance, it is good to
know HTML to yield best results.
• Learn other languages - Once you understands the basic of HTML then other related technologies like
javascript, php, or angular are become easier to understand.

HTML Common tags:-

Web Technologies Page 1


HTML is the building block for web pages. HTML is a format that tells a computer how to display
a web page. The documents themselves are plain text files with special "tags" or codes that a web
browser uses to interpret and display information on your computer screen.

• HTML stands for Hyper Text MarkupLanguage


• An HTML file is a text file containing small markuptags
• The markup tags tell the Web browser how to display thepage
• An HTML file must have an htm or html fileextension.

HTML Tags:- HTML tags are used to mark-up HTML elements .HTML tags are surrounded by
the two characters < and >. The surrounding characters are called angle brackets. HTML tags
normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end 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>.
The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.
<p> This tag represents a paragraph.
<h1> to <h6> Defines header 1 to header 6

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

Headings:-
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6>
defines the smallest.
<h1>This is a heading</h1>

Web Technologies Page 2


<h2>This is aheading</h2>
<h3>This is aheading</h3>
<h4>This is aheading</h4>
<h5>This is aheading</h5>
<h6>This is aheading</h6>
Paragraphs:-

Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the
align attribute with a paragraph tag as well.

<p align="left">This is a paragraph</p>


<p align="center">this is another paragraph</p>

Note: You must indicate paragraphs with <p> elements. A browser ignores any
indentations or blank lines in the source text. Without <p> elements, the documentbecomes
one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks:-
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it. It is similar to single spacing in a document.
This Code output
<p>This <br> is a para<br> graph with This
is a para
line breaks</p> graph with line breaks

Horizontal Rule The element is used for horizontal rules that act as dividers between sections
like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width
Code Output
<hr width="50%" align="center">

Sample html program


<!DOCTYPE html>
<html>
<head>
<title>This is document title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document contentgoeshere ...... </p>
</body>
</html>

Web Technologies Page 3


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

Lists:-HTML offers web authors three ways for specifying lists of information.
All lists must contain one or more list elements. Lists are of three types
1) Un ordered list
2)Ordered List
3)Definitionlist

HTML Unordered Lists: An unordered list is a collection of related items that have no special
order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked
with a bullet.
Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li><li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

HTML Ordered Lists:- items are numbered list instead of bulleted, This list is created by using
<ol>tag.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Web T echnologies Page 9
HTML Definition Lists:- HTML and XHTML supports a list style which is called definition
lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal
way to present a glossary, list of terms, or other name/value list. Definition List makes use of
following three tags.
1). <dl> - Defines the start of the list
2). <dt> - A term
3). <dd> - Termdefinition
4). </dl> - Defines the end of thelist

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt><dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt><dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</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
<tr>tag is used to create table rows and <td>tag is used to create data cells.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td><td>Row 1, Column 2</td>
</tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td>
</tr>
</table>
</body>
WebTechnolog<ie/hs tml> Page 10
Table Heading: Table heading can be defined using <th>tag. This tag will be put to replace
<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.
Tables Backgrounds: set table background using one of the following two ways:
1)bgcolor attribute - You can set background color for whole table or just for one cell.
2) background attribute - You can set background image for whole table or just for one cell. You
can also set border color also using bordercolorattribute.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title></head>
<body>
<table border="1"bordercolor="red" bgcolor="yellow">
<tr><th>Name</th>
<th>Salary</th></tr>
<td>Jayapal </td><td>50,000.00</td>
</tr>
<tr><td>Ravi</td><td>45,000.00</td>
</tr>
</table>
</body>
</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
top Align the image at the top

bottom Align the image at the bottom

WebTechnologies Page11
Example

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body><p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>

HTML FORMS:
HTML Forms are required to collect some data from the site visitor. For example, during
user registration you would like to collect information such as name, email address, credit card,
etc. A form will take input from the site visitor and then will post it to a back-end application such
as CGI, ASP Script or PHP script etc. The back-end application will perform required processing
on the passed data based on defined business logic inside the application. There are various form
elements available like text fields, text area fields, drop-down menus, radio buttons, checkboxes,
etc.

<form action="Script URL" method="GET|POST"> form elements like input, text area etc. </form>

Web Technologies Page 12


Form controls:
There are different types of form controls that you can use to collect data using HTML form:
➢ Text InputControls
➢ Checkboxes Controls
➢ Radio BoxControls
➢ Select BoxControls
➢ File Selectboxes
➢ Hidden Controls
➢ ClickableButtons
➢ Submit and ResetButton
Text Input Controls:-
There are three types of text input used on forms:
1) Single-line text input controls - This control is used for items that require only one
line of user input, such as search boxes or names. They are created usingHTML
<input>tag.

<input type="text">defines a one-line input field for text input:

Example:

<form>
Firstname:<br>
<input type="text"name="firstname"><br>
Lastname:<br>
<input type="text" name="lastname">
</form>

2) Password input controls - This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input>tag.Input Type Password

<input type="password">defines a password field:

<form>
User name:<br>
<input type="text"
name="username"><br> User
password:<br>
<input type="password" name="psw">
</form>

Web Technologies Page 13


3) Multi-line text input controls - This is used when the user is required to give details that may
belongerthanasinglesentence.Multi-lineinputcontrolsarecreatedusing HTML
<textarea> tag.

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
</form>
</body>
</html>

Checkboxes Controls:-
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.
Here is an example HTML code for a form with two checkboxes:

<!DOCTYPE html>
<html><head><title>Checkbox Control</title></head>
<body>
<form>
<input type="checkbox" name="C++" value="on"> C++
<br>
<input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on"> JAVA
</form>
</body></html>

Radio Button Control:-


Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set toradio.

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

Web Technologies Page 14


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>
<body>
<form>
<select name="dropdown">
<option value="C++" selected>C++</option>
<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>
<title>File Upload Box</title>
</head>
<body>
<p>File Upload Box</p>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

Hidden Controls:- Hidden form controls are used to hide data inside the page which later on can
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 current page.

<html><head> <title>File Upload Box</title> </head>


<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form> </body> </html>
Button Controls:-
There are various ways in HTML to create clickable buttons. You can also create a clickable button
using <input> tag by setting its type attribute to button. The type attribute can take the following
values:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="test1.png" />
</form>
</body></html>

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 is known as a frameset. The window
is divided into frames in a similar way the tables are organized: into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide
the window into frames. The rows attribute of <frameset> tag defines
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.
Note: HTML <frame>Tag. Not Supported in HTML5.

<frameset cols="25%,50%,25%">
<framesrc="frame_a.htm">
<framesrc="frame_b.htm">
<framesrc="frame_c.htm">
</frameset>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe src="sample1.html" height="400" width="400"frameborder="1">
<h1>This is aHeading</h1>
<p>This is aparagraph.</p>
</iframe>
</body>
</html>

CSS stands for Cascading Style Sheets:


CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
➢ Inline - by using the style attribute in HTMLelements
➢ Internal - by using a <style> element in the <head>section
➢ External - by using an external CSSfile
Inline CSS
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.
This example sets the text color of the <h1> element to blue:

<html>
<head> <body>
<title>Page Title</title>
</head>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body> </html> Page 17
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:

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color:red;}
</style>
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html>

External CSS:-
An external style sheet is used to define the style for many HTML pages. With an external style
sheet, you can change the look of an entire web site, by changing one file! To use an external
style sheet, add a link to it in the <head> section of the HTML page:

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is how the "styles.css" looks:

body { background-color: powderblue; }


h1 { color:blue; }

p { color:red; }

WebTechnologies Page18
CSS Fonts: The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
<html>
<head>
h1
{
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html> The CSS border property defines a border around an HTML element.
CSS Border:
CSS Padding: The CSS padding property defines a padding (space) between the text and the
border.
CSS Margin: The CSS margin property defines a margin (space) outside the border.

<html><head>

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


XML (Extensible Mark-up Language) - XML stands for Extensible Mark-up Language,
developed by W3C in 1996. It is a text-based mark-up language derived from Standard
Generalized Mark-up Language (SGML). XML 1.0 was officially adopted as a W3C
recommendation in 1998. XML was 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 content. XML Supports CSS, XSL, DOM. XML does not
qualify to be a programming language as it does not performs any computation or algorithms.
It is usually stored in a simple text file and is processed by special software that is capable of
interpreting XML.
The Difference between XML and HTML
1. HTML is about displaying information, whereas XML is about carrying information. In
other words, XML was created to structure, store, and transport information. HTML was
designed to display the data.
2. Using XML, we can create own tags where as in HTML it is not possible instead it offers
several built in tags.
3. XML is platform independent neutral and language independent.
4. XML tags and attribute names are case-sensitive where as in HTML it is not.
5. XML attribute values must be single or double quoted where as in HTML it is not
compulsory.
6. XML elements must be properly nested.
7. All XML elements must have a closing tag.
Well Formed XML Documents
A "Well Formed" XML document must have the following correct XML syntax:
- XML documents must have a root element
- XML elements must have a closing tag (start tag must have matching end tag).
- XML tags are case sensitive
- XML elements must be properly nested:<one><two>Hello</two></one>
- XML attribute values must be quoted
XML with correct syntax is "Well Formed" XML. XML validated against a DTD is "Valid"
XML.

What is Markup?
XML is a markup language that defines set of rules for encoding documents in a format that is
both human-readable and machine-readable.
Example for XML Document
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!—xml declaration-->
<note>
<to>MRCET</to>
<from>MRGI</from>
<heading>KALPANA</heading>
<body>Hello, world! </body>
</note>
• Xml document begins with XML declaration statement: <? xml version="1.0"
encoding="ISO-8859-1"?>.
• The next line describes the root element of the document:<note>.
• This element is "the parent" of all other elements.
• The next 4 lines describe 4child elements of the root: to, from, heading, and body. And
finally the last line defines the end of the root element : </note>.
• The XML declaration has no closing tag i.e.</?xml>
• The default standalone value is set to no. Setting it to yes tells the processor there are no
external declarations (DTD) required for parsing the document. The file name extension used
for xml program is.xml.
Valid XML document
If an XML document is well-formed and has an associated Document Type Declaration (DTD),
then it is said to be a valid XML document. We will study more about DTD in the chapter XML
- DTDs.
XML DTD
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
the various elements types, attributes and their relationship with one another. Basically DTD is
used to specify the set of rules for structuring data in any XML file.
Why use a DTD?
XML provides an application independent way of sharing data. With a DTD, independent
groups of people can agree to use a common DTD for interchanging data. Your application
can use a standard DTD to verify that data that you receive from the outside world is valid.
You can also use a DTD to verify your own data.
DTD - XML building blocks
Various building blocks of XML are-
1. Elements: The basic entity is element. The elements are used for defining the tags. The
elements typically consist of opening and closing tag. Mostly only one element is used to define
a singletag.
Syntax1: <!ELEMENT element-name (element-content)>
Syntax 2: <!ELEMENT element-name (#CDATA)>
#CDATA means the element contains character data that is not supposed to be parsed by a
parser. or
Syntax 3: <!ELEMENT element-name (#PCDATA)>
#PCDATA means that the element contains data that IS going to be parsed by a parser. or
Syntax 4: <!ELEMENT element-name (ANY)>
The keyword ANY declares an element with any content.
Example:
<!ELEMENT note (#PCDATA)>
Elements with children (sequences)
Elements with one or more children are defined with the name of the children elements inside
the parentheses:
<!ELEMENT parent-name (child-element-name)>EX:<!ELEMENT student (id)>
<!ELEMENT id (#PCDATA)> or
<!ELEMENT element-name(child-element-name,child-element-name,. ..... )>
Example: <!ELEMENT note (to,from,heading,body)>
When children are declared in a sequence separated by commas, the children must appear in
the same sequence in the document. In a full declaration, the children must also be declared,
and the children can also have children. The full declaration of the note document will be:
<!ELEMENT note (to,from,heading,body)>
<!ELEMENTto (#CDATA)>
<!ELEMENTfrom (#CDATA)>
<!ELEMENT heading (#CDATA)>
<!ELEMENTbody (#CDATA)>

2. Tags
Tags are used to markup elements. A starting tag like <element_name> mark up the beginning
of an element, and an ending tag like </element_name> mark up the end of an element.
Examples:
A body element: <body>body text in between</body>.
A message element: <message>some message in between</message>
3. Attribute: The attributes are generally used to specify the values of the element. These are
specified within the double quotes. Ex: <flagtype=‖true‖>
4. Entities
Entities as variables used to define common text. Entity references are references to entities.
Most of you will known the HTML entity reference: "&nbsp;" that is used to insert an extra
space in an HTML document. Entities are expanded when a document is parsed by an XML
parser.
The following entities are predefined in XML:
&lt; (<), &gt;(>), &amp;(&), &quot;(") and &apos;(').
5. CDATA: It stands for character data. CDATA is text that will NOT be parsed by a parser.
Tags inside the text will NOT be treated as markup and entities will not beexpanded.
6. PCDATA: It stands for Parsed Character Data(i.e., text). Any parsed character data should
not contain the markup characters. The markup characters are < or > or &. If we want to use
these characters then make use of &lt; , &gt; or &amp;. Think of character data as the text
found between the start tag and the end tag of an XML element. PCDATA is text that will be
parsed by a parser. Tags inside the text will be treated as markup and entities will be
expanded.
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
Where PCDATA refers parsed character data. In the above xml document the elements to,
from, heading, body carries some text, so that, these elements are declared to carry text in DTD
file.
This definition file is stored with .dtd extension.
DTD identifier is an identifier for the document type definition, which may be the path to a file
on the system or URL to a file on the internet. If the DTD is pointing to external path, it is
called ExternalSubset.
The square brackets [ ] enclose an optional list of entity declarations called Internal Subset.
Types of DTD:
1. Internal DTD
2. External DTD
1. Internal DTD
A DTD is referred to as an internal DTD if elements are declared within the XML files. To
refer it as internal DTD, standalone attribute in XML declaration must be set to yes. This means,
the declaration works independent of external source.
Syntax:
The syntax of internal DTD is as shown:
<!DOCTYPE root-element [element-declarations]>
Where root-element is the name of root element and element-declarations is where you
declare the elements.
Example:
Following is a simple example of internal DTD:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Kalpana</name>
<company>MRCET</company>
<phone>(040) 123-4567</phone>
</address>
Let us go through the above code:
Start Declaration- Begin the XML declaration with following statement <?xml version="1.0"
encoding="UTF-8" standalone="yes" ?>
DTD- Immediately after the XML header, the document type declaration follows, commonly
referred to as the DOCTYPE:
<!DOCTYPE address [
The DOCTYPE declaration has an exclamation mark (!) at the start of the element name. The
DOCTYPE informs the parser that a DTD is associated with this XML document.
DTD Body- The DOCTYPE declaration is followed by body of the DTD, where you declare
elements, attributes, entities, and notations:
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone_no (#PCDATA)>
Several elements are declared here that make up the vocabulary of the <name> document.
<!ELEMENT name (#PCDATA)> defines the element name to be of type "#PCDATA". Here
#PCDATA means parse-able text data. End Declaration - Finally, the declaration 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.
Rules
✓ The document type declaration must appear at the start of the document (preceded only by
the XML header) — it is not permitted anywhere else within thedocument.
✓ Similar to the DOCTYPE declaration, the element declarations must start with an
exclamationmark.
✓ The Name in the document type declaration must match the element type of the root
element.
External DTD
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 refer it as
external DTD, standalone attribute in the XML declaration must be set as no. This means,
declaration includes information from the externalsource.
Syntax Following is the syntax for external DTD:
<!DOCTYPE root-element SYSTEM "file-name">
where file-name is the file with .dtd extension.
Example The following example shows external DTDusage:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Kalpana</name>
<company>MRCET</company>
<phone>(040) 123-4567</phone>
</address>
The content of the DTD file address.dtd are as shown:
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
Types
You can refer to an external DTD by using either system identifiers or public identifiers.

SYSTEM IDENTIFIERS
A system identifier enables you to specify the location of an external file containing DTD
declarations. Syntax is as follows:
<!DOCTYPE name SYSTEM "address.dtd" [...]>
As you can see, it contains keyword SYSTEM and a URI reference pointing to the location of
the document.
PUBLIC IDENTIFIERS
Public identifiers provide a mechanism to locate DTD resources and are written as below:
<!DOCTYPE name PUBLIC "-//Beginning XML//DTD Address Example//EN">
As you can see, it begins with keyword PUBLIC, followed by a specialized identifier. Public
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.

XML Schemas:
• XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe
and validate the structure and the content of XML data. XML schema defines the elements,
attributes and data types. Schema element supports Namespaces. It is similar to a database
schema that describes the data in a database. XSD extension is“.xsd”.
• This can be used as an alternative to XML DTD. The XML schema became the W#C
recommendation in2001.
• 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.
Syntax :You need to declare a schema in your XML document as follows:
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
Example : contact.xsd
The following example shows how to use schema:
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="contact">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string" />
<xs:element name="company" type="xs:string" />
<xs:element name="phone" type="xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The basic idea behind XML Schemas is that they describe the legitimate format that an XML
document can take.
XML Document: myschema.xml
<?xml version="1.0" encoding="UTF-8"?>
<contact xmlns:xsi=http://www.w3.org/2001/XMLSchema-
instancexsi:noNamespaceSchemaLocation=”contact.xsd”>
<name>KALPANA</name>
<company>04024056789</company>
<phone>9876543210</phone>
</contact>
Limitations of DTD:
• There is no built-in data type inDTDs.
• No new data type can be created inDTDs.
• The use of cardinality (no. of occurrences) in DTDs islimited.
• Namespaces are notsupported.
• DTDs provide very limited support for modularity andreuse.
• We cannot put any restrictions on textcontent.
• Defaults for elements cannot bespecified.
• DTDs are written in a non-XML format and are difficult tovalidate.
Strengths of Schema:
• XML schemas provide much greater specificity thanDTDs.
• They supports large number of built-in-datatypes.
• They arenamespace-aware.
• They are extensible to futureadditions.
• They support theuniqueness.
• It is easier to define data facets (restrictions ondata).

SCHEMA STRUCTURE
The Schema Element
<xs: schema xmlns: xs="http://www.w3.org/2001/XMLSchema">
Element definitions
As we saw in the chapter XML - Elements, elements are the building blocks of XML
document. An element can be defined within an XSD as follows:
<xs:element name="x" type="y"/>
Data types:
These can be used to specify the type of data stored in an Element.
• String (xs:string)
• Date (xs:date or xs:time)
• Numeric (xs:integeror xs:decimal)
• Boolean (xs:boolean)
EX: Sample.xsd
<?xml version=‖1.0‖ encoading=‖UTF-8‖?>
<xs:schema xmlns:xs=http://www.w3.org/XMLSchema>
<xs:element name="sname‖ type=‖xs:string"/>
/* <xs:element name="dob” type=”xs:date"/>
<xs:element name="dobtime” type=”xs:time"/>
<xs:element name="marks” type=”xs:integer"/>
<xs:element name="avg” type=”xs:decimal"/>
<xs:element name="flag” type=”xs:boolean"/>*/
</xs:schema>
Sample.xml:
<?xml version=‖1.0‖ encoading=‖UTF-8‖?>
<sname xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="sample.xsd">
Kalpana /*yyyy-mm-dd 23:14:34 600 92.5 true/false */
</sname>
Definition Types
You can define XML schema elements in following ways:
Simple Type - Simple type element is used only in the context of the text. Some of
predefined simple types are: xs:integer, xs:boolean, xs:string, xs:date. Forexample:
<xs:element name="phone_number" type="xs:int" />
<phone>9876543210</phone>
Default and Fixed Values for Simple Elements
In the following example the default value is "red":
<xs:element name="color" type="xs:string" default="red"/>
In the following example the fixed value is "red":
<xs:element name="color" type="xs:string" fixed="red"/>

Complex Type - A complex type is a container for other element definitions. This allows you
to specify which child elements an element can contain and to provide some structure within
your XML documents. For example:
<xs:element name="Address">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="company" type="xs:string"/>
<xs:element name="phone" type="xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
In the above example, Address element consists of child elements. This is a container for other
<xs:element> definitions, that allows to build a simple hierarchy of elements in the XML
document.
Global Types - With global type, you can define a single type in your document, which can be
used by all other references. For example, suppose you want to generalize the person and
company for different addresses of the company. In such case, you can define a general type
as below:
<xs:element name="AddressType">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="company" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
Now let us use this type in our example as below:
<xs:element name="Address1">
<xs:complexType>
<xs:sequence>
<xs:element name="address" type="AddressType" />
<xs:element name="phone1" type="xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="Address2">
<xs:complexType>
<xs:sequence>
<xs:element name="address" type="AddressType" />
<xs:element name="phone2" type="xs:int" />
</xs:sequence></xs:complexType></xs:element>
Instead of having to define the name and the company twice (once for Address1 and once for
Address2), we now have a single definition. This makes maintenance simpler, i.e., if you
decide to add "Postcode" elements to the address, you need to add them at just one place.
Attributes
Simple elements cannot have attributes. If an element has attributes, it is considered to be of a
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 shown
below:
<xs:attribute name="x" type="y"/>
Ex: <lastname lang="EN">Smith</lastname>
<xs:attribute name="lang" type="xs:string"/>
Default and Fixed Values for Attributes
<xs:attribute name="lang" type="xs:string" default="EN"/>
<xs:attribute name="lang" type="xs:string" fixed="EN"/>
Optional and Required Attributes
Attributes are optional by default. To specify that the attribute is required, use the "use"
attribute:
<xs:attribute name="lang" type="xs:string" use="required"/>
Restrictions on Content
When an XML element or attribute has a data type defined, it puts restrictions on the element's
or attribute's content. If an XML element is of type "xs:date" and contains a string like "Hello
World", the element will not validate.
Restrictions on Values:
The value of age cannot be lower than 0 or greater than 120:
<xs:element name="age">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:minInclusive value="0"/>
<xs:maxInclusive value="120"/>
</xs:restriction>
</xs:simpleType></xs:element>
Restrictions on a Set of Values
The example below defines an element called "car" with a restriction. The only acceptable
values are: Audi, Golf, BMW:
<xs:element name="car">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="Audi"/>
<xs:enumeration value="Golf"/>
<xs:enumeration value="BMW"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
Restrictions on Length
To limit the length of a value in an element, we would use the length, maxLength, and
minLength constraints. The value must be exactly eight characters:
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:lengthvalue="8"/> [<xs:minLengthvalue="5"/> <xs:maxLengthvalue="8"/>]
</xs:restriction></xs:simpleType></xs:element>

XSD Indicators
We can control HOW elements are to be used in documents with indicators.
Indicators: There are seven indicators
Order indicators:
• All
• Choice
• Sequence
Occurrence indicators:
• maxOccurs
• minOccurs
Group indicators:
• Groupname
• attributeGroupname

→Order Indicators
Order indicators are used to define the order of the elements.
All Indicator
The <all> indicator specifies that the child elements can appear in any order, and that each
child element must occur only once:
<xs:element name="person">
<xs:complexType>
<xs:all>
<xs:element name="firstname"type="xs:string"/>
<xs:element name="lastname"type="xs:string"/>
</xs:all>
</xs:complexType>
</xs:element>
Note: When using the <all> indicator you can set the <minOccurs> indicator to 0 or 1 and the
<maxOccurs> indicator can only be set to 1 (the <minOccurs> and <maxOccurs> are
described later).
Choice Indicator
The <choice> indicator specifies that either one child element or another can occur:
<xs:element name="person">
<xs:complexType>
<xs:choice>
<xs:element name="employee" type="employee"/>
<xs:element name="member" type="member"/>
</xs:choice></xs:complexType> </xs:element>
Sequence Indicator
The <sequence> indicator specifies that the child elements must appear in a specific order:
<xs:element name="person">
<xs:complexType>
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence></xs:complexType></xs:element>
→Occurrence Indicators
Occurrence indicators are used to define how often an element can occur.
Note: For all "Order" and "Group" indicators (any, all, choice, sequence, group name, and group
reference) the default value for maxOccurs and minOccurs is 1.
maxOccurs Indicator
The <maxOccurs> indicator specifies the maximum number of times an element can occur:
<xs:element name="person">
<xs:complexType>
<xs:sequence>
<xs:element name="full_name" type="xs:string"/>
<xs:element name="child_name" type="xs:string" maxOccurs="10"/>
</xs:sequence>
</xs:complexType>
</xs:element>

minOccurs Indicator
The <minOccurs> indicator specifies the minimum number of times an element can occur:
<xs:element name="person">
<xs:complexType>
<xs:sequence>
<xs:element name="full_name" type="xs:string"/>
<xs:element name="child_name" type="xs:string" maxOccurs="10" minOccurs="0"/>
</xs:sequence>
</xs:complexType>
</xs:element>
Tip: To allow an element to appear an unlimited number of times, use the
maxOccurs="unbounded" statement:
EX: An XML file called "Myfamily.xml":
<?xml version="1.0" encoding="UTF-8"?>
<persons xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="family.xsd">
<person>
<full_name>KALPANA</full_name>
<child_name>mrcet</child_name>
</person>
<person>
<full_name>Tove Refsnes</full_name>
<child_name>Hege</child_name>
<child_name>Stale</child_name>
<child_name>Jim</child_name>
<child_name>Borge</child_name>
</person>
<person>
<full_name>Stale Refsnes</full_name>
</person>
</persons>
The XML file above contains a root element named "persons". Inside this root element we
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":
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema
xmlns:xs=http://www.w3.org/2001/XMLSchemaelementFor
mDefault="qualified">
<xs:element name="persons">
<xs:complexType>
<xs:sequence>
<xs:element name="person" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="full_name" type="xs:string"/>
<xs:element name="child_name" type="xs:string" minOccurs="0" maxOccurs="5"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
→Group Indicators: Group indicators are used to define related sets of elements.
Element Groups
Element groups are defined with the group declaration, like this:
<xs:group name="groupname">
...
</xs:group>

You must define an all, choice, or sequence element inside the group declaration. The following
example defines a group named "persongroup", that defines a group of elements that must occur
in an exact sequence:
<xs:group name="persongroup">
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
<xs:element name="birthday" type="xs:date"/>
</xs:sequence>
</xs:group>
After you have defined a group, you can reference it in another definition, like this:
<xs:element name="person" type="personinfo"/>
<xs:complexType name="personinfo">
<xs:sequence>
<xs:group ref="persongroup"/>
<xs:element name="country" type="xs:string"/>
</xs:sequence>
</xs:complexType>

Attribute Groups
Attribute groups are defined with the attributeGroup declaration, like this:
<xs:attributeGroup name="groupname">
...
</xs:attributeGroup>
The following example defines an attribute group named "personattrgroup":
<xs:attributeGroup name="personattrgroup">
<xs:attribute name="firstname" type="xs:string"/>
<xs:attribute name="lastname" type="xs:string"/>
<xs:attribute name="birthday" type="xs:date"/>
</xs:attributeGroup>
After you have defined an attribute group, you can reference it in another definition, like this:
<xs:element name="person">
<xs:complexType>
<xs:attributeGroup ref="personattrgroup"/></xs:complexType></xs:element>

Example Program: "shiporder.xml"


<?xml version="1.0" encoding="UTF-8"?>
<shiporder orderid="889923"
xmlns:xsi=http://www.w3.org/2001/XMLSchema-
instancexsi:noNamespaceSchemaLocation="shiporder.xs
d">
<orderperson>John Smith</orderperson>
<shipto>
<name>Ola Nordmann</name>
<address>Langgt 23</address>
<city>4000 Stavanger</city>
<country>Norway</country>
</shipto>
<item>
<title>Empire Burlesque</title>
<note>Special Edition</note>
<quantity>1</quantity>
<price>10.90</price>
</item>
<item>
<title>Hide yourheart</title> <quantity>1</quantity>
<price>9.90</price></item>
</shiporder>
Create an XML Schema "shiporder.xsd":
<?xml version="1.0" encoding="UTF-8" ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="shiporder">
<xs:complexType>
<xs:sequence>
<xs:element name="orderperson" type="xs:string"/>
<xs:element name="shipto">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="address" type="xs:string"/>
<xs:element name="city" type="xs:string"/
<xs:element name="country" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="item" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="note" type="xs:string" minOccurs="0"/>
<xs:element name="quantity" type="xs:positiveInteger"/>
<xs:element name="price" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
<xs:attribute name="orderid" type="xs:string" use="required"/>
</xs:complexType>
</xs:element>
</xs:schema>

XML DTD vs XML Schema


The schema has more advantages over DTD. A DTD can have two types of data in it, namely
the CDATA and the PCDATA. The CDATA is not parsed by the parser whereas the PCDATA
is parsed. In a schema you can have primitive data types and custom data types like you have
used in programming.
Schema vs. DTD
• XML Schemas are extensible to future additions
• XML Schemas are richer and more powerful than DTDs
• XML Schemas are written in XML
• XML Schemas support datatypes
• XML Schemas support namespaces
XML Parsers
An XML parser converts an XML document into an XML DOM object - which can then be
manipulated with a JavaScript.

Two types of XML parsers:


➢ ValidatingParser
• It requires document type declaration
• It generates error if document doesnot
o Conform with DTDand
o Meet XML validityconstraints
➢ Non-validating Parser
• It checks well-formedness for xmldocument
• It can ignore externalDTD

What is XML Parser?


XML Parser provides way how to access or modify data present in an XML document. Java
provides multiple options to parse XML document. Following are various types of parsers
which are commonly used to parse XML documents.
Types of parsers:
• Dom Parser - Parses the document by loading the complete contents of the document and
creating its complete hiearchical tree inmemory.
• SAX Parser - Parses the document on event based triggers. Does not load the complete
document into thememory.
• JDOM Parser - Parses the document in similar fashion to DOM parser but in more easier
way.
• StAX Parser - Parses the document in similar fashion to SAX parser but in more efficient
way.
• XPath Parser - Parses the XML based on expression and is used extensively in
conjuction withXSLT.
• DOM4J Parser - A java library to parse XML, XPath and XSLT using Java Collections
Framework , provides support for DOM, SAX andJAXP.

DOM-Document Object Model


The Document Object Model protocol converts an XML document into a collection of objects
in your program. XML documents have a hierarchy of informational units called nodes; this
hierarchy allows a developer to navigate through the tree looking for specific 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 between them.
You can then manipulate the object model in any way that makes sense. This mechanism is
also known as the "random access" protocol, because you can visit any part of the data at any
time. You can then modify the data, remove it, or insert new data.

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
• Loading the xmldocument
• Accessing the xmldocument
• Deleting the elements of xmldocument
• Changing the elements of xml document
According to the DOM, everything in an XML document is a node. It considers
• The entire document is a documentnode
• Every XML element is an elementnode
• The text in the XML elements are textnodes
• Every attribute is an attributenode
• Comments are comment nodes

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
documents.
XML DOM- This part specifies the standard set of objects and interfaces for XML
documents only.
HTML DOM- This part specifies the objects and interfaces for HTML documents only.
DOM Levels
• Level 1 Core: W3C Recommendation, October1998
✓ It has feature for primitive navigation and manipulation of XMLtrees
✓ other Level 1 features are: All HTMLfeatures
• Level 2 Core: W3C Recommendation, November2000
✓ It adds Namespace support and minor newfeatures
✓ other Level 2 features are: Events, Views, Style, Traversal andRange
• Level 3 Core: W3C Working Draft, April2002
✓ It supports: Schemas, XPath, XSL, XSLT
We can access and parse the XML document in two ways:
➢ 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.
Steps to Using DOM Parser
Let‘s note down some broad steps involved in using a DOM parser for parsing any XML file
in java.

DOM based XML Parsing:(tree based)


JAXP is a tool, stands for Java Api for Xml Processing, used for accessing and manipulating
xml document in a tree based manner.
The following DOM javaClasses are necessary to process the XML document:
• DocumentBuilderFactory class creates the instance ofDocumentBuilder.
• DocumentBuilder produces a Document (a DOM) that conforms to the DOM specification.
The following methods and properties are necessary to process the XMLdocument:
Property Meaning
nodeName Finding the name of the node
nodeValue Obtaining value of the node
parentNode To get parnet node
childNodes Obtain child nodes
Attributes For getting the attributes values
Method Meaning
getElementByTagName(name) To access the element by specifying its name
appendChild(node) To insert a child node
removeChild(node) To remove existing child node

<html>
<body> BODY
<h1>Heading 1</h1>
lastChild
parentNode

<p>Paragraph.</p>
firstChild

HEAD
<h2>Heading 2</h2>
<p>Paragraph.</p>
BODY </body>
</html> nextSibling nextSibling nextSibling
H1
#text
H1 P H2 P
previousSibling previousSibling previousSibling
parentNode

parentNode

parentNode

parentNode

P
firstChild

firstChild

firstChild

firstChild
lastChild

lastChild

lastChild

lastChild

#text

H2
#text

P #text #text #text #text


#text
DOM Document Object
✓ There are12 types of nodes in a DOM Documentobject

1. Document node 7. EntityReferencenode


2. Elementnode 8. Entitynode
3. Textnode 9. Commentnode
4. Attributenode 10. DocumentTypenode
5. Processing instructionnode 11. DocumentFragmentnode
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.

Web Technologies Page 36


insertBefore Appends a child node in front of a childnode.

DOM Advantages & Disadvantages


ADVANTAGES
- Robust API for the DOMtree
- Relativelysimpletomodifythedatastructureandextractdata
- It is goodwhen randomaccesstowidelyseparated partsofadocumentisrequired
- It supports both read and writeoperations
-
Disadvantages
- Stores the entire document in memory, It is memoryinefficient
- AsDomwaswrittenforanylanguage,methodnamingconventionsdon‘tfollowstandard java
programmingconventions

DOM or SAX
DOM
- Suitable for smalldocuments
- Easily modifydocument
- Memory intensive;Load the complete XMLdocument
SAX
- Suitable for large documents; saves significant amounts ofmemory
- Only traverse document once, start toend
- Eventdriven
- Limited standardfunctions.
-
Loading an XML file:one.html
<html><body>
<script type=‖text/javascript‖> try
{
xmlDocument=new ActiveXObject(―Microsoft.XMLDOM‖);
}
catch(e)
{
try {
xmlDocument=document.implementation.createDocument("","",null);
}
catch(e){alert(e.message)}
}
try
{
xmlDocument.async=false;
xmlDocument.load(―faculty.xml‖);
document.write(―XML document student is loaded‖);
}
catch(e){alert(e.message)}
</script>
Web Technologies Page 37
</body></html>
faculty.xml:
<?xml version=‖1.0‖?>
< faculty >
<eno>30</eno>
<personal_inf>
<name>Kalpana</name>
<address>Hyd</address>
<phone>9959967192</phone>
</personal_inf>
<dept>CSE</dept>
<col>MRCET</col>
<group>MRGI</group>
</faculty>
OUTPUT: XML document student is loaded
ActiveXObject: It creates empty xml document object.
Use separate function for Loading an XML document: two.html
<html><head>
<script type=‖text/javascript‖>
Function My_function(doc_file)
{
try
{
xmlDocument=new ActiveXObject(―Microsoft.XMLDOM‖);
}
catch(e)
{
try
{
xmlDocument=document.implementation.createDocument("","",null);
}
catch(e){alert(e.message)}
}
try
{
xmlDocument.async=false;
xmlDocument.load(―faculty.xml‖);
return(xmlDocument);
}
catch(e){alert(e.message)}
return(null);
}
</script>
</head>
<body>
<script type=‖text/javascript‖>
xmlDoc=‖My_function(―faculty.xml‖);
Web Technologies Page 38
document.write(―XML document student is loaded‖);
</script>
</body></html>
OUTPUT: XML document student is loaded
Use of properties and methods: three.html
<html><head>
<script type=‖text/javascript‖ src=‖my_function_file.js‖></script>
</head><body>
<script type=‖text/javascript‖>
xmlDocument=My_function(“faculty.xml”);
document.write(―XMLdocumentfacultyisloadedandcontentofthisfileis:‖);
document.write(―<br>‖);
document.write(―ENO:‖+
xmlDocument.getElementsByTagName(―eno‖)[0].childNodes[0].nodeValue);
document.write(―<br>‖);
document.write(―Name:‖+
xmlDocument.getElementsByTagName(―name‖)[0].childNodes[0].nodeValue);
document.write(―<br>‖);
document.write(―ADDRESS:‖+
xmlDocument.getElementsByTagName(―address‖)[0].childNodes[0].nodeValue);
document.write(―<br>‖);
document.write(―PHONE:‖+
xmlDocument.getElementsByTagName(―phone‖)[0].childNodes[0].nodeValue);
document.write(―<br>‖);
document.write(―DEPARTMENT:‖+
xmlDocument.getElementsByTagName(―dept‖)[0].childNodes[0].nodeValue);
document.write(―<br>‖);
document.write(―COLLEGE:‖+
xmlDocument.getElementsByTagName(―col‖)[0].childNodes[0].nodeValue);
document.write(―<br>‖);
document.write(―GROUP:‖+
xmlDocument.getElementsByTagName(―group‖)[0].childNodes[0].nodeValue);
</script>
</body>
</html>
OUTPUT:

Web Technologies Page 39


XML document faculty is loaded and content of this file is
ENO: 30
NAME: Kalpana
ADDRESS: Hyd
PHONE: 9959967192
DEPARTMENT: CSE
COLLEGE: MRCET
GROUP: MRGI
We can access any XML element using the index value: four.html
<html><head>
<script type=‖text/javascript‖ src=‖my_function_file.js‖></script>
</head><body>
<script
type=‖text/javascript‖>xmlDoc=My_function(“faculty
1.xml”); value=xmlDoc.
getElementsByTagName(―name‖);
document.write(―value[0].childNodes[0].nodeValue‖);
</script></body></html>
OUTPUT: Kalpana
XHTML: eXtensible Hypertext Markup Language
Hypertext is simply a piece of text that works as a link. Markup language is a language of writing
layout information within documents. The XHTML recommended by W3C. Basically an XHTML
document is a plain text file and it is very much similar to HTML. It contains rich text, means text
with tags. The extension to this program should b either html or htm. These programs can be opened
in some web browsers and the corresponding web page can be viewed.
HTML Vs XHTML
HTML XHTML
1. The HTML tags are case insensitive. 1. The XHTML tags are case sensitive.
EX:<BoDy> -------- </body> EX:<body> --------- </body>
2. We can omit the closing tags sometimes. 2. For every tag there must be a closing tag.
EX: <h1>---------</h1>or<h1 -------------/>
3. The attribute values not always 3. The attribute values are must be quoted.
necessary to quote.
4. In HTML there are some implicit 4. In XHTML the attribute values must be
attribute values. specified explicitly.

Web Technologies Page 40


5. In HTML even if we do not follow the 5. In XHTML the nesting rules must be
nesting rules strictly it does not cause much strictly followed. These nesting rules are-
difference. - A form element cannot contain another form
element.
-an anchor element does not contain another
form element
-List element cannot be nested in the list
element
-If there are two nested elements then the inner
element must be enclosed first before closing
the outerelement
-Text element cannot be directly nested in
form element

The relationship between SGML, XML, HTML and XHTML is as given below

Standard structure: DOCTYPE, html, head and body


The doctype is specified by the DTD. The XHTML syntax rules are specified by the file
xhtml11.dtd file.There are 3 types of DTDs.
1. XHTML 1.0 Strict: clean markupcode
2. XHTML 1.0 Transitional: Use some html features in the existing XHTMLdocument.
3. XHTML 1.0 Frameset: Use of Frames in an XHTMLdocument.
EX:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Sample XHTML Document</title>
</head>
<body bgcolor=‖#FF0000‖>
<basefont face=‖arial‖ size=‖14‖ color=‖white‖>
<h1>MRCET</h1>
<h2>MRCET</h2>
<h3>MRCET</h3>
<h4> KALPANA</h4>
<h5> KALPANA</h5>
<h6>KALPANA</h6>
<p><center> XHTML syntax rules are specified by the file xhtml11.dtd file. </center></p>
<divalign="right"><b>XHTMLstandardsforeXtensibleHypertextMarkupLanguage.</b>XHT

Web Technologies Page 41


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>

• Text The actual content of an Element orAttr.


• Document Represents the entire XML document. A Document object is often referred to
as a DOMtree.
Common DOM methods
When you are working with the DOM, there are several methods you'll use often:
• Document.getDocumentElement() - Returns the root element of thedocument.
• Node.getFirstChild() - Returns the first child of a givenNode.
• Node.getLastChild() - Returns the last child of a givenNode.
• Node.getNextSibling() - These methods return the next sibling of a givenNode.
• Node.getPreviousSibling() - These methods return the previous sibling of a givenNode.
• Node.getAttribute(attrName) - For a given Node, returns the attribute with the
requestedname.
Steps to Using DOM
Following are the steps used while parsing a document using DOM Parser.
• Import XML-relatedpackages.
• Create aDocumentBuilder
• Create a Document from a file orstream
• Extract the rootelement
• Examineattributes
• Examinesub-elements

Web Technologies Page 42


DOM

import java.io.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import org.xml.sax.*;
public class parsing_DOMDemo
{
public static void main(String[] args)
{
try
{
System.out.println(―enter the name of XML document‖);
BufferedReader input=new Bufferedreader(new InputStreamReader(System.in));
String file_name=input.readLine();
File fp=new File(file_name);
if(fp.exists())
{
try
{
DocumentBuilderFactory Factory_obj= DocumentBuilderFactory.newInstance();

DocumentBuilder builder=Factory_obj.newDocumentBuilder();
InputSource ip_src=new InputSource(file_name);
Document doc=builder.parse(ip_src);
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 found:‖+file_name);
}}
catch(IOException ex)
{
ex.printStackTrace();
}
}}

Web Technologies Page 43


SAX:
SAX (the Simple API for XML) is an event-based parser for xml documents. Unlike a DOM
parser, a SAX parser creates no parse tree. SAX is a streaming interface for XML, which means
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 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
well-formed XMLdocument
• Tokens are processed in the same order that they appear in thedocument
• Reports the application program the nature of tokens that the parser has encountered as
theyoccur
• The application program provides an "event" handler that must be registered with the
parser
• As the tokens are identified, callback methods in the handler are invoked with the
relevantinformation
When to use?
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
• You are processing a very large XML document whose DOM tree would consume too
much memory.Typical DOM implementations use ten bytes of memory to represent one
byte ofXML
• The problem to be solved involves only part of the XMLdocument

• Data is available as soon as it is seen by the parser, so SAX works well for an XML
document that arrives over astream
Disadvantages of SAX
• We have no random access to an XML document since it is processed in a forward-only
manner
• If you need to keep track of data the parser has seen or change the order of items, you
must write the code and store the data on yourown
• The data is broken into pieces and clients never have all the information as a whole
unless they create their own datastructure
The kinds of events are:
• The start of the document isencountered
• The end of the document isencountered
• The start tag of an element isencountered
• The end tag of an element isencountered
• Character data isencountered
• A processing instruction isencountered
Web Technologies Page 44
Scanning the XML file from start to end, each event invokes a corresponding callback method
that the programmer writes.

SAX packages
javax.xml.parsers:
org.xml.sax: Describing few interfaces forparsing
SAX classes
• SAXParser Defines the API that wraps an XMLReader implementationclass
• SAXParserFactoryDefinesafactoryAPIthatenablesapplicationstoconfigureand
obtain a SAX based parser to parse XMLdocuments
• ContentHandler Receive notification of the logical content of adocument.
• DTDHandler Receive notification of basic DTD-relatedevents.
• EntityResolver Basic interface for resolvingentities.
• ErrorHandler Basic interface for SAX errorhandlers.
• DefaultHandler Default base class for SAX eventhandlers.
SAX parser methods
StartDocument() and endDocument() – methods called at the start and end of an XML
document.
StartElement() and endElement() – methods called at the start and end of a document
element.
Characters() – method called with the text contents in between the start and end tags of
an XML document element.
ContentHandler Interface
This interface specifies the callback methods that the SAX parser uses to notify an application
program of the components of the XML document that it has seen.
• void startDocument() - Called at the beginning of a document.
• void endDocument() - Called at the end of a document.
• void startElement(String uri, String localName, String qName, Attributes atts) -
Called at the beginning of an element.
• void endElement(String uri, String localName,String qName) - Called at the end of
an element.
• void characters(char[] ch, int start, int length) - Called when character data is
encountered.
• void ignorableWhitespace( char[] ch, int start, int length) - Called when a DTD is
present and ignorable whitespace is encountered.
• void processingInstruction(String target, String data) - Called when a processing
instruction is recognized.
• void setDocumentLocator(Locator locator)) - Provides a Locator that can be used to
identify positions in the document.
• void skippedEntity(String name) - Called when an unresolved entity is encountered.
• void startPrefixMapping(String prefix, String uri) - Called when a new name
Web Technologies Page 45
space mapping is defined.
• void endPrefixMapping(String prefix) - Called when a namespace definition ends its
scope.
Attributes Interface
This interface specifies methods for processing the attributes connected to an element.
• int getLength() - Returns number of attributes,etc.

SAX simple API for XML


reader.parse(file_name);
System.out.println( file_name+ is well-formed. );
}
catch (Exception e)
{

System.exit(1);
}
}
else
{
System.out.println( file not file_name);
}
}
catch(IOException ex){ex.printStackTrace();}
import java.io.*;
import org.xml.sax;
import org.xml.sax.helpers;
public class parsing_SAXDemo
{
public static void main(String[] args) throws IOException
{
try{
System.out.println( enter the name of XML docu );
BufferedReader input=new Bufferedreader(new InputStreamReader(System.in));
String file_name=input.readLine();
File fp=new File(file_name);
if(fp.exists())
{
try
{
XMLReader reader=XMLReaderFactory.createXMLReader();

Web Technologies Page 46


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;

DHTML

DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
Dynamic HTML is not a markup or programming language but it is a term that combines the
features of various web development technologies for creating the web pages dynamic and
interactive.
The DHTML application was introduced by Microsoft with the release of the 4th version of IE
(Internet Explorer) in 1997
Components of Dynamic HTML
DHTML consists of the following four components or languages:
o HTML 4.0
o CSS
o JavaScript
o DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It defines
the structure of a web page with various defined basic elements or tags.
CSS

Web Technologies Page 47


CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling
the style and layout of the HTML elements on the web pages.
JavaScript

JavaScript is a scripting language which is done on a client-side. The various browser supports
JavaScript technology. DHTML uses the JavaScript technology for accessing, controlling, and
manipulating the HTML elements. The statements in JavaScript are the commands which tell the
browser for performing an action.
DOM

DOM is the document object model. It is a w3c standard, which is a standard interface of
programming for HTML. It is mainly used for defining the objects and properties of all elements
in HTML.
Uses of DHTML

Following are the uses of DHTML (Dynamic HTML):


o It is used for designing the animated and interactive web pages that are developed in real-
time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.

Features of DHTML

Following are the various characteristics or features of DHTML (Dynamic HTML):

o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and content
of a web page.
o It provides the facility for using the events, methods, and properties. And, also provides
the feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.

Web Technologies Page 48


Difference between HTML and DHTML

HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)

1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of


technologies of web development.

2. It is used for developing and creating web 2. It is used for creating and designing the animated and
pages. interactive web sites or pages.

3. This markup language creates static web pages. 3. This concept creates dynamic web pages.

4. It does not contain any server-side scripting 4. It may contain the code of server-side scripting.
code.

5. The files of HTML are stored with the .html or 5. The files of DHTML are stored with the .dhtm
.htm extension in a system. extension in a system.

6. A simple page which is created by a user 6. A page which is created by a user using the HTML,
without using the scripts or styles called as an CSS, DOM, and JavaScript technologies called a
HTML page. DHTML page.

7. This markup language does not need database 7. This concept needs database connectivity because it
connectivity. interacts with users.

DHTML JavaScript

JavaScript can be included in HTML pages, which creates the content of the page as dynamic.
We can easily type the JavaScript code within the <head> or <body> tag of a HTML page. If we
want to add the external source file of JavaScript, we can easily add using the <src> attribute.

Following are the various examples, which describes how to use the JavaScript technology with
the DHTML:

Document.write() Method

The document.write() method of JavaScript, writes the output to a web page.

Example 1: The following example simply uses the document.write() method of JavaScript in
the DHTML. In this example, we type the JavaScript code in the <body> tag.

Web Technologies Page 49


1. <HTML>
2. <head>
3. <title>
4. Method of a JavaScript
5. </title>
6. </head>
7. <body>
8. <script type="text/javascript">
9. document.write("sectionE ");
10. </script>
11. </body>
12. </html>

Output:

SectionE

JavaScript and HTML DOM

With version 4 of HTML, JavaScript code can also change the inner content and attributes of the
HTML event.

Example 1: This example checks the Grade of a student according to the percentage criteria with
the JavaScript and HTML DOM. In this example, we type the code of a JavaScript in the <body>
tag.

1. <html>
2. <head>
3. <title> Check Student Grade
4. </title>
5. </head>
6.
7. <body>
8. <p>Enter the percentage of a Student:</p>
9. <input type="text" id="percentage">
10. <button type="button" onclick="checkGrade()">
11. Find Grade
12. </button>
13. <p id="demo"></p>
14. <script type="text/javascript">
15. function checkGrade() {
Web Technologies Page 50
16. var x,p, text;
17. p = document.getElementById("percentage").value;
18.
19. x=parseInt(p);
20.
21.
22. if (x>90 && x <= 100) {
23. document.getElementById("demo").innerHTML = "A1";
24. } else if (x>80 && x <= 90) {
25. document.getElementById("demo").innerHTML = "A2";
26. } else if (x>70 && x <= 80) {
27. document.getElementById("demo").innerHTML = "A3";
28. }
29. }
30. </script>
31. </body>
32. </html>

Output:

Explanation:

In the above code, we check the student’s Grade with the help of JavaScript in DHTML. In the
JavaScript code, we used the checkGrade() method, which is invoked when we click on the
button. In this function, we stored the value in variable p. The value is taken in the input field.

Web Technologies Page 51


When the value is stored, then we convert the value of p into integer and store the conversion
value in x, because the value in p is text.

After that, we used the if-else-if statement for finding the grade according to the percentage.

Advantages of DHTML

Following are the various benefits or the advantages of DHTML (Dynamic HTML):

o Those web sites and web pages which are created using this concept are fast.
o There is no plug-in required for creating the web page dynamically.
o Due to the low-bandwidth effect by the dynamic HTML, the web page functionality is
enhanced.
o This concept provides advanced functionalities than the static HTML.
o It is highly flexible, and the user can make changes easily in the web pages.

Disadvantages of DHTML

Following are the various disadvantages or limitations of DHTML (Dynamic HTML):

o The scripts of DHTML does not run properly in various web browsers. Or in simple
words, we can say that various web browsers do not support the DHTML. It is only
supported by the latest browsers.
o The coding of those websites that are created using DHTML is long and complex.
o For understanding the DHTML, users must know about HTML, CSS, and JavaScript. If
any user does not know these languages, then it is a time-consuming and long process in
itself.

Web Technologies Page 52

You might also like