Scribd
Upload
2 views

web technology unit 3

The document provides an overview of Dynamic HTML (DHTML), which combines HTML, CSS, JavaScript, and DOM to create interactive web pages. It explains the components, uses, features, and events of DHTML, as well as details about CSS, including its syntax, types, and selectors. Additionally, it covers the Document Object Model (DOM) and its methods for accessing and modifying document content.

Uploaded by

pragathiswaranpsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

web technology unit 3

The document provides an overview of Dynamic HTML (DHTML), which combines HTML, CSS, JavaScript, and DOM to create interactive web pages. It explains the components, uses, features, and events of DHTML, as well as details about CSS, including its syntax, types, and selectors. Additionally, it covers the Document Object Model (DOM) and its methods for accessing and modifying document content.

Uploaded by

pragathiswaranpsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

1) INTRODUCTION TO DHTML

 DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
 Dynamic HTML is not a markup or programming language but it is a term that combines the
features of various web development technologies for creating the web pages dynamic and
interactive.

Components of Dynamic HTML:

 DHTML consists of the following four components or languages:


1. HTML 4.0
2. CSS
3. JavaScript
4. DOM.

HTML 4.0:

HTML is a client-side markup language, which is a core component of the DHTML. It defines the
structure of a web page with various defined basic elements or tags.

CSS:

CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the style
and layout of the HTML elements on the web pages.

JavaScript:

JavaScript is a scripting language which is done on a client-side. The statements in JavaScript are the
commands which tell the browser for performing an action.

DOM:

DOM is the document object model. It is a w3c standard, which is a standard interface of programming
for HTML. It is mainly used for defining the objects and properties of all elements in HTML.

Uses of DHTML:

Following are the uses of DHTML (Dynamic HTML):

 It is used for designing the animated and interactive web pages that are developed in real-time.
 DHTML helps users by animating the text and images in their documents.
 It also allows the page authors for including the drop-down menus or rollover buttons.
 It is also used to add the ticker on various websites, which needs to refresh their content
automatically.
Features of DHTML:

Following are the various characteristics or features of DHTML (Dynamic HTML):

 Its simplest and main feature is that we can create the web page dynamically.
 Dynamic Style is a feature, that allows the users to alter the font, size, color, and content of a
webpage.
 It provides the facility for using the events, methods, and properties. And, also provides the
feature of code reusability.

DHTML Events:

 An event is defined as changing the occurrence of an object.


 It is compulsory to add the events in the DHTML page. Without events, there will be no
dynamic content on the HTML page. The event in HTML, which triggers the actions in the web
browsers.

Example of events:

1. Click a button.
2. Submitting a form.
3. An image loading or a web page loading, etc.

2) Cascading Style Sheet:


 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files.

CSS Syntax:

 A CSS rule consists of a selector and a declaration block


 A selector, points to the HTML element you want to style.
 The declaration is a 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 enclosed by
curly braces{}.

Types of CSS:

There are three ways of inserting a style sheet:

1. Inline - CSS
2. Internal CSS
3. External CSS

Inline CSS :

 Inline CSS involves applying styles directly to individual HTML elements using the style attribute.
 This method allows for specific styling of elements within the HTML document, overriding any
external or internal styles.
 When multiple styles are applied to the same element, CSS follows a specific order of
precedence to determine which style to apply. The order of precedence is:
1. Inline styles (highest priority).
2. Internal style sheet.
3. External style sheet (lowest priority).

Example:

<html>

<body>

<h1 style="color:blue;text-align:center;">TYPES OF CSS</h1>

<p style="color:red;">Inline CSS</p>

</body>

</html>

Internal CSS:

 The internal style is defined inside the <style> element, inside the head section.
 It applies styles to specified HTML elements, The CSS rule set should be within the HTML file in
the head section i.e. The internal style is defined inside the <style> element, inside the head
section.

Example:

<html>

<head>

<style>

body {

background-color: blue;

color:white;
font-size:40px;

h1 {

color: yellow;

margin-left: 40px;}

</style>

</head>

<body>

<h1>Internal CSS</h1>

<p>Computer Science</p>

</body>

</html>

External CSS:

 External CSS contains separate CSS files that contain only style properties with the help of tag
attributes (For example class, id, heading, … etc).
 CSS property is written in a separate file with a .css extension and should be linked to the HTML
document using a link tag <link>, inside the head section.

Example:

HTML File:

<html>

<head>

<link rel="stylesheet" href="mystyle.css">

</head>

<body>

<h1>External CSS </h1>

<p>Style applied by an external file</p>

</body>
</html>

CSS File (file name: mystyle.css):

body{

background-color:pink;

h1{

color:blue;

font-style:bold;

text-align:center;

p{

text-align:right;

font-style:italic;

3) CSS Simple selectors:


 A CSS selector selects the HTML elements you want to style.
 CSS Simple selectors ,select THE html elements based on name, id, class,etc.
1. Based on Name:
 The element selector selects HTML elements based on the element name.

Example:

all <p> elements on the page will be center-aligned, with a blue text color.

p{

text-align: center;

color: blue;
}

2. Based on Id:

 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:

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

3.Based on Class:

 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the class name.

Example:

<html>
<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

4.Universal selector(*):

 The universal selector (*) selects all HTML elements on the page.

Example:

<html>

<head>

<style>

*{

text-align: center;

color: blue;

</style>

</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

5.Grouping Selector:

 The grouping selector selects all the HTML elements with the same style definitions.
 To group selectors, separate each selector with a comma.

Example:

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: green;

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>
</body>

</html>

4) DOM stands for Document Object Model.


 A Document object represents the HTML document that is displayed in that window.
 The Document object has various properties that refer to other objects which allow access to
and modification of document content.
 The way a document content is accessed and modified is called the Document Object Model,
or DOM.
 The Objects are organized in a hierarchy.

Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.

Document object − Each HTML document that gets loaded into a window becomes a document object.
The document contains the contents of the page.

Form object − Everything enclosed in the <form>...</form> tags sets the form object.

Form control elements − The form object contains all the elements defined for that object such as text
fields, buttons, radio buttons, and checkboxes.

DOCUMENT OBJECT METHODS

close() - Closes the output stream previously opened with document.open().


getElementById() - Accesses the first element with the specified id.

getElementsByName() - Accesses all elements with a specified name.

getElementsByTagName() - Accesses all elements with a specified tagname.

open() - Opens an output stream to collect the output from document.write() or document.writeln().

write() - Writes HTML expressions or JavaScript code to a document.

writeln() - Same as write(), but adds a newline character after each statement.

Example :

<html>

<head>

<title>

Example of DHTML DOM

</title>

</head>

<body>

<font color = "blue">

<p id="demo"> This text changes color when the page loaded. </p>

</font>

<script type="text/javascript">

document.getElementById('demo').style.color = "red";

</script>

</body>

</html>

You might also like