[go: up one dir, main page]
Scribd
Upload
4 views58 pages

Wt Module II

HTML, or Hyper Text Markup Language, is the standard language for creating web pages and applications, using various elements and tags to structure content. It has evolved through several versions, from HTML 1.0 to HTML5, each introducing new features and capabilities for web development. Key components include HTML elements, attributes, tags, and the ability to create lists, tables, and forms for user interaction.

Uploaded by

rekhadivya121
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
4 views58 pages

Wt Module II

HTML, or Hyper Text Markup Language, is the standard language for creating web pages and applications, using various elements and tags to structure content. It has evolved through several versions, from HTML 1.0 to HTML5, each introducing new features and capabilities for web development. Key components include HTML elements, attributes, tags, and the ability to create lists, tables, and forms for user interaction.

Uploaded by

rekhadivya121
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/ 58

MODULE II

What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications.

Hyper Text: Hypertext simply means "Text within Text."

Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document.

Web Page: A web page is a document which is commonly written in HTML and translated by
a web browser.

Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Versions

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.

HTML 2.0: which was released in 1995 was able to support extra features such as form-based
file upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable
of creating tables and providing support for extra options for form elements.

HTML 4.01: HTML 4.01 version was released on December 1999, it provides added support
for style sheets (CSS) and scripting ability for various multimedia elements.

HTML5 : HTML5 The first draft of this version was announced in January 2008.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified

2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along with the
text.

4) It is platform-independent because it can be displayed on any platform like Windows, Linux,


and Macintosh, etc.

5) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

6) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the
content.

 All HTML tags must enclosed within < > these brackets.
 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

Building blocks of HTML


What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>


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

<h1>My First Heading</h1>


<p>My first paragraph.</p>

HTML Attributes

 All HTML elements can have attributes


 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

Example

<p style="color: red">The style is attribute of paragraph tag</p>

HTML h tag can be defined as a title or a subtitle which you want to display on the webpage.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading).

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
<h1>This is heading 1</h1>

<p>This is some text.</p>

<hr>

This is heading 1

This is some text.


HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

<p>This is<br>a paragraph<br>with line breaks.</p>

This is

a paragraph

with line breaks.

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. HTML provides us
ability to format text without using CSS.

<b> - Bold text


<strong> - Important text/ bold tag
<em> <i> - Italic text
<mark> - Marked text/ highlighted
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text / underline
<sub> - Subscript text
<sup> - Superscript text

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
Color Names
In HTML, a color can be specified by using a color name:

TomatoOrange DodgerBlue Medium SeaGreen

GraySlateBlueViolet

<h1 style="background-color:Tomato;">Tomato</h1>
Text Color

You can set the color of text:

<h1 style="color:Tomato;">Hello World</h1>

Hello World

<h1 style="border:2px solid Tomato;">Hello World</h1>

Hello World
RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value

between 0 and 255.

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

rgb(255, 0, 0)

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

<h1 style="background-color:#ff0000;">#ff0000</h1>

#ff0000
HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL.
The syntax of HTML anchor tag is given below.

<a href = " .......... "> Link Text </a> Let's see an example of HTML anchor tag.

<a href="second.html">Click for Second Page</a>

HTML Image

HTML img tag is used to display image on the web page.

<img src="good_morning.jpg" alt="Good Morning Friends"/>

All attributes of HTML image tag are given below.

src It is a necessary attribute that describes the source or path of the imageThe location of image

alt The alt attribute defines an alternate text for the image, if it can't be displayed.. The alt
attribute is considered good for SEO prospective.

width It is an optional attribute which is used to specify the width to display the image

height It is the height of the image.

<img src="animal.jpg" height="180" width="300" alt="animal image”>

Border Color

You can set the color of borders:

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>

OUT PUT

Hello World
Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and

the CSS background-image property:

Example:

<body background="good-morning.jpg">

Marquee HTML

The Marquee HTML tag is a non-standard HTML element which is used to scroll a
image or text horizontally or vertically.

Example

<marquee>This is an example of html marquee </marquee>

Out put
This is an example of html marquee
Attribute: Description
Behavior: It facilitates user to set the behavior of the marquee to one of the three
different types: scroll, slide and alternate.

Description
Attribute
It facilitates user to set the behavior of the marquee to one of the three
Behavior: different types: scroll, slide and alternate.

direction Defines direction for scrolling content. It may be left, right, up and down.

width Defines width of marquee in pixels or %.

height Defines height of marquee in pixels or %.

hspace Defines horizontal space in pixels around the marquee.


vspace Defines vertical space in pixels around the marquee.
scrolldelay Defines scroll delay in seconds.
Scrollamont Defines scroll amount in number.

loop Defines loop for marquee content in number.


bgcolor Defines background color. It is now deprecated.

<marquee width="100%" behavior="slide" bgcolor="pink"> This is an example of a

slide marquee...</marquee>

Nested marquee example

<marquee width="400px" height="100px" behavior="alternate" style="border:2px


solid red">
<marquee behavior="alternate"> Nested marquee...
</marquee>
</marquee>

Direction Example:

<marquee behavior="alternate" bgcolor="red" width="400px" height="100px"direction="up">


Nested marquee...</marquee>
Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Eachtable data/cell is
defined with a <td> tag.
By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left- aligned

HTML Table Tags


Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in atable for formatting


<col> Specifies column properties for each column within a <colgroup>element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Example

<h2>Basic HTML Table</h2>


<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

