0% found this document useful (0 votes)

36 views83 pages

Web Programming Notes for BCA Students

This document provides notes on web programming, specifically focusing on HTML, its elements, and formatting techniques. It covers the structure of HTML documents, the use of tags for formatting text and forms, and the creation of interactive web elements. The document serves as a guide for students in a Bachelor of Computer Applications program at Sri Venkateswara University.

Uploaded by

Brijesh Vishnu

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

0% found this document useful (0 votes)

36 views83 pages

Web Programming Notes for BCA Students

Uploaded by

Brijesh Vishnu

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

lOMoARcPSD|43299490

WEB- Programming- Notes

Batchelor of computer applications (Sri Venkateswara University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])
lOMoARcPSD|43299490

[Link] – COMPUTER – III YEAR - NOTES

WEB PROGRAMMING
I N D EX – UN I T - I

S.n o : Ti t l e Pa g e n o :

1. H TM L Pr o g r a m m i n g I n t r o d u ct i o n 02 - 03

Fo r m a t t i n g Te x t - Fo r m s & Fo r m u l a t i n g
2. 04 - 12
El e m e n t s

i. Fo r m a t t i n g Te x t 04 - 05

ii. Fo r m a t t i n g Fo r m s 06 - 08

iii. Fo r m u l a t i n g El e m e n t s 09 - 12

Gr a p h i cs i n H TM L Cr e a t i n g Ta b l e s &
3. 13 - 22
Fr a m e s

i. Ta b l e s 13 - 19

ii. Fr a m e s 20 - 22

4. W e b D e si g n Pr i n ci p l e s 23 - 29

5. PROGRA M ES W I TH OUTPUT: 30 - 45

i. H TM L El e m e n t s Fo r m a t t i n g 30 - 30
H TM L Te x t Fo r m a t t i n g
ii. 31 - 33
H TM L Ta b l e s
iii. 34 - 39

iv. H TM L Fr a m e s 40 - 41
H TM L Fo r m s
v. 42 - 45

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L Pr o g r a m m i n g I n t r o d u ct i o n
HTML, which stands for HyperText Markup Language, is the predominant markup
languagefor web pages. HTML is the basic building-blocks of webpages.

HTML is written in the form of HTML elements consisting of tags, enclosed in angle
brackets(like <html>), within the web page content. HTML tags normally come in pairs
like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end
tag (they are also calledopening tags and closing tags). In between these tags web
designers can add text, tables, images, etc.

The purpose of a web browser is to read HTML documents and compose them into
visual or audible web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and
objects to be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. It can embed scripts in
languages such as JavaScript which affect the behavior of HTML webpages.

Web browsers can also refer to Cascading Style Sheets (CSS) to define the
appearance and layout of text and other material. The W3C, maintainer of both the
HTML and the CSS standards, encourages the use of CSS over explicitly presentational
HTML markup.[1]

What is HTML?
HTML is a language for describing web pages.

• HTML st ands for H yper Text M arkup Language

• HTML is not a program m ing language, it is a m a r k u p l a n g u a g e
• A m arkup language is a set of m a r k u p t a g s
• HTML uses m a r k u p t a g s t o describe web pages

HTML Tags
HTML m arkup t ags are usually called HTML t ags

• HTML t ags are keywords surrounded by a n g l e b r a ck e t s like < ht m l>

• HTML t ags norm ally co m e i n p a i r s like < b> and < / b>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

• The first t ag in a pair is t he st a r t t a g , t he second t ag is t he e n d t a g

• St art and end t ags are also called o p e n i n g t a g s and cl o si n g t a g s

HTML Docum ent s = Web Pages

• HTML docum ent s d e scr i b e w e b p a g e s
• HTML docum ent s co n t a i n H TM L t a g s and plain t ext
• HTML docum ent s are also ca l l e d w e b p a g e s

The purpose of a web brow ser ( like I nt ernet Explorer or Firefox) is t o read HTML
docum ent s and display t hem as web pages. The brow ser does not display t he HTML
t ags, but uses t he t ags t o int erpret t he cont ent of t he page:

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Fo r m a t t i n g Te x t - Fo r m s & Fo r m u l a t i n g El e m e n t s –

HTML uses t ags like < b> and < i> for form at t ing out put , like b o l d or it alic t ext .

These HTML t ags are called form at t ing t ags

Oft en < st rong> renders as < b> , and < em > renders as < i> .

However, t here is a difference in t he m eaning of t hese t ags:

< b> or < i> defines bold or it alic t ext only.

< st rong> or < em > m eans t hat you want t he t ext t o be rendered in a w ay t hat t he
user underst ands as " im port ant " . Today, all m aj or browsers render st rong as bold
and em as it alics. However, if a brow ser one day want s t o m ake a t ext highlight ed
wit h t he st rong feat ure, it m ight be cursive for exam ple and not bold!

H TM L Te x t Fo r m a t t i n g Ta g s

These are the tags for text formats:

<b>text</b> writes text as bold
<i>text</i> writes text in italics
<u>text</u> writes underlined text
<sub>text</sub> lowers text and makes it smaller
<sup>text</sup> lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<tt>text</tt> writes text as on a classic typewriter
<pre>text</pre> writes text exactly as it is, including spaces.
<em>text</em> usually makes text italic
<strong>text<strong> usually makes text bold

HTML " Com put er Out put " Tags

Ta g D e scr i p t i o n
< dfn> Defines a definit ion t erm
< code> Defines com put er code t ext

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

< sam p> Defines sam ple com put er code

< kbd> Defines keyboard t ext
< var> Defines a variable part of a t ext
< cit e> Defines a cit at ion
< pre> Defines preform at t ed t ext

HTML Cit at ions, Quot at ions, and Definit ion Tags

Ta g D e scr i p t i o n
< abbr> Defines an abbreviat ion
< acronym > Defines an acronym
< address> Defines cont act inform at ion for t he aut hor/ owner of a docum ent
< bdo> Defines t he t ext direct ion
< blockquot e> Defines a long quot at ion
< q> Defines a short quot at ion
< cit e> Defines a cit at ion
< dfn> Defines a definit ion t erm

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Fo r m a t t i n g Fo r m s-
HTML form s are used t o pass dat a t o a server.

A form can cont ain input elem ent s like t ext fields, checkboxes, radio- but t ons,
subm it but t ons and m ore. A form can also cont ain select list s, t ext area, fieldset ,
legend, and label elem ent s.

The < form > t ag is used t o creat e an HTML form :

<form>
.
input elements
.
</form>

HTML Form s - The I nput Elem ent

The m ost im port ant form elem ent is t he input elem ent .

The input elem ent is used t o select user inform at ion.

An input elem ent can vary in m any ways, depending on t he t ype at t ribut e. An input
elem ent can be of t ype t ext field, checkbox, password, radio but t on, subm it but t on,
and m ore.

The m ost used input t ypes are described below.

Text Fields
< input t ype= " t ext " / > defines a one- line input field t hat a user can ent er t ext int o:

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

How t he HTML code above looks in a brow ser:

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

First nam e:
Last nam e:

N o t e : The form it self is not visible. Also not e t hat t he default widt h of a t ext field is
20 charact ers.

Password Field
< input t ype= " password" / > defines a password field:

<form>
Password: <input type="password" name="pwd" />
</form>

How t he HTML code above looks in a brow ser:

Password:

N o t e : The charact ers in a password field are m asked ( shown as ast erisks or
circles) .

Radio But t ons

< input t ype= " radio" / > defines a radio but t on. Radio but t ons let a user select ONLY
ONE one of a lim it ed num ber of choices:

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

How t he HTML code above looks in a brow ser:

Male
Fem ale

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Checkboxes
< input t ype= " checkbox" / > defines a checkbox. Checkboxes let a user select ONE
or MORE opt ions of a lim it ed num ber of choices.

How t he HTML code above looks in a brow ser:

I have a bike
I have a car

Subm it But t on
< input t ype= " subm it " / > defines a subm it but t on.

A subm it but t on is used t o send form dat a t o a server. The dat a is sent t o t he page
specified in t he form 's act ion at t ribut e. The file defined in t he act ion at t ribut e
usually does som et hing wit h t he received input :

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

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

How t he HTML code above looks in a brow ser:

Submit
Usernam e:

I f you t ype som e charact ers in t he t ext field above, and click t he " Subm it " but t on,
t he browser will send your input t o a page called " ht m l_form _act [Link]" . The page
will show you t he received input .

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Fo r m u l a t i n g El e m e n t s-
Elements
Main article: HTML element
HTML documents are composed entirely of HTML elements that, in their most general
form have three components: a pair of tags, a "start tag" and "end tag";
some attributes within the start tag; and finally, any textual and
graphical content between the start and end tags, perhaps including other nested
elements. The HTML element is everything between and including the start and end
tags. Eachtag is enclosed in angle brackets.
The general form of an HTML element is therefore: <tag attribute1="value1"
attribute2="value2">content</tag>. Some HTML elements are defined as empty
elements and take the form <tag attribute1="value1" attribute2="value2" />.
Empty elements may enclose no content. The name of an HTML element is the name
used in the tags. Note that the end tag's name is preceded by a slash character, "/", and
that in empty elements the slash appears just before the closing >. If attributes are not
mentioned, default values are used in each case.

HTML Elem ent s

An HTML elem ent is everyt hing from t he st art t ag t o t he end t ag:

St a r t t a g * El e m e n t co n t e n t En d t a g *
< p> This is a paragraph < / p>
< a href= " default .ht m " > This is a link < / a>
< br / >

* The st art t ag is oft en called t he o p e n i n g t a g . The end t ag is oft en called

t he cl o si n g t a g .

HTML Elem ent Synt ax

• An HTML elem ent st art s w it h a st a r t t a g / o p e n i n g t a g
• An HTML elem ent ends w it h an e n d t a g / cl o si n g t a g
• The e l e m e n t co n t e n t is everyt hing bet w een t he st art and t he end t ag
• Som e HTML elem ent s have e m p t y co n t e n t
• Em pt y elem ent s are cl o se d i n t h e st a r t t a g

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

• Most HTML elem ent s can have a t t r i b u t e s

Ti p : You w ill learn about at t ribut es in t he next chapt er of t his t ut orial.

Nest ed HTML Elem ent s

Most HTML elem ent s can be nest ed ( can cont ain ot her HTML elem ent s) .

HTML docum ent s consist of nest ed HTML elem ent s.

HTML Docum ent Exam ple

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

The exam ple above cont ains 3 HTML elem ent s.

HTML Exam ple Explained

Th e < p > e l e m e n t :

<p>This is my first paragraph.</p>

The < p> elem ent defines a paragraph in t he HTML docum ent .
The elem ent has a st art t ag < p> and an end t ag < / p> .
The elem ent cont ent is: This is m y first paragraph.

Th e < b o d y > e l e m e n t :

<body>
<p>This is my first paragraph.</p>
</body>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

The < body> elem ent defines t he body of t he HTML docum ent .
The elem ent has a st art t ag < body> and an end t ag < / body> .
The elem ent cont ent is anot her HTML elem ent ( a p elem ent ) .

Th e < h t m l > e l e m e n t :

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

The < ht m l> elem ent defines t he whole HTML docum ent .
The elem ent has a st art t ag < ht m l> and an end t ag < / ht m l> .
The elem ent cont ent is anot her HTML elem ent ( t he body elem ent ) .

Don't Forget t he End Tag

Som e HTML elem ent s m ight display correct ly even if you forget t he end t ag:

<p>This is a paragraph
<p>This is a paragraph

The exam ple above w orks in m ost browsers, because t he closing t ag is considered
opt ional.

Never rely on t his. Many HTML elem ent s will produce unexpect ed result s and/ or
errors if you forget t he end t ag .

Em pt y HTML Elem ent s

HTML elem ent s w it h no cont ent are called em pt y elem ent s.

< br> is an em pt y elem ent w it hout a closing t ag ( t he < br> t ag defines a line
break) .

Ti p : I n XHTML, all elem ent s m ust be closed. Adding a slash inside t he st art t ag, like
< br / > , is t he proper way of closing em pt y elem ent s in XHTML ( and XML) .

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

HTML Tip: Use Lowercase Tags

HTML t ags are not case sensit ive: < P> m eans t he sam e as < p> . Many w eb sit es
use uppercase HTML t ags.

