Table of Contents
In this lesson we’ll talk about two things
- Something very boring, but important: whitespace
- Something hopefully fun, pictures!
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.
For this section, start by reading through the reference
🛑 Stop when you get to the section on how css processes whitespace
The reference covers this, but what do you think it would look like for the
to have the following HTML:
What do you think it would look like? Try it, and find out!
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?
- 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
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:
Here are a couple example images you can play with (are legally safe to use, but use one of them at your own risk ;)
See if you can make a new paged called
www/images.html that look like this
- Images come in different sizes, is there a way to influence the size?
- Observe that there are different image formats, png, jpg, gif, etc