Scribd
Upload
6 views

UNIT 1

HTML (Hypertext Markup Language) is the standard language for creating web pages, using tags to structure content. Key elements include tags for headings, paragraphs, lists, links, images, and tables, with attributes providing additional formatting options. HTML documents can be saved with .htm or .html extensions, and the language is case-insensitive, allowing for flexibility in coding.

Uploaded by

mishra.manish3636
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
6 views

UNIT 1

HTML (Hypertext Markup Language) is the standard language for creating web pages, using tags to structure content. Key elements include tags for headings, paragraphs, lists, links, images, and tables, with attributes providing additional formatting options. HTML documents can be saved with .htm or .html extensions, and the language is case-insensitive, allowing for flexibility in coding.

Uploaded by

mishra.manish3636
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/ 38

HTML Basics

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link
available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension
comes from the past when some of the commonly used software only allowed three letter extensions. It is
perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as
different files by the browser.
Basic HTML Document
In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

HTML Tags
What are HTML tags?
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>

HTML – BASIC TAGS

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the
smallest.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is
align.
<h5 align="left">I can align headings </h5>
<h5 align="center">This is a centered heading </h5>
<h5 align="right">This is a heading aligned to the right </h5>
Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align
attribute with a paragraph tag as well.

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


<p align="center">this is another paragraph</p>
Important: You must indicate paragraphs with <p> elements. A browser ignores any indentations
or blank lines in the source text. Without <p> elements, the document becomes one large paragraph.
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The <br>
tag forces a line break wherever you place it. It is similar to single spacing in a document.

This Code Would Display


<p>This <br> is a para<br> graph with line This
breaks</p> is a para
graph with line breaks
The <br> tag has no closing tag.
Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers between sections, like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width. For
instance:

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets. You can use
comments to write notes to yourself, or write a helpful message to someone looking at your source
code.

This Code Would Display


<p> This html comment would <!-- This is a This HTML comment would be displayed
comment --> be displayed like this.</p> like this.

HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading. If you want to insert blank lines into your document, use
the <br> tag.
Try It Out!
Open your text editor and type the following text:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain
old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>
which I am of course.</p>
</body>
</html>

HTML – ELEMENTS
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing
tag, where the element name is preceded by a forward slash.
This is an HTML element:
<b>This text is bold</b>
The HTML element begins with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
<body>
This is my first homepage. <b>This text is bold</b>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of
the <body> tag is to define the HTML element that contains the body of the HTML document.

HTML – ATTRIBUTES
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other
tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes,
which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts: a name and a value:
 The name is the property you want to set. For example, the paragraph <p> element in the example
carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the
page.
 The value is what you want the value of the property to be set and always put within quotations. The
below example shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium
(W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
HTML – FORMATTING
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a bold typeface.

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses an italicized typeface.

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses an underlined typeface.
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin
line through the text as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a strikethrough typeface.
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the
characters surrounding it but is displayed half a character's height above the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a superscript typeface.
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the
characters surrounding it, but is displayed half a character's height beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a subscript typeface.
HTML Fonts
The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed the <font>
tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the
layout and display properties of HTML elements.
The <font> Tag Should NOT be used.
HTML Backgrounds
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or
an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a
hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.
Background
The background attribute can also specify a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser window, the
image will repeat itself until it fills the entire browser window.
<body background="clouds.gif"> <body
background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above).
If you want to use a background image, you should keep in mind:
Will the background image increase the loading time too much?
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page?
Will the background image look good when it is repeated on the page?
Will the background image take away the focus from the text?

Example
<html>
<head>
<title>My First Webpage</title>
</head>
<body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif" bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and plain
old html.</p>
<p>By learning html, I'll be able to create webpages like a <del>beginner</del> pro....<br>
which I am of course.</p>
</body>
</html>
HTML Lists
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).
Unordered Lists
An unordered list is a list of items marked with bullets (typically small black circles). An unordered list
starts with the <ul> tag. Each list item starts with the <li> tag.
This Code Would Display
<ul> Coffee
<li>Coffee</li> Milk
<li>Milk</li>
</ul>

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with
the <ol> tag. Each list item starts with the <li> tag.
This Code Would Display
<ol> 1. Coffee
<li>Coffee</li> 2. Milk
<li>Milk</li>
</ol>

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three
HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

