Egypt Preparatory 2 Communication Technology, Week 10: Boxes inside a page: container, header, section, footer

My digital project (1): files and HTML

Week 10 · Unit 2, Lesson 3 My Digital Project for My School (1) · 3 lessons

Boxes inside a page: container, header, section, footer

ICT Prep 2 Term 1, Unit 2, Lesson 3: pp. 64–69

GoalRead the boxes inside a page: container, header, section and footer.

New words

container (div) · a box that holds other parts, often given a class nameheader and footer · the top part with the main heading and the bottom part with a closing linesection · a part of the page about one idea, with a sub-heading (h2)class · a name given to an element so that CSS can style it

Explanation

Inside the body, a page is built from boxes. A container, written with the div tag and given a class name such as container, holds everything. Inside it, the header holds the main heading, an h1. Each section is about one idea and starts with a sub-heading, an h2, followed by paragraphs. The footer is the last box and holds a closing line of text. Each box has its own closing tag, and boxes sit inside bigger boxes like boxes in a drawer. The class name matters because the style file will use it to say, for example, how wide the container is. Next week the CSS gives the boxes their looks.

	A
1	container
2	header: h1 main heading
3	section: h2 + paragraph
4	footer: closing line

Worked examples

Html

1<div class="container">
2  <header>
3    <h1>Robots Club (example)</h1>
4  </header>
5  <section>
6    <h2>What we do</h2>
7    <p>We build small robots.</p>
8  </section>
9  <footer>
10    <p>A made-up club page.</p>
11  </footer>
12</div>

Here is the code for page one, with new, invented content. The container holds a header with the club name, one section called “What we do” and a footer. No address, phone or photo appears.

same container→same boxes→new words in each section→a different page

Hana’s second page, “Club events”, copies the same boxes but changes the content: the header says Club events, the section is “Next meeting: every second Thursday”, and the footer is the same line. The boxes are the same, the words are new.

Class activity

On paper, draw nested boxes for the “Club events” page: the container, then the header, a section with a sub-heading and a paragraph, and the footer. Label each box with its tag name and class name. Invent the words but use no real details.

Practice

What does the header hold?

What does each section start with?

Why do we give the container a class name?

Why must we never put a real address or phone number on a club page?