HTML Practical Activity: My Personal Web Page
Objective
Create a simple webpage using the following HTML tags:
<html>, <head>, <title>, <body>, <h1>–<h6>, <p>, <br>, <hr>, <b>, <i>,
<a>, <img>, <ul>, <ol>, and <li>.
Task
Create a webpage called "About Me".
Your webpage must contain the following:
1. Page title
Use the <title> tag to give your webpage a title.
Example:
<title>About Me</title>
2. Main heading
Use <h1> for the main heading.
Example:
<h1>Welcome to My Web Page</h1>
3. Introduce yourself
Write a paragraph using <p> that includes:
Your name
Your age
Your school
Your favourite subject
Your hobby
Use <b> to make your name bold and <i> to make your hobby italic.
4. Use different headings
Use at least three of the following headings:
<h2>My Family</h2>
<h3>My Hobbies</h3>
<h4>My Favourite Food</h4>
<h5>My Goals</h5>
<h6>Thank You</h6>
5. Line break and horizontal line
Use <br> to separate two lines of text.
Use <hr> to create a horizontal line between sections.
6. Favourite things
Create an unordered list using <ul> and <li>.
For example:
<h2>My Favourite Things</h2>
<ul>
<li>Music</li>
<li>Football</li>
<li>Pizza</li>
<li>Movies</li>
</ul>
7. Daily activities
Create an ordered list using <ol> and <li>.
For example:
<h2>My Daily Activities</h2>
<ol>
<li>Wake up</li>
<li>Go to school</li>
<li>Do my homework</li>
<li>Play with friends</li>
</ol>
8. Add a picture
Use the <img> tag to add a picture to your webpage.
<img src="[Link]">
You may use a picture of yourself, your school, your favourite sport, or another
suitable image.
9. Add a link
Use the <a> tag to create a link to a website you like.
<a href="[Link] Google</a>
Challenge
Try to use all the tags you have learned at least once.
Submission Checklist
Tick each item when you have completed it:
<html> used
<head> used
<title> used
<body> used
<h1> used
At least three heading levels (<h2>–<h6>) used
<p> used
<br> used
<hr> used
<b> used
<i> used
<a> used
<img> used
<ul> used
<ol> used
<li> used
Bonus Question
1. What is the purpose of the <head> section?
2. What is the difference between <ul> and <ol>?
3. What is the purpose of the <a> tag?
4. What is the purpose of the <img> tag?
5. What is the difference between <b> and <i>?