[2] Playing With TexT

Now we can actually start writing a web page.

We'll start with a title or heading for the web page. To produce a heading, all you do is to place the heading you want between the heading <H1> tag elements. The heading tag will automatically make the heading bigger and bold than the normal text. For example if the following code


<H1> Mannan's Crazy World </H1>

is placed between the <Body> tag elements in the code shown in the previous section, then one would get the following


Mannan's Crazy World



Note the green horizontal lines do not appear.
There are six levels (or sizes) of headings possible H1 to H6, as shown below.

<H1> Mannan's Crazy World</H1>

<H2> Mannan's Crazy World</H2>

<H3> Mannan's Crazy World</H3>

<H4> Mannan's Crazy World</H4>

<H5> Mannan's Crazy World</H5>
<H6> Mannan's Crazy World</H6>

If you want to align the heading to the Left, centrally or to the right of the web page then you need to add the align= attribute to the start of the heading tag. ie:


<H2 align="left" > Mannan's Crazy World </H2>

<H2 align="Center" > Mannan's Crazy World </H2>

<H2 align="Right" > Mannan's Crazy World </H2>


The above three lines of code will produce the following effect.

Mannan's Crazy World

Mannan's Crazy World

Mannan's Crazy World



If no align attribute is included then by default the heading is aligned left.


So how do we print text?
Dead easy, whatever you wish to print on the web page is placed after the paragraph (<p>) tag statement.
For example if I wanted to print "Welcome to Mannan's home Page", then I would write the following code which again would be placed between the <Body> tag elements.


<p>
    Welcome to Mannan's home Page.
</p>


And you would see the following

Welcome to Mannan's home Page.

You will notice that i have used an end tag for the paragraph statement. You do not really need to issue an end tag, since the browser will automatically know that the last paragraph has ended when a new paragraph statement is issued. But I find it useful to use, since you can use it to contain a paragraph, and then align the paragraph itself. More on this later.

The <p> tag elements will ignore multiple spaces, tabs, and carriage returns. For example if we type the following


<p>
    Welcome to Mannan's home Page.
    Playing With Text.
</p>


Then we would get

Welcome to Mannan's home Page. Playing With Text.

It has ignored the carriage return. ie. the new line.
So how do we get round this problem?
We need to tell the browser that you wish to print on a new line by introducing
the break (<br> ) tag element. (Note does not have an end tag)
Below are two ways you could do this, which would give the same result.



<p>
    Welcome to Mannan's home Page. <br>
    Playing With Text.
</p>

Or

<p>
    Welcome to Mannan's home Page. <br> Playing With Text.
</p>



This would give the following result.
Welcome to Mannan's home Page.
Playing With Text.

To print text in a new paragraph you use the <p> statement again.
For example


<p> This is the first paragraph of the Learning Zone from Mannan's crazy world. I hope you are not totally lost yet. Thing's are just starting to get interesting. <p> This is the start of the second paragraph.



Or
<p> This is the first paragraph of the Learning Zone from Mannan's crazy world. I hope you are not totally lost yet. Thing's are just starting to get interesting.
</p>

<p>
This is the start of the second paragraph.
</p>




One gets

This is the first paragraph of the Learning Zone from Mannan's crazy world. I hope you are not totally lost yet. Thing's are just starting to get interesting.

This is the start of the second paragraph.


You should note that when using the above paragraph tag statement it will automatically word wrap the text to fit into the browsers window, if the sentence is to long to fit onto one line. Therefore you do not need to worry your socks off about page widths. Cool or what?

It is also possible to align a paragraph on a web page as we can with the heading. If no align attribute is included then by default the paragraph is aligned left.


<p align="left">
This paragraph is aligned left<br>
on the web page of<br>
Mannan's crazy world.
</p>
<p align="center">
This paragraph is centered <br>
on the web page of<br>
Mannan's crazy world.
</p>
<p align="right">
This paragraph is aligned right<br>
on the web page of<br>
Mannan's crazy world.
</p>

The above code illustrates this below.


This paragraph is aligned left
on the web page of
Mannan's crazy world.

This paragraph is centered
on the web page of
Mannan's crazy world.

This paragraph is aligned right
on the web page of
Mannan's crazy world.



Another attribute which is specific to the latest browsers is the align="left". This justifies the paragraph text, as does a standard word processor.
Assuming that you are still with us, there is an alternative method of printing text on a web page, by using the preformated text elements <pre>. The preformated element will take account of carriage returns, multiple spaces, and tabs. It will not automatically word warp the text to fit into the browsers windows. It will just print what you type exactly between the tags.


            
<pre>       
            Can thing's in 
                    Mannan's crazy world 
               get any more crazy       than this!
                          You will just have to wait and see.                   
</pre>              
         

So the above would produce the following. Dead easy.


                          Can thing's in 
                    Mannan's crazy world 
               get any more crazy       than this!
                          You will just have to wait and see.                   
         

A word of warning, some people tend to use multiple <p> or <br> to gain additional line breaks to create empty space. The problem with this is some browsers will ignore multiple <p> or <br> tags. A simple way round this is to insert an empty character space between them as shown below. &nbsp; is a graphical character which has a special meaning in HTML. More on this later. The ampersand (&) indicates it is graphical character. &nbsp; instructs the browser to insert a no-breaking space. A blank character.


<p>&nbsp;<p>&nbsp;<p>
Or
<br>&nbsp;<br>&nbsp;<br>
Previous topic Back To Contents Next Topic