Scribd
Upload
142 views61 pages

Assigment HTML & PHP CNA PDF

Uploaded by

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

Assigment HTML & PHP CNA PDF

Uploaded by

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

WEB DESIGN

ASSIGNMENT
Web page design by HTML & PHP

CMAV-CC-8 Practical

2020

Name: Sourav Nayak


Roll Number: 183434-23-0001
Computer Application Major (CBCS)
1
SL NAME OF THE ASSIGMENT DATE & TEACHER
Page No. SIGN

01 Create a static webpage using table tags of HTML

02 Webpage that defines all text formatting tags in


tabular format

03 Student Registration form using form tag In HTML

04 Create a Employee registration form using form tag


& Display the input details of Employee using PHP.

05 Add two numbers Input by the user using HTML &


PHP

06 Find out the Factorial of a number using HTML &


PHP

07 Insert into the database and Display the details


fetched from database in a tabular format using
HTML & PHP & MYSQL

08 Create two webpage using list tag and link them


together using href tag (<a></a>) and Tool Tip

09 Design a website for the Tourism Sites of a given


State
Assignment Create a static webpage using table tags of HTML
1

Theory:
This webpage is design using table tags of HTML such as
<table></table>, <td></td>, <tr></tr>.
This webpage contain 4 rows [ <tr> ] and 2 column [<td>]

Steps:
Step 1: Create a new HTML file and save it filename.html
Step 2: To Create a table in HTML, we use the <table> tag
Step 3: Specifies width, cellpadding & align inside table tag
Step 4: A table consists of rows and columns, which can be set using one or more
<tr> and <td> elements
Step 5: We Specified bgcolor to fill the color of rows and coloum
Step 6: The colspan attribute specifies the number of columns a cell should span

Source Code:
<!DOCTYPE html>
<html>
<head>
<title>TABLE TAGS</title>
</head>
<body>

<table width="60%" border="1" cellpadding="10px" align="center">


<tr bgcolor="pink">
<td colspan="2">
<h1>SHREE AGRASAIN COLLEGE</h1>
<h4>5/2, Height Road, Liluah, Howrah - 711204</h4>
</td>
</tr>

<tr bgcolor="orange">
<td colspan="2">

1
<a href="#">Home</a> | <a href="#">About Us</a> | <a
href="#">Gallery</a> | <a href="#">FAQ</a> | <a href="#">Contact
Us</a>
</td>
</tr>

<tr>
<td width="80%">
<h2> HOME PAGE</h2>
<p>
Among the finest Colleges in the city, Shree Agrasain College in
Liluah, Howrah is known for offering excellent education. The
college is located centrally in Liluah, a prominent locality in the
city. It stands close to Near Liluah Railway Station which not only
makes it convenient for students from the vicinity to educate but
also for those from other neighbourhoods to seek education. There
is no dearth of public modes of transport to reach the college from
all major areas of the city.
</p>

<p>
Shree Agrasain College in Liluah, Howrah has a well-equipped
Classroom & Laborites with all the modern equipment. The college
has separate morning and day section which allow enough space
for students to study conveniently. Being a self financed College,
the college offers a number of Courses. The college is operational
between 08:00AM - 04:00PM. Direct Admission can be made via
various modes like Cash.
</p>
</td>

<td valign="middle" bgcolor="lightgreen">


<b>Services Offered</b>
<br>
<ul>
<li>BSc. Computer Science</li>
<br>
<li>BSc. Mathametics</li>
<br>
<li>BCA</li>
<br>
<li>BBA</li>

2
</ul>
</td>
</tr>
<tr bgcolor="pink">
<td colspan="2">
@copyright shreeagrasaincollege.net 2020.
</td>
</tr>

</table>
</body>
</html>

Output :

3
Assignment Webpage that defines all text formatting tags in
2 tabular format

Theory:

Text Formatting Tags

• The formatting tags indicate how text can appear in HTML.


• These tags can make text bold, italic, underlined, superscripted,
subscripted and more.

Steps:
Step 1: Create a new HTML file and save it filename.html
Step 2: To Create a table in HTML, we use the <table> tag
Step 3: Specifies width, cellpadding & align inside table tag
Step 4: A table consists of rows and columns, which can be set using one or more
<tr> and <td> elements
Step 5: We Specified bgcolor to fill the color of rows and coloum
Step 6: The colspan attribute specifies the number of columns a cell should span
Step 7: We specifies &lt; for “ <” and &gt; for “>” and write the code for proper
display syntax as if HTML code
Step 8: List all Text Formatting Tags of html in the Table, Describe in short & give
a example how it works.

Source Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="font-family: Verdana";>

4
<table width="60%" border="1" cellpadding="5px" cellspacing="0"
align="center">
<tr bgcolor="pink">
<td colspan="3">
<h1>Text Formatting Tags in HTML</h1>

