🧠 Module 3

Working with Text, Links, and Images

Objective: Learn how to add formatted text, hyperlinks, and images to your web pages while keeping your code clean and semantic.

🧩 1. Understanding Inline vs. Block Elements

Type	Example Tags	Behavior
Block-level	`<div>`, `<p>`, `<h1>–<h6>`, `<section>`	Start on a new line; take full width.
Inline	`<a>`, `<span>`, `<img>`, `<strong>`	Flow within text; do not start new lines.

Example

<p>This is a <strong>strong</strong> word inside a paragraph.</p>

🧱 2. Headings and Paragraphs

<h1>Main Page Title</h1>
<h2>Section Title</h2>
<p>This is a paragraph of text that describes something important.</p>

Rules

Use one <h1> per page (main title).
Use lower levels <h2>–<h6> for subsections.
Don’t skip heading levels for SEO and accessibility.

✍️ 3. Text Formatting Tags

Tag	Function
`<b>`	Bold text (visual only)
`<strong>`	Important text (semantic bold)
`<i>`	Italic text (visual only)
`<em>`	Emphasized text (semantic italic)
`<u>`	Underline text
`<mark>`	Highlight text
`<small>`	Smaller text
`<br>`	Line break
`<hr>`	Horizontal rule (divider)

Example

<p>I am learning <strong>HTML</strong> and <em>CSS</em> at <mark>StreetGeek Academy</mark>.</p>

🔗 4. Adding Links (<a>)

<a href="https://www.streetgeek.academy">Visit StreetGeek Academy</a>

Type	Example
External	`<a href="https://example.com">Visit Site</a>`
Internal	`<a href="about.html">About Us</a>`
Email	`<a href="mailto:info@streetgeek.academy">Email Us</a>`
Telephone	`<a href="tel:+18005551234">Call Us</a>`
Anchor (jump link)	`<a href="#contact">Go to Contact</a>`

Tip: Open in a new tab + hover text

<a href="https://sitesbyyogi.com" target="_blank" title="Yogi’s Portfolio">SitesByYogi</a>

🖼️ 5. Adding Images (<img>)

Images are inline elements — they sit inside your content.

<img src="streetgeek-logo.png" alt="StreetGeek Academy Logo" width="200" height="200">

Attributes

Attribute	Description
`src`	Path to the image file
`alt`	Description (accessibility & SEO)
`width / height`	Optional dimensions
`title`	Tooltip on hover

Image Paths

Relative: images/photo.jpg
Absolute: https://example.com/photo.jpg

💡 Always use meaningful alt text.

🌆 6. Image Folder Organization

html-basics/
├── index.html
├── about.html
├── contact.html
└── images/
    ├── profile.jpg
    ├── logo.png
    └── banner.jpg

Use lowercase names and hyphens. ✅ profile-photo.jpg not Profile Photo.JPG

🧩 7. Lists: Organizing Text Content

Unordered List

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

Ordered List

<ol>
  <li>Plan</li>
  <li>Code</li>
  <li>Deploy</li>
</ol>

Description List

<dl>
  <dt>HTML</dt>
  <dd>Defines the structure of a webpage.</dd>
</dl>

Lists are perfect for nav menus, product features, or FAQs.

🎨 8. Combining Text, Links, and Images

<section>
  <h2>About Me</h2>
  <img src="images/profile.jpg" alt="Yogi’s Photo" width="150">
  <p>Hi, I’m Yogi, a <strong>WordPress Developer</strong> and <em>performance specialist</em>.</p>
  <p>Follow my work at 
     <a href="https://sitesbyyogi.com" target="_blank">WPNfinite</a>.
  </p>
</section>

💻 9. Hands-On Practice

✅ Exercise 1: Create a “Profile Page”

Create profile.html in your html-basics folder.
Add a heading (<h1>), a short bio paragraph, a photo (<img>), a list of 3 hobbies or tools, and an external link.

Example

<h1>About Yogi</h1>
<img src="images/yogi.jpg" alt="Photo of Yogi" width="200">
<p>I'm a WordPress developer learning front-end web design.</p>
<ul>
  <li>Web Design</li>
  <li>Music Production</li>
  <li>Teaching</li>
</ul>
<a href="https://sitesbyyogi.com" target="_blank">Visit My Site</a>

🧠 10. Accessibility and Best Practices

Use alt text for every image.
Avoid “click here” — make link text descriptive.
Organize your content with headings and lists.
Keep filenames lowercase and hyphenated.
Validate your HTML at validator.w3.org.

🧪 Quiz Time

What’s the difference between <b> and <strong>?
What attribute makes a link open in a new tab?
Why is the alt attribute important for images?
Which list type displays items with numbers?
What does the <a> tag stand for and what is it used for?

🚀 Challenge Task

Create a “Personal Bio Page” with headings, a paragraph, an image, a list of hobbies/skills, and two links (one internal, one external).
Include at least one <em> or <strong> tag.
Bonus: Add a <hr> to separate sections and a <mark> to highlight a keyword.

🏁 Module 3 Summary

The difference between block and inline elements
How to format text semantically
How to add links and images
How to use lists effectively
Accessibility best practices for web content

Next up: 👉 MODULE 4: Lists, Tables, and Semantic HTML — organize structured data like a pro.