W3Schools use lowercase t ags because t he World Wide Web Consort ium
( W3C) r e co m m e n d slowercase in HTML 4, and d e m a n d s lowercase t ags in XHTML.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Gr a p h i cs i n H TM L Cr e a t i n g Ta b l e s & Fr a m e s-
H TM L Ta b l e s:

TA BLES:

Tables are defined wit h t he < t able> t ag.

A t able is divided int o row s ( w it h t he < t r> t ag) , and each row is divided int o dat a
cells ( wit h t he < t d> t ag) . t d st ands for " t able dat a," and holds t he cont ent of a dat a
cell. A < t d> t ag can cont ain t ext , links, im ages, list s, form s, ot her t ables, et c.

Tables are used on websites for two major purposes:

• The obvious purpose of arranging information in a table

• The less obvious - but more widely used - purpose of creating a page
layout with the use of hidden tables.

Using tables to divide the page into different sections is an extremely powerful
tool.
Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with tables are:
• Dividing the page into separate sections.
An invisible table is excellent for this purpose.
• Creating menus.
Typically with one color for the header and another for the links following in
the next lines.
• Adding interactive form fields.
Typically a gray area containing a search option.

• Creating fast loading headers for the page.

A colored table with a text on it loads like a bullet compared to even a
small banner.
• Easy alignment of images that have been cut into smaller pieces.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

• A simple way to allow text to be written in two or more columns next to

each other.

The importance of using tables for these layout purposes can't be overrated.
However there are a few things to keep in mind when doing so.

Most important is, that the content of a table is not shown until the entire table is
loaded. If you have extremely long pages, you should divide it into two or more
tables - allowing the user to start reading the upper content while the rest of the
page is loading.

Now let's proceed with learning about the different techniques...

HTML Table Tags
Ta g D e scr i p t i o n
< t able> Defines a t able
< t h> Defines a t able header
< t r> Defines a t able row
< t d> Defines a t able cell
< capt ion> Defines a t able capt ion
< colgroup> Defines a group of colum ns in a t able, for form at t ing
< col / > Defines at t ribut e values for one or m ore colum ns in a t able
< t head> Groups t he header cont ent in a t able
< t body> Groups t he body cont ent in a t able
< t foot > Groups t he foot er cont ent in a t able

H TM L < t a b l e > Ta g
Definit ion and Usage

The < t able> t ag defines an HTML t able.

A sim ple HTML t able consist s of t he t able elem ent and one or m ore t r, t h,
and t d elem ent s.

The t r elem ent defines a t able row, t he t h elem ent defines a t able header, and t he
t d elem ent defines a t able cell.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

A m ore com plex HTML t able m ay also include capt ion, col, colgroup, t head, t foot ,
and t body elem ent s.

H TM L < t h > Ta g
Definit ion and Usage

The < t h> t ag defines a header cell in an HTML t able.

An HTML t able has t wo kinds of cells:

• Header cells - cont ains header inform at ion ( creat ed wit h t he t h elem ent )
• St andard cells - cont ains dat a ( creat ed wit h t he t d elem ent )

The t ext in a t h elem ent is bold and cent ered.

The t ext in a t d elem ent is regular and left - aligned.

H TM L < t r > Ta g
Definit ion and Usage

The < t r> t ag defines a row in an HTML t able.

A t r elem ent cont ains one or m ore t h or t d elem ent s.

H TM L < t d > Ta g
Definit ion and Usage

The < t d> t ag defines a st andard cell in an HTML t able.

An HTML t able has t wo kinds of cells:

• Header cells - cont ains header inform at ion ( creat ed wit h t he t h elem ent )
• St andard cells - cont ains dat a ( creat ed wit h t he t d elem ent )

The t ext in a t h elem ent is bold and cent ered.

The t ext in a t d elem ent is regular and left - aligned.

H TM L < ca p t i o n > Ta g
Definit ion and Usage

The < capt ion> t ag defines a t able capt ion.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

The < capt ion> t ag m ust be insert ed im m ediat ely aft er t he < t able> t ag. You can
specify only one capt ion per t able. Usually t he capt ion will be cent ered above t he
t able.

H TM L < co l g r o u p > Ta g
Definit ion and Usage

The < colgroup> t ag is used t o group colum ns in a t able for form at t ing.

The < colgroup> t ag is useful for applying st yles t o ent ire colum ns, inst ead of
repeat ing t he st yles for each cell, for each row.

The < colgroup> t ag can only be used inside a t able elem ent .

H TM L < co l > Ta g

Definit ion and Usage

The < col> t ag defines at t ribut e values for one or m ore colum ns in a t able.

The < col> t ag is useful for applying st yles t o ent ire colum ns, inst ead of repeat ing
t he st yles for each cell, for each row.

The < col> t ag can only be used inside a t able or a colgroup elem ent .

H TM L < t h e a d > Ta g
Definit ion and Usage

The < t head> t ag is used t o group t he header cont ent in an HTML t able.

The t head elem ent should be used in conj unct ion wit h
t he t body and t foot elem ent s.

The t body elem ent is used t o group t he body cont ent in an HTML t able and t he t foot
elem ent is used t o group t he foot er cont ent in an HTML t able.

N o t e : < t foot > m ust appear before < t body> wit hin a t able, so t hat a browser can
render t he foot before receiving all t he rows of dat a.

Not ice t hat t hese elem ent s will not affect t he layout of t he t able by default .
However, you can use CSS t o let t hese elem ent s affect t he t able's layout .

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L < t b o d y > Ta g
Definit ion and Usage

The < t body> t ag is used t o group t he body cont ent in an HTML t able.

The t body elem ent should be used in conj unct ion wit h
t he t head and t foot elem ent s.

The t head elem ent is used t o group t he header cont ent in an HTML t able and t he
t foot elem ent is used t o group t he foot er cont ent in an HTML t able.

N o t e : < t foot > m ust appear before < t body> wit hin a t able, so t hat a browser can
render t he foot before receiving all t he rows of dat a.

Not ice t hat t hese elem ent s will not affect t he layout of t he t able by default .
However, you can use CSS t o let t hese elem ent s affect t he t able's layout .

H TM L < t f o o t > Ta g
Definit ion and Usage

The < t foot > t ag is used t o group t he foot er cont ent in an HTML t able.

The t foot elem ent should be used in conj unct ion wit h
t he t head and t body elem ent s.

The t head elem ent is used t o group t he header cont ent in an HTML t able and t he
t body elem ent is used t o group t he body cont ent in an HTML t able.

N o t e : < t foot > m ust appear before < t body> wit hin a t able, so t hat a browser can
render t he foot before receiving all t he rows of dat a.

Not ice t hat t hese elem ent s will not affect t he layout of t he t able by default .
However, you can use CSS t o let t hese elem ent s affect t he t able's layout .

Table Exam ple

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

<td>row 2, cell 1</td>

How t he HTML code above looks in a brow ser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Tables and t he Border At t ribut e

I f you do not specify a border at t ribut e, t he t able w ill be displayed wit hout borders.
Som et im es t his can be useful, but m ost of t he t im e, we want t he borders t o show.

To display a t able wit h borders, specify t he border at t ribut e:

HTML Table Headers

Header inform at ion in a t able are defined wit h t he < t h> t ag.

All m aj or browsers w ill display t he t ext in t he < t h> elem ent as bold and cent ered.

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

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How t he HTML code above looks in your browser:

Head er 1 Head er 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L Fr a m e s:
Frames can divide the screen into separate windows.

Each of these windows can contain an HTML document.

A file that specifies how the screen is divided into frames is called a frameset.
If you want to make a homepage that uses frames you should:
• make an HTML document with the frameset

• make the normal HTML documents that should be loaded into each of
these frames.

When a frameset page is loaded, the browser automatically loads each of

the pages associated with the frames.

Wit h fram es, you can display m ore t han one HTML docum ent in t he sam e brow ser
window. Each HTML docum ent is called a fram e, and each fram e is independent of
t he ot hers.

The disadvant ages of using fram es are:

• Fram es are not expect ed t o be support ed in fut ure versions of HTML

• Fram es are difficult t o use. ( Print ing t he ent ire page is difficult ) .
• The web developer m ust keep t rack of m ore HTML docum ent s

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

The HTML fram eset Elem ent

The fram eset elem ent holds one or m ore fram e elem ent s. Each fram e elem ent can
hold a separat e docum ent .

The fram eset elem ent st at es HOW MANY colum ns or rows t here will be in t he
fram eset , and HOW MUCH percent age/ pixels of space will occupy each of t hem .

The HTML fram e Elem ent

The < fram e> t ag defines one part icular w indow ( fram e) w it hin a fram eset .

I n t he exam ple below we have a fram eset wit h t wo colum ns.

The first colum n is set t o 25% of t he widt h of t he browser window. The second
colum n is set t o 75% of t he widt h of t he browser window. The docum ent
" fram e_a.ht m " is put int o t he first colum n, and t he docum ent " fram e_b.ht m " is put
int o t he second colum n:

Basic Not es - Useful Tips

Ti p : I f a fram e has visible borders, t he user can resize it by dragging t he border. To
prevent a user from doing t his, you can add noresize= " noresize" t o t he < fram e>
t ag.

N o t e : Add t he < nofram es> t ag for browsers t hat do not support fram es.

I m p o r t a n t : You cannot use t he < body> < / body> t ags t oget her wit h t he
< fram eset > < / fram eset > t ags! However, if you add a < nofram es> t ag cont aining
som e t ext for brow sers t hat do not support fram es, you will have t o enclose t he
t ext in < body> < / body> t ags! See how it is done in t he first exam ple below.

H TM L Fr a m e Ta g s
Ta g D e scr i p t i o n
< fram eset > Defines a set of fram es
< fram e / > Defines a sub window ( a fram e)
< nofram es> Defines a nofram e sect ion for browsers t hat do not handle fram es

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L < f r a m e se t > Ta g
Definit ion and Usage

The < fram eset > t ag defines a fram eset .

The fram eset elem ent holds one or m ore fram e elem ent s. Each fram e elem ent can
hold a separat e docum ent .

The fram eset elem ent st at es HOW MANY colum ns or rows t here will be in t he
fram eset , and HOW MUCH percent age/ pixels of space will occupy each of t hem .

H TM L < f r a m e > Ta g
Definit ion and Usage

The < fram e> t ag defines one part icular w indow ( fram e) w it hin a fram eset .

Each fram e in a fram eset can have different at t ribut es, such as border, scrolling,
t he abilit y t o resize, et c.

H TM L < n o f r a m e s> Ta g
Definit ion and Usage

The < nofram es> t ag is used for brow sers t hat do not handle fram es.

The nofram es elem ent can cont ain all t he elem ent s t hat you can find inside t he
body elem ent of a norm al HTML page.

The nofram es elem ent is m ost used t o link t o a non- fram eset version of t he web
sit e or t o display a m essage t o users t hat fram es are required.

The nofram es elem ent goes inside t he fram eset elem ent .

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

W e b D e si g n Pr i n ci p l e s-
Web design is a broad term used to encompass the way
that content (usually hypertext or hypermedia) is delivered to an end-user through
the World Wide Web, using a web browser or other web-enabled software to display the
content. The intent of web design is to create awebsite—a collection of online content
including documents and applications that reside on a web server/servers. A website
may include text, images, sounds and other content, and may be interactive.

1. Precedence ( Guiding the Eye)

Good Web design, perhaps even more than other type of design, is about information.
One of the biggest tools in your arsenal to do this is precedence. When navigating a good
design, the user should be led around the screen by the designer. I call this precedence,
and it’s about how much visual weight different parts of your design have.
A simple example of precedence is that in most sites, the first thing you see is the logo.
This is often because it’s large and set at what has been shown in studies to be the first
place people look (the top left). his is a good thing since you probably want a user to
immediately know what site they are viewing.
But precedence should go much further. You should direct the user’s eyes through a
sequence of steps. For example, you might want your user to go from logo/brand to a
primary positioning statement, next to a punchy image (to give the site personality), then
to the main body text, with navigation and a sidebar taking a secondary position in the
sequence.
What your user should be looking at is up to you, the Web designer, to figure out.
To achieve precedence you have many tools at your disposal:
• Position — Where something is on a page clearly influences in what order the user sees
it.
• Color — Using bold and subtle colors is a simple way to tell your user where to look.
• Contrast — Being different makes things stand out, while being the same makes them
secondary.
• Size — Big takes precedence over little (unless everything is big, in which case little
might stand out thanks to Contrast)
• Design Elements — if there is a gigantic arrow pointing at something, guess where the
user will look?

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