First name Last name Age

Jill Smith 50

Eve Jackson 94

John Doe 80
HTML Table - Add a Border
To add a border to a table, use the CSS border property:
</head>
<style> table, th, td {
border: 1px solid black; } </style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
Table with Border

Use the CSS border property to add a border to the table.

First name Last name Age


Jill Smith 50

HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Tag Description

<ul> Defines an unordered list


<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items
will be marked with bullets (small black circles) by default:

Example

<h2>An unordered HTML list</h2>


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Out put

An unordered HTML list


• Coffee
• Tea
• Milk

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will
be marked with numbers by default:

<h2>An ordered HTML list</h2>


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Out put

An ordered HTML list


1. Coffee
2. Tea
3. Milk

HTML Description Lists

HTML also supports description lists.


A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term: Example
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Out put

A Description List
Coffee
- black hot drink Milk
- white cold drink

HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.
Input fields
=============================================
field name keyword syntax
=============================================

Text box tex. <input type=“text”>


Passwordbox password. <input type=“password”>
Checkbox Checkbox. <input type=“Checkbox”>
Radio button radio <input type=“radio ”>
Submit button submit <input type=“submit”>
Reset botton. Reset. <input type=“reset”>
Text area. ext area < Text area > < /Text area >

=======================================
Attributes parameters
=========================================
Name. any name
Value. Any value
Size. Pixels
Max length number
Rows. Number
Cols number
Readonly true, false
Disabled disabled
Checked. Checked
Multiple true, false

HTML <form> element


The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area, password field, etc.
</form>
//Form elements
</form>

HTML <input> element


It is used to create form fields, to take input from user.
<form>
Enter your name <br>
<input type="text" name="username">
</form>
HTML TextField Control
The type="text" attribute of input tag creates text field control also known as single line text
field control. The name attribute is optional, but it is required for the server side component
such as JSP, ASP, PHP etc.

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

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.
Example:
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
Out put

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user
friendly.

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

HTML Password Field Control


The password is not visible to the user in password field control.

Example
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/>
<br/>
</form>

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must
use @ and . in this field.

Example:
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Radio Button Control
The radio button is used to select one option from multiple options at a time. It is used for
selection of gender, quiz questions etc.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

Example

<form> Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Out put

Note: These are similar to radio button except it can choose multiple options at a time and
radio button can select one button at a time, and its display

Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.
Syntax:

The type = submit , specifying that it is a submit button


The value attribute can be anything which we write on button on web page.

Example
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">

</form>

<input type="date">:
The <input> element of type "date" generates an input field, which allows a user to input the
date in a given format. A user can enter the date by text field or by date picker interface.
Example:

<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End
date:<br><br>
<input type="submit">
</form>
<input type="datetime-local">:
The <input> element of type "datetime-local" creates input filed which allow a user to select
the date as well as local time in the hour and minute without time zone information.
Example:
<form>
<label>
Select the meeting schedule: <br><br>
Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
</label>
<input type="submit">
</form>

<input type="date">:
The <input> type "date" creates an input field which allows a user to easily enter date
Example:
<form>
Employee Name: <input type="text" placeholder="Your Good name"/> <br>
Date of Joining:
<input type="date" id="dob"> <input type="submit">
</form>
<input type="number">:
The <input> element type number creates input filed which allows a user to enter the
numeric value. You can also restrict to enter a minimum and maximum value using min and
max attribute.
Example:
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>

<input type="tel">:
The <input> element of type ?tel? creates an input filed to enter the telephone number.
Example:
<form>
<label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>
<input type="tel" name="telephone" pattern="[0-9]{3}- [0-9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:
name</label><br>
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
HTML <frameset> tag (Not supported in HTML5)

HTML <frameset> tag is used to contain the group of frames which can be controlled and
styled as a unit.
Note: Do not use HTML <frameset> element as it is deprecated and not supported by
HTML5, but you can use <iframe> tag instead.

</head>
<frameset cols="50%,50%">
<frame src="https://www.w3.org">
<frame src="https://en.wikipedia.org/wiki/HTML">
</frameset>

<frameset rows="20%,80%">
<frame src="title.html"name="title"width="100" height=" 100">
<frameset cols="50%,50%">
<frame src=" https://www.w3.org " name="home" width="100" height=" 100">
<frame src=" https://en.wikipedia.org/wiki/HTML" name="login" width="100" height="
100">
</frameset>

HTML form Attribute


In HTML there are various attributes available for <form> element which are given below:

HTML action attribute

The action attribute of <form> element defines the process to be performed on form when
form is submitted, or it is a URL to process the form information.

The action attribute value defines the web page where information proceed. It can be .php,
.jsp, .asp, etc. or any URL where you want to process your form.

Note: If action attribute value is blank then form will be processed to the same page
Example

<form action="action.html" method="post">

<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit">
</form>
HTML method attribute

The method attribute defines the HTTP method which browser used to submit the form.

The possible values of method attribute can be:

post: We can use the post value of method attribute when we want to process the sensitive
data as it does not display the submitted data in URL.

Example
<form action="action.html" method=“post">

get: The get value of method attribute is default value while submitting the form. But this is
not secure as it displays data in URL after submitting the form

Example
<form action="action.html" method="get">

file:///D:/HTML/action.html?name=JavaTPoint&pass=123

HTML target attribute


The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute
_self: If we use _self as an attribute value, then the response will display in current page only
Example
<form action="action.html" method="get" target="_self">

