APOLLO ARTS AND SCIENCE COLLEGE CHENNAI

UNIT III WEB DESIGN AND DEVELOPMENT

UNIT III:

XML & DHTML: Cascading style sheet (CSS)-what is CSS-Why we use

CSS-adding CSS to your web pages-Grouping styles-extensible markup language
(XML). Dynamic HTML: Document object model (DCOM)-Accessing HTML &
CSS through DCOM Dynamic content styles & positioning-Event bubbling-data
binding.

CSS

 CSS stands for Cascading Style Sheets. It is a stylesheet language used

to style and enhance website presentation.
 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 is one of the main three components of a webpage along

with HTML and JavaScript.
 HTML adds Structure to a Webpage, JavaScript adds logic to it and CSS
makes it visually visually appealing or stylish. It controls the layout of a web
page i.e. how HTML elements will be displayed on a webpage.
 CSS was released (in 1996), 3 years after HTML (in 1993). The main idea
behind its use is, it allows the separation of content (HTML) from presentation
(CSS). This makes websites easier to maintain and more flexible.

1
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

CSS AND XML

CSS stands for Cascading Style Sheets. It is a rule-based language which is

used to describe the look and formatting of a document written in HTML.
It is used with HTML to change the style of web pages. It can also be used
with XML documents. XML, short for eXtensible Markup Language, is a set of
tags and codes that help carry the data presented on the website.

USES OF CSS

o CSS Stands for "Cascading Style Sheet." Cascading style sheets are
used to format the layout of Web pages.
o They can be used to define text styles, table sizes, and other aspects of
Web pages that previously could only be defined in a page's HTML,
o CSS are a powerful way to separate content from design in our Web
Forms applications.
o CSS helps Web developers create a uniform look across several pages
of a Web site.
o Instead of defining the style of each table and each block of text
within a page's HTML, commonly used styles need to be defined only
once in a CSS document.
o Once the style is defined in cascading style sheet, it can be used by
any page that references the CSS file.
o CSS makes it easy to change styles across several pages at once.
o CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.

ADVANTAGES OF CSS

 Separation of Style and Structure:

o The basic idea behind CSS is to separate the structure of the document
from the presentation of the document.
 Easier to maintain and update:
o When CSS separates you website's content from its design language,
we can easily modify and dramatically reduce our file transfer size.

 Greater consistency in design:

o By making one change to o website's CSS style sheet, we can
2
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

automatically make it to every page of your website.

 Greater Control of Presentation:

o CSS has more formatting options over HTML such as options to
control the spacing and leading text, CSS can also determine in what
order the page itself displays Possible present the same page
differently to different media isa making our documents printable.

 Lightweight code.

 Faster Web Page Download Time:

o Using cascading style-sher generally leads to less code behind our
web pages which helps the download times of a page.

 Search Engine Optimization:

o Because our CSS site contains les code and has a simpler structure it's
easier to read not only for u but also for search engine spiders.
Allowing search engine spiders get through your code faster means
your web pages can be indem faster.

 Greater accessibility.

 Browser Compatibility:
o CSS stylesheets increase your websi adaptability and ensure that more
visitors will be able to view you website.

o -It can control the layout of multiple web pages all at once.

CSS SYNTAX

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

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

3
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

o The declaration block contains one or more declarations separated by

semicolons.
o Each declaration includes a CSS property name and a value, separated
by a colon.
o Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

EXAMPLE