2. Spacing
When I first started designing I wanted to fill every available space up with stuff. Empty
space seemed wasteful. In fact the opposite is true.
Spacing makes things clearer. In Web design there are three aspects of space that you
should be considering:
• Line Spacing
When you lay text out, the space between the lines directly affects how readable it
appears. Too little space makes it easy for your eye to spill over from one line to the
next, too much space means that when you finish one line of text and go to the next your
eye can get lost. So you need to find a happy medium. You can control line spacing in
CSS with the ‘line-height’ selector. Generally I find the default value is usually too little
spacing. Line Spacing is technically called leading (pronounced ledding), which derives
from the process that printers used to use to separate lines of text in ye olde days — by
placing bars of lead between the lines.
• Padding
Generally speaking text should never touch other elements. Images, for example, should
not be touching text, neither should borders or tables.
Padding is the space between elements and text. The simple rule here is that you
should always have space there. There are exceptions of course, in particular if the text
is some sort of heading/graphic or your name is David Carson But as a general rule,
putting space between text and the rest of the world makes it infinitely more readable
and pleasant.
• White Space
First of all, white space doesn’t need to be white. The term simply refers to empty space
on a page (or negative space as it’s sometimes called). White space is used to give
balance, proportion and contrast to a page. A lot of white space tends to make things
seem more elegant and upmarket, so for example if you go to an expensive architect site,
you’ll almost always see a lot of space. If you want to learn to use whitespace
effectively, go through a magazine and look at how adverts are laid out. Ads for big
brands of watches and cars and the like tend to have a lot of empty space used as an
element of design.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

3. Navigat ion
One of the most frustrating experiences you can have on a Web site is being unable to
figure out where to go or where you are. I’d like to think that for most Web designers,
navigation is a concept we’ve managed to master, but I still find some pretty bad
examples out there. There are two aspects of navigation to keep in mind:
Navigation — Where can you go?
There are a few commonsense rules to remember here. Buttons to travel around a site
should be easy to find – towards the top of the page and easy to identify. They should
look like navigation buttons and be well described. The text of a button should be pretty
clear as to where it’s taking you. Aside from the common sense, it’s also important to
make navigation usable. For example, if you have a rollover sub-menu, ensuring a person
can get to the sub-menu items without losing the rollover is important. Similarly
changing the color or image on rollover is excellent feedback for a user.
Orientation — Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites, it
might be just a matter of a big heading or a ‘down’ version of the appropriate button in
your menu. In a larger site, you might make use of bread crumb trails, sub-headings and a
site map for the truly lost.

4. Design t o Build
Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even
now it’s still important to think about how you are going to build a site when you’re still
in Photoshop. Consider things like:
• Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard
HTML font? You might have a design that looks beautiful but is 1100px wide and will
result in a horizontal scroller for the majority of users. It’s important to know what can
and can’t be done, which is why I believe all Web designers should also build sites, at
least sometimes.
• What happens when a screen is resizes?
Do you need repeating backgrounds? How will they work? Is the design centered or left-
aligned?

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

• Are you doing anything that is technically difficult?

Even with CSS positioning, some things like vertical alignment are still a bit painful and
sometimes best avoided.
• Could small changes in your design greatly simplify how you build it?
Sometimes moving an object around in a design can make a big difference in how you
have to code your CSS later. In particular, when elements of a design cross over each
other, it adds a little complexity to the build. So if your design has, say three elements
and each element is completely separate from each other, it would be really easy to
build. On the other hand if all three overlap each other, it might still be easy, but will
probably be a bit more complicated. You should find a balance between what looks good
and small changes that can simplify your build.
• For large sites, particularly, can you simplify things?
There was a time when I used to make image buttons for my sites. So if there was a
download button, for example, I would make a little download image. In the last year or
so, I’ve switched to using CSS to make my buttons and have never looked back. Sure, it
means my buttons don’t always have the flexibility I might wish for, but the savings in
build time from not having to make dozens of little button images are huge.

5. Typogr aphy
Text is the most common element of design, so it’s not surprising that a lot
of thought has gone into it. It’s important to consider things like:
• Font Choices — Different types of fonts say different things about a design. Some look
modern, some look retro. Make sure you are using the right tool for the job.
• Font sizes —Years ago it was trendy to have really small text. Happily, these days
people have started to realize that text is meant to be read, not just looked at. Make sure
your text sizes are consistent, large enough to be read, and proportioned so that headings
and sub-headings stand out appropriately.
• Spacing — As discussed above, spacing between lines and away from other objects is
important to consider. You should also be thinking about spacing between letters,
though on the Web this is of less importance, as you don’t have that much control.
• Line Length — There is no hard and fast rule, but generally your lines of text shouldn’t
be too long. The longer they are, the harder they are to read. Small columns of text work
much better (think about how a newspaper lays out text).

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

• Color — One of my worst habits is making low-contrast text. It looks good but doesn’t
read so well, unfortunately. Still, I seem to do it with every Web site design I’ve ever
made, tsk tsk tsk.
• Paragraphing — Before I started designing, I loved to justify the text in everything. It
made for nice edges on either side of my paragraphs. Unfortunately, justified text tends
to create weird gaps between words where they have been auto-spaced. This isn’t nice
for your eye when reading, so stick to left-aligned unless you happen to have a magic
body of text that happens to space out perfectly.

6. Usabilit y
Web design ain’t just about pretty pictures. With so much information and interaction to
be effected on a Web site, it’s important that you, the designer, provide for it all. That
means making your Web site design usable.
We’ve already discussed some aspects of usability – navigation, precedence, and text.
Here are three more important ones:
• Adhering to Standards
There are certain things people expect, and not giving them causes confusion. For
example, if text has an underline, you expect it to be a link. Doing otherwise is not good
usability practice. Sure, you can break some conventions, but most of your Web site
should do exactly what people expect it to do!
• Think about what users will actually do
Prototyping is a common tool used in design to actually ‘try’ out a design. This is done
because often when you actually use a design, you notice little things that make a big
difference. ALA had an article a while back called Never Use a Warning When You
Mean Undo, which is an excellent example of a small interface design decision that can
make life suck for a user.
• Think about user tasks
When a user comes to your site what are they actually trying to do? List out the different
types of tasks people might do on a site, how they will achieve them, and how easy you
want to make it for them. This might mean having really common tasks on your
homepage (e.g. ‘start shopping’, ‘learn about what we do,’ etc.) or it might mean
ensuring something like having a search box always easily accessible. At the end of the

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

day, your Web design is a tool for people to use, and people don’t like using annoying
tools!

7. Alignm ent
Keeping things lined up is as important in Web design as it is in print design. That’s not
to say thateverything should be in a straight line, but rather that you should go through and
try to keep things consistently placed on a page. Aligning makes your design more
ordered and digestible, as well as making it seem more polished.
You may also wish to base your designs on a specific grid. I must admit I don’t do this
consciously – though obviously a site like Psdtuts+ does in fact have a very firm grid
structure. This year I’ve seen a few really good articles on grid design including
SmashingMagazine’s Designing with Grid-Based Approach & A List Apart’s Thinking
Outside The Grid. In fact, if you’re interested in grid design, you should definitely pay a
visit to the aptly named [Link] home to all things griddy.

8. Clarity ( Sharpness)
Keeping your design crisp and sharp is super important in Web design. And when it
comes to clarity, it’s all about the pixels.
In your CSS, everything will be pixel perfect so there’s nothing to worry about, but in
Photoshop it is not so. To achieve a sharp design you have to:
• Keep shape edges snapped to pixels. This might involve manually cleaning up shapes,
lines, and boxes if you’re creating them in Photoshop.

• Make sure any text is created using the appropriate anti-aliasing setting. I use ‘Sharp’ a
lot.

• Ensuring that contrast is high so that borders are clearly defined.

• Over-emphasizing borders just slightly to exaggerate the contrast.

9. Consist ency
Consistency means making everything match. Heading sizes, font choices, coloring,
button styles, spacing, design elements, illustration styles, photo choices, etc. Everything
should be themed to make your design coherent between pages and on the same page.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Keeping your design consistent is about being professional. Inconsistencies in a design

are like spelling mistakes in an essay. They just lower the perception of quality. Whatever
your design looks like, keeping it consistent will always bring it up a notch. Even if it’s a
bad design, at least make it a consistent, bad design.
The simplest way to maintain consistency is to make early decisions and stick to them.
With a really large site, however, things can change in the design process. When I
designed FlashDen, for example, the process took months, and by the end some of my
ideas for buttons and images had changed, so I had to go back and revise earlier pages to
match later ones exactly.
Having a good set of CSS stylesheets can also go a long way to making a consistent
design. Try to define core tags like <h1> and <p> in such a way as to make your defaults
match properly and avoid having to remember specific class names all the time.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

PROGRAMES OF UNIT - I
HTML Elem ent s
PROGRAM OUTPUT

H TM L H e a d i n g s This is heading 1
<html>
<body> This is heading 2
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> This is heading 3
<h3>This is heading 3</h3>
<h4>This is heading 4</h4> This is heading 4
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> This is heading 5
</body>
This is heading 6
</html>
H TM L Pa r a g r a p h s
<html>
<body> This is a paragraph.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p> This is a paragraph.
<p>This is a paragraph.</p>
</body>
This is a paragraph.
</html>
H TM L Li n k s

H TM L I m a g e s
<html>
<body>
<img src="[Link]" width="104"
height="142" />
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

HTML Text Form at t ing

<html> This text is bold
<body>
<p><b>This text is bold</b></p> This text is strong
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p> This text is big
<p><small>This text is small</small></p>
<p><tt>This text is teletype</tt></p> This text is italic
<p><em>This text is emphasized</em></p>
<p><code>Thisiscomputer output</code></p> This text is small
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p> This text is teletype
</body>
</html> This text is emphasized
This is computer output

This is subscript and superscript

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Definition term
H TM L " Co m p u t e r Ou t p u t " Ta g s Sample computer code text
<html> Keyboard text
<body> Variable
<dfn>Definition term</dfn><br /> Citation
<samp>Sample computer code
text</samp><br />
<kbd>Keyboard text</kbd><br />
<var>Variable</var><br />
<cite>Citation</cite>
</body>
</html>
Text in a pre element
is displayed in a fixed-width
H TM L < p r e > Ta g font, and it preserves
<html> both spaces and
<body> line breaks
<pre>
Text in a pre element The pre element is often used to display
is displayed in a fixed-width computer code:
font, and it preserves
both spaces and for i = 1 to 10
line breaks print i
</pre> next i
<p>The pre element is often used to display
computer code:</p>
<pre>for i = 1 to 10
print i
next i
</pre>
</body>
</html>

H TM L Ci t a t i o n s, Qu o t a t i o n s, a n d
D e f i n i t i o n Ta g s
<html>
<body> The WHO was founded in 1948.
The <abbr title="World Health Can I get this ASAP?
Organization">WHO</abbr> was founded in Written by [Link]
1948.<br> Email us
Can I get this <acronym title="as soon as
possible">ASAP</acronym>?<br>
Address: Box 564, Disneyland
<address> Phone: +12 34 56 78
Written by [Link]<br /> Here is some Hebrew text that should be
<a href="[Link] written from right-to-left!

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

us</a><br /> Here comes a long quotation:

Address: Box 564, Disneyland<br /> This is a long quotation. This is a long
Phone: +12 34 56 78 quotation. This is a long quotation. This is
</address>
a long quotation. This is a long quotation.
<bdo dir="rtl">Here is some Hebrew text that
should be written from right-to- Notice that a browser inserts white space
left!</bdo><br> before and after a blockquote element. It
Here comes a long quotation: also inserts margins for the blockquote
<blockquote> element.
This is a long quotation. This is a long
quotation. This is a long quotation. This is a
long quotation. This is a long quotation.
</blockquote>
Notice that a browser inserts white space
before and after a blockquote element. It also
inserts margins for the blockquote element.
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