<dl> Cascading Style Sheets


<dt>Cascading Style Sheets</dt> Style sheets are used to provide
<dd>Style sheets are used to provide presentational presentational suggestions for
suggestions for documents marked up in HTML. documents marked up in HTML.
</dd>
</dl>
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other
lists, etc
HTML Links
HTML uses the <a> anchor tag to create a link to another document or web page.
The Anchor Tag and the Href Attribute
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The
syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the
document or page we are linking to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.
This Code Would Display
<a href="http://www.austincc.edu/">Visit ACC!</a> Visit ACC!

HTML Images
The Image Tag and the Src Attribute
The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display
an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute
is the URL of the image you want to display on your page. The syntax of defining an image:

Not only does the source attribute specify what image to use, but where the image is located. The above
image, graphics/chef.gif, means that the browser will look for the image name chef.gif in a graphics folder
in the same folder as the html document itself.
Image Dimensions
When you have an image, the browser usually figures out how big the image is all by itself. If you put in
the image dimensions in pixels however, the browser simply reserves a space for the image, then loads the
rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions,
when it runs into an image, the browser has to pause loading the page, load the image, then continue
loading the page. The chef image would then be:
<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

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

Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one
or more columns in a table
Tables and the Border Attribute
To display a table with borders, you will use the border attribute.

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

Cell Padding and Spacing


The <table> tag has two attributes known as cellspacing and cellpadding.

Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines
making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible.

Cellpadding is the pixel space between the cell contents and the cell border. The default for this property is
also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned
on and you want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible,
even with the border property turned on. Cellpadding can be handled in a style sheet.
What Is a Markup Language?
A markup language is a set of rules that defines how the layout and presentation of text
and images should appear in a digital document. It allows structuring documents,
adding formatting, and specifying how different elements should be displayed (or
“rendered”) on webpages. This structuring helps search engines like Google understand
the information on websites better.

XML Basics
XML stands for Extensible Markup Language and is a text-based markup language
derived from Standard Generalized Markup Language (SGML).

XML is a software- and hardware-independent tool for storing and transporting data.

 XML is a markup language much like HTML


 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML Does Not Use Predefined Tags
 XML is Extensible
 XML is a W3C Recommendation

XML tags identify the data and are used to store and organize the data, rather than
specifying how to display it like HTML tags, which are used to display the data. XML
is not going to replace HTML in the near future, but it introduces new possibilities by
adopting many successful features of HTML.

1
There are three important characteristics of XML that make it useful in a variety of
systems and solutions:

 XML is extensible: XML allows you to create your own self-descriptive tags, or
language, that suits your application.

 XML carries the data, does not present it: XML allows you to store the data
irrespective of how it will be presented.

 XML is a public standard: XML was developed by an organization called the


World Wide Web Consortium (W3C) and is available as an open standard.

Why opt for XML?


XML has gained popularity as a data format, the reasons being:

 Decode-ability by machines: Computers can effortlessly parse and handle XML


files making it perfect for data sharing or storage.

 Comprehension by humans: The readability aspect of XML files means they are
simple to edit and keep up with.

 Flexibility in extension: A unique feature of XML is its extensibility. Adapting


custom tags considering individual needs becomes possible.

 Indifference towards platform-dependency: There’s no barrier regarding


which operating system or programming language one uses; anyone can read and
process an XML file.

Where to use XML?


XML is used in a wide variety of applications, including:

 Web development: XML is used to store and exchange data in web applications.

 Mobile development: XML is used to store and exchange data in mobile


applications.

 Desktop development: XML is used to store and exchange data in desktop


applications.

 Data exchange: XML is often used to exchange data between different


applications and systems.

 API: XML is often used to implement APIs. APIs allow different applications to
communicate with each other and exchange data.

2
Features of XML
XML has a number of features that make it a popular data format. These features
include:

 Flexibility: XML is a flexible data format as it allows you to create your own
