HTML, How to display shadow effect of the Text

Below is HTML code snippet, which shows how to display Text with shadow effect, using HTML, CSS. Please note that color of main text, shadow color, position of shadow, sharpness of shadow can be fully controlled, by changing corresponding values in below code snippet.

<html>
<head>
<style>
#shd {
text-shadow: 1px/*right*/ 1px/*bottom*/ 0px/*sharpness*/ red;

color:green;
}
</style>
</head>
<body>

<h1 id=”shd”>Text-shadow effect!</h1>

<div id=”shd”>
<p><b>Note:</b> This is Text only</p>
<p>Test only
</div>
</body>
</html>

how to display text with shadow

JavaScript How to access DOM of an HTML Page

As known JavaScript is one of the powerful Scripting language, which gets interpreted on Web Browser. Basic usage of JavaScript is
#1.Client side validations.
#2.To perform dynamic operations on an Webpage.

Disadvantage part of JavaScript is, it can be manually disabled by user, on his/her Browser.

Below are few examples

Change color of a button periodically

Below is sample JavaScript code to dynamically change background color of button for every one second. However this approach can be used for any HTML elements, and time interval also can be changed as required.

<html>
<head>
<title>Button with dynamic Random color</title>
<script type="text/JavaScript">
window.onload = function() {            
    function rndBtnClr() {
var rndColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

document.getElementById("btn").style.background=rndColor;
//get the reference of the Button, and set its background color

    }
    setInterval(rndBtnClr, 1000);
}
</script>
</head>
<body>
Can you observe dynamic random color, for below button.<br>
<input type="button" value="Click Me" id="btn" />
</body>
</html>

rndBtnClr() method is invoked every one second(i..e 1000 ms). Six digit hexadecimal random color is being generated by below line.

var rndColor = ‘#’ + (Math.random() * 0xFFFFFF << 0).toString(16);

The same in considered as DHTML(Dynamic HTML)

Dynamically enabled or disable a HTML element

Below javascript enables or disables a button, by clicking Click Me button.

callme() function is clicked whenever “Click Me” button is clicked.if condition checks if the button is currently disabled, if button is currently disabled, then button is enabled, else button is disabled.

<html>
<head>
<title>Enable/Disable an HTML element, dynamically</title>
<script type="text/javascript">
function callme(){
if(document.getElementById("btn").disabled)
{
document.getElementById("btn").disabled=false;
}
else
{
document.getElementById("btn").disabled=true;
}
}
</script>
</head>
<body>
Can you observe dynamic random color, for below button.<br>
<input type="button" value="Click Me" onclick="callme()"/>
<input type="button" value="Enabled/Disabled button" id="btn" />
</body>
</html>

You may also like to read:
List of input controls in HTML
HTML marquee tag example
favicon for a website

HTML ordered list and un ordered list tags

Below is an example showing how to display ordered and un ordered lists in HTML.

<html>
<head><title>Institute Trainign courses</title></head>
<BODY bgcolor="#E67A32">
<font color="#FFF">
Sample Ordered List
<ol type="1">
<li>Adv Java</li>
<li>Core Java</li>
<li>MySQL</li>
<li>Oracle</li>
</ol>
Sample Un Ordered List
<ul>
<li>Adv Java</li>
<li>Core Java</li>
<li>MySQL</li>
<li>Oracle</li>
</ul>
</font>
</body>
</html>

How to display checkbox using HTML

On Webpages, checkbox is used to select one or multiple items in each group of checkboxes.

Below is simple example of using checkboxes, in HTML

<html> 
<body> 
<form action="abcd.jsp" method="POST"> 
<input type="checkbox" name="rose" checked="checked"/> Rose
<input type="checkbox" name="lilly"/> Lilly
<input type="checkbox" name="jasmine" checked="checked"/> Jasmine
<input type="submit"value="Select Flower"/> 
</form> 
</body> 
</html>

You may also like to read:
input tag in html
html marquee tag
favorite icon on webpages

Purpose of Input control in HTML

On a HTML webpage, Input Controls are displayed to get input from user.
On Web pages, user can enter/select/submit data, using Input Controls.
<input type=“text” name=“username” value=“” />
Other input Controls are
password
checkbox
radio
hidden
file
submit
Reset

<label for=“”> tag can be used to display label to any input control

<html>
<head><title>Just Test title</title></head>
<body bgcolor="#00ff00">
<center><h1>This is heading</h1></center><br>
<form action="./x/y/z/abc.jsp" method="post">

<font color="#FFFFFF">Enter Name:  
<input type="text" name="mytext" value="" /><br>
Enter Password:<input type="password" name="pwd" value="" /><br>
Select Hobbies:<input type="checkbox" name="cb1" /> Reading<br>
<input type="checkbox" name="cb2" checked/> Driving<br>
<input type="checkbox" name="cb3" /> Swimming<br>
<input type="checkbox" name="cb4"/> Others<br><br>

Select Age: Between<input type="radio" name="rd1"/> 20 and 30<br>
<input type="radio" name="rd1"/> 30 and 40<br>
<input type="radio" name="rd1"/> 40 and 50<br>
<input type="radio" name="rd1"/> Above 50<br>

Select Option: <select name="optn">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">THree</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
</font>©
<input type="button" name="btn" value="Click here"/> 
<input type="submit" name="submit1" value="Click to Signup" />  
<input type="reset" name="Reset1" value="Reset Values" /><br>
</form>
</body>
</html>

In HTML, how to use marquee tag

You might have seen, on web pages wherein text or any content scrolls on webpage left to right, top to bottom,etc… marquee HTML tag need to be used to achieve the same.

Below are attributes of HTML
direction – indicates direction of scroll
scrolldelay – by increasing the value, scrolling can be made slower, and vice versa
scrollamount – smoothness of scroll can be adjusted, by changing the value.

Below is an example of the same, please follow inline comments to change direction of scroll.

<html>
<head>
<title>HTML marquee Example</title>
</head>
<body>
<!--other values for direction are up,down,right,left-->
<marquee height="25%" direction="left" scrolldelay="5" scrollamount="8">
<img src="logos.JPG" >
This is an example of marquee<br>
line1<br>
line2<br>
line3<br></marquee>
</body>
</html>

In HTML, how to display favorite icon of a website

Almost all professional websites, need favorite icon, which will be displayed on top bar of the Browser.

Below is an example HTML code, on how to display favorite icon of a website.

<html>
<head>
<link rel="shortcut icon" href="./first.ico" />
<!-- ico is an image format used for icons 
Here gif and other img formats also can b used
-->
<title>Simple Title</title></head>
<body>
This is First HTML Page<br>
can u see this?
</body>
</html>