HTML Tables
Program Output
<html>
<body>
<table border="1">
<tr> Month Savings
<th>Month</th> January $100
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L < ca p t i o n > Ta g
<html> Monthly savings
<body>
<table border="1"> Month Savings
<caption>Monthly savings</caption> January $100
<tr>
<th>Month</th> February $50
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
H TM L < co l g r o u p > Ta g
<html> ISBN Title Price
<body> 3476896 My first HTML $53
<table width="100%" border="1"> 2489604 My first CSS $47
<colgroup span="2" align="left"></colgroup>
<colgroup align="right"
style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L < co l > Ta g
<html>
<body>
<table width="100%" border="1">
<col align="left" /> ISBN Title Price
<col align="left" /> 3476896 My first HTML $53
<col align="right" /> 2489604 My first CSS $47
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
H TM L < t h e a d > Ta g
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red} Month Savings
</style>
</head>
<body> Sum $180
<table border="1">
<thead> January $100
<tr>
February $80
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L < t b o d y > Ta g
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head> Month Savings
<body>
<table border="1"> Sum $180
<thead>
<tr>
<th>Month</th> January $100
<th>Savings</th> February $80
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
H TM L < t f o o t > Ta g
<html> Month Savings
<head>
<style type="text/css"> Sum $180
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red} January $100
</style> February $80
</head>
<body>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

HTML Fram es:

Program Output
HTML < Horizont al fram eset > Tag
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>

H TM L < Ve r t i ca l f r a m e se t > Ta g
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
H TM L < f r a m e se t i n r o w s & co l u m s> Ta g
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm" />
<frameset cols="25%,75%">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</frameset>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H TM L < n o f r a m e s> Ta g
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes>
Sorry, your browser does not handle
frames!
</noframes>
</frameset>
</html>

H TM L < n a v i g a t i o n f r a m e se t > Ta g
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" />
<frame src="frame_a.htm"
name="showframe" />
</frameset>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

HTML Form s:
Program Output
TEXT FIELD
First name:
<html>
<body> Last name:
<form action="">
First name: <input type="text" Note: The form itself is not visible. Also
name="firstname" /><br /> note that the default width of a text field is
Last name: <input type="text" 20 characters.
name="lastname" />
</form>
<p><b>Note:</b> The form itself is not
visible. Also note that the default width of a
text field is 20 characters.</p>
</body>
</html>
PASSWORD FIELD
<html>
Username:
<body>
<form action=""> Password:
Username: <input type="text" name="user"
/><br /> Note: The characters in a password field are
Password: <input type="password" masked (shown as asterisks or circles).
name="password" />
</form>
<p><b>Note:</b> The characters in a
password field are masked (shown as
asterisks or circles).</p>
</body>
</html>
CHECKBOXES
<html>
I have a bike
<body>
<form action=""> I have a car
<input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle"
value="Car" /> I have a car
</form>
</body>
</html>
RADIO BUTTONS
<html>
Male
<body>
<form action=""> Female

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

<input type="radio" name="sex"

value="male" /> Male<br /> Note: When a user clicks on a radio-button,
<input type="radio" name="sex" it becomes checked, and all other radio-
value="female" /> Female buttons with equal name become unchecked.
</form>
<p><b>Note:</b> When a user clicks on a
radio-button, it becomes checked, and all
other radio-buttons with equal name
become unchecked.</p>
</body>
</html>
SIMPLE DROP-DOWN LIST
<html> Fiat
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Drop-down list with a pre-selected value
<html> Fiat
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat"
selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Textarea (a multi-line text input field)
<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

a textarea inside a textarea.

</p>

<textarea rows="10" cols="30">

The cat was playing in the garden.
</textarea>
</body>
</html>

Create a Button
<html>
<body>
<form action="">
<input type="button" value="Hello
world!">
</form>
</body>
</html>
Draw a border around form-data
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br
/>
E-mail: <input type="text" size="30" /><br
/>
Date of birth: <input type="text" size="10"
/>
</fieldset>
</form>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Send e-mail from a form

<html>
<body>
<h3>Send e-mail to
someone@[Link]:</h3>
<form
action="MAILTO:someone@[Link]
" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name"
value="your name" /><br />
E-mail:<br />
<input type="text" name="mail"
value="your email" /><br />
Comment:<br />
<input type="text" name="comment"
value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

KNOWLEDGE IS POWER
[Link] SALMAN
AVANTHI DEGREE COLLEGE
[Link]
[Link]
[Link] COMPUTER – III YEAR
2011-2012

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

[Link] – COM PUTER – I I I YEA R - N OTES

W EB PROGRA M M I N G

I N D EX – UN I T - I I
S.n o : Ti t l e Pa g e N o :

1 M e a n i n g Of D H TM L 02 - 02

2 Co m p a r i so n b e t w e e n H TM L a n d D H TM L 03 - 03

3 St a t i c a n d D y n a m i c 04 - 04

4 Pr o ce d u r a l a n d N o n Pr o ce d u r a l 05 - 05

5 Ca sca d i n g St y l e Sh e e t s ( CSS) 06 - 06

6 D o cu m e n t Ob j e ct M o d e l ( D OM ) 07 - 08
D i f f e r e n t Ty p e s o f Er r o r s, Ru n t i m e Er r o r s,
7 09 - 10
Sy st e m Er r o r s e t c.,
8 PROGRA M ES W I TH OUTPUT: 11 - 14
i D y n a m i c Ch a n g e s St y l e 11 - 11
ii Te x t 11 - 12
iii Cr e a t i n g Gr a p h i cs & M u l t i m e d i a Ef f e ct s 13 - 14

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

M e a n i n g Of D H TM L

Dynamic HTML (DHTML) is a name for a set of technologies that Web developers can
use to create Web pages that update themselves on the fly. In a Web page
implemented in DHTML, fonts, positions of elements, graphics might change as you
look at it in a browser. Dynamic HTML makes your Web documents more interactive.

Just as in "regular" HTML, when a user downloads a page written in DHTML, the
content is stored on the user's computer for viewing in the browser. In DHTML, this
content might also contain instructions for how changes should take place in the
presentation of the page. Dynamic HTML therefore happens on the client-side. It
doesn't involve reconnecting to the server for more information.

Dynamic HTML is used in conjunction with Cascading Style Sheets (CSS). Using
coordinate positioning available in CSS, a Web developer can place HTML elements in
specific locations on a page. The HTML elements positioned this way can move
according to a script (written in, for example, ActiveX using VBScript; or JavaScript) as
the user views the page. This positioning can occur not only on the X-Y (flat plane) of
the Web page, but in the Z direction, giving the illusion of depth or the stacking of one
element on top of another.

There are differences in how the major players--Microsoft and Netscape--implement

DHTML. Netscape had proposed a new proprietary element called LAYER to deal with
Z-positioning (the LAYER element doesn't seem like it will be used widely). Microsoft
agrees to the non-proprietary position of the W3C.

Dynamic HTML relates to the W3C's broader efforts to create an interface called
the Document Object Model (DOM). The aim of DOM is to allow programmers to
dynamically update the content, structure, and style of documents.

Comparison between HTML and DHTML

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Co m p a r i so n b e t w e e n H TM L a n d D H TM L
H TM L

HTML st ands for Hyper Text Markup Language,HTML is not a program m ing
language, it is a m arkup language, A m arkup language is a set of m arkup t ags
HTML uses m arkup t ags t o describe web pages

HTML docum ent s describe web pages, cont ain HTML t ags and plain t ext
HTML docum ent s are also called web pages

D H TM L

DHTML is t he art of com bining HTML, JavaScript , DOM, and CSS

DHTML is Not a Language

DHTML st ands for Dynam ic HTML.

DHTML is NOT a language or a web st andard.

DHTML is a TERM used t o describe t he t echnologies used t o m ake web pages

dynam ic and int eract ive.

To m ost people DHTML m eans t he com binat ion of HTML, JavaScript , DOM, and
CSS.

Dynam ic HTML is a collect ive t erm for a com binat ion of new Hypert ext Markup Language
( HTML) t ags and opt ions, t hat will let you creat e Web pages m ore anim at ed and m ore
responsive t o user int eract ion t han previous versions of HTML. Much of dynam ic HTML is
specified in HTML 4.0. Sim ple exam ples of dynam ic HTML pages would include ( 1) having
t he color of a t ext heading change when a user passes a m ouse over it or ( 2) allowing a
user t o " drag and drop" an im age t o anot her place on a Web page. Dynam ic HTML can allow
Web docum ent s t o look and act like deskt op applicat ions or m ult im edia product ions.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

St a t i c a n d D y n a m i c
DHTML allows scripting languages to change variables in a web page's definition language,
which in turn affects the look and function of otherwise "static" HTML page content, after the
page has been fully loaded and during the viewing process. Thus the dynamic characteristic of
DHTML is the way it functions while a page is viewed, not in its ability to generate a unique
page with each page load.

By contrast, a dynamic web page is a broader concept — any web page generated differently
for each user, load occurrence, or specific variable values. This includes pages created by
client-side scripting, and ones created by server-side scripting (such

as PHP, Perl, JSP or [Link]) where the web server generates content before sending it to
the client.

• The easiest difference is static HTML once rendered cannot be changed on the other
hand dynamic HTML can be changed.
• Static web pages cannot have database access but dynamic pages can be connected to
database.
• Using static HTML no interactions persist between user and server but dynamic HTML
has capability to interact with the user.
• Static HTML does not require server side coding but dynamic HTML requires server side
coding.
• No animation, games can be developed using the static HTML but on the other hand
dynamic HTML can perform this task.

Scripting Languages

Scripts that are executed when a document is loaded may be able to modify the document's
contents dynamically. The ability to do so depends on the scripting language itself (e.g., the
"[Link]" statement in the HTML object model supported by some vendors). JavaScript
is often used to create dynamic HTML documents. One of the more practical things JavaScript
does is allow you to add user events to static pages. For example, JavaScript allows you to
embed statements into a page which allow user response to certain common events such as
when you hover over a link.

The following example illustrates how scripts may modify a document dynamically. The
following script:

The above script will display t he following:

D a t e : Tue Jun 28 2011 00: 48: 35 GMT+ 0300 ( Arab St andard Tim e)

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Pr o ce d u r a l a n d N o n Pr o ce d u r a l

Procedural languages are used in the traditional programming that is based on

algorithms or a logical step-by-step process for solving a problem.A procedural
programming language provides a programmer a means to define precisely each step
in the performance of a task Non-procedural programming languages allow users and
professional programmers to specify the results they want without specifying how to
solve the problem. examples are FORTRAN,C++,COBOL,ALGOL etc

Pr o ce d u r a l l a n g u a g e s:

Most widely used are BASIC, COBOL, and C Uses series of English-like
words to write instructions Often called third-generation language (3GL) Programmer
assigns name to sequence of instructions that tells computer what to accomplish and
how to do it .

N o n Pr o ce d u r a l l a n g u a g e

Nonprocedural language used for generating reports, performing computations,

and updating files

Nonprocedural language—contains English-like instructions that retrieve data

Nonprocedural language that allows access to data in database

Popular 4GL is SQL, query language that allows users to manage data in relational
DBMS

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Ca sca d i n g St y l e Sh e e t s ( CSS)
Cascading Style Sheets (CSS) is a style sheet language used to describe
the presentation semantics (the look and formatting) of a document written in a markup
language. Its most common application is to style web pages written
in HTML and XHTML, but the language can also be applied to any kind
of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in

HTML or a similar markup language) from document presentation, including elements
such as the layout,colors, and fonts.[1] This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation characteristics,
enable multiple pages to share formatting, and reduce complexity and repetition in the
structural content (such as by allowing for tableless web design). CSS can also allow
the same markup page to be presented in different styles for different rendering
methods, such as on-screen, in print, by voice (when read out by a speech-based
browser or screen reader) and on Braille-based, tactile devices. While the author of a
document typically links that document to a CSS style sheet, readers can use a different
style sheet, perhaps one on their own computer, to override the one the author has
specified.

W h a t i s CSS

• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

