Scribd
Upload
86 views

HTML, Css & Javascript 1

The document contains code snippets demonstrating the use of HTML, CSS, JavaScript, and related technologies. It includes examples of: - Using JavaScript to write text to the document - Changing the background color with a prompt box - Creating a digital clock using JavaScript - Styling elements with an external CSS stylesheet - Form validation with JavaScript The document contains code for building basic webpages and includes examples of common HTML, CSS and JavaScript features.

Uploaded by

Rachit Harlalka
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
86 views

HTML, Css & Javascript 1

The document contains code snippets demonstrating the use of HTML, CSS, JavaScript, and related technologies. It includes examples of: - Using JavaScript to write text to the document - Changing the background color with a prompt box - Creating a digital clock using JavaScript - Styling elements with an external CSS stylesheet - Form validation with JavaScript The document contains code for building basic webpages and includes examples of common HTML, CSS and JavaScript features.

Uploaded by

Rachit Harlalka
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML, CSS & JAVASCRIPT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Blog</title> <!-- <script language="javascript" type="text/javascript" src="JScript1.js"></script> --> <script type="text/javascript"> var i = 0; for(i=0;i<=10;++i) { document.write("the no is" + i + "<br>") } </script> <script type="text/javascript"> function changecolor() { var colord = prompt("enter color"); document.bgColor = colord; } </script> <script var var var var type="text/javascript"> someData = "Hello"; other = true; todaytime = new Date(); time = todaytime.getHours();

if (time < 12) document.write("Good morning"); else document.write("Hello!! Good evening"); //alert("Welcome to my Blog!!"); var ans = prompt("do u want to change bgcolor"); if (ans == "y" || ans=="yes") changecolor(); </script> </head> <body bgcolor="663399" >

<h3 onclick="changecolor()">please click here to change bkgrnd</h3> <h2 align="center"><font color="aqua">Welcome to my Personal Blog!!</font></h2> <hr color="orange" size="2"/> <p><a href="general.htm" > <font color="lime">General Info.:</font> </a> | <a href="personal.htm" > <font color="lime">Personal Info.</font> </a> | <a href="Education.htm" > <font color="lime">Education Info.</font> </a> | <a href="professinal.htm" > <font color="lime">Professional Info.</font> </a> | <a href="ImageGallery.htm"> <font color="lime">Image Gallery:</font> </a> | <a href="feedback.htm"> <font color="lime">Feedback:</font> </a> |</p> <p>&copy; Copyright 2013, Personal Blog</p> </body> </html>

HTML, CSS & JAVASCRIPT

Feedback
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet1.css" rel="Stylesheet" type="text/css" /> </head> <body> <h2>Feedback</h2> <p><a href="HTMLPage1.htm"><nobr>Home</nobr></a></p> <hr color="0066FF" /> <form name="Feedback" action="" method=> Please enter your name<br /> <input type="text" name="textname" /> <input id="Submit2" type="submit" value="submit" /><br /><br /> Please select your gender<br /> <input type="radio" name="gender" />Male<br /> <input type="radio" name="gender" />Female<br /><br /> Are you interested in receiving Emails?<br /> <input id="Checkbox1" type="checkbox" />yes<br /><br /> Choose your city <select id="Selectcity" > <option value="blr">Bangalore</option> <option value="pnbe">Patna</option> <option value="rnc">Ranchi</option> </select><br /><br /> Upload pic<br /> <input type="file" name="fileupload" value=" " /> <br /><br /> ur feedback<br /> <textarea cols=60 rows=6 name="feedback"></textarea><br /><br /> <input id="name" type="submit" value="submit the value" /> </form>

<hr color="red"/> </body> </html>

HTML, CSS & JAVASCRIPT


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" cellspacing=0 width=50% align="center"> <script type="text/javascript"> for(var i=1;i<=100;i++) { document.write("<tr><th bgcolor='yellow' align='center'>" + i + "</th></tr>"); ++i; document.write("<tr><th bgcolor='orange' align='center'>" + i + "</th></tr>"); } </script> </table> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var msg; function changecolor(h1tag) { // alert("mouse over"); //var h1tag = document.getElementById("one"); msg = h1tag.innerHTML; h1tag.innerHTML += " - click to know more"; h1tag.style.color ="red"; h1tag.style.fontFamily = "Lucida Calligraphy"; h1tag.style.fontSize = "100"; } function changecolor2(h1tag) { //alert("mouse out"); // var h1tag = document.getElementById("one"); h1tag.innerHTML = msg; h1tag.style.color = "silver"; h1tag.style.fontFamily = "serif"; h1tag.style.fontSize = "50"; }

</script>

HTML, CSS & JAVASCRIPT


</head> <body> <h1 <h1 <h1 <h1 <h1 onmouseover="changecolor(this)" onmouseover="changecolor(this)" onmouseover="changecolor(this)" onmouseover="changecolor(this)" onmouseover="changecolor(this)" onmouseout="changecolor2(this)">one</h1> onmouseout="changecolor2(this)">two</h1> onmouseout="changecolor2(this)">three</h1> onmouseout="changecolor2(this)">four</h1> onmouseout="changecolor2(this)">five</h1>

