21.2b HTML body: text, tables and media
Cambridge IGCSE ICT 0417 · Topic 21: Website authoring · Paper 3
21.2c Hyperlinks and file paths
Cambridge IGCSE ICT 0417 · Topic 21: Website authoring · Paper 3
21.3b CSS: page styles, tables and the cascade
Cambridge IGCSE ICT 0417 · Topic 21: Website authoring · Paper 3
Say each word, then read what it means. Every one is in the glossary too.
Read it here, or open the study page below to go one step at a time with things to try.
Use the same time rule as the spreadsheet task: about 2 minutes per mark.
Use relative paths only. A path like C:\Users\… works on your computer but breaks everywhere else.
The examiner never opens your web page. They only mark the screenshots in your evidence document.
| Evidence | What it must show |
|---|---|
| HTML source | Every line the task asks about, readable. Zoom in or take two screenshots. |
| CSS source | The whole stylesheet, including the selectors. |
| Page in a browser | The finished page, so the examiner sees the styles working. |
If a line of code is cut off or blurred in the screenshot, it cannot earn a mark.
Then mark it against the scheme. Add each lost mark to the same log as the spreadsheet task.
`<h1>` is the main heading. `<h2>` is a subheading. `<h3>` is a heading inside an h2 section.
`<p>` is a paragraph. The browser adds space before and after it.
Use headings in order. Choose the tag for what the text is, not for how big it looks. CSS controls the size.
<h1>Café Retiro</h1> <h2>Breakfast</h2> <h3>Served until 12:00</h3> <p>Fresh coffee, toast with tomato and olive oil, and homemade cakes.</p>
Search engines and screen readers use headings to understand the page. A blind visitor can jump from heading to heading.
An unordered list `<ul>` shows bullet points. Use it when order does not matter.
An ordered list `<ol>` shows numbers. Use it when order matters, such as steps or a top 3.
Each item goes in `<li>` (list item), inside the ul or ol.
<ul>
<li>Café con leche</li>
<li>Tostada con tomate</li>
<li>Tarta de Santiago</li>
</ul>
<ol>
<li>Choose a cake.</li>
<li>Pay at the counter.</li>
<li>Collect your order.</li>
</ol>An li must be inside a ul or ol. A list item on its own is invalid HTML.
A `<div>` is a box that groups other elements. On its own it changes nothing you can see.
A class is a label you give to elements with the class attribute. CSS can then style everything with that label.
Many elements can share one class. One element can have two classes, separated by a space.
<div class="offer">
<h2>Today's offer</h2>
<p>Coffee and a croissant for €3.20.</p>
<p class="note">Until 11:00 only.</p>
</div>/* every element with class="offer" */
.offer {
background-color: #FFF3E0;
border: 2px dashed #8B4513;
padding: 10px;
}
.note {
font-style: italic;
}A class lets you style some paragraphs differently without changing every paragraph.
`<table>` starts a table. Each row is a `<tr>` (table row).
Inside a row, each cell is a `<td>` (table data) or a `<th>` (table header). Header cells are bold and centred by default.
Build a table row by row, from top to bottom. In each row, write the cells from left to right.
<table>
<tr>
<th>Drink</th>
<th>Price</th>
</tr>
<tr>
<td>Café con leche</td>
<td>€1.80</td>
</tr>
<tr>
<td>Té verde</td>
<td>€1.60</td>
</tr>
</table>Every row must be closed with `</tr>` before the next `<tr>`. A missing closing tag can shift cells into the wrong row.
colspan makes a cell stretch across several columns. colspan="3" fills 3 columns.
rowspan makes a cell stretch down several rows. rowspan="2" fills 2 rows.
When a cell spans, leave out the cells it covers. A row below a rowspan cell has one cell fewer.
| Day | Open | Close |
|---|---|---|
| Monday to Friday | 07:30 | 20:00 |
| Saturday | 09:00 (rowspan="2" covers Saturday and Sunday) | 21:00 |
| Sunday | (covered by the cell above) | 15:00 |
<h2 id="hours">Opening hours</h2>
<table>
<tr>
<th colspan="3">Opening hours</th>
</tr>
<tr>
<th>Day</th>
<th>Open</th>
<th>Close</th>
</tr>
<tr>
<td>Monday to Friday</td>
<td>07:30</td>
<td>20:00</td>
</tr>
<tr>
<td>Saturday</td>
<td rowspan="2">09:00</td>
<td>21:00</td>
</tr>
<tr>
<td>Sunday</td>
<td>15:00</td>
</tr>
</table>If row 5 also had a cell for 09:00, the row would have 4 columns and the table would stick out on the right.
Set a width or height in pixels (px) for a fixed size, or in percent (%) for a share of the space.
width: 80% on a table makes it 80% of the page width, so it shrinks on a phone. 600px stays the same on every screen.
Use a style attribute in the tag, or a rule in the stylesheet. Older pages use width="80%" attributes. You may see them in source files.
<table style="width:80%">
<tr>
<th style="width:200px">Day</th>
<td style="height:40px">Monday to Friday</td>
</tr>
</table>/* the same sizes, set in the stylesheet */
table {
width: 80%;
}
th {
width: 200px;
}
td {
height: 40px;
}Write the unit with no space: 200px, not 200 px or 200. Without a valid unit, the browser ignores the size.
`<img>` inserts an image. It has no closing tag.
src is the relative path to the image file. alt is the alternative text, read aloud by screen readers and shown if the image cannot load.
width and height set the display size in pixels. Keep the aspect ratio (topic 12), or the image looks stretched.
<img src="images/tarta.jpg" alt="A slice of tarta de Santiago, an almond cake" width="300" height="200">
Alt text makes the page accessible to blind visitors. The exam often asks for it and gives the exact words.
`<audio>` plays sound and `<video>` plays video. Put the file in a `<source>` tag inside them, with its type.
controls shows play, pause and volume buttons. autoplay starts the media when the page loads.
Video takes width and height in pixels. Text inside the element shows only if the browser cannot play the file.
<audio controls>
<source src="media/jingle.mp3" type="audio/mpeg">
Your browser cannot play this sound.
</audio>
<video width="480" height="270" controls autoplay muted>
<source src="media/barista.mp4" type="video/mp4">
Your browser cannot play this video.
</video>controls, autoplay and muted are true or false attributes. Writing the word switches them on. They need no value.
Most browsers block autoplay with sound. Add muted so autoplay works. Without controls, a visitor cannot pause the media.
A bookmark is a named place on a page. Give any element an id: `<h2 id="hours">`.
A hyperlink uses the `<a>` (anchor) tag. Its href is where it goes. The text between the tags is what you click.
To jump to a bookmark, href is # then the id. To jump to a bookmark on another page, add the page name first.
<h1 id="top">Café Retiro</h1> <a href="#hours">See our opening hours</a> <h2 id="hours">Opening hours</h2> <a href="#top">Back to top</a> <!-- a bookmark called drinks on another page --> <a href="menu.html#drinks">Drinks menu</a>
An id must be unique on the page and contain no spaces. It is case-sensitive: href="#Hours" will not find id="hours". Old pages use `<a name="hours">` instead of id.
A local page is a page in your own site. Link to it with a relative path, such as menu.html.
An external website needs its full URL, starting with https://.
An email link uses mailto: then the address. Clicking it opens a new email to that address. You can add a subject with ?subject=.
<a href="menu.html">Our menu</a> <a href="https://www.esmadrid.com">Visit Madrid</a> <a href="mailto:orders@example.com">Email us</a> <a href="mailto:orders@example.com?subject=Order">Order a cake</a>
href="www.esmadrid.com" without https:// does not go to the website. The browser looks for a file called www.esmadrid.com in your own folder.
The target attribute says where a link opens.
_blank opens a new window or tab. _self opens in the same window, which is the default.
A named window is any name you choose, such as target="menuwin". The first click opens a window with that name. Later links with the same target reuse it.
A target on a link overrides the base target in the head.
<a href="https://www.esmadrid.com" target="_blank">Visit Madrid</a> <a href="menu.html" target="menuwin">Food menu</a> <a href="drinks.html" target="menuwin">Drinks menu</a> <!-- both open in the same window, called menuwin -->
Opening external sites in a new window keeps your page open, so the visitor can come back to it.
_blank needs the underscore. target="blank" (no underscore) is treated as a named window called blank.
A path tells the browser where a file is.
A relative path starts from the folder of the current file. images/logo.png means "go into the images folder, then find logo.png".
../ means "go up one folder". From styles/cafe.css, the path to the beans image is ../images/beans.jpg.
An absolute path gives the full location from the very start, such as https://www.esmadrid.com/en or C:/Users/Lucia/Desktop/cafe/images/logo.png.
Try the toy: press From on one file and To on another, and read the relative path and why the absolute path breaks. Then switch to Quiz and write paths yourself. The toy's site uses css/style.css, but the rules are the same.
| From | To | Relative path |
|---|---|---|
| index.html | menu.html | menu.html |
| index.html | images/logo.png | images/logo.png |
| index.html | styles/cafe.css | styles/cafe.css |
| styles/cafe.css | images/beans.jpg | ../images/beans.jpg |
| pages/about.html | index.html | ../index.html |
Use forward slashes / in paths, not backslashes \. Match capitals exactly: on a web server Logo.PNG and logo.png are different files.
There is something to try for this step in the IGCSE library.
An absolute local path points to one place on one computer. C:/Users/Lucia/Desktop/... exists only on Lucía's computer.
When the folder is copied to a web server or an examiner's computer, that path no longer exists. Images vanish and the stylesheet is not applied.
Relative paths move with the folder, because they only describe how files sit compared with each other.
Absolute URLs are fine for external websites, because those addresses are the same from every computer.
Some editors insert absolute paths when you drag a file in. Always read the code and change it to a relative path.
Exam tasks often give a list of styles to set for each element. Write one rule per selector, in the same order as the list.
Repeat a property in each rule where the task asks for it, even if it looks the same as another rule.
Try the toy: paste this CSS into the CSS box. In the HTML box, replace everything between `<body>` and `</body>` with this HTML, so the stylesheet link stays. Change the h2 colour or the p font size and watch the preview update.
/* Café Retiro house style */
body {
background-color: #FDF6EC;
}
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 32px;
color: #8B4513;
text-align: center;
}
h2 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 24px;
color: #2E7D32;
}
h3 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
color: #2E7D32;
font-style: italic;
}
p {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
color: #333333;
text-align: justify;
}
li {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
font-weight: bold;
}<h1>Café Retiro</h1>
<h2>Breakfast</h2>
<h3>Served until 12:00</h3>
<p>Fresh coffee, toast with tomato and olive oil, and homemade cakes.</p>
<ul>
<li>Café con leche</li>
<li>Tostada con tomate</li>
<li>Tarta de Santiago</li>
</ul>The li rule makes the three menu items bold. Their font, size and colour come from the li rule too, so lists match the paragraphs.
There is something to try for this step in the IGCSE library.
border sets thickness, style and colour in one line: `border: 2px solid #8B4513;`. The style must be given, such as solid, dashed or dotted.
A border on table styles only the outside edge. Borders between cells need a rule for th and td too.
border-collapse: collapse merges the double lines between cells into single lines.
To make borders invisible, use border: none (or border-style: hidden). To make them visible, give a style such as solid.
table {
border: 3px solid #8B4513;
border-collapse: collapse;
}
th, td {
border: 1px solid #8B4513;
}
/* a layout table with no visible borders */
table.plain, table.plain td {
border: none;
}border: 2px #8B4513; with no style shows no border at all. The default style is none.
padding is the space inside a cell, between its border and its content.
border-spacing is the gap between cells. It works only when border-collapse is separate, which is the default.
text-align sets horizontal alignment (left, center, right). vertical-align sets vertical alignment (top, middle, bottom).
Cells take width, height and background-color like any other element.
table {
width: 80%;
border-collapse: separate;
border-spacing: 4px;
}
th {
background-color: #8B4513;
color: #FFFFFF;
padding: 8px;
}
td {
height: 40px;
padding: 8px;
text-align: center;
vertical-align: middle;
background-color: #FFF3E0;
}Padding stops text touching the border, so the table is easier to read. Spacing separates cells into boxes.
When two rules set the same property on the same element, the browser uses the cascade to choose.
Highest priority first: inline style, then internal stylesheet, then external stylesheet, then the browser's own defaults.
Internal beats external when the `<style>` element comes after the `<link>`, which is the normal order. In fact, the rule read last wins.
Inside one stylesheet, a later rule beats an earlier rule for the same selector. A class selector beats a plain element selector, whatever the order.
<link rel="stylesheet" href="styles/cafe.css"> <!-- h2 green -->
<style>
h2 { color: #1565C0; } /* h2 blue */
</style>
...
<h2>Breakfast</h2>
<h2 style="color: #C62828;">Lunch</h2> <!-- inline red -->/* styles/cafe.css */
h2 {
color: #2E7D32;
font-size: 24px;
}Most lost marks come from small typing errors that a browser ignores without warning.
Before taking screenshots, open the page in a browser and check every style and link really works.
| Mistake | How to avoid it |
|---|---|
| Absolute path to a local file (C:/... or file:///...) | use relative paths such as styles/cafe.css |
| colour or centre in CSS | use color and center |
| Missing ; or }, so later styles fail | end every declaration with ; and close every rule |
| Quotes round a generic family | font-family: Arial, sans-serif; |
| Size with no unit or a space (16 or 16 px) | 16px |
| `<style>` tags inside the .css file | the .css file holds CSS only |
| File saved as cafe.css.txt or with wrong capitals | save as the exact name and type given |
| Missing alt text, or tags not closed | check each tag has its partner |
| URL without https:// | write the full URL |
Take a screenshot of the HTML source in the text editor, with every line readable. Use more than one screenshot if the code is long.
Take a screenshot of the page in a browser, showing the result of the styles.
Take a screenshot of the CSS file in the editor, showing its file name if possible.
Paste them into the evidence document in the order the question asks, and label each one.
The source proves which tags, attributes and paths you used. The browser view proves they work. Examiners often need both to award a mark.
A screenshot of a page that looks right earns nothing if the code that made it is cut off. Zoom so the code is readable but nothing is hidden.
Open the study page and go one step at a time.
Step by step, with exam questions and a quiz.
ICT topic 12Step by step, with exam questions and a quiz.
ICT topic 11Step by step, with exam questions and a quiz.
Topic 16 · Year 8A web page is text written in HTML (what's on the page), styled with CSS (how it looks), sometimes with JavaScript (what it does). Your browser fetches it using a URL.
One question at a time. The reason shows after each answer.