Web Designing Presentation 3 PDF

BSc IT
Web Designing
Semester - III
Copyright @ Amity University

Contents
• Introduction to Frames
• Building Frames
• Frame Elements
• Introduction to Cascading Style Sheets
• Overview of Style Sheet
• Different ways to use style sheet
• Adding style to a document

Cont…
•Selectors DIV And SPAN Elements

•Adding style to a document
•Use id classes
•Style sheet Properties

HTML Frames
• Present documents in multiple views -

independent windows or sub windows
• With frames, several Web pages can be
displayed in the same browser window
• Each HTML document is called a frame,
and each frame is independent of the
others.

HTML Frames
• Multiple views offer designers a way to

keep certain information visible,
• For example, within the same window, one
frame might display a static banner, a
second a navigation menu, and a third the
main document.

Layout of Frames
•  The Frameset document, which holds

all of the frames, and at least two frames

Recall the Various Attributes of Frame Tag
Frame Tags
Functi on Start Tag Attri butes End Tag
Set Frames <frameset> cols="XX/XX%/*" </frameset>
rows="XX/ XX%/*"
Frame <frame> src="filename" </frame>
Definition name="framename"
noresize
scroll=auto/yes/no
marginwidth="XX"
marginheight="XX"
Base <base> Target="framename"/ </base>
"_self"/
"_top"/
"_parent"
(Note the underscores)
No Frames <noframes> Between start and end tags, place the content that </noframes>
appears when a non-frames browser loads this page.
Example Browser Output

HTML frameset Element
• The frameset element holds two or more

frame elements. Each frame element
holds a separate document.
• The frameset element states only HOW
MANY columns or rows there will be in the
frameset

HTML frameset Element
• The frameset column size can also be set

in pixels (cols="200,500"), and one of the
columns can be set to use the remaining
space, with an asterisk (cols="25%,*").

HTML frame Element
• The <frame> tag defines one particular

window (frame) within a frameset.
• <frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>

frame Element
• <frame name=“framename” src=“URL”

frameborder”1/0” merginheight=“pixels”
marginwidth=“pixels” noresize
scrolling=“yes/no/auto”>
• Here noresize stops the manually resizing

of a frame
• Frameborder turns the border of a frame
off or on(0->off and 1on)
HTML frame Element
• The first column is set to 25% of the width

of the browser window.
• The second column is set to 75% of the
width of the browser window. T
• The document "frame_a.htm" is put into
the first column,
• The document "frame_b.htm" is put into
the second column
Example
• <html>
• <frameset rows=“40%,60%”>
• <frame name=“top” src=
“try1.html”marginheight=“3”
marginwidth=“3” scrolling auto noresize>
• <frame name=“bot” src=
“try2.html”marginheight=“3”
• </frameset></html>

Try1.html
Try2.html

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET rows="20%, 80%">
<frame name=“up” src= “try1.html” marginheight=“3”
<FRAMESET cols="25%, 75%">
<frame name=“left” src= “try2.html”marginheight=“3”
<frame name=“rightt” src= “try3.html”marginheight=“3”
</FRAMESET>
</FRAMESET>
</HTML>

Up.html
Left.html Right.html

WHAT IS DHTML???
• DHTML is the art of combining HTML,

JavaScript, DOM, and CSS.
• DHTML stands for Dynamic HTML
• Dynamic HTML, or DHTML, is an
umbrella term for a collection of
technologies used together to create
interactive and animated web sites by
using a combination of a static markup
language (such as HTML),
DHTML
• a client-side scripting language (such

as JavaScript), a presentation definition
language (such as CSS), and the
Document Object Model
• 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.

USES OF DHTML
• DHTML is often used to make menus
on a web page and interactive web
pages.

DISADVANTAGES OF DHTML
• It is difficult to develop and debug due

to varying degrees of support among
web browsers of the technologies
involved, and that the variety of screen
sizes means the end look can only be
fine-tuned on a limited number of
browser and screen-size combinations.

DOM
• The Document Object Model (DOM) is

an application programming
Interface(API) for valid HTML and well
formed XML documents.
• It defines the logical structure of
documents and the way a document is
accessed and manipulated.

DOM
• The HTML DOM defines a standard way

for accessing and manipulating HTML
documents.
• The DOM presents an HTML document as
a tree-structure.

DOM MODEL

Cascading Style Sheets
• A style sheet is a definition of how

