Unit-1

What is Internet
the Internet is a global network comprised of smaller networks that are interconnected
using standardized communication protocols. The Internet standards describe a framework
known as the Internet protocol suite. This model divides methods into a layered system of
protocols.
Using the internet we can send emails, photos, videos, messages to our loved ones. Or in other
words, the internet is a widespread interconnected network of computers and electronics
devices(that support internet). It creates a communication medium to share and get information
online. If your device is connected to the Internet then only you will be able to access all the
applications, websites, social media apps, and many more services. Internet nowadays is
considered as the fastest medium for sending and receiving information.
Origin Of Internet: The internet came in the year 1960 with the creation of the first working
model called ARPANET (Advanced Research Projects Agency). It allowed multiple computers
to work on a single network that was their biggest achievement at that time. ARPANET use
packet switching to communicate multiple computer systems under a single network. In October
1969, using ARPANET first message was transferred from one computer to another. After that
technology continues to grow.

What is WWW:
The World Wide Web (WWW) is a network of online content that is formatted in HTML and
accessed via HTTP. The term refers to all the interlinked HTML pages that can be accessed
over the Internet. The World Wide Web was originally designed in 1991 by Tim Berners-Lee
while he was a contractor at CERN.

The World Wide Web is most often referred to simply as "the Web."

It is all the Web pages, pictures, videos and other online content that can be accessed via a
Web browser. The Internet, in contrast, is the underlying network connection that allows us to
send email and access the World Wide Web.

What is DSN :

The Domain Name System (DNS) is called the phonebook of the Internet. When a user types a
domain name or website address into the address bar of the browser, the DNS server is
responsible for translating the domain name to a specific IP address, driving it to the correct
website.

Protocols :

What is protocols

A protocol is a set of rules and guidelines for communicating data. Rules are defined for each
step and process during communication between two or more computers. Networks have to
follow these rules to successfully transmit data.
Below protocols play the major role in web development

1.HTTP

2.FTP

3. SMTP

1.HTTP:

o HTTP stands for Hypertext Transfer Protocol.

o It is a protocol used to access the data on the World Wide Web (www).
o The HTTP protocol can be used to transfer the data in the form of plain text, hypertext,
audio, video, and so on.
o This protocol is known as Hypertext Transfer Protocol because of its efficiency that allows
us to use in a hypertext environment where there are rapid jumps from one document to
another document.

2.FTP

o FTP stands for File transfer protocol.

o FTP is a standard internet protocol provided by TCP/IP used for transmitting the files from
one host to another.
o It is mainly used for transferring the web page files from their creator to the computer that
acts as a server for other computers on the internet.
o It is also used for downloading the files to computer from other servers.
3.SMTP

Email is emerging as one of the most valuable services on the internet today. Most internet
systems use SMTP as a method to transfer mail from one user to another. SMTP is a push
protocol and is used to send the mail whereas POP (post office protocol) or IMAP (internet
message access protocol) are used to retrieve those emails at the receiver’s side.

HTML 5 CONCEPTS:

HTML5 is a next version of HTML. Here, you will get some brand-new features which will make
HTML much easier. These new introducing features make your website layout clearer to both
website designers and users. There are some elements like <header>, <footer>, <nav> and
<article> that define the layout of a website.

The Basic Syntax of html5

<!DOCTYPE html>

<html>

<head> <title>My first html 5 </title></head>

<body>

<data> hello it is my first html5 page </data>

</body> </html>
Already you see about head and body and title tags in your web technologies subject in last
semester

What is <!DOCTYPE>

On the HTML document you have often seen that there is a <!DOCTYPE html> declaration before
the <html> tag. HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML
used in the document. It is called as the document type declaration (DTD).

Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about the
document type. It is a null element which does not contain the closing tag, and must not include
any content within it.

HTML5 Document :

The fallowing tags used for better structure :

 SECTION
 ARTICAL
 ASIDE
 HEADER
 FOOTER
 NAV

1. Section:

<section> …. </section>
A page can be split into a section like introduction and contact information so ..on . each
of this section in different tag.

<section id="DS">
<h1> Data Structures</h1>
<p> Stack, Queue ,Linked List, Tree, Graph </p>

