Scribd
Upload
2 views

Program 14 to 18

The document contains multiple HTML code examples for creating web forms and frames. It includes an admission form, a guestbook form with a thank you page, and various frame-based layouts for displaying content. Additionally, it demonstrates how to embed a webpage using an iframe.

Uploaded by

jainsamyak640
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Program 14 to 18

The document contains multiple HTML code examples for creating web forms and frames. It includes an admission form, a guestbook form with a thank you page, and various frame-based layouts for displaying content. Additionally, it demonstrates how to embed a webpage using an iframe.

Uploaded by

jainsamyak640
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

14-15 Lab Activity:

(1) Write an HTML code to create an admission form.


Main.html
<!DOCTYPE html>
<html>
<head>
<title>Admission Form</title>
</head>
<body>
<h1>Admission Form</h1>
<form action="submit.php" method="get">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required><br><br>

<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50"
required></textarea><br><br>

<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="">Select Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="BCom">BCom</option>
</select><br><br>

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


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

(2) Create an HTML form for the guestbook of a website, which accepts various details from
the user, such as Name, Address, country, email, interests etc. On submitting the form,
the control should go to another page showing the animated text “Thank You for
Visiting”.
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guestbook Form</title>
</head>
<body>
<h2>Guestbook</h2>
<form action="thankyou.html" method="GET">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>

<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50"
required></textarea><br><br>

<label for="country">Country:</label><br>
<select id="country" name="country" required>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
<option value="india">India</option>
<option value="australia">Australia</option>
</select><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>

<label for="interests">Interests:</label><br>
<textarea id="interests" name="interests" rows="4" cols="50"
required></textarea><br><br>

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


</form>

</body>
</html>

thankyou.html

<!DOCTYPE html>
<head>
<title>Thank You</title>
<style>
h1 {
opacity: 0;
animation: fadeIn 13s backwards;
}

@keyframes fadeIn {
to {
opacity: 1;
}
from {
opacity: 0;
}
}
</style>
</head>
<body>
<h1>Thank You for Visiting!</h1>
</body>
</html>

16-18 (1) Write an HTML code to create a webpage divided into two frames (horizontal) in
20:80 proportion. The lower frame is to be divided into two frames (vertical), again in
20:80 proportion. Load appropriate web pages for each of the frames.

frame.html
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="20%,80%">
<frame src="cho14.html" name="topFrame" noresize scrolling="no">
<frameset cols="20%,80%">
<frame src="cho2b.html" name="leftFrame" >
<frame src="cho2c.html" name="rightFrame">
</frameset>
</frameset>
</html>

(2) Create a webpage divided into two frames. The left frame must contain the webpage
having at least 5 links pointing to distinct web pages. On clicking the hyperlinks, the
linked webpages must be displayed in the right frame.

main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two Frame Webpage</title>
</head>
<frameset cols="25%,75%">
<!-- Left Frame (contains links) -->
<frame src="left.html" name="leftFrame">

<!-- Right Frame (displays linked pages) -->


<frame src="about:blank" name="rightFrame">
</frameset>

</html>
left.html

<html>
<head>
<title>Left Frame Links</title>
</head>
<body>
<h2>Useful Links</h2>
<ul>
<li><a href="https://www.wikipedia.org"
target="rightFrame">Wikipedia</a></li>
<li><a href="https://mail.google.com/" target="rightFrame">Gmail</a></li>

<li><a href="https://cuiet.codebrigade.in/loginManager/load"
target="rightFrame">Chalkpad Pro</a></li>
<li><a href="https://dmoztools.net" target="rightFrame">DMOZ</a></li>
<li><a href="https://mail2web.com" target="rightFrame">MAIL</a></li>

</ul>
</body>
</html>

(3) Develop a complete web page using Frames and Frameset which gives Information
about a fast food restaurant.

main.html
<!DOCTYPE html>
<head>
<title>Fast Food Restaurant</title>
</head>
<frameset rows="100,*">
<frame src="header.html" name="headerFrame" noresize scrolling="no">
<frameset cols="200,*">
<frame src="menu.html" name="menuFrame" scrolling="auto">
<frame src="content.html" name="contentFrame" scrolling="auto">
</frameset>
</frameset>
<noframes>
<body>
Your browser does not support frames. Please update your browser.
</body>
</noframes>
</html>
header.html

<!DOCTYPE html>
<head>
<title>Fast Food Restaurant - Header</title>
</head>
<body>
<h1>Welcome to Fast Food Paradise!</h1>
<p>Your favorite place for delicious burgers, fries, and shakes!</p>
</body>
</html>

menu.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
</head>
<body>
<h2>Our Menu</h2>
<ul>
<li>Burgers</li>
<li>Fries</li>
<li>Shakes</li>
<li>Salads</li>
<li>Desserts</li>
</ul>
<p><a href="content.html" target="contentFrame">Learn More About Our
Specialties!</a></p>
</body>
</html>

content.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Restaurant Information</title>
</head>
<body>
<h2>About Us</h2>
<p>Fast Food Paradise has been serving delicious meals since 1999. We pride
ourselves on using fresh ingredients and providing excellent customer service.</p>

<h3>Location:</h3>
<p>123 Fast Food Lane, Model Town, Patiala</p>

<h3>Contact Us:</h3>
<p>Email: [email protected]<br>Phone: (123) 456-7890</p>

<h3>Hours:</h3>
<p>Monday - Sunday: 10 AM - 11 PM</p>

<h3>Special Offers:</h3>
<p>Join our loyalty program for exclusive discounts!</p>
</body>
</html>

(4) Write an HTML code to create iframe, & display a web page within another
webpage.

Code.html
<!DOCTYPE html>
<head>
<title>Embedding a Web Page with Iframe</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Below is an embedded webpage:</p>

<iframe
src="https://www.youtube.com/embed/uHtnMmL7VGA?si=3lZWWwLMGctQsUac"
width="600"
height="400"
title="Example Website"></iframe>

<p>Feel free to explore the embedded content!</p>


</body>
</html>

You might also like