Scribd
Upload
6 views

html

The document contains multiple HTML examples for creating various web pages, including a class timetable, a college webpage with course and faculty information, a resume, and a supermarket page. Each example demonstrates different HTML elements such as tables, lists, links, and CSS styling. The document showcases the use of internal, inline, and external CSS for formatting and layout purposes.

Uploaded by

anetababy04
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
6 views

html

The document contains multiple HTML examples for creating various web pages, including a class timetable, a college webpage with course and faculty information, a resume, and a supermarket page. Each example demonstrates different HTML elements such as tables, lists, links, and CSS styling. The document showcases the use of internal, inline, and external CSS for formatting and layout purposes.

Uploaded by

anetababy04
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/ 28

1. Create your class timetable using table tag.

<!DOCTYPE html>
<html>
<head>
<title>Welcome to our College</title>
</head>
<body>

<h1>Class Timetable</h1>

<table border="1" cellpadding="8">


<tr>
<th>Day/Time</th>
<th>9am to 10am</th>
<th>10am to 11am</th>
<th>12pm to 1pm</th>
<th>1pm to 2pm</th>
<th>2pm to 3pm</th>
<th>3pm to 4pm</th>
</tr>
<tr>
<td>Monday</td>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td>History</td>
<td>Lunch</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Tuesday</td>
<td>English</td>
<td>Math</td>
<td>Science</td>
<td>Geography</td>
<td>Lunch</td>
<td>Computer Lab</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Geography</td>
<td>Science</td>
<td>Math</td>
<td>English</td>
<td>Lunch</td>
<td>Art</td>
</tr>
<tr>
<td>Thursday</td>
<td>Geography</td>
<td>Math</td>
<td>History</td>
<td>English</td>
<td>Lunch</td>
<td>Music</td>
</tr>
<tr>
<td>Friday</td>
<td>Math</td>
<td>History</td>
<td>Science</td>
<td>English</td>
<td>Lunch</td>
<td>Drama</td>
</tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to our College</title>
</head>
<body>

<h1>Class Timetable</h1>

<table border="1" cellpadding="8">


<tr>
<th>Day/Time</th>
<th>9am to 10am</th>
<th>10am to 11am</th>
<th>12pm to 1pm</th>
<th>1pm to 2pm</th>
<th>2pm to 3pm</th>
<th>3pm to 4pm</th>
</tr>
<tr>
<td>Monday</td>
<td>English</td>
<td>Science</td>
<td>Math</td>
<td>History</td>
<td>Lunch</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Tuesday</td>
<td>English</td>
<td>Math</td>
<td>Science</td>
<td>Geography</td>
<td>Lunch</td>
<td>Computer Lab</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Geography</td>
<td>Science</td>
<td>Math</td>
<td>English</td>
<td>Lunch</td>
<td>Art</td>
</tr>
<tr>
<td>Thursday</td>
<td>Geography</td>
<td>Math</td>
<td>History</td>
<td>English</td>
<td>Lunch</td>
<td>Music</td>
</tr>
<tr>
<td>Friday</td>
<td>Math</td>
<td>History</td>
<td>Science</td>
<td>English</td>
<td>Lunch</td>
<td>Drama</td>
</tr>
</table>

</body>
</html>
2. Design a Webpage for your college containing
description of courses, department, faculties, library
etc. using list tags, href tags, and anchor tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ST THOMAS COLLEGE PALAI</title>
</head>
<body>

<h1>Welcome to ST THOMAS COLLEGE


PALAI</h1>
<p>Explore our courses, departments, faculty, and
library:</p>

<h2>Navigation</h2>
<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>

<h2 id="courses">Courses</h2>
<ul>
<li><a href="computer-
science.html">Computer Science
Engineering</a></li>
<li><a href="mechanical.html">Mechanical
Engineering</a></li>
<li><a href="civil.html">Civil
Engineering</a></li>
</ul>

<h2 id="departments">Departments</h2>
<ul>
<li><a href="cs-department.html">Computer
Science Department</a></li>
<li><a href="mech-
department.html">Mechanical Engineering
Department</a></li>
<li><a href="civil-department.html">Civil
Engineering Department</a></li>
</ul>

<h2 id="faculties">Faculties</h2>
<ul>
<li><a href="faculty-ram.html">Dr. Ram
Kumar</a> - Computer Science</li>
<li><a href="faculty-mita.html">Prof. Mita
Sharma</a> - Mechanical Engineering</li>
<li><a href="faculty-john.html">Prof. John
Doe</a> - Civil Engineering</li>
</ul>

<h2 id="library">Library</h2>
<ul>
<li><a href="library-books.html">Books
Collection</a></li>
<li><a
href="library-journals.html">Journals</a></li>
</ul>

</body>
</html>

3. Create web page using Frame with rows and


