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:
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.
<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.
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:
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:
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:
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:
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 and see what happens.
- In this lesson, we learned about these tags:
- <br>
- <p> and </p>
- <pre> and </pre>
- and this special character:
-
For more practice on whitespace, go here and go here.
