web unit2

Unit-II
1. Difference between HTML and DHTML
DHTML (Dynamic Hypertext Markup

HTML (Hypertext Markup Language)
Language)
HTML is a mark-up language. DHTML is a collection of technology.
HTML is used to build a static document DHTML describes the technologies used to
page and to specify the hyperlinks. build dynamic and interactive web pages.
HTML does not include server-side code. DHTML includes server-side code.
HTML is a simple static page with no DHTML is a dynamic page with HTML,
JavaScript or styles. CSS, DOM and JavaScript.
HTML files have the.htm or.html extension. DHTML files have the .dhtml extension.
HTML does not require database DHTML may require database connectivity
connectivity. as it interacts with the user.
HTML pages do not use event methods. DHTML pages make use of event methods.
DHTML enables the incorporation of minor

HTML provides tags such
animations and dynamic menus into Web
as <body>, <li>, <form>, etc., to control the
pages. It employs events, methods, and
presentation of information on the web
properties to provide dynamism
pages.
to HTML pages.
HTML does not permit changes to the DHTML also allows you to modify the
current pages without returning to the current pages at any time. Without initially
webserver first. returning to the webserver.
2. What is CSS? What are the different types of CSS?
A. Cascading Style Sheets, is a stylesheet language used in web design to control the layout
and presentation of web pages. It is essential because it allows designers to customize the
appearance of websites, making them visually appealing and user-friendly.
There are three types of CSS. They are

 Inline stylesheet
 Internal stylesheet
 External stylesheet
3. Write about CSS Syntax rule?

A. A CSS rule consists of a selector and a declaration block.
CSS Syntax
The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
text-align: center;
}
4. List and explain types of CSS?

A. Cascading Style Sheets, is a stylesheet language used in web design to control the layout
and presentation of web pages. It is essential because it allows designers to customize the
appearance of websites, making them visually appealing and user-friendly.
There are three types of CSS. They are
 Inline stylesheet -( by using the style attribute inside HTML elements)
 Internal stylesheet -(by using a <style> element in the <head> section)
 External stylesheet-(by using a <link> element to link to an external CSS file)
Inline CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 The following example sets the text color of the <h1> element to blue, and the text
color of the <p> element to red:
Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
 An external style sheet is used to define the style for many HTML pages.
 Here styles will be saved in a separate file with an extension of .css and this .css file
will be linked in the head section of our desired file using <link> tag.
i.e To use an external style sheet, add a link to it in the <head> section of each HTML
page
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
5. What are the different types of selectors used in CSS?

A. CSS Selector :A CSS selector selects the HTML element(s) for styling purposes. CSS
selectors select HTML elements according to their id, class, type, attribute, etc.
 The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}
 CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
 CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector
in grouping.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello RDC</h1>
<h2>Hello RDC</h2>
</body>
</html>
 CSS Contextual Selector