</td>
</tr>
<tr bgcolor="#E3FEAB">
<th width="20%">Tag</th>
<th width="30%">Description</th>
<th width="40%">Example and Output</th>
</tr>

<tr>
<td>Bold</td>
<td>It defines bold text.</td>
<td><b>Example:</b>&nbsp;&nbsp;&lt;b&gt;Shree
Agrasain&lt;/b&gt;<br><b>Output:</b> <b>Shree
Agrasain</b></td>
</tr>

<tr>
<td>Italic</td>
<td>It defines italic text.</td>
<td><b>Example:</b> &lt;i&gt;Shree
Agrasain&lt;/i&gt;<br><b>Output:</b> <i>Shree
Agrasain</i></td>
</tr>

<tr>
<td>Underline</td>
<td>It underlines the text.</td>
<td><b>Example:</b> &lt;u&gt;Shree
Agrasain&lt;/u&gt;<br><b>Output:</b> <u>Shree Agrasain</u>
</td>
</tr>
5
<tr>
<td>Strike-out</td>
<td>It puts a line right through the center of the text, crossing it
out. It shows that the text is old and no longer relevant.</td>
<td><b>Example:</b> &lt;strike&gt;Shree
Agrasain&lt;/strike&gt;<br><b>Output:</b> <strike>Shree
Agrasain</strike>
</td>
</tr>

<tr>
<td>Small</td>
<td>It defines small text.</td>
<td><b>Example:</b>
&lt;h4&gt;Shree&lt;small&gt;Agrasain&lt;/small&gt;&lt;/h4&gt;<br
><b>Output:</b><h4> Shree <small> Agrasain </small></h4>
</td>
</tr>

<tr>
<td>Font Color</td>
<td>It changes the text color.</td>
<td><b>Example:</b> &lt;font color=“#ff0000”&gt;Shree
Agrasain&lt;/font&gt;<br><b>Output:</b><font
color="#ff0000">Shree Agrasain</font></td>
</tr>

<tr>
<td>Mark</td>
<td>It defines marked or highlighted text.</td>
<td><b>Example:</b> &lt;mark&gt;Shree
Agrasain&lt;/mark&gt;<br><b>Output:</b> <mark>Shree
Agrasain</mark></td>
</tr>

6
<tr>
<td>Subscript</td>
<td>It defines subscripted text.</td>
<td><b>Example:</b>
H&lt;sub&gt;2&lt;/sub&gt;O<br><b>Output:</b>
H<sub>2</sub>O</td>
</tr>

<tr>
<td>Superscipt</td>
<td>It defines superscripted text.</td>
<td><b>Example:</b> E =
mc&lt;sup&gt;2&lt;/sup&gt;<br><b>Output:</b> E =
mc<sup>2</sup></td>
</tr>
</table>
</body>
</html>

7
Output :

8
Assignment Student Registration form using form tag In
3 HTML
Theory:

Form Tags

The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:

• input: It is used to specify the input field for user.


• textarea: It is used to specify for multi-line text input field for user.
• button: It is used to perform an operation in a form by the user.
• label: It is used to give label to any tag like button, input etc.
• The <fieldset> tag is used to group related elements in a form, this tags
draws a box around the related elements.

Steps:
Step 1: Create a new HTML file and save it filename.html
Step 2: To Create a FORM in HTML, we use the <form> tag inside a <div> class
Step 3: We use feildset tag to give a border around the form element
Step 4: Use <legend> tag defines a caption for the <fieldset> element.
Step 5: Start a table tag for each lable and iput box of form.
Step 6: Specifies width, cellpadding & align inside table tag
Step 7: We Specified bgcolor to fill the color of rows and coloum
Step 8: The colspan attribute specifies the number of columns a cell should span
Step 9: This form set of two table combine together inside a div class
Step 10: At the bottom of the form we put a button that specifies submit form
Step 11: We use <style type="text/css"> inside it specifies all CSS style for the
html file
Step 12: All the element of form table is under one div which is
<div class="content">

9
Source Code:
<html>
<head>
<title> Student Form</title>
<style type="text/css">

.content{
background: #E1F5FE;
width: 70%;
padding: 40px;
margin: 100px auto;
font-family: calibri;
border-radius: 10px;
}
fieldset{
border: 2px solid silver;
margin-left: 20px;
background-color: #E1F5FE;
box-shadow: 0px 2px 2px 0px grey;
}
fieldset legend{
margin-left: 30px;
font-family: calibri;
font-weight: bold;
color: #40407a;
}
.sign-btn{
color: #fff;
width:20%;
margin-left: 20px;
padding: 10px;
background-color: #1c8adb;
}
</style>

10
</head>
<body>
<div class="content">
<form>
<fieldset>
<legend>Student Details</legend>
<table>

<tr>
<td>
Student Name:
</td>
<td>
<input type="text" placeholder=" First Name" name="">
<input type="text" placeholder=" Middle Name" name="">
<input type="text" placeholder=" Last Name" name="">
</td>
</tr>

