Scribd
Upload
272 views45 pages

Webpage Creation Using HTML

The document contains code for creating a simple website about State Bank of India using HTML, CSS and JavaScript. The HTML code defines the structure and content including headings, links and images. A separate CSS file is linked to style the elements. JavaScript is likely used to add interactive elements like validation and animations. The website would provide information about the bank, allow users to login and view account details.

Uploaded by

aadith
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
Download as doc, pdf, or txt
272 views45 pages

Webpage Creation Using HTML

The document contains code for creating a simple website about State Bank of India using HTML, CSS and JavaScript. The HTML code defines the structure and content including headings, links and images. A separate CSS file is linked to style the elements. JavaScript is likely used to add interactive elements like validation and animations. The website would provide information about the bank, allow users to login and view account details.

Uploaded by

aadith
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
Download as doc, pdf, or txt
Download as doc, pdf, or txt
You are on page 1/ 45

1.

WEBPAGE CREATION USING HTML

<html>
<head>
</head>
<body bgcolor="skyblue">
<h1 align="center">SRI KRISHNA ARTS & SCIENCE COLLEGE</h1>
<p align="center">AUTONOMOUS</p>
<center>
<img src="">
<img src="">
</center>
<a href="course.html">COURSE<br>
<a href="placement.html">PLACEMENT<br>
<a href="sports.html">SPORTS<br>
</a>
<h3>ADDRESS</h3>
<b>Sri Krishna Arts & Science College"</b><br>
<b>Kuniyamuthur,</b><br>
<b>Coimbatore-641008</b><br>
<h4>For contact</h4>
<li>Email:-skasc@mgial.com</li><br>
<li>Ph no:-0422-2428251</li>
<center>Thank you</center>
</body>
</html>

Course.html
<html>
<head></head>
<body>
<ul type="disc">Course:<li>BCA
<li>BIT
<li>BSc
<li>BCom
<li>BSc(CT)
</ul>
</body>
</html>
Placement.html
<html>
<head></head>
<body>
<h3>The company names are
1.WIPRO
2.INFOSYS
3.CTS
4.HP
5.IGATE</h3>
</body>
</html>
Sports.html
<html>
<head></head>

<body>
<h3>SPORTS EVENT<br>
1.CRICKET<br>
2.VOLLEY BALL<br>
3.CHESS<br>
4.CARROM<br>
5.TENNIS<br></h3>
</body>
</html>

OUTPUT

2. DESIGNING A TABLE USING HTML

<html>
<head><title>time table</title></head>
<body>
<center>CLASS TIMETABLE</center>
<table border="3" cellspacing="3" cellpadding="40" align="center">
<tr>
<th>DAYS
<th>1
<th>2
<th rowspan="6">b<br>r<br>e<br>a<br>k
<th>3
<th rowspan="6">l<br>u<br>n<br>c<br>h
<th>4
<th>5
</tr>
<tr>
<th>DAY1
<td>PHP
<td>DM
<td>PHP
<td colspan="2">PHP LAB
</tr>
<th>DAY2
<td>DM
<td>PHP
<td>DM

<td>WT
<td>PHP
</tr>
<tr>
<th>DAY3
<td>PHP
<td>DM
<td>WT
<td colspan="2">WT
</tr>
<tr>
<th>DAY4
<td>PHP
<td>DM
<td>TMC
<td>PHP
<td>WT
</tr>
<tr>
<th>DAY5
<td>WT
<td>PHP
<td>TMC
<td colspan="2">PHP LAB
</tr>
<tr>
<th>DAY6
<td>PHP

<td>DM
<td>WT
<td colspan="4">PROJECT
</tr>
</table>
</body>
</html>

OUTPUT

3. MOUSEOVER EFFECT USING CSS

<html>
<head>
<style>
img{opacity:0.4;}
img:hover{opacity : 10.0}
</style>
</head>
<body>
<center><h1 > IMAGE TRANSPARENCY </h1></center>
<img src ="/home/skasc/Desktop/FZ-09-bw.jpg">
</body>
</html>

OUTPUT

4.WEBPAGE CREATION USING CSS

<html>
<head>
<style>
h1{color:red;}
h2{color:orange;}
h3{color:blue;}u{color:skyblue;}
p{font-size:24;font-style:italic;color:green;}
</style>
</head>
<body>
<h1 align="center">SRI KRISHNA ARTS & SCIENCE COLLEGE</h1>
<h2 align="center">AUTONOMOUS</h2>
<h3>COURSE:</h3><br>
<h2>
1.BCA
2.BIT
3.BSc
4.BCom
5.BSc(CT)
</h2>
<h3>PLACEMENTS:</h3><br>
<p>The company names are given below:<br>
<h2>
1.WIPRO<br>
2.INFOSYS<br>
3.CTS<br>

