1 of 9

UNIT 01

Introduction to�Web Design </>

Building Your First HTML Pages & Text Styles

2 of 9

Design My Info Page()

Task 01

Create HTML Page

Build a clean, well-structured HTML information page to showcase personal topics, hobbies, or interests.

Task 02

Apply Text Styles

Organize and emphasize your content beautifully using proper headings, clean paragraphs, and text styles.

index.html

<!-- Code Structure Example -->

<h1>My Awesome Page</h1>

<h2>About Me</h2>

<p>

Welcome to my digital space!

HTML coding is <b>super fun</b>.

</p>

3 of 9

What is HTML Formatting?

layers

Organize Content

Arranges and structures web page content logically so that browsers can render it correctly.

chrome_reader_mode

Improve Readability

Makes text blocks highly scannable and easier for users to digest and process.

auto_awesome

Enhance Style

Applies clear visual hierarchies and formats to highlight essential learning concepts beautifully.

4 of 9

HTML Headings()

text_fields

Structure & Hierarchy

Headings are used to organize content into sections, creating a visual and logical skeleton for your web pages.

  • Six Levels: Ranges from <h1> (most important) down to <h6> (least important).
  • SEO Impact: Search engines use them to understand slide structure and page topics.
  • Readability: Helps readers skim through sections quickly and efficiently.

headings.html

<!-- Main Document Title -->

<h1>HTML Headings</h1>

<!-- Major Sub-section -->

<h2>1. Introduction</h2>

<p>Headings organize text.</p>

<h2>2. Key Benefits</h2>

<p>They improve SEO.</p>

5 of 9

HTML Paragraphs<p>

subject

Structure & Text Flow

Paragraphs are the fundamental building blocks of web content, used to organize and display clean blocks of body text.

  • Block-Level: Automatically starts on a new line with clean margin spacing added by the browser.
  • Readability: Helps high school learners group related ideas and present textbook text clearly.

paragraph.html

<!-- Defining a paragraph -->

<p>This is a paragraph.</p>

<!-- Browsers separate lines -->

<p>Used to present text clearly.</p>

6 of 9

Text Formatting<b>

format_bold

Emphasis & Style

Formatting tags allow you to emphasize important words or phrases, making your web content more readable and visually engaging.

  • Bold Text: Use <b> to make text stand out and draw attention.
  • Italic Text: Use <i> to emphasize words or indicate titles.

formatting.html

<!-- Emphasize text -->

<p>This is <b>bold</b> text.</p>

<!-- Make it italic -->

<p>This is <i>italic</i> text.</p>

7 of 9

Why Formatting Matters <style>

visibility

Readability

Makes content easy to read. Clean layouts allow high school learners to quickly scan, digest, and understand the core ideas without getting overwhelmed.

auto_awesome

Presentation

Improves presentation. A well-designed slide or web page instantly builds interest and makes your digital projects look professional and modern.

schema

Organization

Organizes information. Grouping thoughts logically helps break down complex concepts into bite-sized, structured sections that are easier to remember.

8 of 9

Activity Instructions <html>

assignment

HTML Info Page Project

Create a clean, structured informational web page about the Human Nervous System using basic HTML.

• Anatomy of Page: Use headings for sections and paragraphs to explain key concepts.

• Formatting: Highlight key terms (like neurons, brain, spinal cord) using <b> or <i>.

• Goal: Practice proper tag closing and structure.

workflow.html

<!-- STEP-BY-STEP WORKFLOW -->

1. WRITE THE MARKUP�<h1>Nervous System</h1>�<p>The <b>brain</b> controls...</p>

2. SAVE FILE�Save your progress as:�nervous_system.html

3. RUN IN BROWSER�Double-click file to preview and verify your styles!

9 of 9

Key Takeaway <review>

vpn_key

The Golden Rule

Good formatting makes web pages clear and effective