Option of Text Type: DHTML

DHTML
*Dynamic Hypertext Mark Up Language

*It is different type of language, which is supports by both HTML & Java
script.
*It does not create web page without HTML
*It modifies the HTML (tag)
*These language are written inside the HTML tag within "style"
attribute.<br>
Option of text type
Font-family: font name
Font-style: italic/normal
Font-weight: bold/normal
Font-variant: small caps
Text-decoration: underline/ overline /line-through
Text-transform: uppercase/lowercase/capitalize
Vertical-align: super/sub
Font-size: no. in px.
Color: color name
Background-color: color name
Letter-spacing: no. in points
Example 1
<a style="font-family:arial black">Font Family is arial black</a><br>
<a style="font-style:italic">Font style is italic</a><br>
<a style="font-weight:bold">Font weight is bold</a><br>
<a style="font variant:small-caps">font variant is small caps</a><br>
<a style="text-decoration:underline">Text decoration is
underline</a><br><br><br>
<a style="text-decoration:overline">Text decoration is overline</a><br>
<a style="text-decoration:line-through">Text decoration is
linethrough</a><br>
<a style="text-transform:uppercase">Text transform is uppercase</a><br>
<a style="text-transform:lowercase">Text transform is lowercase</a><br>
<a style="text-transform:capitalize">Text transform is capitalize</a><br>
<span style="font-size:20">This is font size 10</span><br>
H<a style="vertical-align:sub">2</a>O. This is vertical align sub<br>
A<a style="vertical-align:super">3</a>This is vertical align supper<br>
<a style="color:blue">This is color</a><br>
© Prince------------------------Contact: 9841599260 1
DHTML
<a style="background-color:blue">This is background color</a><br>
<a style="letter-spacing:10">This is letter spacing 10
</body></html>
Paragraph Settings
text-align: left/right/center/justify
line-height: number in %(above 100%)
margin-left: number in px
margin-right: number in px
margin-top: number in px
margin-bttom: number in px (type in body)
text-indent: no in px.(first line of paragraph)
Example 2
<html><head></head>
<title>Font</title>
<body>
© Prince------------------------Contact: 9841599260 2
DHTML
<p style="font-family:tahoma; text-align:justify; margin-left:20;
margin-right:40; margin-top:30; margin-bottom:40; text-indent:70;
line-height:180%; background-color:gray; color:white">
<a style="font-family:impact; font-weight:bold; font-size:20;

color:red"> NOTE: We can use it inside (p), (div), (H1) tag.</a>
Type a paragraph
</p>
</body>
</html>
BORDER SETTINGS
border: <style><width><color>
Compulsary write these three tags
Name of border styles
(solid; groove; inset; outset)[ridge; dotted; dashed]
METHOD 1
Example one
<img src="flower.jpg" style="border:solid 5 red>
Example two
<html>
<head></head>
<title>Border Setting</title>
<body>
<img src="11.jpg" height="100" width="100" style="border: solid 10
red">solid
<img src="13.jpg" height="100" width="100" style="border: groove 10
red">
<img src="14.jpg" height="100" width="100" style="border: dashed 10
red">
<img src="15.jpg" height="100" width="100" style="border: inset 10 red">
<img src="13.jpg" height="100" width="100" style="border: outset 10 red">
<img src="13.jpg" height="100" width="100" style="border: ridge 10 red">
<img src="13.jpg" height="100" width="100" style="border: dotted 10 red">
© Prince------------------------Contact: 9841599260 3
DHTML
<img src="13.jpg" height="100" width="100" style="border: doubled 10
red">
</body>
</html>
BORDER FOR TEXTBOX AND BUTTON

