Scribd
Upload
3 views10 pages

Programes 2

The document contains multiple HTML programs demonstrating the use of tables, forms, and frames. It includes examples of a table for item pricing, a class timetable, a registration form with various input types, and a frameset dividing a page into three sections. Each section illustrates different HTML elements and attributes, such as colspan, rowspan, and form inputs.

Uploaded by

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

Programes 2

The document contains multiple HTML programs demonstrating the use of tables, forms, and frames. It includes examples of a table for item pricing, a class timetable, a registration form with various input types, and a frameset dividing a page into three sections. Each section illustrates different HTML elements and attributes, such as colspan, rowspan, and form inputs.

Uploaded by

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

1) Write a HTML program, to explain the working of tables.

(use tags:
<table>,<tr>,<td>,attributes ,colspan,rowspan).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Working with Tables in HTML</title>
</head>
<body>
<h1>HTML Table Example</h1>
<table>
<!-- Table Header -->
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!-- Row 1 -->
<tr>
<td>Apple</td>
<td>Rs.1.00</td>
<td>5</td>
<td>Rs.5.00</td>
</tr>
<!-- Row 2 with colspan -->
<tr>
<td colspan="2">Orange</td>
<td>8</td>
<td>Rs.8.00</td>
</tr>
<!-- Row 3 with rowspan -->
<tr>
<td rowspan="2">Banana</td>
<td>Rs.0.50</td>
<td>10</td>
<td>Rs.5.00</td>
</tr>
<tr>
<td>Rs.0.60</td>
<td>6</td>
<td>Rs.3.60</td>
</tr>
<!-- Row 4 -->
<tr>
<td>Mango</td>
<td>Rs.1.50</td>
<td>4</td>
<td>Rs.6.00</td>
</tr>
</table>

</body>
</html>

2) Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use tag
to set the caption to the table & also use cell spacing, cell padding, border, rowspan, colspan etc.).

<html >
<head>
<title>Class Timetable</title>
</head>
<body>
<h1>Weekly Class Timetable</h1>
<table>
<!-- Caption for the Table -->
<caption>Semester Schedule</caption>
<!-- Table Header (Days of the Week) -->
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>

<!-- First Row with rowspan and colspan -->


<tr>
<td>9:00 AM - 10:00 AM</td>
<td rowspan="2">MFCS</td>
<td>Physics</td>
<td rowspan="3">JAVA</td>
<td>English</td>
<td rowspan="3">ADS&AA</td>
</tr>

<tr>
<td>10:00 AM - 11:00 AM</td>
<td rowspan="2">MFCS</td>
<td>English</td>
</tr>

<!-- Third Row -->


<tr>
<td>11:00 AM - 12:00 PM</td>
<td>Mathematics</td>
<td>Physics</td>
</tr>

<!-- Fourth Row with colspan -->


<tr>
<td>12:00 PM - 1:00 PM</td>
<td colspan="5">Lunch Break</td>
</tr>

<!-- Fifth Row -->


<tr>
<td>1:00 PM - 2:00 PM</td>
<td>ES</td>
<td>Mathematics</td>
<td>Physics</td>
<td rowspan="2">JAVA</td>
<td>ADS&AA</td>
</tr>

<!-- Sixth Row -->


<tr>
<td>2:00 PM - 3:00 PM</td>
<td rowspan="2">JAVA</td>
<td rowspan="2">Mathematics</td>
<td>JAVA</td>
<td rowspan="2">ADS&AA</td>
</tr>

<!-- Seventh Row -->


<tr>
<td>3:00 PM - 4:00 PM</td>
<td>MATHEMATICS</td>
</tr>
</table>
</body>
</html>

3) Write a HTML program, to explain the working of forms by designing Registration form. (Note:
Include text field, password field, number field, date of birth field, checkboxes, radio buttons, list
boxes using and two buttons ie: submit and reset. Use tables to provide a better view).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="submit_registration.php" method="post">
<table>
<!-- Name -->
<tr>
<td><label for="name">Full Name:</label></td>
<td><input type="text" id="name" name="name" placeholder="Enter your full
name" required></td>
</tr>
<!-- Password -->
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" placeholder="Enter
your password" required></td>
</tr>
<!-- Age (Number Field) -->
<tr>
<td><label for="age">Age:</label></td>
<td><input type="number" id="age" name="age" min="18" max="100"
required></td>
</tr>
<!-- Date of Birth -->
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<!-- Gender (Radio Buttons) -->
<tr>
<td><label>Gender:</label></td>
<td>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</td>
</tr>
<!-- Hobbies (Checkboxes) -->
<tr>
<td><label>Hobbies:</label></td>
<td>
<input type="checkbox" id="reading" name="hobbies" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="travelling" name="hobbies" value="Travelling">
<label for="travelling">Travelling</label>
<input type="checkbox" id="sports" name="hobbies" value="Sports">
<label for="sports">Sports</label>
</td>
</tr>
<!-- Country (Select Box) -->
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" required>
<option value="">Select your country</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="India">India</option>
</select>
</td>
</tr>
<!-- Address (Textarea) -->
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4" placeholder="Enter your
address"></textarea></td>
</tr>
<!-- Buttons --> <tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

4) Write a HTML program, to explain the working of frames, such that page is to be divided into 3
parts on either direction. (Note: first frame ->image, second frame -> paragraph, third frame ->
hyperlink. And also make sure of using “no frame” attribute such that frames to be fixed).

Main.html
<html>
<head>
<title>Frames Example</title>
</head>
<body>
<frameset rows="30%, 40%, 30%" border="1">
<!-- First frame: Image -->
<frame src="image.html" name="imageFrame" scrolling="no" noresize>
<!-- Second frame: Paragraph -->
<frame src="paragraph.html" name="paragraphFrame" scrolling="yes" noresize>
<!-- Third frame: Hyperlink -->
<frame src="hyperlink.html" name="hyperlinkFrame" scrolling="yes" noresize>
<!-- Content for browsers that don't support frames -->
<noframes>
<h2>Frames are not supported by your browser</h2>
<p>Please use a modern browser that supports frames to view this content.</p>
</noframes>
</frameset>
</body>
</html>
Image.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Frame</title>
</head>
<body>
<img src="https://via.placeholder.com/400x200" alt="Sample Image" style="width:100%;
height:auto;">
</body>
</html>
Paragraph.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraph Frame</title>
</head>
<body>
<p style="padding: 15px; text-align: justify;">
Welcome to the paragraph section. This frame contains text that explains how frames
work in HTML.
Frames allow you to divide the browser window into multiple sections, each of which
can load a separate HTML document.
Frames are not commonly used in modern web design due to their lack of flexibility and
issues with accessibility,
but they can still be useful in certain situations where specific layouts are needed.
</p>
</body>
</html>
Hyperlink.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hyperlink Frame</title>
</head>
<body>
<p style="padding: 15px;">
Visit this <a href="https://www.example.com" target="_blank">example website</a>
for more information.
</p>
</body>
</html>

You might also like