custom tags to meet your specific needs.

 Extensibility: XML is extensible as it enables you to add new features to XML


without breaking existing applications.

 Platform-independence: XML files can be read and processed on any platform,


regardless of the operating system or programming language.

 Human-readability: XML files are also human-readable, which makes them easy
to edit and maintain.

 Machine-readability: XML files can be easily parsed and processed by


computers. This makes XML ideal choice to store and exchange.

 Separates Data from HTML


Using XML, data can be saved in a variety of XML files. Thus, you won't need to
update HTML to make changes to the underlying data, allowing you to focus on
using HTML/CSS for display and style.

 Allows XML Validation


An XML document can be validated using a DTD or XML schema. By doing this, the
XML document is guaranteed to be syntactically valid and any issues brought on
by flawed XML are avoided.

 XML Supports Unicode


Given that XML is compatible with Unicode, it may transmit virtually any
information in any written human language.

3
4
XML Syntax:

Following is a complete XML document:

<?xml version="1.0"?>
<contact_info>
<name>Rajesh</name>
<company>TCS</company>
<phone>9333332354</phone>
</contact_info>

You can notice there are two kinds of information in the above example:

 markup, like <contact-info> and

 the text, like Rajesh etc.

The following diagram depicts the syntax rules to write different types of markup and
text in an XML document.

XML Example

XML documents create a hierarchical structure looks like a tree so it is known as XML
Tree that starts at "the root" and branches to "the leaves".

Example of XML Document

XML documents uses a self-describing and simple syntax:

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


2. <note>
3. <to>Rajesh</to>
4. <from>Shyam</from>
5. <heading>Reminder</heading>
6. <body>Don't forget me !</body>
7. </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).
1
The next line describes the root element of the document (like saying: "this document is
a note"):

1. <note>

The next 4 lines describe 4 child elements of the root (to, from, heading, and body).

1. <to> Rajesh </to>


2. <from> Shyam </from>
3. <heading>Reminder</heading>
4. <body>Don't forget me !</body>

And finally the last line defines the end of the root element.
1. </note>
XML documents must contain a root element. This element is "the parent" of all other
elements.

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

All elements can have sub elements (child elements).

1. <root>
2. <child>
3. <subchild>.....</subchild>
4. </child>
5. </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).

Another Example of XML: Books

File: books.xml

<bookstore>
<book category="COOKING">
<title>Everyday Indian</title>
<author>XYZ</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
2
<title>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>. Allelements in the document are
contained within <bookstore>.

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

Let us see each component of the above diagram in detail:

XML Declaration
The XML document can optionally have an XML declaration. It is written as below:

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

Where version is the XML version and encoding specifies the character encoding used
in the document.

XML Tags
XML tags are the important features of XML document. It is similar to HTML but
XML is more flexible then HTML. It allows to create new tags (user defined tags).
The first element of XML document is called root element. The simple XML
document contain opening tag and closing tag. The XML tags are case sensitive i.e.
<root> and <Root> both tags are different. The XML tags are used to define the
scope of elements in XML document.
3
Property of XML Tags:
1. XML tags are case-sensitive. Following line of code is an example of wrong syntax.
<address>This is wrong syntax</Address>
Following code shows a correct way, where we use the same case to name the start
And the end tag.
<address>This is correct syntax</address>
2. XML tags must be closed in an appropriate order, i.e., an XML tag opened inside
another element must be closed before the outer element is closed.
For example:
<outer_element>
<internal_element>
This tag is closed before the outer_element
</internal_element>
</outer_element>

3. The tag which contains no content are known as empty


tags.
Example:
<name> </name>
<address/>

XML Elements
XML elements can be defined as building blocks of an XML. Elements can behave as
containers to hold text, elements, attributes, media objects or all of these.
Each XML document contains one or more elements, the scope of which are either
delimited by start and end tags, or for empty elements, by an empty-element tag.
Syntax

Following is the syntax to write an XML element −

<element-name attribute1 attribute2>


....content
</element-name>

where,

 element-name is the name of the element. The name its case in the start and
end tags must match.
 attribute1, attribute2 are attributes of the element separated by white spaces.
