Brief Intro — Web Technology I

Reading about HTML and CSS is one thing — using them is another. In this lab you move from theory to practice by building 15 real HTML files, one brief at a time, just as a working web developer would.

You already know HTML5 structure and CSS rules from the previous two activities. Here you apply that knowledge to create pages with headings, lists, tables, forms, images, audio, video, SVG, and finally your own styled portfolio page.

How this lab works

Each task asks you to create a new HTML file from scratch using a text editor.
Test every file in a browser. Fix any issues before moving on.
Hints are available — open them only after you have tried on your own.
There are 14 briefs across 4 sessions, plus a Capstone project that combines everything.
By the end you will have built 15 working web files including a personal portfolio.

Prerequisites

Completed Web Foundations & CMS and Web Language Core activities.
A text editor (VS Code, Notepad++, Sublime) and a modern web browser.
Create a folder webtech-lab/ on your computer to save all your work.

Valid HTML5 pages from scratch — no templates, no copying.
Pages with headings, paragraphs, formatting, lists, tables, and forms.
Pages that embed images, audio, video, SVG graphics, and iframes.
Styled pages using inline, internal, and external CSS with proper box model understanding.
A capstone personal profile page that integrates every skill.

Brief 1 — HTML5 Skeleton

Create task1.html containing a complete, valid HTML5 document.

Include <!DOCTYPE html>, <html lang="en">, <head>, and <body>.
Inside <head>, add a <title> that reads "My First Page".
Inside <body>, add an <h1> with "Hello World!" and a <p> with "I am learning web development."
Add a <meta charset="UTF-8"> tag inside <head>.

Verify your work: Open the file in a browser. Does the tab show "My First Page"? Can you see both the heading and the paragraph?

Stretch: Validate your page at validator.w3.org. Fix any errors.

Hint

The <title> belongs in <head>, not <body>. The <h1> and <p> belong in <body>. Every HTML5 document starts with <!DOCTYPE html>.

Brief 2 — Headings & Paragraph Alignment

Create task2.html that demonstrates all six heading levels and three paragraph alignments.

Display <h1> through <h6> in order. Each heading should have a short descriptive text.
Add three paragraphs below the headings, separated by <hr> elements.
Align the first paragraph left, the second center, and the third right using the style attribute with text-align.
In one of the paragraphs, use <br> to break a line mid-sentence. Observe the effect.

Live demo — heading sizes:

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

This paragraph is centre-aligned.

Verify your work: Does the page show progressively smaller headings from h1 to h6? Are the three paragraphs aligned differently?

Stretch: Also try the deprecated align attribute on one paragraph. Compare the result — both work, but style is the modern approach.

Hint

Use <p style="text-align: center;">...</p> to centre a paragraph. The <hr> tag creates a horizontal rule (thematic break) and does not need a closing tag.

Brief 3 — Formatting Tags & Attributes

Create task3.html that showcases text formatting tags, the title attribute, and HTML comments. Hover over this abbreviation to see a live demo of the title attribute.

Use each formatting tag at least once: <b>, <i>, <strong>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>.
Add the title attribute to an <abbr> element and to a <p> element to show tooltips on hover.
Add HTML comments labelling each section (e.g., ).
Use <br> to separate formatting examples within a single paragraph.

Live demo — formatting tags:

Bold, italic, strong, emphasised, marked, small, ~~deleted~~, inserted, H₂O (subscript), E=mc² (superscript).

Verify your work: Hover over the elements with title attributes — do tooltips appear? View the page source (right-click → View Page Source) — are your comments visible?

Stretch: What is the difference between <b> and <strong>? Between <i> and <em>? Write your answer as an HTML comment in the file.

Hint

Comments: . Tooltip: <p title="This is a tooltip">Hover over me</p>. Subscript: H<sub>2</sub>O. Superscript: E=mc<sup>2</sup>.

Brief 4 — Links & Images

Create task4.html containing hyperlinks and embedded images.

Add a hyperlink to https://www.google.com that opens in the same tab (default).
Add a second hyperlink to any external site that opens in a new tab using target="_blank".
Embed an image using a local filename (photo.jpg) with width="200" and height="150". Include alt text.
Make the local image clickable — clicking it should navigate to the Google link from step 1.
Embed a second image using an absolute URL from the internet. Verify it loads.

