[go: up one dir, main page]
Scribd
Upload
29 views15 pages

Web 1

The document provides examples of using different HTML tags, CSS styles, and JavaScript events to manipulate web page content and layout. It demonstrates creating basic HTML pages with text formatting, links, images and tables. It also shows how to use frames to divide pages, inline, internal and external CSS styling, and form validation with JavaScript. The examples cover common tasks like manipulating elements, validating user input, and handling events like mouseovers.

Uploaded by

abzjkr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
29 views15 pages

Web 1

The document provides examples of using different HTML tags, CSS styles, and JavaScript events to manipulate web page content and layout. It demonstrates creating basic HTML pages with text formatting, links, images and tables. It also shows how to use frames to divide pages, inline, internal and external CSS styling, and form validation with JavaScript. The examples cover common tasks like manipulating elements, validating user input, and handling events like mouseovers.

Uploaded by

abzjkr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

1 .

Create a simple HTML file to demonstrate the use of different tags

<html>
<head>
<title>Text</title>
</head>
<body>
<p>H<sub>2</sub>O</p>
<p>12<sup>th</sup>April 2016</p>
<p>HTML stands for <strike> Hightext Markup Language</strike></p>
<p>He Said < i am fine > </p>
</body>
</html>

2 .Create a HTML file to link to different HTML page which contains images,
tables, and also link within a page

<!DOCTYPE HTML>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<title>
Linking Pages
</title>
</head>
<body><center>
<table style="Padding: 10Px;" >
<tr><th>
Pages Name
</th>
<th>
Pages description
</th>
<th>
Pages Link
</th>
</tr>
<tr>
<td>
College
</td>
<td>
College Home Page
</td><td>
<a href="file:///home/mca/HijuHTML/College.html"> ICET</a>
</td></tr>
<tr>
<td>
Image
</td>
<td>
Flower Picture
</td><td>
<a href="file:///home/mca/HijuHTML/page1.html"> Flower</a>
</td></tr>
</table></center>
</body>
</html>

3 .Create a HTML page with different frames such as floating frame, navigation
Frame and mixed Frame.

1.frame.html
<html>
<head>
</head>
<frameset rows="10%,20%,20%">
<frame src="namefm.html">
<frameset cols="50%,50%">
<frame src="qulaifyfm.html">
<frame src="sitesfm.html">
</frameset>
<frameset cols="30%,30%,30%">
<frame src="messagefm.html">
<frame src="remindfm.html">
<frame src="imagefm.html">
</frameset>
</html>

nameframe.html
<html>
<head><style>
body
{padding:30px;
background-color: orange;
text-align: left;
align-content: left;
}
</style>
</head>
<body>
Name: Hijas Moideen sha <br>
Address: Perumbavoor,Ernakulam, kerala

</body>
</html>

qualificationframe.html
<html>
<head><style>
body
{
padding:30px;
text-align: left;
align-content: left;
}
</style>
</head>
<body>
<h2> Qualifications</h2>
<ul>
<li>Currently Persuing Masters in Computer application</li>
<li>Graduated In Bachelor of Computer application in 2021</li>
<li>completed Higher secondary Education in 2018</li>
<li>completed SSLC in 2016</li>
</ul>
</body>
</html>

1.favouritesite.html
<html>
<head><style>
body
{padding:30px;
text-align: left;
align-content: left;
}
</style>
</head>
<body>
<h2>Favourite Sites</h2>
<ul>
<li><a href="https://www.facebook.com/"> Facebook</a></li>
<li><a href="https://www.facebook.com/"> whatsapp</a></li>
<li><a href="https://www.facebook.com/"> instagram</a></li>
<li><a href="https://www.facebook.com/"> twitter</a></li>
<li><a href="https://www.facebook.com/"> W3schools</a></li>
</ul>
</body>
</html>

Message.html
<html>
<body>
<marquee behavior="scroll" direction="left" >Read the Message.....</marquee>
</body>
</html>

