Scribd
Upload
5 views

WT Unit Ii (HTML&XML)

The document provides an introduction to HTML, including: 1. HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. 2. Common HTML tags were explained, including <html>, <body>, <h1>-<h6>, <p>, <a> for links, and <img> for images. 3. The document also covered basic HTML page structure with <html> and <body> tags, empty elements like <br>, attributes, comments, and formatting tags for bold, italics etc.

Uploaded by

karthiksigam143
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
5 views

WT Unit Ii (HTML&XML)

The document provides an introduction to HTML, including: 1. HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. 2. Common HTML tags were explained, including <html>, <body>, <h1>-<h6>, <p>, <a> for links, and <img> for images. 3. The document also covered basic HTML page structure with <html> and <body> tags, empty elements like <br>, attributes, comments, and formatting tags for bold, italics etc.

Uploaded by

karthiksigam143
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/ 41

MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

HTML Introduction
Example

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

What is HTML?

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language


 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like <html>


 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

 HTML documents describe web pages


 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read


HTML documents and display them as web pages. The browser does not
display the HTML tags, but uses the tags to interpret the content of the page:

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

DEPARTMENT OF CSE 1 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Example Explained

 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading

The text between <p> and </p> is displayed as a paragraph


What You Need

You don't need any tools to learn HTML at W3Schools.

 You don't need any HTML editor


 You don't need a web server

You don't need a web site


Editing HTML

In this tutorial we use a plain text editor (like Notepad) to edit HTML. We
believe this is the best way to learn HTML.

However, professional web developers often prefer HTML editors like


FrontPage or Dreamweaver, instead of writing plain text.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html
extension. We use .htm in our examples. It is a habit from the past, when
the software only allowed three letters in file extensions.

With new software it is perfectly safe to use .html.


HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Links

DEPARTMENT OF CSE 2 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

HTML links are defined with the <a> tag.

<a href="http://www.w3schools.com">This is a link</a>


HTML Images

HTML images are defined with the <img> tag.

<img src="w3schools.jpg" width="104" height="142" />


HTML Elements

An HTML element is everything from the start tag to the end tag:

Start tag * Element content End tag *


<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
* The start tag is often called the opening tag. The end tag is often called
the closing tag.
HTML Element Syntax

 An HTML element starts with a start tag / opening tag


 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes

Empty HTML Elements

HTML elements without content are called empty elements. Empty elements
can be closed in the start tag.

<br> is an empty element without a closing tag (it defines a line break).

In XHTML, XML, and future versions of HTML, all elements must be closed.

Adding a slash to the start tag, like <br />, is the proper way of closing
empty elements, accepted by HTML, XHTML and XML.

Even if <br> works in all browsers, writing <br /> instead is more future
proof.

HTML Attributes

DEPARTMENT OF CSE 3 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

 HTML elements can have attributes


 Attributes provide additional information about the element
 Attributes are always specified in the start tag

Attributes come in name/value pairs like: name="value"


Attribute Example

HTML links are defined with the <a> tag. The link address is provided as an
attribute:

<a href="http://www.w3schools.com">This is a link</a>

HTML Comments

Comments can be inserted in the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not
displayed.

Comments are written like this:

<!-- This is a comment -->


Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<hr /> Defines a horizontal rule
<!--> Defines a comment

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic
text.

These HTML tags are called formatting tags.

Refer to the bottom of this page for a complete reference.


Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text

DEPARTMENT OF CSE 4 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

<small> Defines small text


<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead

Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

HTML Links
A link is the "address" to a document (or a resource) on the web.
Hyperlinks, Anchors, and Links

In web terms, a hyperlink is a reference (an address) to a resource on the


web.

Hyperlinks can point to any resource on the web: an HTML page, an image, a
sound file, a movie, etc.

An anchor is a term used to define a hyperlink destination inside a document.

DEPARTMENT OF CSE 5 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

The HTML anchor element <a>, is used to define both hyperlinks and
anchors.

We will use the term HTML link when the <a> element points to a resource,
and the term HTML anchor when the <a> elements defines an address inside
a document..