<tr>
<td>
Parents Infomation:
</td>
<td>
<input type="radio" name="select">Parent
<input type="radio" name="select">Guardain
</td>
</tr>
<td>

Father Name:
</td>
<td>
<input type="text" placeholder=" First Name" name="" required="">
11
<input type="text" placeholder=" Last Name" name="" required="">
</td> </tr>
<td>
Mother Name:
</td>
<td>
<input type="text" placeholder=" First Name" name="">
<input type="text" placeholder=" Last Name" name="">
</td>
</tr>

<tr>
<td>
Phone Number:
</td>
<td>
<select name="">
<option selected hidden code="">Phone Code </option>
<option> +91</option>
</select>

<input type="text" placeholder="Phone Number">


</td>
</tr>

<tr>
<td>
Address:
</td>
<td>
<input type="text" placeholder="Student Address" name="Address"
size="50">
</td>
</tr>

<tr>
<td>
12
E-mail Address:
</td>
<td>
<input type="text" placeholder="E-mail" name="Address"
size="50">
</td> </tr>

<tr>
<td>
Date of Birth:
</td>
<td>
<input type="date">
</td>
</tr>

<tr>
<td>
Father Occupation
</td>
<td>
<select name="">
<option selected hidden code="">Select </option>
<option> Job</option>
<option> Business Man</option>
<option> Others</option>
</select>
</td>
</tr>

<tr>
<td>
Annual Income:
</td>
<td>
<input type="text" placeholder=" Annual Income " name="income">
13
</td>
</tr>

<tr>
<td>
Student Photo:
</td>
<td>
<input type="file" name="img" accept="image/*">
</td>
</tr>

</table>
</fieldset>

<fieldset>
<table>

<legend>Department Details</legend>
<tr>
<td>
<input type="checkbox" name="select"><b>B.Com. (H) in
Accounting & Finance
</td>
<td>
<input type="checkbox" name="select"><b>B.Com. (General)
</td>
</tr>

<tr>
<td>
<input type="checkbox" name="select"><b>B.Sc. (Hons.) in
Computer Science
</td>
<td>
<input type="checkbox" name="select"><b>B.Sc. (Hons.) in
Mathematics</td>
14
</tr>

<tr>
<td>
<input type="checkbox" name="select"><b>B.Sc. in Computer
Application
</td>
<td>
<input type="checkbox" name="select"><b>B.B.A. (Hons.) </td>
</tr>
</table>
</fieldset>

<tr>
<td colspan="5" style="text-align:center">
<button type="button" class="sign-btn">Submit Form</button>
</td>
</tr>

</fieldset>
</table>
</form>
</div>
</body>
</html>

15
Output :-

16
Assignment Create a Employee registration form using form tag
4 & Display the input details of Employee using PHP.

Theory:
PHP Form Handling
In the <form> tag, we have two attributes, action and method:

• action: Using this attribute, we can specify the name of the file which
will collect and handle the form-data.
• method: This attribute specify the means of sending the form-data,
whether it will be submitted via POST method or GET method.

• <form action="filename.php" method="GET or POST">

PHP Form Handling Methods

There are two types of form handling method POST method or GET method.

• POST: This is the built in PHP super global array variable that is used to
get values submitted via HTTP POST method.
• GET: This is the built in PHP super global array variable that is used to
get values submitted via HTTP GET method.
Steps:

Step 1: Create a new HTML file and save it filename.html


Step 2: Create a form in HTML file, use the <form> attribute to create
Step 3: Create a new PHP file and save it filename.php
Step 4: Specify action=”filename.php” and method inside <form> tag.
Step 5: Specify <input name=””> in the form, to get the value store in the
array through form handling method (we use GET method)
Step 6: Specifies width, cellpadding & align inside table tag
Step 7: <input type="submit" value="Submit"> is the button that when
clicked submits the form to the server for processing
Step 8: Display the values using echo $_GET[""];

17
Source Code:
Under HTML file code:-
<html>
<head>
<title> PHP Form</title>
<style type="text/css">

.content{
background: #E1F5FE;
width: 40%;
padding: 40px;
margin: 100px auto;
font-family: calibri;
border-radius: 10px;
}

</style>
</head>
<body>
<div class="content">
<form method="GET" action="employeephp.php">
<fieldset>
<legend>Employee Registration</legend>
<table ><tr>
<td>
Employee Name:
</td>
<td>
<input type="text" placeholder=" Full Name" name="ename">
</td>
</tr>

<tr>
<td>
Gender
</td>
18
<td>
<input type="radio" value="Male" name="redy">Male
<input type="radio" value="Female" name="redy">Female
</td>
</tr>
<td>
Father Name:
</td>
<td>
<input type="text" placeholder=" Full Name" name="fname" >
</tr>

