HTML
Uploaded by
khushi14018HTML
Uploaded by
khushi14018HTML
<html>
<head>
<title>About Myself</title>
<style>
body {
background-color: purple;
color: lightpink;
</style>
</head>
<body>
<h1>About Me</h1>
<h4>
<p>My name is Manisha Sharma.I am 20 years old.I live in Ludhiana.I am currently pursuing
Post Graduation Diploma in Computer Application at Khalsa [Link] favorite
hobby is Cooking.I love learning newthings every day.
My favorite colour is pink.</p>
</h4>
</body>
</html>
WRITE A PROGRAM IN HTML TO SHOW
FORMATTING TAGS
Technology is the invisible engine driving the modern world, weaving itself into the very fabric of our daily
lives. From the instantaneous connectivity of smartphones to the complex algorithms of artificial
intelligence, it has fundamentally redefined how we communicate, learn, and solve problems. While it offers
unprecedented convenience-turning global distances into mere clicks-it also challenges us to maintain a
balance between digital efficiency and human connection. At its core, technology is a reflection of human
curiosity and our relentless drive to push beyond the limits of what was once thought impossible.
<html>
<head>
<title>Formatting Tags</title>
</head>
<body style="background-color:lightpink,TEXT-BLACK;">
<h1>Technology</h1>
<hr>
<p>
<H2><b>Technology</b> is the <i>invisible</i> engine driving <u>the</u> modren world.
<mark>the instantaneous</mark> connectivity of <s>samartphones</s> to the
<del>complex algorithms</del> of <ins>artifical intelligence</ins>.
Water is H<sub>2</sub>O, Energy is E = mc<sup>2</sup>.
<small>Small notes</small> and <big>Big ideas</big> matter.
<font color="yellow">Blue text</font> and <font size="5">Large text</font> highlight
concepts.
<q>Knowledge is power</q> in <abbr title="Technology">CS</abbr>.
<blockquote>“xTechnology is the invisible engine driving the modern world.” — Edsger
Dijkstra</blockquote>
<br>
<cite>FORMATTINGS !!!! </cite>
</p></H2>
<BR>
<h3>Bold & Italic-:</h3>
<p><h4><b>Technology</b> is <i>interesting</i>.</p>
<h3>Underline-:</h3>
<p><u>Technology</u> is evolving fast.</p>
<h3>Highlight-:</h3>
<p><mark>Programming</mark> is important.</p>
<h3>Strikethrough / Delete / Insert-:</h3>
<p><s>Old methods</s>, <del>outdated systems</del>, <ins>new innovations</ins>.</p>
<h3>Subscript & Superscript-:</h3>
<p>Water: H<sub>2</sub>O, Energy: E = mc<sup>2</sup>.</p>
<h3>Small & Big-:</h3>
<p><small>Small notes</small> and <big>Big ideas</big>.</p>
<h3>Font Color & Size-:</h3>
<p><font color="yellow">Blue text</font> and <font size="5">Large text</font>.</p>
<h3>Code-:</h3>
<p><code>print("Hello World")</code></p>
<h3>Quote & Blockquote-:</h3>
<p><q>Knowledge is power</q></p>
<blockquote>“technology is the visible engine driving the modren world.” — Edsger Dijkstra</blockquote>
<h3>Abbreviation & Citation-:</h3>
<p><abbr title="Technology">CS</abbr> is vital. <cite>Technology
Basics</cite></p>
<h3>Line Break & Horizontal Rule-:</h3>
<p>First line<br>Second line</p>
<hr>
<p>Line separated above.</p>
</body>
</html>
WRITE A PROGRAM IN HTML TO OPEN
LINKED DOCUMENTS IN NEW
WINDOWS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpage</title>
</head>
<body style="background-color: lightpink;">
<h1>INTRODUCTION TO LINK</h1>
<p>
Gucci was founded in Florence, Italy, in 1921 by Guccio Gucci, who had previously worked as a bellboy at
London’s Savoy Hotel, where he admired the refined luggage of the English elite. Inspired by this experience,
he returned to Italy and opened a small workshop crafting leather travel goods and luggage for wealthy clients.
Early designs were influenced by equestrian themes, reflecting Guccio’s appreciation for horse-riding gear. The
brand’s first commercially successful bags were made from woven hemp (canapa) during material shortages in
the 1930s.
</p>
<!-- Corrected image tag -->
<img src="C:/Users/DELL/Desktop/[Link]" alt="Gucci Image">
<p>
Click the link below to know more about it...<br>
<a href="[Link] target="_blank">Click here</a>
</p>
</body>
</html>
WRITE A PROGRAM IN HTML TO LINK TO SPECIFIC
LOCATIONS WITH THE SAME WEBPAGE
<html>
<head>
<meta charset="UTF-8">
<title>Link Within the Same Page</title>
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
.big-link {
font-size: 2em;
font-weight: bold; }
.masala-title {
font-size: 2em;
font-weight: bold; }
.masala-text {
font-size: 1.2em; }
img {
margin: 10px;
width: 200px;
height: 300px; }
</style>
</head>
<body>
<!-- Link to bottom -->
<a href="#bottom" class="big-link">MASALAS</a>
<!-- Spacer (instead of many <br>) -->
<div style="height:800px;"></div>
<!-- Bottom section -->
<h2 id="bottom" class="masala-title">MASALAS</h2>
<p class="masala-text">
<b>The term "masala" originates from Hindi and broadly translates to “spice mix”.
It refers to a combination of spices and sometimes herbs, blended to create a unique
flavor profile for a dish. Masalas are not just seasoning; they are considered the
essence of Indian cooking, often reflecting regional traditions, family recipes, and
cultural heritage. They can be used in powdered form or as a paste, depending on the
recipe and regional preference.</b>
</p>
<!-- Images (make sure these files are in the same folder as your HTML file) -->
<img src="[Link]" alt="Garam Masala">
<img src="[Link]" alt="Masala Image 2">
<img src="[Link]" alt="Masala Image 3">
</body>
</html>
WRITE A PROGRAM IN HTML TO LINK TO SPOT ON A
DIFFERENT WEB PAGE WITHIN THE SAME WEBSITE.
<html>
<head>
<title>Webpage</title>
</head>
<body bgcolor="lightpink">
<h1>INTRODUCTION TO LINK</h1>
<p>Instagram is a social networking service that allows users to upload photos and short-form videos, edit
them with filters, organize content using hashtags, and tag locations. Users can share posts publicly or with
selected followers, browse content by tags or locations, like posts, and follow other users to see their
updates in a personal feed. It is available on iOS, Android, Windows, and the Web, supporting 33 languages.
</p>
<br><br>
<IMG SRC="C:\Users\DELL\Desktop\[Link]" height="300" width="500">
<br><br><br><br>
Click the link below to know more about it...<br>
<a
href="[Link]
f0907921d6d9fd5302418JmltdHM9MTc2OTkwNDAwMA&ptn=3&ver=2&hsh=4&fclid=1
302368d-4582-63bb-2fef-
242344846215&psq=gmail+&u=a1aHR0cHM6Ly9tYWlsLmdvb2dsZS5jb20vbWFpbA">Click here</a>
</body>
</html>
.
WRITE A PROGRAM IN HTML TO LINK TO SPOT ON
A DIFFERENT WEB PAGE ON OTHER WEBSITES
<html>
<head>
<meta charset="UTF-8">
<title>First Page</title>
<style>
body {
background-color: #CCFFFF;
text-align: center;
h1 {
font-weight: bold;
h2 {
color: #006600;
</style>
</head>
<body>
<h1>EARRINGS<h1/>
<h2>
Earrings have been worn by humans for thousands of years, with evidence dating back to the Neolithic
period and early civilizations such as Mesopotamia, Egypt, and Greece. Ötzi the Iceman, who lived over
5,000 years ago, had pierced ears, suggesting the use of earrings in prehistoric Europe.
</h2>
<br><br><br><br>
<!-- Place the image in the same folder as this HTML file -->
<img src="Types_of_Earrings_2_800x.jpg" width="500" height="200" alt="Earrings Image">
<br><br><br><br>
Click the link below to know more about it...<br>
<!-- Example of linking to a specific spot on another webpage -->
<a href="[Link]
<button>More Content</button>
</a>
</body>
</html>
WRITE A PROGRAM IN HTML TO LINK TO NON-
HTML RESOURCES
<html>
<head>
<meta charset="UTF-8">
<title>TYPES OF EARRINGS</title>
</head>
<body bgcolor="#CCFFFF">
<h1><b>TYPES OF NAILS</b></h1>
<img src="C:\Users\DELL\Desktop\[Link]" alt="Image of Nails 1" height="300" width="400">
<img src="C:\Users\DELL\Desktop\[Link]" alt="Image of Nails 2" height="300" width="400">
<img src="C:\Users\DELL\Desktop\[Link]" alt="Image of Nails 3" height="300" width="400"><br>
</body>
</html>
WRITE A PROGRAM IN HTML TO WORKING WITH JPG AND
PNG IMAGES
<html>
<head>
<meta charset="UTF-8">
<title>IMAGE FILES</title>
</head>
<body bgcolor="BLACK">
<h1>Who is Spider-Man</h1>
<p style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:YELLOW;">
Spider-Man was created by writer-editor Stan Lee and artist Steve Ditko, first appearing in Amazing Fantasy
#15 in August 1962 during the Silver Age of Comic Books. Peter Parker, a teenage orphan raised by his Aunt
May and Uncle Ben in Queens, New York, gains superhuman strength, agility, reflexes, and a precognitive
"spider-sense" after being bitten by a radioactive spider.
</p>
<br><br>
<h2 style="font-size:24px; font-family:Georgia, 'Times New Roman', Times, serif; color:YELLOW;">
IMAGES OF PNG FORMAT
</h2>
<br><br>
<img src="[Link]" height="300" width="300" alt="Spider-Man PNG">
<img src="[Link]" height="300" width="300" hspace="20" alt="Spider-Man PNG">
<br><br>
<h2 style="font-size:24px; font-family:Georgia, 'Times New Roman', Times, serif; color:YELLOW;">
IMAGES OF JPG FORMAT
</h2>
<br><br>
<img src="[Link]" height="300" width="300" alt="Spider-Man JPG">
<img src="[Link]" height="300" width="300" hspace="20" alt="Spider-Man JPG">
</body>
</html>
WRITE A PROGRAM IN HTML TO CREATE AN IMAGE
AS LINK
<html>
<head>
<meta charset="UTF-8">
<title>Image as a Link</title>
</head>
<body>
<h3>Image link</h3>
<a href="[Link] target="_blank">
<img src="[Link]" alt="Shop Image" width="500" height="500">
</a>
</body>
</html>
WRITE A PROGRAM IN HTML TO SHOW SIMPLE
MARQUE
<html>
<head>
<meta charset="UTF-8">
<title>MARQUEE</title>
</head>
<body style="background-image: url('[Link]'); background-size: cover;">
<h1><u>MARQUEE</u></h1>
<hr align="center" size="10" width="100%">
<marquee direction="left" bgcolor="#FF66FF" scrollamount="10" behavior="scroll" scrolldelay="40"
vspace="50" loop="4" width="100%" height="100">
<h1><b>SALE! SALE! SALE!</b></h1>
</marquee>
</body>
</html>
WRITE A PROGRAM IN HTML TO SHOW MOVING
OBJECTS MARQUE
<html>
<head>
<meta charset="UTF-8">
<title>Cartoon Background</title>
<style>
body {
background-image: url("../../Downloads/pngtree-forest-cartoon-background-image_16494919 (1).jpg");
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
</style>
</head>
<body>
<marquee direction="right" vspace="330" scrollamount="20">
<img src="[Link]" alt="Tom and Jerry Animation" height="900" width="900">
</marquee>
</body>
</html>
WRITE A PROGRAM IN HTML TO SHOW ORDERED AND
UNORDERED LIST
<html >
<head>
<meta charset="UTF-8">
<title>TYPES OF LIST </title>
<style>
body {
background-color: #C8F4FD; /* lightpink background */
color: black; /* text color black */
font-family: Arial, sans-serif;
margin: 20px; }
h1 { text-align: center;}
h2 { margin-top: 20px; }
ol {margin-left: 25px;}
ul {
list-style-type: circle; /* circle bullets */
margin-left: 25px; }
dl { margin-left: 25px;}
dt { font-weight: bold;
margin-top: 10px;}
dd {margin-left: 20px;}
</style>
</head>
<body>
<h1>TYPES OF LISTS </h1>
<BR>
<hr HR style="color:red; background-color:BLACK; height:3px;">
<hr style="color:red; background-color:BLACK; height:2px;">
<!-- Ordered List -->
<h2> ORDERED LIST -: Steps of Making Momos</h2>
<ol type="1">
<li>Prepare the dough</li>
<li>Make the filling</li>
<li>Roll out the dough</li>
<li>Fill and shape the momos</li>
<li>Steam the momos</li>
<li>Serve hot with chutney</li>
</ol>
<hr style="color:red; background-color:BLACK; height:3px;">
<!-- Unordered List -->
<h2> UNORDERED LIST-: Fruits Names</h2>
<ul type="circle">
<li>Banana</li>
17
<li>Papaya</li>
<li>Litchi Fries</li>
<li>Orange</li>
<li>Mango</li>
</ul>
<hr style="color:black; background-color:red; height:3px;">
<!-- Definition List -->
<h2>DEFINITION LIST -: Water,Nytrogen,Hydrogen,Oxygen</h2>
<dl>
<dt>Water</dt>
<dd>
a colourless, transparent, odourless liquid that forms the seas, lakes, rivers, and rain and is the basis of
the fluids of living organism</dt>
<dt>Hydrogn</dt>
<dd>a colourless, odourless, highly flammable gas, the chemical element of atomic number.</dd>
<dt>Nytrogen</dt>
<dd>the chemical element of atomic number 7, a colourless, odourless unreactive gas that forms
about 78 per cent of the earth's atmosphere.</dd>
<dt>Oxygen (Low-Fat)</dt>
<dd>a colourless, odourless reactive gas, the chemical element of atomic number 8 and the life-
supporting component of the air.</dd>
</dl>
<hr style="color:black; background-color:red; height:3px;">
</body>
</html
WRITE A PROGRAM IN HTML TO SHOW
WORKING OF TABLE
<html >
<head>
<meta charset="UTF-8">
<title>Product Table Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
th, td {
border: 1px solid black;
padding: 11px;
text-align: center;
th {
background-color: lightpink;
</style>
</head>
<body bgcolor="lightpink">
<h1 align="center"><b><u>Product Table</u></b></h1>
<table>
<tr>
<th>Picture</th>
<th>Product Name</th>
<th>Details</th>
<th>Price</th>
</tr>
<!-- Product 1 -->
<tr>
<td><img src="C:\Users\DELL\Desktop\0d8cc88b2c034c94bdc604b07e0deb28_w540_h720_q85.jpg"
alt="Product 1" width="200" height="200"></td>
<td><b>Ruffle Bodycon Dress</b></td>
<td>
<table>
<tr><td>Color: Red</td></tr>
<tr><td>Size: Medium</td></tr>
<tr><td>Stock: Available</td></tr>
</table>
</td>
<td>$800</td>
</tr>
<!-- Product 2 -->
<tr>
<td><img src="C:\Users\DELL\Desktop\[Link]" alt="Product 2" width="200" height="200"></td>
<td><b>A-Line Dress</b></td>
<td>
<table>
<tr><td>Color: Pink</td></tr>
<tr><td>Size: Large</td></tr>
<tr><td>Stock: Out of Stock</td></tr>
</table>
</td>
<td>$700</td>
</tr>
<!-- Product 3 -->
<tr>
WRITE A PROGRAM IN HTML TO SHOW WORKING
OF NESTED TABLE
<head>
<title>nested table</title>
</head>
<body bgcolor="#LIGHTPINK"text="purple">
<h1>Nested table</h1>
<hr align center=10% width=100% color="orange" />
<table border="10" align="center" height="60%" width="65%" bordercolor="#FFFFFF"
cellspacing="5"
cellpadding="5"><caption><b>Nested Tble</b></caption>
<tr>
<th>name</th>
<th>job</th>
<th>salary</th>
</tr>
<tr>
<td>MANISHA SHARMA</td>
<td>
<table border="5" align="center">
<tr>
<td>President</td>
<td>Vice President</td>
</tr>
<tr>
<td>Manager</td>
<td>Gen Manager</td>
</tr>
</table>
</td>
<td>45000</td>
</bo
</tr>
<tr>
<td>PREET</td>
<td>executive</td>
<td>87O00</td>
</tr>
<td>PRACHI</td>
<td>salesman</td>
<td>15008</td>
</tr>
</table>
</body>
</html>
WRITE A PROGRAM IN HTML TO SHOW FRAMESET
<html>
<head>
<meta charset="UTF-8">
<title>Frames in HTML</title>
</head>
<frameset cols="50%, *">
<frame name="FI" src="[Link]" noresize="noresize" frameborder="0" marginheight="30"
marginwidth="30" scrolling="auto">
<frame name="F2" src="[Link]" noresize="noresize" frameborder="1" scrolling="yes">
</frameset>
<noframes>
<body>
<p>This page requires a browser that supports frames.</p>
</body>
</noframes>
</html>
WRITE A PROGRAM IN HTML TO SHOW HORIZONTAL
FRAMESET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frames Example</title>
</head>
<frameset rows="50%, 50%">
<frame name="f1" src="[Link]" marginheight="100" marginwidth="150">
<frame name="f2" src="[Link]" marginheight="100" marginwidth="170">
<frame src="[Link]">
</frameset>
<noframes>
<body>
<p>This page requires a browser that supports frames.</p>
</body>
</noframes>
</html>
WRITE A PROGRAM IN HTML TO SHOW
VERTICAL FRAMESET
LOOPING STATEMENTS
PROGRAM TO SHOW WHILE LOOP STATEMENT IN
JAVASCRIPT LOOPING STATEMENT
<HTML>
<HEAD>
<TITLE>LOOPING STATEMENTS</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var i = 0;
while(i <= 5)
[Link]("The number is " + i);
[Link]("<br>");
i++; }
</SCRIPT>
</HEAD>
<BODY>
<H2>Success..!!</H2>
</BODY>
</HTML>
PROGRAM TO SHOW DO WHILE LOOP STATEMENT IN
JAVASCRIPT LOOPING STATEMENT
<HTML>
<HEAD>
<TITLE>LOOPING STATEMENTS</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var i = 0;
do
{
[Link]("The number is " + i);
[Link]("<br>");
i++;
36
while(i <= 5);
</SCRIPT>
</HEAD>
<BODY>
<H2>Success..!!</H2>
</BODY>
</HTML>
PROGRAM TO SHOW FOR LOOP STATEMENT IN
JAVASCRIPT LOOPING STATEMENT
<HTML>
<HEAD>
<TITLE>LOOPING STATEMENTS</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var i = 0;
for (i = 0; i <= 10; i++)
{
if (i == 3)
{ break; }
[Link]("The number is " + i);
[Link]("<br>");
</SCRIPT>
</HEAD>
<BODY>
<H2>Success..!!</H2>
</BODY>
</HTML>
PROGRAM TO SHOW FOR IN LOOP STATEMENT IN
JAVASCRIPT LOOPING STATEMENT
<HTML>
<HEAD>
<TITLE>LOOPING STATEMENTS</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var x;
var person = {fname:"MANISHA", lname:"SHARMA", age:20};
for (x in person)
{
[Link](person[x] + " ");
</SCRIPT>
</HEAD>
<BODY>
<H2>Success..!!</H2>
</BODY>
</HTml>
FUNCTIONS
PROGRAM TO SHOW ALERT()BUILT-IN FUNCTION IN
JAVASCRIPT
<HTML>
<HEAD>
<TITLE>ALERT BOX</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function myFunction()
{
alert("This is an alert box!");
</SCRIPT>
</HEAD>
<BODY>
<H2>Click the button to display an alert box.</H2>
<BUTTON onclick="myFunction()">Try it</BUTTON>
</BODY>
</HTML>
PROGRAM TO SHOW CONFIRM() BUIT-IN FUNCTION
IN JAVASCRIPT
<HTML>
<HEAD>
<TITLE>CONFIRM BOX</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function show_confirm()
var r = confirm("Press a button");
if (r == true)
alert("You pressed OK!");
else { alert("You pressed Cancel!");
39
}}
</SCRIPT>
</HEAD>
<BODY>
<H2>Click the button to display a confirm box.</H2>
<BUTTON onclick="show_confirm()">Try it</BUTTON>
</BODY>
</HTML>
PROGRAM TO SHOW PROMT() BUIT-IN FUNCTION IN
JAVASCRIPT
<HTML>
<HEAD>
<TITLE>PROMPT BOX</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function show_prompt()
{
var name = prompt("Please enter your name", "Harry Potter");
if (name != null && name != "")
{
[Link]("Hello " + name + "! How are you today?");
}
else
{
alert("Please enter some name");
}
}
</SCRIPT>
</HEAD>
<BODY>
<H2>Click the button to display a prompt box.</H2>
<BUTTON onclick="show_prompt()">Try it</BUTTON>
</BODY>
</HTML>
PROGRAM TO SHOW USER DEFINE FUNCTION IN JAVA
SCRIPT
<HTML>
<HEAD>
<TITLE>USER-DEFINED FUNCTIONS</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function myFunction(name,job)
alert("Welcome " + name + ", the " + job);
</SCRIPT>
</HEAD>
<BODY>
<H2>Click the button to call a Parameterized function.</H2>
<BUTTON onclick="myFunction('MANISHA','Manager')">Try it</BUTTON>
</BODY>
</HTML>
PROGRAM TO SHOW ARRAY IN JAVASCRIPT
<html>
<head>
<script type="text/javascript">
function arrayex()
{
myarray = new Array(5)
myarray[0] = 10
myarray[1] = 20
myarray[2] = 30
myarray[3] = 40
myarray[4] = 50
sum = 0;
for (i = 0; i < [Link]; i++){
sum = sum + myarray[i];}
alert(sum);}
</script>
</head>
<body>
</body>
</html>
<input type="button" onclick=”aeeayex()”value=”click here”>
</body>
</html>
EVENT HEANDLING
PROGRAM TO SHOW ONCLICK EVENT TYPE IN
JAVASCRIPT EVENT HANDLING
<HTML>
<HEAD>
<TITLE>EVENT HANDLING</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function sayHello(){
alert("Hello to Everyone.");}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
<INPUT type="button" onclick="sayHello()" value="Hello">
</BODY>
</HTML>
PROGRAM TO SHOW ONSUBMIT EVENT TYPE IN
JAVASCRIPT EVENT HANDLING
<HTML>
<HEAD>
<TITLE>EVENT HANDLING - FORM VALIDATION</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function validateForm(){
var x=[Link];
if (x==null || x==""){
alert("First name must be filled out");}
else
alert("Hello "+x);
44}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myForm" onsubmit="validateForm()" method="post">
<PRE>
First Name: <INPUT type="text" name="fname"><BR><BR>
<INPUT type="submit" value="Submit">
</PRE>
</FORM>
</BODY>
</HTML>
PROGRAM TO SHOW ONMOUSEOVER AND ONMOUSEOUT
EVENT TYPE IN JAVASCRIPT EVENT HANDLING
PROGRAM TO SHOW ONMOUSEOVER AND
ONMOUSEOUT EVENT TYPE IN JAVASCRIPT
EVENT HANDLING
<HTML>
<HEAD>
<TITLE>EVENT HANDLING</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT"><!--
function over(){
alert("Mouse Over");}
function out(){
alert("Mouse Out");}
-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" onmouseover="over()" onmouseout="out()" value="Hello">
</BODY>
</HTML>
PROGRAM TO SHOW CLIENT SIDE FORM
VALIDIATION IN JAVASCRIPT
<HTML>
<HEAD>
<TITLE>FORM VALIDATION</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function validateForm()
var x=[Link];
var y=[Link];
var atpos=[Link]("@");
var dotpos=[Link](".");
if (x==null || x=="")
alert("First name must be filled out");
else
alert("Hello "+x);
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=[Link])
alert("Not a valid E-mail address");
else
alert("Your Email address is: "+y);
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myForm" onsubmit="validateForm()" method="post">
<PRE>
First Name: <INPUT type="text" name="fname"><BR><BR>
Email : <INPUT type="text" name="email"><BR><BR>
<INPUT type="submit" value="Submit">
</PRE>
</FORM>
</BODY>
</HTML>
PROGRAM TO SHOW CLIENT SIDE WEB PAGE DESIGN IN
JAVASCRIPT
<HTML>
<HEAD>
<script type="text/javascript">
function bg(){
var now = new Date();
var hours = [Link]();
[Link]('<B>Now the time is: </B>'+'<B>'+hours+'</B><br>');
if (hours > 15 && hours <= 24){
[Link]('<body style="background-color: orange;">');}
else if (hours > 10 && hours <= 15){
[Link]('<body style="background-color: pink;">');}
else if (hours > 5 && hours <= 10){
[Link]('<body style="background-color: green;">');}
else if (hours > 1 && hours <= 5){
[Link]('<body style="background-color: yellow;">');}
else{
[Link]('<body style="background-color: white;">');}
</script>
</HEAD>
<BODY onload="bg()">
</BODY>
</HTML>
JAVASCRIPT OBJECTS
PROGRAM TO SHOW JAVASCRIPT OBJECTS BY
OBJECT LITERAL
<html>
<body>
<script>
stu = {roll:320, name:"MANISHA SHARMA", marks:600};
[Link]([Link]+" "+[Link]+" "+[Link]);
</script>
</body>
</html>
PROGRAM TO SHOW JAVASCRIPT OBJECTS BY
CREATING INSTANCE OF OBJECT DIRECTLY ( Using
new keyword )
<html>
<body>
<script>
var stu = new Object();
stu.roll_no = 320;
[Link] = "MANISHA SHARMA";
[Link] = 600;
[Link](stu.roll_no+" "+[Link]+" "+[Link]);
</script>
</body>
</html>
PROGRAM TO SHOW JAVASCRIPT OBJECTS BY
USING AN OBJECT CONSTRUCTOR ( Using new
keyword )
<html>
<body>
<script>
function stu(roll_no,name,marks)
{
this.roll_no=roll_no;
[Link]=name;
[Link]=marks;
}
e=new stu(320,"MANISHA SHARMA",600);
[Link](e.roll_no+" "+[Link]+" "+[Link]);
</script>
</body>
</html>
JAVASCRIPT STRING FUNCTIONS
PROGRAM TO SHOW JAVASCRIPT STRING OBJECTS
BY STRING LITERAL
<html>
<body>
<script>
var stringname = new String("THIS IS STRING LITERAL ");
[Link](str);
</script>
</body>
</html>
PROGRAM TO SHOW JAVASCRIPT STRING OBJECTS
BY STRING OBJECT (using new keyword )
<html>
<body>
<script>
var stringname = new String("HELLO JAVASCRIPT STRING");
[Link](stringname);
</script>
</body>
</html>
JAVASCRIPT STRING FUNCTIONS
PROGRAM TO SHOW CharAt(index) METHOD IN
JAVASCRIPT
<html>
<body>
<script>
var str = "javascript";
[Link]([Link](4));
</script>
</body>
</html>
PROGRAM TO SHOW concat(str) METHOD IN JAVASCRIPT
<html>
<body>
<script>
var s1 = "MANISHA ";
var s2 = "SHARMA";
var s3 = s1 + s2;
[Link](s3);
</script>
</body>
</html>
PROGRAM TO SHOW indexOf(str) METHOD IN
JAVASCRIPT
<html>
<body>
<script>
var s1 = "javascript is scripting language";
var n = [Link]("is");
[Link](n);
52
</script>
</body>
</html>
PROGRAM TO SHOW TOUPPERCASE() METHOD IN
JAVASCRIPT
<html>
<body>
<script>
var s1 = "my name is MANISHA SHARMA";
var s2 = [Link]();
[Link](s2);
</script>
</body>
</html>
PROGRAM TO SHOW TOLOWERCASE() METHOD IN
JAVASCRIPT
<html>
<body>
<script>
var s1 = "MY SELF GUNN PAPREJA ";
var s2 = [Link]();
[Link](s2);
</script>
</body>
</html>
PROGRAM TO SHOW LICE(beginIndex,endIndex)
METHOD IN JAVASCRIPT
<html>
<body>
<script>
var s1 = "fghijklmnh";
var s2 = [Link](2,5);
[Link](s2);
</script>
</body>
</html>
JAVA SCRIPT MATHS OBJECTS
PROGRAM TO SHOW MATH PROPERTIES
IN JAVASCRIPT
<html>
<body>
<script>
var pi_val = [Link];
[Link]("The value of PI is " + pi_val);
</script>
</body>
</html>
PROGRAM TO SHOW MATH METHODS IN
JAVASCRIPT
<html>
<body>
<script>
var sqrt_val = [Link](25);
[Link]("\n The Square Root value of 25 is " + sqrt_val);
</script>
</body>
</html>
JAVASCRIPT DATE OBJECTS
PROGRAM TO SHOW DATE OBJECT FUNCTION
IN JAVASCRIPT
<html>
<body>
<script>
var dt = Date();
[Link]("Date and Time : " + dt );
</script>
</body>
</html>
PROGRAM TO SHOW DATE AND TIME OBJECT
FUNCTIONS IN JAVASCRIPT
<html>
<body>
<script>
var dt = new Date("December 25, 2016 23:15:00");
[Link]("getDate() : " + [Link]());
[Link]("getMonth() : " + [Link]());
[Link]("getHours() : " + [Link]());
[Link]("getMinutes() : " + [Link]());
[Link]("getSeconds() : " + [Link]());
</script>
</body>
</html>
User defined functions
PROGRAM TO SHOW USER DEFINE FUNCTION IN
JAVASCRIPT
<HTML>
<HEAD>
<TITLE>User-defined Objects</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function UserObj()
var person = new Object();
[Link] = "MANISHA";
[Link] = "SHARMA";
[Link] = 20;
[Link] = "BROWN";
[Link]([Link] + " is " + [Link] + " years old.");
</SCRIPT>
</HEAD>
<BODY>
<H2>User-defined Object in JavaScript</H2>
<BUTTON onclick="UserObj()">Try It</BUTTON>
</BODY>
</HTML>
OBJECTS WITHIN OBJECTS
PROGRAM TO SHOW OBJECTS WITHIN OBJECTS IN
JAVASCRIPT
<html>
<body>
<script>
var user = {
name: "MANISHA",
age: 20,
size: {
top: 60,
middle: 90,
bottom: 60
[Link]("user name is " + [Link]);
[Link]("<br> user size is " + [Link]);
</script>
</body>
</html>
PHP
EMBEDDING PHP CODE IN WEB PAGES
<html>
<head>
<title>My First PHP Page</title>
</head>
<body>
<?php
echo "Hello World!";
?>
</body>
</html
>
PROGRAM IN PHP TO CHECK WHETHER THE NUMBER IS
EVEN OR ODD
<?php
$number=1221;
if($number%2==0)
else
{
}
?>
echo"<h3>$number is Even Number</h3>";
echo"<h3>$number is Odd Number</h3>";
?>
PROGRAM IN PHP TO SHOWS THE SUM OF DIGITS OF
12345
<?php
$num = 12345;
$sum = 0;
$bc = $num;
while ($num > 0) {
$rem = $num % 10;
$sum = $sum + $rem;
$num = intdiv($num, 10);
echo "Sum of digits of $bc is $sum";
?>
PROGRAM IN PHP TO PRINT THE TABLE OF A GIVEN
NUMBER
<?php
define('a', 5);
for ($i = 1; $i <= 10; $i++) {
echo $i * a;
echo '<br>';
?>
PROGRAM IN PHP TO PRINT FACTORIAL OF A GIVEN NUMBER
<?php
$num = 5;
$factorial = 1;
for ($i = 1; $i <= $num; $i++) {
$factorial = $factorial * $i;
echo "Factorial of $num is $factorial";
?>
PROGRAM IN PHP TO PRINT DIVERSE OF A GIVEN
NUMBER
<?php
$num = 36; // you can change this number
echo "Divisors of $num are: <br>";
for ($i = 1; $i <= $num; $i++) {
if ($num % $i == 0) {
echo $i . "<br>";
?>
PROGRAM IN PHP TO PRINT THE TRIANGLE FORMAT
GIVENBELOW:
1
12
123
1234
12345
<?php
for($i=0;$i<=5;$i++){
for($j=1;$j<=$i;$j++){
echo $j;
echo"<br>";}
?>
You might also like
- Year 8 HTML Basics and Webpage CreationNo ratings yetYear 8 HTML Basics and Webpage Creation16 pages
- HTML Lists, Links, and Images ExplainedNo ratings yetHTML Lists, Links, and Images Explained29 pages
- HTML Lists, Links, and Images ExplainedNo ratings yetHTML Lists, Links, and Images Explained87 pages
- Program Code:: 1) Design Web Pages Using Text Formatting Tags, Heading, Paragraphs, and Inline Text Styles in HTMLNo ratings yetProgram Code:: 1) Design Web Pages Using Text Formatting Tags, Heading, Paragraphs, and Inline Text Styles in HTML24 pages
- HTML Lists, Hyperlinks, and Forms GuideNo ratings yetHTML Lists, Hyperlinks, and Forms Guide55 pages
- HTML and JavaScript Programming ExamplesNo ratings yetHTML and JavaScript Programming Examples30 pages
- Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8No ratings yetModern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 816 pages