Scribd
Upload
1 views18 pages

HTML Code File

The document contains multiple HTML code snippets for creating various web pages including a class timetable, a paragraph with a link, an application form, a restaurant profile, an online shopping product, a seminar schedule, and student tables. Each snippet demonstrates different HTML elements and styling techniques. The examples cover basic webpage structure, form handling, and table formatting.

Uploaded by

bhoirgayatri93
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
1 views18 pages

HTML Code File

The document contains multiple HTML code snippets for creating various web pages including a class timetable, a paragraph with a link, an application form, a restaurant profile, an online shopping product, a seminar schedule, and student tables. Each snippet demonstrates different HTML elements and styling techniques. The examples cover basic webpage structure, form handling, and table formatting.

Uploaded by

bhoirgayatri93
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

Write an HTML code to design your class time table:

<!DOCTYPE html>

<html>

<head>

<title>Class Time Table</title>

</head>

<body>

<h2 align="center">Class Time Table</h2>

<table border="2" cellpadding="10" cellspacing="0" align="center">

<tr bgcolor="lightblue">

<th>Day / Time</th>

<th>9:00 - 10:00</th>

<th>10:00 - 11:00</th>

<th>11:00 - 12:00</th>

<th>12:00 - 1:00</th>

<th>1:00 - 2:00</th>

</tr>

<tr>

<th bgcolor="lightyellow">Monday</th>

<td>Math</td>

<td>English</td>

<td>Physics</td>

<td rowspan="5" bgcolor="orange"><b>Lunch</b></td>


<td>Computer</td>

</tr>

<tr>

<th bgcolor="lightyellow">Tuesday</th>

<td>Chemistry</td>

<td>Math</td>

<td>English</td>

<td>Biology</td>

</tr>

<tr>

<th bgcolor="lightyellow">Wednesday</th>

<td>Physics</td>

<td>Computer</td>

<td>Math</td>

<td>English</td>

</tr>

<tr>

<th bgcolor="lightyellow">Thursday</th>

<td>Biology</td>

<td>Chemistry</td>

<td>Computer</td>

<td>Math</td>

</tr>

<tr>
<th bgcolor="lightyellow">Friday</th>

<td>English</td>

<td>Physics</td>

<td>Chemistry</td>

<td>Sports</td>

</tr>

</table>

</body>

</html>

Write an HTML program which contains a paragraph and a link :


<!DOCTYPE html>

<html>

<head>

<title>Paragraph and Link</title>

</head>

<body>

<h2>Welcome to My Web Page</h2>

<p>

This is a simple paragraph in HTML. HTML is used to create web pages and

structure the content of a website.

</p>

<p>
Click the link below to visit Google:

</p>

<a href="[Link] Google</a>

</body>

</html>

Write a program to design an application form that accepts: Username


Password Age Gender Hobbies City (with a drop-down containing 5
options) The form should have: One button to submit the form Another
button to clear the filled data :
<!DOCTYPE html>

<html>

<head>

<title>Application Form</title>

</head>

<body>

<h2 align="center">Application Form</h2>

<form>

Username: <br>

<input type="text" name="username"><br><br>

Password: <br>

<input type="password" name="password"><br><br>


Age: <br>

<input type="number" name="age"><br><br>

Gender: <br>

<input type="radio" name="gender"> Male

<input type="radio" name="gender"> Female

<input type="radio" name="gender"> Other

<br><br>

Hobbies: <br>

<input type="checkbox" name="hobby"> Reading

<input type="checkbox" name="hobby"> Music

<input type="checkbox" name="hobby"> Sports

<input type="checkbox" name="hobby"> Traveling

<br><br>

City: <br>

<select name="city">

<option>Mumbai</option>

<option>Delhi</option>

<option>Pune</option>

<option>Chennai</option>

<option>Kolkata</option>

</select>

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

<input type="reset" value="Clear">

</form>

</body>

</html>

Create an HTML webpage for a Restaurant Profile with the restaurant


name as a heading and a short introduction paragraph. Also include
one image with a proper alt attribute and add a background color to the
webpage :
<!DOCTYPE html>

<html>

<head>

<title>Restaurant Profile</title>

</head>

<body bgcolor="lightyellow">

<h1 align="center">Spice Garden Restaurant</h1>

<p>

Welcome to Spice Garden Restaurant. We serve a variety of delicious Indian,

Chinese, and Continental dishes made with fresh ingredients. Our restaurant

is known for its warm atmosphere, excellent service, and tasty food.

Come and enjoy a wonderful dining experience with your family and friends.

</p>
<img src="[Link]" alt="Image of Spice Garden Restaurant" width="400">

</body>

</html>

Create a simple HTML webpage for an Online Shopping Product that


includes the product image, product name, price, d a short description.
Also add "Buy Now" and "Add to Cart" buttons with basic styling :
<!DOCTYPE html>

<html>

<head>

<title>Online Shopping Product</title>

<style>