St y l e s So l v e d a Bi g Pr o b l e m
• HTML was never int ended t o cont ain t ags for form at t ing a docum ent .
• HTML was int ended t o define t he cont ent of a docum ent , like:
• < h1> This is a heading< / h1>
• < p> This is a paragraph.< / p>
• When t ags like < font > , and color at t ribut es were added t o t he HTML 3.2
specificat ion, it st art ed a night m are for web developers. Developm ent of large web
sit es, where font s and color inform at ion were added t o every single page, becam e a
long and expensive process.
• To solve t his problem , t he World Wide Web Consort ium ( W3C) creat ed CSS.
• I n HTML 4.0, all form at t ing could be rem oved from t he HTML docum ent , and st ored
in a separat e CSS file.
• All browsers support CSS t oday.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

D o cu m e n t Ob j e ct M o d e l ( D OM )

The Document Object Model (DOM) is a cross-platform and language-independent convention

for representing and interacting with objects in HTML, XHTML and XML documents.[1] Aspects
of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of
the programming language in use. The public interface of a DOM is specified in its application
programming interface (API).

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. This is an overview of DOM-related materials here at W3C and around
the web.

"Dynamic HTML" is a term used by some vendors to describe the combination

of HTML, style sheets and scripts that allows documents to be animated. The
W3C has received several submissions from members companies on the way
in which the object model of HTML documents should be exposed to scripts.
These submissions do not propose any new HTML tags or style sheet
technology. The W3C DOM Activity is working hard to make sure
interoperable and scripting-language neutral solutions are agreed upon.

W h a t i s t h e D OM

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents like HTML and XML:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface
that allows programs and scripts to dynamically access and update the content,
structure, and style of a document."

The DOM is separated into 3 different parts / levels:

• Core DOM - standard model for any structured document

• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents

The DOM defines the objects and properties of all document elements, and
the methods (interface) to access them.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

W h a t i s t h e H TM L D OM

The HTML DOM is:

• A standard object model for HTML

• A standard programming interface for HTML
• Platform- and language-independent
• A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and
the methods(interface) to access them.

In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.

H TM L D OM EXA M PLE:
PROGRA M OUTPUT
<html> Hello World!
<body>
<script type="text/javascript">
[Link]("Hello World!");
</script>
</body>
</html>

W h a t i s t h e XM L D OM

The XML DOM defines the objects and properties of all XML elements, and
the methods (interface) to access them.

XM L D OM EXA M PLE:
PROGRA M OUTPUT
<html> Everyday Italian
<body>
<script type="text/javascript" src="[Link]"></script> Giada De
</head> Laurentiis
<body> 2005
<script type="text/javascript">
xmlDoc=loadXMLDoc("[Link]");
[Link]([Link]("title")[0].childNodes[0].nodeValue +
"<br />");
[Link]([Link]("author")[0].childNodes[0].nodeValue +
"<br />");
[Link]([Link]("year")[0].childNodes[0].nodeValue);
</script>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

D i f f e r e n t Ty p e s o f Er r o r s, Ru n t i m e Er r o r s, Sy st e m Er r o r s
e t c.,

When creating scripts and web applications, error handling is an important part. If your
code lacks error checking code, your program may look very unprofessional and you
may be open to security risks.

Errors can roughly be divided into four different types:

• Compile-time errors
• Logical errors
• Run-time errors
• Generated errors

A compile-time error, for example a syntax error, should not cause much trouble as it is
caught by the compiler.

A logical error is when a program does not behave as intended, but does not crash. An
example could be that nothing happens when a button in a graphical user interface is
clicked.

A run-time error is when a crash occurs. An example could be when an operator is

applied to arguments of the wrong type. The Erlang programming language has built-in
features for handling of run-time errors.

A run-time error can also be emulated by

calling erlang:error(Reason) orerlang:error(Reason, Args) (those appeared in Erlang
5.4/OTP-R10).

A run-time error is another name for an exception of class error.

A generated error is when the code itself calls exit/1 or throw/1. Note that emulated run-
time errors are not denoted as generated errors here.

Generated errors are exceptions of classes exit and throw.

When a run-time error or generated error occurs in Erlang, execution for the process
which evaluated the erroneous expression is stopped. This is referred to as a failure,
that execution or evaluation fails, or that the process fails, terminates or exits. Note
that a process may terminate/exit for other reasons than a failure.

A process that terminates will emit an exit signal with an exit reason that says
something about which error has occurred. Normally, some information about the error
will be printed to the terminal.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Ru n - t i m e e r r o r s
Run-time errors are generated when execution of a particular code statement or
function results in an error condition being set. Run-time errors caught by PowerBASIC
include Disk access violations (i.e., trying to write data to a full disk), out of bounds
array and pointer access, and Memory allocation failures. Array bounds and null-
pointer checking is only performed when #DEBUG ERROR ON is used.
Run-time errors can be trapped; that is, you can cause a designated error-handling
subroutine to get control should an error occur. Use the ON ERROR statement to
accomplish this. This routine can "judge" what to do next based on the type of error
that occurs. File-system errors (for example, disk full) in particular are prime
candidates for run-time error-handling routines. They are the only errors that a
thoroughly debugged program should have to deal with.
The ERROR statement (which simulates run-time errors) can be used to debug your
error-handling routines. It allows you to deliberately cause an error condition to be
flagged. Avoid using error numbers higher than 240, as they are reserved for use in
critical error situations which can never be trapped with ON ERROR. Run-time error
values are restricted to the range 1 through 255, and the compiler reserves codes 0
through 150, and 241 through 255 for predefined errors. Attempting to set an error
value (with the ERROR statement) outside of the valid range 1 to 255 will result in a
run-time Error 5 ("Illegal function call") instead. In addition to the predefined run-time
errors, you may also set your own customized run-time error codes in the range 151
through 240. These error codes may be useful to signal specific types of errors in your
own applications, ready to be handled by your error trapping code.
In the situation where an undocumented run-time error occurs, the chief suspect is
memory corruption. This can typically be cause by writing beyond an array boundary,
improper use of pointers, bad Inline Assembly code, etc.
Handling of Run-Time Errors in Erlang

Error Handling Within Processes

It is possible to prevent run-time errors and other exceptions from causing the process
to terminate by using catch or try, see the Expressions chapter about Catch and Try.

Error Handling Between Processes

Processes can monitor other processes and detect process terminations, see
theProcesses chapter.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

PROGRAMES OF UNIT - II
D y n a m i c Ch a n g e s St y l e
PROGRA M OUTPUT
Change Style of the Current DHTML Element
<html>
<body> Click Me!
<h1 onclick="[Link]='red'">Click Me!</h1>
</body>
</html> Click Me!
( Click on t ext t o change color)
Change Style of a Specific CSS Element
<html> Click Me!
<body>
<h1 id="h1"
onclick="[Link]('h1').[Link]=' Click Me!
red'">Click Me!</h1> ( Click on t ext t o change color)
</body>
</html>

Ch a n g i n g t e x t :