An HTML Link

Link syntax:

<a href="url">Link text</a>

The start tag contains attributes about the link.

The element content (Link text) defines the part to be displayed.

Note: The element content doesn't have to be text. You can link from an
image or any other HTML element.

The href Attribute

The href attribute defines the link "address".

This <a> element defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The target Attribute

The target attribute defines where the linked document will be opened.

The code below will open the document in a new browser window:

<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>

The name Attribute

When the name attribute is used, the <a> element defines a named anchor
inside a HTML document.

Named anchor are not displayed in any special way. They are invisible to the
reader.

DEPARTMENT OF CSE 6 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Named anchor syntax:

<a name="label">Any content</a>

The link syntax to a named anchor:

<a href="#label">Any content</a>

The # in the href attribute defines a link to a named anchor.

Example:

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

A link to the Useful Tips Section from the same document:

<a href="#tips">
Jump to the Useful Tips Section</a>

A link to the Useful Tips Section from another document:

<a href="http://www.w3schools.com/html_tutorial.htm#tips">
Jump to the Useful Tips Section</a>

HTML TABLES AND FORMATING


1.TABLE tags
<table>…..</table>:creates a table ;it encloses tags
like<CAPTION>,<TR>,<TH>,<TD>,<COLSPAN>,<COL>,<THEAD>,<TBODY
>,<TFOOT>.
<TAG> DESCRIPTION
<align> It specifies the horizontal alignment
of the table in the web browser
window.it can be
LEFT,CENTER,RIGHT
<background> URL of the background img for the
table
<bgcolor> Background color for the table
<border> Set the border width
<bordercolor> Set the external bordercolor for the

DEPARTMENT OF CSE 7 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

entire table
<cols> Specifies the no of cols in the table
<height> Gives the height of the table
<width> Set the width of the table

2.TABLE ROW tag

<TR>….</TR>
TABLE ROW TAG ATTRIBUTES
<TAG> DESCRIPTION
<align> Horizontal alignment of the text,like
LEFT,CENTER,RIGHT
<bgcolor> Set the background color of the table
<bordercolor> Set the external border color for the
row
<valign> Vertical alignment of the data in this
row.TOP,MIDDLE,BOTTOM

3. TABLE HAEDING TAG


<TH>…….</TH>
Tables

Tables are defined with the <table> tag. A table is divided into rows (with
the <tr> tag), and each row is divided into data cells (with the <td> tag).
The letters td stands for "table data," which is the content of a data cell. A
data cell can contain text, images, lists, paragraphs, forms, horizontal rules,
tables, etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2


row 2, cell 1 row 2, cell 2

DEPARTMENT OF CSE 8 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without
any borders. Sometimes this can be useful, but most of the time, you want
the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

Heading Another Heading


row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Empty Cells in a Table

DEPARTMENT OF CSE 9 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Table cells with no content are not displayed very well in most browsers.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2


row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla
Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to


make the borders visible:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2


row 2, cell 1

Basic Notes - Useful Tips


The <thead>,<tbody> and <tfoot> elements are seldom used, because of
bad browser support. Expect this to change in future versions of XHTML. If

DEPARTMENT OF CSE 10 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

you have Internet Explorer 5.0 or newer, you can view a working example in
our XML tutorial.
Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer

HTML Forms and Input


HTML Forms are used to select different kinds of user input.
Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like
text fields, textarea fields, drop-down menus, radio buttons, checkboxes,
etc.) in a form.

A form is defined with the <form> tag.

<form>
.
input elements
.
</form>

Input

The most used form tag is the <input> tag. The type of input is specified
with the type attribute. The most commonly used input types are explained
below.

DEPARTMENT OF CSE 11 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in
a form.

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

How it looks in a browser:

First name:
Last name:

Note that the form itself is not visible. Also note that in most browsers, the
width of the text field is 20 characters by default.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited
number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How it looks in a browser:

Male
Female

Note that only one option can be chosen.

Checkboxes

Checkboxes are used when you want the user to select one or more options
of a limited number of choices.

DEPARTMENT OF CSE 12 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

How it looks in a browser:

I have a bike:
I have a car:
I have an airplane:

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent
to the server. The form's action attribute defines the name of the file to send
the content to. The file defined in the action attribute usually does something
with the received input.

<form name="input" action="html_form_submit.asp" method="get">


Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

How it looks in a browser:

Submit
Username:
If you type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"html_form_submit.asp". The page will show you the received input.
Form Tags

Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)

DEPARTMENT OF CSE 13 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

<label> Defines a label to a control


<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
<isindex> Deprecated. Use <input> instead

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head><body>
Visible text goes here...
</body>

</html>

Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5><h6>Smallest Heading</h6>

Text Elements
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>

DEPARTMENT OF CSE 14 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Links, Anchors, and Image Elements


<a href="http://www.nie.com/">This is a Link</a>
<a href="http://www.nie1.com/"><img src="URL" alt="Alternate
Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>

A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
<frame src="page1.htm" />

DEPARTMENT OF CSE 15 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

<frame src="page2.htm" />


</frameset>

Forms
<form action="http://www.nie.com" method="post/get">

<input type="text" name="email" value="[email protected]" size="40"


maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select><textarea name="comment" rows="60" cols="20"></textarea>
</form>

Entities
&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from a source.
</blockquote>

<address>
Written by <br />
<a href="www.nie.org">Email us</a><br />
Address: Aluguraju Palli,Macherla<br />
Phone: +12 34 56 78
</address>

Frames

With frames, you can display more than one HTML document in the same
browser window. Each HTML document is called a frame, and each frame is
independent of the others.The disadvantages of using frames are:

DEPARTMENT OF CSE 16 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

 The web developer must keep track of more HTML documents


 It is difficult to print the entire page

The Frameset Tag

 The <frameset> tag defines how to divide the window into frames
 Each frameset defines a set of rows or columns
 The values of the rows/columns indicate the amount of screen area
each row/column will occupy

The Frame Tag

 The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column
is set to 25% of the width of the browser window. The second column is set
to 75% of the width of the browser window. The HTML document
"frame_a.htm" is put into the first column, and the HTML document
"frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

Note: The frameset column size value can also be set in pixels
(cols="200,500"), and one of the columns can be set to use the remaining
space (cols="25%,*").

UNIT-III XML
XML was designed to transport and store data.
HTML was designed to display data.

What is XML?

 XML stands for EXtensible Markup Language


 XML is a markup language much like HTML
 XML was designed to carry data, not to display data
 XML tags are not predefined. You must define your own tags
 XML is designed to be self-descriptive
 XML is a W3C Recommendation

The Difference Between XML and HTML


XML is not a replacement for HTML.
XML and HTML were designed with different goals:
 XML was designed to transport and store data, with focus on what data
is

DEPARTMENT OF CSE 17 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

 HTML was designed to display data, with focus on how data looks
HTML is about displaying information, while XML is about carrying
information.
XML is a software- and hardware-independent tool for carrying
information.
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
XML documents form a tree structure that starts at "the root" and branches
to "the leaves".
XML Documents Form a Tree Structure

XML documents must contain a root element. This element is "the parent"
of all other elements.

The elements in an XML document form a document tree. The tree starts at
the root and branches to the lowest level of the tree.

All elements can have sub elements (child elements):

<root>
<child>
<subchild>.....</subchild>
</child>
</root>

The terms parent, child, and sibling are used to describe the relationships
between elements. Parent elements have children. Children on the same
level are called siblings (brothers or sisters).

All elements can have text content and attributes (just like in HTML).

Example:

DEPARTMENT OF CSE 18 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

The image above represents one book in the XML below:

<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

The root element in the example is <bookstore>. All <book> elements in the
document are contained within <bookstore>.

The <book> element has 4 children: <title>,< author>, <year>, <price>.

XML Tags are Case Sensitive

DEPARTMENT OF CSE 19 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

XML tags are case sensitive. The tag <Letter> is different from the tag
<letter>.
Opening and closing tags must be written with the same case:
<Message>This is incorrect</message>
<message>This is correct</message>
Note: "Opening and closing tags" are often referred to as "Start and end
tags". Use whatever you prefer. It is exactly the same thing.

