Bird
Raised Fist0
Intro to Computingfundamentals~10 mins

HTML as the language of web pages in Intro to Computing - Flowchart & Logic Diagram

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
Process Overview

HTML is the basic language used to create and structure content on the web. It tells the web browser what to show and how to organize text, images, and links on a web page.

Flowchart
Write HTML code
↓
Save file with .html extension
↓
Open file in web browser
Yes No↓
Display web page
This flowchart shows the process of creating a web page using HTML: writing code, saving it, opening it in a browser, and the browser displaying the page if it understands HTML.
Step-by-Step Trace - 6 Steps
Step 1: Write HTML code using tags like <html>, <head>, <body>, <p>, <img>.
Step 2: Save the file with a .html extension, for example, 'mypage.html'.
Step 3: Open the saved HTML file in a web browser like Chrome or Firefox.
Step 4: Browser checks if it understands the HTML code.
Step 5: If yes, browser displays the web page with formatted text, images, and links.
Step 6: If no, browser shows an error or displays raw code.
Diagram
 +-------------------+      +-------------------+      +-------------------+
 |   HTML File       | ---> |   Browser Reads    | ---> |   Display Web     |
 | (mypage.html)     |      |   HTML Code       |      |   Page Content    |
 +-------------------+      +-------------------+      +-------------------+
        |                          |                          |
        |                          |                          |
        +--------------------------+--------------------------+
                                   |
                             +-------------------+
                             |  Show Error or    |
                             |  Raw Code if HTML |
                             |  Not Understood   |
                             +-------------------+
This diagram shows how an HTML file is read by a browser and either displayed as a web page or shows an error if the HTML is not understood.
Flowchart Quiz - 3 Questions
Test your understanding
What is the first step to create a web page using HTML?
AWrite HTML code with tags
BOpen the browser
CSave the file as .txt
DDisplay the web page
Key Result
HTML code is the blueprint that browsers read and convert into the web pages we see.

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>