Scribd
Upload
241 views

WT Unit 2 For Bcom Computers 5th Sem

The document provides an overview of dynamic web pages and CSS. It defines static and dynamic web pages, with static pages only containing fixed information and dynamic pages showing different information over time. Dynamic pages can modify content after loading using technologies like HTML, JavaScript, VBScript, DOM and CSS. CSS allows separating styles from HTML structure and updating page styling easily. Different CSS styles can be defined internally, externally, or inline in HTML elements. Selectors determine where styles apply, with options like class, ID, element, and content selectors.

Uploaded by

Bhanu Prakash Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
241 views

WT Unit 2 For Bcom Computers 5th Sem

The document provides an overview of dynamic web pages and CSS. It defines static and dynamic web pages, with static pages only containing fixed information and dynamic pages showing different information over time. Dynamic pages can modify content after loading using technologies like HTML, JavaScript, VBScript, DOM and CSS. CSS allows separating styles from HTML structure and updating page styling easily. Different CSS styles can be defined internally, externally, or inline in HTML elements. Selectors determine where styles apply, with options like class, ID, element, and content selectors.

Uploaded by

Bhanu Prakash Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

UNIT 2

AN OVERVIEW OF DYNAMIC WEB PAGES & DYNAMIC


WEB PAGE & CSS (Cascading Style Sheets)
Web Page:
 Web page is a document available on World Wide Web. A web page can contain large amount of
information including text, graphics, audio, video and hyperlinks.
Static Web page:
 Static web pages are also known as stationary web page. They are loaded on the client’s browser as
exactly they are stored on the web server. Such web pages contain only static information. User can
only read the information but can’t do any modification or interact with the information.
Static web pages are created using only HTML. Static web pages are only used when the information is no
more required to be modified.

Dynamic Web page:


 Dynamic web page shows different information at different point of time. It is possible to change a
portion of a web page by dynamically changing its contents through applying logic to the static
HTML elements.
DHTML Introduction
 DHTML stands for Dynamic Hyper Text Markup Language.
 It is a group of technologies including HTML, Java Script, VB Script, DOM(Document Object
Model), and CSS.
 DHTML allows creating dynamic web pages.
 Dynamic web pages information can be modified after the page is loaded.
 For example, a piece of text can be modified from the text size or text color or move text location
from one place to another place in response to the user location etc.

1
Difference between HTML and DHTML
HTML DHTML
1. HTML stands for Hyper Text Markup DHTML stands for Dynamic Hyper Text
Language Markup Language
2. HTML is used for developing Static web
DHTML is used for developing Dynamic web pages
pages
3. HTML is not programming language but is DHTML is Document Object Model Language along
only presentation language with Presentation Language.
Contents of the DHTML can be place Dynamically;
4. HTML contents cannot placed dynamically
it means the contents can be modified.
5. HTML is not an independent developed
DHTML is a combination of technologies including
language, but it is developed version of
HTML, CSS, DOM, Java Script and VB Script.
SGML.
CSS (Cascading Style Sheets)
 CSS stands for Cascading Style Sheet.
 CSS used for to adding styles in out HTML programs or in our web pages.
 It allows specifying the styles of various HTML elements (Tags) separately from the structure of
HTML documents.
 This separation of styles from the content allows the updating (modification) in HTML document is
very easy.
 By using Style sheets we can specify the styles of various HTML elements (Tags) at one place.
Syntax:
selector
{
Property : values;
}
Example:
b
{
Color : red;
}
Difference between HTML and CSS
HTML CSS
HTML stands for Hyper Text Markup
CSS Stands for Cascading Style Sheet
Language
HTML having several Tags CSS having Selector, Propery, and Values
HTML is used for only creating normal web CSS is used for only adding styles in our HTML
pages but not adding styles in our web pages. documents ( web pages).

2
Types of CSS
We can define styles in our HTML Documents in 3 different ways. They are
1. External Style Sheet
2. Internal Style Sheet or Embedded Style Sheet
3. Inline Style Sheet.

1. External Style Sheet:


 In External Style sheet, all the styles various HTML tags are specified in a separate notepad file,