_blank: If we use _blank as an attribute it will load the response in a new page

Example
<form action="action.html" method="get" target="_blank">

What is CSS

 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
 External style sheets are stored in CSS files
What does CSS do

 You can add new looks to your old HTML documents.


 You can completely change the look of your website with only a few changes in CSS
code.
Why use CSS

These are the three major benefits of CSS


Solves a big problem

For example: If you are developing a large website where fonts and color information are added
on every single page, it will be become a long and expensive process. CSS was created to solve
this problem. It was a W3C recommendation.

Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire website
by changing just one file.

Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

CSS Syntax

A CSS rule set contains a selector and a declaration block.


Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:

1. color: yellow; 2.font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned
to color property.

Selector{Property1: value1; Property2: value2; ;}

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

 CSS Element Selector


 CSS Id Selector
 CSS Class Selector
 CSS Universal Selector
 CSS Group Selector

CSS Element Selector

The element selector selects the HTML element by name.

Example

<!DOCTYPE html>

<html><head><style> p{

text-align: center; color: blue; }

</style> </head><body>

<p> Me too! And me!</p>

</body></html>
Output:

Me too! And me!

CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Example

<!DOCTYPE html>

<html><head> <style> #para1 {text-align: center; color: blue;


}

</style></head><body>

<p id="para1">Hello Javatpoint.com</p>

<p>This paragraph will not be affected.</p>

</body></html>

Output:

Hello Javatpoint.com

This paragraph will not be affected.

CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period
character. (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Example

<!DOCTYPE html>

<html> <head> <style>

.center {
text-align: center; color: blue;

</style> </head> <body>

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body> </html>

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you should
use the element name with class selector.

Example

<!DOCTYPE html>

<html><head> <style> p.center {text-align: center; color: blue;


}

</style> </head> <body>

<h1 class="center">This heading is not affected</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body> </html>

Output:

This heading is not affected

This paragraph is blue and center-aligned.


CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE html> <html> <head> <style>

*{

color: green; font-size: 20px;

</style> </head> <body>

<p id="para1">Me too!</p>

<p>And me!</p></body> </html>

Output:

Me too!
And me!
CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.

Example

h1 { text-align: center;

color: blue; }

h2 { text-align: center;

color: blue; }

As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:

h1,h2{

text-align: center;

color: blue; }
Let's see the full example of CSS group selector.

Example

<!DOCTYPE html> <html> <head>

<style> h1, p {

text-align: center; color: blue;

</style> </head> <body>

<h1>Hello Javatpoint.com</h1>

<p>This is a paragraph.</p>

</body> </html>

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet.
There are three ways to insert CSS in HTML documents.

 Inline CSS
 Internal CSS
 External CSS

Inline CSS

Inline CSS is used to apply CSS on a single line or element. For example:

<p style="color:blue">Hello CSS</p>

Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of
the page. It is written inside the style tag within head section of html.

For example:

<!DOCTYPE html>

<html> <head> <style> body {

background-color: linen; }
h1 {

color: Red;

margin-left: 80px; }

</style> </head> <body>

<h1>The internal style sheet is applied on this heading.</h1>

<p>This paragraph will not be affected.</p>

</body> </html>

Out put

The internal style sheet is applied

on this heading.

This paragraph will not be affected.

External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It
is ideal for this condition because it facilitates you to change the look of the entire web site by
changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

Example:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

The external style sheet may be written in any text editor but must be saved with a .css extension.
This file should not contain HTML elements.
body {

background-color: lightblue;

h1 {
color: navy; margin-left: 20px;
}

CSS Comments

CSS comments are generally written to explain your code. It is very helpful for the users who
reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /

*............*/ .
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. HTML was designed
to display data, with focus on how data looks. HTML is about displaying information, while
XML is about carrying information.
XML does not do anything: May be it is a little hard to understand, but XML does not do
anything. XML was created to structure, store, and transport information. The following
exampleis a note to chythu, from ravi, stored as XML:

<note>
<to> chythu </to>
<from> ravi </from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>

The note above is quite self-descriptive. It has sender and receiver information, it also hasa
heading and a message body. But still, this XML document does not do anything. It is just
information wrapped in tags. Someone must write a piece of software to send, receive or
display it.
With XML you invent your own tags: The tags in the example above (like <to> and <from>)
are not defined in any XML standard. These tags are "invented" by the author of the XML
document. That is because the XML language has no predefined tags. The tags used in HTML
are predefined. HTML documents can only use tags defined in the HTML standard (like
<p>,
<h1>, etc.). XML allows the author to define his/her own tags and his/her own document
structure. XML is not a replacement for HTML; XML is a complement to HTML. It is
importantto understand that XML is not a replacement for HTML. In most web applications,
XML is used to transport data, while HTML is used to format and display the data.
My best description of XML is this: XML is a software- and hardware-independent tool for
carrying information. XML is a W3C recommendation. XML became a W3C recommendation
February 10, 1998. XML is everywhere. XML is now as important for the web as HTML was
to the foundation of the web. XML is the most common tool for data transmissions between
all sorts of applications.
XML separates data from HTML: If you need to display dynamic data in your HTML
document, it will take a lot of work to edit the HTML each time the data changes. With XML,
data can be stored in separate XML files. This way you can concentrate on using HTML for
layout and display, and be sure that changes in the underlying data will not require any
changesto the HTML. With a few lines of JavaScript code, you can read an external XML file
and updatethe data content of your web page.
Unique Features of XML:
a) Sharing of data: In the real world, computer systems and databases contain data in
incompatible formats. XML data is stored in plain text format. This provides a software- and
hardware-independent way of storing data. This makes it much easier to create data that can be
shared by different applications.
b) Transporting data: One of the most time-consuming challenges for developers is
to exchange data between incompatible systems over the internet. Exchanging data as XML
greatly reduces this complexity, since the data can be read by different incompatible
applications.
c) Change of platform: Upgrading to new systems (hardware or software platforms),
is always time consuming. Large amounts of data must be converted and incompatible data is
often lost. XML data is stored in text format. This makes it easier to expand or upgradeto new
operating systems, new applications, or new browsers, without losing data.
d) Availability of data: Different applications can access your data, not only in HTML
pages, but also from XML data sources. With XML, your data can be available to all kinds of
"reading machines" (handheld computers, voice machines, news feeds, etc), and make it more
available for blind people, or people with other disabilities.
Structure of XML:
XML documents form a tree structure that starts at "the root" and branches to "the leaves". An
example of XML document is shown below. XML documents use a self-describing and simple
syntax:

<?XML version="1.0" encoding="iso-8859-1"?>


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

The first line is the XML declaration. It defines the XML version (1.0) and the encoding used
(ISO-8859-1 = latin-1/west European character set). The next line describes the root element
of the document (like saying: "This document is a note"):

<note>
The next 4 lines describe 4 child elements of the root (to,
from,heading, and body):
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
And finally the last line defines the end of the root element:</note>
You can assume, from this example, that the XML document contains a note to Tove from
Jani. Don't you agree that XML is pretty self-descriptive? XML documents form a tree structure
XMLdocuments 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:

<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 documentare
contained within <bookstore>. The <book> element has 4 children: <title>, <author>, <year>,
and <price>.
XML syntax rules:
The syntax rules of XML are very simple and logical. The rules are easy to learn, and easy
touse. All XML elements must have a closing tag. In HTML, Elements do not have to have a
closing tag:
<p>this is a paragraph
<p>this is another paragraph
In XML, it is illegal to omit the closing tag. All elements must have a closing tag:
<p>this is a paragraph</p>
<p>this is another paragraph</p>
Note: You might have noticed from the previous example that the XML declaration did not
havea closing tag. This is not an error. The declaration is not a part of the XML document
itself, andit has no closing tag.
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> <!--This is wrong-->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
openedinside 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
isthe 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>
The error in the first document is that the date attribute in the note element is not quoted.
Entity References: Some characters have a special meaning in XML. If you place a character
like "<" inside an XML element, it will generate an error because the parser interprets it as the
start of a new element. This will generate an XML error:
<message>if salary < 1000 then</message>
To avoid this error, replace the "<" character with an entity reference:
<message>if salary &lt; 1000 then</message> There are 5 predefined entity references in
XML:

&lt; < less than


&gt; > greater than

&amp; & ampersand

&apos; ' apostrophe


&quot; " quotation mark

Note: only the characters "<" and "&" are strictly illegal in XML. the greater than character
islegal, but it is a good habit to replace it.
Comments in XML: The syntax for writing comments in XML is similar to that of html.
<!-- this is a comment -->
white-space is preserved in XML
HTML truncates multiple white-space characters to one single white-space:
HTML: hello tove
Output: hello tove
With XML, the white-space in a document is not truncated.
XML stores new line as lf in windows applications, a new line is normally stored as a pair of
characters: carriage return (cr) and line feed (lf). In UNIX applications, a new line is normally
stored as an lf character. Macintosh applications also use an lf to store a new line. XML stores
a new line as lf.
Basic Building Blocks of XML Documents:
All XML documents are made up the following four building blocks:
i. Elements/Tags
ii. Attributes
iii. Entities
iv. Character Data
a. Parsed Character Data (PCDATA)
b. Unparsed Character Data (CDATA)
i) XML Elements/Tags:
An XML element is everything from (including) the element's start tag to (including) the
element's end tag. An element can contain: other elements text, attributes or a mix of all of the
above.

<bookstore>
<book category="children">
<title>harry potter</title>
<author>j k. rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title>learning XML</title>
<author>erik t. ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

In the example above, <bookstore> and <book> have element contents, because they
contain other elements. <book> also has an attribute (category="children"). <title>,
<author>,
<year>, and <price> have text content because they contain text.
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
youwant 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 thenaming rules of your database for the elements in the XML documents.

 Non-english letters like éòá are perfectly legal in XML, but watch out for
problems ifyour software vendor doesn't support them.
XML Elements are Extensible:
XML elements can be extended to carry more information. look at the following XML
example:

<note>
<to>Chythu</to>
<from>Ravi</from>
<body>Don't forget me this weekend!</body>
</note>

Let‟s imagine that we created an application that extracted the <to>, <from>, and <body>
elements from the XML document to produce this output:
Message to: Chythufrom: Ravi
Don't forget me this weekend!
Imagine that the author of the XML document added some extra information to it:

<note>
<date>2008-01-10</date>
<to>Chythu</to>
<from>Ravi</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>

Should the application break or crash?


No, the application should still be able to find the <to>, <from>, and <body> elements in the
XML document and produce the same output. One of the beauties of XML is that it can be
extended without breaking applications.
ii) XML Attributes:
XML elements can have attributes, just like html. Attributes provide additionalinformation
about an element. In html, attributes provide additional information about elements:

<img src="computer.gif">
<a href="demo.asp">

Attributes often provide information that is not a part of the data. In the example below, the
file type is irrelevant to the data, but can be important to the software that wants to manipulate
the element:

<file
type="gif">computer.gif</file>
XML attributes must be quoted: Attribute values must always be quoted. Either single
ordouble quotes can be used. For a person's sex, the person element can be written like this:
<person sex="female">
or like this:
<person sex='female'>
If the attribute value itself contains double quotes you can use single quotes, like in this
example:
<gangster name='george "shotgun" ziegler'>or you can use character entities:
<gangster name="george &quot;shotgun&quot; ziegler">
XML Elements v/s Attributes:
Take a look at these examples:
 <person gender="male">
<firstname>Ravi</firstname>
<lastname>Chythanya</lastname>
</person>
 <person>
<gender>male</gender>
<firstname>Ravi</firstname>
<lastname>Chythanya</lastname>
</person>
In the first example gender is an attribute. In the next, gender is an element. Both examples
provide the same information. There are no rules about when to use attributes or when to use
elements. Attributes are handy in html. In XML my advice is to avoid them. Use elements
instead.
My favorite way:
The following three XML documents contain exactly the same information:
1) A date attribute is used in the first example:

<note date="10/01/2008">
<to>tove</to>
<from>jani</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>

2) A date element is used in the second example:

<note>
<date>10/01/2008</date>
<to>tove</to>
<from>jani</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>

3) An expanded date element is used in the third: (this is my favorite):

<note>
<date>
<day>10</day>
<month>01</month>
<year>2008</year>
</date>
<to>tove</to>
<from>jani</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>
Avoid XML attributes?
Some of the problems with using attributes are:
 Attributes cannot contain multiple values (elements can)
 Attributes cannot contain tree structures (elements can)
 Attributes are not easily expandable (for future changes)
 Attributes are difficult to read and maintain. use elements for data. use attributes
forinformation that is not relevant to the data.
 Don't end up like this:
<note day="10" month="01" year="2008" to="tove" from="jani" heading="reminder"
body="don't forget me this weekend!"> </note>
XML attributes for metadata:
Sometimes ID references are assigned to elements. These IDs can be used to identifyXML
elements in much the same way as the id attribute in html. This example demonstrates this:

<messages>
<note id="501">
<to>tove</to>
<from>jani</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>
<note id="502">
<to>jani</to>
<from>tove</from>
<heading>re: reminder</heading>
<body>i will not</body>
</note>
</messages>

The ID attributes above are for identifying the different notes. It is not a part of the note itself.
What I'm trying to say here is that metadata (data about data) should be stored asattributes,
and the data itself should be stored as elements.
iii) XML Entities:
An entity is the symbolic representation of some information. It references the data that look
like an abbreviation or can be found at an external location. Entities reduce the redundant
information and also allow for easier editing. The entities can be internal or external.
Forexample, the entity „&amp;‟ will replace as „&‟, where ever it is found in the XML
document.
iv) PCDATA:
PCDATA stands for Parsed Character Data. The text enclosed between starting and ending tag
is known as Character Data. The parser parses the PCDATA and identifies the entitiesas well
as markup. Markups include the tags inside the text and entities are expanded. In the caseof
Parsed Character Data, the symbols „&‟, „<‟, „>‟ are represented using entities.
v) CDATA:
CDATA stands for Character Data and it is not parsed by the parser. The tags inside the text
are not considered as markup and the entities are not expanded.
Validation of XML:
There are two levels of correctness of an XML document:
1) XML with correct syntax is Well Formed XML.
2) XML validated against a DTD is Valid XML.
A Well Formed XML document is a document that conforms to the XML syntax rules like:
 XML documents must have a root element.
 XML elements must have a closing tag.
 XML tags are case sensitive.
 XML elements must be properly nested.
 XML attribute values must be quoted
Example:

<?XML version="1.0" encoding="iso-8859-1"?>


<note>
<to>tove</to>
<from>jani</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</body>
</note>