An attribute defines a property of the element. It associates a name with a value,
which is a string of characters. An attribute is written as −

name = "value"

name is followed by an = sign and a string value inside double(" ") or single(' ') quotes.

Empty Element

An empty element (element with no content) has following syntax −

<name attribute1 attribute2.../>


4
Following is an example of an XML document using various XML element −

<?xml version = "1.0"?>


<contact-info>
<address category = "residence">
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
</contact-info>

XML Elements Rules


Following rules are required to be followed for XML elements:
� An element name can contain any alphanumeric characters. The only punctuation
mark allowed in names are the hyphen (-), under-score (_) and period (.).
� Names are case sensitive. For example, Address, address, and ADDRESS are
different names.
� Start and end tags of an element must be identical.
� An element, which is a container, can contain text or elements as seen in the above
example.

XML Attributes
Attributes are part of XML elements. An element can have multiple unique attributes.
Attribute gives more information about XML elements. To be more precise, they define
properties of elements. An XML attribute is always a name-value pair.
Syntax
An XML attribute has the following syntax −
<element-name attribute1 attribute2 >
....content..
< /element-name>
where attribute1 and attribute2 has the following form −
name = "value"
value has to be in double (" ") or single (' ') quotes. Here, attribute1 and attribute2 are
unique attribute labels.
Attributes are used to distinguish among elements of the same name, when you do not
want to create a new element for every situation. Hence, the use of an attribute can add
a little more detail in differentiating two or more similar elements.