<input type="text" style="border:solid 3 black; background-color:yellow">
<input type=button value="Next" style="border:dashed 4 red">
METHOD 2
border-style: <style name>
border-width: no in px
border-color: color name
Example
<h1 align=center style="border-style:groove; border-width:10; border-
color:red">KRISHNA & RAMITA</H1>
© Prince------------------------Contact: 9841599260 4
DHTML
METHOD 3
border-top-style: <style name>
border-right-style: <style name>
border-bottom-style:<style name>
border-left-style:<style name>
border-top-width: no in px.
border-right-width: no in px.
border-bottom-width: no in px.
border-left-width: no in px.
border-top-color:color name
border-right-color:color name
border-bottom-color:color name
border-left-color:color name
Note: We can use border in <body><p><h><td><table><input type> tag etc.
example One
<img src="14.jpg" height=300 width=300 style="border-top-style:groove;
border-right-style:solid ; border-bottom-style:dashed ; border-left-style:inset ;
border-top-width:8 ; border-right-width:8 ; border-bottom-width:8 ; border-
left-width:8 ; border-top-color:red ; border-right-color:green ; border-bottom-
color:pink; border-color-left:yellow">
Example Two
Border on Body with shortcut style
<body style="border-style:solid groove inset outset; border-width:10 5 10 5;
border-color:red green yellow pink">
OBJECT SETTING
width : no in px.
height : no in pix.
float: left/right : for ext wrapping
Ex
<html>
<head></head>
<title>Object Setting</title>
<body>
<b>Object Setting</b><br>
Note:
© Prince------------------------Contact: 9841599260 5
DHTML
We can use it in img, table, iframe tag etc.
<img src="16.jpg" style="width:200; height:300; float:left"><br>
<p align=justify>type a paragraph</p>
</body></html>
POSITION SETTING
Position : absolute (for moving object<br>
left : distance-from-left in px.<br>
top : distance-from-top in px.
Z-index :+- by number (for order-setting front or back)
Example:
<html>
<head></head>
<title>Position Setting</title>
<body>
NOTE:we can use it in all tags except body. Here is the example of shadow
setting<br><br><br><br><br>
<h1 style="position:absolute; color:gray; left:50;
top:300">KRISHNA</H1>
<H1 STYLE="position:absolute; color:red; left:54;
top:304">KRISHNA</H1>
</body></html>
Example 2
<html>
<head></head>
<body>
<b>Position Setting</b><br>
<img src=14.jpg height=200 width=200 style="position:absolute; left:50;
top:100">
top:80">
<img src=ak.jpg height=200 width=200 style="position:absolute; left:60;
top:110; z-index:+1">
top:180; z-index:+2">
</body>
© Prince------------------------Contact: 9841599260 6
DHTML
</html>
Example 3
<html>
<head></head>
<body>
<b>Position Setting</b><br>
top:110; z-index:-3">
</body></html>
BACKGROUND SETTING
background-color: color name
background-image: url('image name') use sing quote
background-attachment: fixed/scroll
background-repeat :no repeat/repeat-x/repeat-y/repeat (default is no
repeat)
background-positionL <HA>i.e.left/center/right or x-distance
<VA>top/center/bottom or y-distance
Example 1.
<html>
<head></head>
<title>background Setting</title>
<body style="background-color:red">
</body>
</html>
Example 2.
<html>
© Prince------------------------Contact: 9841599260 7
DHTML
<head></head>
<title>backgr ound Setting</title>
<body style="background-image:url('16.jpg'); background-position:right

center; background-attachment:scroll">
</body>
</html>
© Prince------------------------Contact: 9841599260 8
DHTML
LIST SETTINGS
list-style-type: decimal/lower-roma/uper-roman/lower-alpha/uper-alpha
BULLETS
disc/circle/square
<html>
<head>
</head>
<title>List setting</title>
<body>
<ol style=list-style-type:lower-alpha>
<li>BBS</li>
<li>BBA</li>
</ol>
<ol style=list-style-type:upper-roman>
<li>BBS</li>
<li>BBA</li>
</ol>
<ol style=list-style-type:decimal>
<li>BBS</li>
<li>BBA</li>
</ol>
<ul style=list-style-type:square>
<li>BBS</li>
<li>BBA</li>
</ul>
</body>
</html>
2. list-style-image:url('image name)
Eg.
<html>
<head>
</head>
© Prince------------------------Contact: 9841599260 9
DHTML
<body>
<ul style=list-style-image:url('gif\1.gif')>
<li>BBS</li>
<li>BBA</li>
</ul>
<ol style=list-style-image:url('gif\2.gif')>
<li>BBS</li>
<li>BBA</li>
</ol>
</body>
</html>
© Prince------------------------Contact: 9841599260 10
DHTML
CURSOR SETTING
<s style=cursor:cursor name>
Cursor Names
crosshair, help, wait, hand, n-resize, w-resize, e-resie, s-resize, se-resize, sw-
resize, ne-resize, nw-resize.
<html>
<head>
</head>
<body>
<span style="cursor:hand"><img src=13.jpg height=100 width=100
align=left></span>
<cursor:wait>
<a style="cursor:crosshair">This is crosshair cursor</a><br>
<a style="cursor:help">This is help cursor</a><br>
<a style="cursor:wait">This is wait cursor</a><br>
<a style="cursor:n-resize">This is n-resize cursor</a><br>
<a style="cursor:w-resize">This is w-resize cursor</a><br>
<a style="cursor:e-resize">This is e-resize cursor</a><br>
<a style="cursor:s-resize">This is s-resize cursor</a><br>
<a style="cursor:se-resize">This is se-resize cursor</a><br>
<a style="cursor:sw-resize">This is sw-resize cursor</a><br>
<a style="cursor:ne-resize">This is ne-resize cursor</a><br>
<a style="cursor:nw-resize">This is nw-resize cursor</a><br>
</body>
</html>
FILTER EFFECTS
These effects are used any elements of HTML. But we mus change or set its
position absolute except picture some of the filter effects are given below:
1. filter:flipH()
<img src=13.jpg style="filter:flipH()">
2. filter:flipV()
<img src=13.jpg style="filter:flipV()">
IN TEXT
<H1 style="position:absolute; filter:flipH()">KRISHNA</H1>
© Prince------------------------Contact: 9841599260 11
DHTML
<H1 style="position:absolute; filter:flipV()">KRISHNA</H1>
<H1 style="position:absolute; filter:flipH() flipV()">KRISHNA</H1>
3. filter:invert()
<img src=13.jpg style="filter:invert()">
4. filter:gray()
<img src=13.jpg style="filter:gray()">
5. filter:blur()
<img src=13.jpg style="filter:blur" >
6. filter:alpha(opacity=?, style=?) (for Image) (style=1,2,3)

<img src=13.jpg style="filter:alpha(opacity=100, style=2">
7. filter:dropshadow(color=? offx=? offy=?) (for text)

<H1 style="position:absolute; filter:dropshadow(color=green ,offx=2,
offy=8)">KRISHNA</H1>
8. filter:shadow(color=? strength=? direction=?)(for text)
eg.1
<H1 style="position:absolute; filter:shadow(color=red,
strength=4)">KRISHNA</H1>
eg.2
<astyle="font-size:150; position:absolute; filter:shadow(color=green,
strength=50, direction=90)">KRISHNA</a>
9. filter:wave(freq=?, phase=? strengh=?)(for text and picture)