A Valid XML document is a “well formed” XML document, which conforms to the rules
of adocument type definition (DTD).
Document Type Definition (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:
DTD Syntax:

<!DOCTYPE DOCUMENT [
<!ELEMENT ELEMENT_NAME1 (Attribute Names) Appearance of attributes>
<!ELEMENT ELEMENT_NAME2>

<!ELEMENT ELEMENT_NAME3>
.
.
<!ELEMENT ELEMENT_NAMEn>
<!ATTLIST Element_name Attribute_name Attribute_type Default_value>
]>

A DTD can be declared inline inside an XML document, or as an external reference.


Internal DTD Declaration:
If the DTD is declared inside the XML file, it should be wrapped in DOCTYPE definition as
inthe following example:

<!DOCTYPE note[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#CDATA)>
]>
<note>
<to>Ravi</to>
<from>Chythanya</from>
<heading>Message</heading>
<body>Welcome to the XML with DTD</body>
</note>
The DTD above is interpreted like this:
 !DOCTYPE note defines that the root element of this document is note.
 !ELEMENT note defines that the note element contains four elements “to, from,
heading,body”.
 !ELEMENT to defines that to element to be of the type #PCDATA.
 !ELEMENT from defines that from element to be of the type #PCDATA.
 !ELEMENT heading defines that heading element to be of the type #PCDATA.
 !ELEMENT body defines that body element to be of the type #CDATA.
External DTD Declaration:
If the DTD is declared in an external file, it should be wrapped in a DOCTYPE definition
withthe following syntax:
<!DOCTYPE DOCUMENT SYSTEM “File_Name.dtd”>
Example: emailDTD.xml:
<?xml version=”1.0”?>
<!DOCTYPE note SYSTEM “emailDTD.dtd”>
<note>
<to>Ravi</to>
<from>Chythanya</from>
<heading>Message</heading>

<body>Welcome to the XML with DTD</body>


</note>

emailDTD.dtd:
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#CDATA)>

XML Schema:
W3C supports an XML-based alternative to DTD, called XML schema:
1) The XML schema is used to represent the structure of XML document. The goal or
purpose of XML schema is to define the building blocks of an XML document. These can be
used as an alternative to XML DTD. The XML schema language is called as XMLSchema
Definition (XSD) language. The XML schema became the World Wide Web Consortium
(W3C) recommendation in 2001.
2) XML schema defines elements, attributes, elements having child elements, order of
child elements. It also defines fixed and default values of elements and attributes.
3) XML schema also allows the developers to use data types.
4) File extension of XML schema is “.xsd” i.e., Filename.xsd
Ex: StudentSchema.xsd:
<?XML version=”1.0”?>
<xs:schema XMLns:xs=“http://www.w3.org/2001/XMLschema”>
<xs:element name="student">
<xs:complextype>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="address" type="xs:string"/>
<xs:element name="std" type="xs:string"/>
<xs:element name="marks" type="xs:string"/>
</xs:sequence>
</xs:complextype>
</xs:element>
</xs:schema>

XML Document (myschema.XML):

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


<student XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "studentschema.xsd">
<name>anand</name>
<address>knr</address>
<std>second</std>
<marks>70percent</marks>
</student>
Data Types in XML:
Various data types are that can be used to specify the data types of an elements are:
 String
 Date
 Time
 Numeric
 Boolean
1. String Data Type:
The string data type can be used to define the elements containing the characters lines,
tabs,white spaces, or special characters.
Example:
XML Schema [stringType.xsd]:
<?xml version= “1.0” ?>
<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “StudentName” type=“xs:string”>
</xs:schema>

XML Document[stringTypeDemo.xml]:

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


<StudentName XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "stringType.xsd">
Ravi Chythanya
</StudentName>

2. Date Data Type:


For specifying the date we use date data type. The format of date is yyyy-mm-dd, where yyyy
denotes the Year, mm denotes the month and dd specifies the day.
Example:
XML Schema [dateType.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “DOB” type=“xs:date”>
</xs:schema>

XML Document[dateTypeDemo.xml]:

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


<DOB XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "dateType.xsd">
1988-03-01
</DOB>
3. Time Data Type:
For specifying the time we use time data type. The format of date is hh:mm:ss, where hh
denotesthe Hour, mm denote the minutes and ss specify the seconds.
Example:
XML Schema [timeType.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “MyTime” type=“xs:time”>
</xs:schema>

XML Document[timeTypeDemo.xml]:

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


<MyTime XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "timeType.xsd">
01:57:03
</MyTime>

4. Numeric Data Type:


If we want to use numeric value for some element then we can use the data types as
either
“decimal” or “integer”.Example:
XML Schema [decimalType.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Percentage” type=“xs:decimal”>
</xs:schema>

XML Document[decimalTypeDemo.xml]:

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


<Percentage XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "decimalType.xsd">
99.99
</Percentage>
XML Schema [integerType.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Age” type=“xs:integer”>
</xs:schema>

XML Document[integerTypeDemo.xml]:

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


<Age XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "integerType.xsd">
30
</Age>

5. Boolean Data Type:


For specifying either true or false values we must use the Boolean data type.
Example:
XML Schema [booleanType.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Flag” type=“xs:boolean”>
</xs:schema>

XML Document[booleanTypeDemo.xml]:

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


<Flag XMLns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "booleanType.xsd">
true
</Flag>

Simple Types:
XML defines the simple type which contains only text and does not contain any other element
orattributes. But the text appears for element comes along with some type. The syntax is:
<xs:element name= “element_name” type= “data_type”>Here the type can be any built in
data type:
xs:string
xs:date
xs:time
xs:integer
xs:decimal
xs:Boolean
Restrictions on Simple Types:
For an XML document, it is possible to put certain restrictions on its contents. These
restrictions are called as facets.
XML Schema [Month.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Month”>
<xs:simpleType>
<xs:restriction base= “xs:integer”>
<xs:minInclusive value= “1”>
<xs:maxInclusive value= “12”>
</xs:restriction>
</xs:simpleType>
</xs:element>
</xs:schema>

XML Document[MonthDemo.xml]:

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


<Age xmlns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "Month.xsd">
12
</Month>

Various facets that can be applied are:


 length – Specifies exact number of characters.
 minLength – Specifies the minimum number of characters allowed.
 maxLength – Specifies the minimum number of characters allowed.
 minInclusive – Specifies lower bound for numeric values.
 minExclusive – Specifies lower bound for numeric values.
 maxInclusive – Specifies upper bound for numeric values.
 maxExclusive – Specifies upper bound for numeric values.
 enumeration – A list of acceptable values can be defined.
 pattern – specifies exact sequence of characters that are acceptable.
 totalDigits – Specifies the exact number of digits.
 fractionDigits – Specifies maximum number of decimal places allowed.
 whiteSpace – Specifies how to handle white spaces. The white spaces can be spaces,
tags,line feed, or carriage return.
Restrictions that can be applied on the data types are:

string date numeric boolean


enumeration enumeration enumeration enumeration
Length maxExclusive fractionDigits length
minLength maxInclusive maxExclusive maxLength
maxLength minExclusive maxInclusive minLength
Pattern minInclusive minExclusive pattern
whiteSpaces pattern minInclusive whiteSpaces
whiteSpaces totalDigits
whiteSpaces
Complex Types:
1) Elements:
Complex elements are the elements that contain some other elements or attributes.The complex
types of elements are:
i) Empty Elements
ii) Elements that contain text
iii) Elements that contain other elements
iv) Elements that contain other text as well other elements
i) Empty Elements:
Let us define the empty elements by the complexType.
Example [Student.xsd]:
<?xml version= “1.0” ?>
<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Student”>
<xs:complexType>
<xs:attribute name= “HTNo” type= “xs:integer”>
</xs:complexType>
</xs:element>
</xs:schema>