content should be rendered on the
page. The purpose of a style sheet is to
create a presentation for a particular
element or set of elements.

Cascading Style Sheets
• CSS is used in DHTML to control the

look and feel of the Web page. Style
sheets define the colors and fonts of
text, the background colors and
images, and the placement of objects
on the page. Using scripting and the
DOM, you can change the style of
various elements.

Syntax-<style type=“text/css”>
• tag{attribute:value;attribute:value….}
….
</style>
Where “style type=“text/css” indicates
that the style sheet conforms to css
syntax

Attributes of style tag:
• Font attributes
Attributes Values
Font-family A comma-delimited
sequence of font family
names (sans-serif)
Font-style Normal , italic
Font-size A term that denotes
absolute size(xx-small,x-
small,small,medium,large
),a number( of pixels)
Use of Font Attribute
<HTML>
<HEAD><TITLE>WORKING WITH STYLE SHEETS USING FONT
ATTRIBUTES</TITLE>
<STYLE Type=“text/css”>
H1{font-family:arial}
P{font-size:12pt;font-style:italic}
</STYLE></HEAD>
<BODY>
<H1>Silicon chip technologies</H1>
<P>Silicon chip technologies,a private limited company, was founded in
December 1989.
<P>The vision of this company is to provide any corporate client a single
entity which addresses all their software development, technical and
user documentation, training and manpower recruitment needs.
</BODY>
</HTML>

Output
Silicon Chip Technologies
Silicon chip technologies,a private limited company, was founded in

December 1989
The vision of this company is to provide any corporate

client a single entity which addresses all their software
development, technical and user documentation, training
and manpower recruitment needs
Color and Background Attributes
Attributes Values
color Sets an element‟s text-color.A
color name or code
background-color Specifies the color in an
element‟s background.
Background-image Sets the background image.A
URL or none.
Background-repeat With a background image
specified, sets up how the
image repeats throughout the
page.repeat-x(repeats
horizontally), repeat-
y(repeats vertically)
,repeat(both), no repeat
Use of Color and Background Attributes
<HTML>
<HEAD><TITLE>WORKING WITH STYLE SHEETS USING COLOR AND BACKGROUND
ATTRIBUTES</TITLE>
H1{font-family:arial;font-size:26pt; background-image:url(images/pic.gif)}
H2{font-family:arial;font-size:26pt;background-image:url(pic1.gif);background-repeat:no-
repeat}
P{font-size:12pt;font-style:italic;background-color:red}
</STYLE></HEAD>
<BODY>
<B><U> With background repeat</U></B>
<P>A private limited company,was founded in december 1989.The vision of this company is to
provide any corporate client a single entity which addresses all their software
development,technical and user documentation, training and manpower recruitment needs.
</P><BR />
<B><U>With background no-repeat</U></B>
<H2>Silicon Chip Technologies</H2>
</BODY>
</HTML>

Output
With background repeat
Silicon chip technologies
A private limited company,was founded in december 1989.The vision

of this company is to provide any corporate client a single entity
which addresses all their software development,technical and user
documentation, training and manpower recruitment needs
With background no-repeat

Text Attributes
Attributes Values
Text-decoration Adds decoration to an element‟s

text(underline)
Vertical-align Determines an element‟s vertical
position(bottom)
Text-transform Applies a transformation to the
text(uppercase,lowercase)
Text-align Aligns text within an

element(left,right,center)
Text-indent Indents the first line of
text(length)
Use of Text Attribute
<HTML>
<HEAD><TITLE>WORKING WITH STYLE SHEETS USING TEXT ATTRIBUTES</TITLE>
H1{font-family:arial;font-size:26pt; text-decoration:blink;color:red}
P{font-size:12pt;font-style:normal;background-color:red}
H6{font-size:12pt;font-style:italic;text-align:justify;text-indent:.5in}
</STYLE></HEAD>
<BODY>
<H1>Silicon chip technologies</H1><B><U>Without text align,first line indent</U></B>
<P>A private limited company,was founded in december 1989.The vision of this company is to
development,technical and user documentation,training and manpower recruitment needs.
</P>
<B><U>With text align(justify),first line indent</U></B>
<H6>A private limited company,was founded in december 1989.The vision of this company is to
development,technical and user documentation,training and manpower recruitment needs
</H6>
</BODY>
</HTML>

Output