<html>
<head>
<style>
body
{
background-color: lightblue;
}
h1
{
color: white;
text-align: center;
}
p
{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

<p>THIS IS MY CSS SAMPLE PROGRAM</p>
<p>This is a paragraph.</p>

</body>
</html>

4
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

ADD CSS TO WEB PAGE

EMBEDDING CSS INTO A WEB PAGE

When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

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

1.INTERNAL CSS

o An internal style sheet may be used if one single HTML page has a
unique style.
o The internal style is defined inside the <style> element, inside the
head section.
o Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
o Place the CSS styles within a <style> tag inside the HTML file,
usually inside the <head> section.

5
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE FOR INTERNAL CSS

<html>
<head>
<!-- Using Internal CSS -->
<style>
h3 {
color: red;
}
</style>
</head>
<body>
<!-- CSS is applied here -->
<h3>Welcome To Internal CSS </h3>

<p>CSS </p>
</body>
</html>

OUTPUT

2. INLINE CSS

 An inline style may be used to apply a unique style for a single

element.

 To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.

6
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE

Inline styles are defined within the "style" attribute of the relevant element:

Use the style attribute on the HTML element to add styles to the web page.
It is used for small projects.

<html>
<body>
<!-- Using Inline CSS -->
<h3 style="text-align: center;">
Welcome To CSS
</h3>

<p>EXAMPLE FOR INLINE CSS</p>

</body>
</html>

OUTPUT

3.EXTERNAL CSS

With an external style sheet, you can change the look of an entire website by
changing just one file!
Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

7
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

o An external style sheet can be written in any text editor, and must be
saved with a .css extension.

o The external .css file should not contain any HTML tags.

o Here is how the "mystyle.css" file looks: "mystyle.css"

Body
{
background-color: lightblue;
}
h1
{
color: navy;
margin-left: 20px;
}

OUTPUT

8
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

CSS SELECTORS

 A CSS selector selects the HTML element(s) you want to style.

 CSS selectors are used to "find" (or select) the HTML elements you
want to style.
We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship
between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)

CSS ELEMENT SELECTOR

The element selector selects HTML elements based on the element name.

EXAMPLE

<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

9
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

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

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

10
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

CSS CLASS SELECTOR

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

11
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

CSS 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>

12
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

CSS GROUPING SELECTOR

The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):

h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;color: red;
}

 It will be better to group the selectors, to minimize the code.

 To group selectors, separate each selector with a comma.

13
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE

<html>
<head>
<style>
h1, h2, p
{
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

OUTPUT

GROUPING STYLES

 Grouping in CSS is a technique used to reduce code redundancy and

write clean, concise easy to follow code.
 There are going to be many instances in which multiple CSS selectors
will have the same declarations.
 In these cases, we can group all the selectors together and write the

14
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

declarations only one time.

 For example, if we want to apply the exact same font size and color to
three different headings, we can write it as shown below. However,
this method will waste space.
hl
{
font-size: 10px;
color: green;
}
h2
{
font-size: 10px;
color: green;
}
h3
{
font-size: 10px;
color: green;
}

 Instead, we can shorten the code by grouping it.

 All three headings have the exact same declarations, we can write the
three heading selectors separated by a comma .

EXAMPLE:

h1, h2, h3
{
font-size: 10px;
color: green;
}
It improves the performance by reducing page loading time and save storage
space.

15
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

XML
Extensible Markup Language (XML) is a type of markup language that
establishes a set of guidelines for encoding texts in a way that is both machine-
and human-readable.
For storing and transferring data on the web and in many other applications,
XML is widely used. XML steps in as a versatile tool for encoding and
organizing data in a way that both humans and machines can comprehend.

 XML stands for eXtensible Markup Language

 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive

SYNTAX

<element attribute="value">Text content</element>

EXAMPLE

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The XML above is quite self-descriptive:

 It has sender information

 It has receiver information
 It has a heading
 It has a message body

The XML above does not DO anything. XML is just information wrapped in
tags.

Someone must write a piece of software to send, receive, store, or display it:

16
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Note
To: Tove
From: Jani
Reminder
Don't forget me this weekend!

<book>
<title>Harry Potter and the Sorcerer's Stone</title>
<author>J.K.Rowling</author>
<year>1997</year>
</book>

XML with Attributes

<student id="001">
<name>John Doe</name>
<age>25</age>
<grade>A</grade>
</student>

XML and HTML were designed with different goals:

 XML was designed to carry data - with focus on what data is

 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are

The tags in the example above (like <to> and <from>) are not defined in any
XML standard. These tags are "invented" by the author of the XML document.

HTML works with predefined tags like <p>, <h1>, <table>, etc.

With XML, the author must define both the tags and the document structure.

 XML simplifies data sharing

 XML simplifies data transport
 XML simplifies platform changes
 XML simplifies data availability

17
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

APPLICATIONS OF XML

 Web development: XML is used to store and exchange data in web

applications.
 Mobile development: XML is used to store and exchange data in mobile
applications.
 Desktop development: XML is used to store and exchange data in desktop
applications.
 Data exchange: XML is often used to exchange data between different
applications and systems.
 API: XML is often used to implement APIs. APIs allow different applications
to communicate with each other and exchange data.

FEATURES OF XML

 Flexibility: XML is a flexible data format as it allows you to create your own
custom tags to meet your specific needs.
 Extensibility: XML is extensible as it enables you to add new features to
XML without breaking existing applications.
 Platform-independence: XML files can be read and processed on any
platform, regardless of the operating system or programming language.
 Human-readability: XML files are also human-readable, which makes them
easy to edit and maintain.
 Machine-readability: XML files can be easily parsed and processed by
computers. This makes XML ideal choice to store and exchange.

ADVANTAGES OF XML

 Human-readable: XML's straightforward tag-based syntax makes it easy

for humans to read and understand.
 Interoperability:
 XML bridges the communication gap between disparate systems, enabling
seamless data exchange.
 Flexibility: XML's adaptability allows it to handle a wide range of data
types and structures,

18
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

LIMITATIONS /DISADVANTAGES OF XML

 Verbosity: XML can sometimes be verbose, resembling a verbose

storyteller who takes longer to convey information, leading to larger file
sizes.
 Complexity: Managing namespaces, schemas, and other XML-related
concepts can add layers of complexity
 Parsing Overhead: Parsing XML documents can be resource-intensive,
especially for large datasets

DYNAMIC HTML: DHTML

Document object model (DCOM)

DHTML combines HTML, CSS, JavaScript, and the Document Object

Model (DOM) to create dynamic content.

It uses the Dynamic Object Model to modify settings, properties, and methods.

HTML:
HTML stands for Hypertext Markup Language and it is a client-side
markup language. It is used to build the block of web pages.

Javascript:
It is a Client-side Scripting language. Javascript is supported by most of
browsers, and also has cookie collection to determine the user’s needs.

CSS:
The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of
the web pages and helps in designing of the pages. The CSS rules for DHTML
will be modified at different levels using JS with event handlers which adds a
significant amount of dynamism with very little code.

DOM:
It is known as a Document Object Model which acts as the weakest link in
it. The only defect in it is that most of the browsers does not support DOM. It is a
way to manipulate the static content.

19
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

DHTML is not a technology; rather, it is the combination of three different

technologies, client-side scripting (JavaScript or VBScript), cascading style
sheets and document object model.

Uses of DHTML

o It is used for designing the animated and interactive web pages that
are developed in real-time.
o DHTML helps users by animating the text and images in their
documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or
rollover buttons.
o This term is also used to create various browser-based action games.

Features of DHTML

 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 web page.

20
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

 It provides the facility for using the events, methods, and properties.
And, also provides the feature of code reusability.
 It also provides the feature in browsers for data binding.
 Using DHTML, users can easily create dynamic fonts for their web
sites or web pages.
 With the help of DHTML, users can easily change the tags and their
properties.
 The web page functionality is enhanced because the DHTML uses
low-bandwidth effect.

DOCUMENT OBJECT MODEL (DOM)

In DHTML (Dynamic HTML), the Document Object Model (DOM) is a
programming interface that represents an HTML document as a tree-like structure,
allowing developers to access and manipulate the content, structure, and style of a
web page dynamically using JavaScript, essentially enabling interactive and changing
elements on the page after it loads.

21
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

XML AND DTD

DTD STANDS FOR DOCUMENT TYPE DEFINITION.

A DTD defines the structure and the legal elements and attributes of an
XML document.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declaration above contains a reference to a DTD file. The

content of the DTD file is shown and explained below.

XML DTD

The purpose of a DTD is to define the structure and the legal elements and
attributes of an XML document:

Note.dtd:

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

The DTD above is interpreted like this:

!DOCTYPE note - Defines that the root element of the document is note

22
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

!ELEMENT note - Defines that the note element must contain the elements: "to,
from, heading, body"
!ELEMENT to - Defines the to element to be of type "#PCDATA"
!ELEMENT from - Defines the from element to be of type "#PCDATA"
!ELEMENT heading - Defines the heading element to be of type "#PCDATA"
!ELEMENT body - Defines the body element to be of type "#PCDATA"

Document Type Definition and XML Schema Definition both contain a set
of rules that control the structure and elements of XML files, but they are different
in syntax and usage. They check whether an XML document has a valid structure
or not.

DTD stands for Document Type Definition and DTD contains a set of rules
that control the structure and elements of XML files. It is used to describe the
attributes of XML language precisely. It can be classified into two types namely
internal DTD and external DTD. It can be specified inside a document or outside a
document. DTD mainly checks the grammar and validity of an XML document.

Features of DTD
 It defines the compulsory and optional elements in the XML document.
 It validates the structure of the XML document.
 It checks for the grammar of the XML document.
 It describes the order in which the element occurs.

Advantages of DTD

 We can define our own format for the XML files by DTD.
 It helps in validation of XML file.
 It provides us with a proper documentation.
 It enables us to describe a XML document efficiently.

Disadvantages of DTD

 DTDs are hard to read and maintain if they are large in size.
 It is not object oriented.
 The documentation support is limited.
 DTD doesn’t support namespaces.

23
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

In HTML, DOM stands for Document Object Model, which is a

programming interface that represents the structure of a web page. The DOM
allows programs to change the page's content, style, and structure.
The DOM represents a web page as a tree of objects, with each branch
ending in a node.
The root node is the HTML element, and the head and body elements are
below it.
The DOM allows programmers to access, modify, add, or delete elements
and content.
Programmers can attach event handlers to nodes, which are executed when
an event occurs.

Using the DOM

The DOM can be used with scripting languages like JavaScript.

The DOM can be used to build documents, navigate their structure, and add,
modify, or delete elements and content.

The Document Object Model (DOM) is a programming API for HTML and
XML documents. It defines the logical structure of documents and the way a
document is accessed and manipulated.

HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model
of the page.
The HTML DOM model is constructed as a tree of Objects:
The HTML DOM Tree of Objects

24
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

HTML DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or
change.
The HTML DOM can be accessed with JavaScript (and with other
programming languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an
HTML element).
A method is an action you can do (like add or deleting an HTML element).

The following example changes the content (the innerHTML) of

the <p> element with id="demo":

<html>
<body>
<h2>My First Page</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

25
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

My First Page
Hello World!

getElementById is a method, while innerHTML is a property.

The getElementById Method
The most common way to access an HTML element is to use the id of the
element.
In the example above the getElementById method used id="demo" to find
the element.

The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML
property.

The innerHTML property is useful for getting or replacing the content of

HTML elements.

The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.

The HTML DOM document object is the owner of all other objects in your web
page.

The HTML DOM Document Object

The document object represents your web page.

If you want to access any element in an HTML page, you always start with
accessing the document object.

Below are some examples of how you can use the document object to access and
manipulate HTML.

26
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Finding HTML Elements

Method Description

document.getElementById(id) Find an element

by element id

document.getElementsByTagName(name) Find elements by

tag name

document.getElementsByClassName(name) Find elements by

class name

JAVASCRIPT HTML DOM - CHANGING CSS

Dynamic content in HTML can be styled and positioned using CSS

properties and embedded scripts.

Dynamic content

o Dynamic HTML allows for changes to HTML documents, such as

changing the background color of a page when a button is clicked.
o Dynamic tags can be used to insert customized data, such as post
titles, author information, and more.

The HTML DOM allows JavaScript to change the style of HTML elements.

Changing HTML Style

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

The following example changes the style of a <p> element:

27
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Example

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>

OUTPUT

JavaScript HTML DOM

Changing the HTML style:
Hello World!
Hello World!

Using Events

The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when "things happen" to HTML

elements:

 An element is clicked on
 The page has loaded
 Input fields are changed

This example changes the style of the HTML element with id="id1", when the user
clicks a button:

<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">

28
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Click Me!</button>
</body>
</html>

OUTPUT

CSS POSITIONING

 The position property specifies the positioning method for an element.

 The five position values are static, relative, fixed, absolute, and sticky.
 Relative positioning moves an element relative to its normal position.
 The top, bottom, left, and right properties can be used to move an element.
 The sticky element toggles between relative and fixed, depending on the
scroll position.
CSS positioning defines how elements are placed within a web page. It allows
you to control the layout, stacking order, and alignment of elements. The primary
positioning types in CSS are:

Position
Property Description

An element with position: fixed property remains in the same

Fixed
position relative to the viewport even when the page is scrolled.

Default positioning method. Elements with position: static are

Static
positioned according to the normal flow of the document.

Elements with position: relative are positioned relative to their

Relative normal position in the document flow. Other elements will not fill
the gap left by this element when adjusted.

29
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Position
Property Description

Positioned concerning its nearest non-static ancestor. Elements

Absolute
with position: absolute are taken out of the normal document flow.

Combines features of position: relative and position: fixed. The

Sticky element is treated as position: relative until it reaches a specified
threshold, then it becomes position: fixed.

1. Static Positioning
Static is the default position of an element. It does not accept properties
like top, left, right, or bottom.

The boxes follow the normal flow of the document.

There’s no overlap or displacement of elements.

<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
</body>
</html>

30
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

2. Relative Positioning
Relative positioning places an element relative to its normal position.
You can move it using top, left, right, or bottom.

<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.relative {
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div>Box 1</div>
<div class="relative">Box 2</div>
</body>
</html>

OUTPUT

31
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

3. Absolute Positioning
Absolute positioning removes the element from the document flow and
places it relative to the nearest ancestor with a positioning context (relative,
absolute, or fixed).

<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
border: 2px solid black;
margin: 20px auto;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>Container with Relative Positioning</p>
<div class="absolute">Absolutely Positioned Element</div>
</div>
</body>
</html>

OUTPUT

32
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

The pink box (.absolute) is positioned 50px down and 50px right within the
.container.
It does not affect other elements in the flow.

4. Fixed Positioning
Fixed positioning removes the element from the flow and positions it
relative to the viewport. It remains in place even when the page scrolls.

<html>
<head>
<style>
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgreen;
padding: 20px;
border: 2px solid black;
}
.content {
height: 1200px;
padding: 10px;
}
</style>
</head>
<body>

33
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

<h2>Fixed Positioning Example</h2>

<div class="fixed">Fixed Box</div>
<div class="content">
<p>Scroll down to see that the fixed box stays in place.</p>
<p>This content simulates a long page.</p>
</div>
</body>
</html>

OUTPUT

The fixed element stays at the top-right corner of the viewport even as the user
scrolls.

5. Sticky Positioning

Sticky positioning switches between relative and fixed based on the scroll
position

<html>
<head>
<style>
.sticky {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky">I am sticky</div>
<p>Scroll down to see the effect.</p>
<div style="height: 1000px;"></div>
</body>
34
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

</html>

OUTPUT

The sticky element stays at the top of the viewport as you scroll but only
within its containing element.

EVENT BUBBLING

Event bubbling is a mechanism in the DOM (Document Object Model)

where an event triggered on a nested element propagates upwards through its
ancestors. It starts from the target element and bubbles up to the parent,
grandparent, and so on, until it reaches the <html> element.

Event Bubbling Works

 A user interacts with an element (e.g., clicks a button inside a <div>).
 The event first triggers on the target element.
 Then, it propagates up through its parent elements until it reaches the
document root.
Example of Event Bubbling

<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent Div
<button id="child">Click Me</button>
35
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

</div>
<script>
document.getElementById("parent").addEventListener("click", function()
{
alert("Parent Div Clicked!");
});

document.getElementById("child").addEventListener("click", function()
{
alert("Button Clicked!");
});
</script>
</body>
</html>

OUTPUT

If you click the button, the event fires on the button first (child).
Then, it bubbles up and triggers the event on the parent <div>.

Stopping Event Bubbling

To prevent an event from propagating up the DOM, use event.stopPropagation().

36
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

document.getElementById("child").addEventListener("click", function(event) {
alert("Button Clicked!");
event.stopPropagation(); // Prevents bubbling to parent
});

Event bubbling helps in event delegation, reducing the need to add multiple event
listeners.
Use stopPropagation() if you don’t want events to propagate to parent elements.

DATA BINDING
Data binding is the process that couples two data sources together and
synchronizes them. With data binding, a change to an element in a data set
automatically updates in the bound data set.

Data binding may be used for many reasons, such as to link an application's
user interface (UI) and the data it displays, for data entry, reporting and in text box
elements. It also lets internet users manipulate the representation of data in the
elements of a web page without needing to use a complicated programming or
scripting processes.

Data and data objects of different logic functions can be bound together in
data binding. Data types with different languages can also be bound, such as data
binding Extensible Markup Language (XML) and UI.

Each data change in one data set automatically reflects in the other bound
data set. In binding syntax, the data source is the data provider, and the other data
set is the data consumer. The binding forms the link between the data provider and
the data consumer, enabling the connection between visual element data and a data
source.

Data binding eliminates the need for Document Object Model (DOM)
manipulation. DOM is an application programming interface, or API, for
Hypertext Markup Language (HTML) and XML.

37
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Types of data binding are typically defined by their data flow and include
the following:

One-way binding is a relatively simple type of data binding. Changes to the data
provider update automatically in the data consumer data set, but not the other way
around.
Two-way binding is where changes to either the data provider or the data consumer
automatically updates the other.
One-way-to-source binding is the reverse of one-way binding. Changes to the data
consumer automatically update the data provider but not the other way around.
One-time binding is where changes to the data provider do not automatically
update the data consumer. This approach is useful when only a snapshot of the data
is needed, and the data is static.
Data binding can be simple or complex. Microsoft defines simple data
binding as the ability to bind to a single data element. Complex data binding is
when multiple elements are bound together.

Data binding libraries enable users to bind UI components to data sources in

a declarative format. These libraries also provide classes and methods to make
changes in data observable. Consequently, collections, fields and objects are more
visible.

38
 APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Data binding examples

The following examples show how data binding can be used:

 Reporting. Binding is a common way to compile reports that display data from
a data source to a screen or printer.
 Data entry. Data binding is also a common way to enter large amounts of data
and keep it updated and synchronized to a data source.
 Lookup tables. Lookup tables are information tables that are typically a part of
larger data displays. Data binding and controls are used to display and change
data.
 Master-detail formats. This is a model for communication protocols where
one device or process controls another. These formats may have two tables of
data bound together.
Data binding tools
Data binding tools include the following:

 Visual Studio is a Microsoft product that provides design tools for working
with custom objects as a data source in applications. Visual Studio is also used
to bind UI controls. Changes made to objects are automatically made in a
database.
 Data Binding Library is a support library for Android developers that binds
UI components to data sources.

39