DHTML(CSS)
Dynamic Hyper Text
Mark-up Language
First Impression – Did the initial page grab attention?
Interface Design – Is the
menu interface interactive enough and
visually interesting?
Corporate Mildew – Is the site trapped in web of corporate look, feel
and canned marketing speak?
Coriolis Effect – Does
the site generate enough currents of interest based
on design and content for the user to
comeback?
The above points
are emphasize the requirement of good website.
DHTML is a new and emerging technology that has
evolved to meet the increasing demand for eye-catching and mind-catching web
sites.
DHTML combines HTML with Cascading Style Sheets (CSSs)
and Scripting Languages. HTML specifies a web page’s element like table, frame,
paragraph, bullet list, etc. Cascading Style Sheets can be used to determine
and element’s size, color, position and a number or other features. Scripting
Languages (JavaScript and VBScript) can be used to manipulate the web page’s
elements so that styles assigned to them can change in response to user’s
input.
Cascading Style Sheets
Style Sheets are powerful mechanism for adding styles
(e.g. fonts, colors, spacing) to Web documents. They enforce standards and
uniformity throughout a web site and provide numerous attributes to create
dynamic effect. With Style Sheets, text and image formatting properties can be
predefined in a single list. HTML elements on a web page can then be bound to
the style sheet. The advantage of a style sheet includes the ability to make
global changes to all documents from a single location. Style Sheets are said
to Cascade when the combine to specify the appearance of a page.
The Style assignment proce3ss id accomplished with the
<STYLE> … </STYLE> tags.
The syntax for making the assignment is simple. Between the <STYLE>
…</style> HTML tags, specific style attributes are listed. The
<STYLE> … </STYLE> tags arte written within the <head>…
</head> Tags.
Ex.1:
<HTML>
<HEAD>
<TITLE>
Working with Style Sheets using </TITLE>
<STYLE Type =
"text/css">
H1{font-family:arial,helvetica}
p{font-size:12pt;
font-style:italic}
</STYLE></HEAD>
<BODY>
<H1>Introduction
to Computer Systems</h1>
<p>A great
majority of the computers of our daily use are
known as general purpose machines.</p>
</BODY>
</HTML>
Font Attributes
|
Attributes |
Value |
|
Font-family |
A comma-delimited sequence of font family
names (serif, sans-serif, cursive) |
|
Font-style |
|
|
Font-weight |
|
|
Font-size |
A term
that denotes absolute size(xx-small, x-small, small, medium, large, x-large,
xx-large),relative size(larger, smaller), a number (of pixels), percentage
(of the parent element’s size) |
|
Line-height |
Put
space between lines in the paragraph. |
Color and Background Attributes
|
Attributes |
Value |
|
color |
Sets an element’s text-color. A color name or a color code |
|
background-color |
Specifies
the color in an element’s background. A
color name or a color code |
|
background-image |
Sets the background image. A URL or none |
|
background-repeat |
With a
background image specified, sets up how the image repeats throughout the
page. repeat-x(repeats horizontally), repeat-y(repeat vertically),
repeat(both),no-repeat |
Ex.2
<html>
<title>backgroung color</title>
<body>
<style>
body{
background-color:#b0c4de;
}
</style>
</body>
<h1>Hello…… students</h1>
</html>
Ex.3
<html>
<title>backgroung color</title>
<body>
<style>
body{
background-image:url("G:\photo\ENGLISH
BUETY\~jBIKA00.jpg");
}
</style>
</body>
<h1>Hello…… students</h1>
</html>
Ex.4
<html>
<title>backgroung color</title>
<body>
<style>
body{
background-image:url("G:\photo\ENGLISH BUETY\~jBIKA00.jpg");
background-repeat:no-repeat;
background-position:right-top;
}
</style>
</body>
<h1>Hello…… students</h1>
<p>jhskdfhksjhfhfkshfksjhfkjshdfkjhskdfhskfhksjhf
Sdfsdhfkjhsdkljfhkjsfh</p>
</html>
Ex.5
<HTML>
<HEAD>
<TITLE>
css alignment class </TITLE>
<STYLE>
H1{
text-align:center;
}
P .date{
Text-align:right;
}
p. main{
text-align:justify;
</STYLE>
</HEAD>
<BODY>
<H1>Introduction
to Computer Systems</h1>
<p class=”date> may
2014</p>
<p
class=”main”> A great majority of the computers of our daily use are
known as general purpose machines</p>
</BODY>
</HTML>
Ex.6
<html>
<title>text-attribute</title>
<style>
.p1{text-decoration:underline}
.p2{text-decoration:overline}
.p3{text-decoration:line-through}
.p4{text-decoration:blink}
.p5{text-transform:uppercase}
.p6{text-transform:lowercase}
</style>
<body>
<p class=p1>hello…</p>
<p class=p2>How are you?</p>
<p class=p3>I’m fine. Thank you.</p>
<p class=p4>And Who are you?</p>
<p class=p5>I’m ravi.you know.</p>
<p class=p6>oh… my dear friends..</p>
</body>
</html>
Ex.7
<html>
<title>hyperlink</title>
<style>
a:link{
background-color:#b2ff99;
}
a:visited{
background-color:#ffff85;
}
a:hover{
background-color:#ff704d;
}
a:active{
background-color:#ff704d;
}
</style>
<body>
<p><b><a href="G:\photo\ENGLISH
BUETY\~jBIKA00.jpg">This is link.</a></b></p>
<p><b>Note.:</b>a:link must come after
a:hover</p>
</body>
</html>
List
Attributes
|
Attributes |
Value |
|
list-style |
Disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-alpha, none |
|
list-style-position |
inside, outside |
|
list-style-image |
Image will appear instead of symbols |
Ex.8
<HTML>
<STYLE >
BODY{margin-top:5%}
H1{font-family:arial,helvetica;font-size:26pt;color:green}
UL{list-style-type:lower-roman}
</STYLE>
<BODY>
<H1>Introduction to Computer
Systems</H1>
<H4>Following are the programs of
MS-Office</H4>
<B><UL>
<LI>MS-Office
<LI>MS-Excel
<LI>MS-PowerPoint
<LI>MS-Access
<LI>MS-Front Page
<LI>MS-Out Look
<LI>MS-OneNote
</UL></B>
</BODY>
</HTML>
Ex.9
Border Attributes
|
Attributes |
Value |
|
border-style |
Solid, double, groove, ridge, insert,
outset. |
|
border-color |
A color name or color code. |
|
border-width |
Thin, medium, think or length |
|
border-top-width |
Thin, medium, think or length |
|
border-bottom-width |
Thin, medium, think or length |
|
border-left-width |
Thin, medium, think or length |
|
border-right-width |
Thin, medium, think or length |
|
border-top |
Specifies width, color and style |
|
border-bottom |
Specifies width, color and style |
|
border-left |
Specifies width, color and style |
|
border-right |
Specifies width, color and style |
|
border |
Set all properties at once |
Ex.10:
<HTML>
<TITLE>
Working with Style Sheets using BorderAttributes</TITLE>
<STYLE>
H1{font-family:arial,helvetica;font-size:26pt;color:green}
P{font-size:12pt;
font-style:italic;font-
weight:bold;color:#23358e;border-color:pink;border-
style:groove;border-width:thikck
</STYLE>
<BODY>
<H1>Introduction to Computer
Systems</H1>
<P>We should emphasize at the outset
that the effort to
build computers has not originated at one
single place.computer originated on Iowa State University campus in the early
1940s</P>
</BODY>
</HTML>
Ex.11
<html>
<title>First letter </title>
<style>
p::first-letter {
font-size: 200%;
font-weight: bold;
}
</style>
<body>
<p>My name is Hari Prasad Kori.</p>
</body>
</html>
Ex.12
<html>
<title>Workinfg With DIVs</title>
<body>
<DIV ID=box1
Style="background-color:red;position:absolute;left:280;top:100;width:20">
<img
src="G:\photo\ENGLISH BUETY\~jBIKA00.jpg"></div>
<DIV ID=box2
Style="background-color:green;position:absolute;left:380;top:100;width:20">
<img
src="G:\photo\ENGLISH BUETY\~jBIKA00.jpg"></div>
<DIV ID=box3
Style="background-color:yellow;position:absolute;left:280;top:150;width:20">
<img
src="G:\photo\ENGLISH BUETY\~jBIKA00.jpg"></div>
<DIV ID=box4
Style="background-color:aqua;position:absolute;left:380;top:150;width:20">
<img
src="G:\photo\ENGLISH BUETY\~jBIKA00.jpg"></div>
</body>
</html>
Ex.13
<html>
<head>
<style>
ul.a
{list-style-type:circle;}
ul.b
{list-style-type:disc;}
ul.c
{list-style-type:square;}
ol.d
{list-style-type:armenian;}
ol.e
{list-style-type:cjk-ideographic;}
ol.f
{list-style-type:decimal;}
ol.g
{list-style-type:decimal-leading-zero;}
ol.h
{list-style-type:georgian;}
ol.i
{list-style-type:hebrew;}
ol.j
{list-style-type:hiragana;}
ol.k
{list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n
{list-style-type:lower-alpha;}
ol.o
{list-style-type:lower-greek;}
ol.p
{list-style-type:lower-latin;}
ol.q
{list-style-type:lower-roman;}
ol.r
{list-style-type:upper-alpha;}
ol.s
{list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u
{list-style-type:none;}
ol.v
{list-style-type:inherit;}
</style>
</head>
<body>
<ul
class="a">
<li>Circle
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
<ul
class="b">
<li>Disc
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
<ul
class="c">
<li>Square
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ul>
<ol
class="d">
<li>Armenian
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="e">
<li>Cjk-ideographic
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="f">
<li>Decimal
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="g">
<li>Decimal-leading-zero
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="h">
<li>Georgian
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="i">
<li>Hebrew
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="j">
<li>Hiragana
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="k">
<li>Hiragana-iroha
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="l">
<li>Katakana
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="m">
<li>Katakana-iroha
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="n">
<li>Lower-alpha
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="o">
<li>Lower-greek
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="p">
<li>Lower-latin
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
<ol
class="q">
<li>Lower-roman
type</li>
<li>Tea</li>
<li>Coca
Cola</li>
</ol>
</body>
</html>
Ex.14
<html>
<head>
<style>
table,th,td
{
border:1px solid
black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jay</td>
<td>20</td>
</tr>
<tr>
<td>Sanjay</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Ex.15
<html>
<title>indroduction</title>
<style
type="text/css">
body{background-color:pink}
h1{font-family:Bauhaus 93;color:red;font-style:Narrow Bold
Italic;font-size:55pt;}
h2{font-family:BernhardFashion BT;color:blue;font-style:Narrow
Bold;font-size:45pt;}
h3{font-family:Blackadder
ITC;color:yellow;font-style:Italic;font-size:35pt;}
h4{font-family:Brush Script
MT;color:white;font-style:oblique;font-size:100pt;}
</style>
</body>
<h1>introduction</h1>
<h2>How are you ?</h2>
<h3>I am fine. thank
you</h3>
<h4>Who are you?</h4>
</html>
0 Comments