1 of 23

HTML and CSS

...for Kids!

April 24, 2020

​

2 of 23

Our goal for today:

  • Add two types of lists to our web page�
  • Add a <title> to the <head> of our page

3 of 23

Lists are

important.

Especially when you’re

stuck at home.

4 of 23

[ ] Walk the dog

[ ] Pamper the cat

[ ] Study French

[ ] Practice HTML

[ ] Call Grandma

[ ] Math Homework

5 of 23

HTML lists

In HTML, we have two

types of lists:

6 of 23

HTML lists

In HTML, we have two

types of lists:

​

ordered and unordered.

7 of 23

Ordered lists

Ordered lists have numbers.

8 of 23

Ordered lists

Ordered lists have numbers.

Five great songs:

  1. Joe Perry Project, “Black Velvet Pants”
  2. Dolly Parton, “Jolene”
  3. Lil Nas X, “Old Town Road”
  4. Blue Swede, “Hooked On A Feeling”
  5. Donna Summer, “MacArthur Park”

9 of 23

Ordered lists

The HTML tag for an ordered list is <ol>.

10 of 23

Ordered lists

The HTML tag for an ordered list is <ol>.

​

Each item in your list is called a list item,

and gets an HTML tag called <li>.

11 of 23

<p>Five great songs:</p>

<ol>

<li>Joe Perry Project, “Black

Velvet Pants”</li>

<li>Dolly Parton, “Jolene”</li>

<li>Lil Nas X, “Old Town Road”</li>

<li>Blue Swede, “Hooked On A Feeling”</li>

<li>Donna Summer, “MacArthur Park”</li>

</ol>

(the ordered list

ends here.)

(I don’t have

to type the

numbers 1-5.

​

They’ll show up

automatically.)

12 of 23

Unordered lists

Unordered lists have bullets.

13 of 23

Unordered lists

Unordered lists have bullets.

To buy at the grocery store:

  • Beans
  • Tortillas
  • Avocados
  • Cheese
  • El Pato Jalapeño Sauce

14 of 23

Unordered lists

The HTML tag for an unordered list is <ul>.

​

Each list item still gets an <li>.

15 of 23

<p>To buy at the grocery store:</p>

<ul>

<li>Beans</li>

<li>Tortillas</li>

<li>Avocados</li>

<li>Cheese</li>

<li>El Pato Jalapeño Sauce</li>

</ul>

(Bullets! Not

numbers)

(the list items look the same.)

16 of 23

Let’s make

some lists!

17 of 23

Now, you might

be wondering…

​

What goes in the <head> of our page?

​

18 of 23

<head>

​

Unlike the <body>, which is

your page content,

19 of 23

<head>

​

Unlike the <body>, which is

your page content,

​

The <head> provides info

for your browser.

20 of 23

How do we know what

tabs we have open?

21 of 23

How do we know what

tabs we have open?

​

​

​

Because every page has a <title>,

and the <title> goes in the <head>.

22 of 23

<!doctype html>

<html>

<head>

​

</head>

<body>

<ul>

<li>Dog</li>

<li>Cat</li>

<li>Unicorn</li>

</ul>

</body>

</html>

no <title>

(what’s this page about?)

23 of 23

<!doctype html>

<html>

<head>

<title>Animals!</title>

</head>

<body>

<ul>

<li>Dog</li>

<li>Cat</li>

<li>Unicorn</li>

</ul>

</body>

</html>

<title>

(it’s about

animals!)