الأسبوع 8 · المحور الأول، الدرس ٨ «تصميم مواقع الإنترنت»: وسوم HTML الأساسية وتخطيط صفحة ويب · 3 دروس
3
Plan my web page on paper
ICT P6 Term 1, Theme 1: pp. 38–41
GoalPlan a web page on paper for a pretend assistive product.
New words
layout · the way parts are placed on a pagescan · to look quickly over a page to find what you needcontrast · a clear difference between letters and the backgroundfeedback · what other people tell you about your work to help you improve it
Explanation
Good web design helps the reader. Use a big heading to catch attention. Use subheadings so that people can scan the page and find what they need. Keep paragraphs short. Choose pictures that mean something, and give each a description. Pick letters that are easy to read, and colours with strong contrast, such as dark letters on a light background. Now plan a page, on paper, for a pretend product: the Talking Lamp, which reads a book page aloud. Draw a frame. Write one heading and three subheadings: ‘What it does’, ‘Who it helps’, ‘Special feature’. Write a first sentence under each. Add three pictures, each with a description. Fill a small table for layout, colours and letters. Present your plan to the class, listen to the feedback and decide what to change.
Part of the page
My plan for the Talking Lamp
main heading
The Talking Lamp
subheading 1
What it does: reads a page aloud
subheading 2
Who it helps: pupils with low vision
subheading 3
Special feature: slows down for hard words
pictures
lamp; a child listening; a book
colours and letters
dark letters on cream; big, plain letters
Worked examples
Good
Hard to read
big title, subheadings, short paragraphs
one very long block of text
Mina’s page has a title, subheadings and short paragraphs. A visitor who is in a hurry can find ‘Who it helps’ at once. That is good scanning.
Letters
Background
Easy to read?
yellow
white
no
dark blue
white
yes
Nour tries yellow letters on a white page. Her friend says: ‘I cannot see them.’ She changes to dark letters. The contrast is strong and the page is easy to read.
present→listen→improve
Karim presents his plan and a classmate says: ‘Your third picture has no description.’ Karim thanks her and adds the description. Feedback helped him improve.
Class activity
Plan your page. Draw a large frame on paper. Choose your own pretend product (for example a talking door-bell or a reading ruler). Write the heading, three subheadings, a first sentence under each, three pictures with descriptions, and a small table with layout, colours and letters. Present it to a partner. Ask: what is clear and what should I change?
Practice
1
Why use subheadings?
So readers can scan the page and find what they need.
2
Which has the stronger contrast: dark letters on a light page or yellow letters on white?
Dark letters on a light page.
3
A plan has three pictures but only one description. What must you add?
