Year 11 · ICT · Spring 1
Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Images and stylesheets: the near-misses
Exam practice12.1 Place and resize images21.2c Hyperlinks and file paths21.3a CSS: rules, classes, backgrounds and fonts
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
You will learn to
- Resize an image to the stated size, keeping the aspect ratio unless told otherwise.
- Use hex colour codes correctly in a stylesheet.
- Explain why an absolute path to a local file breaks when the site is moved.
- Correct a set of near-misses: wrong sizes, missing hex, unattached stylesheets and broken links.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Success criteria
You have got it when you can say:
- I can work out the new height of an image when I change its width.
- I can spot a stylesheet that is not attached, and fix it.
- I can fix every near-miss in the set.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Retrieval starter
Questions from before. Write your answers, then show them.
- Last lesson
A .pdf is used because…
A Anyone can edit itB It is the smallest fileC It looks the same on every computer
C. It looks the same on every computer
- Last unit
Landscape orientation is…
A SquareB Taller than it is wideC Wider than it is tall
C. Wider than it is tall
- Earlier this year
An intranet differs from the internet because…
A It is slowerB It is private to an organisationC It has no pages
B. It is private to an organisation
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Key words (1 of 5)
- Aspect ratio
- The width of an image compared with its height, such as 4:3.
- Resize
- Make an image bigger or smaller.
- Text wrapping
- How text flows around an image: square, tight, above and below, or in line.
- Pixel
- One tiny dot of colour; images are made of a grid of pixels.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Key words (2 of 5)
- Colour depth
- The number of bits used to store the colour of one pixel.
- HTML
- HyperText Markup Language: the language of the content layer of a web page.
- CSS
- Cascading Style Sheets: the language of the presentation layer, which sets how a page looks.
- Tag
- A word in angle brackets, such as `<p>`, that marks the start or end of an element.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Key words (3 of 5)
- Attribute
- Extra information inside an opening tag, written name="value", such as src or alt.
- Head
- The part of a page holding information about it: title, meta tags, stylesheet links.
- External stylesheet
- A separate .css file attached to pages with the link element.
- Inline style
- CSS written in a style attribute inside one tag; it affects only that element.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Key words (4 of 5)
- Class
- A label given to elements with the class attribute so CSS can style them as a group.
- Selector
- The part of a CSS rule that says which elements it styles, such as h1 or .note.
- Generic font family
- A fallback type of font (serif, sans-serif, monospace) used if named fonts are missing.
- Bookmark
- A named place on a page, made with an id, that a hyperlink can jump to.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Key words (5 of 5)
- Hyperlink
- Clickable text or an image that goes to another place, made with the a tag.
- Relative path
- A file location described from the current file's folder, such as images/logo.png.
- Absolute path
- A full file location from the very start, such as a full URL or C:/...
- Target
- The attribute that sets which window a link opens in, such as _blank.
12.1 Place and resize images · The explanation · step 1 of 15 · part 1 of 3
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".
12.1 Place and resize images · The explanation · step 1 of 15 · part 2 of 3
What the exam task looks like (continued)
Examiners mark from a checklist. If you meet every item in the sentence, you get every mark. Missing one word, such as "right", loses that mark.
12.1 Place and resize images · The explanation · step 1 of 15 · part 3 of 3
What the exam task looks like (continued)
Many candidates insert the wrong file. Source folders often hold two similar files, for example `logo.jpg` and `logo2.jpg`. Check the file name before you click Insert.
12.1 Place and resize images · The explanation · step 2 of 15 · part 1 of 3
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.
12.1 Place and resize images · The explanation · step 2 of 15 · part 2 of 3
Place the image precisely (continued)
| Wrap type | What the text does | Good for |
|---|---|---|
| In line with text | The image sits on a line like a big letter | A picture on its own line |
| Square | Text flows round a rectangle around the image | Photo beside a paragraph |
| Tight | Text follows the outline of the image itself | Logos with odd shapes |
| Above and below | Text stops above the image and starts again below it | Wide images across the column |
Dragging by eye leaves the image a few millimetres off. The examiner checks that the edge lines up with the margin or the paragraph.
12.1 Place and resize images · The explanation · step 2 of 15 · part 3 of 3
Place the image precisely (continued)
A common mark loss: the image sticks out past the margin into the white edge of the page. Always check the image's right edge sits exactly on the right margin.
12.1 Place and resize images · The explanation · step 3 of 15 · part 1 of 3
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.
12.1 Place and resize images · The explanation · step 3 of 15 · part 2 of 3
Aspect ratio: the shape of the image (continued)
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.
Keeping the ratio keeps every shape in the picture correct. That is why tasks say "maintain the aspect ratio".
12.1 Place and resize images · The explanation · step 3 of 15 · part 3 of 3
Aspect ratio: the shape of the image (continued)
Dragging a side handle (the middle of an edge) changes only one dimension and distorts the image. Drag a corner handle, or better, type the size with the lock aspect ratio box ticked.
There is something to try for this step in the IGCSE library.
12.1 Place and resize images · The explanation · step 4 of 15 · part 1 of 3
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.
12.1 Place and resize images · The explanation · step 4 of 15 · part 2 of 3
Calculate the new height (continued)
Both dimensions are multiplied by the same scale factor. Here the factor is 5 ÷ 8 = 0.625, and 6 × 0.625 = 3.75.
12.1 Place and resize images · The explanation · step 4 of 15 · part 3 of 3
Calculate the new height (continued)
After typing the width, look at the height box. If it did not change, the lock was off. Undo and try again with the lock ticked.
The explanation · 11 more steps
More on the lesson page
The lesson page has the rest of the explanation, step by step:
- Changing the aspect ratio on purpose
- Bookmarks and links to them
- Links to pages, websites and email
- Target windows: _blank, _self and named windows
- Relative and absolute paths
- Why absolute paths to local files break
- How a CSS rule is written
- Inline styles and external stylesheets
- Classes in CSS
- Backgrounds: colour and image
- Fonts: family, size, colour, alignment, bold, italic
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Try it: Paint pixels
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Quick quiz · 1 of 3
A big image is compressed for the web because…
- A Smaller files load faster
- B It becomes a vector
- C It looks better
A. Smaller files load faster
Fewer pixels or more compression means a smaller file.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Quick quiz · 2 of 3
Reflecting an image…
- A Rotates it 90°
- B Mirrors it
- C Makes it darker
B. Mirrors it
Flip horizontally or vertically.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Quick quiz · 3 of 3
A pie chart is for…
- A Comparing 30 categories
- B Change over time
- C Parts of a whole
C. Parts of a whole
Few slices, adding up to the total.
Year 11 · ICT · Paper 3 practice: spreadsheets and websites · Lesson 3 of 5
Exit ticket
Answer on paper before you go. Then check.
A line chart is for…
A Unrelated categoriesB Parts of a wholeC Change over time
C. Change over time Temperature by month, sales by year.
A legend shows…
A The chart titleB Which colour is which data seriesC The axis scale
B. Which colour is which data series Needed when there is more than one series.