4.HP<br>
5.IGATE<br>
<p>ADDRESS</p><br>
<u>Sri Krishna Arts & Science College<br>
Kuniyamuthur,<br>
Coimbatore-641008.</u>
<p align>Thank you</p>
</body>
</html>

OUTPUT

5. WEBPAGE CONTAINING CLOCK USING JAVASCRIPT

< html>
<html><body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var
myvar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script></body></html>

OUTPUT

6. ORDER FORM USING JAVASCRIPT

<html>
<head><title>program6</title>
<script>
var Cost, GST, Grand_Total;
function tally()
{
Cost = 0;
if (document.orderform.Item1.checked) { Cost = Cost + 26.15;

if (document.orderform.Item2.checked) { Cost = Cost + 26.10;

if (document.orderform.Item3.checked) { Cost = Cost + 26;

GST = (Cost * 0.07);


Grand_Total = parseFloat(Cost) + parseFloat(GST);
document.orderform.Total.value = "" + Cost;
document.orderform.GST.value = "" + GST;
document.orderform.GrandTotal.value = "" + Grand_Total;
}
</script>
</head>
<body>
<center><h1>A Simple Shopping Cart</h1></center>
<form method="post" name="orderform" action = "order.html">
<table border = "0">
<tr><td colspan="4">
<p><input type="checkbox" name="Item1" value="Item1_chosen" onclick="tally()"> Item One
(26.15)

<p><input type="checkbox" name="Item2" value="Item2_chosen" onclick="tally()"> Item Two


(26.10)
<p><input type="checkbox" name="Item3" value="Item3_chosen" onclick="tally()"> Item Three
(26)
</td></tr>
<tr>
<td> Total <input type="text" name="Total" value="" size="7"></td>
<td> GST (7%) <input type="text" name="GST" value="" size="6"></td>
</tr>
<tr>
<td> Grand Total <input type="text" name="GrandTotal" value="" size="8"></td>
</tr>
<tr>
<td>Company Name:</td>
<td ><input type="Text" name="Company" size="35" maxlength="40"></td>
</tr>
<tr>
<td>Contact Name:</td>
<td >First <input type="Text" name="FirstName" size="15"
maxlength="20"> Last <input type="Text" name="LastName" size="15" maxlength="20"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="Text" name="Street" size="20" maxlength="40"></td>
</tr>
<tr>
<td>City</td>
<td><input type="Text" name="City" size="20" maxlength="20"> </td>
</tr>

<tr>
<td>Country:</td>
<td><input type="Text" name="Country" size="20" maxlength="20"></td>
<td>Code:</td>
<td><input type="Text" name="Code" size="9" maxlength="10"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="Text" name="Area" size="3" maxlength="5"> <input type="Text"
name="Phone"size="8" maxlength="10"> </td>
</tr>
<tr>
<td>Email Address:</td>
<td ><input type="Text" name="Email" size="30" maxlength="30"></td>
</tr>
<tr><td align="center"><input type="Submit" value="Send Order"></td>
<td align="center"><input type="RESET" value="Reset Order"></td></tr>
</table>
</form>
</body>
</html>

Order.html:
<html>
<head>
<title>form</title>
</head>
<body>
<h1> <b>Your order has been placed successfully</h1></b>

<h4> The products will be delivered within 2-3 days...


Thank You for shopping</h4>
</body>
</html>

OUTPUT

7. JAVASCRIPT VALIDATION

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
return false;
}
return( true );
}
</script>
</head>
<body>
<form action="welcome.html" name="myForm" onsubmit="return(validate());">
Name: <input type="text" name="Name" /><br>
EMail:<input type="text" name="EMail" /><br>
phone no:<input type="text" name="phoneno"/><br>
Address:<input type="text" name="address"/><br>

<input type="submit" value="Submit" />


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

Welcome.html
<html>
<head>
<title>sads</title>
</head>
<body> <h1><b>You have been registered successfully</h1>
</b>
</body>
</html>

OUTPUT

8.FIBONACCI SERIES USING PHP

<?php
$count = 0;
$f1 = 0;
$f2 = 1;
echo $f1.",";
echo $f2.",";
while($count < 20)
{
$f3 = $f2 + $f1;
echo $f3.",";
$f1 = $f2;
$f2 = $f3;
$count = $count + 1;
}

?>

OUTPUT

9. PHP VALIDATION

<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if (empty($_POST["name"]))
{$nameErr = "Name is required";}
else
{$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name))
{
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"]))
{$emailErr = "Email is required";}
else
{$email = test_input($_POST["email"]);
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email))
{
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"]))
{$website = "";}
else
{$website = test_input($_POST["website"]);}
if (empty($_POST["comment"]))
{$comment = "";}

else
{$comment = test_input($_POST["comment"]);}
if (empty($_POST["gender"]))
{$genderErr = "Gender is required";}
else
{$gender = test_input($_POST["gender"]);}
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?
>">
Name: <input type="text" name="name">
<span class="error">*<?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">*<?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error"><?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;

echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>

OUTPUT

10.CREATE AND WRITE INTO A FILE USING PHP


f.php
<html>
<body>
<?php
$file=fopen("D:\koki.txt","a");
fwrite($file,$_POST["data"]);
fclose($file);
?>
<h1> WROTE</h1>
</body>
</html>
file.php
<html>
<body>
<form action="f.php" method="post">
<input type="text" placeholder="Enter DATA" name="data"><br>
<input type="submit" value="Write">
</form>
</body>
</html>

OUTPUT

11.FILE UPLOADING USING PHP

<html>
<body>
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Stored in: " . $_FILES["file"]["tmp_name"];
}
?>
</html>

