Images and links

What the exam task looks like

Cambridge image tasks are short and exact. Each part of the sentence is usually one mark.

A typical task: "Insert the image J2611logo.jpg at the top right of the first page. Resize it to 4 cm wide, maintaining its aspect ratio. Align the top of the image with the top margin."

Read the task three times. Underline the file name, the position, the size and any word like "maintain" or "do not distort".

Place the image precisely

Text wrapping decides how the text flows around an image. Cambridge names four kinds: above and below (top and bottom), square, tight, and in line with text.

In most word processors, select the image and open its layout or wrap options. Choose square so text sits beside the image in a neat rectangle.

Then align the image to the margin. Use the position or align options (align right, align top), not dragging by eye.

Aspect ratio: the shape of the image

The aspect ratio is the width compared with the height. A photo 1600 pixels wide and 1200 pixels high has a ratio of 4:3.

If you change the width and height by the same factor, the ratio stays the same. The picture looks right.

If you change only one of them, the picture is distorted: squashed or stretched. Faces look fat or thin, and circles become ovals.

Try the toy. Change the width with Keep aspect ratio ON. Then turn it OFF and change the width again. Watch the round sun in the picture.

There is something to try for this step in the IGCSE library.

Calculate the new height

When you keep the aspect ratio, the new height depends on the new width.

New height = new width × original height ÷ original width.

Software does this for you when the aspect ratio lock is on. You still need the sum to check your result and for theory questions.

Changing the aspect ratio on purpose

Sometimes a task gives both a width and a height. For example: "Resize the image to 3 cm high and 12 cm wide. You do not need to maintain the aspect ratio."

Untick the lock aspect ratio box first. Then type both numbers.

If you leave the lock on, the software will change your second number back. The image will be the wrong size.

Headings and paragraphs

`<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>

Ordered and unordered lists

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>

div and classes

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;
}

Tables: table, tr, th, td

`<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>

Merging cells: colspan and rowspan

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.

<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>

Table and cell sizes

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;
}

Images

`<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">

Sound and video

`<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>

Bookmarks and links to them

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>

Links to pages, websites and email

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>

Target windows: _blank, _self and named windows

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 -->

Relative and absolute paths

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.

There is something to try for this step in the IGCSE library.

Why absolute paths to local files break

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.