remindframe.html
<!DOCTYPE html>
<html>
<head>
<title> Here is an example of Blink Element of HTML </title>
<style>
blink {
color: #2d38be;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<blink> HTML blink tags are not used these days and are not supported by most
browsers. It
probably won't work on your current browser. </blink>

</body>
</html>
1.imageframe.html
<html><head>
<style>body{background-image: url('/home/mca/Downloads/ilahia.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
padding:10px;
background-size: 100% 100%;
}
</style>
<body>
</body>
</html>

4 . inline external and internal Style sheet

Mystyle.html
<html>
<head>
<link rel="stylesheet" href="/home/mca/HijuHTML/style.css">
<style>
p2{
font-size:50Px;
}</style>
<body>
<p1 style="color: blue; font-family: verdana; font-size: 300%;"> This is Inline CSS
Method</p1>
<br>
<p2>This is Internal CSS Method</p2>
<br>
<h1> This Is External CSS </h1>
<br>
<p> This is a paragrah of External CSS</p>
</body>
</html>
Style.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
p{font-size:30px;
color: white;
padding:20px;
}

5 .Create a registration form using HTML

<html>
<head>
<title> REGISTRATION FORM </title>
</head>
<body bgcolor=”lavender”>
<br>
<br>
<form>
<form>
<label>First Name:</label>
<input type=”text” name=”firstname” <br><br><br>
<label>Last Name:</label>
<input type=”text” name=”lastname” <br><br><br>
<label>
Course:
</label>
<select>
<option value=”course”>Course</option>
<option value=”BCA”>BCA</option>
<option value=”BBA”>BBA</option>
<option value=”B Tech”>B Tech</option>
<option value=”MCA”>MCA</option>
<option value=”MBA”>MBA</option>
<option value=”M Tech”>M Tech</option>
</select>
<br>
<br>
<label>
Gender:
</label><br>
<input type=”radio” id=”male” name=”male”/>Male<br>
<input type=”radio” id=”female” name=”female”/>Female<br>
<input type=”radio” id=”other” name=”male”/>Other<br>
<br>
<br>
<label>
Phone:
</label>
<input type=”text” name=”country code” value=”+91” size=”2”/>
<input type=”text” name=”phone” size=”10”/><br>
<br>
Address:
<br>
<textarea cols=”80” rows=”5” value=”address”>
</textarea>
<br>
<br>
Email:
<input type=”email” id=”email” name=”email”/><br><br>
Password:
<input type=”password” id=”pass” name=”pass”><br>
<br><br>
<input type=”button” value=”Submit”/>
</form>
</body>
</html>

6 .html registration form validation using javascript code

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color : black;
color : white;
}
.button{
background-color : orange;
border : none;
color : white;
text-decoration : bold;
padding : 10px 20px;
font-size : 16px;
margin : 4px 2px;
cursor : pointer;
}
.div{ background-color:blue; margin:10px; }
</style>
</head>
<body>
<center>
<form method="post">
<div class="div"><font size="4" face="Cooper"><h1
align="center">REGISTRATION</h1></font></div>
<table class="table" style="width:700px" align="center" cellpadding ="20">
<tr>
<th>FIRST NAME</th>
<td><input type="text" name="fname" style="width:400px;" required=""></td>
</tr>
<tr>
<th>LAST NAME</th>
<td><input type="text" name="lname" style="width:400px;" required=""></td>
</tr>
<tr>
<th>DOB</th>
<td><input type="date" name="DOB" style="width:400px;"></td>
</tr>
<tr>
<th>GENDER</th>
<td><input type="radio" name="gender" value="female" >Female<input
type="radio" name="gender" value="male">Male</td>
</tr>
<tr>
<th>EMAIL ID</th>
<td><input type="email" name="email" style="width:400px;" ></td>
</tr>
<tr>
<th>PHONE</th>
<td><input type="number" name="phone" style="width:400px;" required=""><span
id="numloc"></span></td>
</tr>
<tr>
<th>USERNAME</th>
<td><input type="text" name="username" style="width:400px;" required=""></td>
</tr>
<tr>
<th>PASSWORD</th>
<td><input type="password" name="password" style="width:400px;"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one
number and one
uppercase and lowercase letter, and at least 8 or more characters"
required=""><span
id="luk"></span></td>
</tr>
<tr>
<td align="center" colspan="2"><input class="button" onclick="validateform()"
type="submit" name="submit" value="REGISTER"></td>
</tr>
</table>
</form>
<!-<script>
function validateform(){
var f=document.myform.fname.value;
var l=document.myform.lname.value;
var e=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n
dotposition:"+dotposition);
return false;
}
var ph=document.myform.phone.value;
if (isNaN(ph)){
document.getElementById("numloc").innerHTML="enter numeric value only";
return false;
}
else{
return true;
}
var u=document.myform.username.value;
var p=document.myform.password.value;
var lw = /[a-z]/g;
var uw = /[A-Z]/g;
var n = /[0-9]/g
if (p.value.match(lw) || p.value.match(uw)|| p.value.match(n) || p.value.length >=
8 ) {
alert("Please enter a valid password");
return false;
}
}
</script>-->
</center>
</body>
</html>
7 . change the background color for every click of a button
using javascript event handling

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color : yellow;
}
.button {
background-color: #343deb;
color: white;
padding: 15px 40px;
text-align: center;
display: inline-block;
font-size: 20px;
}
</style>
</head>
<body>
<center><br>
<h2><font color="white" size="9">Click here To change Background Color</h2>
<button class="button" onclick="backgroundchange('#181a40')">Press the
Button</button>
<script>
function backgroundchange(color) {
document.body.style.background = color;
}
</script>
</center>
</body>
</html>

