Computer Science - ICT Grade 7: HTML and CSS Building a Simple Webpage

Grade 7 Computer Science (ICT) Study Guide: HTML and CSS – Building a Simple Webpage

1. The Driving Question

"If the internet is just a bunch of files, how does my browser turn plain text into a colorful, clickable webpage—like a digital LEGO set where every block has a job? And why can’t I just drag and drop like I do in Google Docs?"

By the end of this guide, you’ll know how to write the "recipe" (HTML) and the "styling rules" (CSS) that tell your browser exactly how to build a webpage from scratch.

2. The Core Idea – Built, Not Listed

Imagine you’re designing a school club flyer for the Robotics Team. You don’t just scribble words on paper—you choose: - What goes on the page: Headings ("Join Robotics!"), paragraphs ("Meetings every Tuesday"), a list of supplies ("Bring your laptop"), and a photo of the team. - How it looks: Big bold title in blue, a red border around the photo, and the list items spaced neatly.

HTML is like the content outline of your flyer—it tells the browser what each part is (a heading, a paragraph, a list). CSS is like the design rules—it tells the browser how those parts should look (colors, fonts, spacing). Without HTML, the browser wouldn’t know what anything is. Without CSS, everything would look like plain black text on a white background.

Key Vocabulary:
1. HTML (HyperText Markup Language) - Definition: The "skeleton" of a webpage—tags that label content so the browser knows what each part is. - Example: <h1>Robotics Team</h1> tells the browser "this is a big heading," just like you’d write "TITLE" in bold at the top of your flyer. - Note: HTML isn’t a programming language—it doesn’t do anything (like calculate numbers). It just describes structure.

1. CSS (Cascading Style Sheets)
2. Definition: The "outfit" of a webpage—rules that control how HTML elements look (colors, fonts, layout).
3. Example: h1 { color: blue; font-size: 32px; } means "make all <h1> headings blue and 32 pixels tall," like choosing a marker color for your flyer’s title.

4. Note: "Cascading" means rules can override each other (e.g., a rule for all headings vs. a rule for just one heading).

5. Tag

6. Definition: The "label" in HTML that wraps around content to give it meaning (e.g., <p> for paragraph).
7. Example: <img src="robot.jpg"> is like writing "INSERT PHOTO HERE" on your flyer—it tells the browser where to find the image.

8. Note: Tags usually come in pairs (<p>...</p>), but some are "self-closing" like <img>.

9. Selector

10. Definition: The part of a CSS rule that picks which HTML elements to style.
11. Example: p { color: green; } selects all paragraphs (<p> tags) and makes them green, like deciding "all body text on my flyer should be green."
12. Note: Selectors can target tags, classes (.team-member), or IDs (#header).

3. Assessment Translation

How this appears in class: - Exit Ticket: Write the HTML to create a heading and a paragraph about your favorite hobby. Proficient: Correct tags (<h2>, <p>), proper nesting, and content. Developing: Missing closing tags or using the wrong tag (e.g., <h1> for a paragraph). - Short Constructed Response: Explain how CSS changes the appearance of an HTML element. Proficient: Mentions selectors, properties (e.g., color), and values (e.g., red). Developing: Vague ("it makes it look better") or confuses HTML and CSS. - Project: Build a simple webpage about a book or game with: - At least 3 HTML elements (e.g., heading, paragraph, list). - 2 CSS rules (e.g., change text color, add a background). Proficient: Correct syntax, intentional styling, and no broken tags. Developing: Missing closing tags, CSS rules that don’t work (e.g., typos in property names).

State Standardized Test Framing (Grade 7 ICT): - Multiple Choice: Questions test syntax (e.g., "Which tag creates a paragraph?") or CSS properties (e.g., "Which CSS rule makes text bold?"). - Distractor Pattern: Mixes up tags (e.g., <h1> vs. <header>) or CSS properties (e.g., font-color vs. color). - Short Answer: "Write a CSS rule to make all <h2> headings red." Proficient: h2 { color: red; }. Developing: Missing braces or semicolon, or using the wrong selector.

Model Proficient Response (Project):

<!DOCTYPE html>
<html>
<head>
  <title>My Favorite Game</title>
  <style>
    h1 {
      color: purple;
      font-family: Arial;
    }
    p {
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <h1>Minecraft</h1>
  <p>Minecraft is a sandbox game where you build with blocks. My favorite part is exploring caves!</p>
  <ul>
    <li>Creative Mode</li>
    <li>Survival Mode</li>
  </ul>
</body>
</html>

Why it’s proficient: - Correct HTML structure (doctype, head/body). - CSS rules are properly formatted and applied. - Content is organized with appropriate tags (heading, paragraph, list).

4. Mistake Taxonomy

Mistake 1: Forgetting to Close Tags - Prompt: Write the HTML to create a heading and a paragraph about your pet. - Common Wrong Response: ```html

My Dog

His name is Max and he loves to play fetch. ``` - *Why It Loses Credit*: Missing `

and

My Dog

His name is Max and he loves to play fetch.

``` Tip: Always check for matching opening/closing tags (like parentheses in math).

Mistake 2: CSS Syntax Errors - Prompt: Write a CSS rule to make all paragraphs blue and 16 pixels tall. - Common Wrong Response: css p { color = blue font-size: 16px } - Why It Loses Credit: - Uses = instead of : for property-value pairs. - Missing semicolon after color: blue. - The browser ignores malformed rules. - Correct Approach: css p { color: blue; font-size: 16px; } Tip: CSS syntax is selector { property: value; }—like a recipe where every ingredient (property) needs a measurement (value) and a semicolon.

Mistake 3: Confusing HTML and CSS - Prompt: Explain how to change the background color of a webpage. - Common Wrong Response: "Use <body color="yellow"> in HTML." - Why It Loses Credit: - color is a CSS property, not an HTML attribute. - HTML attributes (like src in <img>) are different from CSS properties. - Correct Approach: css body { background-color: yellow; } Tip: HTML = what the content is. CSS = how it looks. If you’re changing appearance, it’s CSS.

5. Connection Layer

1. Within Computer Science-Debugging in Python

2. Why: Both HTML/CSS and Python require precise syntax (e.g., closing tags vs. colons in loops). A missing > in HTML is like a missing : in Python—your code won’t run. Learning to spot these errors in one helps you debug the other.

3. Across Subjects-Outlining an Essay in ELA

4. Why: HTML’s structure (<h1>, <p>, <ul>) is like an essay outline—headings organize ideas, paragraphs develop them, and lists break down details. A well-structured webpage is like a well-organized essay: easy to follow.

5. Outside School-Customizing a Social Media Profile

6. Why: Platforms like Tumblr or Discord let you edit HTML/CSS to customize your profile. That "glow effect" on your bio? It’s CSS (text-shadow: 0 0 5px #fff;). Understanding the basics lets you tweak templates instead of relying on pre-made designs.

6. The Stretch Question

"If you can style a webpage with CSS, why do websites still look different on phones vs. computers? How would you write CSS to make a heading huge on a laptop but normal-sized on a phone?"

Pointer Toward the Answer: This is called responsive design, and it uses CSS media queries (rules that apply only at certain screen sizes). For example:

h1 {
  font-size: 24px; /* Default size */
}
@media (min-width: 768px) {
  h1 {
    font-size: 48px; /* Bigger on laptops */
  }
}

The @media rule checks the screen width before applying styles. It’s like having two different flyers—one for a bulletin board (big text) and one for a handout (smaller text). Most modern websites use this to adapt to any device!