Saturday, August 17, 2013

CSS float left

<html>
<head>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="flower_01.jpg" width="107" height="90">
<img class="thumbnail" src="flower_02.jpg" width="107" height="80">
<img class="thumbnail" src="flower_03.jpg" width="116" height="90">
<img class="thumbnail" src="flower_04.jpg" width="120" height="90">
<img class="thumbnail" src="flower_01.jpg" width="107" height="90">
<img class="thumbnail" src="flower_02.jpg" width="107" height="80">
<img class="thumbnail" src="flower_03.jpg" width="116" height="90">
<img class="thumbnail" src="flower_04.jpg" width="120" height="90">
</body>
</html>

Result


CSS float image caption

<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div>
<img src="bird.jpg" width="150" height="112" /><br/>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
In the paragraph above, the div element is 120 pixels wide and it contains the image.
The div element will float to the right.
Margins are added to the div to push the text away from the div.
Borders and padding are added to the div to frame in the picture and the caption.
</p>
</body>

</html>

Result


CSS float homepage

<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">Systech Digital Ltd.</h1></div>
<div class="left"><p>Systech Digital brings the quickest solutions for you. No matter where you are in the world, we are committed to respond within maximum 72 hours and bring reliable solution for you and your problem.</p></div>
<div class="content">
<h2>Welcome!</h2>
<p>Systech Digital is a leading software development company in Bangladesh. Already it has earned vast popularity in Corporate Software Solutions. Our goal is to provide the best innovative and unique creative solutions to our valued customers. We mainly focus on web applications and management software according to meet our clients criteria.</p>

<div class="footer">Copyright | www.systechdigital.com | 2009</div>
</div>

</body>
</html>

Result


CSS float first letter

<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
</p>

</body>
</html>

Result


CSS float clear

<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>

<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="bird.jpg" width="150" height="112" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

Result

 

CSS float border margin

<html>
<head>
<style type="text/css">
img
{
float:right;
border:2px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>
<p>
<img src="bird.jpg" width="150" height="112" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

Result


CSS draw outline

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>

<body>
<p><b>Note:</b> Internet Explorer supports the outline property only if a !DOCTYPE is specified!</p>
</body>
</html>

Result


CSS display table element collapse

<html>
<head>
<style type="text/css">
tr.collapse {visibility:collapse}
</style>
</head>
<body>

<table border="1">
<tr>
<td>Munirul</td>
<td>Hasan</td>
</tr>
<tr class="collapse">
<td>Mahbubur</td>
<td>Rahman</td>
</tr>
</table>

<p><b>Note:</b> Internet Explorer does not support the value "collapse".</p>

</body>
</html>

Result

CSS display none

<html>
<head>
<style type="text/css">
h1.hidden {display:none}
</style>
</head>

<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>

</html>

Result


CSS display inline elements

<html>
<head>
<style type="text/css">
li{display:inline}
</style>
</head>
<body>

<p>Display this link list as a horizontal menu:</p>

<ul>
<li><a href="http:\\www.systechdigital.com" target="_blank">Systech Digital Ltd.</a></li>
<li><a href="http:\\www.google.com" target="_blank">Google</a></li>
<li><a href="http:\\www.yahoo.com" target="_blank">Yahoo!</a></li>
<li><a href="http:\\www.youtube.com" target="_blank">YouTube</a></li>
</ul>

</body>
</html>

Result


CSS display horizontal menu

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Member</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


</p>

</body>
</html>

Result


CSS display block elements

<html>
<head>
<style type="text/css">
span
{
display:block;
}
</style>
</head>
<body>

<h2>Systech Digital Ltd.</h2>
<span>H # 7, R # 31, Sec # 7</span>
<span>Uttara, Dhaka-1230</span>
<h2>Systech Publications Ltd.</h2>
<span>Book & Computer Complex</span>
<span>38/3 Banglabazar, Dhaka-1100</span>

</body>
</html>

Result


CSS dimension width pixel

<html>
<head>
<style type="text/css">
img
{
width: 300px
}
</style>
</head>

<body>

<img src="bird.jpg" width="150" height="112" />

</body>
</html>

Result


CSS dimension minimum width

<html>
<head>
<style type="text/css">
p
{
min-width:50px;
}
</style>
</head>

<body>
<p>The minimum width of this paragraph is set to 50px.</p>
</body>
</html>

Result


CSS dimension minimum height

<html>
<head>
<style type="text/css">
p
{
min-height:100px;
}
</style>
</head>

<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>

Result

 

CSS dimension maximum width percent

<html>
<head>
<style type="text/css">
p
{
max-width: 50%
}
</style>
</head>
<body>

<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

</body>
</html>

Result


CSS dimension height percent

<html>
<head>
<style type="text/css">
img.normal {height:auto}
img.big {height:50%}
img.small {height:10%}
</style>
</head>

<body>
<img class="normal" src="bird.jpg" width="150" height="112" /><br /><br />
<img class="big" src="bird.jpg" width="150" height="112" /><br /><br />
<img class="small" src="bird.jpg" width="150" height="112" />
</body>
</html>

Result


CSS dimension height maximum

<html>
<head>
<style type="text/css">
p
{
max-height:100px;
}
</style>
</head>

<body>
<p>The maximum height of this paragraph is set to 100px.</p>
</body>
</html>

Result


CSS dimension height

<html>
<head>
<style type="text/css">
img.normal {height:auto}
img.big {height:150px}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="bird.jpg" width="150" height="112" /><br />
<img class="big" src="bird.jpg" width="150" height="112" />

<p class="ex">The height and width of this paragraph is 100px.</p>

<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>

Result


CSS border width

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>

</html>

Result

CSS border swidth set

<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-left-width:30px;
}
</style>
</head>