Example:-
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE garden [
<!ELEMENT garden (plants)*>
<!ELEMENT plants (#PCDATA)>
<!ATTLIST plants category CDATA #REQUIRED>
]>

<garden>
<plants category = "flowers" />
5
<plants category = "shrubs">
</plants>
</garden>
In the above example, we have categorized the plants by including attribute category
and assigning different values to each of the elements. Hence, we have two categories
of plants, one flowers and other shrubs. Thus, we have two plant elements with
different attributes.

Attribute Types

Following table lists the type of attributes −

Attribute
Description
Type
It takes any literal string as a value. CDATA is a StringType. CDATA is
String Type character data. This means, any string of non-markup characters is a
legal part of the attribute.
This is a more constrained type. The validity constraints noted in the
grammar are applied after the attribute value is normalized. The
Tokenized Type attributes are given as −

 ID − It is used to specify the element as unique.


 IDREF − It is used to reference an ID that has been named for
another element.
 IDREFS − It is used to reference all IDs of an element.
Tokenized
 ENTITY − It indicates that the attribute will represent an external
Type
entity in the document.
 ENTITIES − It indicates that the attribute will represent external
entities in the document.
 NMTOKEN − It is similar to CDATA with restrictions on what data
can be part of the attribute.
 NMTOKENS − It is similar to CDATA with restrictions on what data
can be part of the attribute.

This has a list of predefined values in its declaration, out of which, it must
assign one value. There are two types of enumerated attribute −

Enumerated  Notation Type − It declares that an element will be referenced to


Type a NOTATION declared somewhere else in the XML document.
 Enumeration − Enumeration allows you to define a specific list of
values that the attribute value must match.

Element Attribute Rules

Following are the rules that need to be followed for attributes −

 An attribute name must not appear more than once in the same start-tag or
empty-element tag.
 An attribute must be declared in the Document Type Definition (DTD) using an
Attribute-List Declaration.
 Attribute values must not contain direct or indirect entity references to external
entities.

6
 The replacement text of any entity referred to directly or indirectly in an attribute
value must not contain a less than sign (<)

7
XML comments
XML comments are similar to HTML comments. The comments are added as notes or
lines for understanding the purpose of an XML code.

Comments can be used to include related links, information, and terms. They are visible
only in the source code; not in the XML code. Comments may appear anywhere in XML
code.

Syntax

XML comment has the following syntax −

<!--Your comment-->

A comment starts with <!-- and ends with -->. You can add textual notes as comments
between the characters. You must not nest one comment inside the other.

Example

Following example demonstrates the use of comments in XML document −

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


<!--Students grades are uploaded by months-->
<class_list>
<student>
<name>Tanmay</name>
<grade>A</grade>
</student>
</class_list>

Any text between <!-- and --> characters is considered as a comment.

XML Comments Rules

Following rules should be followed for XML comments −

 Comments cannot appear before XML declaration.


 Comments may appear anywhere in a document.
 Comments must not appear within attribute values.
 Comments cannot be nested inside the other comments.

XML Technologies

XML technologies are defined as processing the XML application and to build a web
different XML variants are used in the XML document to process the activities.
Extensible Mark-up Language (XML) is a modern Mark-up language with platform-
independent that why it’s been popular as it adapts to new technologies and supports a
wide variety of applications. The main reason is XML supports Unicode as it is easy to
communicate if written in human language. With efficient data sharing, any new
programming languages can read and process an XML file.

1
No. Technology Meaning Description
It is a clearer and stricter version of XML. It belongs
to the family of XML markup languages. It was
1) XHTML Extensible html
developed to make html more extensible and
increase inter-operability with other data.
It is a standard document model that is used to
XML document
2) XML DOM access and manipulate XML. It defines the XML file in
object model
tree structure.
XSL
it contain
three parts:
Extensible style i) It transforms XML into other formats, like html.
3) i) XSLT (xsl
sheet language ii) It is used for formatting XML to screen, paper etc.
transform)
iii) It is a language to navigate XML documents.
ii) XSL
iii)XPath
XML query It is a XML based language which is used to query
4) XQuery
language XML based data.
Document type It is a standard which is used to define the legal
5) DTD
definition elements in an XML document.
XML schema It is an XML based alternative to DTD. It is used to
6) XSD
definition describe the structure of an XML document.
xlink stands for XML linking language. This is a
XML linking
7) XLink language for creating hyperlinks (external and
language
internal links) in XML documents.
It is a system for addressing components of XML
XML pointer
8) XPointer based internet media. It allows the xlink hyperlinks to
language
point to more specific parts in the XML document.
It is an acronym stands simple object access
protocol. It is XML based protocol to let applications
Simple object
9) SOAP exchange information over http. in simple words you
access protocol
can say that it is protocol used for accessing web
services.
web services It is an XML based language to describe web
10) WSDL description services. It also describes the functionality offered by
languages a web service.
RDF is an XML based language to describe web
Resource resources. It is a standard model for data
11) RDF description interchange on the web. It is used to describe the
framework title, author, content and copyright information of a
web page.
It is an XML based vector image format for two-
Scalable vector
12) SVG dimensional images. It defines graphics in XML
graphics
format. It also supports animation.
RSS is a XML-based format to handle web content
Really simple
13) RSS syndication. It is used for fast browsing for news and
syndication
updates. It is generally used for news like sites.

2
XML Tree Structure:
An XML document has a self-descriptive structure. It forms a tree structure which is
referred as an XML tree. The tree structure makes easy to describe an XML document.

A tree structure contains root element (as parent), child element and so on. It is very
easy to traverse all succeeding branches and sub-branches and leaf nodes starting from
the root.

Example-1 XML Document

The image above represents books in this XML:

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

1
Example-2 XML Document
<?xml version="1.0"?>
<college>
<student>
<firstname>Tamanna</firstname>
<lastname>Bhatia</lastname>
<contact>09990449935</contact>
<email>[email protected]</email>
<address>
<city>Ghaziabad</city>
<state>Uttar Pradesh</state>
<pin>201007</pin>
</address>
</student>
</college>

XML Tree Rules

These rules are used to figure out the relationship of the elements. It shows if an
element is a child or a parent of the other element.

Descendants: If element A is contained by element B, then A is known as descendant


of B. In the above example "College" is the root element and all the other elements are
the descendants of "College".

Ancestors: The containing element which contains other elements is called "Ancestor"
of other element. In the above example Root element (College) is ancestor of all other
elements.

XML Namespaces
A Namespace is a set of unique names. Namespace is a mechanism by which element
and attribute name can be assigned to a group. The Namespace is identified by URI
2
(Uniform Resource Identifiers).

Name Conflicts

In XML, element names are defined by the developer. This often results in a conflict when
trying to mix XML documents from different XML applications.