XML Document[Student.xml]:

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


<Student xmlns:xsi = "http://www.w3.org/2001/XMLschema-instance"
xsi:nonamespaceschemalocation = "Student.xsd" HTNo="1343">
</Student>

ii) Elements that contain text only:


We have the elements that contain simple contents such as text and attributes. Hence we must
add the type as simpleContent in the schema definition. This simpleContent element must
have either extension or restriction.
Example [Student.xsd]:
<?xml version= “1.0” ?>
<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Student”>
<xs:complexType>
<xs:simpleContent>
<xs:extension base= “xs:integer”>
<xs:attribute name= “HTNo” type= “xs:integer”>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
</xs:schema>
XML Document[Student.xml]:

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


<Student xmlns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "Student.xsd"
HTNo="1343">
100
</Student>
iii) Elements that contain other elements only:Example [Student.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Student”>
<xs:complexType>
<xs:sequence>
<xs:element name= “firstName” type= “xs:string”>
<xs:element name= “lastName” type= “xs:string”>
</xs:sequence>
</xs:complexType>
</xs:element>

</xs:schema>

XML Document[Student.xml]:

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


<Student xmlns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "Student.xsd">
<firstName>Ravi</firstName>
<lastName>Chythanya</lastName>
</Student>

iv) Elements that contain text as well as other elements:Example [Student.xsd]:

<?xml version= “1.0” ?>


<xs:schema xmlns:xs=“ http://www.w3.org/2001/XMLschema”>
<xs:element name= “Student”>
<xs:complexType mixed= “true”>
<xs:sequence>
<xs:element name= “Name” type= “xs:string”>
<xs:element name= “HTNo” type= “xs:integer”>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

XML Document[Student.xml]:

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


<Student xmlns:xsi = "http://www.w3.org/2001/XMLschema-
instance"xsi:nonamespaceschemalocation = "Student.xsd">
My Dear Student <Name>Ravi</Name>
With Hall Ticket Number <HTNo>0536</HTNo>
</Student>

2) Indicators:
Indicators allow us to define the elements in the manner we want. Following are some
indicators that are available in XML Schema.
i) all
ii) choice
iii) sequence
iv) maxOccurs
v) minOccurs

Document Type Definition (DTD)


DTD stands for Document Type Definition and it is a document which defines the structure of an XML
document. It is used to describe the attributes of XML language precisely. It can be classified into two types
namely internal DTD and external DTD. It can be specified inside a document or outside a document. DTD
mainly checks the grammar and validity of a XML document. It checks that a XML document has a valid
structure or not.
XML Schema Definition (XSD)
XSD stands for XML Schema Definition and it is a way to describe the structure of a XML document. It
defines the rules for all the attributes and elements in a XML document. It can also be used to generate the
XML documents. It also checks the vocabulary of the document. It doesn’t require processing by a parser. XSD
checks for the correctness of the structure of the XML file. XSD was first published in 2001 and after that it
was published in 2004.
Difference between Document Type Definition (DTD) and XML Schema Definition (XSD)

S.NO. DTD XSD

DTD are the declarations that define a XSD describes the elements in a XML
1.
document type for SGML. document.

2. It doesn’t support namespace. It supports namespace.

3. It is comparatively harder than XSD. It is relatively more simpler than DTD.

4. It doesn’t support datatypes. It supports datatypes.

5. SGML syntax is used for DTD. XML is used for writing XSD.

6. It is not extensible in nature. It is extensible in nature.

It doesn’t give us much control on It gives us more control on structure of XML


7.
structure of XML document. document.

Any element which is made global can be


8. It specifies only the root element.
done as root as markup validation.

It doesn’t have any restrictions on data


9. It specifies certain data restrictions.
used.

10. It is not much easy to learn . It is simple in learning.

11. File here is saved as .dtd File in XSD is saved as .xsd file.

12. It is not a strongly typed mechanism. It is a strongly typed mechanism.

It uses #PCDATA which is a string data


13. It uses fundamental and primitive data types.
type.
Document Object Model:

DOM (Document Object Model) converts an XML document into a tree of objects. It is a random
access protocol that accesses the XML document randomly. DOM can update the XML document i.e., it
can write into the XML document or manipulate an XML document. DOM is a W3C standard for
accessing the XML document.

XML DOM:
The XML DOM is:
 A standard object model for XML
 A standard programming interface for XML
 Platform- and language-independent
 A W3C standard

