In this lesson we’ll talk about two things

  1. Something very boring, but important: whitespace
  2. Something hopefully fun, pictures!

Permalink Whitespace

When writing a paper using a pencil or pen, whitespace is a key aspect of formatting. When you start to learn how to write papers using a computer, the concept of layout really changes. Some aspects get easier, but other aspects become more difficult (for example it can be harder to make it look the way you want it to look).

When it comes to the web, HTML is the main presentation markup language, and it’s primarily designed for computer consumption, not human consumption. This means that you don’t control layout via spacing, like you would with a pencil on paper.

Is whitespace then used in HTML? The answer is yes. While HTML is intended for computers to read, it’s often written by humans, and humans need more help to be able to understand it. That’s where whitespace comes in.

Permalink How does a browser handle whitespace

For this section, start by reading through the reference

🛑 Stop when you get to the section on how css processes whitespace

Permalink Practice!

The reference covers this, but what do you think it would look like for the body to have the following HTML:

1
2
3
4
5
Types of animals:

Cat
Dog
Horse

What do you think it would look like? Try it, and find out!

Permalink Indentation

So we now that browsers largely ignore whitespace, but humans really benefit from it when used correctly. For example, below are two examples of a defective html list. It’s defective because one of the list elements is missing it’s closing tag. In which of the two examples that follow, is this defect easier to see?

Permalink Without whitespace

1
<ol><li>Cat</li><li>Dog<li>Horse</li></ol>

Permalink With whitespace

1
2
3
4
5
<ol>
    <li>Cat</li>
    <li>Dog
    <li>Horse</li>
</ol>

Bonus:

  • What happens if a browser renders broken HTML like that?
  • Hint: They try very hard to fix our mistakes, but can’t always do that

Permalink Images

Pictures are much more fun than whitespace. So how to pictures work on a webpage? Read through the reference on how to use images. Be sure to note the following things:

  1. The img tag
  2. The src attribute
  3. The alt attribute

Permalink Examples

Here are a couple example images you can play with (are legally safe to use, but use one of them at your own risk ;)

Permalink Completion

See if you can make a new paged called www/images.html that look like this

link

Bonus:

  • Images come in different sizes, is there a way to influence the size?
  • Observe that there are different image formats, png, jpg, gif, etc

Reference for more information