Scribd
Upload
83 views6 pages

Lab HTML Set 1 Basic Tags

The document contains four HTML exercises focusing on basic tags. It includes creating a class timetable using a table, designing a college webpage with lists and links, developing a frame-based travel guide, and constructing a personal resume. Each section demonstrates different HTML elements and their applications.

Uploaded by

lipappxhdj
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
83 views6 pages

Lab HTML Set 1 Basic Tags

The document contains four HTML exercises focusing on basic tags. It includes creating a class timetable using a table, designing a college webpage with lists and links, developing a frame-based travel guide, and constructing a personal resume. Each section demonstrates different HTML elements and their applications.

Uploaded by

lipappxhdj
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/ 6

HTML LAB

SET 1 (Q1 to Q4 ) Basic Tags


1.Create your class timetable using the table tag.

<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>
</head>
<body>

<h2>Class Timetable</h2>

<table border="1">
<tr>
<th>Day/Period</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>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Break</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Computer Science</td>
<td>Math</td>
<td>Chemistry</td>
<td>Break</td>
</tr>
<tr>
<td>Wednesday</td>
<td>English</td>
<td>Physics</td>
<td>Computer Science</td>
<td>Break</td>
</tr>
<tr>
<td>Thursday</td>
<td>English</td>
<td>Chemistry</td>
<td>Biology</td>
<td>Break</td>
</tr>
<tr>
<td>Friday</td>
<td>Math</td>
<td>Biology</td>
<td>Work Experience</td>
<td>Break</td>
</tr>
</table>

</body>
</html>

2. Design a Webpage for Your College Containing a Description of Courses, Department,


Faculties, Library, etc., Using List Tags, Href Tags, and Anchor Tags.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Webpage</title>
</head>
<body>

<h2>WELCOME TO JAI BHARATH ARTS AND SCIENCE COLLEGE</h2>

<p>Explore various sections of our college:</p>

<ul>
<li><a href="#courses">Courses</a></li>
<li><a href="#departments">Departments</a></li>
<li><a href="#faculties">Faculties</a></li>
<li><a href="#library">Library</a></li>
</ul>

<h3 id="courses">Courses</h3>
<p>We offer undergraduate and postgraduate courses in Science, Arts, and Commerce.</p>

<h3 id="departments">Departments</h3>
<p>Our college has departments for:</p>
<ul>
<li>Computer Application</li>
<li>Cyber Forensics</li>
<li>Computer Science</li>
<li>Electronics</li>
<li>BCom Computer Application M1</li>
<li>BCom Computer Application M2</li>
<li>BA English</li>
</ul>

<h3 id="faculties">Faculties</h3>
<p>We have experienced faculty members dedicated to providing quality education.</p>

<h3 id="library">Library</h3>
<p>Our library has a vast collection of books, journals, and digital resources.</p>

</body>
</html>

3.Create a webpage using Frames with rows and columns where we will have a header frame,
left frame, right frame, and status bar frame. On clicking in the left frame, information should
be displayed in the right frame.

<!DOCTYPE html>
<html>
<head>
<title>ExploreWorld</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">

<div style="text-align: center; padding: 10px; background: lightblue; font-size: 20px; font-
weight: bold;">
<h3><i>ExploreWorld - Travel Guide</i></h3>
</div>

<div style="display: flex; height: 80vh;">


<div style="width: 30%; padding: 20px; background: lightgray;">
<h3>Destinations</h3>
<a href="#"
onclick="document.getElementById('content').innerHTML='<h2>Paris</h2><p>Visit the Eiffel
Tower and Louvre Museum.</p>'"
style="display: block; margin: 10px 0; text-decoration: none; font-weight: bold; color:
black;">
Paris
</a>
<a href="#"
onclick="document.getElementById('content').innerHTML='<h2>Tokyo</h2><p>Experience the
culture and technology of Japan.</p>'"
style="display: block; margin: 10px 0; text-decoration: none; font-weight: bold; color:
black;">
Tokyo
</a>
<a href="#" onclick="document.getElementById('content').innerHTML='<h2>New
York</h2><p>See Times Square, Central Park, and more.</p>'"
style="display: block; margin: 10px 0; text-decoration: none; font-weight: bold; color:
black;">
New York
</a>
<a href="#"
onclick="document.getElementById('content').innerHTML='<h2>Dubai</h2><p>Explore Burj
Khalifa and luxury shopping.</p>'"
style="display: block; margin: 10px 0; text-decoration: none; font-weight: bold; color:
black;">
Dubai
</a>
</div>

<div id="content" style="width: 70%; padding: 20px;">


<h2>Welcome</h2>
<p>Click a destination to see details.</p>
</div>
</div>

<div style="text-align: center; padding: 10px; background: lightgreen;">


@2025 ExploreWorld
</div>

</body>
</html>

4.Create your resume using HTML, use text, link, size, color, and lists.

<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>

<h1>John D</h1>
<p>Web Developer | Designer | Tech Enthusiast</p>
<p>
<a href="mailto:[email protected]">[email protected]</a> |
<a href="https://linkedin.com/in/john" target="_blank">LinkedIn</a> |
<a href="https://github.com/john" target="_blank">GitHub</a>
</p>
<h2>Summary</h2>
<p>Passionate web developer with experience in building user-friendly websites. Skilled
in HTML, CSS, JavaScript, and responsive design.</p>

<h2>Education</h2>
<ul>
<li>Bachelor of Computer Applications (BCA), MG University (2020-2023)</li>
</ul>

<h2>Skills</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Responsive Web Design</li>
<li>Basic Python & Java</li>
<li>Problem-Solving & Debugging</li>
</ul>

<h2>Work Experience</h2>
<ul>
<li>
<strong>Web Developer Intern</strong> - ABC Company (2023-Present)
<br>Developed and maintained company websites using HTML, CSS, and
JavaScript.
</li>
</ul>

<h2>Projects</h2>
<ul>
<li><strong>Portfolio Website</strong> - Created a personal portfolio website using
HTML, CSS, and JavaScript.</li>
<li><strong>E-Commerce Website</strong> - Developed a basic e-commerce website
layout.</li>
</ul>

<h2>Contact</h2>
<p>Ph: +91 9876543210</p>
<p>Location: New York, USA</p>

</body>
</html>

You might also like