LAB ACTIVITY 2A Duration: 3 Hours HTML Only

Web page using HTML

Students will create a complete HTML5 profile page using headings, paragraphs, text formatting, lists, links, images, tables, and div-based grouping. A footer (copyright) must be included.

Back to Topic Jump to Steps

Sample Output (View First)

View the completed output so you understand how your final page should look.

View Completed Output Start Steps

Learning Outcomes

By the end of this lab session, students should be able to:

  • Construct a valid HTML5 document structure.
  • Use <div> to group and organise webpage sections.
  • Apply HTML tags for headings, paragraphs, lists, links, images, and tables.
  • Use text formatting elements correctly.
  • Create a footer section with copyright.
  • Run and verify an HTML page in a web browser.

Hardware / Software

  • Computer with Internet access
  • Text Editor: Visual Studio Code / Notepad++
  • Browser: Chrome / Edge / Firefox

Important Notes

Read First
Important:
This lab is HTML only. Do NOT use CSS, Bootstrap, or the style attribute.
  • You may use Emmet shortcut ! to generate HTML structure.
  • Type your code yourself. Avoid copy-paste from generator websites.
  • Save frequently and refresh your browser (Ctrl+R).
  • If output doesn’t change: ensure file saved + correct file opened.

Steps (Complete Step-by-Step)

Follow steps in order. Each step has a Hint button (reference only).
Step 1

Create Project Folder

Create a folder named:

RegNo_LAB2A
Example: 10DDT23F1705_LAB2A
What to do: Create the folder first before creating any file.
Step 2

Create index.html

  1. Open VS Code / Notepad++.
  2. Create a new file.
  3. Save as index.html inside the project folder.
Checkpoint: Confirm the file extension is .html (not .txt).
Step 3

Generate HTML Structure using Emmet (!)

Do this:
In VS Code, type ! then press Enter to generate the HTML5 structure automatically.
Set your title: My Profile – LAB 2A
Checkpoint: Save → Open in browser → Ensure browser tab title appears correctly.
Step 4

Create Main Container DIV

Task: Inside <body>, create one main container using <div>.
Use this ID: container
Reason: All sections will be grouped inside this container.
Step 5

Header Section (Name + Image + Quote + Menu Links)

Create a header div containing:
  • <h1> Full name
  • <img> Profile picture (with src + alt)
  • <blockquote> quote
  • Menu links: About Me | Skills | Goals | Education | Contact
Copy-paste content (example):
Fatimah binti Muhammad
Profile Picture
"To code is to create the future."
About Me | Skills | Goals | Education | Contact
Step 6

About Me Section

Create a div with ID: about
Add <h2> and 1 paragraph.
Copy-paste content:
About Me
I am a Diploma in IT student specialising in Web Design. I enjoy solving problems through code and building simple webpages using HTML.
Step 7

Text Formatting (Minimum 8 elements)

In ONE paragraph, apply at least 8 formatting tags:
<strong>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>
Checkpoint: You must clearly see different formatting effects in browser.
Step 8

Technical Skills Section

Create a div with ID: skills
Use <ul> and at least 3 skills.
Copy-paste content:
Technical Skills
HTML5 & CSS3
Basic JavaScript
Graphic Design
Step 9

Top 3 Career Goals Section

Create a div with ID: goals
Use <ol> with exactly 3 items.
Copy-paste content:
Top 3 Career Goals
Master Bootstrap 5 frameworks
Intern at a top tech firm
Launch a personal portfolio website
Step 10

Educational Background Section (Table)

Create a div with ID: education
Create table with border="1" and these columns: Level | Institution | Year
Copy-paste table data:
SPM — SMK Jalan Empat — 2023
Diploma in IT — Politeknik Seberang Perai — 2024 - Present
Step 11

Contact Section (Email + Links)

Create a div with ID: contact
Add email link using mailto: and links for GitHub + LinkedIn.
Copy-paste content:
Contact Me
Email: student@email.com

Connect with me: GitHub | LinkedIn
Step 12

Footer (Copyright)

Create a footer div at the bottom (use ID footer).
Copy-paste content:
© 2026 Fatimah binti Muhammad | Politeknik Seberang Perai
Step 13

Run in Browser + Screenshots

Take screenshots of:
  • Full page output (include browser tab title)
  • Header + Menu links (anchor links)
  • Education table + Footer
Final Step

Submission

  • Ensure all tasks + screenshots are complete.
  • Zip your folder RegNo_LAB2A.
Upload the .zip file to CIDOS (submit to your respective lecturer).
Submit before the deadline set by your lecturer.