Scribd
Upload
88 views

Key Concepts: 2.1 Introduction To Hyper Text Markup Language (HTML)

HTML was created by Tim Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995.  HTML 4.01 was a major version of HTML and it was published in late 1999.  Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Uploaded by

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

Key Concepts: 2.1 Introduction To Hyper Text Markup Language (HTML)

HTML was created by Tim Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995.  HTML 4.01 was a major version of HTML and it was published in late 1999.  Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Uploaded by

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

For More : https://www.ThesisScientist.

com

Key Concepts
***********************************************************************

Introduction to Hyper Text Markup Language (HTML),


HTML elements,
XHTML syntax and Semantics,
eXtensible Markup Language (XML), element,

attributes,
entity declarations.

DTD files
Basics of Cascading Style Sheet (CSS)
Document object Model (DOM)

history
levels,
Document tree,
DOM event handling.

***********************************************************************

2.1 Introduction to Hyper Text Markup Language (HTML)

HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages.

1. A markup language is a set of markup tags


2. HTML documents are described by HTML tags
3. Each HTML tag describes different document content

Hypertext is text which contains links to other texts.

Markup refers to the sequence of characters or other symbols that you insert at
certain places in a text or word processing file to indicate how the file should look
when it is printed or displayed

Versions of HTML
For More : https://www.ThesisScientist.com

HTML was created by Tim Berners-Lee in late 1991 but "HTML 2.0" was the
first standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published in
2012.

Look at the following summary:

***Remember

W3C stands for World Wide Web Consortium

HTML Editors

Following are some HTML editors:

1. Adobe Dream Weaver


2. Microsoft Expression Web
3. Coffee Cup HTML Editor

However, for learning HTML, a text editor like Notepad is recommended.

First HTML PROGRAM

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page Title</title>
</head>

<body>
For More : https://www.ThesisScientist.com

<h1>My First HTML Heading</h1>

<p>My First HTML paragraph.</p>

</body>

</html>

***Remember

1. The DOCTYPE declaration defines the document type to be HTML


2. The text between <html> and </html> describes an HTML document
3. The text between <head> and </head> provides information about the document
for the browser.
4. The text between <title> and </title> provides a title for the document
5. The text between <body> and </body> describes the visible page content to be
displayed on the screen.
6. The text between <h1> and </h1> describes a heading
7. The text between <p> and </p> describes paragraph

2.2 HTML elements,

An element gives structure to a HTML document and tells the browser how you want
your website to be presented. Generally an element consists of a start tag, some content,
and an end tag.

HTML Tags

Tags are labels you use to mark up the beginning and end of an element. All tags have
the same format: they begin with a less-than sign "<" and end with a greater-than sign
">".

There are two kinds of tags in HTML-

1. Opening tags: <html> and


2. Closing tags: </html>.

The only difference between an opening tag and a closing tag is the forward slash "/".
You label content by putting it between an opening tag and a closing tag.
For More : https://www.ThesisScientist.com

Example - 1

<p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but
<p>My First Paragraph</p> is a paragraph element.

Example - 2

<title> and </title> are tags, whereas


<title>My First Title </title> is a title element.

Void Element

There are some HTML elements which don't need to be closed, such as <img.../>, <hr />
and <br /> elements. These are known as void elements.

HTML Document Structure

Document declaration tag

***Remember

The <!DOCTYPE> declaration tag is used by the web browser to understand the version
of the HTML used in the document

About the HTML


For More : https://www.ThesisScientist.com

1. HTML Tags
2. HTML Elements
3. HTML Attributes
4. HTML Page Title
5. HTML Paragraphs
6. HTML Headings
7. HTML Lists
8. HTML Hyper Links (Text, Images, E_mail)
9. HTML Images
10. HTML Tables
11. HTML Forms

HTML Tags

1. title tag

<title> My First Title</title>

2. heading tag

<title> My First Title</title>


<h1>My First Heading</h1>

Output

Another code

<title> My First Title</title>


<h1>My First Heading</h1>
<h1>My Second Heading</h1>
<h1>My Third Heading</h1>

Output

Another code
For More : https://www.ThesisScientist.com

<title> My First Title</title>


<h1>My First Heading</h1>
<h2>My Second Heading</h2>
<h3>My Third Heading</h3>

Output

***Note:

HTML has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and
one line after that heading.

Paragraph Tag

Code

<!DOCTYPE html>
<html>
<head>
<title> My First Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph</p>
<h2>My Second Heading</h2>
<p>My Second Paragraph</p>
<h3>My Third Heading</h3>
<p>My Third Paragraph</p>
</body>
</html>

Output
For More : https://www.ThesisScientist.com

Line tag

The <hr> tag creates a horizontal line in an HTML page.

Code