PROGRA M OUTPUT
<html>
<body>
<h1 id="header">Old Header</h1> New Header
<script type="text/javascript">
[Link]("header").innerHTML="N "Old Header" was changed to
ew Header"; "New Header"
</script>
<p>"Old Header" was changed to "New Header"</p>
</body>
</html>
<html> Mouse over this text!
<head>
<script type="text/javascript">
function nameon() How are you today?
{
[Link]('h2text').innerHTML="WE
LCOME!";
WELCOME!
}
function nameout() ( Click on t ext t o change t ext )
{

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

[Link]('h2text').innerHTML="Ho
w are you today?";
}
</script>
</head>
<body>
<h2 id="h2text" onmouseout="nameout()"
onmouseover="nameon()">
Mouse over this text!</h2>
</body>
</html>
<html>
<head>
<script type="text/javascript"> Blinking header
function blinking_header()
{
if (![Link]('blink').[Link]) Blinking header
{
[Link]('blink').[Link]= ( Click on t ext t o blink t ext in
"red"; red color)
}
if
([Link]('blink').[Link]=="red"
)
{
[Link]('blink').[Link]=
"black";
}
else
{
[Link]('blink').[Link]=
"red";
}
timer=setTimeout("blinking_header()",100);
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload="blinking_header()"
onunload="stoptimer()">
<h1 id="blink">Blinking header</h1>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Cr e a t i n g Gr a p h i cs a n d M u l t i m e d i a Ef f e ct s:

PROGRA M OUTPUT
<html> When you mouse over the
<head> image, a new image will
<script type="text/javascript"> appear.
img2=new Image();
[Link]="[Link]";
function changeImage()
{
[Link]('myImage').src=[Link];
}
</script>
</head>
<body> The new image appears
<p>When you mouse over the image, a new image instantly, because your browser
will appear.</p> has already loaded the image
<img id="myImage" onmouseover="changeImage()"
border="0" width="160" height="120"
src="[Link]">
<p>The new image appears instantly, because your
browser has already loaded the image.</p>
</body>
</html>
<html>
<head>
<script type="text/javascript"> Move the cursor over this
function cursor(event) page
{
[Link]('trail').[Link]="visible" (Move your cursor on output
; window to show cursor text)
[Link]('trail').[Link]="absolute
";
[Link]('trail').[Link]=[Link]
+10;
[Link]('trail').[Link]=[Link];
}
</script>
</head>
<body onmousemove="cursor(event)">
<h1>Move the cursor over this page</h1>
<span id="trail" style="visibility:hidden">Cursor
Text</span>
</body>

</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

<html> Shake t he window

<head>
<script>
function startEQ()
{
richter=5;
[Link](0,richter);
[Link](0,-richter);
[Link](richter,0);
[Link](-richter,0);
timer=setTimeout("startEQ()",10);
}
function stopEQ()
{
clearTimeout(timer);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="startEQ()" value="Start
an earthquake">
<br />
<br />
<input type="button" onclick="stopEQ()" value="Stop
the earthquake">
</form>
</body>
</html>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

[Link] – COMPUTER – III YEAR - NOTES

WEB PROGRAMMING

I N D EX – UN I T – I I I A N D I V

S.n o : Ti t l e Pa g e n o :

1. VB Scr i p t i n g I n t r o d u ct i o n 02 - 02

2. VB Scr i p t 02 - 02

3. Ba si cs o f VB Scr i p t 03 - 07

4. Ar r ay Han d lin g 08 - 10

5. Use r I n t e r a ct i o n i n VB Scr i p t 11 - 11

6. H a n d l i n g Ru n t i m e Er r o r s. 12 - 16

7. PROGRA M ES W I TH OUTPUT: 17 - 17

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

VB Scr i p t i n g I n t r o d u ct i o n
What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML / XHTML

If you want to study these subjects first, find the tutorials on our Home page.

What is VBScript?

• VBScript is a scripting language

• A scripting language is a lightweight programming language
• VBScript is a light version of Microsoft's programming language Visual Basic
• VBScript is only supported by Microsoft's browsers (Internet Explorer)

How Does it Work?

When a VBScript is inserted into an HTML document, Internet Explorer browser will
read the HTML and interpret the VBScript. The VBScript can be executed immediately,
or at a later event.

VBScript only works in Microsoft browsers (Internet Explorer).

VB Scr i p t
VBScript (Visual Basic Scripting Edition) is an Active Scripting language developed
byMicrosoft that is modelled on Visual Basic. It is designed as a “lightweight” language
with a fast interpreter for use in a wide variety of Microsoft environments. VBScript uses
the Component Object Model to access elements of the environment within which it is
running; for example, the FileSystemObject (FSO) is used to create, read, update and
delete files.

VBScript has been installed by default in every desktop release of Microsoft

Windows sinceWindows 98;[1] in Windows Server since Windows NT 4.0 Option
Pack;[2] and optionally withWindows CE (depending on the device it is installed on).

A VBScript script must be executed within a host environment, of which there are
several provided with Microsoft Windows, including: Windows Script
Host (WSH), Internet Explorer (IE), and Internet Information
Services (IIS).[3] Additionally, the VBScript hosting environment is embeddable in other
programs, through technologies such as the Microsoft Script Control ([Link]).

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Basics of VB Script
VBScript Data Types
What Are VBScript Data Types?
VBScript has only one data type called a Variant. A Variant is a special kind of data
type that can contain different kinds of information, depending on how it's used.
Because Variant is the only data type in VBScript, it's also the data type returned by all
functions in VBScript.

At its simplest, a Variant can contain either numeric or string information.

A Variant behaves as a number when you use it in a numeric context and as a string
when you use it in a string context. That is, if you're working with data that looks like
numbers, VBScript assumes that it is numbers and does the thing that is most
appropriate for numbers. Similarly, if you're working with data that can only be string
data, VBScript treats it as string data. Of course, you can always make numbers behave
as strings by enclosing them in quotation marks (" ").

The following table shows the subtypes of data that a Variant can contain.

Subtype Description
Empty Variant is uninitialized. Value is 0 for numeric variables or a
zero-length string ("") for string variables.
Null Variant intentionally contains no valid data.
Boolean Contains either True or False.
Byte Contains integer in the range 0 to 255.
Integer Contains integer in the range -32,768 to 32,767.
Currency -922,337,203,685,477.5808 to 922,337,203,685,477.5807.
Long Contains integer in the range -2,147,483,648 to 2,147,483,647.
Single Contains a single-precision, floating-point number in the range -
3.402823E38 to -1.401298E-45 for negative values; 1.401298E-
45 to 3.402823E38 for positive values.
Double Contains a double-precision, floating-point number in the range -
1.79769313486232E308 to -4.94065645841247E-324 for
negative values; 4.94065645841247E-324 to
1.79769313486232E308 for positive values.
Date Contains a number that represents a date between January 1,
(Time) 100 to December 31, 9999.
String Contains a variable-length string that can be up to approximately

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

2 billion characters in length.

Object Contains an object.
Error Contains an error number.

You can use conversion functions to convert data from one subtype to another. In
addition, the VarType function returns information about how your data is stored within
a Variant.

VBScript Variables
What Is a Variable?
A variable is a convenient placeholder that refers to a computer memory location where
you can store program information that may change during the time your script is
running. For example, you might create a variable called ClickCount to store the number
of times a user clicks an object on a particular Web page. Where the variable is stored
in computer memory is unimportant. What's important is that you only have to refer to a
variable by name to see its value or to change its value. In VBScript, variables are
always of one fundamental data type, Variant.

VBScript Constants
What Is a Constant?
A constant is a meaningful name that takes the place of a number or string and never
changes. VBScript defines a number of intrinsic constants. You can get information
about these intrinsic constants from the VBScript Language Reference.

VBScript Operators
Operator Precedence
When several operations occur in an expression, each part is evaluated and resolved in
a predetermined order called operator precedence. You can use parentheses to
override the order of precedence and force some parts of an expression to be evaluated
before others. Operations within parentheses are always performed before those
outside. Within parentheses, however, standard operator precedence is maintained.

When expressions contain operators from more than one category, arithmetic operators
are evaluated first, comparison operators are evaluated next, and logical operators are
evaluated last. Comparison operators all have equal precedence; that is, they are
evaluated in the left-to-right order in which they appear. Arithmetic and logical operators
are evaluated in the following order of precedence.

Arithmetic Comparison Logical

Description Symbol Description Symbol Description Symbol

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Exponentiation ^ Equality = Logical Not

negation
Unary negation - Inequality <> Logical And
conjunction
Multiplication * Less than < Logical Or
disjunction
Division / Greater than > Logical Xor
exclusion
Integer division \ Less than or <= Logical Eqv
equal to equivalence
Modulus Mod Greater than >= Logical Imp
arithmetic or equal to implication
Addition + Object Is
equivalence
Subtraction -
String &
concatenation

When multiplication and division occur together in an expression, each operation is

evaluated as it occurs from left to right. Likewise, when addition and subtraction occur
together in an expression, each operation is evaluated in order of appearance from left
to right.

The string concatenation (&) operator is not an arithmetic operator, but in precedence it
does fall after all arithmetic operators and before all comparison operators.
The Is operator is an object reference comparison operator. It does not compare objects
or their values; it checks only to determine if two object references refer to the same
object.

Using Conditional Statements

Controlling Program Execution
You can control the flow of your script with conditional statements and looping
statements. Using conditional statements, you can write VBScript code that makes
decisions and repeats actions. The following conditional statements are available in
VBScript:

• If...Then...Else statement
• Select Case statement

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Looping Through Code

Using Loops to Repeat Code
Looping allows you to run a group of statements repeatedly. Some loops repeat
statements until a condition is False; others repeat statements until a condition is True.
There are also loops that repeat statements a specific number of times.

The following looping statements are available in VBScript:

• Do...Loop: Loops while or until a condition is True.

• While...Wend: Loops while a condition is True.
• For...Next: Uses a counter to run statements a specified number of times.
• For Each...Next: Repeats a group of statements for each item in a collection or
each element of an array.

VBScript Procedures
inds of Procedures
In VBScript there are two kinds of procedures; the Sub procedure and
the Function procedure.
Sub Procedures
A Sub procedure is a series of VBScript statements, enclosed by Sub and End
Sub statements, that perform actions but don't return a value. A Sub procedure can
take arguments (constants, variables, or expressions that are passed by a calling
procedure). If a Subprocedure has no arguments, its Sub statement must include an
empty set of parentheses ().

The following Sub procedure uses two intrinsic, or built-in, VBScript

functions, MsgBox and InputBox, to prompt a user for some information. It then
displays the results of a calculation based on that information. The calculation is
performed in a Function procedure created using VBScript. The Function procedure is
shown after the following discussion.

Sub ConvertTemp()
temp = InputBox("Please enter the temperature in degrees F.", 1)
MsgBox "The temperature is " & Celsius(temp) & " degrees C."
End Sub
Function Procedures
A Function procedure is a series of VBScript statements enclosed by
the Function and End Function statements. A Functionprocedure is similar to
a Sub procedure, but can also return a value. A Function procedure can take
arguments (constants, variables, or expressions that are passed to it by a calling
procedure). If a Function procedure has no arguments, its Function statement must

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

include an empty set of parentheses. A Function returns a value by assigning a value

to its name in one or more statements of the procedure. The return type of
a Function is always a Variant.

In the following example, the Celsius function calculates degrees Celsius from degrees
Fahrenheit. When the function is called from the ConvertTemp Sub procedure, a
variable containing the argument value is passed to the function. The result of the
calculation is returned to the calling procedure and displayed in a message box.

Sub ConvertTemp()
temp = InputBox("Please enter the temperature in degrees F.", 1)
MsgBox "The temperature is " & Celsius(temp) & " degrees C."
End Sub

Function Celsius(fDegrees)
Celsius = (fDegrees - 32) * 5 / 9
End Function

VBScript Coding Conventions

What Are Coding Conventions?
Coding conventions are suggestions that may help you write code using Microsoft
Visual Basic Scripting Edition. Coding conventions can include the following:

• Naming conventions for objects, variables, and procedures

• Commenting conventions
• Text formatting and indenting guidelines

The main reason for using a consistent set of coding conventions is to standardize the
structure and coding style of a script or set of scripts so that you and others can easily
read and understand the code. Using good coding conventions results in precise,
readable, and unambiguous source code that is consistent with other language
conventions and as intuitive as possible.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Ar r ay Han d lin g

Arrays are a very important concept in VBScript as well as many other languages. An
array is a special type of variable which stores a set of related values.

Imagine that you would like to store a list of all the gifts you would like to receive on
your wedding day. You want to make a web page that displays a list of all the items. If
you were to create a variable for each gift then you might end up having 100 or more
variables for gifts alone! However, there is a better solution to this engineering problem.

Instead, you could utilize arrays, which allow you to store many variables(elements) into
a super variable (array). Each present would have a position in the array, starting from
position 0 and ending with the last gift

vbscript creating an array

We are going to dumb down the example a little bit so that this lesson doesn't get too
boring. Let's imagine that we have 4 gifts we want to store in our array. First we need to
create an array to store our presents and tell VBScript how big we want our array to be.

As we mentioned, an array's beginning position is 0, so if we specify an array of size

3 that means we can store 4 presents (positions 0, 1, 2 and 3)! This is often confusing
for first time VBScript programmers. Below is the correct code to create a VBScript
array of size 3.

VBScript Code:
<script type="text/vbscript">
Dim myArray(3)
</script>

vbscript arrays: storing data

Now that we have created our array we can begin storing information into it. The way
to do this is similar to setting the value of a variable, but because an array can hold
many values you have to specify the position at which you want the value to be saved.

We have four presents that we need to store and we make sure that we don't store
two presents in the same position!

VBScript Code:

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

myArray(2) = "New Computer"

myArray(3) = "Talking Bass"
</script>

vbscript arrays: accessing data

We have all the data stored into the array that we need, now we need to figure out
how to get it back out so we can print it to the web page! This step is nearly identical to
the storing phase because you have to specify the position of the element you wish to
display. For example, if we wanted to print out the value of the present at position 0 in
our array you would use the following code:

VBScript Code:

Display:
vbscript arrays: accessing all data

The above example was a good introduction to accessing elements in an array, but it
isn't that helpful for printout out all items that might be in an array. If we had 300 items
in our array, accessing them one by one would be most time consuming to program.

Below is a piece of code that will automatically go through every element in the array
and print it out. The special programming structure this example uses is a For Loop that
we will be discussing in greater detail later on in this tutorial.

VBScript Code:

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Next
</script>

Modifying an arrays elements

To modify an arrays elements, refer to the array with the appropriate index number in
brackets of the value you want to change and set it to the new value.

Example:
<script type="text/vbscript"> Dim colors(4) colors(0) = "green" colors(1) = "blue"
colors(2) = "gray" colors(3) = "orange" [Link]("The old value of colors(1): " &
colors(1)) [Link]("<br />The old value of colors(3): " & colors(3)) 'change the
value of colors(1) and colors(3) colors(1) = "teal" colors(3) = "violet"
[Link]("<br />The new value of colors(1): " & colors(1)) [Link]("<br
/>The new value of colors(3): " & colors(3)) </script>

Output:
The old value of colors(1): blue The old value of colors(3): orange The new value of
colors(1): teal The new value of colors(3): violet

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Use r I n t e r a ct i o n i n VB Scr i p t

The language of VBScript is modelled on Visual Basic, and therefore can be reviewed
using similar categories: procedures, control structures, constants,
variables, user interaction, array handling, date/time functions, error handling,
mathematical functions, objects, regular expressions, string manipulation, and so on.[14]

The following are some key points of introduction to the VBScript language.

A “procedure” is the main construct in VBScript for separating code into smaller
modules. VBScript distinguishes between a function, which can return a result in an
assignment statement, and a subroutine, which cannot. Parameters are positional, and
can be passed by value or by reference.

Control structures include the usual iterative and conditional Do Loops, If-Then-Else
statements, and Case statements, with some more complex variants, such as ElseIf
and nested control structures.

As a memory aid in coding, and certainly for readability, there are a large number of
constants, such as True and False for logical values, vbOKCancel and vbYesNo for
MsgBox codes, vbBlack and vbYellow for color values, vbCR for the carriage return
character, and many others.

Variables by default have “Variant” type, but it is possible (and sometimes necessary) to
force a particular type (integer, date, etc.) using conversion functions (Cint, CDate, etc.)
User interaction is provided through the functions MsgBox and InputBox which provide
a simple dialogue box format for messages and input. Both functions display prompting
messages, with the former returning a standard response, and the latter returning
one user-supplied text or numeric value. For more elaborate GUI interaction with
controls, VBScript can be used in combination with HTML, for example, in anHTML
Application. Event-driven forms are not supported as in Visual Basic or Visual Basic for
Applications.

Names are not case-sensitive; therefore, for example, MsgBox and msgbox, or
FileSystemObject and filesystemobject, are treated as the same name. However, as
usual, it is considered a best practice of VBScript style to be consistent and to
capitalize judiciously.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

H a n d l i n g Ru n t i m e Er r o r s

Welcome to Sesame Script, the column for beginning script writers. The goal of this
column is to teach the very basics of Windows scripting for system administration
automation. We’ll provide you with the information you’ll need to begin reading and
understanding scripts and to start modifying those scripts to suit your own needs. If
there’s anything in particular about scripting you’re finding confusing, let us know;
you’re probably not alone.
What’s the Problem?
Troubleshooting vs. Error Handling
Error Types
Don’t Stop Now
Not Complete Denial
Be Explicit
That’s It?

W h a t ’ s t h e Pr o b l e m ?
Have you ever worked on a team where one person always seems to be causing
problems? If anything ever goes wrong, it can typically be linked to that person in some
way. Sometimes it might not even be this person’s fault (not entirely, anyway), but this
particular person just always turns out to be the scapegoat. Believe it or not, the
Scripting Guys have someone like that, too (but Dean doesn’t like to talk about it, so we
won’t mention that it’s him). Things happen, mistakes are made, and there’s always one
person to point a finger at.
The problem with writing scripts is that it’s hard to blame anyone else when your script
doesn’t work the way you want it to. (Well, you could blame Dean; he may very well
have had something to do with it.) But, most of the time, you wrote the script, or
modified someone else’s script, and now it just doesn’t work. What do you do now? You
could spend several days contemplating the unfairness of the world and cursing the day
you ever heard of scripting, or you could simply do some troubleshooting.

Tr o u b l e sh o o t i n g v s. Er r o r H a n d l i n g
We’re going to talk about troubleshooting and error handling, so we should probably
start by explaining what the difference is between the two. Simply put, troubleshooting is
figuring out what went wrong; error handling is knowing what could go wrong and
dealing with it ahead of time. We’re not really going to distinguish between the two in
this discussion, we’re just going to get you started with a couple of simple techniques
you can use to get out of trouble and stay out.

Er r o r Ty p e s
There are three types of errors: syntax, runtime, and logic.
Sy n t a x Er r o r s
Syntax errors are usually the result of an incorrectly used keyword. Here are a couple of
examples:

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

intNumber = 2
If intNumber = 2 Then
[Link] intNumber
Edn If

intNumber = 2
If intNumber = 2
[Link] intNumber
End If
In the first example, take a look at the closing End If statement. End is spelled Edn.
VBScript doesn’t know what Edn means, so it thinks the If statement doesn’t have an
End If and returns an error. In the second example we left the Then keyword off of the If
Then statement. Again, VBScript is expecting a Then but doesn’t see one, so it will
return an error.
VBScript catches syntax errors before it tries to run the script and displays an error
message if any of these errors are found. When you type cscript [Link] at the
command prompt, VBScript will look at the script and determine whether all the If’s have
matching Then’s and that all other syntax issues are okay. Only if they are will it try to
run the script.
Tip: Because syntax errors are checked before a script runs, a safe way to
check for syntax errors is to [Link] as the first line in your script,
like this:

[Link]
intNumber = 2
If intNumber = 2
[Link] intNumber
End If
You might have a script that is designed to delete files or change properties
in Active Directory. Maybe you’re still working on your script but you want to
check and make sure your syntax is correct before you actually delete or
change anything. Adding [Link] to the beginning of your script is an
easy way to do this. When you try to run the script, it will be checked for
syntax errors. If errors are found, they’ll be output to the screen and the script
will never run. If there aren’t any syntax errors the script will run, but the very
first line ends the script and no other lines are executed. You’ve just safely

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

tested the syntax of your script without actually running any of the script code.

Ru n t i m e Er r o r s
Once you get through the syntax checks with no errors VBScript tries to run the script.
At this point you might still get an error, but this time it’s a runtime error, meaning the
error occurs when the script is running. An example of a runtime error would be trying to
connect to a computer that doesn’t exist. VBScript has no way of knowing this ahead of
time; the script needs to run and actually attempt to connect to the computer before it
finds out there is no computer by that name (or it’s offline, or whatever). At that point
you’ll receive an error message letting you know something went wrong.
Lo g i c Er r o r s
Logic errors are usually the most difficult errors to find. With a logic error, VBScript
decides the script looks okay, the script runs and completes with no problems, but you
don’t get the results you expect. Here’s an example of how that could happen:

intNumber = 2
If intNumber > 0 Then
[Link] "Greater than zero"
ElseIf intNumber > 1 Then
[Link] "Greater than one"
ElseIf intNumber > 2 Then
[Link] "Greater than two"
End If
In this example, we’ve set intNumber equal to 2. When you go into the If statement, you
might expect to receive the message “Greater than one.” And when you look at the
choices that might make sense: we check to see if intNumber is greater than 0, which it
is. Then we check to see if it’s greater than 1, and yes, 2 is greater than 1. Finally we
check to see if it’s greater than 2, which it’s not. So our message should be “Greater
than one,” right? Nope. The way an If-ElseIf statement works is that the first If statement
will be checked: is intNumber greater than 0? If it is, the message “Greater than zero”
will be echoed to the screen, and you’ll go straight to the End If statement. The ElseIf
statements will never happen.
As you can see, there’s nothing actually wrong with this script, it does exactly what it’s
supposed to; it just doesn’t do exactly what you want it to. You have an error in the logic
of your script, or the way the script works.

D o n ’ t St o p N o w
Have you ever noticed how good people can be at denial? “I’m not going bald, I just
have a high forehead.” “No, that wasn’t my child kicking the back of your seat and

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

talking all through the movie.” “There are no errors in my script, there’s something
wrong with the computer.”

N o t Co m p l e t e D e n i a l
You might not want to completely ignore errors. In the preceding script, you might not
want the script to come to a crashing halt when it gets to an invalid date, but you also
might not want to just skip right by it. Maybe you want to know that there is invalid
information in your data set. But if you put On Error Resume Next in your script and
ignore errors, how do you know they happened? Simple: just ask.
VBScript provides an object called the Err object. When an error occurs in a VBScript
method that method returns an error number that you can access through the Number
property of the Err object. So if the Number property is anything except zero, an error
has occurred.

Be Ex p l i ci t
This is an area we discussed in a previous article, but we can’t discuss error handling
without mentioning it: theOption Explicit statement. Let’s go back to our earlier
example:

intNumber = 2
If intNumber = 2 Then
[Link] intNubmer
End If
When you run this script you’re probably expecting it to echo back 2. What it will do
instead is echo nothing. If you look closely, you can see that in the [Link]
statement, our variable is spelled incorrectly, inNubmer rather than intNumber. This
doesn’t produce an error. VBScript simply thinks you’re using a different variable, which
you never actually gave a value so it defaulted to nothing. This type of error can be
difficult to spot (even removing an On Error Resume Next statement won’t help you)
because there’s no error for VBScript to report. One way to guard against this type of
error is to include the Option Explicit statement:

Option Explicit

intNumber = 2
If intNumber = 2 Then
[Link] intNubmer
End If
Now when you run the script you’ll receive an error message:

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

C:\Scripts\[Link](3, 1) Microsoft VBScript runtime error: Variable is undefined:

'intNumber'
Wait a minute, intNumber isn’t the problem, the variable that isn’t spelled correctly is
intNubmer. Why am I getting an error on the variable I want? Because Option Explicit
tells VBScript to display an error for any variable that hasn’t been explicitly declared (get
it, explicitly, Option Explicit?) with a Dim statement. That means every single variable
you use in your script, including object references, must be declared before you can use
it, like this:
Option Explicit

Dim intNumber

intNumber = 2
If intNumber = 2 Then
[Link] intNubmer
End If
Now when you run your script you get an error message that will actually help you:

C:\Scripts\[Link](7, 5) Microsoft VBScript runtime error: Variable is undefined:

'intNubmer'
As with all good remedies there are side-effects to Option Explicit. As we already saw,
we might get errors on variables that are perfectly fine because we forgot to declare
them with a Dim statement. If you have a lot of variables in your script this can get very
cumbersome. Some people go too far the other direction and leave in Dim statements
for variables they don’t even use. This, too can clutter up your script and make it hard to
read, so try to clean up after yourself. There’s nothing like a nice, neat script to get you
through the day.

Th a t ’ s I t ?
There is much more to error handling than the little bit we’ve shown you here in this
article. But we’re tired of working now, so this is all you get.
(Oops, our manager just walked by and saw that.) No, really, just kidding, we never get
tired of working. And we’dnever leave our devoted readers without making sure we’d
provided as much information as we possibly could. But what we have done here is give
you a quick overview of error-handling, and shown you just a few types of errors you
might encounter. For more in-depth information and some intermediate-to-advanced
error-handling techniques, take a look atTo Err is VBScript. And of course, there’s
always the handy Windows 2000 Scripting Guide, loaded with information.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

PROGRAMES OF UNIT - II
Program Output
<html>
<body>
This is my first VBScript!
<script type=”text/vbscript”>
[Link]("This is my first VBScript!")
</script>
</body>
</html>
<html>
<body>
Hello World!
<script type=”text/vbscript”>
[Link]("Hello World!")
</script>
</body>
</html>
VBScript Array
<html> 20
<body>
<script type=”text/vbscript”>
a=Array(5,10,15,20)
[Link](a(3))
</script>
</body>
</html>
<html>
<body>
5
<script type=”text/vbscript”>
a=Array(5,10,15,20)
[Link](a(0))
</script>
</body>

</html>
<html>
<body>
5
<script type=”text/vbscript”>
10
a=Array(5,10,15,20)
15
for each x in a
20
[Link](x&”<br/>
next
</script>
</body>
</html>
KNOWLEDGE IS POWER

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

[Link] – COMPUTER – III YEAR – NOTES

WEB PROGRAMMING

I N D EX – UN I T - V

S.n o : Ti t l e Pa g e n o :

Ex t e n si b l e M a r k u p La n g u a g e ( XM L) –
1. 02 - 04
I n t r o d u ct i o n

2. Cr e a t i n g XM L D o cu m e n t s 05 - 05

3. XM L St y l e Sh e e t s 06 - 07

Co m p a r i so n o f XM L w i t h o t h e r W e b
4. 08 - 09
D e si g n i n g La n g u a g e s

5. XM L D o cu m e n t Ob j e ct M o d e l 10 - 11

6. XM L Qu e r y La n g u a g e 12 - 14

7. XM L D TD 15 - 17

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

Co m p a r i so n o f XM L w i t h o t h e r W e b D e si g n i n g La n g u a g e s

Co m p a r i n g XM L w i t h H TM L

1. XML is designed to carry the data while html is to display the data and focus on how the
data looks.
2. XML does not do anything but it is used to structure the data, store the data and
transport the data while HTML is used to display the data only.
3. XML is cross platform, hardware and software independent tool to carry data from one
source to another destination.
4. XML is self descriptive. The DTD or schema describes what and how to use tags and
elements in an xml document.
5. XML does not have predefined tags while HTML has. XML lets you invent your own tags
while html gives you predefined tags and you have to use them only.
6. XML is extensible as you can add your own tags to extend the xml data.
7. XML is a complement to HTML not the replacement. Most likely use of xml is to transfer
the data between incompatible systems as xml is cross platform. XML has now
established a strong foundation in the world of web development.
8. XML can separate the data from html. While working on html, instead of storing data in
html you can store the data in a separate xml file to make the html code cleaner and
easier. Now you can concentrate on working in html rather than storing data. It also
eliminates the need to change in html when xml data is changed.
9. XML tags are case sensitive while html tags are not.
10. Attribute values must always be quoted in xml while its not the case with html.
11. XML elements must be properly nested while html is not so sensitive.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

XM L H TM L CSS
A set of rules for encoding The predominant markup A style sheet
documents in machine- languagefor web pages. HTML is language used to describe
readable form. The design the basic building-blocks of the presentation
goals of XML emphasize webpages. The purpose of a web semantics (the look and
simplicity, generality, and browser is to read HTML formatting) of a document
usability over the Internet.[6] It documents and compose them written in a markup
is a textual data format with into visual or audible web pages. language. Its most
strong support via Unicode for The browser does not display the common application is to
the languages of the world. HTML tags, but uses the tags to style web pages written
Although the design of XML interpret the content of the page. in HTML and XHTML, but
focuses on documents, it is HTML elements form the building the language can also be
widely used for the blocks of all websites. HTML applied to any kind
representation of arbitrarydata allows images and objects to be of XML document,
structures, for example in web embedded and can be used to including plain
services. create interactive forms. It XML, SVG and XUL.
provides a means to
create structured documents by
denoting structural semantics for
text such as headings,
paragraphs, lists, links, quotes
and other items.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

XM L D o cu m e n t Ty p e D e f i n i t i o n ( D TD ) :
The oldest schema language for XML is the Document Type Definition (DTD), inherited
from SGML.

DTDs have the following benefits:

DTD support is ubiquitous due to its inclusion in the XML 1.0 standard.
DTDs are terse compared to element-based schema languages and consequently
present more information in a single screen.
DTDs allow the declaration of standard public entity sets for publishing characters.
DTDs define a document type rather than the types used by a namespace, thus
grouping all constraints for a document in a single collection.
DTDs have the following limitations:

They have no explicit support for newer features of XML, most

importantly namespaces.
They lack expressiveness. XML DTDs are simpler than SGML DTDs and there are
certain structures that cannot be expressed with regular grammars. DTDs only
support rudimentary datatypes.
They lack readability. DTD designers typically make heavy use of parameter entities
(which behave essentially as textual macros), which make it easier to define
complex grammars, but at the expense of clarity.
They use a syntax based on regular expression syntax, inherited from SGML, to
describe the schema. Typical XML APIs such as SAX do not attempt to offer
applications a structured representation of the syntax, so it is less accessible to
programmers than an element-based syntax may be.
Two peculiar features that distinguish DTDs from other schema types are the syntactic
support for embedding a DTD within XML documents and for defining entities, which are
arbitrary fragments of text and/or markup that the XML processor inserts in the DTD
itself and in the XML document wherever they are referenced, like character escapes.

DTD technology is still used in many applications because of its ubiquity.

The purpose of a DTD is to define the legal building blocks of an XML document. It
defines the document structure with a list of legal elements. A DTD can be declared
inline in your XML document, or as an external reference.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

W h y u se a D TD ?
XML provides an application independent way of sharing data. With a DTD, independent groups of people can agree
to use a common DTD for interchanging data. Your application can use a standard DTD to verify that data that you
receive from the outside world is valid. You can also use a DTD to verify your own data.

Va l i d XM L D o cu m e n t s
A " Valid" XML docum ent is a " Well Form ed" XML docum ent , which also conform s t o t he rules of a
Docum ent Type Definit ion ( DTD) :

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

<!DOCTYPE note SYSTEM "[Link]">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declarat ion in t he exam ple above, is a reference t o an ext ernal DTD file. The cont ent of
t he file is shown in t he paragraph below.

XM L D TD
The purpose of a DTD is t o define t he st ruct ure of an XML docum ent . I t defines t he st ruct ure wit h a
list of legal elem ent s:

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

I f you want t o st udy DTD, you will find our DTD t ut orial on our hom epage.

The purpose of a DTD ( Docum ent Type Definit ion) is t o define t he legal building
blocks of an XML docum ent .

A DTD defines t he docum ent st ruct ure wit h a list of legal elem ent s and
at t ribut es.

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

lOMoARcPSD|43299490

DTD Newspaper Exam ple

<!DOCTYPE NEWSPAPER [

<!ELEMENT NEWSPAPER (ARTICLE+)>

<!ELEMENT ARTICLE (HEADLINE,BYLINE,LEAD,BODY,NOTES)>
<!ELEMENT HEADLINE (#PCDATA)>
<!ELEMENT BYLINE (#PCDATA)>
<!ELEMENT LEAD (#PCDATA)>
<!ELEMENT BODY (#PCDATA)>
<!ELEMENT NOTES (#PCDATA)>

<!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>

<!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>
<!ATTLIST ARTICLE DATE CDATA #IMPLIED>
<!ATTLIST ARTICLE EDITION CDATA #IMPLIED>

[Link]

Downloaded by Freefire Shortvideos (brijeshvishnu7036@[Link])

Web Programming Notes for B.Com Students
No ratings yet
Web Programming Notes for B.Com Students
82 pages
Web Programming Notes for B.Com Students
80% (10)
Web Programming Notes for B.Com Students
45 pages
Web Programming Basics and HTML Elements
100% (2)
Web Programming Basics and HTML Elements
82 pages
Web Programming Notes for B.Com Students
No ratings yet
Web Programming Notes for B.Com Students
82 pages
Understanding HTML Markup Language
No ratings yet
Understanding HTML Markup Language
6 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
10 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
4 pages
Understanding HTML Basics and Elements
No ratings yet
Understanding HTML Basics and Elements
9 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
18 pages
HTML Basics from Pythonista Planet
No ratings yet
HTML Basics from Pythonista Planet
16 pages
HTML
No ratings yet
HTML
43 pages
Introduction to HTML Basics
100% (1)
Introduction to HTML Basics
5 pages
UNIT1
No ratings yet
UNIT1
19 pages
HTML and CSS Web Development Guide
No ratings yet
HTML and CSS Web Development Guide
9 pages
HTML and CSS Notes
No ratings yet
HTML and CSS Notes
33 pages
HTML Note
No ratings yet
HTML Note
10 pages
Introduction to HTML for Web Design
No ratings yet
Introduction to HTML for Web Design
28 pages
Writing Web Pages with HTML Basics
No ratings yet
Writing Web Pages with HTML Basics
98 pages
HTML
No ratings yet
HTML
44 pages
Module 1 WT
No ratings yet
Module 1 WT
17 pages
Understanding HTML and Web Structure
No ratings yet
Understanding HTML and Web Structure
102 pages
Introduction to the World Wide Web
No ratings yet
Introduction to the World Wide Web
56 pages
HTML Basics: Tags, Elements, and Formats
No ratings yet
HTML Basics: Tags, Elements, and Formats
26 pages
Essential HTML Tags Explained
No ratings yet
Essential HTML Tags Explained
10 pages
Web Programming
No ratings yet
Web Programming
18 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
40 pages
Web Technology Overview and HTML Basics
No ratings yet
Web Technology Overview and HTML Basics
13 pages
HTML and CSS Basics Guide
No ratings yet
HTML and CSS Basics Guide
103 pages
Understanding HTML and Web Design Basics
No ratings yet
Understanding HTML and Web Design Basics
126 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
36 pages
Web Technologies: HTML Overview
No ratings yet
Web Technologies: HTML Overview
45 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
42 pages
Lecture 2
No ratings yet
Lecture 2
53 pages
Internet Based Programming - 3
No ratings yet
Internet Based Programming - 3
24 pages
HTML Unit Ii
No ratings yet
HTML Unit Ii
6 pages
Web Designing: HTML Basics and Tools
No ratings yet
Web Designing: HTML Basics and Tools
13 pages
Unit-I WEB Design: Origins and Evolution of HTML
No ratings yet
Unit-I WEB Design: Origins and Evolution of HTML
49 pages
Insert Exclamation After H2 Elements
No ratings yet
Insert Exclamation After H2 Elements
27 pages
HTML and CSS Basics for Web Development
No ratings yet
HTML and CSS Basics for Web Development
85 pages
HTML Basics: Structure & Elements Guide
No ratings yet
HTML Basics: Structure & Elements Guide
113 pages
Fast-Loading Graphics with Text/Audio
No ratings yet
Fast-Loading Graphics with Text/Audio
79 pages
Hyper Text Markup Language (HTML) : Unit 5
No ratings yet
Hyper Text Markup Language (HTML) : Unit 5
12 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
10 pages
HTML Basics for Web Design
No ratings yet
HTML Basics for Web Design
14 pages
Introduction to Web Technologies Guide
No ratings yet
Introduction to Web Technologies Guide
134 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
33 pages
Understanding HTML Basics and Syntax
No ratings yet
Understanding HTML Basics and Syntax
7 pages
Overview of HTML Concepts and Elements
No ratings yet
Overview of HTML Concepts and Elements
25 pages
HTML Web Page Design Basics
No ratings yet
HTML Web Page Design Basics
42 pages
Web Development Fundamentals: HTML & CSS
No ratings yet
Web Development Fundamentals: HTML & CSS
304 pages
HTML Headings and Paragraphs Explained
No ratings yet
HTML Headings and Paragraphs Explained
8 pages
HTML Basics and Lab Exercises
No ratings yet
HTML Basics and Lab Exercises
23 pages
HTML Editor Experiment Assignment
No ratings yet
HTML Editor Experiment Assignment
75 pages
HTML Basics: Structure and Syntax Guide
No ratings yet
HTML Basics: Structure and Syntax Guide
58 pages
Web Design Basics: HTML, CSS, JavaScript
No ratings yet
Web Design Basics: HTML, CSS, JavaScript
17 pages
Web Technologies and HTML Overview
No ratings yet
Web Technologies and HTML Overview
147 pages
Client-Side Scripting Basics: HTML & CSS
No ratings yet
Client-Side Scripting Basics: HTML & CSS
85 pages
HTML Basics for Web Design
No ratings yet
HTML Basics for Web Design
55 pages
T.kuwahara Intro To Hari (Japanese Acupuncture)
100% (2)
T.kuwahara Intro To Hari (Japanese Acupuncture)
9 pages
Advantages of Internet Communication
No ratings yet
Advantages of Internet Communication
7 pages
Development of Android Based On-Line Monitoring and Control System For Renewable Energy Sources
No ratings yet
Development of Android Based On-Line Monitoring and Control System For Renewable Energy Sources
4 pages
Ultimate SEO Checklist for Success
100% (2)
Ultimate SEO Checklist for Success
1 page
HTTP Request Headers and Security Risks
No ratings yet
HTTP Request Headers and Security Risks
5 pages
Blooming Petals e-Commerce Overview
No ratings yet
Blooming Petals e-Commerce Overview
9 pages
Web Development Basics Explained
No ratings yet
Web Development Basics Explained
7 pages
Telegram Links for Na'ao Content
No ratings yet
Telegram Links for Na'ao Content
23 pages
BSNL BRPS API Reference Guide
No ratings yet
BSNL BRPS API Reference Guide
73 pages
Install SSL Certificate on Aruba Controller
100% (1)
Install SSL Certificate on Aruba Controller
25 pages
E-Commerce Order Fulfilment Re-engineering
No ratings yet
E-Commerce Order Fulfilment Re-engineering
25 pages
SEO Project Report: Insights & Analysis
100% (3)
SEO Project Report: Insights & Analysis
53 pages
Đề Thi Cuối Kỳ 2 Tiếng Anh THCS Hà Nội
No ratings yet
Đề Thi Cuối Kỳ 2 Tiếng Anh THCS Hà Nội
15 pages
Understanding Timing Diagrams
No ratings yet
Understanding Timing Diagrams
30 pages
ICMPv6 Packet Loss: Arista & Juniper
No ratings yet
ICMPv6 Packet Loss: Arista & Juniper
6 pages
20-Port Gigabit Web Smart Switch TEG-204WS
No ratings yet
20-Port Gigabit Web Smart Switch TEG-204WS
4 pages
Waseem Khan (Digital Marketing Specialist) - 3
No ratings yet
Waseem Khan (Digital Marketing Specialist) - 3
3 pages
Virtual Circuit vs Datagram Subnet Explained
No ratings yet
Virtual Circuit vs Datagram Subnet Explained
5 pages
Understanding IMVU: A Virtual World Guide
No ratings yet
Understanding IMVU: A Virtual World Guide
3 pages
If, An Online Marketers Internet Addiction Poem, Can You Relate To This?
No ratings yet
If, An Online Marketers Internet Addiction Poem, Can You Relate To This?
4 pages
Introduction to Internet and Web Basics
No ratings yet
Introduction to Internet and Web Basics
525 pages
Internet Chat, Email Safety, and Java Concepts
No ratings yet
Internet Chat, Email Safety, and Java Concepts
26 pages
Global IPTV Playlists by Country
No ratings yet
Global IPTV Playlists by Country
6 pages
(TrendinG) Pakcricketinfo Sapna Shah Viral Video On Twitter
No ratings yet
(TrendinG) Pakcricketinfo Sapna Shah Viral Video On Twitter
4 pages
Introduction to Information and Communication Technology
No ratings yet
Introduction to Information and Communication Technology
31 pages
Understanding LDAP Protocol Basics
No ratings yet
Understanding LDAP Protocol Basics
4 pages
Cloud Computing and Networking Overview
No ratings yet
Cloud Computing and Networking Overview
4 pages
Upgrade Instructions WC3655 WC3655i R16 09
No ratings yet
Upgrade Instructions WC3655 WC3655i R16 09
8 pages
IPv6 Migration Strategies for Businesses
No ratings yet
IPv6 Migration Strategies for Businesses
8 pages
Hackathon Sponsorship Overview 2023
No ratings yet
Hackathon Sponsorship Overview 2023
38 pages