Bird
Raised Fist0
Intro to Computingfundamentals~10 mins

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

Choose your learning style10 modes available
LearnWhyDeepFlowTryChallengeDrawRecallReal

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What is the main purpose of HTML in web pages?
easy
A. To structure and organize content on a web page
B. To style the colors and fonts of a web page
C. To add interactive behavior to a web page
D. To store data in a database

Solution

  1. Step 1: Understand HTML's role

    HTML uses tags to organize text, images, and links on a page.

  2. Step 2: Differentiate from other languages

    Styling is done by CSS, behavior by JavaScript, and data storage by databases.

  3. Final Answer:

    To structure and organize content on a web page -> Option A

  4. Quick Check:

    HTML = structure [OK]
Hint: HTML structures content; CSS styles; JS adds behavior [OK]
Common Mistakes:
  • Confusing HTML with CSS or JavaScript
  • Thinking HTML stores data
  • Believing HTML controls page behavior
2. Which of the following is the correct way to start an HTML document?
easy
A. Page
B. <html>
C. <html>
D.

Solution

  1. Step 1: Identify correct HTML structure

    The HTML document starts with , then for metadata, then for content.

  2. Step 2: Check tag order and nesting

    Page correctly nests inside and places after .

  3. Final Answer:

    <html><head><title>Page</title></head><body></body></html> -> Option A

  4. Quick Check:

    Correct tag order = Page [OK]
Hint: HTML starts with <html>, then <head>, then <body> [OK]
Common Mistakes:
  • Placing <head> after <body>
  • Incorrect tag nesting order
  • Missing <html> root tag
3. What will the browser display for this HTML snippet? 
<h1>Welcome</h1>
<p>This is a <strong>simple</strong> page.</p>
medium
A. Welcome (normal text) followed by: This is a simple page. (all normal text)
B. Welcome (big heading) followed by: This is a simple page. (with 'simple' bold)
C. Welcome (bold text) followed by: This is a simple page. (italic 'simple')
D. An error message because <strong> is invalid inside <p>

Solution

  1. Step 1: Understand tag meanings

    <h1> creates a large heading. <p> is a paragraph. <strong> makes text bold.

  2. Step 2: Visualize the rendered output

    The browser shows "Welcome" big and bold as heading, then paragraph text with "simple" bolded.

  3. Final Answer:

    Welcome (big heading) followed by: This is a simple page. (with 'simple' bold) -> Option B

  4. Quick Check:

    <h1> = big heading, <strong> = bold [OK]
Hint: h1 = big heading, strong = bold text [OK]
Common Mistakes:
  • Thinking <strong> makes text italic
  • Assuming <h1> is normal text
  • Believing <strong> inside <p> causes error
4. Identify the error in this HTML snippet: 
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h2>Hello World</h3>
  </body>
</html>
medium
A. The <body> tag is missing
B. The <title> tag is misplaced inside <head>
C. The closing tag for <h2> is incorrect; it should be </h2>
D. The <html> tag is not closed

Solution

  1. Step 1: Check tag pairs

    The <h2> tag opens but closes with </h3>, which is a mismatch.

  2. Step 2: Verify other tags

    <title> is correctly inside <head>, <body> and <html> tags are properly closed.

  3. Final Answer:

    The closing tag for <h2> is incorrect; it should be </h2> -> Option C

  4. Quick Check:

    Matching tags must open and close the same [OK]
Hint: Opening and closing tags must match exactly [OK]
Common Mistakes:
  • Ignoring mismatched heading tags
  • Thinking <title> can be outside <head>
  • Overlooking missing or extra closing tags
5. You want to create a web page with a navigation bar, a main content section, and a footer. Which HTML5 semantic tags should you use to organize these parts?
hard
A. <menu> for navigation, <content> for main content, <bottom> for footer
B. <header> for navigation, <section> for main content, <aside> for footer
C. <div> for navigation, <article> for main content, <footer> for footer
D. <nav> for navigation, <main> for main content, <footer> for footer

Solution

  1. Step 1: Identify semantic tags for page parts

    <nav> is for navigation menus, <main> is for main content, <footer> is for footer area.

  2. Step 2: Eliminate incorrect tags

    <header> is for page header, <aside> is for side content, <menu> and <content> are not standard semantic tags for these parts.

  3. Final Answer:

    <nav> for navigation, <main> for main content, <footer> for footer -> Option D

  4. Quick Check:

    Use semantic tags for clear page structure [OK]
Hint: Use nav, main, footer tags for page sections [OK]
Common Mistakes:
  • Using non-semantic tags like <div> only
  • Confusing header with navigation
  • Using invalid tags like <bottom>