</body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function showclock() { var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); var time = h + " : " + m + " : " + s; var clock = document.getElementById('clock'); clock.innerHTML = time; setTimeout("showclock()", 100); } </script> </head> <body onload="showclock()"> <h1>Digital Clock</h1> <hr /> <span id='clock' style="font-size:1in"></span> </body> </html>

HTML, CSS & JAVASCRIPT 5


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet1.css" rel="Stylesheet" type="text/css" /> </head> <body> <h2>Image Gallery</h2> <p><a href="HTMLPage1.htm">Home</a></p> <hr /> <img src="images/Lighthouse.jpg" alt="lighthouse" width="300" height="300" /> <img src="images/Desert.jpg" alt="lighthouse" width="300" height="300" /> <img src="images/Tulips.jpg" alt="lighthouse" width="300" height="300" /> <img src="images/Koala.jpg" alt="lighthouse" width="300" height="300" /> <img src="images/Lighthouse.jpg" alt="lighthouse" width="300" height="300" /> <iframe src="images/Desert.jpg" name="rachit" width="300" height="300"></iframe> <a href="ImageGallery.htm" target="rachit"> <font color="lime">Link 5:</font> </a>

</body> </html>

Stylesheet external

h2,.a1 { color:Teal; background-color:white; font-family:Lucida Calligraphy; }

table { }

HTML, CSS & JAVASCRIPT


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet1.css" rel="Stylesheet" type="text/css" /> </head> <body> <h2 >Profeesional Information</h2> <p ><a href="HTMLPage1.htm">Home</a></p> <p class="a1">I am currently working as a <b><i><u><font color="fuchsia" size="3">Associate Software Engineer in SLK.</font></u></i></b></p> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet1.css" rel="Stylesheet" type="text/css" /> </head> <body> <h2>Education Information</h2><p><a href="HTMLPage1.htm">Home</a></p> <hr /> <p>I did my 10<sup>th</sup> and 12<sup>th</sup> from Patna. <br />I did my Engineering from REVA College in Bangalore.</p> <table border="2" cellpadding="10" cellspacing="0" width="65%" bordercolor="white" background="images/Lighthouse.jpg"> <caption><b><font size="5">Education Details</font></b></caption> <tr > <th><font size="4">Course</font></th> <th>:</th> <th><font size="4">Percentage</font></th> </tr> <tr > <td valign="bottom">10<sup>th</sup></td> <td align="center"><b>:</b></td> <td align="center">85.4%</td>

HTML, CSS & JAVASCRIPT


</tr> <tr > <td>12<sup>th</sup></td> <td align="center"><b>:</b></td> <td align="center">76%</td> </tr> <tr> <td>Graduation</td> <td align="center"><b>:</b></td> <td align="center">72.1</td> </tr> <tr bgcolor="yellow"> <th colspan="2">Average</th> <th>78%</th> </tr> </table>

</body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet1.css" rel="Stylesheet" type="text/css" /> </head> <body> <h2>General Information</h2> <p><a href="HTMLPage1.htm">Home</a></p> <hr color="0066FF" /> <p><font size="4">This is <b><font color="00FFFF"><i>Rachit Harlalka</i></font></b></font></p> <p>I am Associate Software Engineer in SLK</p> </body> </html>

HTML, CSS & JAVASCRIPT 8


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet1.css" rel="Stylesheet" type="text/css" /> </head> <body> <h2>Personal Information</h2> <p><a href="HTMLPage1.htm"><nobr>Home</nobr></a></p> <hr /> <p>I am from Bihar.</p> <p>I was born on 15<sup>th</sup> Nov, 1989.</p> <p>My Hobbies are:</p> <ul type="disc"> <li>Music</li> <li>PC games</li> <ol> <li>COD</li> <li>God of War III</li> </ol> <li>Trekking</li> </ul> </body> </html>

Formvalidation JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Input Validation</title> <script type="text/javascript"> function validate() { //step:1-get value for name var name = document.feedback.txtname.value; var isValid = true; var msg = " ";

HTML, CSS & JAVASCRIPT


//alert(name); if (name.length < 5) { msg="name shud b > 4"; isValid= false; } var age = document.feedback.txtage.value; if (isNaN(age)) { msg += "\n please enter no. for age"; isValid = false; } else if (age < 16 || age > 60) { msg += "\n age shud b between 16 and 60"; isValid = false; }

if ( !document.feedback.chk.checked) { msg += "\n please accept our terms."; isValid = false; }

if ( (document.feedback.gender[0].checked==false) && (document.feedback.gender[1].checked==false)){ msg += "\n please select gender"; isValid = false; } if (!isValid) alert(msg);

return isValid; }

</script> </head> <body> <h1>Form Input Validation</h1> <hr /> All fiels with <font color="red">*</font> are mandatory<br /> <form name="feedback" action="#" onsubmit="return validate()"> Enter Name <font color="red">*</font>:<br /> <input type="text" name="txtname" /> <br />Enter Age <font color="red">*</font>:<br /> <input type="text" name="txtage" /> <br /> <input type="radio" name="gender" value="male" />Male<br /> <input type="radio" name="gender" value="female" />Female<br /> <input type="checkbox" name="chk" value="yes" /> Accept our Terms and Conditions. <input type="submit" name="name" value="submit your data" />

HTML, CSS & JAVASCRIPT


</form> </body> </html>

10

You might also like