Without text align, first line indent
A private limited company, was founded in December 1989.The vision of this company is to
development, technical and user documentation, training and manpower recruitment needs.
With text align (justify) ,first line indent
A private limited company, was founded in December 1989.The vision of this company is to
provide any corporate client a single entity which addresses all their software development, technical and user
documentation, training and manpower recruitment needs.

Border Attributes
Attributes Values
Border-style Solid,double
Border-color A color name or code
Border-width Thin ,medium, thick or length
Border-top-width Thin,medium,thick or length
Border-bottom-width Thin,medium,thick or length
Border-left-width Thin,medium,thick or length

Border-right-width Thin,medium,thick or length
Border-top Specifies width,color and style
Border-bottom Specifies width,color and style
Border-left Specifies width,color and style
Border-right Specifies width,color and style
border Sets all the properties at once

Use of Border Attributes
<HTML>
<HEAD><TITLE>WORKING WITH STYLE SHEETS USING BORDER
ATTRIBUTES</TITLE>
H1{font-family:arial;font-size:26pt;color:red}
P{font-size:12pt;font-style:normal;background-color:red}
p{font-size:12pt;font-style:italic;border-style:groove;border-width:thick}
</STYLE></HEAD>
<BODY>
<P>A private limited company,was founded in december 1989.The vision of this
company is to provide any corporate client a single entity which addresses
all their software development,technical and user documentation,training
and manpower recruitment needs.
</P>
</BODY>
</HTML>

Output
A private limited company,was founded in

december 1989.The vision of this company is
to provide any corporate client a single entity
which addresses all their software
development,technical and user
documentation,training and manpower
recruitment needs

Margin Related Attributes
Attributes Values
Margin-top Percent ,length or auto
Margin-bottom Percent ,length or auto
Margin-left Percent ,length or auto
Margin-right Percent ,length or auto
margin Percent ,length or auto

Use of Margin Attributes
<HTML>
<HEAD><TITLE>WORKING WITH STYLE SHEETS USING MARGIN
ATTRIBUTES</TITLE>
BODY{margin-top:10%}
P{font-size:12pt;font-style:italic;margin-left:15%;margin-right:15%}
</STYLE></HEAD>
<BODY>
<P>A private limited company,was founded in december 1989.The vision of this
company is to provide any corporate client a single entity which addresses all their
software development,technical and user documentation,training and manpower
recruitment needs.
</P>
</BODY>
</HTML>

Output
A private limited company,was founded in december 1989.
The vision of this company is to provide any corporate client a single entity which addresses all their
software development,technical and user documentation,training and manpower recruitment needs

List Attribute
Attributes Values
List-style Circle,square,decimal,
lower-roman, upper-
roman.

Use of List Attribute
<HTML>
<HEAD><TITLE>WORKING WITH STYLE SHEETS USING LIST ATTRIBUTES</TITLE>
BODY{margin-top:5%}
UL{list-style-type:lower-roman}
</STYLE></HEAD>
<BODY>
<H4> SCT Provides Corporate Training For The Following Products:</H4>
<B><UL>
<LI>HTML
<LI> JAVASCRIPT
<LI> CGI
<LI> JAVA
<LI>POWERBUILDER
<LI>ORACLE DEVELOPER 2000
<LI> ORACLE DBA
</UL></B>
</BODY>
</HTML>

Output
SCT Provides Corporate Training For The Following Products:
i. HTML
ii. JAVASCRIPT
iii. CGI
iv. JAVA
v. POWERBUILDER
vi. ORACLE DEVELOPER 2000
vii. ORACLE DBA

CSS Comments
A comment will be ignored by the

browser. They are very useful for
hiding the style tag from browsers
that do not support them .A single
line HTML comment begins with
"/*", and ends with "*/", like this:

CSS Comments
• /* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

CSS Comments
• comments that span more than one line

use :
• 

CSS Comments
• <head>
<style type="text/css">

</style>
</head>
Types of Style Sheets
Three ways to include style information in an

HTML document.
– External Style Sheet:

It uses an outside style sheet either by
importing it or linking to it

Types of Style Sheets
– Embedding Style sheets:

Used to embed a document-wide style in
the <HEAD>element of the document
– Inline Style Sheet

Used to provide an inline ,right where the
style sheets needs to be applied

EXTERNAL STYLE SHEETS
• An external style sheet is simply a plain text file

containing the style specifications for HTML tags
or classes
• External styles are styles that are written in a
separate document and then attached to various
Web documents. External style sheets can affect
any document they are attached to.

EXTERNAL STYLE SHEETS
• These external style sheets are saved as a file

with extension .css which can be linked ,to a
web page via the <LINK> tag
• By using this method we can use one style sheet
for multiple pages.
• <link rel="stylesheet" type="text/css"

href="styles.css" />

Attributes of the <link> tag:
• rel - When using an external stylesheet on

a webpage, this attribute takes the value
"stylesheet"
• type - When using an external stylesheet
on a webpage, this attribute takes the
value "text/css"
• href - Denotes the name and location of
the external stylesheet to be used.
Example
• <html>
• <head>
• <link rel="stylesheet" type="text/css"
href="style1.css" />
• </head>
• <body>
• <p> The text in this paragraph will be blue. </p>
</body>
• </html>
The code in style1.css file
• p {color:blue}
Note: The <style> tag is NOT used in an

external stylesheet, and neither are HTML
comments

Output
The text in this paragraph will be blue

Embedding Style sheets
• Embedded styles are styles that are

embedded in the head of the document.
Embedded styles affect only the tags on
the page they are embedded in.
• Syntax:
– <style type="text/css">
– p { color: #00f; }
– </style>

Example:
• <html>
• <head>
• <style type="text/css">
• p {color: green}
• </style>
• </head>
• <body>
• <p> The text in this paragraph will be green.
</p> <p> This paragraph too. </p> </body>
</html>

output
The stylesheet definition specifies that all

text declared with the <p> tag should be
green.
The text in this paragraph will be green.

This paragraph too.

Inline Style Sheet
• Inline styles are styles that are written

directly in the tag on the document. Inline
styles affect only the tag they are applied
to.
• <p style="color: red; margin-left: 20px">
This is a paragraph
</p>

Example
• <p style="color:gray">This text will be

gray.</p>

Output
This text will be gray.

CLASS
• A class is defined by giving it a name

(always preceded by a period) and
adding the standard style definition of
properties and values inside curly
brackets:
.classname {Style definition}

CLASS
• With the class selector we can define

different styles for the same type of
HTML element. Say that you would like
to have two types of paragraphs in your
document: one centre aligned
paragraph in blue, and one centre
aligned paragraph in red. Here is how
you can do it with classes:

CLASS
• Syntax
.red-center {text-align: center;color:

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

:
In HTML document we have to assign the

class to the element i.e.HTML tag
<p class="red-center">
This paragraph will be center aligned and red.
</p>
<p class="blue-center">
This paragraph will be center-aligned and blue.
</p>

Use Of Class
• <HTML>
• <HEAD><TITLE> Working with class</TITLE>
• <STYLE Type=“text/css”>
• P{font-size:12pt;text-align:justify;margin-left:10%;margin-right:10%}
• .question{color:brown;font-style:italic}
• .answer{color:#23238e}
• </STYLE></HEAD>
• <BODY>
• <P class=“question”> How to create style sheet to alter an HTML element?</P>
• <P class=“answer”>The Style assignment process can be accomplished with the
<STYLE>…</STYLE>tags.The syntax for making the assignment is
simple.Between <STYLE> and</STYLE> HTML tags to which styles are to be
assigned are to be listed and each tag with a pair of curly brackets in which specific
style attributes are to be specified.This <STYLE> tag shou;d be within < HEAD
>…</HEAD>element.</P>
• <P class=„question‟>what are the attributes that can be specified?</P>
• <P class=„answer‟>The attributes can be specified are Font Attributes,Color and
Background attributes,Text attributes,Border attributes,Margin attributes and List
attributes.</P>
• </BODY>
• </HTML>
OUTPUT
How to create style sheet to alter an HTML element?
The Style assignment process can be accomplished with the

<STYLE>…</STYLE>tags.The syntax for making the assignmen is simple. Between
<STYLE> and <STYLE>, HTML tags to which styles are to be assigned are to be listed and
each tag with a pair of curly brackets in which specific style attributes are to be
specified.This <STYLE> tag shou;d be within <HEAD> …</HEAD>element
What are the attributes that can be specified?
The attributes can be specified are Font Attributes,Color and Background

attributes,Text attributes,Border attributes,Margin attributes and List attributes.

Id
• IDs are used in basically the

same way, except that they are
preceded by a number sign (#)
instead of a period:
#idname {Style definition}

Id
• p#red-center
{
text-align: center;
color: red
}
• <p id="red-center">A paragraph which has the id

selector "red-center" assigned</p>

Class And Id
• Id selector is different from the class

selector an id selector always applies to
only one element on a page whereas a
class selector may apply to SEVERAL
elements.
• Using an ID is like giving a selector a
unique name,

Class and ID Selectors
• In the CSS, a class selector is a name preceded

by a full stop (.) and an ID selector is a name
preceded by a hash character (#).
• #top { background-color: #ccc;
• padding: 1em
• } .intro
• { color: red;
• font-weight: bold;
• }
Example of Class And Id
• <div id="top"> <h1>Chocolate curry</h1> <p
class="intro">This is my recipe for making
curry purely with chocolate</p> <p
class="intro">Mmm mm mmmmm</p> </div>
• The difference between an ID and a class is that
an ID can be used to identify one element,
whereas a class can be used to identify more
than one.
• You can also apply a selector to a specific HTML
element by simply stating the HTML selector
first, so p.jam { whatever } will only be applied to
paragraph elements that have the class 'jam'.
Div tag
• Div (short for division) divides the

content into individual sections.
Each section can then have its own
formatting, as specified by the
CSS.

Div tag
• If we have following declaration:
• .large {
color: green;
font-family:arial;
font-size: 4pt;
}

The HTML Code
• <div class="large">
This is a DIV sample.
</div>
output
• This is a DIV sample.

Use of Div tag
• <HTML>
• <HEAD><TITLE> Working with DIV‟s</TITLE></HEAD>
• <BODY>
• <DIV ID=“box1”style=“background-
color:red;position:absolute;left:300;top:150;width:50”>
• <IMG Src=“images/pic.gif”></DIV>
• <IMG Src=“images/pic1.gif”></DIV>
• </BODY>
• </HTML>

Output

What is span tag?
• Span is an HTML element that plays a

prominent role in style sheets.
• In the body of the
document,<SPAN>…</SPAN> is used
to set the boundaries of the rule‟s
styling specifications.

Span Tag
• Span is similar to div in that they both

divide the content into individual sections.
The difference is that span goes into a
finer level, so we can span to format a
single character if needed.

SPAN tag
• If we have following declaration:
• largefont {
color: blue;
font-family:arial;
font-size: 6px;
}

HTML Code
• Span is not at the <span

class="largefont">block level</span>.
• Output
• Span is not at the block level.

Using of Span tags
• <HTML>
• <HEAD><TITLE> Working with span</TITLE>
• <STYLE Type=“text/css”>
• P{font-size:12pt;text-align:justify}
• .question{color:brown;font-style:italic}
• .answer{color:#23238e}
• .big{font-size:14pt;text-decoration:underline;text-transform:uppercase;color:red}
• </STYLE></HEAD>
• <BODY>
• <P class=“question”> How to create <SPAN class=“big”>style sheet</SPAN> to alter an HTML
element?P>
• <P class=“answer”>The Style assignment process can be accomplished with the
<STYLE>…</STYLE>tags.The syntax for making the assignment is simple.Between
<STYLE> and</STYLE> HTML tags to which styles are to be assigned are to be
listed and each tag with a pair of curly brackets in which specific style attributes are to be
specified.This <STYLE> tag shou;d be within < HEAD >…</HEAD>element.</P>
• <P class=„question‟>what are the <SPAN class=“big”> attributes</SPAN> that can be
specified?</P>
• <P class=„answer‟>The attributes can be specified are Font Attributes,Color and Background
attributes,Text attributes,Border attributes,Margin attributes and List attributes.</P>
• </BODY>
• </HTML>

Output
How to create STYLE SHEET to alter an HTML element?

<STYLE>…</STYLE>tags.The syntax for making the assignmen is simple.
Between <STYLE> and <STYLE>, HTML tags to which styles are to be assigned
are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified.This <STYLE> tag shou;d be within <HEAD>
…</HEAD>element
What are the ATTRIBUTES that can be specified?
The attributes can be specified are Font Attributes,Color and

Background attributes,Text attributes,Border attributes,Margin
attributes and List attributes.

Use of Span Tag
• <HTML>
• <HEAD><TITLE> Working with external style sheet</TITLE>
• <LINK Rel=“stylesheet” HREF=“mystyle.css” type=“text/css”></HEAD>
• <BODY>
• <P class=“question”> How to create <SPAN class=“big”>style sheet</SPAN>
to alter an HTML element?P>
• <P class=“answer”>The Style assignment process can be accomplished with
the <STYLE>…</STYLE>tags.The syntax for making the assignment
is simple.Between <STYLE> and</STYLE> HTML tags to which
styles are to be assigned are to be listed and each tag with a pair of curly
brackets in which specific style attributes are to be specified.This
<STYLE> tag shou;d be within < HEAD
>…</HEAD>element.</P>
• <P class=„question‟>what are the <SPAN class=“big”> attributes</SPAN> that
can be specified?</P>
• <P class=„answer‟>The attributes can be specified are Font Attributes,Color
and Background attributes,Text attributes,Border attributes,Margin attributes
and List attributes.</P>
• </BODY>
• </HTML>
Output
How to create STYLE SHEET to alter an HTML element?

<STYLE>…</STYLE>tags.The syntax for making the assignmen is simple.
Between <STYLE> and <STYLE>, HTML tags to which styles are to be assigned
are to be listed and each tag with a pair of curly brackets in which specific style
attributes are to be specified.This <STYLE> tag shou;d be within <HEAD>
…</HEAD>element
What are the ATTRIBUTES that can be specified?
The attributes can be specified are Font Attributes,Color and

Background attributes,Text attributes,Border attributes,Margin
attributes and List attributes.

DHTML FILTERS
• Glow-It adds radiance around the outside
edges of objects.
• Blur-Creates the impression of moving at
high speed.
• Flip H-It creates a horizontal mirror image.
• Flip V-It creates a vertical mirror image
• Shadow-It creates an offset solid silhouette
• Drop Shadow-It creates a solid silhouette of
the object
• Wave-It creates a sine wave distortion along
the x-axis.
EXAMPLE OF FILTERS
• <html>
• <head>
• <style>
• h2
• {
• width:100%;
• }
• </style>
• </head>
• <body>
• <h2 style="filter:glow()">Glow</h2>
• <h2 style="filter:blur()">Blur</h2>
• <h2 style="filter:fliph()">Flip H</h2>
• <h2 style="filter:flipv()">Flip V</h2>
• <h2 style="filter:shadow()">Shadow</h2>
• <h2 style="filter:dropshadow()">Drop Shadow</h2>
• <h2 style="filter:wave(Strength=2)">Wave</h2>
• <p>NOTE: Filters don't work if the width property of the element is not set.</p>
• </body>
• </html>
RESULT
• Glow
• Blur
• Flip H
• Flip V
• Shadow
• Drop Shadow
• Wave
NOTE: Filters don't work if the width property
of the element is not set.

Thank You

Web Designing Presentation 3 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Presentation 3 PDF

Uploaded by

Copyright:

Available Formats

BSc IT

Copyright @ Amity University

Copyright @ Amity University

•Selectors DIV And SPAN Elements

Copyright @ Amity University

• Present documents in multiple views -

Copyright @ Amity University

• Multiple views offer designers a way to

Copyright @ Amity University

•  The Frameset document, which holds

Copyright @ Amity University

Example Browser Output

Copyright @ Amity University

• The frameset element holds two or more

Copyright @ Amity University

• The frameset column size can also be set

Copyright @ Amity University

• The <frame> tag defines one particular

Copyright @ Amity University

• <frame name=“framename” src=“URL”

• Here noresize stops the manually resizing

• The first column is set to 25% of the width

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• DHTML is the art of combining HTML,

• a client-side scripting language (such

Copyright @ Amity University

Copyright @ Amity University

• It is difficult to develop and debug due

Copyright @ Amity University

• The Document Object Model (DOM) is

Copyright @ Amity University

• The HTML DOM defines a standard way

Copyright @ Amity University

Copyright @ Amity University

• A style sheet is a definition of how

Copyright @ Amity University

• CSS is used in DHTML to control the

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Silicon Chip Technologies

Silicon chip technologies,a private limited company, was founded in

The vision of this company is to provide any corporate

Copyright @ Amity University

A private limited company,was founded in december 1989.The vision

With background no-repeat

Silicon chip technologies

Text-decoration Adds decoration to an element‟s

Text-align Aligns text within an

Copyright @ Amity University

Silicon Chip Technologies

With text align (justify) ,first line indent

Copyright @ Amity University

Border-left-width Thin,medium,thick or length

Copyright @ Amity University

Copyright @ Amity University

A private limited company,was founded in

Copyright @ Amity University

Margin-top Percent ,length or auto

Margin-bottom Percent ,length or auto