A contextual selector gives the combination of tags and sub-tags separated by space.
Example
<!DOCTYPE html>
<html>
<head>
<style>
B I{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<B><I>Hello RDC</I></B>
<I><B>Hello RDC</B></I>
<B>This is a bold text.</B>
<I>this is text in italic.</I>
</body>
</html>
 CSS sub-class Selector
A sub-class selector can have different classes,thus allowing the same element to have
different styles.
Example
<!DOCTYPE html>
<html>
<head>
<style>
H1.style1
{
text-align: center;
color: blue;
}
H1.style2
{
text-align: left;
color: red;
}
</style>
</head>
<body>
<h1 class=”style1”>Hello RDC1</h1>
<h1 class=”style2”>Hello RDC2</B></I>
</body>
</html>
 CSS ID Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id=”para1”>Hello RDC1</h1>
</body>
</html>
6. Write about position property in CSS?
A. The CSS position property is used to position different text or image at a
fixed position on the web page.
The property position may take any one of the following values:
 Static
 Absolute
 Relative
 Fixed
Ex: <HTML>
<HEAD>
<TITLE>POSITION</TITLE>
</HEAD>
<BODY>
<IMG SRC=”TULIPS.JPG”height=100 width=100
style=”position:absolute,left:0;top:0”>
</BODY>
</HTML>
7. Write about multimedia effects with filters and transitions?

A. CSS filter: CSS filters are used to set visual effects to text, images, and other aspects of
a webpage. The CSS filter property allows us to access the effects such as color or blur,
shifting on the rendering of an element before the element gets displayed.
Filters can be applied to HTML control elements through the CSS filter property.
 For inline styles the syntax for filter property is
style=”filter:filtername(parameters)”
 For embedded and external styles the syntax for filter property is
Selector(filter:filtername(parameters))
Different visual filters are :
Filter name Description
Alpha Sets the level of opacity for a visual object.
Blur Blurs an object
Chroma Renders a specified color in the object

transperant.
Drop shadow Creates a shadow of the object at the
specified x-y offset and color.
Flip horizontal (fliph) Creates a mirror image of the visual
object,horizontally.
Flip vertical(flipv) Creates a mirror image of the visual
object,vertically.
Glow Gives the object the appearance of a glow.
Grayscale Renders the object in grayscale
Invert Reverses the hue,saturation,brightness

values of the visual object.
Light Simulates the projection of a light source
onto the object.
Mask Makes a transparent mask of the visual
object.
shadow Creates a shadow around the object in the
specified color.
Wave Creates a wave-like distortion of the object.
XRay Transforms the visual display to

monochromatic x-ray film.
Example using filters on text
<html>
<head>
<title>
Filters
</title>
</head>
<body>
<table border=1>
<tr>
<td> normal</td>
<td>flip horizontal</td>
<td>flip vertical</td>
<td>flip horizontal and vertical</td>
</tr>
<tr style=”font-size=30”>
<td> RDC</td>
<td style=filter:”fliph”> RDC </td>
<td style=filter:”flipv”> RDC </td>
<td style=filter:”fliph flipv”> RDC </td>
</tr>
</table>
</body>
</html>
Example using filters on image
<html>
<head>
<title>
Filters
</title>
</head>
<body>
<table border=1>
<tr>
<td> invert</td>
<td>grayscale</td>
<td> xray</td>
<td>wave</td>
</tr>
<tr>
<td style=”filter:gray”><img src=”tulips.jpg”></td>
<td style=”filter:invert”><img src=”tulips.jpg”></td>
<td style=”filter:xray”><img src=”tulips.jpg”></td>
<td style=”filter:wave(strength=5)”><img src=”tulips.jpg”></td>
</td>
<tr>
<td> mask</td>
<td>alpha</td>
<td> blur</td>
<td>chroma</td>
</tr>
<tr>
<td style=”filter:mask(color=red”><img src=”tulips.jpg”></td>
<td style=”filter:alpha(opacity=50)”><img src=”tulips.jpg”></td>
<td style=”filter:blur(strength=20)”><img src=”tulips.jpg”></td>
<td style=”filter:chroma(color=blue)”><img src=”tulips.jpg”></td>
</td>
</table>
</body>
</html>
Important Questions
Short answer questions:
1. Define CSS?
2. Syntax of CSS?
Essay answer questions:
1. Difference between HTML and DHTML?

2. Define CSS? Types of CSS?
3. What are the different types of selectors?
4. Write about multimedia effects with Filters and transitions?
Prepared by
P. MENAKA RAO
M.TECH, M.C.A, M.B.A, MA(ENGLISH)

web unit2

Uploaded by

Copyright:

Available Formats

web unit2

Uploaded by

Document Information

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 unit2

Uploaded by

Copyright:

Available Formats

Unit-II

1. Difference between HTML and DHTML

DHTML (Dynamic Hypertext Markup

HTML is a mark-up language. DHTML is a collection of technology.

DHTML enables the incorporation of minor

There are three types of CSS. They are

3. Write about CSS Syntax rule?

The selector points to the HTML element you want to style.

4. List and explain types of CSS?

<p style="color:red;">A red paragraph.</p>

5. What are the different types of selectors used in CSS?

 CSS Group Selector

 CSS Contextual Selector

 CSS sub-class Selector

7. Write about multimedia effects with filters and transitions?

 For inline styles the syntax for filter property is

Filter name Description

Alpha Sets the level of opacity for a visual object.

Blur Blurs an object

Chroma Renders a specified color in the object

Grayscale Renders the object in grayscale

Invert Reverses the hue,saturation,brightness

XRay Transforms the visual display to

Short answer questions:

Essay answer questions:

1. Difference between HTML and DHTML?

You might also like