html - basic questions
PROJECT WORK QUESTIONS — Based on
HTML-1 (Basics, Tags, Attributes,
Formatting)
Use headings, paragraphs, formatting tags, special characters, pre tag, hr,
comments, etc.
Project Set – 1: Basic HTML Structure & Formatting
1. Create a mini biography webpage of any fictional character using:
Headings from <h1> to <h6>
Bold, italic, underline, strong, em
Superscript, subscript (H₂O, (a+b)²)
Highlight using <mark>
Strike removed text using <del>
Horizontal lines between sections
At least one comment inside code
Special characters: ©, ®, <, >, “ ”, &
sample code Mini Biography Webpage
<!DOCTYPE html>
<html>
<head>
<title>Mini Biography Webpage</title>
html - basic questions 1
<style>
body{
font-family: Arial, sans-serif;
background: #f8f8f8;
padding: 20px;
}
.container{
width: 70%;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2, h3, h4, h5, h6{
color: #333;
}
p{
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<!-- Biography webpage of fictional character -->
<h1>Biography of <u><b>Arion Blaze</b></u></h1>
<hr>
<h2>Introduction</h2>
<p>
<strong>Arion Blaze</strong> is a fictional hero from the “<i>Guardians
of the Eternal Flame</i>” universe.
He is known for his <mark>extraordinary intelligence</mark> and unmat
html - basic questions 2
ched bravery.
</p>
<hr>
<h3>Early Life</h3>
<p>
Arion was born in a small village called <em>Eloria</em>.
His childhood was filled with challenges, but his determination made him
stronger.
He often studied ancient formulas like (a+b)<sup>2</sup> and scientific
elements such as H<sub>2</sub>O.
</p>
<hr>
<h4>Achievements</h4>
<p>
He trained to become a master warrior & scholar.
Some people believed he was “<b>The Chosen One</b>”, while others <
del>underestimated</del> him.
His legendary symbol <Blaze> is now recognized worldwide.
</p>
<hr>
<h5>Famous Quote</h5>
<p>
<i>“Courage isn’t the absence of fear, but the fire that burns within.”</i>
</p>
<hr>
<h6>Copyright Notice</h6>
<p>
Fictional Character © 2025 Arion Studios®. All rights reserved.
html - basic questions 3
</p>
</div>
</body>
</html>
1. Design a "Course Introduction Page" containing:
Title: HTML Fundamentals
Paragraphs explaining the course
One section using <pre> showing sample HTML code
Use of non-breaking spaces for indentation
Use <blockquote> for a quote
2. Create a "News Update Page" using different formatting tags:
Large heading
Intro paragraph
Use <small> for date/time
Use <big> for breaking news title
Use <abbr> to show abbreviations (HTML, CSS, JS)
PROJECT WORK QUESTIONS — Based on
HTML-2 (Images, Lists, Marquee)
Use images, ordered/unordered lists, nested lists, marquee, description lists.
Project Set – 2: Images & List Based Projects
html - basic questions 4
1. Create a Food Menu Page using:
Food category heading
Unordered lists with square, circle, and disc types
Nested list for sub-items
Add at least 3 food images
Add a marquee showing “TODAY SPECIAL OFFERS”
2. Build a “Student Subjects Overview Page” using:
Description list <dl> <dt> <dd>
Use images aligned left/right inside paragraph
Use marquee to scroll an image or text vertically
Add one large image with hspace , vspace , border
3. Create a "Travel Packages Page" with:
Country → City → Places (3-level nested list)
Add three destination images with size attributes
Add a marquee banner: “BOOK NOW – LIMITED SEATS!”
PROJECT WORK QUESTIONS — Based on
HTML-3 (Links, Anchor, Favicon, Tables)
Use internal links, external links, object links, image links, tables, merged
rows/columns.
Project Set – 3: Links & Tables
1. Create a two-page mini website: [Link] and [Link]
Use inter-document linking (#up, #down)
Use intra-document links to move between pages
Add an image that works as a clickable link
html - basic questions 5
Add a link that opens Google in a new tab
Add favicon to the website
2. Design a “Student Marksheet Table Page” using:
Table borders, background colors, cellpadding, cellspacing
Use <thead> , <tbody> , <tfoot>
Add a caption titled “Semester Marklist”
Merge one row using colspan
Merge one column using rowspan
3. Create a “Product Price Comparison Table”:
5 products
Price, discount, rating columns
Image of product should link to another page
Add row coloring using attributes
Add navigation links top & bottom of the page
PROJECT WORK QUESTIONS — Based on
HTML-4 (DIV, CSS
inline/internal/external)
Use <div> , styling structure, layout, sections, internal and external CSS.
Project Set – 4: DIV Layout & CSS Projects
1. Create a full webpage layout using <div> blocks:
Header
Menu
Banner
Content
html - basic questions 6
Footer
Use inline CSS to style these sections.
2. Create an “Event Invitation Page” using internal CSS:
Page background
Center a div container
Inside: event title, date, image, description
Use class and id selectors
Use different fonts & colors
3. Create a multi-section “Company Landing Page” using external CSS:
Link external stylesheet
Header with background image
Navigation div
Services div (3 boxes side-by-side)
Footer div
Use padding, margins, borders
4. Design a “Portfolio Box Layout” using divs:
Profile image in a styled box
Name & role
Skills list (inside styled div)
Projects list (3 project items inside div)
Use rounded corners, colors, custom fonts via internal CSS
COMBINED PROJECT QUESTIONS
These combine concepts from all four PDFs.
1. Build a Personal Resume Website (Single Page)
html - basic questions 7
Include:
Header div
Your image (aligned left)
Bio paragraph using formatting
Skills using lists
Qualification table
Contact links (email, social media)
Footer div + internal CSS
[Link] a “College Department Website (2 pages)”
Page 1: Home
Header + navigation
Scrolling marquee
Department introduction
Staff list using description list
Link to Page 2
Page 2: Student Section
Table of students
Image gallery
Back to top link
[Link] a “News Portal Layout”:
Div-based structure
News categories list
Top news with image and floating
Moving marquee for flash news
Table for “Latest Updates”
[Link] a “Restaurant Website Layout” (Home Page)
html - basic questions 8
Banner div with background image
Menu list (nested)
Today special marquee
Table for price list
Footer with contact links
html - basic questions 9