DHTML Reviewed

Learning Outcomes
• What is DHTML?
• What makes a web page dynamic?
• Components in a DHTML
• Steps for developing CSS
• Using CSS in the HTML
• CSS Test Drive
• Another Example
Learning Outcomes (cont.)
• Linking CSS file externally
• Complete Example
• Creating different styles for same
element
• Elaborating classes
• Adding classes to HTML
• Adding styles to <div>
Learning Outcomes (cont.)
• Adding CSS to Descendant elements
• Adding Styles to tables
• An example
• DHTML Advantages and
Disadvantages
What is DHTML?
• A term that denotes HTML in a dynamic
form
• It is a combination of style sheets and
scripts that allows documents to be
animated.
What makes a web page
dynamic?
• Interactivity
• Synchronicity
• Flexibility
• Adaptability
• Activity
Components of DHTML
• CSS-Cascading Style Sheets

• DOM-Document Object Model
• JavaScript
• Event Handler
Steps for developing CSS
• Select desired element you want to style.
• Specify the property you want to style and state
the value and append it with a semicolon.
• Place all the styles in between braces.
eg: p{
background-color : red ;
}
OR
p{ background-color : red ;}
Using CSS in the HTML
....
<html><head>
<title>…</title>
<style type=“text/css”>
p{ background-color : red ; }
</style>
</head>
<body>
<p>Hello World</p>
. . . more of <p> element
.....
</body></html>
Another Example
• When two elements have the same style rule
then we combine the elements.
eg: h1{ font-family : courier,times new roman
verdana,geneva;
font-size : 170%;
color : grey;
}
h2{ font-family : courier,times new roman
verdana,geneva;
font-size : 170%;
color : grey;
}
Elements h1,h2 can be combined as:---
h1,h2
{
font-family : courier,times new roman
verdana,geneva;
font-size : 170%;
color : grey;
}
• If we want to add any extra property only to
element h1 we mention it separately along
with the combined properties.
Linking CSS file externally
• Create a css file HTML in it, let us name it
as “firstcss.css”. In this file <style> and
</style> tags are eliminated as it does not
contain any HTML.
• In the HTML file write the link to the file as
<link type=“text/css” rel=“stylesheet”
href=“firstcss.css”>
• Omit the <style> and </style> tags from the
HTML.
Creating different styles for
same element
• For this we need to create a selector for the class as
This is the class name
p . mycolor{
color : red ;
p is the selector }
Here is the rule for the style

“ . ” is used to specify a class
This selector selects all paragraphs in the mycolor

class
Creating different styles for
same element
• For this we need to create a selector for the class as
This is the class name
p #mycolor{
color : red ;
p is the selector }
Here is the rule for the style
“ # ” is used to select a <p> element if it has id as mycolor
In HTML the id for the tag would be <p

id=“mycolor”>
Elaborating classes
• If we want to share the style rule for more
than one elements then we could do this:
h1. mycolor , p . mycolor{
color : red;
}
• Now if we want that all the elements that
are in class mycolor to have a style than the
better way is
. mycolor { color : red }
• Again if we want any element that has id
mycolor we use
#mycolor { color : red }
Adding classes to HTML
• In the HTML we add the classes as
....
<html><head>
<title>…</title>
<link type=“text/css” rel=“stylesheet”
href=“firstcss.css”>
</head>
<body>
<h1 class=“mycolor”>First CSS</h1>
<p class=“mycolor”>Hello World</p>
. . . more of <p> element
.....
</body></html>
Adding Styles to <div>
• <div id=“mydiv”>
<h1>From my div</h1>
<p> Hello World</p>
</div>
• In the css file we have “mydiv” defined as
# mydiv {
border-width : thin;
border-style : solid;
border-color : #007e7e
width: 200px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: 20px;
text-align : center;
background-image : url(images/my.gif);
}
Add CSS To Descendant
Elements
html
body
h1 h2 div id=mydiv
h2 h3 h3
• Writing a descendant selector
div h2 {
color : red;
}
This rule says to select any <h2> that is a
descendant of a <div>.
• When we have an id for the element
#mydiv h2 {
color : red ;
}
This rule says to select any <h2> that is
descendant of an element with id “mydiv”.
Adding styles to tables
....
<table>
<tr class=“cellcolor”>
<td class=“columncolor”>…</td>
<td>…</td>
</tr>
<tr class=“cellcolor1”>
<td class=“columncolor” >…</td>
<td>…</td>
</tr>
</table>
An Example
CSS(style.css)
#header{
font-family : courier,comic
sans,times new roman;
color: red;
text-decoration:underline;
}
#header1{
color:blue;
font-size : 20px;
}
#header2{
color:#aaabbb;
font-size : 20px;
}
.cellheader{
background-color :#cc6600;
}
.cellcolor1{
background-color : #fffa7a;
}
.cellcolor {
background-color : #fcba7a;
}
.center_font{
text-align: center;
}
caption{
color:red;
font-size : 20px;
}
table {
margin-left: 10px;
margin-right:10px;
border: thin solid black;
caption-side:bottom;
}
HTML(index.html)
<html><head>
<title>CSS EXAMPLE</title>
<link type="text/css" rel="stylesheet"
href="style.css"/>
</head>
<body>
<div style="position: absolute; width:
593px; height: 34px; z-index: 1;
left:197px; top:26px;" id="header">
<h1>Sikkim in India</h1>
</div>
595px; height: 22px; z-index: 2; left:
197px; top: 96px" id='header1'>
<h2>Documenting my trip to
Sikkim</h2>
</div>

198px; top: 145px" id="header2">
<h3>December 22nd 2007</h3>
</div>
198px; top: 197px" id="image">
<img src="./25122007136.jpg"
width="261" height="211">
</div>

600px; top: 160px" id="table">
<br><br>
<table>
<tr class="cellheader">
<th>Places</th>
<th>Date</th>
<th>Temperature(in degree C)</th>
<th>Altitude</th>
</tr>
<tr class="cellcolor">
<td class="center_font">Gangtok</td>
<td class="center_font">23rdDec</td>
<td class="center_font">13</td>
<td class="center_font">10,000ft</td>
</tr>
<tr class="cellcolor1">
<td class="center_font">Changu Lake</td>
<td class="center_font">24thDec</td>
</tr>
<tr class="cellcolor">
<td class="center_font">Roomtake
Monastry</td>
</tr>
<tr class="cellcolor1">
<td class="center_font">Baba Mandir</td>
</tr>
<caption>The places I visited during my

trip to Sikkim</caption>
</table>
<br><br>
</div>
</body>
</html>
DHTML Advantages and
Disadvantages
• Supported by most browsers
• No plug-ins required.
• Small file size (smaller than flash).
• Change the page content without loading new
page.
• Its easy to learn off course.
• Browser and OS incompatibilities.

DHTML Reviewed

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

DHTML Reviewed

Caricato da

Copyright:

Formati disponibili

Learning Outcomes

• CSS-Cascading Style Sheets

Here is the rule for the style

This selector selects all paragraphs in the mycolor

“ # ” is used to select a <p> element if it has id as mycolor

In HTML the id for the tag would be <p

<div style="position: absolute; width:

<div style="position: absolute; width:

<caption>The places I visited during my

Potrebbero piacerti anche