XML Elements Must be Properly Nested


In HTML, you might see improperly nested elements:
<b><i>This text is bold and italic</b></i>
In XML, all elements must be properly nested within each other:
<b><i>This text is bold and italic</i></b>
In the example above, "Properly nested" simply means that since the <i>
element is opened inside the <b> element, it must be closed inside the <b>
element.

XML Documents Must Have a Root Element


XML documents must contain one element that is the parent of all other
elements. This element is called the root element.
<root>
<child>
<subchild>.....</subchild>
</child>
</root>

XML Attribute Values Must be Quoted


XML elements can have attributes in name/value pairs just like in HTML.
In XML, the attribute values must always be quoted.
Study the two XML documents below. The first one is incorrect, the second is
correct:
<note date=12/11/2007>
<to>Tove</to>
<from>Jani</from>
</note>

<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>
An XML document contains XML Elements.

What is an XML Element?


An XML element is everything from (including) the element's start tag to
(including) the element's end tag.
An element can contain:

DEPARTMENT OF CSE 20 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

 other elements
 text
 attributes
 or a mix of all of the above...

XML Naming Rules


XML elements must follow these naming rules:
 Names can contain letters, numbers, and other characters
 Names cannot start with a number or punctuation character
 Names cannot start with the letters xml (or XML, or Xml, etc)
 Names cannot contain spaces
Any name can be used, no words are reserved.

Best Naming Practices


Make names descriptive. Names with an underscore separator are nice:
<first_name>, <last_name>.
Names should be short and simple, like this: <book_title> not like this:
<the_title_of_the_book>.
Avoid "-" characters. If you name something "first-name," some software
may think you want to subtract name from first.
Avoid "." characters. If you name something "first.name," some software
may think that "name" is a property of the object "first."
Avoid ":" characters. Colons are reserved to be used for something called
namespaces (more later).
XML documents often have a corresponding database. A good practice is to
use the naming rules of your database for the elements in the XML
documents.
XML Elements vs. Attributes
Take a look at these examples:
<person sex="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

<person>
<sex>female</sex>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

XML - DTDs

The XML Document Type Declaration, commonly known as DTD, is a way to


describe XML language precisely. DTDs check vocabulary and validity of the
structure of XML documents against grammatical rules of appropriate XML
language.

DEPARTMENT OF CSE 21 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

An XML DTD can be either specified inside the document, or it can be kept in
a separate document and then liked separately.

Syntax

Basic syntax of a DTD is as follows −

<!DOCTYPE element DTD identifier


[
declaration1
declaration2
........
]>

In the above syntax,

 The DTD starts with <!DOCTYPE delimiter.


 An element tells the parser to parse the document from the specified
root element.
 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 External
Subset.
 The square brackets [ ] enclose an optional list of entity
declarations called Internal Subset.

Advantages of using DTD

 Documentation − You can define your own format for the XML files.
Looking at this document a user/developer can understand the
structure of the data.
 Validation − It gives a way to check the validity of XML files by
checking whether the elements appear in the right order, mandatory
elements and attributes are in place, the elements and attributes have
not been inserted in an incorrect way, and so on.

Disadvantages of using DTD

 It does not support the namespaces. Namespace is a mechanism by


which element and attribute names can be assigned to groups.
However, in a DTD namespaces have to be defined within the DTD,
which violates the purpose of using namespaces.
 It supports only the text string data type.
 It is not object oriented. Hence, the concept of inheritance cannot be
applied on the DTDs.
 Limited possibilities to express the cardinality for elements.

DEPARTMENT OF CSE 22 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

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 an
external source.

Syntax

Following is the syntax of internal DTD −

<!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>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>

Let us go through the above code −

