Year 10 · ICT · Summer 2
Website authoring and images; the Year 10 mock · Lesson 2 of 5
Images and links
Practical12.1 Place and resize images21.2b HTML body: text, tables and media21.2c Hyperlinks and file paths
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
You will learn to
- Resize an image to a stated size while keeping its aspect ratio.
- Insert an image with alt text and a set width and height.
- Create links to another local page, an external URL and an email address.
- Explain why relative paths must be used for local files.
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Success criteria
You have got it when you can say:
- I can work out the new height of an 800 × 600 image when its width becomes 400.
- I can add an image with alt text that describes it.
- I can make a mailto link and a link that opens in a new window.
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Retrieval starter
Questions from before. Write your answers, then show them.
- Last lesson
If inline, internal and external styles disagree, the winner is…
A InlineB ExternalC Internal
A. Inline
- Last unit
A pie chart is for…
A Change over timeB Parts of a wholeC Comparing 30 categories
B. Parts of a whole
- Earlier this year
Spacing 'after' a paragraph is…
A The space below it before the next paragraphB The line spacingC The margin
A. The space below it before the next paragraph
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 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 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Key words (2 of 5)
- Group
- Join several objects so they move and resize as one.
- 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 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 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.
- Class
- A label given to elements with the class attribute so CSS can style them as a group.
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Key words (4 of 5)
- Bookmark
- A named place on a page, made with an id, that a hyperlink can jump to.
- 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:/...
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Key words (5 of 5)
- Target
- The attribute that sets which window a link opens in, such as _blank.
- colspan / rowspan
- Attributes that make a table cell stretch across columns or down rows.
- Padding
- The space inside an element or cell between its border and its content.
- Alt text
- Alternative text for an image, read by screen readers and shown if the image fails.
12.1 Place and resize images · The explanation · step 1 of 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 18 · 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 · 14 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
- Headings and paragraphs
- Ordered and unordered lists
- div and classes
- Tables: table, tr, th, td
- Merging cells: colspan and rowspan
- Table and cell sizes
- Images
- Sound and video
- 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
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Try it: Paint pixels
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Quick quiz · 1 of 3
Cropping…
- A Makes it brighter
- B Flips it
- C Cuts away part of the image
C. Cuts away part of the image
Keep only the part you want.
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Quick quiz · 2 of 3
A big image is compressed for the web because…
- A Smaller files load faster
- B It looks better
- C It becomes a vector
A. Smaller files load faster
Fewer pixels or more compression means a smaller file.
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Quick quiz · 3 of 3
Reflecting an image…
- A Makes it darker
- B Mirrors it
- C Rotates it 90°
B. Mirrors it
Flip horizontally or vertically.
Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 2 of 5
Exit ticket
Answer on paper before you go. Then check.
.csv is…
A A web pageB Comma-separated values: a generic data formatC A picture
B. Comma-separated values: a generic data format Any spreadsheet or database can open it.
A .pdf is used because…
A It looks the same on every computerB It is the smallest fileC Anyone can edit it
A. It looks the same on every computer Layout and fonts are fixed inside the file.