Wk 2

Intermediate HTML

1. Lists in HTML
- Ordered List (<ol>): A list where the items are numbered, like a recipe’s steps.
- Unordered List (<ul>): A list where the items are bullet points, like a shopping list.
- Description List (<dl>): A list where each item has a name and description, like a dictionary.
2. Nesting and Indentation
- Nesting: Putting one element inside another. For example, a list item (<li>) inside an ordered list (<ol>).
- Indentation: Moving the code to the right when something is nested, making it easier to see what’s inside what. It’s like organizing your notes by indenting bullet points under a main point.
3. The Anchor Element (<a>):
- This tag is used to create links to other pages or parts of a page. For example, <a href="https://example.com">Click here</a> will take you to another webpage when clicked.
4. The Image Element (<img>):
- The <img> tag is used to add images to a webpage. It doesn’t need a closing tag, so it’s self-contained.
- The alt attribute is important because it gives a text description of the image, which helps people who can’t see the image.

Simplified Explanation with Examples

Let’s break it down with an example of creating a simple recipe page:

Ordered List
Suppose you're listing the steps to bake a cake:

html

<ol>
	<li>Preheat the oven to 350°F.</li>
	<li>Mix the dry ingredients.</li>
	<li>Combine wet ingredients with the dry mixture.</li> 	
	<li>Bake for 30 minutes.</li>
</ol>

This is an ordered list because the steps must be followed in order.

Unordered List
If you were listing the ingredients, which don’t need a specific order:
```
html

<ul>
	<li>2 cups of flour</li>
	<li>1 cup of sugar</li>
	<li>2 eggs</li>
	<li>1/2 cup of milk</li>
</ul>
```
This is an unordered list because the order of ingredients doesn’t matter.
Nesting and Indentation
Suppose you want to group some steps under a larger step:
```
html

<ol> 
	<li>Prepare the batter 
		<ul> 
			<li>Mix the dry ingredients</li> 
			<li>Add wet ingredients</li>
		</ul>
	</li>
	<li>Bake the cake</li>
</ol>
```
Notice how the nested list (steps within "Prepare the batter") is indented to show it’s part of the first step. This makes the code easier to read and understand.
Anchor Element
If you want to link to a full recipe online:
```
html

<a href="https://example.com/full-recipe" target="_blank">Click here for the full recipe</a>
```
This link opens in a new tab (target="_blank").
Image Element To add a picture of the cake:
```
html

<img src="cake.jpg" alt="A delicious chocolate cake" />
```
The alt attribute helps describe the image, so even if it doesn’t load, or for users with visual impairments, they’ll know what the image represents.

Key Takeaways

Lists: Use ordered lists for sequences and unordered lists for items that don't need a specific order.
Nesting: Make sure HTML elements are properly nested and indented to keep your code clean and error-free.
Anchor (<a>): Use it to create links, and remember to add the href attribute to specify the destination.
Image (<img>): Use it to embed images, and always include the alt attribute for accessibility.