<td>
Mother Name:
</td>
<td>
<input type="text" placeholder=" Full Name" name="mname">
</td>
</tr>

<tr>
<td>
Phone Number:
</td>
<td>
<select name="pcode">
<option selected hidden code="">Code </option>
<option> +91</option>
</select>
<input type="text" placeholder="Phone Number" name="pnumber">
</td>
</tr>

19
<tr>
<td>
Address:
</td>
<td>
<textarea name="sadds" placeholder="Address:" maxlength="1000"
cols="25" rows="3"></textarea>
</td>
</tr>

<tr>
<td>
Company Name:
</td>
<td>
<input type="text" placeholder="College Name" name="cname"
size="50">
</td>
</tr>

<tr>
<td>
Employee Joining Date:
</td>
<td>
<input type="date" name="adate">
</td>
</tr>

<tr>
<td>
Department:
</td>
<td>
<select size="1" name="dep">
<option selected hidden code="">Select </option>
<option> Software</option>
20
<option> Graphics</option>
<option> Accounts and Finance</option>
</select>
</td>
</tr>

<tr>
<td>
Catagory
</td>
<td>
<select name="depcat">
<option selected hidden code="">Select </option>
<option> Project Manager</option>
<option> Assistent</option>
<option> Developer</option>
</select>
</td>
</tr>
</table>
</fieldset>
<tr>
<td colspan="5" style="text-align:center">
<center><button name="b1" value="Submit" type="Submit"
class="sign-btn">SUBMIT</button>
<button name="b2" type="Reset"value="Reset" class="sign-
btn1">RESET</button></center>
</td>
</tr>
</fieldset>
</table>
</form>
</div>
</body>
</html>

21
Under PHP file code:-
<html>
<head>
<title>Employee Details</title>
<style type="text/css">

.content{
background: skyblue;
width: 45%;
padding: 40px;
margin: 100px auto;
border-radius: 10px;
}

.content p{
font-size: 25px;
color: black;
}

</style>
</head>
<body>
<div class="content">
<h1><center>EMPLOYEE DETAILS</center></h1>

<br>

<p>

Employee Details Shown below:-


<br>

Name Of the Employee:- &nbsp; <u><?php echo $_GET["ename"];?> </u>

Who Work for <u><?php echo $_GET["cname"];?></u>

22
<br>

as a <u><?php echo $_GET["depcat"];?> </u> in <u><?php echo


$_GET["dep"];?> </u> Department.

<br>

Gender:- <u><?php echo $_GET["redy"];?> </u>

<br>

Father Name:- Mr. <u><?php echo $_GET["fname"];?> </u>

<br>
Mother Name:- Mrs. <u><?php echo $_GET["mname"];?> </u>

<br>

Phone Number:- &nbsp; <u><?php echo $_GET["pcode"]; echo


$_GET["pnumber"]; ?></u>

<br>

Residential address &nbsp; <u><?php echo $_GET["sadds"]; ?></u>

<br>

Date of Joining:- &nbsp; <u><?php echo $_GET["adate"]; ?></u>


</p>
</div>
<body>
</html>

23
Output :- (Must Have To Start Apache Server For The Output)

After Input the details in the form input field:-

24
After click on the SUBMIT button it display the input record
in the next page using GET method in PHP:-

25
Assignment Add two numbers Input by the user using
5 HTML & PHP
Theory:

SUM of Two Numbers

• Using 2 variable to store the data from the user and 3rd variable for
calculation and display the result.
• We use form and POST method of PHP to store the date from the html
form to variable as an array
• Then add the two number inside php tag in the same file

• <form method=" POST">


• <?php $r = $n1 + $n2; ?>

Steps:

Step 1: Create a new PHP file and save it filename.php


Step 2: Inside that under <?php ?> tag declare and initialize the variable
used for addition of two number
Step 3: Inside the <body> tag of HTML create 3 input field and specify it a
unique name
Step 4: Get the variable and store this using POST method
Step 5: <input type="submit" value="SUM"> is the button that when clicked
SUM the form to the server for processing and execution.
Step 6: Perform a if condition to specify that if the SUM button is click then
the execution/ calculation execute using isset condition in php
Step 7: Display the result in 3rd text box using echo($variable name)
statement in php

26
Source Code:
<?php
$r="";
$n1="";
$n2="";
if (isset($_POST["b1"]))
{
$n1 = $_POST["T1"];
$n2 = $_POST["T2"];

$r = $n1 + $n2;
}
?>
<html>
<head>
<title>Sum of two number</title>
</head>
<body>
<div style=" width: 30%; margin: 8% auto 0; padding: 20px; box-shadow:
0 0 3px 0 black; background-color: Skyblue; ">
<h2>SUM OF TWO NUMBER</h2>
<form name="form1" method="Post" action="">

Number 1:- <input type="text" name="T1" placeholder="1st Number"


value="<?php echo($n1); ?>">