<!DOCTYPE html>
<html>
<head>
<title> My First Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph</p>
<hr>
<h2>My Second Heading</h2>
<p>My Second Paragraph</p>
<hr>
<h3>My Third Heading</h3>
<p>My Third Paragraph</p>
<hr>
</body>
</html>

Output
For More : https://www.ThesisScientist.com

<br> Tag

The line break tag is the <br> tag in HTMLA br tag will insert a line break which
means the text/image following the tag will be moved to the next line when displayed
in the browser.

Code

<!DOCTYPE html>
<html>
<head>
<title> My First Title</title>
</head>
<body>

<p>Have <br>A<br> Nice<br> Day</p>

</body>
</html>

Output

Making fonts Bold and italic using <b> and <i> tag

Code

<!DOCTYPE html>
<html>
For More : https://www.ThesisScientist.com

<head>
<title> My First Title</title>
</head>
<body>

<p><b>This is a paragraph with Bold Fonts</b></p>


<p><i>This is a paragraph with Italic Fonts</i></p>

</body>
</html>

Output

HTML Style

Program

<!DOCTYPE html>
<html>
<head>
<title> My First Title</title>
</head>
<body>
<h1 style="color:red">Heading with Red Color</h1>
<h1 style="color:blue">Heading with Blue Color</h1>
</body>
</html>

Output

HTML Attributes

HTML elements can have attributes. Attributes provide additional information about
an element. An attribute is used to define the characteristics of an HTML element and is
For More : https://www.ThesisScientist.com

placed inside the element's opening tag. All attributes are made up of two parts: a name
and a value i.e. name="value"

The name is the property you want to set.

The value is what you want the value of the property to be set.

1. lang attribute

The document language can be declared in the <html> tag, using lang attribute. eclaring
a language is important for accessibility applications (screen readers) and search engines:

Program

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My First paragraph.</p>

</body>
</html>

Output

2. The title Attribute

HTML paragraphs are defined with the <p> tag. In following example, the <p> element
has a title attribute. The value of the attribute is "My First Web Page":

The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when cursor comes over the element or while the element is
loading.

Code

<!DOCTYPE html>
<html>
For More : https://www.ThesisScientist.com

<head>
<title>My First Title</title>
</head>
<body>
<h3 title="Hello HTML!">Title Attribute Example</h3>
</body>
</html>

Output

3. The align attribute

Element in the following example carries an attribute whose name is align, which you
can use to indicate the alignment of paragraph on the page. Given example shows three
possible values of align attribute: left, center and right.

Code

<!DOCTYPE html>
<html>
<head>
<title> My First Title</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>

Output
For More : https://www.ThesisScientist.com

The href Attribute

A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document.

Program

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href="http://www.google.com">This is a hyperlink to open google</a>
</body>
</html>

Output

Program

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.rgpv.ac.in">
For More : https://www.ThesisScientist.com

<h3>Click on following URL to open www.rgpv.ac.in </h3>


</head>
<body>

<a href="UploadContent/frm_ViewScheme.aspx" target="_blank">Opens in New Window or Tab</a> |


<a href="UploadContent/frm_ViewScheme.aspx" target="_self">Opens in Same Frame</a> |

</body>
</html>

Output

***NOTE

In above program, <base> tag is used to give a base path for all the links. So your
browser will concatenate given relative path to this base path and will make a
complete URL. Here URL <a href="https://www.rgpv.ac.in"> is being considered as <a
href=https://www.rgpv.ac.in/UploadContent/frm_ViewScheme.aspx

***Remember

1. _blank opens the linked document in a new window or tab.


2. _self is the default (current browsing context, i.e. current window or tab)

Other options are _parent and _top. The value _parent refers to the frameset that
is the parent of the current frame, whereas _top breaks out of all frames and opens
the linked document in the entire browser window.

HTML Comments

HTML comments are placed in between <!-- ... --> tags. So any content placed with-
in <!-- ... --> tags will be treated as comment and will be completely ignored by the
browser.

Program

<!DOCTYPE html>
<html>
<head> <!-- HTML Document's Header Starts Here-->
<title>This is document title</title>
For More : https://www.ThesisScientist.com

</head> <!-- HTML Document's Header Ends Here-->


<body>
<p>Document content goes here.....</p>
</body>
</html>

Output

***Remember:

1. <tag> tells the browser to do something.


2. An attribute goes inside the <tag> and tells the browser how to do it.
3. Default font size is 3, and default font style is Times New Roman.

Program

<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<p> <font size="7" face ="arial" color="red"> Web Technology </p>
</body>
</html>

Output

Note:
For More : https://www.ThesisScientist.com

Available Font Sizes:

1-Tiny, 2 - Small, 3 - Regular, 4 - Medium, 5 - Large, 6 - Big, 7 Yelling