8 . mouse comes over the existing content in the page using javascript event
handling

<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0"
src="smiley.gif" alt="Smiley" width="32" height="32">
<p>Ilahia Trust made a leap forward in the educational field by pioneering one of
the
first self-financing engineering colleges.</p>
<p> Ilahia College of Engineering and Technology (ICET), Mulavoor P.O.,
Muvattupuzha is a co-educational minority institution approved by AICTE, New Delhi
and affiliated to APJ Abdul Kalam Kerala Technological University (KTU). </p>
<p>The college is established in the year 2002. Within 19 years since its inception
ICET has made many creditable achievements. </p>
<p>16 batches of engineering students have passed out from the college with
academic brilliance and all-round excellence and occupy positions in various
corporates and institutions. </p>
<p>Some of our alumni have also proved themselves as excellent entrepreneurs.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>

9 . registration form using php and do necessary validations

<html>
<head></head>
<title<Student Registration</title>
<body>
<style>
.error {color: #FF0000;}
</style>
<?php
$sid=$name=$branch=$mark="";
if(isset($_POST["submit"]))
{
if(empty($_POST["sid"]))
{
$iderror="Student id required";
}
elseif($_POST["sid"]>100)
{
$iderror1="Enter a value less than 100";
}
else
{
$sid=$_POST["sid"];
}
if(empty($_POST["name"]))
{
$nameerror="Student name required";
}
else
{
$name=$_POST["name"];
}
if(empty($_POST["branch"]))
{
$brancherror="Branch required";
}
else
{
$branch=$_POST["branch"];
}
if(empty($_POST["mark"]))
{
$markerror="Enter your mark";
}
elseif($_POST["mark"]>1200)
{
$markerror1="Enter a valid value";
}
else
{
$mark=$_POST["mark"];
}
}
?>
<form method="post" action="phpform_validation.php" >
<h1 style="text-align:center"><u>STUDENT REGISTRATION FORM</u></h1>
<table align="center">
<tr>
<td>Student ID</td>
<td>:</td>
<td><input type="text" name="sid"><span class="error">*<?php echo $iderror; echo
$iderror1;?></span></td></tr>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" name="name"><span class="error">*<?php echo
$nameerror; ?></span></td></tr>
<tr>
<td>BRANCH</td>
<td>:</td>
<td><input type="text" name="branch"><span class="error">*<?php echo
$brancherror; ?></span></td></tr>
<tr>
<td>MARKS OBTAINED</td>
<td>:</td>
<td><input type="text" name="mark"><span class="error">*<?php echo $markerror;echo
$markerror1; ?></span></td></tr>
<tr>
<td>&nbsp;</td></tr>
<tr>
<td colspan="2" style="text-align:right"><input type="submit" value="submit"
name="submit"></td></tr>
</table>
</form>
</body>
</html>

10. Electricity Bill using PHP

<html>
<head></head>
<title>Electricity Bill Calculator</title>
<body>
<h1 style="text-align:center;color:green"><u>ELECTRICITY BILL CALCULATOR</u></h1>
<br><br>
<form method="post" >
<div align="center">
<label>Total Unit Consumption:</label>
<input type="text" name="unit"><br><br><br>
<input type="submit" value="calculate" name="calculate"
style="backgroundcolor:green;color:white;">
</div>
</form>
<?php
if(isset($_POST["calculate"]))
{
$unit=$_POST["unit"];
if($unit<=300)
{
$price=$unit*5.80;
}
elseif($unit>=301 && $unit<=350)
{
$price=$unit*6.60;
}
elseif($unit>=351 && $unit<=400)
{
$price=$unit*6.90;
}
elseif($unit>=401 && $unit<=500)
{
$price=$unit*7.10;
}
else
{
$price=$unit*7.90;
}
?>
<h1 style="text-align:center;color:green"><u>ELECTRICITY BILL</u></h1>
<table align="center" border="0">
<tr>
<th>Total unit Consuption</th>
<td>:</td>
<td><?php echo $unit; ?></td></tr>
<tr>
<th>Amount to be paid</th>
<td>:</td>
<td><?php echo $price; ?></td>
</tr>
</table>
<?php
}
?>
</body>
</html>

11 .asort arsort functions.

<!DOCTYPE html>
<html>
<body>
<?php
$students = array("Hijas","Ajith","Anandhu","Abijith");
echo'Asort';
echo'<br>';
asort($students);
print_r($students);
echo '<br>';
echo 'Arsort';
echo '<br>';
arsort($students);
print_r($students);
?>
</body>
</html>

12 .Indian Cricket players

<html>
<head></head>
<body>
<?php
$my_array = array( "Virat Kohli", "Shikhar Dhawan", "M.S Dhoni","Suresh
Raina","Rohit
Sharma","Mohit Sharma","Vijay Shankar","Ravindra Jadeja","Irfan Pathan","Gautam
Gambhir","Parthiv Pate","Virender Sehwag","Harbhajan Singh","Anil Kumble","Sachin
Tendulkar","Rohit Sharma"," Gautam Gambhir");
?>
<h1 style="text-align:center"><u>Indian Cricket Players</u></h1>
<table border=”1” align="center">
<tr>
<th>Sl.No</th>
<th>Name of Players</th>
</tr>
<?php
$arraysize=sizeof($my_array);
for($i=0;$i<$arraysize;$i++)
{
?>
<tr>
<td><?php echo $i+1; ?></td>
<td><?php echo $my_array[$i];?></td>
</tr>
<?php
}
?>
</table>
</body>
</html>

13. Adding two numbers using Java Script

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-size : 30px;
color : green;
font-weight : bold;
}
</style>
</head>
<body>
<center>
<h2>Addition of two numbers</h2>
<br><br>
<label>enter the value of first number :
<input type="text" id="num1" ></label>
<br>
<br>
<label>enter the value of second number :
<input type="text" id="num2" ></label>
<br>
<br>
<button onclick="mysum()">Sum</button>
<p id="m"></p>
<script>
function mysum() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
document.getElementById("m").innerHTML=parseInt(x) + parseInt(y);
}
</script>
</center>
</body>
</html>
14 .Develop web application using HTML and PHP and deploy

<html>
<head>
<title> Sample web Applocation </title>
</head>
</body>
<form action="#" align ="Center" method="POST">
<b> Your salary:</b> <input type="text" name="salary" Value="">
<b> Total Months: m</b> <input type="text" name="month" value=" ">
<input type="submit" name="submit" value="calculate"></form>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$sal=$_POST['salary'];
$month=$_POST['month'];
$result=$sal*$month;
echo "Your Total salary is:$result";
}
?>

You might also like