<br>
Number 2:- <input type="text" name="T2" placeholder="2nd Number"
value="<?php echo($n2); ?>">

<br>
<input name="b1" value="SUM" type="Submit">
<input name="reset" type="reset">
<br>
Result:- <input type="text" name="T3" placeholder="Sum of 2 Number"
value="<?php echo($r); ?>">

27
</form>
</div>
</body>
</html>
Output :- (Must Have To Start Apache Server For The Output)

After enter the number and click on the SUM button:-

28
Assignment Find out the Factorial of a number using
6 HTML & PHP

Theory:

Factorial of a number

• Factorial of a number is calculated for positive integers only. The


factorial of 0 is always 1 and the factorial of a negative number does not
exist. It is denoted by ‘!’ preceded by the number.
• Factorial of 5! means factorial of 5
• 5! =5*4*3*2*1 = 120
Steps:

Step 1: Create a new PHP file and save it filename.php


Step 2: Inside that under <?php ?> tag declare and initialize the variable as
$n=0; “$n” under which we store the value given by the user.
Step 3: Inside the <body> tag of HTML create 2 input field and specify it a
unique name
Step 4: Get the variable and store this using POST method
Step 5: <input type="submit" value="SUBMIT"> and give it a name, this is
a button when click execution occurs
Step 6: Perform a if condition to specify that if the button is click then the
execution execute using isset function to get the using POST method in php

if (isset($_POST["b1"]))>

Step 7: Store the result in $msg variable


Step 8: Display the result in 2nd text box using echo($msg;) in php

29
Source Code:
<?php
//This is php code

$no="0";

if (isset($_POST['b1']))
{
$no=$_POST['no'];

function factorial($fact)
{

if ($fact==0) {
return 1;
}
Return $fact*factorial($fact-1);
}
$msg = factorial($no);
}
?>
<html>
<head>
<title>factorial of a number</title>
</head>
<body>
<div style=" width: 30%; margin: 8% auto 0; padding: 20px; box-shadow:
0 0 3px 0 black; background-color: #3498db; ">
<h1><center>FACTORIAL OF A NUMBER</h1></center>
<hr>
<table>
<form name="form1" method="Post" action="">

<label style="font-size: 20px; font-family: arial;">Enter No: </label>

30
<input style="width: 200px; height: 35px; font-size: 25px;" type="text"
name="no" placeholder="Enter a number" value="<?php echo($no);
?>">
<br>

<br>
<input name="b1" value="SUBMIT" type="Submit">

<br>

<lable style="font-size: 50px; font-family: arial;">Factorial of <?php echo


$_POST["no"];?> is :- </lable>

</form>

</table>

<p style=" width: 40%; font-size: 50px; background: white; border-radius:


5px">

<?php
if(isset($msg))
{
echo $msg;
}
?>

</p>
</div>
</body>
</html>

31
Output :- (Must Have To Start Apache Server For The Output)

After enter the number and click on the SUBMIT button:-

32
Assignment Insert into the database and Display the details fetched
from database in a tabular format using
7 HTML & PHP & MYSQL

Theory:

Input the details of employee and store this details in the


MYSQL database and Display the details of the employee
fetched from the database in a tabular format

PHP mysqli_query function


• The mysqli_query function is used to execute SQL queries.
• The function can be used to execute the following query types;
• Insert

• Select

• Update

• delete

PHP mysqli_connect function


• The PHP mysql connect function is used to connect to a MySQL
database with your php file or server if you work global

PHP mysqli_fetch_array function


• The mysqli_fetch_array function is used fetch row arrays from a
query result set.
• “mysqli_fetch_array(…)” is the function for fetching row arrays
• “$result” is the result returned by the mysqli_query function.

33
Steps:
Step 1: Start Apache and MYSQL Server from Xampp or WAMP.
Step 2: Go to your browser and in URL bar put “http://localhost/phpmyadmin/”
Step 3: Now, Create a New database and a Carete a table with no of columns
you required. In this we work on Database: assigment »Table: student
Step 4: Inside body tag of html create a <form> with form handling method
(we use POST method)
Step 5: Create another php file (confg.php) to make connection with the
phpmyadmin database.
Step 6: In the Config.php file we specify hostname, database name,
username,and password and use a php function to make a connection

$con = mysqli_connect($dbhost, $dbusername, $dbpass,


$dbname)

Step 7: Incude the path of the Config.php file in every file of this project to
make connection of that file with the phpmyadmin database

<?php include("config.php");?>
Step 8: Create a function.php file inside that performing query to insert
values into the database from the HTML <form>

