Lesson 2C - Whitespace

Open a new file using the eight required tags from the last lesson. Give it the name 'sample.htm'. You will use this file throughout this course, and you can retain it for reference once the course is complete. Save it with your other practice files (in your Development directory). Note that as you make changes to this file, you must save the file and refresh the browser for the changes to appear. A shortcut to saying all this is "save and refresh".

Browsers ignore "whitespace" in the HTML file itself. To see what we mean, open your 'sample.htm' file you just made. Between the <body> and </body> tags, type the following as shown, including the carriage returns and tabs (hint-you can cut & paste from below):

One
    two
        three
            four
                five.

Save and refresh the file. Does something look wrong? It probably looks like this:

One two three four five.

Carriage returns, tabs, extra spaces between words are all considered "whitespace" to a browser. Unless you command to start a new line, or tab, or add extra spaces between words, the browser will not supply them. The browser just sees one long line of text. Here are the basic tags you need to format whitespace in your text.

<br> adds a line break. There is no ending tag (</br>). Try it.

<p> and </p> creates a new paragraph, which adds a line break before and after all text between the tags. Try it.

<pre> and </pre> preformats text between the tags. In other words, the text will appear exactly as you type it. (Note that tab spaces in your file might not appear the same as tab spaces on the screen when using pre tags.) Font is changed to monospace and a line break is added before and after the included text. Try it.

&nbsp; adds a non-break space. There are many uses for this special character. Note, this is not a command, it is a special character. More on that in Lesson 23.

Let's practice. Open your file again and place preformat tags around the words you just typed, thus:

<pre>One
    two
        three
             four
                 five.</pre>

When you save and refresh, it looks like you expected. Now, type some text, then add a <br> and add some more text. For example:

<pre>One
    two
        three
             four
                 five.</pre>Now to add another line.<br>And yet another.

Save and refresh. Each of the new lines you added appear as a new line on the web page. (Since the preformat command creates a block of text, it automatically adds a line break after it.)

Type paragraph tags around some text then save and refresh. Do it a couple of times. For example:

<pre>One
    two
        three
             four
                 five.</pre>Now to add another line.<br>And yet another.
<p>Type a little extra text to be sure you get at least two lines of writing to show on the web page. This will let you see how paragraph commands block text, and it will allow you to try something later.</p>
<p>This text does not have to be so long.</p>

Add a line break tag after the first sentence within the paragraph, like so:

<pre>One
    two
        three
             four
                 five.</pre>Now to add another line.<br>And yet another.
<p>Type a little extra text to be sure you get at least two lines of writing to show on the web page.
<br>
This will let you see how paragraph commands block text, and it will allow you to try something later.</p>
<p>This text does not have to be so long.</p>

By now, when you save and refresh, it should look something like this:

One
   two
      three
         four
            five.
Now to add another line.
And yet another.

Type a little extra text to be sure you get at least two lines of writing to show on the web page.
This will let you see how paragraph commands block text, and it will allow you to try something later.

This text does not have to be so long.

Lastly, type five words with varying amounts of spaces between the words, like so:

One  two       three   four                         five.

Save and refresh. Your browser shows only one space between words. Now replace each empty space with &nbsp; and see what happens.


In this lesson, we learned about these tags:
<br>
<p> and </p>
<pre> and </pre>
and this special character:
&nbsp;
By now, your sample.htm file should look like this.
For more practice on whitespace, go here and go here.

Lesson 2B HTML Tags   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 3A Depricated Inline Tags

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 3,980 different visits in the last 30 days.
435,455 hits on this domain since 24 Nov 2006.
http://sandersongs.com/HTMLcourse/Lesson02C.php
This page was last modified on our server on 25 Sep 2013
and last refreshed on our server at 12:29 pm, MST
This file took 0.01025 seconds to process.