Program

<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<img src="Sunset.jpg" width="130" height="100">
</body>
</html>

Output

The alt is sort of a substitute for the image when the user is using a browser that
is not (for whatever reason) displaying images.

Program

<html>
<head>
<title> My First Web Application </title>
For More : https://www.ThesisScientist.com

</head>
<body>
<img src="Sunset.jpg" width="130" height="100" alt="Image Missing">
</body>
</html>

Output

Program

Image as Link

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<a href="https://www.google.com">
<img src="comp.jpg">
</a>
</body>
</html>

Output

HTML List

1. Ordered List (Numbered List) <ol>


2. Unordered List (Bullet List) <ul>
For More : https://www.ThesisScientist.com

3. Definition List (Dictionary List) <dl>

Program (Unordered List (Bullet List) <ul>)

<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<h1> List of Branch </h1>
<ul>
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>

</body>
</html>

Output

Flavor of Bullets

1. Disc
2. Circle
3. Square
For More : https://www.ThesisScientist.com

***Note:
Default Bullet in unordered list: Disc Bullet

Program (Unordered List with all Flavors of Bullets)

<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<h1> List of Branch with Disc Bullets </h1>
<ul type ="disc">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>
<h1> List of Branch with Circle Bullets </h1>
<ul type ="circle">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>
<h1> List of Branch with Square Bullets </h1>
<ul type ="square">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>

</body>
</html>

Output
For More : https://www.ThesisScientist.com

Program (Ordered List (Numbered List) <ol>)

<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<font size="2" face ="arial" color="red">
<h4> Numbered List </h4>
<ol>
<li> CS </li>
<li> IT </li>
For More : https://www.ThesisScientist.com

<li> EC </li>
<li> ME </li>
</ol>
<h4> Uppercase Roman Numbers List </h4>
<ol type ="I">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
<h4> Lowercase Roman Numbers List </h4>
<ol type ="i">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
<h4> Uppercase Letters List </h4>
<ol type ="A">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
<h4> Lowercase Letters List </h4>
<ol type ="a">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
</body>
</html>

Output
For More : https://www.ThesisScientist.com

***Note:
Default Number in ordered list: 1, 2,3,4,5

Program (Nested List with OL and UL combination)

<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<font size="2" face ="arial" color="red">
For More : https://www.ThesisScientist.com

<h4> Nested Numbered List </h4>


<ol>
<li> CS </li>
<li> IT </li>
<ul type="disc">
<li> I Year </li>
<li> II Year </li>
<li> III Year </li>
<li> IV Year </li>
</ul>
<li> EC </li>
<li> ME </li>
</ol>
</body>
</html>

Output

Making Frame

Main Program

<html>
<head>
<title> Frame Demo </title>
</head>
For More : https://www.ThesisScientist.com

<frameset rows="30%, 70%">


<frame src="one.html">
<frameset cols="50%, 50%">
<frame src="two.html">
<frame src="three.html">
</html>

Program (one.html)

<html>
<body bgcolor=red>
<h3 align="center">Rajiv Gandhi Prodyogiki Vishwavidyalaya <br> Bhopal, M.P.</h3>
</body>
</html>

Program (two.html)

<html>
<body bgcolor=white>
<h3 align="left">Menu</h3>
<ul>
<li><i>About us<i></li>
<li><i>Scheme<i></li>
<li><i>Result<i></li>
</ul>
</body>
</html>

Program (three.html)

<html>
<body bgcolor=green>
<h3 align="center"><br><br><br><br><br><br><br><br>Welcome</h3>
</body>
</html>

Output
For More : https://www.ThesisScientist.com

Program

<html>
<head>
<title> Frame Demo </title>
</head>

<frameset cols="40%,20%,20%,20%">
<frameset rows="50%,50%">
<frame src="1.html">
<frame src="2.html">
</frameset>
<frame src="3.html">

<frameset rows="50%,50%">
<frame src="4.html">
<frame src="5.html">
</frameset>
<frame src="6.html">
</frameset>
</html>

Output
For More : https://www.ThesisScientist.com

HTML Tables

The HTML tables allow you to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.

Example Code

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%">
<tr>
<th>Group -1</th>
<th>Group -2</th>
</tr>
<tr>
<td>Harshita</td>
<td>Monika </td>
For More : https://www.ThesisScientist.com

</tr>
<tr>
<td>Vasundhara</td>
<td>Priyalaxmi</td>
</tr>
</table>
</body>
</html>

Data presentation in table

Here border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border then you can use border="0".

1. Tables are defined with the <table> tag.

2. Tables are divided into table rows with the <tr> tag.

3. Table rows are divided into table data with the <td> tag.

4. A table row can also be divided into table headings with the <th> tag.