<body>
<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

Result

 

CSS border style

<html>
<head>
<style type="text/css">
p.none {border-style:none}
p.dotted {border-style:dotted}
p.dashed {border-style:dashed}
p.solid {border-style:solid}
p.double {border-style:double}
p.groove {border-style:groove}
p.ridge {border-style:ridge}
p.inset {border-style:inset}
p.outset {border-style:outset}
p.hidden {border-style:hidden}
</style>
</head>

<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>

</html>

Result


CSS border side single property

<html>
<head>
<style type="text/css">
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

Result


CSS border side

<html>
<head>
<style type="text/css">
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

Result

CSS border shorthand property2

<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Result


CSS border shorthand property

<html>
<head>
<style type="text/css">
p
{
border:5px solid red;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Result


CSS border color set

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

Result

CSS border color

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>

<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

Result


CSS bg image vertically

<html>
<head>
<style type="text/css">
body
{
background-image:url('people.gif');
background-repeat:repeat-y;
}
</style>
</head>

<body>
<h1>repeat-y will repeat a background image only vertically.</h1>
</body>
</html>

Result

 

CSS bg image position pixels

<html>
<head>
<style type="text/css">
body
{
background-image: url('people.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
</head>

<body>
<p><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</p>
</body>
</html>

Result

 

CSS bg image position percent

<html>
<head>
<style type="text/css">
body
{
background-image: url('people.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
</head>

<body>

<p><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</p>

</body>
</html>
 Result


CSS bg image position one declaration

<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('people.gif') no-repeat fixed center;
}
</style>
</head>

<body>

<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>

</body>

</html>

Result

 

CSS bg image position fixed

<html>
<head>
<style type="text/css">
body
{
background-image:url('people.gif');
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>

<body>

<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>

</html>

Result

 

CSS bg image place

<html>
<head>
<style type="text/css">
body
{
background-image:url('people.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>

<body>

<h1><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</h1>

</body>
</html>

Result


CSS bg image no repeat

<html>
<head>
<style type="text/css">
body
{
background-image:url('people.gif');
background-repeat:no-repeat;
}
</style>
</head>

<body>

<h1>no-repeat will not repeat a background image. The image will only be shown once.</h1>

</body>
</html>

Result


CSS bg image horizontally

<html>
<head>
<style type="text/css">
body
{
background-image:url('people.gif');
background-repeat:repeat-x;
}
</style>
</head>

<body>

<h1>repeat-x will repeat a background image only horizontally.</h1>

</body>
</html>

Result


CSS bg image

<html>
<head>
<style type="text/css">
body {background-image:url('people.gif')}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h3>By default, a background image will be repeated both vertically and horizontally.</h3>
</body>

</html>

Result


CSS bg color

<html>

<head>
<style type="text/css">
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>

</html>

Result


CSS align position compatibility

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</div>

</body>
</html>

Result


CSS align float compatibility

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>

</body>
</html>

Result


CSS align float

<html>
<head>
<style type="text/css">
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>Rice is normally grown as an annual plant, although in tropical areas it can survive as a perennial and can produce a ratoon crop for up to 20 years.</p>
<p>The rice plant can grow to 1–1.8 m tall, occasionally more depending on the variety and soil fertility.</p>
</div>
</body>
</html>

Result


CSS align center compatibility

<html>
<head>
<style type="text/css">
.container
{
text-align:center;
}
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
text-align:left;
}
</style>
</head>

<body>
<div class="container">
<div class="center">
<p>Rice is normally grown as an annual plant, although in tropical areas it can survive as a perennial and can produce a ratoon crop for up to 20 years.</p>
<p>The rice plant can grow to 1–1.8 m tall, occasionally more depending on the variety and soil fertility.</p>
</div>
</div>
</body>
</html>

Result

CSS align center

<html>
<head>
<style type="text/css">
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="center">
<p>Rice is normally grown as an annual plant, although in tropical areas it can survive as a perennial and can produce a ratoon crop for up to 20 years.</p>
<p>The rice plant can grow to 1–1.8 m tall, occasionally more depending on the variety and soil fertility.</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in Internet Explorer. See the next step in the tutorial for a crossbrowser fix.</p>
</body>
</html>

Result


CSS align absolute

<html>
<head>
<style type="text/css">
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>Rice is normally grown as an annual plant, although in tropical areas it can survive as a perennial and can produce a ratoon crop for up to 20 years.</p>
<p>The rice plant can grow to 1–1.8 m tall, occasionally more depending on the variety and soil fertility.</p>
</div>
</body>
</html>

Result


CSS media rule

<html>
<head>
<style>
@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px}
  }
@media screen,print
  {
  p.test {font-weight:bold}
  }
</style>
</head>

<body>

......

</body>
</html>

Result


Friday, August 16, 2013

JavaScript while loop

<html>
<body>

<script type="text/javascript">
i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>

<p>Explanation:</p>
<p><b>i</b> is equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>
</html>

Result


JavaScript variable

<html>
<body>

<script type="text/javascript">
var firstname;
firstname="Munirul";
document.write(firstname);
document.write("<br />");
firstname="Hasan";
document.write(firstname);
</script>

<p>The script above declares a variable,
assigns a value to it, displays the value, changes the value,
and displays the value again.</p>

</body>
</html>

Result


JavaScript validation required fields

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false;}
  }
}
</script>
</head>

<body>
<form action="submit.htm" onSubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

Result


JavaScript validation email

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
  {
  apos=value.indexOf("@");
  dotpos=value.lastIndexOf(".");
  if (apos<1||dotpos-apos<2)
    {alert(alerttxt);return false;}
  else {return true;}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_email(email,"Not a valid e-mail address!")==false)
    {email.focus();return false;}
  }
}
</script>
</head>

<body>
<form action="submit.htm" onSubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

Result


JavaScript try catch statement 02

<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Click OK to continue viewing this page,\n";
  txt+="or Cancel to return to the home page.\n\n";
  if(!confirm(txt))
    {
    document.location.href="http://www.systechdigital.com/";
    }
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onClick="message()" />
</body>

</html>

Result