The XML DOM defines the objects and properties of all XML elements, and the methods
(interface) to access them. In other words: The XML DOM is a standard for how to get, change, add, or
delete XML elements.
The XML DOM views an XML document as a tree-structure. All elements can be accessed through the
DOMtree. Their content (text and attributes) can be modified or deleted, and new elements can be created.
Theelements, their text, and their attributes are all known as nodes. The node tree shows the set of nodes,
andthe connections between them. The tree starts at the root node and branches out to the text nodes at the
lowestlevel of the tree.
All modern browsers have a build-in XML parser that can be used to read and manipulate XML. With
theXML DOM properties and methods, you can access every node in an XML document. The XML
DOMcontains methods (functions) to traverse XML trees, access, insert, and delete nodes. However, before
anXML document can be accessed and manipulated, it must be loaded into an XML DOM object. An
XMLparser reads XML, and converts it into an XML DOM object that can be accessed with JavaScript.
Mostbrowsers have a built-in XML parser.Following shows a DOM tree example;

Get the Value of an XML Element


This code retrieves the text value of the first <title> element in an XML document:

Example
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Loading an XML File
The XML file used in the examples below is books.xml.
This example reads "books.xml" into xmlDoc and retrieves the text value of the first <title> element in
books.xml:

Example
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

Example Explained

 xmlDoc - the XML DOM object created by the parser.


 getElementsByTagName("title")[0] - get the first <title> element
 childNodes[0] - the first child of the <title> element (the text node)
 nodeValue - the value of the node (the text itself)

Loading an XML String

This example loads a text string into an XML DOM object, and extracts the info from it with
JavaScript:

Example
<html>
<body>

<p id="demo"></p>

<script>
var text, parser, xmlDoc;

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();


xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>
Programming Interface

The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other
programming languages. In this tutorial we use JavaScript.

The programming interface to the DOM is defined by a set standard properties and methods.

Properties are often referred to as something that is (i.e. nodename is "book").

Methods are often referred to as something that is done (i.e. delete "book").

XML DOM Properties

These are some typical DOM properties:

 x.nodeName - the name of x


 x.nodeValue - the value of x
 x.parentNode - the parent node of x
 x.childNodes - the child nodes of x
 x.attributes - the attributes nodes of x

Note: In the list above, x is a node object.

XML DOM Methods

 x.getElementsByTagName(name) - get all elements with a specified tag name


 x.appendChild(node) - insert a child node to x
 x.removeChild(node) - remove a child node from x

Note: In the list above, x is a node object.


SAX:
SAX (Simple API for XML) is an event-based sequential access parser API developed by the XML-
DEV mailing list for XML documents. SAX provides a mechanism for reading data from an XML document
thatis an alternative to that provided by the Document Object Model (DOM). Where the DOM operates on
thedocument as a whole, SAX parsers operate on each piece of the XML document sequentially.
Unlike DOM, there is no formal specification for SAX. The Java implementation of SAX is considered
tobe normative. It is used for state-independent processing of XML documents, in contrast to StAX(Streaming
API for XML) that processes the documents state-dependently.
SAX parsers have certain benefits over DOM-style parsers. The quantity of memory that a SAX parser
must use in order to function is typically much smaller than that of a DOM parser. DOM parsers must have the
entire tree in memory before any processing can begin, so the amount of memory used by a DOM parser
depends entirely on the size of the input data. The memory footprint of a SAX parser, by contrast, is based only
on the maximum depth of the XML file (the maximum depth of the XML tree) and the maximum data stored in
XML attributes on a single XML element. Both of these are always sma ller than the size of the parsed tree
itself.
Because of the event-driven nature of SAX, processing documents can often be faster than DOM-style
parsers. Memory allocation takes time, so the larger memory footprint of the DOM is also a performance issue.
Due to the nature of DOM, streamed reading from disk is impossible. Processing XML documents larger than
main memory is also impossible with DOM parsers, but can be done with SAX parsers.However, DOM parsers
may make use of disk space as memory to sidestep this limitation.

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.

Let's understand the working of XML parser by the figure given below:

SAX Parser
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
 The internal structure can not be created by SAX Parser.
 These event-based SAX parsers work the same as the event handler in Java.
Advantages Of SAX Parser
 Very simple to use and has good efficiency of memory.
 Its runtime is too fast and it can work for a bigger document or file system.
Disadvantages Of SAX Parser
 Its ability to understand APIs is too less than an event-based API.
 We can’t know the full information because of a lot of pieces of data.
DOM Parser
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.
Advantages Of DOM Parser
 DOM API is easy to use so that we can do both write and read operations.
 When a document is required then it preferred a wide part that can be randomly accessed.
Disadvantages Of DOM Parser
 Its efficiency of memory is not too good, it takes more memory cause XML docs needed to load in
there.
 In comparison to the SAX parser, it is too slow.
Hence, conclusive differences between SAX Parser and DOM Parser in Java is as follows

SAX Parser DOM Parser

It is called a Simple API for XML Parsing. It is called as Document Object Model.

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

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

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

It is not good at making XML files in low


It is suitable for making XML files in Java.
memory.
SAX Parser DOM Parser

The internal structure can not be created by SAX The internal structure can be created by DOM
Parser. Parser.

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

In the SAX parser backward navigation is not In DOM parser backward and forward search is
possible. possible

Suitable for efficient memory. Suitable for large XML document.

A small part of the XML file is only loaded in


It loads whole XML documents in memory.
memory.

You might also like