Practicals 1. Use of Basic Tags Code
Practicals 1. Use of Basic Tags Code
Practicals 1. Use of Basic Tags Code
Three.html
<!DOCTYPE html>
<hrtml>
<head>
<title>Three</title>
</head>
<body>
Welcome to Hyperlinks.
</body>
</html>
B:
<!DOCTYPE html>
<html>
<head>
<title>linking within the same file</title>
</head>
<body>
<a name="top">top region</a>
<br>
<a href="#bottom">go to bottom</a>
<!—add large texual content-->
<a name="bottom">bottom region</a>
<br>
<a href="#top">go to top</a>
</body>
</html>
Main.html:
<!DOCTYPE html>
<html>
<head>
<title>nested lists</title>
<style type="text/css">
.fruits{color:blue}
.vegetables{color:yellow}
</style>
<link rel="stylesheet" type="text/css" href="one.css">
</head>
<body>
<ul style="list-style-type:filled square">
<li class="bg" style="color:red">fruits</li>
<ol style="list-style-type:upper-roman">
<li class="fruits">banana</li>
<li class="fruits">apple</li>
<li class="fruits">mango</li>
</ol>
</ul>
<ol style="list-style-type:lower-alpha">
<li class="bg" style="color:red">vegetables</li>
<ol class="grp1" start="4" style="list-style-type:uppper-roman">
<li class="vegetables">tomato</li>
<li class="vegetables">potato</li>
<li class="vegetables">carrot</li>
</ol>
</ol>
</body>
</html>
One.css
.bg{background-color:pink}
</body>
</html>
b. Design a web page demonstrating different semantics:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Semantic Example</title>
</head>
<body>
<header>
<img src="garden.jpg" style="float:left; height:80px;width:60">
<h1>The Garden Company</h1>
<h5 style="clear:left">Helping your garden grow</h5>
</header>
<nav>
<hr>
<a href="one.html"><img src="home.jpg"></a>
<a href="lists.html"><img src="about.jpg"></a>
<a href="link.html"><img src="contact.jpg"></a>
</hr>
</nav>
<article>Welcome to Home Page<br>
</article>
We are expert in Gardening.
</article>
<aside>
<b>what does<i>mean?</i></b>
run into an unfamiliar gardening term?
</aside>
<footer>
<hr style="height:5px">
copyright © 2012
</footer>
</body>
</html>
c. Design a web page with different tables. Design a webpages using table so that the content
appears well placed.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Layout with table</title>
</head>
<body>
<a href="http://www.contoso.com" title="Home page">
<img src="images/leaf.gif" class="logo"></a>
<h1>The Garden Company</h1>
<h5><i>Helping you help your gardens grow since 1975</i></h5>
<hr>
<table>
<tr>
<td style="width: 150px">
<p style="margin:0px">
<a href="index.htm"><img src="images/btn_home.gif"
style="border:none"></a>
<a href="tips.htm"><img src="images/btn_tips.gif"
style="border:none"></a>
<a href="contact.htm"><img src="images/btn_contact.gif"
style="border:none"></a></p>
</td>
<td>
<p><img src="images/peaches.jpg" style="float: right; padding: 10px">
<b>Fruit trees are now in stock! </b>We have just received a large
shipment
of peach, pear, apple, and plum trees with sturdy root systems and
healthy
foliage, with prices as low as $29.99. Visit the <a href="products.htm">
Products</a> page for details.</p>
</td>
</tr>
</table>
</html>
d. Design a web page with a form that uses all types of controls
Code:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
<br>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<br>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<br>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
<br>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
<br>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>
e. Design a web page embedding with multimedia features.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Multimedia</title>
</head>
<body>
Video File: <video width="240" height="320" controls>
<source src="myvideo.ogv" type="video/ogg">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.avi" type="video/avi">
<embed src="myvideo.mp4">
</video>
<br>
Audio File: <audio width="240" height="320" controls>
<source src="myaudio.ogv">
<source src="myaudio.mp4">
<source src="myaudio.avi">
<embed src="myaudio.mp4">
</audio>
</body>
</html>
3. Java Script
a. Using JavaScript design, a web page that prints factorial/Fibonacci series/any given series.
Factorial:
<!DOCTYPE html>
<html>
<head>
<title>Factorial Demo</title>
<script language="javascript">
var x=parseInt(prompt("Enter a number",""));
var fact=1,i;
for(i=1;i<=x;i++)
fact*=i;
document.write("<h1>Factorial of "+x+" is : "+fact+"</h1>");
</script>
</head>
<body>
</body>
</html>
Fibonacci:
<!DOCTYPE html>
<html>
<head>
<title>Fibonacci series Demo</title>
<script language="javascript">
var a=0,b=1,c,n,i;
n=parseInt(prompt("Enter limit for fibonacci series:",""));
document.write("<h2> Fibonacci series: </h2><br>");
document.write(a+" "+b+" ");
for(i=2;i<n;i++)
{
c=a+b;
document.write(c+" ");
a=b;
b=c;
}
</script>
</head>
<body>
</body>
</html>
b. Design a form and validate all the controls placed on the form using Java Script.
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus();
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus();
return false;
}
d. Write a JavaScript program to accept a number from the user and display the sum of its digits.
Code:
<!DOCTYPE html>
<html>
<head>
<title>sum of digits</title>
<script>
var n=parseInt(prompt("Enter the number"," "));
var p=0,y;
while(n>0)
{
y=n%10;
n=parseInt(n/10);
p=p+y;
}
document.write("Sum of digits is: "+p);
</script>
</head>
</html>
e. Write a program in JavaScript to accept a sentence from the user and display the number of
words in it. (Do not use split () function).
Code:
<!DOCTYPE html>
<html>
<head>
<title>Without using split function</title>
<script>
var str=prompt("Enter the sentence=","");
var count=0;
for(i=0;i<str.length;i++)
{
if(str.charAt(i,1)==" " && str.charAt(i+1,1)!=" ")
count++;
}
document.write("Number of words are="+(count+1));
</script>
</head>
<body>
</body>
</html>
c. Design a web page demonstrating different Core JavaScript references (Array, Boolean, Date,
Function, Math, Number, Object, String, regExp).
document.write(currentDate.getMonth()+"/"+currentDate.getDate()+"/"+currentDate.g
etFullYear
()+"<br>");
document.write("Time is:");
document.write(currentDate.getHours()+":"+currentDate.getMinutes
()+":"+currentDate.getSeconds());
</script>
<head>
<body>
</body>
</html>
5. Basic PHP I
a. Write a PHP Program to accept a number from the user and print it factorial.
Input.html
<html>
<head>
<title>Factorial of a number</title>
</head>
<body>
<form method="post" action=”Fact.php">
Enter a number: <input type="text" name="n1"><br>
<input type="submit" value="Factorial">
</form>
</body>
</html>
Fact.php
<?php
$n1=(int)$_POST['n1'];
$fact=1;
for($i=1;$i<=$n1;$i++)
{
$fact=$fact*$i;
}
echo "Factorial of ".$n1." is: ".$fact;
?>
b. Write a PHP program to accept a number from the user and print whether it is prime or not.
Input.html
<html>
<head>
<title>Prime Number</title>
</head>
<body>
<form method="post" action="checkPrime.php">
Enter a number: <input type="text" name="n1"><br>
<input type="submit" value="CheckPrime">
</form>
</body>
</html>
checkPrime.php
<?php
$n1=(int)$_POST['n1'];
$flag=0;
for($i=2;$i<=$n1/2;$i++)
{
if($n1%$i==0)
{
$flag=1;
break;
}
}
if($flag==0)
echo "Number is prime";
else
echo "Number is not prime";
?>
6. Basic PHP II
a. Write a PHP code to find the greater of 2 numbers. Accept the no. from the user.
Input.html
<html>
<head>
<title>Greater of two no.s</title>
</head>
<body>
<form method="post" action="check.php">
1st Number: <input type="text" name="n1"><br>
2nd Number: <input type="text" name="n2"><br>
<input type="submit" value="Check">
</form>
</body>
</html>
check.php
<?php
$n1=(int)$_POST['n1'];
$n2=(int)$_POST['n2'];
if($n1>$n2)
echo $n1." is greater than ".$n2;
else if($n2>$n1)
echo $n2." is greater than ".$n1;
else
echo "Both the no.s are equal";
?>
b. Write a PHP program to display the following Binary Pyramid:
1
0 1
1 0 1
0 1 0 1
Code:
<?php
for($i=0;$i<4;$i++)
{
for($j=0;$j<=$i;$j++)
{
if(($i+$j)%2==0)
echo "1 ";
else
echo "0 ";
}
echo "<br>";
}
?>
Code:
<html>
<head>
<title>Database insert and select</title>
</head>
<body>
<?php
$con=mysql_connect("localhost","root","");
if(!$con)
die('could not connect:'.mysql_error());
if(mysql_query("create database College",$con))
echo"Database Created successfully";
else
echo "Error creating database:".mysql_error();
mysql_select_db("College",$con);
$query="create table student(sno smallint,sname varchar(50),percentage
decimal(7,2))";
if(mysql_query($query,$con))
echo"Table Created successfully";
else
echo "Error creating table:".mysql_error();
$query1="insert into student values(101,'Allen',78)";
if(mysql_query($query1,$con))
echo"Record 1 inserted successfully";
else
echo "Error inserting record 1:".mysql_error();
$query2="insert into student values(102,'Smith',45)";
if(mysql_query($query2,$con))
echo"Record 2 inserted successfully";
else
echo "Error inserting record 2:".mysql_error();
$query3="insert into student values(103,'Scott',63.2)";
if(mysql_query($query3,$con))
echo"Record 3 inserted successfully";
else
echo "Error inserting record 3:".mysql_error();
$sql="select * from student where percentage>=35 and percentage<=75";
$result=mysql_query($sql,$con);
if(mysql_num_rows($result)>0)
{
echo "<table
border='1'><tr><th>Sno</th><th>Sname</th><th>Percentage</th></tr>";
while($row=mysql_fetch_assoc($result))
{
echo "<tr>";
echo "<td>".$row['sno']."</td>";
echo "<td>".$row['sname']."</td>";
echo "<td>".$row['percentage']."</td>";
echo "</tr>";
}
echo "</table>";
}
else
{
echo "Table is empty";
}
mysql_close($con);
?>
</body>
</html>
c. Design a PHP page for authenticating a user.
Input.html
<html>
<head>
<title>User authentication</title>
</head>
<body>
<form method="post" action="validate.php">
Username: <input type="text" name="t1"><br>
Password: <input type="password" name="p1"><br>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
</body>
</html>
validate.php:
<?php
$user=$_POST['t1'];
$pass=$_POST['p1'];
if($user=="abc" && $pass=="1234")
echo "Welcome ".$user;
else
echo "Invalid username and password";
?>
9. Email
a. Write a program to send email with attachment.
Code:
<?php
$to="[email protected]";
$subject="test mail";
$message="Hello! This is simple email";
$from="[email protected]"
$header="From:$from";
mail($to,$subject,$message,$header);
echo "Email sent";
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name]))
{
echo "Cookie named '" . $cookie_name . "' is not set!";
}
else
{
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>
</body>
</html>