Lists, Links & Images - Guided Notes

📝 HTML Lists

Two Types of Lists

1. Unordered Lists use the _________________ element

• Used when _________________ doesn't matter

• Display with _________________ points by default

2. Ordered Lists use the _________________ element

• Used when _________________ is important

• Display with _________________ by default

Both types use _________________ elements for individual list items.

List Code Structure

<!-- Unordered List -->
<_____>
    <_____>First item</_____>
    <_____>Second item</_____>
</_____>

<!-- Ordered List -->
<_____>
    <_____>Step 1</_____>
    <_____>Step 2</_____>
</_____>
        

Practice: Create a shopping list (unordered) with 3 items:

1. _________________________________
2. _________________________________
3. _________________________________

🔗 HTML Links

The Anchor Element

Links are created using the _________________ element

The destination is specified with the _________________ attribute

<_____ _____="https://example.com">
    Link text
</_____>
        

Absolute vs Relative Links

Type	Format	Use Case	Example
Absolute	_________________	_________________	https://google.com
Relative	_________________	_________________	about.html

Directory Navigation

• Current directory: _________________ (optional)

• Parent directory: _________________

• Example from subfolder: _________________/index.html

Opening Links in New Tab

Use the _________________ attribute with value _________________

⚠️ Security Alert: Always add _________________ attribute with value _________________ when opening links in new tabs!

<a href="https://example.com" 
   _________________="_________________"
   _________________="_________________">
    Safe external link
</a>
        

Security Attributes Explained

noopener: _________________________________________

noreferrer: _________________________________________

🖼️ HTML Images

The Image Element

Images use the _________________ element

This is a _________________ element (no closing tag needed)

Essential Image Attributes

Attribute	Purpose	Required?
src	_________________________________________	Yes
alt	_________________________________________	Yes*
width	_________________________________________	Recommended
height	_________________________________________	Recommended

*Always include for accessibility!

Complete Image Code

<_____ 
    _____="photo.jpg"
    _____="Description of image"
    _____="600"
    _____="400">
        

Why Alt Text Matters

SEO: _________________________________________
Accessibility: _________________________________________
Fallback: _________________________________________

Image Formats

Format	Best For	Key Feature
JPEG/JPG	_________________	Good compression
PNG	_________________	Supports transparency
GIF	_________________	Supports animation
SVG	_________________	Scalable vector graphics

💡 Pro Tip: Keep images under _____KB for optimal performance!

🎯 Combining Concepts

Making an Image a Link

Complete the code to create a clickable logo:

<_____ _____="https://okcu.edu">
    <_____ 
        _____="okcu-logo.png"
        _____="Oklahoma City University"
        width="200"
        height="100">
</_____>
        

Navigation List with Links

Complete this navigation menu structure:

<_____>
    <_____><a href="index.html">Home</a></_____>
    <_____><a href="about.html">About</a></_____>
    <_____><a href="contact.html">Contact</a></_____>
</_____>
        

✏️ Practice Problems

1. Write the HTML for an unordered list of your 3 favorite websites:

2. Create a link to Google that opens in a new tab (include security attributes):

3. Write the complete code for an image of a cat with all recommended attributes:

4. What's wrong with this code? Fix it:

<a href="https://example.com" target="_blank">Visit Example</a>

Problem: _________________________________________

Fixed code:

🔑 Key Concepts to Remember

Lists

Use _____ for unordered lists (when order doesn't matter)
Use _____ for ordered lists (when sequence is important)
Always wrap list items in _____ tags

Links

Absolute links include: _________________________________________
Relative links are for: _________________________________________
Security for new tabs: Always use _________________

Images

Images are _________________ elements (no closing tag)
Alt text is crucial for: _________________________________________
Specify dimensions to: _________________________________________

📚 Homework Assignment

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

Requirements Checklist:

☐ Create an unordered list
☐ Include at least 3 list items
☐ Each item contains an image wrapped in a link
☐ All images have proper alt text
☐ Links go to relevant external sites
☐ Use security attributes for external links

Planning Your List:

Website 1: _________________________________________

Image description: _________________________________________

Website 2: _________________________________________

Image description: _________________________________________

Website 3: _________________________________________

Image description: _________________________________________

📝 Additional Notes

Use this space for any additional notes during the lecture:

⚡ Quick Reference

Common File Paths

Path	Meaning
image.jpg	Same folder as current file
images/photo.jpg	In 'images' subfolder
../image.jpg	In parent folder
../../images/pic.jpg	Up two levels, then into 'images'

VS Code Shortcuts

ul>li*3 + Tab = Creates unordered list with 3 items
ol>li*5 + Tab = Creates ordered list with 5 items
img + Tab = Creates image element with attributes
a + Tab = Creates anchor element