these styles can be linked another notepad HTML program.
 By using External Style Sheet, we can provide a uniform look to all the documents in web pages.
 The advantages of External Style Sheet is modifying the styles in one file, it will be reflected in all
web pages.
 <link> is tag to define in HTML to link a CSS file into HTML document. This tag always define in a
<head>----</head> tag.
Steps for creating External Style Sheet
Step 1:
 First to open a new notepad file, in that notepad we can write all styles of various HTML elements.
b
{
color:red;
}
i
{
font-size:25px;
}
Step 2:
 The above CSS file, we can save as “filename.css” like as “styles.css”.
Step 3:
 Again to open another new notepad, in that new notepad, we can write HTML program.
<html>
<head>
<title> External Style Sheet Program </title>
<link rel="stylesheet" type="text/css" href="d:\style.css">
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
3
 The above program using <link> tag, this tag used for link to the CSS file into the HTML program
file.
2. Internal Style Sheet or Embedded Style Sheet
 In embedded Style Sheet, we can define all the styles of various HTML elements (tags) within our
HTML program.
 In that HTML program we can use <style> tag. It tag used to define a styles of various html elements
(tags). It tag always to declare within a <head>-----</head> tag.
Syntax:
<style type=”text/css”>
Selector
{
Property : value;
}
</style>
 The following program to demonstrate Internal Style Sheet (Embedded Style Sheet).
Program:
<html>
<head>
<title> External Style Sheet Program </title>
<style type="text/css">
b
{
color:blue;
}
i
{
font-size:25px;
}
</style>
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>

4
3. Inline Style Sheet
 In Inline Style Sheet, we can specify the styles within the line of HTML element (tag). These styles
specify within the HTML tag by using the attribute “style”.
Syntax:
<tagname style=”propery:value”> data </tagname>
Example Program
<html>
<head>
<title> External Style Sheet Program </title>
</head>
<body>
<b style="color:red">Niveditha</b>
<i style="font-size:30px">degree college></i>
<b style="color:blue">kothakota</b>
<i style="font-size:10px">wanaparthy</i>
</body>
</html>

Selectors and it Types


 CSS selector means where we want to apply the styles various HTML tags are called as CSS
Selector.
 There are several types selectors available in CSS. They are
i. Class Selector
ii. ID Selector
iii. The Element Selector
iv. Grouped Selector
v. Content Selector
i. The Element Tag Selector:
It is used to define tag or element associated with html.
Syntax:
Tagname
{
Property : values;
}
Example:
B
{
Color:red;
}
5
Example Program:
<html>
<head>
<title> External Style Sheet Program </title>
<style type="text/css">
b
{
color:blue;
}
i
{
font-size:25px;
}
</style>
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
ii. Class Selector:
It used to define styles without re define HTML tags. In the class selector we can use the class name.in that
declaring the class selector start with “.” (period) symbol. The syntax of the class selector as follow below
Syntax:
.Classname
{
Property:value:
}
Example:
Abc
{
Color:red;
}
Note: The class selector styles to apply HTML element (tags), we are using the attribute in tag “class”.

