HTML 4.01 Tutorial : Tinkering

Tinkering

Let's make a few alterations to our "Simple Webpage" from the Diving In section.

Adding Text

Adding Text (`source`)

<html>
<head>
  <title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage. 
And I mean really simple.
</body>
</html>

To view this alteration:

Add the text in bold to your simple.html file.
Save the file as adding.html.
Open the adding.html file in your browser.

Adding Text (Results)

This is a simple webpage. And I mean really simple.

HTML and Whitespace

What happened here? Why are the two sentences on the same line?

HTML ignores whitespace (spaces, tabs, or carriage returns) in the source. It replaces all continuous chunks of whitespace with a single space: " ".

The advantage is that you can use whitespace to make your code more readable, while the browser can freely adjust line breaks for each user's window and font size.
The disadvantage is that it might take you a while to get used to this behavior.

Of course, there are tags that adjust the whitespace. We'll talk about those later.

The example below, "Scattered Text", has the same result as the previous example. Try it out.

Scattered Text (`source`)

This is a 
                simple webpage.        
                                        And I 
                                                mean 
                                really simple.

Making Text Bold

Change the text of adding.html to the following:

Bold Text (`source`)

This is a simple webpage. 
And I mean <b>really</b> simple.

Save your changes and view the file in your browser.

Bold Text (Results)

This is a simple webpage. And I mean really simple.

As you can see, the text becomes bold, starting at the <b> and ending at the </b>. This is our first example of a physical style tag -- a tag that directly controls the physical appearance of the text.

Changing the Background Color

Let's do something a little more dramatic:

Background Color (`source`)

<html>
<head>
  <title>A Simple Webpage</title>
</head>
<body style="background-color: yellow">
This is a simple webpage. 
And I mean <b>really</b> simple.
</body>
</html>

Background Color (Results)

This is a simple webpage. And I mean really simple.

A bit garish... but things could be worse. Try "red", for example.

This is our first example of an attribute. We'll discuss attributes at some length in the next section, Tag Properties. For now, attributes modify the behavior of a tag. For some tags, like the <body> tag, attributes are optional. For other tags, attributes are essential.

Try some other color words: "blue", "teal", "limegreen", "papayawhip"... What works? What doesn't? (Feel free to skip ahead to the Colors section if you're interested.)

Next: Tags

Table of Contents