HTML Foundations

Lists, Links, and Images 📝🔗🖼️

CSCI ABDC - Web Programming

Week 3, Class 6

Building the backbone of the web! 🕸️

Today's Learning Objectives

📝 Master unordered and ordered lists
🔗 Create links to other pages and websites
🔒 Understand link security considerations
🧭 Navigate absolute vs relative paths
🖼️ Embed images in your pages
♿ Add accessibility with alt attributes

Quick Recap

Where we've been:

✅ HTML elements and tags
✅ HTML boilerplate structure
✅ Working with text

Where we're going:

Today: Lists, Links, and Images
Next: CSS Foundations begin!

Lists Are Everywhere! 📋

Real-world examples:

Navigation menus
Shopping carts
Social media feeds
Comment sections
Step-by-step instructions

HTML gives us two main types of lists...

Unordered Lists •

When order doesn't matter!

                <ul>

                  <li>Coffee</li>

                  <li>Tea</li>

                  <li>Milk</li>

                </ul>

Result:

Coffee
Tea
Milk

Ordered Lists 1️⃣

When sequence matters!

                <ol>

                  <li>Preheat oven to 350°F</li>

                  <li>Mix ingredients</li>

                  <li>Bake for 30 minutes</li>

                </ol>

Result:

Preheat oven to 350°F
Mix ingredients
Bake for 30 minutes

Nesting Lists 🪆

Lists can contain other lists!

                <ul>

                  <li>Frontend

                    <ul>

                      <li>HTML</li>

                      <li>CSS</li>

                      <li>JavaScript</li>

                    </ul>

                  </li>

                  <li>Backend</li>

                </ul>

Quick Practice: Lists ✏️

5-Minute Challenge

Create these lists in your one-page website:

An unordered list of your 3 favorite foods
An ordered list of your morning routine (3-4 steps)

Remember: <ul> for unordered, <ol> for ordered, <li> for each item!

Links: The Web's Superpower! 🔗

Why is it called the "web"?

Because pages link together like a spider's web!

Links connect:

Pages within your site
Your site to other websites
Content to downloads
Users to resources

The Anchor Element ⚓

Creating links with <a>

<a>Click me!</a>

Problem: This link doesn't go anywhere! 😕

We need the href attribute!

                <a href="https://google.com">Go to
                    Google</a>
            

Two Types of Links

🌍 Absolute Links

Full web addresses to external sites

https://www.google.com

Include protocol (https://)
Include domain name
Link to other websites

📁 Relative Links

Paths to files in your own site

                        about.html

                        pages/contact.html

No protocol or domain
Start from current location
Link within your site

Absolute Links in Action

                <a href="https://www.theodinproject.com">

                  Visit The Odin Project

                </a>

Anatomy of an absolute URL:

https://www.theodinproject.com/about

Protocol (https://)
Domain (www.theodinproject.com)
Path (/about)

Relative Links: Navigation Within Your Site

File Structure Example:

                📁 my-website/

                  📄 index.html

                  📄 about.html

                  📁 pages/

                    📄 contact.html

From index.html:

                <a href="about.html">About</a>

                <a href="pages/contact.html">Contact</a>

Navigating Directories 🧭

Special Path Symbols:

./ = Current directory (optional)
../ = Parent directory (go up one level)

                /* From pages/contact.html back to index.html */

                <a href="../index.html">Home</a>

                /* Same as just "about.html" */

                <a href="./about.html">About</a>

Opening Links in New Tabs 🗂️

                <a href="https://google.com" target="_blank">

                  Open in new tab

                </a>

⚠️ Security Risk!

New tab can access your page with JavaScript (tabnabbing attack)

The secure way:

                <a href="https://google.com"

                   target="_blank"

                   rel="noopener
                    noreferrer">

                  Safe external link

                </a>

Understanding rel Attributes 🔒

noopener

Prevents new page from accessing your page

Blocks window.opener
Prevents tabnabbing

noreferrer

Hides where the user came from

Privacy protection
Includes noopener behavior

Best Practice: Always use rel="noopener noreferrer" with target="_blank"

Practice: Creating Links 🔗

10-Minute Activity

Add to your one-page website:

A link to your favorite website (absolute, opens in new tab)
Create an about.html page and link to it (relative)
A navigation list with at least 3 links

Hint: Combine lists and links for navigation!

Adding Images to the Web 🖼️

A picture is worth a thousand words!

Images are used for:

Visual content and photos
Logos and branding
Icons and buttons
Diagrams and infographics
Background decoration

Let's learn the <img> element!

The Image Element 📸

Important: It's a void element!

No closing tag needed
No content inside
All info comes from attributes

Wrong: <img></img>
Right: <img>

Image src Attribute

Just like links, images can use absolute or relative paths!

                /* Absolute path (from another website) */

                <img src="https://picsum.photos/200">

                /* Relative path (from your project) */

                <img src="images/logo.png">

                /* Parent directory */

                <img src="../images/banner.jpg">

The Critical alt Attribute ♿

                <img 

                  src="dog.jpg"

                  alt="A golden retriever playing in the
                    park">

Why alt text matters:

🔍 SEO - Search engines read it
♿ Accessibility - Screen readers use it
🔌 Fallback - Shows when image fails to load
📱 Low bandwidth - Users can read before image loads

Best Practice: ALWAYS include descriptive alt text!

Setting Image Dimensions

                <img 

                  src="photo.jpg"

                  alt="Sunset over mountains"

                  width="600"

                  height="400">

Why specify dimensions?

Prevents layout shift while loading
Improves page performance
Better user experience

Note: Values are in pixels, no unit needed!

Common Image Formats

📷 JPEG/JPG

Best for photos
Good compression
No transparency

🎨 PNG

Supports transparency
Good for logos/graphics
Larger file sizes

✨ GIF

Supports animation
Limited colors (256)
Simple graphics

🎯 SVG

Vector graphics
Scalable without quality loss
Perfect for icons/logos

Image Best Practices ✨

Optimization Tips:

📐 Resize images to needed dimensions
🗜️ Compress images (TinyPNG, Squoosh)
📝 Use descriptive filenames
🎯 Choose the right format
⚖️ Balance quality vs file size

Pro Tip: Large images slow down your site! Aim for under 200KB per image.

Image Copyright ⚖️

Using Images Legally:

❌ Don't just grab any image from Google
✅ Use royalty-free image sites
✅ Check Creative Commons licenses
✅ Give attribution when required

Free Image Resources:

Unsplash.com
Pexels.com
Pixabay.com
Picsum.photos (for placeholders)

Bringing It All Together

Creating an image that's also a link!

                <a href="https://okcu.edu">

                  <img 

                    src="okcu-logo.png"

                    alt="Oklahoma City
                    University"

                    width="200"

                    height="100">

                </a>

This creates a clickable logo!

Homework Assignment 📚

Due: Before Next Class

Your Task:

Add a list of images that are links to your one-page website

Requirements:

Create an unordered list
Include at least 3 list items
Each item contains an image wrapped in a link
Images should have proper alt text
Links should go to relevant external sites

Example: A list of your favorite websites with their logos!

Final Practice Challenge 🏆

15-Minute Challenge

Create a simple photo gallery:

Create a new page called gallery.html
Add proper HTML boilerplate
Create an unordered list
Add 3 images (use picsum.photos for placeholders)
Make each image a link to a different website
Add a link back to your index.html

I'll walk around to help!

Today's Key Takeaways 🎯

Lists:

Use <ul> when order doesn't matter
Use <ol> when sequence is important
Always wrap items in <li>

Links:

Absolute for external sites, relative for internal
Always use security attributes for new tabs
Navigation lists are a common pattern

Images:

Always include alt text
Specify dimensions to prevent layout shift
Optimize for web performance

Questions? 🤔

Let's Review!

Common questions:

When to use absolute vs relative links?
What makes a good alt text?
How to organize images in your project?
Best practices for link security?

Next Class: We start CSS! Get ready to make things beautiful! 🎨