</section>

<section id="JS">

<h1> java script </h1>

<p> Arrow Function , Arrays , Validation, Routing </p>
</section>

2.Article: It contains independent content which does’nt require any other context.
Example: Blog Post, Newspaper Article etc
<article id="prg">

<h1> What Is Programming Language </h1>

<p> A programming language is a computer language that is used by
programmers (developers) to communicate with computers.
It is a set of instructions written in any .. </p>
</article>
<article id="ar">
<h1> what is data base ? </h1>
<p>
A database is an organized collection of structured information, or data,
typically stored electronically in a computer system.
</p>
</article

3.Aside : It is used to place content in a sidebar i.e. aside the existing content. It is related to
surrounding content.

<aside>
<data> Place which elements are use to show on side bar </data>
</aside>

4.Header: it is for header for section or article . There can multiple header on a page

<article>
<header>
<h1> Class </h1>
</header>
<p> class is a logical structure </p>

</article>

5. The <footer> tag defines a footer for a document or section.

<footer>
<p> Copy rights @ 2009 </p>
</footer>

6. The <nav> tag defines a set of navigation links.

Few New Input elements in HTML5

<nav>
 <a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

Input Elements:

1. Date:

The <input type="date"> defines a date picker.

The resulting value includes the year, month, and day.

2. Datetime-local:

The <input type="datetime-local"> defines a date picker.

The resulting value includes the year, month, day, and time.

3. Month

The <input type="month"> defines a month and year control.

4. Week

The <input type="week"> defines a week and year control

5.time

The <input type="time"> defines a control for entering a time

6.email

The <input type="email"> defines a field for an e-mail address.

The input value is automatically validated to ensure it is a properly formatted e-mail address.

7.range :

The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control).

<section>
<h2>Price Range...</h2>
 <label id="num"> Enthe the Price Range.. </label>
<input type ="range" value="count" min="500" max="10000" required/>
</section>

8. Url:

The <input type="url"> defines a field for entering a URL.

<section>

<h2> url type... </h2>

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"><br><br>
</section>

HTML5 Graphics:

1.Canvas

2.SVG

1.HTML Canvas :

The html canvas is used to draw the graphics on web page using javascript

The <canvas> is a element is only a container for graphics .You must use javascript actually
draw the graphics

Canvs tag syntax:

<canvas id="canvas_1" width="300" height="300" style="border: 1px solid blueviolet; " />

Now we draw line

If you want to draw in this canvas you need to write the javascript code

Step 1 : get the element of canvas into javascript code using below code

var canvas = document.getElementById("canvas_1");

Step 2 : The getContext() is a built-in HTML object, with properties and methods for drawing:
var canvas = document.getElementById("canvas_1");
//alert(canvas);
var ctx = canvas.getContext("2d");

Step 3: Now I want taw line on the canvas

ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

for Draw the line we use moveTO and lineTo and stroke

moveTo: The moveTo() method moves the path to the specified point in the canvas, without
creating a line.

lineTo: The lineTo() method adds a new point and creates a line TO that point FROM the last
specified point in the canvas (this method does not draw the line).

Stroke():Use the stroke() method to actually draw the path on the canvas.

Example script on Canvas

<!DOCTYPE html>
<html
<head>
<title> HTML 5 GRAPHICS ....</title>
</head>
<body>
<!-- canvas tag -->
<section id="canvas_basic">
<canvas id="canvas_1" width="300" height="300" style="border: 1px solid blueviolet; " />
</section>
<section>
<canvas id="canvas_2" width="200" height="200" style="border: 1px solid blue;"/>
</section>
</body>
<script>
var canvas_1 = document.getElementById("canvas_1");
//alert(canvas);
var ctx = canvas_1.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
var canvas_2 = document.getElementById("canvas_2");
var ctx2 = canvas_2.getContext("2d");
ctx2.fillstyle="#FF0000";
ctx2.fillRect(0,0,100,50);
//ctx.fillstyle="#FF0000";
//ctx.fillRect(0,0,150,75);
</script>
</html>

Output:
Svg in HTML5:

Svg stands for Scalable Vector Graphics .

Svg Define the Vector Based Graphics in XML format .

Svg is used to define the graphics for the web.

