☰ Year plan · Communication Technology

Web page design: parts, HTML and sharing a story

Week 29 · Theme 4, Lesson 8 Web Design Principles · 3 lessons
1

The parts of a web page

ICT P5 Term 2, Theme 4: pp. 74–77
GoalName the parts of a good web page and say why each one is useful.
New words
heading · the big title at the top of a pagesubheading · a smaller title that starts one section of a pagecontrast · a clear difference between letters and the background, so they are easy to readmain text · the paragraphs that tell the story
Explanation

A story can be told as a poster, a presentation or a web page. A good web page has clear parts. At the top is a title, or heading, in bigger letters so that it catches the eye. Subheadings, a bit smaller, split the information into sections, so the visitor sees what each part is about. The main text tells the story. Its letters are smaller than the headings, but still easy to read. A large picture carries the main message, and a few smaller pictures add detail. A page can also have audio and video. Use simple fonts and good contrast, for example dark letters on a light background. If the page is hard to read or too busy, visitors leave quickly.

PartSizeJob
Headingbiggest letterscatches the eye, names the topic
Subheadinga bit smallersplits the page into sections
Main textsmaller, but easy to readtells the story
Large picturebigcarries the main message
Audio or videoshortadds sound and movement
Worked examples
large pictureheadings + text
Youssef’s page about bees has the heading ‘Busy Bees’, a subheading ‘What bees eat’, three short lines of text, and a large picture of a bee on a flower. A visitor understands the topic in a few seconds.
pale on whitedark on light
Another page has pale yellow letters on a white background and a fancy font. Nobody can read it. The designer changes to dark blue letters in a simple font. Contrast and a simple font make reading easy.
signpostsfind a part
Habiba puts a subheading above each of her three sections: ‘Where bees live’, ‘What bees eat’, ‘How bees help’. Visitors can look for the part they want. Subheadings are signposts.
Class activity

Label a web page. On paper draw a big page and sketch a web page about a topic you love. Label these parts with arrows: heading, two subheadings, main text, a large picture, a smaller picture, and a place for audio or video. Draw the heading biggest, the subheadings smaller, and the main text smallest. Write the colour of the letters and of the background and say why they have good contrast. Show it to a partner who finds all seven parts.

Practice
1
Which part of a web page is in the biggest letters?
2
What do subheadings do?
3
Why choose dark letters on a light background?
4
Look at the picture. Which part carries the main message? Say the letter.
A: large pictureB: small noteC: decoration