mysqli_query($con, "INSERT into student


values('','$name','$email','$course','$mobile','$dob');

Step 9: Now inside form.php perform another query to select the data from
database and store it into a variable $result

$result = mysqli_query($con, " "SELECT * from student


ORDER by name DESC");

Step 10: Now inside form.php create a table and fetched the data from
database to display in a tabular format using while loop and performing a
query

while ($res=mysqli_fetch_array($result))

Step 11: display the values using $res['column name'];

34
Source Code:- Inside form.php
<?php
include("config.php");
$result=mysqli_query($con,"SELECT * from student order by name
DESC");
?>

<html>
<head>
</head>
<body>
<div style="width: 30%; margin: 30px auto; box-shadow: 0 0 3px 0
black; background:#90EE90";>
<form action="function.php" method="POST">

<table cellpadding="2" width="100%" cellspacing="2">

<tr>
<td colspan=2>
<center><font size=5><b>Student Registration
Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name="names"></td>
</tr>
<tr>
<td>Course</td>
<td>
<select style="width: 180px; height: 25px;" size="1" name="course">
<option selected hidden code="">Select Course </option>
<option> BCA</option>
<option> BSc. Computer Science</option>
<option> BSc. Mathamatics</option>
<option> BBA</option>

35
<option> BCOM</option>
</select>
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="date" name="dob" style="width: 180px; height:
25px;"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" name="submit"
value="Submit Form" /></td>
</tr>
</table>
</form>
</div>
<div style="width: 45%; margin: 30px auto; box-shadow: 0 0 3px 0 black;
background: #FFFFE0";>
<table width="100%" border="2" cellpadding="2">
<tr>
<th>Name</th>
<th>Course</th>
<th>Email</th>
<th>Phone</th>
<th>DOB</th>
</tr>
<?php
while ($res=mysqli_fetch_array($result))
36
{
echo '<tr>';
echo '<td>'.$res['Name'].'</td>';
echo '<td>'.$res['Course'].'</td>';
echo '<td>'.$res['Email'].'</td>';
echo '<td>'.$res['Phone'].'</td>';
echo '<td>'.$res['DOB'].'</td>';
echo '</tr>';
}

?>
</table>
</div>
</body>
</html>
Inside function.php
<?php
include("config.php");

if(isset($_POST['submit']))
{
$name=$_POST['names'];
$email=$_POST['email'];
$mobile=$_POST['phone'];
$course=$_POST['course'];
$dob=$_POST['dob'];

$result=mysqli_query($con, "INSERT into student


values('','$name','$email','$course','$mobile','$dob')");
if ($result)
{
header('Location: stdform.php');

else

37
{
echo "Fail";
}
}
?>
Inside Config.php

<?php

$dbhost = 'localhost:3307';
$dbname = 'assigment';
$dbusername = 'root';
$dbpass = '';

$con = mysqli_connect($dbhost, $dbusername, $dbpass,


$dbname);

?>

38
Output :- (Have To Start Apache & MYSQL Server) [initial output]

Inserting First Data and click SUBMIT FORM button to


display in a tabular format:-

39
Inserting Second Data and click SUBMIT FORM button to
display in a tabular format:-

Phpmyadmin database after insertion:-

40
Assignment Create two webpage using list tag and link them
8 together using href tag and Tool Tip

Theory:

Create two html webpage using list tag (order and unorder)
of html and link them together with “href” tag and use Tool
Tip on that link.

Steps:
Step 1: Create 1st html webpage name it first.html
Step 2: Using list tag (Order list <ol> & Unordered list <ul>)
Step 3: Craete a 2nd webpage and name it another-page.html
Step 4: Now add a link to the first page so that the browser will
load another_page.html when you click the text Go to the other
page. Using <a></a> and href tag
Step 5: Add Tool Tip to the link text that emerges when the mouse
cursor is moved above a link

Source Code:- Inside first.html

<!DOCTYPE html>
<html>
<head>
<title>First_page.html</title>
</head>
<body style="font-family:'Source Sans Pro', sans-serif;">
<div style="width: 60%; margin: auto;">
<h1>Shree Agrasain College</h1>
<p>
The purpose of going to college is ultimately to graduate with
a degree which will drastically<br> improve one's chances of

41
getting a job in which one can afford to live comfortably.<br>
Obviously, higher income is a primary benefit of earning your
college degree.<br>
</p>
<p>
This can include health care, retirement investment, travel
and other perks.<br>The more education someone has, the
more money he is likely to make during his life.<br> And
being in school helps you learn how to deal with others, set
goals and get things done.
</p>

<h2>Why we Should Go to college(Unorder List)</h2>


<ul>
<li>Make More Money</li>
<li>Benifit for you and your family</li>
<li>Benifit for you and your family</li>
<li>Best Carrer Opportunities</li>

</ul>

<h2>This is the Ordered List</h2>


<ol>
<li>Make More Money</li>
<li>Benifit for you and your family</li>
<li>Benifit for you and your family</li>
<li>Best Carrer Opportunities</li>

</ol>
<a href="another_page.html" title="This leads you to another
page">Click to Go to the 2nd page</a>
<br>
<br>
<img src="SAC_FD.gif" style="float: left;">

</div>
</body> </html>
42
Source Code:- Inside another_page.html

<!DOCTYPE html>
<html>
<head>
<title>Anotherpage</title>
</head>
<body style="font-family:'Source Sans Pro', sans-serif;">
<div style="width: 60%; margin: auto;">
<h1>Types Of University in India</h1>
<ul>
<li><h3>Central Universities</h3></li>
<b>Salient features:</b>
<ol>
<li>Conducts admission procedure</li>
<li>Can decide their own syllabus</li>
<li>Conducts their own exams</li>
<li>Grants degrees to the students</li>
</ol>

<li><h3>State Universities</h3></li>
<b>Salient features:</b>
<ol>
<li>Conducts their own admission procedure</li>
<li>Grants degrees to the students</li>
<li>Conducts their own exams</li>
<li>Can decide their own syllabus</li>
</ol>

<li><h3>Autonomous Institutes & Colleges</h3></li>


<b>Salient features:</b>
<ol>
<li>Conducts their own admission procedure</li>
43
<li>Can decide their own syllabus</li>
<li>Conducts their own exams</li>
<li>Can grant degrees to the students</li>
</ol>
<li><h3>Private Universities</h3></li>
<b>Salient features:</b>
<ol>
<li>Conducts their own admission procedure</li>
<li>Can decide their own syllabus</li>
<li>Conducts their own exams</li>
<li>May or may not grant diploma or degree to
students</li>
</ol>

</ul>

</div>
</body>
</html>

44
Output :- of First.html

45
Output :- of another_page.html
after click on “click to Go to the 2nd Page”

46
Assignment Design a website for the Tourism Sites of a given
9 State

Theory:

• One Home page that leads to other pages. The Home


page should contain the name of the City as heading
along with a logo. There should be a tab with the
following links:
o Home;
o Places
o Contact Us

• One Palces page which contains a list of all the Heritage


Sites present in the city. The list should be a list of
Pictures. There should be a minimum of ten heritage
sites. Each Image entry in the list should be a HTML
link/button that leads to a web-page totally dedicated to
the Heritage Site itself.

• Each Heritage Site should have its own dedicated web-


page. This page should contain a description about the
site along with its history.

47
Steps:
Step 1: Create 1st html webpage name it home.html
Step 2: Create own dedicated web-page. This page should contain a
description about the place along with its history.
Step 3: Craete a 3rd webpage and name it Contact Us.
Step 4: Craete a 4th webpage in html for menu of the above 3 pages
html by using button and href tag
Step 5: Create 2nd html webpage name it places.html
Step 6: Create a frameset page . and give the link of all the
webpage. And name the main frame as “right”
Step 7: The window is divided into frames in a similar way the
tables are organized: into rows and columns.
Step 8: Target the frame “right” where all individual dedicated
page open.
Step 9: create a topper.html for the top bar of the page

Source Code:- Inside home.html

<html>
<head>
<title> Home</title>

<style type="text/css">
body{
background-image: url(person-on-a-bridge-near-a-lake-
747964.jpg);
background-size: cover;
background-attachment: fixed;
}
.content{
background: white;

48
width: 70%;
padding: 40px;
margin: 100px auto;
font-family: calibri;
border-radius: 10px;
}
p{
font-size: 25px;
color: black;
}
</style>
</head>
<body>
<h1><center><font face="Bebas" size="200px"
color="grey">Home</font></center></h1>

<div class="content">
<p>
West Bengal, considered by many as the cultural centre of
India, is a land of varied
charms with snow-capped mountains in Darjeeling in the
north followed by vast
expanse of forest, tea plantation and wild life in Dooars region
in the foothills. There
are heritage sites in the middle in Maida, Murshidabad and
Nadia districts and forest
tracts in the western districts.
<p></p>
<img src="f1/d/rock_garden1467725340.jpg" height="250px",
width="100%" align="left" style="border: solid black 1px; padding:
2px">

</p>
<p>
The largest delta of Sunderbans forms its southern
coast. West Bengal, in fact, offers all components of tourism
viz., leisure, holidaying,
49
beach, pilgrimage, heritage, mountaineering /adventure and
convention tourism. The
State of West Bengal is a microcosm of the vast Indian sub-
continent with its myriad
physical forms. The mighty Himalayas in the north and the
Bay of Bengal in the south
protect the State.
</p>

<img src="f1/d/darjeeling11467349509.jpg" height="300px",


width="100%" align="left" style="border: solid black 1px; padding:
2px">
<p>
West Bengal offers coastal-marine
ecosystem along the districts of South 24 Parganas and Purba
Medinipur. Bay of
Bengal is situated to the South. The districts of Purba
Medinipur and South 24-
Parganas are having sandy beaches at Digha, Shankarpur-
Chandpur, Dadanpatrabarh,
Bakkhali, Frasergunj and Sagardwip.
</p>
</div>
</body>
</html>

Source Code:- Inside indivisual _webpage_of_places.html

<html>
<head>
<title> dakshineswar</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boo
tstrap.min.css" integrity="sha384-

50
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTs
z/K68vbdEjh4u" crossorigin="anonymous">

<style type="text/css">
body{
background-image: url(person-on-a-bridge-near-a-lake-
747964.jpg);
background-size: cover;
background-attachment: fixed;
}
.content{
background: white;
width: 70%;
padding: 40px;
margin: 100px auto;
font-family: calibri;
border-radius: 10px;
}
p{
font-size: 25px;
color: black;
}
</style>
</head>
<body>
<h1><center><font face="Bebas" size="200px"
color="grey">Dakshineswar </font></center></h1>

<div class="content">
<p>
BThe temple compound, apart from the nine-spired main temple,
contains a large courtyard surrounding the temple, with rooms
along the boundary walls. There are twelve shrines dedicated to
Shiva—Kali's companion—along the riverfront, a temple to Radha-
Krishna, a bathing ghat on the river, a shrine dedicated to Rani
Rashmoni. 'Nahavat-Khana', the chamber in the northwestern

51
corner just beyond the last of the Shiva temples, is where
Ramakrishna spent a considerable part of his life.

The Dakshineswar Kali Temple was founded around the middle of


the 19th Century by Rani Rashmoni. Rani Rashmoni belonged to
Kaivarta caste and was well known for her philanthropic activities.
In the year 1847, Rashmoni, prepared to go upon a long pilgrimage
to the sacred Hindu city of Kashi to express her devotions to the
Divine Mother. Rani was to travel in twenty four boats, carrying
relatives, servants and supplies. According to traditional accounts,
the night before the pilgrimage began, Rashmoni had a vision of the
Divine Mother, in the form of the goddess Kali in a dream and
reportedly said,

“ There is no need to go to Banaras. Install my statue in a


beautiful temple on the banks of the Ganges river and arrange for
my worship there. Then I shall manifest myself in the image and
accept worship at that place. ”
</p>
<p></p>
<img src="f1/dakshineshwar_tempal1467458439.gif"
height="250px", width="100%" align="left" style="border: solid black
1px; padding: 2px">

</p>

<a href="contact.html" target="right"><center><button


type="button" style="height: 50px; width: 200px" class="btn btn-
success">
Back to Heritage</button></a>
</div>
</body>
</html>
In the same way create the remaining webpage of the
places

52
Source Code:- Inside places.html

<html>
<head>
<style type="text/css">
body{
background-image: url(person-on-a-bridge-near-a-lake-
747964.jpg);
background-size: cover;
background-attachment: fixed;
}
</style>

</head>
<body background="1.jpg">
<h1><font color="white" face="Century" size="200"><center>
Heritages</cenetr></font></h1>
<br>
<br>
<center>
<a href="darjelling.html" target="right">
<img src="d2.jpg" onmouseover="src='d1.jpg'"
onmouseout="src='d2.jpg'" width=800 height=300>
</a>
<br>
<br>
<a href="digha.html" target="right">
<img src="di1.jpg" onmouseover="src='di2.jpg'"
onmouseout="src='di1.jpg'" width=800 height=300>
</a>
<br>
<br>
<a href="dakshineswar.html" target="right">
<img src="f1/banner/dakhi1.jpg"
onmouseover="src='f1/banner/dakhi2.jpg'"

53
onmouseout="src='f1/banner/dakhi1.jpg'" width=800
height=300>
</a>
<br>
<br>
<a href="santi.html" target="right">
<img src="f1/banner/santi1.jpg"
onmouseover="src='f1/banner/santi2.jpg'"
onmouseout="src='f1/banner/santi1.jpg'" width=800
height=300>
</a>
</center>
</body>
</html>

Source Code:- Inside link.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap
.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K6
8vbdEjh4u" crossorigin="anonymous">
<title>link</title>
</head>
<body style="background-color: #74b9ff; width: 100px; margin: 8% 15%;
">
<a href="home.html" target="right"><button type="button"
style="height: 50px; width: 200px" class="btn btn-success">
Home</button></a>
<a href="places.html" target="right"><button type="button"
style="height: 50px; width: 200px" class="btn btn-success">
Places</button></a>

54
<a href="contact.html" target="right"><button type="button"
style="height: 50px; width: 200px" class="btn btn-success">
Contact</button></a>

</body>
</html>

Source Code:- Inside index.html (Frameset frame file)

<frameset framespacing="0" border="0.5" rows="13%,*">


<frame src="topper.html" frameborder="0">

<frameset cols="18%,*">
<frame src="link.html" frameborder="0">
<frame src="home.html" name="right" frameborder="0">
</frameset>
</frameset>

55
Output :- of index.html

Output :- after click on PLACES (palces.html)

56
Output :- after click on PLACES (contact.html)

57
Individual page OUTPUT:-

58
59

You might also like