Examples :

Draw circle using svg:

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="blue" stoke-width="4" fill="yellow">

</circle>
</svg>

Now I want display the text on the circle . Let us see how you have to display the text on the
circle .

<section id ="SVG_1">
<svg width="200" height="200">
<circle cx="100" cy="100" r="60" stroke="blue" stoke-width="4" fill="blue"> </circle>
<text x="70" y="100" fill="white"> Iam Circle </text>

</svg>
</section>
Above code we use <text> tag after circle tag for display text on the circle

Draw the rectangle using SVG in htlml

<section id ="svg_rect">
<svg width ="200" height="100">
<rect width="150" height="100" fill="blue" > Hey iam rectangle </rect>
<text x="10" y="50" fill="white"> hey this rectangle</text>
</svg>
</section>

HTML MEDIA :

Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.

Common Video Formats support by HTML5

.mpg,.mpeg,.avi,.wmv,.mp4,.webm,.swf,.ogg …etc

Common Audio Formats Support by HTML5

.midi,.wav,.gg,.wav,.mp3,.mp4…etc

Html Media Tags :

1.video

2.Audio
3.object

4.embed

5.iframe << for display youtube videos on our web page>>

1. Video:

The html video element is used to show a video on video on web browser

Attributes of Video tag …

Control : This Control Attribute adds the video like play,pause, and volume

Height : this attribute set the height of the video

Width : this attribute set the width of the video

Autoplay: Start the Video automatically (in most case’s it is not working in chrome)

Autoplay mute : Start the Video automatically without sound

Source tag in Video : Defines multiple media resources for media elements, such as <video>
and <audio>

<video height="500" width="500" autoplay muted >

<source src="exp.webm" type="video/webm" />
<source src="exp.mp4" type="video/mp4"/>
</video>

2. Audio :

The HTML <audio> element is used to play an audio file on a web page.

The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.

<audio controls>
<source src="music.mp3" type="audio/mpeg"/>
</audio>
 Plug-ins :

Plug-ins are computer programs that extend the standard functionality of the
browser.

3. Object :

 The <object> element is supported by all browsers.

 The <object> element defines an embedded object within an HTML document.
 It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players)
in web pages, but can also be used to include HTML in HTML:

<object height="500px" width="100%" data="https://content.techgig.com/hiring/hcl-to-hire-45k-

freshers-in-fy23-will-grant-wfh-to-employees/articleshow/92774713.cms">

</object>

4. Embed :

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document

<embed height="300px" width="100%" src="https://www.naukri.com/nodejs-mongodb-

jobs?k=nodejs%20mongodb&wfhType=1"/>

5. Iframe :

An inline frame is used to embed another document within the current HTML document.

<iframe width="560" height="315" src="https://www.youtube.com/embed/QCRpVw2KXf8"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
Progress :

The <progress> tag represents the completion progress of a task.

<progress id="file" value="50" max="100"> Uploading.... </progress>

CSS3 :- is the latest version of the css specification css3 adds several new styling features and
improvements to the web presentation capabilities

CSS3 BOX MODEL

Main elements in box model:

1.Margin

2.Padding

3.Border

4.Margin

1. Margin : Margin properties are used to create space around the elements out side of any
defined borders

Margin Properties:

Margin-top:

Margin-right:

Margin-bottom:

Margin-left:
2.Padding : The css padding properties are used to create space around an elements context
inside of any defined borders

Padding Properties :

Padding-top

Padding-right

Padding-bottom

Padding-left

3.Border: A border that goes around the padding and content

4.Content: The content of box, where text and image appear

CSS ADVANCED OR CSS3

1. Rounded

The css border-radius property defines the radius of an element’s corners.

<style>
.rounded1{
border-radius: 30px;
background-color: cornflowerblue;
width:200px;
height: 150px;
}
</style>
<body>
<div>
<spam style="padding: 20px;"> hey iam rounded1</spam>
</div>
</body>
The border-radius properties:

1.border-top-right-radius

2.border-top-left-radius

3.border-bottom-right-radius

4.border-bottom-left-radius

Syntax: border-radius: top-left | top-right | bottom-right | bottom-left

Example with border properties:

.rounded3{
border-top-left-radius: 12px;
border-bottom-right-radius:50px;
background-color: brown;
width: 200px;
height: 150px;
}
<div class="rounded3">
<spam style="padding: 20px;">
border-rounded properties
</spam>
</div>

2.Border Images :

The border image property draw an image around the element

border-image is used for the draw the image around the element

syntax : border-image :url(“ “) slice

example : border-image:url(“image.jpg”) 30
below code for border-image:

.border_image{
border: 10px solid transparent ;
border-image: url("border.jpg") 20 round;
padding: 20px;
width: 200px;
height: 150px;
}

3 Css Multiple Back ground images :

Css allows multiple background images for an element , through the background-image
property

Syntax : background-image : url(path),url(path)

html {
background-image: url(logo.png ), url(bgi2.jpg);
height: 100%;
background-position: bottom right, left;
background-repeat: no-repeat, repeat;
padding: 15px;
}

CSS Shadow:

In css shadow effects we have two types of shadows

1.text-shadow

2.box-shadow
1.text-shadow :

Text-shadow apply the shadow to text

h1{ text-shadow :2px 2px; }

2.box-shadow

The CSS box-shadow property is used to apply one or more shadows to an element

#div_shadow { box-shadow :10px 10px; background-color: blue; height:200px; width:200px}

3.2D and 3D transmission

x-axis and y-axis on graph or any layout:

Properties of 2D and 3D transmission:

1.translate (): Method moves an element from it current position (according to the parameters
given for the X-axis and the Y-axis)

2.rotate (): rotate the element clockwise or counter-clockwise according a given degree

3.scale():The scale method is increase and decrease the size of the element

For example scale(2,3) based on this 2 times width and 3 times height

We have another 2 methods like scaleX(),scaleY()

scaleX()=> increase width

scaleY()=> increase height

4.skew(): method skews an element along the X and Y-axis by the given angles.

5.Matrix():The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to
rotate, scale, move (translate), and skew element
3d transmission:

in 3d transmission we can rotate the elements on z-axis

With the CSS transform property you can use the following 3D transformation methods:

1.rotateX(40deg)

2.rotateY(45deg)

3.rotate(90deg)

#mydiv{

transform: rotateX(40deg);
transform: rotateY(45deg);
transform: rotateZ(90deg);
}

Out put :
Css Animation :

Animation is a process to change the elements one form to another form

@keyframes

When you specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times.

#div_1{
border: 2px;
background-color: aqua;
height:200px;
width: 200px;
animation-name: example;
animation-duration: 10s;
}
#div_2{
background-color: black;
height:200px ;
width: 200px;
animation-name: example2;
animation-duration: 4s;
}
#div_3{

