HTML as the language of web pages in Intro to Computing - Draw & Build Visually

Draw This - beginner

Draw a simple diagram showing how HTML structures a basic web page with a header, a main content area, and a footer. Label each part clearly.

5 minutes

Hint 1

Hint 2

Hint 3

Grading Criteria

Diagram includes three separate boxes

Boxes labeled as <header>, <main>, and <footer>

Labels clearly describe the purpose of each section

Boxes arranged vertically to show page layout

Diagram is neat and easy to understand

Solution

 +-----------------------------+
 |          <header>           |
 |  (Website title or menu)    |
 +-----------------------------+
 |             <main>          |
 |  (Main content of the page) |
 +-----------------------------+
 |          <footer>           |
 |  (Contact info or copyright)|
 +-----------------------------+

This diagram shows a simple structure of an HTML web page. The <header> section is like the top part of a house where you might have the title or navigation menu. The <main> section is the main room where the important content goes. The <footer> is like the bottom part of the house where you put contact information or copyright details. Each box represents a part of the page that HTML helps organize.

Variations - 2 Challenges

[intermediate] Draw a flowchart showing how a browser reads an HTML file and displays a web page with header, main content, and footer.

[advanced] Draw a detailed diagram of an HTML page structure including <header>, <nav>, <main>, <article>, <section>, and <footer>. Label each part with its role.