Lesson 05: Whitespace and images

In this lesson we’ll talk about two things

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

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.

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

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!

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?

Without whitespace

1

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

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

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

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 ;)

• https://rockfloat.com/pictures/egg.png
• https://rockfloat.com/pictures/coal.png
• https://rockfloat.com/pictures/bella_small.jpg
• https://rockfloat.com/pictures/fart.gif

Completion

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

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