OUTPUT

12.WEBSITE CREATION USING HTML,CSS,JAVASCRIPT

prgm10.html:
<html>
<head>
<title> SBI</title>
<link rel="stylesheet" type="text/css" href="p10css.css"> </head>
<body>
<h1> STATE BANK OF INDIA</h1>
<h2> <a href="about.html"> aboutus </a>
<a href="log1.html">login</a>
</h2>
<img src="file:///home/student/Firefox_wallpaper.png" alt="aug,2013"height="300" width="600">
<p> state bank of india is trusted bank.<br>it has many branches in india and also in foreign countries
</p>
</body>
</html>
p10css.css
h1{font-size:25; font-style:bold; background: linear-gradient(white,red);
text-transform:uppercase; color:teal;cursor:move; text-align:center; text-shadow: 6px 2px 2px
yellow;}
h2{font-size:20; font-style:italic;color:blue; margin: 40px;
padding: 20px; background: linear-gradient(silver,aqua); cursor:crosshair; text-align:justify;wordspacing:10pt;
border-style: solid; border-width: 3px; border-left-width: 10px; border-right-width: 10px; bordercolor:olive;
text-shadow: 4px 2px 2px #999; }
body{font-size:15; font-style:italic; word-spacing:10pt; box-shadow: inset 0 0 7px 5px #ddd;}
p{font-size:15; font-style:bold; color:cyan; cursor:move; text-align:left;

letter-spacing:1pt;background: linear-gradient(black,orange);}
img{cursor:crosshair;border-style:groove;}
about.html:
<html>
<head> <title> contact us </title>
<style>
h1{font-style:bold; font-family:"broad way";text-transform:uppercase;color:blue;
text-shadow: 6px 2px 2px yellow;}
body{background: linear-gradient(silver,blue);font-size:15; font-style:italic;
word-spacing:10pt; box-shadow: 5px 5px 3px 1px #999
}
</style>
</head>
<body>
<h1> contact us </h1>
<ul type="1">
<li>address:<br> kk nagar,anna salai,cheennai 600 002.
<li>e-mail <br> sbi.in.com
<li> call <br>1800 425 3242
</ul>
<b><i><font color="red" font size="8"> <center>thank you</center> </i></b>
</body>
</html>
log1.html
<html>
<head>
<title> forms and table </title> </head>
<body bgcolor="pink">

<fieldset>
<legend> please log in </legend>
<p>username:
<input type="text" value="jaya" name="user"> <br>
password:
<input type="password" value="password" name="pass"><br></p>
<a href="prg10.html"><input type="submit" value="submit"></a></fieldset>
</body>
</html>
prg10.html:
<html>
<body>
<h2>net banking</h2>
<h4>from</h4>
name:<input id="name" value=" "/><br>
acc-no :<input id="accno" value=" "/><br>
branch-no :<input id="branchno" value=" "/><br>
amount:<input id="amout" value=" "/><br>
<h4>to</h4>
name1:<input id="name1" value=" "/><br>
acc-no1 :<input id="accno1" value=" "/><br>
branch-no1 :<input id="branchno1" value=" "/><br>
<p id="demo"></p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
var amout,result;

amount=document.getElementById("amout").value;
if(amount>500)
{
alert("you successfully transfered");
}
else
{
alert("sorry,your minimum amount should be above 500");
}
document.getElementById("demo").innerHTML=result;
}
</script>
</body>
</html>

OUTPUT

You might also like