This XML carries HTML table information:

<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>

This XML carries information about a table (a piece of furniture):

<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>

If these XML fragments were added together, there would be a name conflict. Both
contain a <table> element, but the elements have different content and meaning.

A user or an XML application will not know how to handle these differences.

Solving the Name Conflict Using a Prefix

Name conflicts in XML can easily be avoided using a name prefix.

This XML carries information about an HTML table, and a piece of furniture:

<h:table>
<h:tr>
3
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

In the example above, there will be no conflict because the two <table> elements have
different names.
XML Namespaces - The xmlns Attribute

When using prefixes in XML, a namespace for the prefix must be defined.

The namespace can be defined by an xmlns attribute in the start tag of an element.

The namespace declaration has the following syntax. xmlns:prefix="URI".

Syntax
 The Namespace starts with the keyword xmlns.
 The word name is the Namespace prefix.
 The URL is the Namespace identifier.

<root>
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table xmlns:f="https://www.w3schools.com/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>

In the example above:

The xmlns attribute in the first <table> element gives the h: prefix a qualified
namespace.

The xmlns attribute in the second <table> element gives the f: prefix a qualified
namespace.

When a namespace is defined for an element, all child elements with the same prefix are
associated with the same namespace.
4
Note: The namespace URI is not used by the parser to look up information.

The purpose of using an URI is to give the namespace a unique name.

However, companies often use the namespace as a pointer to a web page containing
namespace information.

5
XML Validator
Validation is a process by which an XML document is validated. An XML document is
said to be valid if its contents match with the elements, attributes, and associated
document type declaration (DTD), and if the document complies with the constraints
expressed in it. Validation is dealt in two ways by the XML parser. They are:
 Well-formed XML document
 Valid XML document

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

Rules for well-formed XML

 It must begin with the XML declaration.


 It must have one unique root element.
 All start tags of XML documents must match end tags.
 XML tags are case sensitive.
 All elements must be closed.
 All elements must be properly nested.
 All attributes values must be quoted.
 XML entities must be used for special characters.

