HTML-Based Web Development
Senior 4 · ICT
HTML-Based Web Development
Lesson 3 of 5
25 min
The "H" in HTML stands for hypertext: text with links. A link is what turns separate files into a website, and a website into part of the World Wide Web. Pictures, sound and video make a page worth visiting. All of these work the same way: the HTML does not contain the picture or the other page; it contains the address of it. So before the tags, you need to understand addresses.
Definition
URL (Uniform Resource Locator): the address of a resource on the web, such as https://www.example.org/clubs/ict.html#members: the scheme (https), the domain name (www.example.org), the path to the file (/clubs/ict.html) and, optionally, a fragment that points to one part of the page (#members).
Absolute URL: a full address, starting with the scheme. It works from anywhere and is used for pages on other websites.
Relative URL (relative path): an address worked out from the folder of the current page, such as images/logo.png. It is used for files of your own site, and it keeps working when the whole site is moved to another computer or server.
A relative path is a set of directions from the folder that holds the current page. A folder name followed by / means "go into this folder"; ../ means "go up to the folder that contains this one". Always use forward slashes, even on Windows.
| From this page | To this file | Relative path |
|---|---|---|
index.html | about.html | about.html (same folder) |
index.html | images/logo.png | images/logo.png (down into images) |
clubs/ict.html | images/logo.png | ../images/logo.png (up, then down) |
clubs/ict.html | index.html | ../index.html (up one folder) |
<img> is a void element: it has attributes but no content and no closing tag.
| Attribute | Purpose |
|---|---|
src | The URL of the image file (required) |
alt | A text alternative: what the image shows or does, read aloud by screen readers and shown if the image fails to load (required) |
width, height | The size in CSS pixels. Giving both lets the browser reserve the space before the file arrives, so the text does not jump down while the page loads |
title | Extra advice shown when the mouse hovers (optional; never a replacement for alt) |
Wrap an image and its caption in <figure>, with the caption in <figcaption>, so the browser knows the caption belongs to the image.
Run it. Because the image file is missing, you see the alt text inside the reserved 400 × 250 space. On your own computer, put a photo called lab.jpg inside an images folder next to the page and it appears instead.
| Format | Best for | Notes |
|---|---|---|
| JPEG (.jpg) | Photographs | Lossy compression: small files, some detail lost |
| PNG (.png) | Screenshots, diagrams, logos | Lossless; supports transparency |
| GIF (.gif) | Simple animations | Only 256 colours |
| SVG (.svg) | Icons, logos, diagrams | A vector drawing written in text: sharp at any size |
| WebP (.webp) | Photos and graphics | A modern format, usually smaller than JPEG or PNG |
Large photos straight from a phone camera can be several megabytes. Reduce them to the size the page displays before you upload them: on mobile data, every kilobyte costs the visitor time and money.
People who are blind or have low vision use the web with a screen reader, a program that reads the page aloud, or with a refreshable Braille display. When a screen reader reaches an image, all it can say is the alt text. If there is none, it may read out the file name, "IMG_2041.jpg", which helps nobody. Search engines also read alt text to understand images.
Worked example 1: write the alt text
The W3C's advice is to ask what the image is for on this page.
| Image | Good alt | Reason |
|---|---|---|
| A photo of the club at a coding competition, in a news article | alt="Six club members holding their certificates at the coding competition" | The photo carries information: say what it shows. |
| The club logo, used as a link to the home page | alt="S4 ICT Club home" | For a linked image, describe where the link goes, not the picture. |
| A bar chart of members per year | A short alt such as alt="Bar chart of club members per year", with the numbers also given in the text or a table | The data must be available to everyone, not only to those who can see the bars. |
| A decorative wavy line between sections | alt="" (empty) | It carries no information; an empty alt tells screen readers to skip it. |
Never begin with "Image of…": the screen reader already announces that it is an image.
<video> and <audio> play media files without any plug-in. The controls attribute shows the play button, timeline and volume. Because not every browser plays every format, you can list several <source> elements: the browser plays the first one it supports. Text placed inside the element is shown only by browsers that cannot play it at all.
| Attribute | Effect |
|---|---|
controls | Shows the player controls |
autoplay | Starts playing at once. Browsers block autoplay with sound, so it normally needs muted too; use it rarely |
muted, loop | Start with the sound off; start again at the end |
poster (video only) | A picture shown before the video starts |
width, height | The size of the player |
MP4 video and MP3 audio play in all modern browsers; WebM and Ogg are open alternatives.
This code needs the media files in a media folder next to the page, so it is not run here. Try it on your own computer with any short MP4 video and MP3 recording: the browser plays the first source it supports, and the paragraph inside appears only in a browser that cannot play video at all.
An <iframe> (inline frame) shows a whole page from another site inside yours: a YouTube video, a map, a form. Video sites give you the code under Share → Embed. Always add a title that says what the frame contains, for screen-reader users.
This is the embed code YouTube gives for the video later in this lesson. It needs an Internet connection, so it is not run here; paste it into your own page to try it.
A link is an <a> (anchor) element. Its href (hypertext reference) attribute holds the address, and its content is what the visitor clicks: text, or even an image.
| href | Where the link goes |
|---|---|
https://www.reb.rw | A page on another site (absolute URL) |
about.html, ../index.html | A page of your own site (relative URL) |
#contact | The element with id="contact" on the same page (a fragment) |
about.html#history | A part of another page |
mailto:ictclub@example.org | Opens a new email to that address |
tel:+250788000000 | Offers to call the number on a phone (an illustrative number) |
Other useful attributes: target="_blank" opens the link in a new tab (use it sparingly, and add rel="noopener" so the new page cannot control yours in older browsers); download asks the browser to save the file rather than open it; title adds a hover tip. Link text should make sense on its own: "Download the timetable", not "click here", because screen-reader users often jump from link to link.
Run it and click each link in the <nav>: the page jumps to the heading with the matching id. "Back to top" works without any id, because #top is reserved for the top of the page. The tall "Scroll down…" paragraphs only add space so you can see the jumps.
Worked example 2: a navigation bar for a three-page site
The site in the diagram has index.html, about.html and clubs/ict.html. Every page needs the same menu, but the paths change with the page's folder.
In index.html and about.html (both in website/):
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="clubs/ict.html">ICT Club</a></li>
</ul>
</nav>In clubs/ict.html (one folder down), every path to the top folder needs ../, and the link to itself becomes just its own name:
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="ict.html" aria-current="page">ICT Club</a></li>
</ul>
</nav>A navigation menu is a list of links, so it is marked up as a <ul> inside <nav>. aria-current="page" tells screen readers which page the visitor is on; in Unit 6 CSS will also show it visually.
Worked example 3: why is the link broken?
Each link worked on the student's Windows laptop but fails on the school's web server.
<a href="About.html"> but the file is about.html. Most web servers run Linux, where file names are case-sensitive: About.html and about.html are different files. Use lower case for every file name.<img src="images\logo.png">. The backslash is a Windows habit; URLs use forward slashes: images/logo.png.<img src="C:/Users/Aline/Desktop/website/images/logo.png">. This absolute path points to a folder on Aline's own computer, which no visitor has. Use a relative path.<a href="my page.html">. Spaces in file names become %20 in URLs and are easy to get wrong. Use hyphens: my-page.html.Dave Gray: How to Add Links in HTML. Watch absolute and relative links, links to a part of a page with an id, and the target attribute.
Warning
Only use images, audio and video you have the right to use. Most pictures on the web are protected by copyright. Use your own photos, or files with an open licence such as Creative Commons from Wikimedia Commons, and give the credit the licence asks for, as every lesson on Ganzaa does.
Tip
src brings in, href points to. An src (source) fetches a file and places it in the page (images, audio, video, iframes). An href only points to another place that the visitor can go to (links).
Practice
about.html to images/lab.jpg; (b) from clubs/ict.html to about.html; (c) from clubs/ict.html to images/lab.jpg.<img> for a 300 × 200 photo images/kivu.jpg showing fishing boats on Lake Kivu, with suitable alt text, inside a figure with the caption "Fishing boats on Lake Kivu".info@example.org.<h2 id="fees">School fees</h2>. Write a link (a) on the same page and (b) on another page in the same folder, index.html, that jumps to this heading in contact.html.<video> element with controls that offers talk.webm and talk.mp4 and shows talk.jpg before it starts.images/lab.jpg (b) ../about.html (c) ../images/lab.jpg<figure><img src="images/kivu.jpg" alt="Wooden fishing boats on the calm water of Lake Kivu" width="300" height="200"><figcaption>Fishing boats on Lake Kivu</figcaption></figure>alt="Search": describe what the button does. (b) alt="".<a href="mailto:info@example.org">Email us</a><a href="#fees">School fees</a> (b) <a href="contact.html#fees">School fees</a><video controls poster="talk.jpg"><source src="talk.webm" type="video/webm"><source src="talk.mp4" type="video/mp4"></video>, with a fallback paragraph inside.<a href="rules.html">Read the lab rules</a>: the link text says where it goes.Key points
../ goes up one folder.<img src alt width height>: alt is required and should say what the image shows or does; use alt="" for decoration. <figure> and <figcaption> attach a caption.<video> and <audio> with controls and several <source> files; <iframe> embeds another page.<a href> links to pages, to #id fragments, to mailto: addresses; a menu is a list of links inside <nav>.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.
<figure>
<img src="images/lab.jpg"
alt="Students working at desktop computers in the school computer lab"
width="400" height="250">
<figcaption>Figure 1: The computer lab during an S4 ICT lesson.</figcaption>
</figure>
<p>The file images/lab.jpg is not in the playground, so the browser
shows the alt text in its place.</p><video controls width="480" poster="media/poster.jpg">
<source src="media/club-intro.webm" type="video/webm">
<source src="media/club-intro.mp4" type="video/mp4">
<p>Your browser cannot play this video.
<a href="media/club-intro.mp4">Download it</a> instead.</p>
</video>
<audio controls>
<source src="media/interview.mp3" type="audio/mpeg">
<p>Your browser cannot play this audio.</p>
</audio><iframe width="560" height="315"
src="https://www.youtube.com/embed/iMj-TbN7ydg"
title="How to add links in HTML"
allowfullscreen></iframe><h1>S4 ICT Club handbook</h1>
<nav>
<a href="#rules">Lab rules</a> ·
<a href="#meetings">Meetings</a> ·
<a href="#contact">Contact</a>
</nav>
<h2 id="rules">Lab rules</h2>
<ol>
<li>No food or drink near the computers.</li>
<li>Save your work in your own folder.</li>
<li>Log off before you leave.</li>
</ol>
<p>(More rules would go here.)</p>
<p style="height:300px">Scroll down…</p>
<h2 id="meetings">Meetings</h2>
<p>Wednesdays after classes, Computer Lab 2.</p>
<p style="height:300px">Scroll down…</p>
<h2 id="contact">Contact</h2>
<p>Email the club: <a href="mailto:ictclub@example.org">ictclub@example.org</a></p>
<p>Learn more HTML on
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener">MDN Web Docs</a>.</p>
<p><a href="#top">Back to top</a></p>Quick check
Page clubs/ict.html needs a link to index.html, which is one folder up. Which href is right?