Cell Padding and Cell Spacing

There are two attributes called cell padding and cell spacing which you will use to adjust
the white space in your table cells.

The cell spacing attribute defines the width of the border, while cell padding represents
the distance between cell borders and the content within a cell.

Program

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%" cellpadding="50" cellspacing="20">
<tr>
<th>Group -1</th>
<th>Group -2</th>
For More : https://www.ThesisScientist.com

</tr>
<tr>
<td>Harshita</td>
<td>Monika </td>
</tr>
<tr>
<td>Vasundhara</td>
<td>Priyalaxmi</td>
</tr>
</table>
</body>
</html>

Output

Colspan

Program

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<p></p>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%" cellpadding="50" cellspacing="20">
<tr> <th colspan=2><font color="blue">Web Tech MST Marks</font></th> </tr>
<tr> <td><font color="red">Harshita</font></td> <td>20</font></td> </tr>
<tr> <td><font color="red">Monika</font></td> <td>19</font></td> </tr>
<tr> <td><font color="red">Vasundhara</font></td> <td>18</font></td> </tr>

</table>
</body>
For More : https://www.ThesisScientist.com

</html>

Output

Program

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4">Odd Semesters</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">3</td>
<td align="center">5</td>
<td align="center">7</td>
</tr>
<tr>
<th colspan="4">Even Semesters</th>
</tr>
<tr>
<td align="center">2</td>
<td align="center">4</td>
<td align="center">6</td>
<td align="center">8</td>
For More : https://www.ThesisScientist.com

</tr>
</table>
</body>
</html>

Output

rowspan

The rowspan attribute specifies the number of rows a cell should span.

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%" cellpadding="0" cellspacing="0">
<tr>
<th rowspan="4">Odd Semesters</th>
<td align="center">1</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
<tr>
<td align="center">5</td>
</tr>
<tr>
<td align="center">7</td>
</tr>
</table>
</body>
</html>

Output
For More : https://www.ThesisScientist.com

Explanation

In the example above, rowspan is set to 4. This specifies that the cell must span over 4
rows (its own row plus additional thee). Odd semesters and 1 are thereby in the same
row, while 3, 5, 7 form three independent row.

rowspan and Colspan together

Program

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%" cellpadding="5" cellspacing="0">
<tr>
<th colspan="2"> MST Marks</th>
</tr>
<tr>
<td rowspan="5">Harshita</td>
<td>IT-601 = 18</td>
</tr>
<tr>
<td >IT-602 = 19</td>
</tr>
<tr>
<td >IT-603 = 20</td>
</tr>
<tr>
<td >IT-604 = 18</td>
</tr>
<tr>
<td >IT-605 = 17</td>
</tr>
<tr>
<td rowspan="5">Monika</td>
<td >IT-601 = 17</td>
</tr>
<tr>
<td >IT-602 = 18</td>
</tr>
<tr>
<td >IT-603 = 20</td>
</tr>
For More : https://www.ThesisScientist.com

<tr>
<td >IT-604 = 19</td>
</tr>
<tr>
<td >IT-605 = 18</td>
</tr>
</table>
</body>
</html>
Output

2.3 XHTML syntax and Semantics,


2.4 eXtensible Markup Language (XML)

XML is a markup language. Extensible means it has not a fixed format like HTML.
Markup is nothing but instruction, which is also called as tag. Scripting languages e.g.
HTML show how the data is displayed but XML describes what the data is.

Use of XML

XML is used to describe the structure of web document not the way of presenting the
web document.

Need of XML

XML is used to exchange the data. Both the sender and receiver can use XML to
understand the kind of data that is being sent.

***Note:

XML is a case sensitive language. It is a Meta language. Meta language is a language


used for describing other languages.
For More : https://www.ThesisScientist.com

Program

<?xml version="1.0"?>
<info>
<rollno>1011</rollno>
<name>Amit Jain</name>
<marks>85</marks>
</info>

Explanation

The first line of the program is the XML declaration. The next line describes the root
element of the document i.e. <info>. Next three lines describe the three child elements of
the root i.e. <rollno>, <name> and <marks>.

Output

The output of above program will be displayed in form of an XML document which
displays color coded root and child elements as shown below:

***Remember

All tags used here are user defined. XML provide us the facility to create our own tag.
XML tags are case sensitive.

***Note:

A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or
collapse the element structure. Let us collapse the above element structure now:
For More : https://www.ThesisScientist.com

2.4.1 Element,

Everything written between start tag and end tag is known as element. It can contain
other elements, text, attributes etc.

Empty XML Element

An element with no content is said to be empty element.

Syntax

<element></element> or you can use self closing e.g.

<element/>

Both syntaxes written above are equivalent.

XML Element naming rules