Start Declaration − Begin the XML declaration with the 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 [

DEPARTMENT OF CSE 23 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

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 follows immediately.

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 the document.
 Similar to the DOCTYPE declaration, the element declarations must
start with an exclamation mark.
 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 external source.

Syntax

Following is the syntax for external DTD −

<!DOCTYPE root-element SYSTEM "file-name">

where file-name is the file with .dtd extension.

DEPARTMENT OF CSE 24 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Example

The following example shows external DTD usage −


<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>

The content of the DTD file address.dtd is 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 is written


as follows −

<!DOCTYPE name PUBLIC "-//Beginning XML//DTD Address Example//EN">

XML Validation
XML with correct syntax is "Well Formed" XML.
XML validated against a DTD is "Valid" XML.
Well Formed XML Documents
A "Well Formed" XML document has correct XML syntax.
 XML documents must have a root element

DEPARTMENT OF CSE 25 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

 XML elements must have a closing tag


 XML tags are case sensitive
 XML elements must be properly nested
 XML attribute values must be quoted

<?xml version="1.0" encoding="ISO-8859-1"?>


<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Valid XML Documents


A "Valid" XML document is a "Well Formed" XML document, which also
conforms to the rules of a Document Type Definition (DTD):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declaration in the example above, is a reference to an external


DTD file. The content of the file is shown in the paragraph below.
XML DTD
The purpose of a DTD is to define the structure of an XML document. It
defines the structure with a list of legal elements:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

Validate Your XML Against a DTD(Internal DTD)

<?xml version="1.0" ?>


<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>

DEPARTMENT OF CSE 26 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

<!ELEMENT heading (#PCDATA)>


<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<message>Don't forget me this weekend!</message>
</note>

Differences between internal DTD and external DTD:-


Feature Internal DTD External DTD

Syntax Embedded Linked

File location Within XML Separate file

Document size Larger Smaller

Document sharing Difficult Easy

Document update Difficult use Easy

Document parsing Slightly slower Slightly faster

Security and More secure and


Less secure and reliable
validation reliable

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.

Syntax You need to declare a schema in your XML document as follows −

Example: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>

DEPARTMENT OF CSE 27 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

<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.
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"/>

Definition Types
You can define XML schema elements in the following ways −
Simple Type:
Simple type element is used only in the context of the text. Some of the
predefined simple types are: xs:integer, xs:boolean, xs:string, xs:date.
For example −
<xs:element name = "phone_number" type = "xs:int" />
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> definition that allows to build a simple
hierarchy of elements in the XML document.

Global Types

With the 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

DEPARTMENT OF CSE 28 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

generalize the person and company for different addresses of the company.
In such case, you can define a general type as follows −

<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 follows −

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

Validating XML Document against XML Schema(XSD)

<xs:element name="note">

<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>

DEPARTMENT OF CSE 29 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Advantages of XSD over DTD

 XSD is written in XML so that it doesn't require intermediary


processing by a parser. Because DTD is not written in XML, it requires
the help of parsers.

 XSD is extensible while DTD is not. This makes it easier to derive new
elements from existing elements in XSD.

 XSD also supports data types, so the content of an element can be


restricted. DTD cannot restrict content of an element as it does not
support data types.
 XSD supports element default values, whereas DTD cannot.
 It is possible to include or import multiple XML schemas within an XML

schema. This is not possible with DTD.


Difference between DTD and XML Schema
There are many differences between DTD (Document Type Definition) and
XSD (XML Schema Definition).

No. DTD XSD

1) DTD stands for Document Type XSD stands for XML Schema Definition.
Definition.

2) DTDs are derived XSDs are written in XML.


from SGML syntax.

3) DTD doesn't support datatypes. XSD supports datatypes for elements and
attributes.

4) DTD doesn't support XSD supports namespace.


namespace.

5) DTD doesn't define order for XSD defines order for child elements.
child elements.

6) DTD is not extensible. XSD is extensible.

7) DTD is not simple to learn. XSD is simple to learn because you don't
need to learn new language.

8) DTD provides less control on XSD provides more control on XML structure.
XML structure.

DEPARTMENT OF CSE 30 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

9) File in DTD is saved as .dtd file File in XSD is saved as .xsd file

10) It uses #PCDATA which is a string It uses fundamental and primitive data types.
data type.