6
Example Program:
<html>
<head>
<title> External Style Sheet Program </title>
<style type="text/css">
.abc
{
color:blue;
}
.xyz
{
font-size:25px;
}
</style>
</head>
<body>
<b class="abc">Niveditha</b>
<i class="abc">degree college></i>
<b class="xyz">kothakota</b>
<i class="xyz">wanaparthy</i>
</body>
</html>
iii. ID Selector:
It used to define styles without re define HTML tags. In the ID selector we can use the class name.in that
declaring the ID selector start with “#” (Hash) symbol. The syntax of the ID selector as follow below
Syntax:
#IDname
{
Property:value:
}
Example:
#Abc
{
Color:red;
}
Note: The ID selector styles to apply HTML element (tags), we are using the attribute in tag “id”.
Example Program:
<html>
<head>
<title> External Style Sheet Program </title>
<style type="text/css">
#abc
{
7
color:blue;
}
#xyz
{
font-size:25px;
}
</style>
</head>
<body>
<b id="abc">Niveditha</b>
<i id="abc">degree college></i>
<b id="xyz">kothakota</b>
<i id="xyz">wanaparthy</i>
</body>
</html>
iv. Grouped Selector:
If there are more than one elements (tags) having same styles, then it is easy for used Grouped Selector. In
Grouped selector declaring we can use the symbol comma (,) for separating selectors where we want to
applying the styles in HTML tags.
Syntax:
Selector1,selector2,selector3,…….
{
Property:value;
}
Example:
b,i,u
{
Color:red;
}
Example Program:
<html>
<head>
<title> External Style Sheet Program </title>
<style type="text/css">
b,i
{
color:blue;
}
</style>
</head>
<body>
<b>Niveditha</b>
8
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
v. Content Selector:
If there are more than one element (tags) having same styles, then it is easy for used Content Selector. In
Content selector declaring we can use the Blank white space ( ) for separating selectors where we want to
applying the styles in HTML tags.
Syntax:
Selector1 selector2 selector3 …….
{
Property:value;
}
Example:
b i u
{
Color:red;
}
Example Program:
<html>
<head>
<title> External Style Sheet Program </title>
<style type="text/css">
bi
{
color:blue;
}
</style>
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>

9
CSS Property:
The following table to display all the main properties available in CSS.
CSS Property Category Property
Font-family
Font-size
Font
Font-color
Font-style
Color
Text-align
Text Text-valign
Text-decoration
Text-direction
Bgcolor
Background Background-img
Background-position
Bottom
Top
Right
Position
Left
Align
Valign
Padding
Padding-left
Padding Padding-right
Padding-top
Padding-bottom
1. Font properties:
The font can be controlled by using different CSS font properties. In CSS font properties having 4
properties. They are
i. Font-family: To specify the type face of the font.
ii. Font-size: To specify the size of the font.
iii. Font-color: To specify the color of the font.
iv. Font-style: To specify the styles of the font like as Bold, Italic, Underline of the font.
Example program:
<html>
<head>
<title> Font Properties Program </title>
10
<style type="text/css">
b
{
font-color:blue;
font-size:25px
}
i
{
font-color:red;
font-size:25px
font-style:underline:
}

</style>
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
2. Text Properties:
i. Color: To specify the color of the text.
ii. Text-align: To specify the alignment (position) of the text like as (Right, left, center).
iii. Text-valign: To specify the Vertical alignment (position) of the text like as (top, bottom,
Middle).
iv. Text-decoration: To apply effects of the text like as (Under line, Over Line, Strike Through).
v. Text-direction: To Specify the direction of the text with left to right or right to left.
Example program:
<html>
<head>
<title> Text Properties Program </title>
<style type="text/css">
b
{
11
color:blue;
text-align:center;
}
i
{
color:red;
text-decoration:overline;
}
</style>
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
3. Background Properties:
i. Bgcolor: To specify color of the background.
ii. Background-img: To specify the image of the background.
iii. Background-position: To Specify position of the background image and text.
4. Position Properties:
i. Bottom: To specify bottom of the text.
ii. Top: To specify top of the text
iii. Right: To specify right of the text.
iv. Left: To specify left of the text
v. Align: To specify Horizontal position of the text.
vi. valign: To specify vertical position of the text.
5. Padding Properties:
i. Padding: To Specify Equal spaces between all the borders (left, right, top, bottom).
ii. Padding-left: To Specify of the text with only left border space. But no other borders spaces.
iii. Padding-right: To Specify of the text with only right border space. But no other borders spaces.
iv. Padding-top: To Specify of the text with only top border space. But no other borders spaces.
v. Padding-bottom: To Specify of the text with only bottom border space. But no other borders
spaces.

12
Filters:
 Filters are used for to provide visual effect to the web pages.
 Filters are declared by Microsoft, it work only on windows based version of internet explorer.
 Applying filters to the text and images filters area a property of a style sheet which are used to
specify filters to the various html elements.
 Filters cannot add a new content, that means it does not allow any modification.
 In CSS having different types of filters. They are:
1. Flip Filter
2. Chroma filter
3. Invert filter
4. X-Ray Filter
5. Gray Filter
6. Shadow Filter
7. Blur Filter.

1. Flip Filter:
 Flip filters are used for mirroring of the text or images with horizontally and vertically.
 Flipv is a filter used for mirroring of the text or images with vertically.
 Fliph is a filter used for mirroring of the text or images with horizontally.
 Flipv is a filter used for mirroring of the text or images with vertically.

Example Program:
<html>
<head>
<title>The flip filter</title>
<style type = "text/css">
table

13
{
font-size: 3em;
font-family: Arial, sans-serif;
border-style: ridge ;
border-collapse: collapse
}
td
{
border-style: groove;
padding: 15px
}
</style>
</head>
<body>
<table>
<tr>
<td style = "filter: fliph">Text</td>
<td>Text</td>
</tr>
<tr>
<td style = "filter: flipv fliph">Text</td>
<td style = "filter: flipv">Text</td>
</tr>
</table>
</body>
</html>
OUTPUT:

14
2. Chroma Filter:
It is a filter, which is used for to provide a transparency effect. Chroma filters specify a transparency
effect to the color also.
Syntax:
Chroma(color=”value” enable=”true”);

3. Invert Filter:
Invert filters are used for negative effect to the given images. Negative effect means dark area become
lights and light area becomes dark.
Syntax:
filter: invert;

4. X-Ray Filter:
This filter is used for applying X-Ray effect to the given image. X-Ray effect means applying Gray Scale
effect to invert filter.
Syntax:
Filter:X-ray;

5. Gray Filter:
This filter used for applying Gray scale effect to the given image. Gray scale effect means eliminating all
colors of the give image and only the brightness available in an image.
Syntax:
Filter: gray;
Example Program:
<html>
<head>
<title> filters program</title>
</head>
<body>
<img src="C:\images\flower.jpg"> no filter effect </img>
<img src="C:\images\flower.jpg" style="filter:invert"> invert filter effect </img>
<img src="C:\images\flower.jpg" style="filter:X-ray"> X-Ray filter effect </img>
<img src="C:\images\flower.jpg" style="filter:grayscale"> Gray Scale filter effect </img>
</body>
</html>

15
6. Shadow Filter:
Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a filter that
lies in between Dropshadow and Glow. The following parameters can be used in this filter
 Color: The color that you want the shadow to be.
 Direction: The direction of the blur, going clockwise, rounded to 45-degree increments. The default
value is 270 (left).
 0 = Top, 45 = Top right, 90 = Right, 135 = Bottom right, 180 = Bottom, 225 = Bottom left,
270 = Left, 315 = Top left

7. Blur Filter or Motion Blur:


Motion Blur is used to create blurred pictures or text with the direction and strength. The following
parameters can be used in this filter −
 Add: True or false. If true, the image is added to the blurred image; and if false, the image is not
added to the blurred image.
 Direction: The direction of the blur, going clockwise, rounded to 45-degree increments. The default
value is 270 (left).
 0 = Top, 45 = Top right, 90 = Right, 135 = Bottom right, 180 = Bottom, 225 = Bottom left,
270 = Left, 315 = Top left

Transitions
 Transitions are used to provide visual effect to the webpage.
 Transitions are developed by Microsoft. So it is supported by internet Explorer.
 Transitions are to allow to transfer one page to another page with a visual effect like random
dissolve, Horizontal blinks, Box-in, Box-out, Circle-in, Circle-out and Diamond.
 A few effects we can apply in transitions can use randomly, 3D Effects and also use in filters.
 There are 2 types of transitions.
i. Blend Transitions
ii. Reveal Transitions
i. Blend Transitions:

The blend transitions allows content of the element to fade-in or fade-out. The blend transitions also specify
using a HTML syntax as follow

Syntax:

Filter: blend(duratiom=0.001);

16
ii. Reveal Transitions:

The reveal Transitions is a set of pre-defined transitions effects like as Box-in, Box-out, Circle-in, Circle-
out, Horizontal and Vertical swipes.

Syntax:

Filter: Reveal(duration=0.01, Transition:box-in);

17

You might also like