Example 1
Following is an example of a well-formed XML document:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<!DOCTYPE address
[
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>

The above example is said to be well-formed as:


 It defines the type of document. Here, the document type is element type.
 It includes a root element named as address.
 Each of the child elements among name, company, and phone is enclosed in its
self-explanatory tag.
 Order of the tags is maintained.

1
Example 2:

<?xml version=”1.0”?>

<book>
<title>Java</Title>
<author>James</book>
<pirce>570
</author>

The above XML document is not a well formed document. Reasons given below...
 tags are not matching <title> … </Title>
 There is no proper nesting <author>….</book>
 Tag doesn’t closed <price>

Valid XML Documents :-
A "well formed" XML document is not the same as a "valid" XML document.
A "valid" XML document must be well formed. In addition, it must conform to a
document type definition.

There are two different document type definitions that can be used with XML:

 DTD - The original Document Type Definition


 XML Schema - An XML-based alternative to DTD

A document type definition defines the rules and the legal elements and attributes for
an XML document.

XML DTD: (Document Type Definition)

The XML Document Type Declaration, commonly known as DTD, is a way to describe
XML language precisely. DTDs check vocabulary and validity of the structure of XML
documents against grammatical rules of appropriate XML language.
Syntax

Basic syntax of a DTD is as follows −

<!DOCTYPE element DTD identifier


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

In the above syntax,

 The DTD starts with <!DOCTYPE delimiter.


 An element tells the parser to parse the document from the specified root
element.
 DTD identifier is an identifier for the document type definition, which may be the
path to a file on the system or URL to a file on the internet. If the DTD is pointing
to external path, it is called External Subset.
2
 The square brackets [ ] enclose an optional list of entity declarations called
Internal Subset.

The purpose of a DTD is to define the structure of an XML document. It defines the
structure with a list of legal elements.

<!DOCTYPE book [
<!ELEMENT book
(title,author,price)> <!ELEMENT
title (#PCDATA)> <!ELEMENT author
(#PCDATA)> <!ELEMENT price
(#PCDATA)> ]>

The DTD above is interpreted like this:

 !DOCTYPE book defines that the root element of the document is book
 !ELEMENT book defines that the book element must contain the elements:
"title, author, price”
 !ELEMENT title defines the title element to be of type "#PCDATA"
 !ELEMENT author defines the author element to be of type "#PCDATA"
 !ELEMENT price defines the price element to be of type "#PCDATA"

Note: PCDATA: Parse able Character Data, CDATA: Character Data.

There are two types of DTDs:

1) Internal / Embedded DTD.

2) External DTD.
1. Internal DTD

A DTD is referred to as an internal DTD if elements are declared within the XML files. To
refer it as internal DTD, standalone attribute in XML declaration must be set to yes. This
means, the declaration works independent of an external source.

Syntax

Following is the syntax of internal DTD −

<!DOCTYPE root-element [element-declarations]>

where root-element is the name of root element and element-declarations is where you
declare the elements.

3
Example

Following is a simple example of internal DTD −

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


<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>

<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>

Let us go through the above code −

Start Declaration − Begin the XML declaration with the following statement.

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

DTD − Immediately after the XML header, the document type declaration follows,
commonly referred to as the DOCTYPE −

<!DOCTYPE address [

The DOCTYPE declaration has an exclamation mark (!) at the start of the element name.
The DOCTYPE informs the parser that a DTD is associated with this XML document.

DTD Body − The DOCTYPE declaration is followed by body of the DTD, where you
declare elements, attributes, entities, and notations.

<!ELEMENT address (name,company,phone)>


<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone_no (#PCDATA)>

Several elements are declared here that make up the vocabulary of the <name>
document. <!ELEMENT name (#PCDATA)> defines the element name to be of type
"#PCDATA". Here #PCDATA means parse-able text data.

End Declaration − Finally, the declaration section of the DTD is closed using a closing
bracket and a closing angle bracket (]>). This effectively ends the definition, and
thereafter, the XML document follows immediately.

Rules

 The document type declaration must appear at the start of the document
(preceded only by the XML header) − it is not permitted anywhere else within the
document.
 Similar to the DOCTYPE declaration, the element declarations must start with an
exclamation mark. 4
 The Name in the document type declaration must match the element type of the
root element.

2. External DTD

In external DTD elements are declared outside the XML file. They are accessed by
specifying the system attributes which may be either the legal .dtd file or a valid URL.
To refer it as external DTD, standalone attribute in the XML declaration must be set as
no. This means, declaration includes information from the external source.

Syntax

Following is the syntax for external DTD −

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

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

Example

The following example shows external DTD usage −

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


<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>

The content of the DTD file address.dtd is as shown −

<!ELEMENT address (name,company,phone)>


<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
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 is commonly known as XML Schema Definition (XSD). It is used to


describe and validate the structure and the content of XML data. XML schema defines
the elements, attributes and data types. Schema element supports Namespaces. It is
similar to a database schema that describes the data in a database.

XML Schema is an XML-based alternative to DTD:

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

<xs:schema>

<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:integer"/>
<xs:element name="edition" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

The Schema above is interpreted like this:

 <xs:element name="book"> defines the element called "book" is a root.


 <xs:complexType> the "book" element is a complex type i.e. root
 <xs:sequence> the complex type is a sequence of elements i.e. childrens
 <xs:element name="title" type="xs:string"> the element "title" is of type string (text)
 <xs:element name="author" type="xs:string"> the element "author" is of type string
 <xs:element name="price" type="xs:integer"> the element "price" is of type integer.
 <xs:element name="edition" type="xs:string"> the element "edition" is of type string

Example:

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


<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.w3schools.com" elementFormDefault="qualified">
<xs:element name="student">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="age" type="xs:integer"/>
<xs:element name="addr">
<xs:complexType>
<xs:sequence>
<xs:element name="city" type="xs:string"/>
<xs:element name="pincode" type="xs:long"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="ph" type="xs:integer"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Save the above code as “student.xsd”


6
Prepare “student.xml” as follows…

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


<student xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3schools.com student.xsd">
<name>rajesh</name>
<age>25</age>
<addr>
<city>mylavaram</city>
<pincode>53333</pincode>
</add>
<ph>9343434</ph>
</student>

If the above xml code follows the exact rules defined in “student.xsd” then we can
conclude that our xml document is a valid document. Otherwise it is an invalid
document.

DTD vs XSD
There are many differences between DTD (Document Type Definition) and XSD (XML
Schema Definition). In short, DTD provides less control on XML structure whereas XSD
(XML schema) provides more control.

The important differences are given below:

No. DTD XSD


DTD stands for Document Type
1) XSD stands for XML Schema Definition.
Definition.
DTDs are derived from SGML
2) XSDs are written in XML.
syntax.
DTD doesn't support XSD supports datatypes for elements and
3)
datatypes. attributes.
DTD doesn't support
4) XSD supports namespace.
namespace.
DTD doesn't define order for
5) XSD defines order for child elements.
child elements.
6) DTD is not extensible. XSD is extensible.
XSD is simple to learn because you don't need
7) DTD is not simple to learn.
to learn new language.
DTD provides less control on
8) XSD provides more control on XML structure.
XML structure.

