Unit 3 — HTML: Build Your First Web Page. Every website, however fancy, is built from HTML underneath — and results are instantly visible in any browser.
Lesson 8 — What is HTML? Building Your Profile Page
What you'll achieve: a personal profile web page.
HTMLText editor
Tag
A piece of code, like <p>, that tells the browser what something is.
Doctype
The very first line of an HTML file, telling the browser what type of document it is.
Body
The part of the page containing everything the browser actually displays.
I Do
Watch your teacher view a real website's source code, then build a blank page from scratch: doctype, html, head (with a title) and body containing one heading and one paragraph — saved as "index.html" and opened in a browser. HTML doesn't need to be "run" like Scratch — you simply save the file and open it in a browser.
We Do
Build the skeleton line by line: <!DOCTYPE html>, <html>, <head> with <title>My Profile</title>, <body>.
Inside <body>, add an <h1>, a <p> paragraph, and a <ul> with 3 <li> hobbies. Save and refresh to see changes.
You Do
Type the full HTML skeleton, then add an <h1> with your name.
Add a <p> paragraph (3–4 sentences) introducing yourself.
Add a <ul> list of at least 3 hobbies, and a <br> line break somewhere.
Save as "profile.html" in your Computing folder and check it in a browser.
Lesson 9 — Images, Links and First Colour: Styling Your Page
What you'll achieve: a profile page with a photo, a link and colour.
HTMLCSS
img tag
Inserts an image into a page.
alt text
A written description of an image, shown if it fails to load or read aloud by screen readers.
CSS
Cascading Style Sheets, the language used to style HTML — colours, fonts, layout.
I Do
Watch your teacher add <img src="photo.jpg" alt="A photo of me">, a link with <a href="..." target="_blank">, and a <style> block for colour. The src must exactly match a real file name in the same folder, or a full web address.
We Do
Save an image into the same folder and add an <img> tag underneath the h1.
Add a link opening in a new tab, then a <style> block setting a background-colour and an <h1> colour.
You Do
Place an image in your Computing folder and add an <img> tag with a correct src and meaningful alt.
Add at least one <a> link relevant to your hobbies, opening in a new tab.
Add a <style> block in <head> setting a background colour, and a text colour and font-size for your <h1>.
What you'll achieve: a two-page linked mini-website, "My Computing Portfolio".
HTMLCSS
Relative link
A link to another file in the same folder, for example href="page2.html" — no full web address needed.
Navigation bar
A row or list of links used to move between pages of a website.
Portfolio
A collection of a person's work used to show off their skills.
I Do
A nav bar is just a list of links, styled to look like buttons or a menu. Watch your teacher create "portfolio.html" in the SAME folder as profile.html, linking between them with <a href="portfolio.html"> and <a href="profile.html"> — no https:// needed for same-folder files.
We Do
Create "portfolio.html" with the same skeleton; add a matching nav bar to BOTH pages so you can move either way.
Add a heading, a short paragraph about a chosen project, and an <img> screenshot inside portfolio.html.
You Do
Make sure profile.html and portfolio.html are both saved in the same folder.
Add a matching nav bar to both pages, linking to each other.
On portfolio.html, add a heading and 2–3 sentences about your Scratch game or micro:bit project, plus a screenshot.
Copy your <style> block into both files so colours and fonts match.
BLC