☰ Year plan · Communication Technology

Designing a web page

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

Tags: opening, content, closing

ICT P6 Term 1, Theme 1: pp. 38–41
GoalExplain that an HTML tag has an opening tag, content and a closing tag.
New words
tag · a word in angle brackets that tells the browser what a part of the page isopening tag · the tag that starts a part, for example <p>closing tag · the tag that ends a part; it has a slash, for example </p>content · the words or pictures between the tags
Explanation

A web page is made of parts, and every part is wrapped in a tag. A tag has three pieces. First, the opening tag, for example <p>, which says ‘a paragraph starts here’. Second, the content, which is the text people will read. Third, the closing tag, for example </p>, which looks like the opening tag but has a slash and says ‘the paragraph ends here’. Think of a parcel: the first label says ‘open here’, the thing is inside, and the last label says ‘end of parcel’. The browser reads the tags to decide how to show the content, but it does not show the tags themselves. If a closing tag is missing, the browser may carry on and make the rest of the page look wrong, like a parcel with no end. Tags can also hold others: a bold word can sit inside a paragraph.

PartExampleJob
opening tag<p>starts the paragraph
contentKites fly high.the text people read
closing tag</p>ends the paragraph
Worked examples
Html
1<p>Kites fly high.</p>
Output
Kites fly high.
This is a paragraph. The opening tag is p, the content is the sentence, and the closing tag has a slash. The browser shows only the sentence.
Html
1<p>This is <b>very</b> important.</p>
Output
This is very important.
Habiba wants one word to be strong. She puts the tag b around the word. The browser shows that word in thick letters. The tags are inside the paragraph tags.
Html
1<h1>Camels
2<p>They live in deserts.</p>
Output
[big text for everything after the heading]
Malak forgets to close the heading. Her page looks strange because everything after it is big. The fix is to add the closing tag after the word.
Class activity

Tag detective. On paper, write three short lines of HTML that each use p tags: a sentence about the Nile, a sentence about your school, a sentence about your favourite food. Circle every opening tag in blue and every closing tag in red. Swap with a partner and look for a missing slash.

Practice
1
What are the three parts of a tag?
2
What does the slash in a closing tag show?
3
What will the browser show for this code?
Html
1<p>Hello Egypt</p>
4
What can go wrong if you forget a closing tag?