Title: Text Spacing
URL: http://www.activejump.com/c-2.shtml
Email: webmaster@activejump.com
Introduction
Spacing in HTML is very different from the normal way we think of spacing in any text editor. This is because, HTML does not
count white spaces such as carriage returns, tabs, and a series of spaces. To get this same effect, you will need to use
special tags, which is what this section teaches.
The Problem
As you read above, HTML will not recognize white spaces in your HTML. We have done an example to show you this. In the
HTML, you will clearly see a difference of two lines between the text, yet, when viewed on the web browser, there is no
gap, as the second window of the example shows.
|
index.html - Notepad |
....<BODY>
Hello World!
Welcome To My Site
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World! Welcome To My Site
|
|
The Solution
There are many different tags that will help you fix the problem, each one doing a different thing to help space out the
text. Below, you will see all the options available.
Line Break
One way to fix this problem, is to add in a Line Break which looks like <BR>. This tag will move the text down one
line. So, following the example we did above, here is the same HTML document and result, using the <BR> tag.
|
index.html - Notepad |
....<BODY>
Hello World!
<BR>
Welcome To My Site
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World!
Welcome To My Site
|
|
Paragraph
Another way of avoiding this problem, is to use the Paragraph which looks like <P>. The <P> tag moves the text
down two lines, similar to starting a new paragraph. Keeping with the previous example, here is the HTML, using the <P> tag.
|
index.html - Notepad |
....<BODY>
Hello World!
<P>
Welcome To My Site
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer | |
Hello World! Welcome To My Site
|
|
Pre-Formatted Text
Pre-Formatted Text can be a very interesting and useful part of HTML. The tags for Pre-Formatted Text are <PRE> for the starting
tag and </PRE> for the closing tag. The text in the middle is affected by the tags. What it does, is allows you to
type text and not to have to worry about the <BR> and <P> tags. This is because it will show up on the web page
as it shows up in your HTML document (counting white spaces). This can be very useful for creating columns that need to be
lined up. However, we recommend not to use this tag all the time.
|
index.html - Notepad |
....<BODY>
<PRE>
Hello World!
Welcome To My Site
</PRE>
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer | |
Hello World! Welcome To My Site
|
|
Horizontal Rule
The tag for a horizontal rule is <HR>. This tag will put a line across the screen. Below, is the example from
above, with the <HR> tag added.
|
index.html - Notepad |
....<BODY>
Hello World!
<HR>
Welcome To My Site
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World!
Welcome To My Site
|
|
Subscript
This tag makes the text appear below the normal line of writing. The subscript tag looks like <SUB>. The starting
tag is <SUB> and the closing tag is </SUB>. The text between the two is affected. Here is the example, using
the subscript tag.
|
index.html - Notepad |
....<BODY>
<SUB>Hello World!</SUB> Welcome To My Site
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World! Welcome To My Site
|
|
Superscript
This tag makes the text appear above the normal line of writing. The superscript tag looks like <SUP>. The starting
tag is <SUP> and the closing tag is </SUP>. The text between the two is affected. Here is the example using
the superscript tag.
|
index.html - Notepad |
....<BODY>
<SUP>Hello World!</SUP> Welcome To My Site
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World! Welcome To My Site
|
|
Block Quote
This tag makes the text indented one tab (5 spaces). The blockquote tag looks like <BLOCKQUOTE>. The starting
tag is <BLOCKQUOTE> and the closing tag is </BLOCKQUOTE>. The text between the two is affected.
Here is the example using the blockquote tag.
|
index.html - Notepad |
....<BODY>
<BLOCKQUOTE>Hello World! Welcome To My Site. I hope you enjoy looking at it. </BLOCKQUOTE>
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World! Welcome To My Site. I hope you enjoy looking at it.
|
|
Space
There is a line that you can put in that will automatically add a space. The line is " ". This line will
create one space. Here is an example using the space line.
|
index.html - Notepad |
....<BODY>
Hello World!
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
Hello World!
|
|
|