7
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.
It checks for proper format of the XML document and may also validate the XML
documents. Modern day browsers have built-in XML parsers.
Following diagram shows how XML parser interacts with XML document:

Types of XML Parsers

These are the two main types of XML Parsers: 1. DOM 2. SAX

XML DOM (Document Object Model) Parser


The Document Object Model (DOM) is the foundation of XML. XML documents have a
hierarchy of informational units called nodes; DOM is a way of describing those nodes
and the relationships between them.
A DOM document is a collection of nodes or pieces of information organized in a
hierarchy. This hierarchy allows a developer to navigate through the tree looking for 1
specific information. Because it is based on a hierarchy of information, the DOM is said
to be tree based.
The XML DOM, on the other hand, also provides an API that allows a developer to add,
edit, move, or remove nodes in the tree at any point in order to create an application.

Advantages

1) It supports both read and write operations and the API is very simple to use.

2) It is preferred when random access to widely separated parts of a document is


required.

Disadvantages

1) It is memory inefficient. (Consumes more memory because the whole XML document
needs to loaded into memory).

2) It is comparatively slower than other parsers.

Example

The following example (sample.htm) parses an XML document ("address.xml") into an


XML DOM object and then extracts some information from it with JavaScript −

<!DOCTYPE html>
<html>
<body>
<h1>TutorialsPoint DOM example </h1>
<div>
<b>Name:</b> <span id = "name"></span><br>
<b>Company:</b> <span id = "company"></span><br>
<b>Phone:</b> <span id = "phone"></span>
2
</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/xml/address.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("company").innerHTML=
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

Contents of address.xml are as follows −

<?xml version = "1.0"?>


<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>

Now let us keep these two files sample.htm and address.xml in the same directory
/xml and execute the sample.htm file by opening it in any browser. This should
produce the following output.

3
XML - Databases
XML Database is used to store huge amount of information in the XML format. As the
use of XML is increasing in every field, it is required to have a secured place to store the

XML documents. The data stored in the database can be queried using XQuery,
serialized, and exported into a desired format. XML databases are usually associated
with document-oriented databases.

XML Database Types


There are two major types of XML databases:
1. XML-enabled database
2. Native XML database (NXD)

XML - Enabled Database

XML enabled database is nothing but the extension provided for the conversion of XML
document. This is a relational database, where data is stored in tables consisting of rows
and columns. The tables contain set of records, which in turn consist of fields.

Native XML Database

Native XML database is based on the container rather than table format. It can store
large amount of XML document and data. Native XML database is queried by the XPath-
expressions.

Native XML database has an advantage over the XML-enabled database. It is highly
capable to store, query and maintain the XML document than XML-enabled database.

Example

Following example demonstrates XML database −

<?xml version = "1.0"?>


<contact-info>
<contact1>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact1>

<contact2>
<name>Manisha Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 789-4567</phone>
</contact2>
</contact-info>

Here, a table of contacts is created that holds the records of contacts (contact1 and
contact2), which in turn consists of three entities − name, company and phone.

You might also like