So, we just listed all of those really cool things we want to do above! How would we actually write a list of things we like on our about me pages? How about a list?
Unordered Lists:
Unordered Lists are bulleted lists. This is where we will introduce the concept of an attribute (don’t worry, we’ll go into a lot more detail later). Attributes let us futher customize our code!
Take a look at this default unordered list:
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Welcome to my site! </h1>
<hr />
<ul>
<li>I really like to write code</li>
<li>I also really like to take pictures of bugs</li>
<li>It would be super neat if I could make a photo blog for all of my bug pictures !</li>
<li>Maybe once we learn how to include images into our site we can start posting bug pictures?</li>
</ul>
</body>
</html>
By using attributes, we can start changing things up in our lists (we’ll go into how attributes work in detail after this section!):
Check out how these attributes change the list:
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Welcome to my site! </h1>
<hr />
<ul>
<li type='square'>I really like to write code</li>
<li type='square'>Does that make me a square?</li>
<li type='square'>Some people do call me a block head...</li>
<li type='square'>Maybe they're just not seeing me at the right ANGLE?</li>
</ul>
</body>
</html>
We can do what we did above, but, that’s a lot of work to write type='square' on each single list item <li>. What we can do instead, is write it on top, at the unordered list <ul> level, and the type='square' will fall through down to the list items. Check out how much easier that was to write:
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Welcome to my site! </h1>
<hr />
<ul type='square'>
<li>I really like to write code</li>
<li>Does that make me a square?</li>
<li>Some people do call me a block head...</li>
<li>Maybe they're just not seeing me at the right ANGLE?</li>
</ul>
</body>
</html>
The types we can use for unordered lists are:
<ul type='square'></ul> <!-- blocks -->
<ul type='disc'></ul> <!-- bullets -->
<ul type='circle'></ul> <!-- empty circles -->
Ordered Lists:
Ordered lists are just like unordered lists, but, well, they’re ordered! They’re numbered/lettered in some way that gives order to the list! EXCITING! They work in the exact same way of unordered lists, but instead of using the unordered list <ul> we use the ordered list <ol>. Check it out:
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Welcome to my site for counting!! </h1>
<hr />
<ol>
<li> I love counting! </li>
<li> Math is super neat!</li>
<li> Did you know that accountants count things for a living!? </li>
<li> Actuarily, we should account for all mathematically focused jobs!</li>
</ol>
</body>
</html>
Just like unordered lists, we can use attributes to change how we’re listing things:
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Welcome to my site for counting!! </h1>
<hr />
<ol type='I'>
<li> love counting! </li>
<li> Roman numerals are super weird!</li>
<li> Did you know romans didn't have a number for zero?!? </li>
<li> In fact, the Greeks didn't either!! Weird huh??</li>
</ol>
</body>
</html>
Here are the types of ordered lists we can use!
<ol type='1'></ol> Numbers!
<ol type='a'></ol> Lowercase letters!
<ol type='A'></ol> Uppercase letters!
<ol type='i'></ol> Lowercase roman numerals!
<ol type='I'></ol> Uppercase roman numerals!