eg.1
<H1 style="position:absolute; filter:wave(freq=4, phase=15,
strength=2)">KRISHNA</H1><br><br>
eg.2
<a style="font-size:150; position:absolute; filter:wave(freq=5, phase=5,
strength=10)">KRISHNA</a>
eg.3 (in image)
© Prince------------------------Contact: 9841599260 12
DHTML
<img src="ak.jpg" height=200 width=200 style="filter:wave(freq=1,
phase=5, strength=2">
10. filter:glow(strength=?, color=?)(for text)

eg.1
<H1 style="position:absolute; filter:glow(strength=5,
color=red)">KRISHNA</H1><BR><BR><BR>
eg.2
<a style="font-size=150 ; position:absolute; filter:glow(strength=15,
color=green)">KRISHNA</A>
CASCADING STYLE SHEET(CSS)

It is a group of styles which is created in the form of DHTML Language. It
makes changes the style of entire documents of files. There are two types of
styles.
1. INTERNAL CSS
The group of style, which are created inside the page.
2. EXTERNAL CSS:
The group of styles, which are created in seperate file called 'css'
Styles are in two types
1. Redifined HTML Tag(Predifined Syles): It changes the pre-defined tag of
HTML
HTML tag { DHTML Language }
eg. H1 {font-size}
img{ heiht:100; width:100}
2. Userdefined style: These styles are store in computer memory and
whenever we want we call it, apply it in specify tag.
.classname{ DHTML Lanaguage }
eg.
.xyz { font-size:14; color:red}
<div class="xyz">
type paragraph</div>
<html>
© Prince------------------------Contact: 9841599260 13
DHTML
<head></head>
<title>Internal Css</title>
<body >
<style type="text/css">
h1{color:green; font-size:34; text-align:center}
img{
height:200; width:200; border:solid}
.xyz{border:solid 1 black; background-color:white; font-family:arial; text-
align:justify; text-indent:30}
</style>
<body bgcolor="pink">
<h1>Internal CSS</h1>
<p class="xyz">
type paragraph
</p>
<a style="font-size:15; color:green">JavaScript</a>
<div class="xyz">
Type Paragraph
</div>
<h1>DHTML</H1>
<h1>JAVA SCRIPT</H1>
<img src="11.jpg"><img src="13.jpg">
</body></html>
EXTERNAL CSS
1. Open Notepad program
2. make style
<html><head></head>
<title>External CSS</title>
<body>
h1{color:red; text-decoration:underline; font-family:impact; font-size:50}
img
{
height:200; width:200; border:solid 4 red
}
.font
© Prince------------------------Contact: 9841599260 14
DHTML
{
font-family:"monotype corsiva"; color:red; font-size:35; font-style:italic;
background-color:gray
}
.border
{
border-style:groove solid inset outset; border-width:10 8 10 8; border-color:
red blue pink green; text-align:justify
}
.filter
{
font-size:60; position:absolute; filter:glow(strength=4, color=red)
}
</body>
</html>
3. save in your folder with name mystyle.css
TO APPLY
<html>
<head></head>
<title>Font</title>
<body>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<h1>External CSS</h1>
<img src="11.jpg">
<a class="font">MY NAME IS KRISHNA</a>
<p class="border">
Type paragraph
</p>
<a class="filter">KRISHNA</a>
</body></html>
© Prince------------------------Contact: 9841599260 15

Option of Text Type: DHTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Option of Text Type: DHTML

Cargado por

Copyright:

Formatos disponibles

DHTML

*Dynamic Hypertext Mark Up Language

<a style="font-family:impact; font-weight:bold; font-size:20;

BORDER FOR TEXTBOX AND BUTTON

<input type=button value="Next" style="border:dashed 4 red">

<body style="background-image:url('16.jpg'); background-position:right

6. filter:alpha(opacity=?, style=?) (for Image) (style=1,2,3)

7. filter:dropshadow(color=? offx=? offy=?) (for text)

8. filter:shadow(color=? strength=? direction=?)(for text)

9. filter:wave(freq=?, phase=? strengh=?)(for text and picture)

10. filter:glow(strength=?, color=?)(for text)

CASCADING STYLE SHEET(CSS)

También podría gustarte