Complete Example for Schema: First you can create note.xsd file and then
link with note.xml
note.xsd
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="https://www.w3schools.com"
xmlns="https://www.w3schools.com"
elementFormDefault="qualified">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

note.xml
<?xml version="1.0"?>
<note
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="note.xsd">

<to>sudhakar</to>
<from>venkat</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

XML Namespaces
XML Namespace is used to avoid element name conflict in XML document.

In XML, elements name are defined by the developer so there is a chance to


conflict in name of the elements. To avoid these types of confliction we use
XML Namespaces. We can say that XML Namespaces provide a method to
avoid element name conflict.

XML Namespace Declaration

DEPARTMENT OF CSE 31 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

An XML namespace is declared using the reserved XML attribute. This


attribute name must be started with "xmlns".
XML namespace syntax:
<element xmlns:name = "URL">

Here, namespace starts with keyword "xmlns". The word name is a


namespace prefix. The URL is a namespace identifier

Example:
<?xml version="1.0" encoding="UTF-8"?>
<cont:contact xmlns:cont="http://sssit.org/contact-us">
<cont:name>Vimal Jaiswal</cont:name>
<cont:company>SSSIT.org</cont:company>
<cont:phone>(0120) 425-6464</cont:phone>
</cont:contact>

Here
Namespace Prefix: cont
Namespace Identifier: http://sssit.org/contact-us
It specifies that the element name and attribute names with cont prefix
belongs to http://sssit.org/contact-us name space.

Generally these conflict occurs when we try to mix XML documents from
different XML application.

Let's take an example with two tables:

Table1: This table carries information about the fruits

<table>
<tr>
<td>Apple</td>
<td>Banana</td>
</tr>
</table>

Table2: This table carries information about a computer table.

<table>
<name>Computer table</name>
<width>80</width>
<length>120</length>
</table>

DEPARTMENT OF CSE 32 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

If you add these both XML fragments together, there would be a name
conflict because both have <table> element. Although they have different
name and meaning.

How to get rid of name conflict?


1. By Using a Prefix
You can easily avoid the XML namespace by using a name prefix.

<h:table>
<h:tr>
<h:td>Apple</h:td>
<h:td>Banana</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>Computer table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
2. By Using xmlns Attribute
You can use xmlns attribute to define namespace with the following
syntax:
<element xmlns:name = "URL">

Example:
<root>
<h:table xmlns:h="http://www.abc.com/TR/html4/">
<h:tr>
<h:td>Apple</h:td>
<h:td>Banana</h:td>
</h:tr>
</h:table>

<f:table xmlns:f="http://www.xyz.com/furniture">
<f:name>Computer table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>

In the above example, the <table> element defines a namespace and when
a namespace is defined for an element, the child elements with the same
prefixes are associated with the same namespace.

DEPARTMENT OF CSE 33 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

XML Parsers

An XML parser is a software library or package that provides interfaces for


client applications to work with an XML document. The XML Parser is
designed to read the XML and create a way for programs to use XML.

XML parser validates the document and check that the document is well
formatted.

Types of XML Parsers


These are the two main types of XML Parsers:
1. DOM (Document Object Model)
2. SAX (Simple API for XML)

DOM (Document Object Model)


DOM represents the Document Object model. When an object contains
some information about XML documents, is called DOM Parser. This looks
like a tree structure. DOM API is implemented by a DOM Parser, which is
very easy and simple to use. It represents an XML Document into tree
format in which each element represents tree branches and creates an In
Memory tree representation of XML file and then parses it. more memory is
required for this.

Features of DOM Parser


 The internal structure can be created by DOM Parser.
 Because of these internal structures, the client can get information
about the original XML docs.

.DOM Parser has a tree based structure.

DEPARTMENT OF CSE 34 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Advantages
1) It supports both read and write operations and the API is very simple to
use.
2) It is preferred when random access to widely separated parts of a
document is required.

Disadvantages
1) It is memory inefficient. (Consumes more memory because the whole
XML document needs to load into memory).
2) It is comparatively slower than SAX parser.

What is XML DOM

DOM is an acronym stands for Document Object Model. It defines a standard