body{

background-color: lightblue;

font-family: Arial;

text-align: center;

.product{

border: 2px solid black;

width: 300px;

margin: auto;

padding: 15px;

background-color: white;

button{
padding: 10px 15px;

margin: 5px;

border: none;

color: white;

font-weight: bold;

.buy{

background-color: green;

.cart{

background-color: orange;

</style>

</head>

<body>

<h1>Online Shopping Product</h1>

<div class="product">

<img src="[Link]" alt="Sports Shoes" width="200">

<h2>Sports Shoes</h2>
<h3>Price: ₹1999</h3>

<p>

High quality and comfortable sports shoes suitable for running,

walking and daily use. Stylish design with durable material.

</p>

<button class="buy">Buy Now</button>

<button class="cart">Add to Cart</button>

</div>

</body>

</html>

CODE:
<!DOCTYPE html>

<html>
<head>

<title>Seminar Table</title>

<style>

body{

font-family: Arial, sans-serif;

table{

border-collapse: collapse;

width: 80%;

margin: auto;

th, td{

border: 2px solid black;

padding: 10px;

text-align: center;

th{

background-color: #e6e6e6;

.yellow{

background-color: #f6f2b3;

.purple{
background-color: #c8c6f5;

.green{

background-color: #c8f5c6;

</style>

</head>

<body>

<h2 style="text-align:center;">Seminar Schedule</h2>

<table>

<!-- First Row -->

<tr>

<th rowspan="3">Day</th>

<th colspan="3">Seminar</th>

</tr>

<!-- Second Row -->

<tr>

<th colspan="2">Schedule</th>

<th rowspan="2">Topic</th>

</tr>

<!-- Third Row -->

<tr>
<th>Begin</th>

<th>End</th>

</tr>

<!-- Monday -->

<tr>

<td rowspan="2">Monday</td>

<td rowspan="2" class="yellow">8:00 a.m.</td>

<td rowspan="2" class="purple">5:00 p.m.</td>

<td>Introduction to XML</td>

</tr>

<tr>

<td>Validity: DTD and Relax NG</td>

</tr>

<!-- Tuesday -->

<tr>

<td rowspan="3">Tuesday</td>

<td class="yellow">8:00 a.m.</td>

<td class="yellow">11:00 a.m.</td>

<td rowspan="2">XPath</td>

</tr>

<tr>

<td class="yellow">11:00 a.m.</td>

<td class="green">2:00 p.m.</td>

</tr>

<tr>

<td class="green">2:00 p.m.</td>


<td class="purple">5:00 p.m.</td>

<td>XSL Transformations</td>

</tr>

<!-- Wednesday -->

<tr>

<td>Wednesday</td>

<td class="yellow">8:00 a.m.</td>

<td class="green">12:00 p.m.</td>

<td>XSL Formatting Objects</td>

</tr>

</table>

</body>

</html>

Q. Write a code for the following table :

CODE :
<!DOCTYPE html>

<html>

<head>

<title>Student List Table</title>

<style>
table{

border-collapse:collapse;

margin:auto;

font-family:Arial;

th, td{

border:2px solid black;

padding:8px 15px;

text-align:center;

</style>

</head>

<body>

<h2 align="center">Student Details Table</h2>

<table>

<tr>

<th rowspan="2">Heading</th>

<th>Students</th>

<th colspan="3">Details</th>

</tr>

<tr>

<th>Id</th>

<th>Name</th>
<th>Department</th>

<th>Roll Number</th>

</tr>

<tr>

<td rowspan="4">Student List</td>

<td>1</td>

<td>Victor</td>

<td>Computer Science</td>

<td>12345</td>

</tr>

<tr>

<td>2</td>

<td>Williams</td>

<td>Electronics</td>

<td>23456</td>

</tr>

<tr>

<td>3</td>

<td>Harry</td>

<td>Electrical</td>

<td>34567</td>

</tr>

<tr>

<td>4</td>
<td>Rick</td>

<td>Civil</td>

<td>45678</td>

</tr>

</table>

</body>

</html>

Q. Write a code for the following table :

CODE :
<!DOCTYPE html>

<html>

<head>

<title>Student Marks Table</title>

</head>

<body>

<table border="3" cellpadding="10" cellspacing="0">

<tr bgcolor="yellow">
<th>NAME</th>

<th>PHYSICS</th>

<th>CHEMISTRY</th>

<th>BIOLOGY</th>

</tr>

<tr>

<td bgcolor="red">Ali</td>

<td style="color:red;">25</td>

<td style="color:green;">55</td>

<td style="color:blue;">72</td>

</tr>

<tr>

<td bgcolor="pink">Ibrahim</td>

<td style="color:green;">40</td>

<td style="color:blue;">65</td>

<td style="color:red;">30</td>

</tr>

<tr>

<td bgcolor="lightblue">Iram</td>

<td style="color:blue;">70</td>

<td style="color:green;">50</td>

<td style="color:red;">32</td>

</tr>

<tr>
<td bgcolor="orange">Hamza</td>

<td style="color:red;">28</td>

<td style="color:green;">45</td>

<td style="color:blue;">80</td>

</tr>

<tr>

<td bgcolor="blue"><font color="white">Aliza</font></td>

<td style="color:green;">60</td>

<td style="color:blue;">75</td>

<td style="color:red;">20</td>

</tr>

</table>

</body>

</html>

You might also like