Intermediate
HTML
Lesson 4
List Element
Ordered and Unordered List
Now, if you've spent any time around on the Internet
recently, you'll notice that it's completely full of lists.
If you go on to BuzzFeed or any of these sort of
clickbaity articles, usually they'll create a list of
something such as great items that must have been
invented by geniuses.
So how do we create these
lists ourselves?
Unordered List
<ul> </ul>
Add some content in between the open and closing tags. Now in this case, however, it's a little
bit different.
Unordered List
<ul> They actually go on separate lines because
in between these two open and closing
<li>Milk </li>
tags, we need an extra type of tag in order
<li> Eggs</li> to complete this unordered list.
<li> Flour </li>
</ul> And these are called list items.
Practice: How to cook and recipe with
Unordered List. example: Recipe of
Fried Chicken
Ordered List + List Items
what this will do is it will give you
<ol>
numbers.
<li>Milk </li>
<li> Eggs</li> So it would start from one and the number
<li> Flour </li> next to each list item will depend on the
order that you put
</ol>
into this ordered list element.
Practice:
1. Make something with Ordered List.
2. Combine Ordered list and
unordered list in your code.
Nesting and
Identation
Lesson 4
Challenge 1: Nesting and Indentation
Make a routine after you wake up using list indentation.
Anchor Elements
Lesson 4
Anchor Elements
<a href=”www.google.com”> This is a link </a>
We've got the opening tag and the closing tag, but there's something a little bit special about this one
because right now if you wrote the code as it is here, this is not an active hyperlink.
What you need is to add an additional attribute, and the attribute for an HTML element goes in the
opening tag.
It goes into the part just after the name of the tag and just before the end of the opening tag where
we have the closing angle bracket. And what an attribute does is it adds additional information to this
HTML element, such as in this case where this link should link to.
<tag attribute=value> Content</tag>
Now, the way that we structure an attribute looks something like this.
Anchor Elements
<a draggable=True> This is a link to Google</a>
You can apply a global attribute to any given element. So in this case, we can apply it even
to our anchor element
Practice: Anchor and list
List your favourite movies/anime and add link to it.
The Image Elements
Lesson 4
It's pretty simple. And you'll notice that similar to the anchor tag or the anchor element that we
learned about in the last lesson, the main component of an image tag that renders the image is this
attribute, which is called source or SRC.
img Elements
<img src=”picsum/photos/200" />
Here's an example image element where we've set the source to a real life live photo on the Internet.
Now, when this code is rendered in a website, it will display a random image.
Alt attribute
<img src=”picsum/photos/200" alt = “forest at sunset” />
Alt attribute stands for Alternative Text Description. This is really important because
people who are blind or visually impaired, they don't look at the Internet the same way we
do.
They often use something called a screen reader. And what the screen reader is going to
do when it hits an image is it will look at the alternative text provided.
Practice: Dog or Cat Person?
Create h1 and “I am a Dog Person”
then img of your dogs.