1. Name of XML Element must start with a letter or an underscore, but it can
contain letters, digits, hyphens, underscores and period.
2. Name of XML Element can not start with the letter xml or XML or XmL etc.
3. Name of XML Element are case sensitive.
4. Spaces are not allowed in-between the name of XML Element.
5. No words are reserved in XML.

2.4.2 Attributes

In XML, data can be stored in child element or in attribute.

Look at the following example:

Program

<?xml version="1.0"?>
For More : https://www.ThesisScientist.com

<student>
<rollno>1011</rollno>
<name>Amit Jain</name>
<marks>85</marks>
</student>

Output

Explanation

In above program, rollno is a child element, which can be converted into attribute,
look at the next program:

Program

<?xml version="1.0"?>
<student rollno="1011">
<name>Amit Jain</name>
<marks>85</marks>
</student>

Output
For More : https://www.ThesisScientist.com

Explanation

In above program, rollno is a now an attribute of root element student. Both programs
will produce the same result.

***Note:

There are no rules about when to use attributes and when to use child elements.

Limitations of attribute in XML

1. Attribute cannot contain multiple values.


2. Attribute cannot describe structure.
3. attribute is not easily expandable
4. Attributes are more difficult to manipulate by program code.
5.
2.4.3 Entity declarations.

Entities help to reduce the entry of repetitive information. An Entity must be declared
before it is used. An entity can be declared with ENTITY.

Type of Entity Declaration

An entity in XML can be declared in following ways:

1. Internal Entity Declaration


2. External Entity Declaration

(i) Private External Entity Declaration


(ii) Public External Entity Declaration
For More : https://www.ThesisScientist.com

Private external entities are identified by the keyword SYSTEM, whereas public external
entities are identifies by the keyword PUBLIC. Private external entities are intended for
use by a single author or group of authors whereas public external entities are intended to
use at broad level.

Syntax for Internal Entity Declaration

<! ENTITY name entity_value>

Syntax for Private External Entity Declaration

<! ENTITY name SYSTEM URI>

Syntax for Private External Entity Declaration

<! ENTITY name PUBLIC public_id URI>

Difference between HTML and XML

S. No. HTML XML


1 HTML stands for Hyper Text Markup XML stands for eXtensible Markup
Language. Language.
2 HTML was designed to display the XML was designed to describe the
data data, not to display the data.
3 HTML defines its own predefined XML makes use of user defined
tags. tags.
4 HTML is static in nature, which XML is dynamic in nature, which
means content is not changed every means content is changed every time
time page is reloaded. page is reloaded.
5 HTML is about displaying XML is about carrying information.
information. It focuses on how data It focuses on what data is.
looks.
6 HTML is not case sensitive XML is case sensitive.

Difference between HTML and XHTML

XHTML is NOT a different language from HTML, but extended version of HTML that is
stricter and the next phase in the evolution of HTML. The reason for XHTML to be
developed was convoluted browser specific tags. Pages coded in HTML appeared
different in different browsers.

S. No. HTML XHTML


1 HTML stands for Hyper Text Markup XHTML stands for eXtensible
For More : https://www.ThesisScientist.com

Language. Hyper Text Markup Language.


2 We can omit the closing tags Tags in XHTML must be closed.
sometimes in HTML document.
3 It is not always necessary to quote the It is mandatory to quote the attribute
attribute values in HTML. value in every XHTML document.
4 HTML is not case sensitive XHTML is case sensitive.
5 HTML is SGML-based. XHTML is XML-based.

***Remember:

SGML stands for Standard Generalized Markup Language.

2.5 DTD files

Document Type Definition (DTD)

The Document Type Definition (DTD) specifies the rules for the markup language, so
that the browsers provide the content correctly. A Document Type Definition (DTD)
defines the structure and the legal elements and attributes of a document.

Example Code

<!DOCTYPE html>
<html>
<head>
<title> My First HTML Program </title>
</head>

<body>
Hello World
</body>
</html>

***Note:

1. The <!DOCTYPE> declaration must be the very first thing in your HTML
document, before the <html> tag.

2. Always add the <!DOCTYPE> declaration to your HTML documents, so that the
browser knows what type of document to expect.

3. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web


browser about what version of HTML the page is written in.

Why Use a DTD?


For More : https://www.ThesisScientist.com

1. With a DTD, independent groups of people can agree to use a standard DTD for
interchanging data.

2. Your application can use a standard DTD to verify that the data you receive from
the outside world is valid.

3. You can also use a DTD to verify your own data.

What Happens If the DOCTYPE Declaration (DTD) is Not Included or is Incorrect?

If the web page coding does not include a DOCTYPE Declaration (DTD or Document
Type Declaration) or it is done incorrectly:

1. You will not be able to use a HTML (Hyper Text Markup Language) Validator to
check the page coding. HTML validation requires the DOCTYPE declaration.
2. The style sheet may not be implemented as planned.

Types of DTD

A DTD can be declared inside an XML document or in an external file.

Internal DTD Declaration

If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE>
definition:

External DTD Declaration

If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a
reference to the DTD file:

2.6 Basics of Cascading Style Sheet (CSS)

CSS stands for Cascading Style Sheets.

Meaning of Cascading

This is the capability provided by some style sheet languages such as CSS to allow style
information from several sources to be blended together. The cascade defines an ordered
sequence of style sheets where rules in later sheets have greater precedence than earlier
ones.

CSS handles the look and feel part of a web page. Using CSS, you can control the color
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, as well as a variety of other effects.
For More : https://www.ThesisScientist.com

CSS provides powerful control over the presentation of an HTML document.

***Note:

1. Most commonly, CSS is combined with the markup languages HTML or


XHTML.
2. CSS defines how HTML elements are to be displayed.
3. CSS controls the style and layout of multiple Web pages all at once.

Need of CSS (Limitations of HTML)

HTML was never intended to contain tags for formatting a document. HTML was
intended to define the content of a document, like:

<h1>This is a heading</h1>

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

Development of large web sites, where fonts and color information were added to every
single page, became a long and expensive process. To solve this problem, the World
Wide Web Consortium (W3C) created CSS.

CSS lets you separate the layout from the content, it also lets you define the layout much
more powerfully than you could with classic HTML.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in
a separate CSS file. Styles are normally saved in external .css files. External style sheets
enable you to change the appearance and layout of all the pages in a Web site, just by
editing one single file!

***Note:

All browsers support CSS today.

Advantages of CSS:

1. CSS saves time - You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
2. Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.
3. Easy maintenance - To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
For More : https://www.ThesisScientist.com

4. Superior styles to HTML - CSS has a much wider array of attributes than
HTML so you can give far better look to your HTML page in comparison of
HTML attributes.
5. Multiple Device Compatibility - Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
6. Global web standards - Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.

CSS Versions:

1. CSS1
2. CSS2

***Note

We will start with a style sheet embedded inside the HTML file. Later, we will put the
HTML and the CSS in separate files. Separate files are good, since it makes it easier to
use the same style sheet for multiple HTML files: you only have to write the style sheet
once.

Ways to make CSS Code:

There are following three ways to associate styles with HTML document:

1. Inline CSS and (inside an HTML element )


2. Embedded/Internal CSS (inside the <head> section of an HTML page)
3. External CSS (in an external CSS file)

Inline CSS

You can use style attribute of any HTML element to define style rules. These rules will
be applied to that element only.

Program

<html>
<head>
<title>CSS Example</title>
</head>
<body>
<p style="color: red">My First CSS Program</p>
<p> Hello World </p>
For More : https://www.ThesisScientist.com

</body>
</html>

Output

***Remember

This will make that specific paragraph red.

Embedded/Internal CSS

Embedded, or internal, styles are used for the whole page. You can put your CSS rules
into an HTML document using the <style> element. This tag is placed inside
<head>...</head> tags. Rules defined using this syntax will be applied to all the elements
available in the document. An internal style sheet should be used when a single document
has a unique style.

Program

<html>
<head>
<style>
p
{
color: red;
}
a
{
color: blue;
}
</style>
</head>
<body>
<p> My First CSS Program </p>
<p> Hello World </p>
<a href="http://www.google.com">This is a hyperlink to open google</a>
</body>
</html>
For More : https://www.ThesisScientist.com

Output

External CSS

External styles are used for the whole, multiple-page website. The <link> element can be
used to include an external style sheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You define all the Style
rules within this text file and then you can include this file in any HTML document using
<link> element.

Program

***Note:

The rel attribute specifies the relationship between the current document and the linked
document.
For More : https://www.ThesisScientist.com

***Note:

Type=text/css, this line says that this is a style sheet and it is written in CSS.

Output 1

Output - 2
For More : https://www.ThesisScientist.com

Style sheets in CSS are made up of rules. Each rule has three parts:

1. The selector (in the example: body), which tells the browser which part of the
document is affected by the rule;
2. The property (in the example, 'color' is a property), which specifies what aspect of
the layout is being set; and
3. The value (red), which gives the value for the style property.

CSS Selector

The selector points to the HTML element you want to style. CSS selectors allow you to
select and manipulate HTML elements. CSS selectors are used to "find" (or select)
HTML elements based on their id, class, type, attribute etc.

1. The Element Selector


2. The id Selector
3. The class Selector

The Element Selector

The element selector selects elements based on the element name.

The class Selector

The class selector selects elements with a specific class (i.e. user defined) attribute. To
select elements with a specific class, you just need to write a period character, followed
by the name of the class:

Program
For More : https://www.ThesisScientist.com
For More : https://www.ThesisScientist.com
For More : https://www.ThesisScientist.com

Output
For More : https://www.ThesisScientist.com

The id selector

The id selector uses the id attribute of an HTML element to select a specific element. An
id should be unique within a page, so the id selector is used if you want to select a single,
unique element.

Difference between id selector and class selector

The id selector is similar to the class selector. Main difference between both is that the
class selector can be used with more than one element whereas using the id selector, the
style can be applied to the one specific element.

***Note:

To select an element with a specific id, write a hash character, followed by the id of the
element.

Program
For More : https://www.ThesisScientist.com
For More : https://www.ThesisScientist.com
For More : https://www.ThesisScientist.com

Output
For More : https://www.ThesisScientist.com

Positioning

The CSS positioning properties allow you to position an element. It can also place an
element behind another

Types of CSS Positioning

1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning
For More : https://www.ThesisScientist.com

Static Positioning

HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page.

Fixed Positioning

An element with a fixed position is positioned relative to the browser window, and will
not move even if the window is scrolled:

Relative Positioning

A relative positioned element is positioned relative to its normal position:

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a
position other than static.

Program
For More : https://www.ThesisScientist.com

Output

Program
For More : https://www.ThesisScientist.com

Output
For More : https://www.ThesisScientist.com

Program

<html>
<head>
<title>CSS example</title>
<link rel="stylesheet" type="text/css" href="M.css">
</head>
<body>
<h3>Program to make a form elements background color change when the user enters any text</h3>
Enter any Name <input type="text">
</body>
</html>

M.css

input:focus
{
background-color:red;
}

Output

HTML Forms
For More : https://www.ThesisScientist.com

HTML Forms are required when you want to collect some data/input from the site visitor.
For example during user registration you would like to collect information such as name,
email address, credit card, etc.

HTML Form Controls

1. Text Input Controls


2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button

Program

<html>
<head>
<title>Text Input Control</title>
</head>
<body>
First Name <input type="text" name="N">
<br><br>
Last Name <input type="text" name="S">
</body>
</html>

Note:

Here, type indicates the type of input and name is used to give a name to the control
which is sent to the server to be recognized and get the value.

Output
For More : https://www.ThesisScientist.com

Different input types of the <input> element are given below:

1. Input Type: text


2. Input Type: password
3. Input Type: checkbox
4. Input Type: radio
5. Input Type: submit
6. Input Type: button

***Note:

1. Name must be same of all options for radio buttons


2. Combo-box is also known as drop- down box.

HTML5 Input Types

HTML5 added several new input types:

1. color
2. date
3. datetime
4. datetime-local
5. email
6. month
7. number
8. range
9. search
10. tel
11. time
12. url
13. week

Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
For More : https://www.ThesisScientist.com

required Specifies that an input field is required (must be filled out)


size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

Text Color

The color property is used to set the color of the text. With CSS, a color is most often
specified by:

1. a HEX value - like "#ff0000"


2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"

2.7 Document object Model (DOM)

The way that document content is accessed and modified is called the Document Object
Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure
applies to the organization of objects in a Web document.

The Document Object Model is a platform- and language-neutral interface that will allow
programs and scripts to dynamically access and update the content, structure and style of
documents. The document can be further processed and the results of that processing can
be incorporated back into the presented page.

Document Object Model (DOM) is an API (application programming interface) that


defines how JavaScript programs can access and manipulate the HTML document
currently displayed by a browser.

The Document Object Model (DOM) defines the logical structure of documents and the
way a document is accessed and manipulated.

XML is being used as a way of representing many different kinds of information that
may be stored in diverse systems, and much of this would traditionally be seen as data
rather than as documents. Nevertheless, XML presents this data as documents, and the
DOM may be used to manage this data.

With the Document Object Model, programmers can build documents, navigate their
structure, and add, modify, or delete elements and content. Anything found in an HTML
or XML document can be accessed, changed, deleted, or added using the Document
Object Model.
For More : https://www.ThesisScientist.com

The DOM represents a document as a tree. The idea of DOM is that every node is
an object.

Let us consider the following code of HTML document:

A graphical representation of the DOM will look like as follows:

Fig. graphical representation of DOM

Let us consider the table given below, taken from an HTML document:

***Remember

The HTML tables allow you to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.

Example Code

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%">
For More : https://www.ThesisScientist.com

<tr>
<th>Group -1</th>
<th>Group -2</th>
</tr>
<tr>
<td>Harshita</td>
<td>Monika </td>
</tr>
<tr>
<td>Vasundhara</td>
<td>Priyalaxmi</td>
</tr>
</table>
</body>
</html>

Data presentation in table

