Scribd
Upload
4 views3 pages

HTML

The document outlines the requirements for creating a portfolio and a blog webpage using HTML. The portfolio must include a title, header with personal information, main content with an image, biography, skills list, navigation menu, and a table of educational background. The blog webpage should feature a title, header with blog name and tagline, main content with a feature image, introduction, categories list, navigation menu, and a table of recent blog posts.

Uploaded by

javeriafaizan44
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
4 views3 pages

HTML

The document outlines the requirements for creating a portfolio and a blog webpage using HTML. The portfolio must include a title, header with personal information, main content with an image, biography, skills list, navigation menu, and a table of educational background. The blog webpage should feature a title, header with blog name and tagline, main content with a feature image, introduction, categories list, navigation menu, and a table of recent blog posts.

Uploaded by

javeriafaizan44
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

HTML PORTION (10 MARKS) INCLUDES FORMATTING TAGS, ANCHOR TAG, IMAGE TAG, LIST & TABLES.

Q1: Design a portfolio webpage using HTML. The page should include the following elements.
[10]

a) Title of the page [1]


b) Header Section: Include your name and a short introduction about yourself in inside a
<header> tag. [1]
c) Main content Section [3]
i. A profile picture using <img> tag.
ii. A short biography using paragraphs tag <p>
iii. A list of your skills using <ul> or <ol>
d) Navigation menu. Create a simple navigation menu with links to Home, About me & Contact.
[1]

e) Add table showcasing your educational background or work experience. [4]

Sr# Degree Passing Year GPA/Grade Board/University


1. Matriculation 2015 A+ FBISE
2. Intermediate 2017 B+ FBISE
3. BS 2021 3.56 AIOU

SOLUTION:

<html>
<head>
<title>My Portfolio</title>
</head>
<body>

<header>
<h1>XYZ</h1>
<p>I am a student interested in technology and web development.</p>
</header>
<h2>My Profile</h2>
<img src="[Link]" alt="image">

<p>I am passionate about learning computers and programming.


I enjoy designing websites and improving my technical skills.</p>

<h3>Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>MS Office</li>
</ul>

<h3>Navigation Menu</h3>
<a href="[Link]">Home</a>
<a href="[Link]">About Me</a>
<a href="[Link]">Contact</a>

<h3>Education</h3>

<table border="1">
<tr>
<th>Sr#</th>
<th>Degree</th>
<th>Passing Year</th>
<th>GPA</th>
<th>Board</th>
</tr>

<tr>
<td>1</td>
<td>Matriculation</td>
<td>2015</td>
<td>A+</td>
<td>FBISE</td>
</tr>

<tr>
<td>2</td>
<td>Intermediate</td>
<td>2017</td>
<td>B+</td>
<td>FBISE</td>
</tr>

<tr>
<td>3</td>
<td>BS</td>
<td>2021</td>
<td>3.56</td>
<td>AIOU</td>
</tr>
</table>
</body>
</html>

Q2: Design a blog webpage using HTML. The page should include the following
elements. [10]
a) Title of the page [1]
b) Header Section: Include your blog name and a short tagline about your blog
inside a <header> tag. [1]
c) Main Content Section [3]
i. Add a feature image for your latest blog post using the <img> tag.
ii. Write a short excerpt or introduction for the blog post using paragraph tag <p>.
iii. Create a list of 3–5 blog categories using <ul> or <ol>.
d) Navigation Menu: Create a simple navigation menu with links to Home, Blog
Posts & About Me. [1]
e) Add a table showing your recent blog posts with their titles, dates, and number
of comments. [4]

TITLE Date Comments


Web Tips 1-2-2026 2
Productivity 1-1-2026 5
Innovation 9-3-2026 8

You might also like