columns
where we will have header frame, left frame, right
frame,
and status bar frame. On clicking in the left frame,
information should be displayed in right frame.
4. Create Your Resume using HTML, use text, link, size,
color and lists.
<!DOCTYPE html>
<html>
<head>
<title>Alex Martin - Resume</title>
<style>
body {
font-family: Verdana, Arial, sans-serif;
background-color: lightgray;
color: black;
margin: 40px;
}

h1 {
color: teal;
font-size: 40px;
margin-bottom: 5px;
}

h2 {
color: darkslategray;
font-size: 28px;
border-bottom: 2px solid teal;
padding-bottom: 5px;
}

p, li {
font-size: 18px;
}

a{
color: blue;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

ul {
list-style-type: square;
margin-left: 20px;
}

.section {
margin-bottom: 30px;
}

.contact {
font-size: 18px;
color: dimgray;
}
.highlight {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>

<h1>Alex Martin</h1>
<p class="contact">
📧 Email: <a
href="mailto:alex.martin@example.com">alex.martin
@example.com</a><br>
🌐 Portfolio: <a
href="https://www.alexmartin.dev"
target="_blank">www.alexmartin.dev</a><br>
📍 Location: San Francisco, CA<br>
📞 Phone: +1 (123) 456-7890
</p>

<div class="section">
<h2>Objective</h2>
<p>I am a passionate and creative <span
class="highlight">Frontend Developer</span>
seeking a dynamic role in a forward-thinking tech
company. My goal is to apply modern web
development skills to craft intuitive and engaging user
experiences. </p>
</div>

<div class="section">
<h2>Education</h2>
<ul>
<li><strong>Bachelor of Science in Computer
Science</strong> – Stanford University (2021 -
2025)<br>
Relevant Courses: Data Structures, Web
Development, UI/UX Design, Software
Engineering</li>
<li><strong>High School Diploma</strong> –
Lincoln High School (2019 - 2021)<br>
Graduated with Honors – GPA: 3.9/4.0</li>
</ul>
</div>

<div class="section">
<h2>Skills</h2>
<ul>
<li>Languages: HTML5, CSS3, JavaScript</li>
<li>Frameworks & Libraries: React, Tailwind
CSS, Bootstrap</li>
<li>Tools: Git, GitHub, VS Code, Figma</li>
<li>Soft Skills: Communication, Teamwork,
Problem Solving</li>
</ul>
</div>

<div class="section">
<h2>Experience</h2>
<ul>
<li><strong>Frontend Developer
Intern</strong> – PixelWave Solutions (June 2024 –
August 2024)<br>
- Designed responsive landing pages using
HTML, CSS, and JavaScript<br>
- Collaborated with backend developers and
designers using Agile methods<br>
- Helped reduce page load time by 30% by
optimizing images and scripts</li>

<li><strong>Freelance Web
Designer</strong> – Self-employed (2022 –
Present)<br>
- Built websites for small businesses including
portfolios and e-commerce stores<br>
- Maintained SEO best practices and mobile
responsiveness</li>
</ul>
</div>

<div class="section">
<h2>Projects</h2>
<ul>
<li><strong>MyPortfolio</strong>: A
personal website to showcase my work, built with
React and Tailwind CSS – <a
href="https://alexmartin.dev" target="_blank">Visit
Site</a></li>
<li><strong>ToDo App</strong>: A
JavaScript-based task manager with local storage
integration and drag-and-drop features</li>
<li><strong>Weather Dashboard</strong>: A
web app that fetches weather info from
OpenWeatherMap API</li>
</ul>
</div>

<div class="section">
<h2>Hobbies</h2>
<ul>
<li>📖 Reading books and tech articles</li>
<li>🎸 Playing guitar and composing
music</li>
<li>📷 Photography and travel blogging</li>
</ul>
</div>

</body>
</html>
5. Create a Web Page of a supermarket using (internal
CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Supermarket</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
}

header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}

nav {
background-color: #333;
overflow: hidden;
}

nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

nav a:hover {
background-color: #ddd;
color: black;
}

.container {
padding: 20px;
}

.product {
background-color: white;
padding: 15px;
margin: 15px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: inline-block;
width: 200px;
vertical-align: top;
text-align: center;
}

.product img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 5px;
}

.product h3 {
margin: 10px 0 5px;
}
.product p {
color: green;
font-weight: bold;
}

footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>

<header>
<h1>FreshMart Supermarket</h1>
<p>Your one-stop shop for all daily needs!</p>
</header>

<nav>
<a href="#">Home</a>
<a href="#">Groceries</a>
<a href="#">Fruits & Vegetables</a>
<a href="#">Dairy</a>
<a href="#">Contact</a>
</nav>

