Activity: Web Language Core

The theoretical rules and structure of HTML5 and CSS3

Grade XI • Computer Science ⏱️ ~25 min
Part 1 Elements vs. Attributes
Understanding the Anatomy

In HTML, we use tags to create elements. Elements can have attributes that provide additional information.

<img src="mountain.png" width="500">
Part 2 The HTML5 Skeleton
Head vs. Body

A standard HTML5 document is strictly organized into metadata and visible content.

<head>
Contains meta-information, titles, links to CSS, and scripts. Not visible to the user.
<body>
The container for all visible content (headings, paragraphs, images, tables).
True or False: The <title> tag defines the text shown on the browser tab, not the page content.
Reveal Answer
True. Use <h1> for the main heading on the actual page content.
Part 3 The Cascading Priority
Which style wins?

CSS stands for **Cascading** Style Sheets because rules "cascade" down with a specific priority order.

  1. Inline Style: <h1 style="color: blue"> (Highest Priority)
  2. Internal Style: <style> block in the head.
  3. External Style: Linked .css file.
  4. Browser Default: Standard styling from Chrome/Firefox. (Lowest Priority)
Exercise: If a paragraph is set to green in an external file, but red in an internal block, and blue inline, what color will the user see?
Check the Winner
Winner: Blue. (Inline always overrides internal and external).
Part 4 The CSS Box Model
Visualizing the Layers

Every HTML element is considered a rectangular box. Understanding the layers is key to layout design.

Content
Padding (Green)
Border (Blue) | Margin (Red Area)

Language Master Checklist:

  • I know that attributes are always found in the start tag.
  • I can identify empty elements (br, hr, img, source).
  • I understand the difference between head (meta) and body (visible).
  • I have memorized the CSS priority: Inline > Internal > External.
  • I can name the Box Model layers from innermost to outermost.

Next Step:

🚀 Take the Language Core Test