Here border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border then you can use border="0".

1. Tables are defined with the <table> tag.

2. Tables are divided into table rows with the <tr> tag.

3. Table rows are divided into table data with the <td> tag.

4. A table row can also be divided into table headings with the <th> tag.

A graphical representation of the DOM


For More : https://www.ThesisScientist.com

Fig. graphical representation of DOM

2.7.1 History of DOM

1. The first document object model was incorporated in the Netscape 2.0 browser
so that JavaScript could interface with this browser.

[Detail:

The model included a write() method, which could be used to dynamically add content to
a document. It also provided access to form controls and anchor elements, so aspects of
these controls and elements could be changed dynamically by a JavaScript program.
However, many elements of the document displayed by the browser, including the
documents images, could not be modified through this early model.]

2. The Netscape 3.0 browsers document object added the ability to modify images,
enabling the rollover effect that we have just seen, which proved to be a popular
feature. Internet Explorer 3.0 contained a similar document object model.

3. The 4.0 versions of the Netscape Navigator and Internet Explorer browsers
opened up essentially the entire document along with style information to access
from scripts, but the two browsers implemented their document object models in
substantially different ways.

4. Differences in document object models were more difficult for developers to


handle than the differences in HTML between the browsers. The W3C responded
quickly to these emerging differences, beginning formal work on developing a
standard DOM in August of 1997 (Netscape 4.0 was released only a few months
earlier, and the final release of IE 4.0 did not come until a few months later).

2.7.2 DOM levels,

DOM Levels are the versions of the specification for defining how the Document Object
Model should work
For More : https://www.ThesisScientist.com

Various levels of DOM are given below:

1. DOM Level 0

Netscape and IE 3.0 versions are considered as a starting point of initial DOM
recommendation which is referred to as the DOM Level 0, although there is no official
standard by that name.

2. DOM Level 1

The W3C released its initial DOM recommendation in October of 1998 [W3C-DOM-1].
This is known as DOM Level 1.

DOM Level 1, consists of two modules:

1. Core Module,
2. HTML Module

Core Module

Core Module specifies functionality designed to be used with any XML document,

HTML Module

HTML module specifies higher-level DOM access to HTML documents.

3. DOM Level 2

The Level 2 DOM also contains Core and HTML modules along with several others,
particularly Events and Style that extend Level 1 functionality.

4. DOM Level 3

The W3C released its DOM Level 3 recommendation in April of 2004. This version
enhances DOM Level 2 by completing the mapping between DOM and the XML
Information Set, adding the ability to attach user information to DOM Nodes, providing
mechanisms to resolve namespace prefixes or to manipulate "ID" attributes, giving to
type information, etc.

2.7.3 Document tree,

When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML Document Object Model is constructed as a tree of Objects. All nodes can be
accessed through the tree. Their contents can be modified or deleted, and new elements
can be created. The document tree shows the set of nodes, and the connections between
For More : https://www.ThesisScientist.com

them. The tree starts at the root node and branches out to the text nodes at the lowest
level of the tree:

Fig. : The HTML DOM Tree of Objects

The nodes in the node tree have a hierarchical relationship to each other. The terms
parent, child, and sibling are used to describe the relationships. Parent nodes have
children. Children on the same level are called siblings (brothers or sisters).

***Remember

1. In a node tree, the top node is called the root


2. Every node, except the root, has exactly one parent node
3. A node can have any number of children
4. A leaf is a node with no children
5. Siblings are nodes with the same parent

2.7.4 DOM event handling.

Events are actions that can be detected by Java Script. HTML DOM events allow
JavaScript to register different event handlers on elements in an HTML document.

Every element on a web page has certain events which can trigger Java Script functions.
Events are normally used in combination with functions, and the function will not be
executed before the event occurs.

Example
For More : https://www.ThesisScientist.com

You can use the onClick event of a button element to indicate that a function will run
when a user clicks on the button.

Some common events are:

1. Mouse Event
2. Keyboard Event
3. Form Event
4. Object Event etc

Let us understand any one event from above:

Mouse Event

onclick The event occurs when the user clicks on an element

Program

<html>
<head>
<title>Java Script Program</title>
<script type="text/javascript">
function F()
{
n1=document.f.t1.value;
n2=document.f.t2.value;
result=n1*n2;
alert("Multiplication is="+result)
}
document.write("Addition of a and b = "+ c);
</script>
</head>
<body bgcolor="purple">
<form name = "f">
Enter First Number <input type = "text" name="t1"><br><br>
Enter Second Number <input type = "text" name="t2"><br><br>
<input type="button" name="b1" value="Result of Multiplication" onClick="F()">
</form>
</body>
</html>

Output
For More : https://www.ThesisScientist.com

***********************************************************************

You might also like