☰ Year plan · Communication Technology

Designing a web page

Week 8 · Theme 1, Lesson 8 Website Design · 3 lessons
2

Headings, paragraphs and picture descriptions

ICT P6 Term 1, Theme 1: pp. 38–41
GoalUse heading, paragraph, bold, italic, link and picture-description tags.
New words
heading · a title of a page or a part; h1 is the biggest and h6 the smallestlink · a word or picture that takes you to another pagealt text · words that describe a picture for people who cannot see ititalic · letters that lean to the right
Explanation

Here are the tags you will use most. Headings go from h1, the biggest, to h6, the smallest. Use one h1 as the main title, and h2 for subheadings. The tag p is a paragraph. The tag b makes bold letters, and i makes italic letters. A link uses the tag a and an address. Use invented addresses only. A picture uses the tag img. It has a place for the picture file, and a description called alt text, for example alt="A camel in the desert". The alt text matters. People with low vision use a screen reader that reads the description aloud, so they understand the picture. Remember week 1: technology that helps. The alt text is also shown if the picture cannot load. The browser shows the words, the pictures and the links. It hides the tags, and you can see them only if you inspect the page.

TagWhat it makes
<h1> … <h6>headings, from biggest to smallest
<p>a paragraph
<b> <i>bold and italic letters
<a>a link to another page
<img>a picture with its description
Worked examples
Html
1<h1>Camels</h1>
2<h2>Where they live</h2>
3<p>In dry deserts.</p>
Output
Camels
Where they live
In dry deserts.
A page about camels has a main title (h1) and a subheading (h2). The h1 is bigger. The browser shows only the words.
Html
1<img src="camel.png" alt="A camel walking in the desert">
Output
[picture: A camel walking in the desert]
Salma puts a picture on the page. The alt text says what is in the picture. A pupil with low vision hears it read aloud by a screen reader.
Html
1<a href="https://www.example-class.org">Our class</a>
Output
Our class (a link)
A link needs an address. Youssef writes an invented one for his class page. The words ‘Our class’ are what people see and click; the address stays hidden.
Class activity

Code to page. For each line, draw what the browser shows. (a) <h2>Lunch</h2>; (b) <p>We eat <i>fresh</i> bread.</p>; (c) an img with alt "A basket of oranges". For (c), draw a frame with the words of the description inside. Then explain why the alt text matters.

Practice
1
Which tag makes the biggest heading?
2
What is alt text for?
3
What will the browser show?
Html
1<h1>Fish</h1>
2<p>Fish swim.</p>
4
Are the tags shown on the page?