UNIT IV
DHTML and CSS
10 Mark Exam Notes
Internet and Web Design — 23BDSA4
Topics Covered
1. Introduction to DHTML
2. Components of DHTML
3. Advantages & Disadvantages of DHTML
4. Introduction to CSS
5. Advantages of CSS
6. Types of CSS (Inline, Embedded, External)
7. Linking Style Sheet to HTML
8. Multiple Styles
9. Rollover Buttons
10. Frames & Frameset Definition
11. Frame Definition
12. Nested Framesets
TOPIC 1: Introduction to DHTML
Definition:
DHTML (Dynamic HTML) is a collection of technologies used together to create dynamic websites by
using a combination of HTML, a client-side scripting language, CSS, and the DOM (Document Object
Model).
DHTML = HTML + Scripting Language + CSS + DOM
Components of DHTML:
1) HTML:
HTML defines the structure of a web page using attributes, tags, headings, forms, tables, paragraphs and
links.
2) JavaScript (Scripting Language):
Scripting provides the mechanism to communicate user actions and produce client-side changes to a
page. Scripts can handle mouse actions through events like onmouseover and respond using predefined
instructions. JavaScript is the standard for creating cross-browser DHTML pages.
3) Cascading Style Sheets (CSS):
A style sheet controls the designing and formatting of HTML elements. Text and graphics can overlay each
other, creating more visual effects.
4) Document Object Model (DOM):
DOM is a model where the document contains objects (elements, links, etc.) that can be manipulated. You
can delete, add, or change any element as long as the document is valid.
Advantages of DHTML:
• Fast: DHTML loads content very fast. The whole page does not reload — only the required content
part loads.
• No Additional Software Required: DHTML uses most features already present in browsers. No
need to download any plug-ins or additional supporting software.
• Dynamic Features: DHTML helps web designers create web pages with compact looks, fast
downloads, graphic effects, greater functionality and more content at the same time.
Disadvantages of DHTML:
• Long and Complex Coding: DHTML coding is long and complex. Only expert JavaScript and HTML
programmers can write and edit them.
• Browser Support Problems: DHTML has browser support problems for different browsers. A code
written for Netscape might not work in Internet Explorer and vice-versa.
■ EXAM TIP: DHTML formula: HTML + Scripting Language + CSS + DOM — mandatory ezhuthanum!
TOPIC 2: Introduction to CSS
Definition:
Cascading Style Sheets (CSS) is a simple design language used to simplify the process of making web
pages presentable. CSS handles the look and feel/designing part of a web page.
Using CSS, you can control: color of the text, style of fonts, spacing between paragraphs, column sizes
and layout, background images and colors, display for different devices and screen sizes.
Advantages of CSS:
• 1) CSS Saves Time: Write CSS once and reuse the same sheet in multiple HTML pages.
• 2) Pages Load Faster: Write one CSS rule for a tag and apply it to all occurrences. Less code means
faster download times.
• 3) Easy Maintenance: To make a global change, simply change the style — all tags in all web pages
update automatically.
• 4) Superior Styles to HTML: CSS has more attributes than HTML, giving a better look to HTML
pages.
• 5) Multiple Device Compatibility: Style sheets allow content to be displayed for mobiles, tablets,
laptops, and desktop computers.
• 6) Global Web Standards: CSS is supported by World Wide Web Standards.
• 7) Platform Independence: CSS offers consistent platform independence and supports latest
browsers and all operating systems.
TOPIC 3: Types of CSS
There are 3 types of CSS:
1) Embedded CSS (Internal CSS):
Embedded style is always used inside the <HEAD> tag. CSS code is written inside the <style> tag within
<head>. This type applies to the complete webpage for all matching tags.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
2) Inline CSS:
Inline styles are applied directly to tags in the body using the style attribute. It is a single tag oriented CSS
— applies only to that specific tag and does not disturb other same tags.
<H1 STYLE="font-size: 48pt; font-family: Arial; color: green;">
CSS Test Text
</H1>
3) External CSS:
External CSS means CSS code is present externally in an individual file saved as .css and applied in
webpage using the <LINK> tag inside <head>.
Step 1 — Create [Link] file:
h1 {
font-size: 40pt;
font-family: Arial;
color: green;
}
Step 2 — Link in HTML:
<html>
<head>
<title>All types of CSS Example</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="c:/[Link]">
</head>
<body>
<H1>Heading Tag Text 1- External CSS Example</H1>
<p>This is demo text</p>
</body>
</html>
Comparison Table:
Feature Inline Embedded External
Location Inside tag <head> section Separate .css file
Scope Single tag only Whole page Multiple pages
Reusability No No Yes
Tag used style attribute <style> tag <LINK> tag
■ EXAM TIP: 3 types of CSS — sure aa varum in exam! Comparison table ezhuthina extra marks varum!
TOPIC 4: Program for All 3 Types of CSS
<html>
<head>
<title>All types of CSS Example</title>
<!-- External CSS -->
<LINK REL="stylesheet" TYPE="text/css" HREF="c:/[Link]">
<!-- Embedded CSS -->
<style>
b {
font-size: 20pt;
font-family: Arial;
color: blue;
}
</style>
</head>
<body>
<!-- Embedded CSS -->
<b>Bold Tag Text - Embedded CSS Example</b>
<br>
<!-- Inline CSS -->
<p STYLE="font-size: 30pt; font-family: Arial; color: red;">
Paragraph Tag Text - Inline CSS Example
</p>
<!-- External CSS -->
<H1>Heading Tag Text - External CSS Example</H1>
</body>
</html>
TOPIC 5: Rollover Buttons
Definition:
A rollover button is a dynamic button that becomes active when the user positions the mouse over it. It is
one of the first common examples of dynamic page manipulation using JavaScript and DHTML.
How it Works:
• onmouseover event — fires when mouse moves over image → [Link] appears
• onmouseout event — fires when mouse moves away → [Link] appears
• By swapping the SRC attribute value, rollover effect is achieved without manually refreshing the page
Steps:
Step 1: Create 3 images — [Link] (default), [Link] (hover), [Link] (mouseout)
Step 2: Use <a> tag with <img> inside and apply onmouseover and onmouseout events
Program:
<html>
<head>
<title>Rollover Buttons</title>
</head>
<body>
<a href="Destination URL" target="_top"
onmouseover="[Link]='path/[Link]'"
onmouseout="[Link]='path/[Link]'">
<img src="path/[Link]"
width="281"
height="55"
border="0"
alt="Move your mouse over me"
name="Rollover">
</a>
</body>
</html>
Output Effect: The image blinks from white background to black background — technically two images
are swapping on mouse action.
TOPIC 6: Frames & Frameset Definition
Definition:
Frames allow a browser window to be divided into multiple sections, where each section can load a
separate HTML page. The <frameset> tag is used to define frames in HTML.
Important Tags:
Tag Purpose
<frameset> Divides browser window into frames
<frame> Defines each individual frame
<noframes> Content shown if browser does not support frames
Attributes of :
Attribute Purpose Example
rows Divides window horizontally rows="50%,50%"
cols Divides window vertically cols="30%,70%"
border Frame border size border="5"
framespacing Space between frames framespacing="10"
Attributes of :
Attribute Purpose Example
src HTML file to load src="[Link]"
name Frame name name="main"
scrolling Scrollbar scrolling="yes"
noresize Prevent resizing noresize
frameborder Show/hide border frameborder="0"
Example 1 — Column Frames (Vertical):
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="30%,70%">
<frame src="[Link]" name="left">
<frame src="[Link]" name="right">
<noframes>
<p>Your browser does not support frames.</p>
</noframes>
</frameset>
</html>
Example 2 — Row Frames (Horizontal):
<html>
<head>
<title>Row Frames</title>
</head>
<frameset rows="20%,60%,20%">
<frame src="[Link]" name="top">
<frame src="[Link]" name="middle">
<frame src="[Link]" name="bottom">
<noframes>
<p>Your browser does not support frames.</p>
</noframes>
</frameset>
</html>
TOPIC 7: Nested Framesets
Definition:
A frameset inside another frameset is called a Nested Frameset. It is used to create complex frame
layouts by combining rows and columns together.
Example — Nested Frameset:
<html>
<head>
<title>Nested Frames</title>
</head>
<frameset rows="20%,80%">
<!-- Top frame - full width -->
<frame src="[Link]" name="header">
<!-- Bottom split into 2 columns -->
<frameset cols="30%,70%">
<frame src="[Link]" name="menu">
<frame src="[Link]" name="content">
</frameset>
<noframes>
<p>Your browser does not support frames.</p>
</noframes>
</frameset>
</html>
Key Points:
• <frameset> replaces <body> tag — both cannot be used together
• rows — horizontal split, cols — vertical split
• Values in pixels or percentage or * (remaining space)
• <noframes> — shown when browser does not support frames
• Nested frameset — frameset inside another frameset
■ EXAM TIP: frameset and body cannot be used together — important exam point!
EXAM TIPS SUMMARY — Unit IV
Topic Key Point to Remember
DHTML DHTML = HTML + Scripting Language + CSS + DOM
CSS Definition Simple design language to make web pages presentable
Types of CSS 3 types: Inline, Embedded (Internal), External
Inline CSS style attribute inside the tag itself
Embedded CSS <style> tag inside <head>
External CSS <LINK REL='stylesheet' TYPE='text/css' HREF='[Link]'>
Rollover Button onmouseover and onmouseout events used
Frameset <frameset cols='30%,70%'> — exact syntax
Frame <frame src='[Link]'> — self closing tag
Nested Frameset frameset inside another frameset
<frameset> vs <body> Cannot use both in same HTML page