Learning Goals
3 minBy the end of this lesson you will be able to:
- Create a link with
<a href="…">to another site, another file, or a spot on the same page. - Add an image with
<img src="…" alt="…" />. - Tell a relative path apart from an absolute (full
https://) one. - Write useful alt text and explain why every image needs it.
Warm-Up · Spot the Link
5 minEvery blue, underlined word you have ever clicked is one HTML element. Read this snippet and predict what the visitor sees and what happens on a click:
<p>Hungry? <a href="https://mcdonalds.com.my">See the menu</a>.</p>Talk together (or think quietly)
- Which words show on the page —
https://mcdonalds.com.my, or See the menu? - Where does the part inside
href="…"actually go?
Hint
The visitor reads only See the menu (the text between the tags). The href is an attribute — the hidden destination the browser opens when you click. Same idea as src on an image: the user sees the picture, not the address.
New Concept · Anchors & Images
12 minThe web is called a web because pages are tied together with links. The element that ties them is the anchor, <a>.
The anchor: <a>
An anchor wraps some text and sends the href attribute the destination:
<a href="https://www.advaspire.io">Visit Advaspire</a>There are three destinations you will use all the time:
- External — a full address:
href="https://google.com". - Internal — another file in your project:
href="about.html". - Same-page — jump to an
idon this page:href="#menu".
The image: <img>
An image is a void element (no closing tag, like <br /> from last lesson). It needs two attributes:
src
The source — where the picture file is. A path in your project (images/cat.jpg) or a full https:// URL.
alt
Alternative text describing the picture, read aloud to blind users and shown if the image fails to load. Never skip it.
<img src="images/teh-tarik.jpg" alt="A glass of frothy teh tarik" />Relative vs absolute paths
A relative path is read from the file you are in — images/cat.jpg means “the images folder next to me.” An absolute path is the full address starting with https:// and works from anywhere. Use relative paths for your own files, absolute for other people's sites.
Why it matters: links are the idea behind the web — without them every page would be a dead end. And alt text is not optional politeness: it is how blind users and search engines understand your images.
Worked Example · A Pasar Malam Page
12 minAisha is making a one-page guide to her local pasar malam. Open VS Code, create pasar-malam.html, type the skeleton from earlier lessons, then fill the body:
Step 1 — A same-page menu and an external link
<body>
<h1>Taman Melati Pasar Malam</h1>
<!-- jump links to sections lower on this page -->
<p>Jump to: <a href="#food">Food</a> · <a href="#map">Map</a></p>
<h2 id="food">Food Stalls</h2>
<p>Try the <strong>apam balik</strong>! Recipe here:
<a href="https://www.youtube.com/results?search_query=apam+balik">watch how it's made</a>.
</p>
<h2 id="map">How to Get There</h2>
<p>Every Wednesday, 6–10pm, along Jalan Melati.</p>
</body>The two links at the top use #food and #map — they scroll to the headings that carry those id attributes. The recipe link is external, so it's a full URL.
Step 2 — Add an image with alt text
Make an images folder next to your HTML file, drop in a photo named apam-balik.jpg, then add it under the Food heading:
<img src="images/apam-balik.jpg" alt="A folded apam balik filled with corn and peanuts" />Step 3 — Open it in the browser
Double-click the file. It renders like this:
<a> links; the grey box is the <img>. If the photo file is missing, the browser shows the alt text in its place.Try It Yourself
13 minKeep pasar-malam.html open. Save (Ctrl+S) and refresh (Ctrl+R) after each task.
Task 1 — A second external link
Under the Map heading, add a paragraph with a link to
https://maps.google.comwhose text reads open in Google Maps. Click it to confirm it opens.Task 2 — A second image
Add one more
<img>of any food, with a clearaltdescription. Then delete the file name insrcon purpose, refresh, and watch thealttext appear — that's what a blind user “sees.”Task 3 — A back-to-top link
Give your
<h1>anid="top", then at the very bottom add<a href="#top">Back to top</a>. Scroll down and test the jump.
Mini-Challenge · Bug Hunt
8 minDaniel's page has a link that goes nowhere and an image that never shows. There are two bugs. Find them before revealing the fix.
Success criterion: the link opens the Advaspire site, and the logo image displays (or shows its alt text).
<!-- daniel-page.html — buggy -->
<body>
<h1>My Favourite Site</h1>
<a href"https://www.advaspire.io">Advaspire</a>
<img src="images/logo.png" />
</body>Reveal the answer
Bug 1: the anchor is missing the = in the attribute — it says href"…" instead of href="…", so the browser ignores the destination. Bug 2: the image has no alt attribute, so if it fails there is nothing to show and screen readers skip it. Fixed version:
<body>
<h1>My Favourite Site</h1>
<a href="https://www.advaspire.io">Advaspire</a>
<img src="images/logo.png" alt="Advaspire logo" />
</body>Two lessons: an attribute is always name="value" with the equals sign, and every <img> needs alt.
Recap
3 min- The anchor
<a href="…">text</a>makes a link; the user sees the text, thehrefis the destination. - Links can be external (
https://…), internal (about.html) or same-page (#id). - The image
<img src="…" alt="…" />is a void element needing bothsrcandalt. - A relative path is read from the current file; an absolute path is a full
https://address. - alt text is required: it serves blind users, search engines, and broken-image fallbacks.
New words
- Anchor — the
<a>element that creates a link. - Attribute — extra info on a tag, written
name="value"(e.g.href,src,alt). - Relative path — a location read from the current file.
- Absolute path — a full address that works from anywhere.
Homework
4 min to brief · ~20 min to doRequired
- Make a file
my-favourites.htmllisting three things you like (a game, a food, a place). For each, add a heading, a short paragraph, an image with goodalttext, and an external link to learn more. - Add a same-page “jump to” menu at the top with three
#idlinks, and a Back to top link at the bottom. Open the page, take a screenshot, and bring the file and screenshot to next lesson.
Optional stretch
- Open View page source (from last lesson) on
advaspire.ioand use Ctrl+F to find one<aand one<img. Write down thehrefand thealtyou find. - Make one link open in a new tab by adding
target="_blank". Notice it stays on your page while the link opens beside it.