Day 3: Connecting the Web

The Web is a web because of Links. Without them, we just have isolated documents.

Anchors (a)

The <a> tag defines a hyperlink.

• href: The destination URL (Hypertext Reference).
• target: Where to open the link.

<!-- Link to an external site -->
<a href="https://google.com">Go to Google</a>

<!-- Open in new tab -->
<a href="https://google.com" target="_blank">Open Google in new tab</a>

<!-- Link to another page in your site -->
<a href="about.html">About Us</a>

Absolute vs. Relative URLs

• Absolute: Full address. https://mysite.com/images/cat.jpg (Use for external links using https).
• Relative: Path from here. images/cat.jpg (Use for internal links).

Lists

There are two main types of lists in HTML.

1. Unordered List (ul)

Bulleted list. Use when order doesn’t matter (e.g., shopping list).

<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
</ul>

2. Ordered List (ol)

Numbered list. Use when sequence matters (e.g., recipe steps, ranking).

<ol>
    <li>Preheat oven.</li>
    <li>Mix ingredients.</li>
    <li>Bake for 30 mins.</li>
</ol>

Nesting Lists

You can put a list inside another list item.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Homework for Day 3:

1. Create a “My Recipes” page.
2. Link to it from your homepage (index.html).
3. Create an unordered list of ingredients.
4. Create an ordered list of instructions.

Day 4: A picture is worth a thousand words. Images and Media!