way to access and manipulate documents. The Document Object Model
(DOM) is a programming API for HTML and XML documents. It defines the
logical structure of documents and the way a document is accessed and
manipulated.

As a W3C specification, one important objective for the Document Object


Model is to provide a standard programming interface that can be used in a
wide variety of environments and applications. The Document Object Model
can be used with any programming language.

XML DOM defines a standard way to access and manipulate XML documents.

What does XML DOM


The XML DOM makes a tree-structure view for an XML document.

We can access all elements through the DOM tree.

We can modify or delete their content and also create new elements. The
elements, their content (text and attributes) are all known as nodes.

For example, consider this table, taken from an HTML document:

<TABLE>
<ROWS>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>

DEPARTMENT OF CSE 35 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

</TR>
</ROWS>
</TABLE>
The Document Object Model represents this table like this:

XML DOM Example: Load XML File

Let's take an example to show how an XML document ("note.xml") is parsed


into an XML DOM object.

This example parses an XML document (note.xml) into an XML DOM object
and extracts information from it with JavaScript.

note.xml

<?xml version="1.0" encoding="ISO-8859-1"?>


<note>
<to>[email protected]</to>
<from>[email protected]</from>
<body>Hello XML DOM</body>
</note>

The HTML file that extracts the data of XML document using DOM.

xmldom.html

<html>
<body>
<h1>Important Note</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span>

DEPARTMENT OF CSE 36 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

Output:

Important Note
To: [email protected]
From: [email protected]
Message: Hello XML DOM

SAX (Simple API for XML)

SAX represents a simple API for XML and a SAX API is implemented by SAX
Parser. This API was called event-based API which provides interfaces on
handlers. There are four handler interfaces. ContentHandler, DTDHandler,
EntityResolver, and ErrorHandler interface. It does not create any internal
structure rather it takes the occurrences of components of an input
document as events, and then it tells the client what it reads as it reads
through the input document. It is suitable for large XML files because it
doesn’t require loading the whole XML file.

Features of SAX Parser


 It does not create any internal structure.

DEPARTMENT OF CSE 37 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

 Clients does not know what methods to call, they just overrides the
methods of the API and place his own code inside method.
 It is an event based parser, it works like an event handler in Java.

Advantages
1) It is simple and memory efficient.
2) It is very fast and works for huge documents.

Disadvantages
1) It is event-based so its API is less intuitive.
2) Clients never know the full information because the data is broken into
pieces.
Difference between DOM and SAX Parsers
SAX Parser DOM Parser

It is called a Simple API for XML It is called as Document Object


Parsing. Model.

It’s an event-based parser. It stays in a tree structure.

SAX Parser is slower than DOM DOM Parser is faster than SAX
Parser. Parser.

Best for the larger sizes of files. Best for the smaller size of files.

It is suitable for making XML files in It is not good at making XML files in
Java. low memory.

The internal structure cannot be The internal structure can be created


created by SAX Parser. by DOM Parser.

It is read-only. It can insert or delete nodes.

In the SAX parser backward In DOM parser backward and forward


navigation is not possible. search is possible

Suitable for efficient memory. Suitable for large XML document.

A small part of the XML file is only It loads whole XML documents in
loaded in memory. memory.

DEPARTMENT OF CSE 38 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

HTML Styles – CSS

CSS stands for Cascading Style Sheets.


CSS saves a lot of work. It can control the layout of multiple web pages all at
once.

What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays
for different devices and screen sizes, and much more!

Using CSS
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

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.
The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:

Example: inlinecss.html
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;text-align:right;">This is a paragraph.</p>

</body>
</html>

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.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:

DEPARTMENT OF CSE 39 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Example: internalcss.html

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output: internalcss.html

External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page:

DEPARTMENT OF CSE 40 K.V.RATNAM, M.C.A, M.Tech(CSE)


MRIET/CSE/III/I/WT/UNIT-II #HTML, CSS, XML

Example: externalcss.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The 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 what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

output: externalcss.html

DEPARTMENT OF CSE 41 K.V.RATNAM, M.C.A, M.Tech(CSE)

You might also like