Verify your work: Does clicking the image take you to Google? Does the absolute URL image actually display (check the URL is valid)?

Stretch: Add a title attribute to the image link so a tooltip appears on hover.

Hint

To make an image clickable, wrap it in an anchor tag: <a href="https://google.com"><img src="photo.jpg" width="200" height="150" alt="Photo"></a>. For target="_blank", add the attribute to the <a> tag.

Brief 5 — Lists

Create task5.html that uses all three HTML list types with various styles.

Build an unordered list of five favourite books or movies. Use type="square" for the bullet style.
Build an ordered list of steps to cook your favourite dish. Use type="A" for capital-letter numbering.
Build a definition list of three web technologies (HTML, CSS, JavaScript) with one-sentence descriptions.
Create a nested list: inside one ordered list item, add an unordered sub-list with at least two items.

Unordered:

HTML
CSS
JavaScript

Ordered:

Plan
Build
Test

Definition:

HTML: Structure
CSS: Style

Verify your work: Count the list types. Are there three distinct types? Does the nested list appear indented correctly under its parent item?

Stretch: Add a start="5" attribute to an ordered list and observe the effect. Research what reversed does.

Hint

Unordered: <ul type="square"><li>Item</li></ul>. Ordered with letters: <ol type="A">. Definition: <dl><dt>Term</dt><dd>Definition</dd></dl>. Nesting: put a <ul> inside an <li>.

Brief 6 — Tables

Create task6.html that builds a weekly class timetable.

Create a table with at least 6 columns (periods) and 6 rows (days Monday to Friday + header row).
Use <th> for the header row and for the first column (day labels).
Merge at least two cells with colspan (e.g., a lunch break spanning two periods).
Merge at least two cells with rowspan (e.g., a double-period subject spanning two rows).
Add a <caption> that reads "Weekly Class Timetable".

Live demo — table with colspan:

Day	Period 1	Period 2	Period 3
Mon	Maths	Science	English
Tue	Lab (colspan=2)		CS

Verify your work: Do merged cells span correctly? Does the <caption> appear above the table? Is the table readable?

Stretch: Add a border="1" attribute to the <table> tag and a bgcolor attribute to the header row. (These are deprecated but still work.)

Hint

Colspan: <td colspan="2">Lunch Break</td>. Rowspan: <td rowspan="2">Double Maths</td>. A cell with rowspan pushes content in the column below it to the next column.

Brief 7 — Forms

Create task7.html — a student registration form that collects the following using proper form elements:

Full Name (<input type="text">)
Email Address (<input type="email">)
Password (<input type="password">)
Date of Birth (<input type="date">)
Gender (<input type="radio"> — Male / Female / Other)
Subjects Enrolled (<input type="checkbox"> — at least 4 checkboxes)
Grade Level (<select> with <option>s — Grade 9 through 12)
Additional Comments (<textarea> with 4 rows)
Submit and Reset buttons

Every input must have an associated <label> with a for attribute. Group radio buttons with the same name so only one can be selected at a time.

Verify your work: Click the label text — does it focus the corresponding input? Can you select only one gender radio button at a time? Does the Reset button clear all fields?

Stretch: Add required to the name and email fields. Try submitting without filling them — what happens?

Hint

Label with for: <label for="name">Full Name</label><input type="text" id="name" name="name">. The for attribute must match the id of the input. Radio buttons share the same name to form a group.

Brief 8 — Login Page

Create task8.html — an attractive login page that introduces basic CSS styling.

Build a form with: Username field, Password field, "Remember me" checkbox, Login button, Cancel button.
Centre the form on the page using a <div> container with margin: auto and a fixed width.
Give the container a coloured border, rounded corners (border-radius), and a light background colour using inline CSS.
Style the Login button with a blue background and white text (background-color, color, padding).

Verify your work: Is the form centred horizontally on the page? Does the Login button have a distinct style from the Cancel button?

Stretch: Add a <link> to an external stylesheet even though you are not using it yet — prepare for Session 4.

Hint

Centred container:

<div style="width: 350px; margin: auto; border: 2px solid var(--secondary-color); border-radius: 10px; padding: 20px; background: var(--bg-color);">

. Styled button:

<input type="submit" value="Login" style="background: var(--secondary-color); color: white; padding: 10px 20px; border: none; border-radius: 5px;">

.

Brief 9 — Audio & Video

Create task9.html that embeds audio and video players with multiple source formats.

Add an <audio controls> element with muted and loop attributes. Include two <source> elements with src and type (e.g., audio/mpeg, audio/ogg).
Add a <video controls> element with width="480" and height="320". Include a poster attribute pointing to a placeholder image URL.
Inside the video element, include two <source> elements (video/mp4, video/webm).
After both media elements, add fallback text: "Your browser does not support the [audio/video] element."

Verify your work: Do the audio and video controls appear? Is the poster image visible before you click play? What happens when you hover over the audio element — does it loop?

Stretch: Use the <track> element inside video to specify a subtitles file (you can reference a fictional subtitles.vtt file).

Hint

Audio structure:

<audio controls muted loop><source src="song.mp3" type="audio/mpeg"><source src="song.ogg" type="audio/ogg">Your browser does not support audio.</audio>

. The browser uses the first source format it supports.

Brief 10 — Embedding & Iframe

Create task10.html that embeds external content using <iframe>, <embed>, and <canvas>.

Embed Wikipedia (https://en.wikipedia.org) in an <iframe> with width="800" and height="400". Add the sandbox attribute to restrict form submission and script execution.
Add a <canvas> element with id="myCanvas", width="400", height="200". Leave it blank — it will appear as an empty rectangle.
Add paragraph text before and after the iframe explaining what each embedded element does.

Verify your work: Does the Wikipedia page load inside the iframe? Is the canvas visible as an empty box? (Some websites block iframe embedding for security — that is expected behaviour.)

Stretch: Use JavaScript in the browser console (F12 → Console) to draw a blue rectangle on the canvas: document.getElementById('myCanvas').getContext('2d').fillStyle = 'blue'; document.getElementById('myCanvas').getContext('2d').fillRect(50, 50, 100, 80);

Hint

Iframe with sandbox: <iframe src="https://en.wikipedia.org" width="800" height="400" sandbox></iframe>. Canvas: <canvas id="myCanvas" width="400" height="200" style="border: 1px solid black;"></canvas>. The border helps you see the canvas boundaries.

Brief 11 — SVG Graphics

Create task11.html that draws five distinct shapes using inline SVG.

Wrap all shapes in an <svg width="500" height="400"> container.
Draw a circle with cx="80", cy="80", r="50". Fill it with blue, stroke with dark blue.
Draw a rectangle with x="200", y="50", width="100", height="70". Fill with green, stroke with dark green, stroke-width="3".
Draw an ellipse with cx="400", cy="80", rx="60", ry="30". Fill with orange, opacity="0.6".
Draw a line from (50, 200) to (200, 300) with stroke="red" and stroke-width="4".
Draw a polygon (triangle) with points="250,200 350,300 150,300". Fill with purple, opacity="0.5".

Live demo — SVG shapes:

Verify your work: Are all five shapes visible? Does the circle overlap with any other shape? Are the opacity values working — can you see through the transparent shapes?

Stretch: Add a <text> element inside the SVG to label each shape. SVG text uses <text x="..." y="...">Label</text>.

Hint

SVG shapes go inside the <svg> tag. Circle: <circle cx="80" cy="80" r="50" fill="blue" stroke="darkblue" />. Polygon: <polygon points="250,200 350,300 150,300" fill="purple" opacity="0.5" />. The points attribute is pairs of x,y coordinates.

Use this playground to experiment with CSS properties before applying them to your pages in Session 4. Adjust the controls below and watch the preview update in real time.

Background Color:

Text Color:

Font Size: 16px

Padding: 8px

Border: 1px

Border Radius: 0px

Live Preview:

Sample Text

Brief 12 — Internal CSS

Create task12.html styled entirely through an internal <style> block in the <head>.

All <h1> elements: color: var(--secondary-color), text-align: center, font-family: Arial, sans-serif.
All <p> elements: font-size: 18px, color: var(--text-color), line-height: 1.6.
A <div> with id="highlight": background-color: var(--warning-color), padding: 15px, border-radius: 8px, color: white.
All <a> elements: remove underline (text-decoration: none), change colour to var(--secondary-color).
Use class="container" on a <div> that wraps all content: max-width: 800px, margin: auto, padding: 20px.

Verify your work: Are all h1 elements blue and centred? Does the highlighted div have rounded corners? Are links underlined — or not?

Stretch: Add a :hover pseudo-class for links that changes their colour when the mouse is over them.

Brief 13 — External CSS

Create two files: style.css (external stylesheet) and task13.html (page that links to it).

In style.css, write rules for:
- body: background-color: var(--bg-color), font-family: 'Segoe UI', Tahoma, sans-serif, color: var(--text-color).
- h1: color: var(--primary-color), text-decoration: underline, text-align: center.
- .highlight: background-color: yellow, font-weight: bold, padding: 5px, border-radius: 3px.
- .card: border: 1px solid var(--border-color), padding: 15px, margin: 10px 0, border-radius: 8px, background: var(--card-bg).
In task13.html, link to style.css using <link rel="stylesheet" href="style.css">.
Create three <div class="card"> sections, each with an <h2> and a <p>. Use <span class="highlight"> on a keyword in each paragraph.

Verify your work: Open task13.html — do the styles from style.css apply? Change the body background colour in style.css to lightblue and refresh — does it update without touching the HTML?

Stretch: Add a second CSS file (extra.css) that overrides the h1 colour. Link it after style.css. Which colour wins? Why?

Brief 14 — CSS Priority & Box Model

Create task14.html that demonstrates cascading priority and the box model on a single page.

Priority demo: Create one paragraph. Set its colour to green via external CSS (link to style.css from Brief 13), orange via an internal <style> block, and purple via inline style attribute. Which colour wins in the browser?
Box model demo: Build a nested structure where each layer is clearly visible:
- Outer <div>: margin: 40px, background: var(--bg-light)
- Middle <div>: border: 5px dashed var(--secondary-color), padding: 30px, background: var(--card-bg)
- Inner <div>: padding: 20px, background: var(--warning-color), color: white, text-align: center
- Content text inside the innermost <div>: "Content Area"
Add at least three sections on the page, each with a different background-color using inline or internal CSS.

Verify your work: Is the paragraph purple (inline wins)? In the box model demo, measure the spacing — can you see margin (outer), border (middle ring), padding (inner ring), and content (centre)?

Stretch: Right-click the box model <div> → Inspect. In the browser's developer tools, view the computed box model diagram. Does it match your expected margin/border/padding values?

Hint

Inline > Internal > External > Browser default. If all three set color on the same paragraph, inline wins. For the box model, think of nesting like Russian dolls — each layer wraps the one inside it.

Capstone Project — Personal Profile Page

Create profile.html — a single personal profile page that integrates everything you have learned. This is your final and most important deliverable.

Requirements:

Use the HTML5 skeleton with <!DOCTYPE html>, lang="en", <meta charset="UTF-8">, and a descriptive <title>.
Link an external CSS file (profile.css) that you create yourself. All styling must come from this file — no inline or internal styles except where explicitly noted.
Include at least five sections on the page, each wrapped in a <div> or semantic HTML5 tag (<header>, <section>, <footer>):
- Header: Your name as <h1>, a tagline as <p>.
- About Me: A paragraph about yourself with one formatting tag (<strong>, <em>, etc.) and a title attribute on a word.
- Skills: A table with at least 3 columns (Skill Name, Level, Experience) and 4 rows.
- Hobbies / Projects: A nested list — at least two categories with sub-items.
- Contact: A form with fields for Name, Email, Message, and a Submit button.
Include at least one image (use an absolute URL).
Include at least one hyperlink that opens in a new tab.
Add navigation links at the top that jump to each section using <a href="#section-id">.
In profile.css, demonstrate:
- The box model — use margin, padding, border on sections.
- At least one class selector and one ID selector.
- At least one :hover pseudo-class (e.g., colour change on links).
- A max-width container centered with margin: auto.

Verify your work: Open profile.html in a browser. Does the navigation jump to the correct sections? Is the table properly formatted? Does the form have all required fields? Validate your HTML at validator.w3.org — aim for zero errors.

Stretch: Add a <meta name="description"> tag for SEO. Embed a Google Maps iframe showing your city. Use CSS to create a two-column layout for the Skills and Hobbies sections using display: inline-block or float.