background-color: green;
height: 200px;
width: 200px;
position: absolute;
right: 0px;
top: 0px;
animation: example1;
animation-duration: 15s;
}
@keyframes example1{
0%{background-color:blueviolet; right:0px; top:0px;}
25%{background-color: brown; right: 200px; top:0px;}
50%{background-color: chocolate; right: 200px; top:200px;}
75%{background-color:green; right:0px; top:200px;}
100%{background-color: darkgreen; right:0px; top:0px;}

}
@keyframes example2 {
0%{background-color: orange;}
25%{background-color: red;}
 50%{background-color:yellow;}
100%{background-color: green;}
}
@keyframes example {
from{background-color: red}
to{background-color:green}

Above we create 3 animations using @keyframes example1 ,example2,example

This animations we apply to #div_1 ,#div_2,#div_3 using animation-name and animation-

duration properties

CSS Tooltip:

Tool tip is used to specify extra information about particular html element. When user moves the
mouse

For tool tip we have to crate three styles

1 .tooltip

2.tooltiptext

3.tooltip:hover .tooltiptext

1. Tooltip: this style to use display the of main content we have to define the like below :
2. .tooltip {
3. position: relative;
4. display: inline-block;
5. border-bottom: 1px dotted black;
6. }

2 . Tooltiptext: this style for extra information . below style for extra information

2. .tooltiptext {
3. visibility: hidden;
4. width: 300px;
5. height: 50px;
6. white-space: initial;
7. background-color: orangered;
8. color: #fff;
9. text-align: center;
10. border-radius: 6px;
11. padding: 5px 0;
 12. /* Position the tooltip */
13. position: absolute;
14. }

3 .tooltip:hover .tooltiptext : This style is used display hide text through mouse on over .
4 .tooltip:hover .tooltiptext {
5 visibility: visible;
6 }

Note: we have to show diagram representation of tool tip

Departments of Acet is extra information

If you place mouse courser on AEC we will find Departments of AEC

Responsive web design:

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

In CSS we have 3 topics for make a web in responsive

1.Viewport

2.Gridview

3.Media

1. Viewport:

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a
computer screen.
 Html5 introduced <meta> tag this tag helps to control over the view port

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Some additional rules we have to fallow:

1.Dont use large fixed width elements

2.Use css media queries to apply different styling for small

2. Gridview:

Many web pages divided into grid view , which means that the page is divided into columns .

The responsive grid have 12 Columns in a total width of 100%

we want to use a responsive grid-view with 12 columns, to have more control over the web
page.

100/12:8.333

Based on this we have to define the col values like col-1:8.33 for col-2 you need add 8.33 +
8.33 for col-3 you need to add the value of col-2 +8.33 so … on

.col-1 : 8.33%
.col-2 : 16.66%
.col-3 : 25%
.col-4 : 33.33%
.col-5 : 41.66%
.col-6 : 50%
.col-7 : 58.33%
.col-8 : 66.66%
.col-9 : 75%
.col-10 : 83.33%
.col-11 : 91.66%
.col-12 : 100%

Example of 12 columns:

[class*="col-"]
{
float: left;
padding:15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*= “col-“]

Float:left;

Padding:15px;

Above code for common style for the naming sequence of “col- “

3.Media Query

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

<meta name="viewport" content="width=device-width,initial-scale=1.00">

<style>

body{

background-color: black;

@media only screen and(max-width:600px) {

body{
 background-color: brown;

} }

Above style when page more than 600px then background color black when page reduced or
reach to 600px then background-color: brown

Xml (Extensible Markup Language)

1.what is xml

2.xml tree structure

3.xml Schema

4.DOM

5.xslt

6.sax

1. what is xml

 XML stands for extensible Markup Language

 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation

Difference between xml and html

 XML was designed to carry data - with focus on what data is

 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are

Xml sample document:

<?xml version="1.0" encoding="UTF-8"?>

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

XML documents form a tree structure that starts at "the root" and branches to "the
leaves".

The example of xml document :

<?xml version="1.0" encoding="UTF-8"?>

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

Above code internally form a tree structure like below:

3.XML SCHEMA:

XML DTD:

An XML document with correct syntax is called "Well Formed".

An XML document validated against a DTD is both "Well Formed" and "Valid".

DTD stands for Document Type Definition.

A DTD defines the structure and the legal elements and attributes of an XML document.

How to use DTD in xml document

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

<!DOCTYPE note SYSTEM "Note.dtd">=> import dtd file in xml

DTD File in xml file :

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

The DTD above is interpreted like this:

 !DOCTYPE note - Defines that the root element of the document is note
 !ELEMENT note - Defines that the note element must contain the elements: "to, from,
heading, body"
 !ELEMENT to - Defines the to element to be of type "#PCDATA"
 !ELEMENT from - Defines the from element to be of type "#PCDATA"
 !ELEMENT heading - Defines the heading element to be of type "#PCDATA"
 !ELEMENT body - Defines the body element to be of type "#PCDATA"
Xml schema:

An XML Schema describes the structure of an XML document, just like a DTD.

An XML document with correct syntax is called "Well Formed".

An XML document validated against an XML Schema is both "Well Formed" and "Valid".

Xml schema Document :

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

How to import xsd(xml schema document) in xml file ?

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

Using above statement we import xsd file

Xsd support data types

One of the greatest strength of XML Schemas is the support for data types.

 It is easier to describe allowable document content

 It is easier to validate the correctness of data
 It is easier to define data facets (restrictions on data)
 It is easier to define data patterns (data formats)
 It is easier to convert data between different data types

Xml schema vs DTD :

SCHEMA DTD
XSD stands for XML Schema Definition. DTD stands for Document Type Definition.
XSDs are written in XML. DTDs are derived from SGML syntax.
XSD supports datatypes for elements and DTD doesn't support datatypes.
attributes.
XSD defines order for child elements. DTD doesn't define order for child
elements.
 XSD is simple to learn because you don't DTD is not simple to learn.
need to learn new language.

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

XML DOM

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

Refer xml tree concept for under stand tree structure in xml

Let see how to access the xml document in html using javascript

Sample xml file below :

Address .xml

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

<note>
<to>[email protected] </to>
<from>[email protected]/from>
<body>Hello XML DOM</body>
</note>
Now our task is above exam document read or access in html file
Address.html
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h1>Important Note</h1>
5. <div>
6. <b>To:</b> <span id="to"></span><br>
7. <b>From:</b> <span id="from"></span><br>
8. <b>Message:</b> <span id="message"></span>
 9. </div>
10. <script>
11. if (window.XMLHttpRequest)
12. {// code for IE7+, Firefox, Chrome, Opera, Safari
13. xmlhttp=new XMLHttpRequest();
14. }
15. else
16. {// code for IE6, IE5
17. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
18. }
19. xmlhttp.open("GET","note.xml",false);
20. xmlhttp.send();
21. xmlDoc=xmlhttp.responseXML;
22. document.getElementById("to").innerHTML=
23. xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
24. document.getElementById("from").innerHTML=
25. xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
26. document.getElementById("message").innerHTML=
27. xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
28. </script>
29. </body>
30. </html>

5.XSLT :

Before XSLT, first we should learn about XSL. XSL stands for EXtensible Stylesheet Language.
It is a styling language for XML just like CSS is a styling language for HTML.

XSLT stands for XSL Transformation. It is used to transform XML documents into other formats
(like transforming XML into HTML).

In HTML documents, tags are predefined but in XML documents, tags are not predefined. World
Wide Web Consortium (W3C) developed XSL to understand and style an XML document, which
can act as XML based Stylesheet Language.

An XSL document specifies how a browser should render an XML document.

Main parts of XSL Document

o XSLT: It is a language for transforming XML documents into various other types of
documents.
o XPath: It is a language for navigating in XML documents.
o XQuery: It is a language for querying XML documents.
o XSL-FO: It is a language for formatting XML documents.

How XSLT Works

The XSLT stylesheet is written in XML format. It is used to define the transformation rules to be
applied on the target XML document. The XSLT processor takes the XSLT stylesheet and applies
the transformation rules on the target XML document and then it generates a formatted document
in the form of XML, HTML, or text format. At the end it is used by XSLT formatter to generate the
actual output and displayed on the end-user.
A list of advantages of using XSLT:

o XSLT provides an easy way to merge XML data into presentation because it applies user
defined transformations to an XML document and the output can be HTML, XML, or any
other structured document.
o XSLT provides Xpath to locate elements/attribute within an XML document. So it is more
convenient way to traverse an XML document rather than a traditional way, by using
scripting language.
o XSLT is template based. So it is more resilient to changes in documents than low level
DOM and SAX.
o By using XML and XSLT, the application UI script will look clean and will be easier to
maintain.
o XSLT templates are based on XPath pattern which is very powerful in terms of
performance to process the XML document.

6 .XML SAX:

SAX is a programming interface for processing XML files based on events. The
DOM’s counterpart, SAX, has a very different way of reading XML code. The Java
implementation of SAX is regarded as the de-facto standard. SAX processes
documents state-independently, in contrast to DOM which is used for state-
dependent processing of XML documents.

Why use xml sax Parser :

Parsers are used to process XML documents. The parser examines the XML
document, checks for errors, and then validate it against a schema or DTD if it’s
a validating parser. The next step is determined by the parser in use. It may copy
the data into a data structure native to the computer language you’re using on
occasion. It may also apply styling to the data or convert it into a presentation
format.
Apart from triggering certain events, the SAX parser does nothing with the data.
It is up to the SAX parser’s user to decide. The SAX events include (among
others) as follows:
1. XML Text Nodes
2. XML Element Starts and Ends
3. XML Processing Instructions
4. XML Comments

Properties of SAX Parser is depicted below as follows: