Foundations of Web Design

Class Exercise 2:

Creating a Web Page with Lists, Links, and Images

Goal:

Create a webpage with:
  • 1 ordered list
  • 1 nested unordered list
  • 2 links to other websites
  • 2 images

Instructions:

Download starter_code02.zip:

Create a New HTML File:

Basic HTML Structure:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Web Page with Lists, Links, and Images</title>
    </head>
    <body>
        <h1>Welcome to My Web Page</h1>
    
        <h2>Ordered List</h2>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    
        <h2>Nested Unordered List</h2>
        <ul>
            <li>Item 1
                <ul>
                    <li>Subitem 1.1</li>
                    <li>Subitem 1.2</li>
                </ul>
            </li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    
        <h2>Links to Other Websites</h2>
        <p>Here are two useful links:</p>
        <ul>
            <li><a href="https://www.example.com" target="_blank">Example Website</a></li>
            <li><a href="https://www.anotherexample.com" target="_blank">Another Example Website</a></li>
        </ul>
    
        <h2>Images</h2>
        <p>Here are two images:</p>
        <img src="https://via.placeholder.com/150" alt="Placeholder Image 1" />
        <img src="https://via.placeholder.com/150" alt="Placeholder Image 2" />
    
    </body>
    </html>

Viewing Your Web Page:

  1. Run Your Project with Live Server:
    • Right-click on your “CE02.html” file and select “Open with Live Server”.
    • This will open your web page in your default browser.
    • You should now see your web page with an ordered list, a nested unordered list, two links to other websites, and two images.
  2. Run Your Project with Live Preview:
    • Right-click on your “CE02.html” file and select “Show Preview”.
    • This will open your web page in a tab in VS Code next to your HTML file.