Let us add the text parts of the bar graph
page between the <BODY> and </BODY>
tags in the homepage source file.
Filename: age_range_bar_graph.html
<HTML>
<HEAD>
</HEAD>
<BODY>
Online Learning Applications
The age range information of AIP4 students:
Under 10 0.0% 0
Under 20 0.0% 0
Under 30 29.6% 8
Under 40 25.9% 7
Under 50 29.6% 8
Under 60 11.1% 3
70 and over 3.7% 1
</BODY>
</HTML>
|
|
[ View result ]
|
In the result, you can observe that spaces and
line breaks are not preserved in an HTML file.
Rule 1: Control your whitespace.
Whitespace (mulitple spaces, line feeds, etc.) are collapsed into a single space in HTML.
To control spacing in your homepage, try using the following tags:
- <P> : new paragraph
- <BR>: break line
- : non-breaking space
Let us fix the line breaks in the above example
with the <P> and <BR> tags.
Filename: age_range_bar_graph_mod1.html
<HTML>
<!---------------------------------->
<!-- Edit history -->
<!---------------------------------->
<!-- [7/31/2007] - File created. -->
<HEAD>
</HEAD>
<BODY>
Online Learning Applications
<P>
The age range information of AIP4 students:
<P>
Under 10 0.0% 0 <BR>
Under 20 0.0% 0 <BR>
Under 30 29.6% 8 <BR>
Under 40 25.9% 7 <BR>
Under 50 29.6% 8 <BR>
Under 60 11.1% 3 <BR>
70 and over 3.7% 1 <BR>
</BODY>
</HTML>
|
|
[ View result ]
|
Advice: Use comments (written between <!-- and -->)
to organize your source file.
More modifications of this example:
Check the sources of each with the [View Source] function on your browser.