<div class="container">
<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Apples" alt="Apples">
<h3>Apples</h3>
<p>$2.99/kg</p>
</div>
<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Milk" alt="Milk">
<h3>Milk (1L)</h3>
<p>$1.49</p>
</div>

<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Bread" alt="Bread">
<h3>Whole Wheat Bread</h3>
<p>$1.99</p>
</div>

<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Carrots" alt="Carrots">
<h3>Carrots</h3>
<p>$0.99/kg</p>
</div>
</div>

<footer>
<p>&copy; 2025 FreshMart Supermarket. All rights
reserved. </p>
</footer>

</body>
</html>
6. Use Inline CSS to format your resume that you have
Created.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Supermarket</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
}

header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}

nav {
background-color: #333;
overflow: hidden;
}

nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

nav a:hover {
background-color: #ddd;
color: black;
}

.container {
padding: 20px;
}
.product {
background-color: white;
padding: 15px;
margin: 15px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: inline-block;
width: 200px;
vertical-align: top;
text-align: center;
}

.product img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 5px;
}

.product h3 {
margin: 10px 0 5px;
}

.product p {
color: green;
font-weight: bold;
}

footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>

<header>
<h1>FreshMart Supermarket</h1>
<p>Your one-stop shop for all daily needs!</p>
</header>

<nav>
<a href="#">Home</a>
<a href="#">Groceries</a>
<a href="#">Fruits & Vegetables</a>
<a href="#">Dairy</a>
<a href="#">Contact</a>
</nav>

<div class="container">
<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Apples" alt="Apples">
<h3>Apples</h3>
<p>$2.99/kg</p>
</div>

<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Milk" alt="Milk">
<h3>Milk (1L)</h3>
<p>$1.49</p>
</div>

<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Bread" alt="Bread">
<h3>Whole Wheat Bread</h3>
<p>$1.99</p>
</div>

<div class="product">
<img
src="https://via.placeholder.com/200x150.png?
text=Carrots" alt="Carrots">
<h3>Carrots</h3>
<p>$0.99/kg</p>
</div>
</div>

<footer>
<p>&copy; 2025 FreshMart Supermarket. All rights
reserved.</p>
</footer>

</body>
</html>
7. Use External CSS to format your timetable created.

1. timetable.html (HTML File)

<!DOCTYPE html>
<html>
<head>
<title>My Timetable</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>

<h1>Weekly Timetable</h1>

<table>
<tr>
<th>Day</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>
<th>2:00 - 3:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Break</td>
<td>Chemistry</td>
<td>Sports</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>Math</td>
<td>English</td>
<td>Break</td>
<td>Physics</td>
<td>Library</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Computer</td>
<td>English</td>
<td>Math</td>
<td>Break</td>
<td>Chemistry</td>
<td>Games</td>
</tr>
<!-- Add more rows if needed -->
</table>

</body>
</html>

2. style.css (External CSS File)

body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 20px;
padding: 0;
text-align: center;
}

h1 {
color: #333;
margin-bottom: 20px;
}

table {
margin: 0 auto;
border-collapse: collapse;
width: 90%;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}

th {
background-color: #4CAF50;
color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

tr:hover {
background-color: #ddd;
}
8. Use all the CSS (inline, internal and external) to
format
college web page that you have created.

1.college.html (HTML with Inline & Internal


CSS, and linked to external)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My College</title>

<!-- External CSS -->


<link rel="stylesheet" type="text/css"
href="style.css">

<!-- Internal CSS -->


<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #eef7ff;
}

header {
background-color: #003366;
color: white;
padding: 20px;
text-align: center;
}

.section {
padding: 20px;
}

footer {
background-color: #003366;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>

<header>
<h1>Welcome to XYZ College</h1>
<p>Empowering Education Since 1995</p>
</header>

<div class="section">
<h2>About Us</h2>
<p style="color: #333; font-size: 16px;"> <!--
Inline CSS -->
XYZ College offers a range of undergraduate and
postgraduate programs across science, commerce,
and arts streams.
</p>
</div>

<div class="section">
<h2>Courses Offered</h2>
<ul>
<li>Bachelor of Science (B.Sc)</li>
<li>Bachelor of Commerce (B.Com)</li>
<li>Bachelor of Arts (B.A)</li>
<li>Master of Science (M.Sc)</li>
</ul>
</div>

<div class="section contact">


<h2>Contact Us</h2>
<p>Email: contact@xyzcollege.edu</p>
<p>Phone: +123 456 7890</p>
</div>

<footer>
<p>&copy; 2025 XYZ College. All rights
reserved.</p>
</footer>

</body>
</html>

2. style.css (External CSS)

ul {
list-style-type: square;
color: #003366;
font-weight: bold;
}

.contact {
background-color: #e0f0ff;
border-left: 4px solid #003366;
padding-left: 10px;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy