| Formatting Source Code - html | | Print | |
One of the most frustrating parts of HTML for beginners is simple
formatting. Such as starting a new sentence on a new line, or
aligning text to the left, right or middle.
I’m am now going to show you the basics of formatting.
1. Try and copy the following paragraph into your html document,
then run it and see what result you get: (if you are unable to
copy/paste just insert lots of random text into your page but make
sure you insert some spaces like I have done)
"This is a standard paragraph of text. Nothing to see here just
typing some words for an HTML formatting example.
HTML formatting can be difficult for novice users, so hopefully you
will find this chapter as painless as possible.
This is a cheap plug in a paragraph of text for my website
www.elpassobooks.co.uk. If you find this guide helpful then you can
have a look at my website for more great web guides written by
me!
End of my meaningless paragraph of text!"
2. When you run your HTML file you should find it looks something
like this:
Notice how although we left spaces between each sentence in our
original paragraph, when we tried to view them in HTML there are
no spaces, everything is just one massive paragraph.
3. To fix it we must use the following HTML tags:
<p> - This is used for when you would like to start a new paragraph
<br> - A page break, this is used for starting a new line
Don’t worry if this is all confusing, here is the paragraph again with
the HTML tags, paste it into your document and then run it to see
the results.
<p> "This is a standard paragraph of text. <br>Nothing to see
here just typing some words for an HTML formatting example.<p>
HTML formatting can be difficult for novice users, so hopefully you
will find this chapter as painless as possible. <p>
This is a cheap plug in a paragraph of text for my website
www.elpassobooks.co.uk. If you find this guide helpful then you can
have a look at my website for more great web guides written by
me! <p>
End of my meaningless paragraph of text!"
If you want to experiment try running it again but this time move
around the <p>`s and <br>`s to see what effect they have on your
paragraph.
Remember practice makes perfect!
Here is how your page should now look:
4. This is a long chapter but don’t worry your about half way
through!
Now we are going to look at aligning the text (Note - this method
can be used on pictures, Flash and any other objects of your
website)
Aligning things is simple in HTML, these are the following tags to be
used:
<center>Text to be centered here</center>
<p align =left>Text to be aligned left here</align>
<p align =right>Text to be aligned right here</align>
Lets try it out on our paragraph. Try and use the above tags to align
your paragraph to the left, right and center.
Here is what mine now looks like:
If you are struggling here is my code, have a look at the red parts
and see if yours is the same: (notice I have also centered the
image)
<html>
<head>
<title>My Own Home Page </title>
</head>
<body>
<body bgcolor= "yellow">
<font color="Red">
<H1> I am Your-Name and this is my web Page!</H1>
<center> <a href="Page1.html"><img
src="images/myimage.gif"></a> </center>
<a href="Page1.html">Click Here for my next page</a>
<center> <p>"This is a standard paragraph of text. <br>Nothing to
see here just typing some words for an HTML formatting
example.<p> </center>
<p align = right> HTML formatting can be difficult for novice users,
so hopefully you will find this chapter as painless as possible.<p>
</align>
<p align = left> This is a cheap plug in a paragraph of text for my
website www.elpassobooks.co.uk. If you find this guide helpful then
you can have a look at my website for more great web guides
written by me!<p> </align>
<p align = right> End of my meaningless paragraph of text!"
</align>
</font>
</body>
TIP: The spelling "center" is American, if you use the English
spelling "Centre" your HTML will not work.
5. Now for the final part of the chapter! Sizing, underlining and
making your text bold.
There are a number of ways to alter the size of your text in HTML, I
am going to show you what I feel is the easiest, you can use
numbers ranging from 1 - 7 (1 is small, 7 is large)
THIS IS SIZE 1
THIS IS SIZE 2
THIS IS SIZE 3
THIS IS SIZE 4
THIS IS SIZE 5
THIS IS SIZE 6
THIS IS SIZE 7
Lets take our paragraph again, this time we will make the first
paragraph size 5.
This is the code to be used:
<font size = 5> Your text goes here </font>
This is how your 1st paragraph of code should now look, don’t worry
if you need to space out the HTML like I have done below:
<center>
<p>
<font size =5> "This is a standard paragraph of text. <br>Nothing
to see here just typing some words for an HTML formatting
example. </font>
<p>
</center>
You can obviously replace the number 5 with any number of your
choice from 1 - 7. Experiment and see what results you get.
6. We are finally going to look at making our font Bold, Italic and
Underlined.
This is very simple, these are the following tags used:
<b>Look at me im Bold</b>
<i>Look at me im Italic</i>
<u>Look at me im Underlined</u>
Just like our other tags, the text you want to format goes in-
between the open <b> and closed </b> tags.
Try and use the three tags on your paragraph, experiment and see
what results you get.
Again if you are struggling below is my HTML code:
<html>
<head>
<title>My Own Home Page </title>
</head>
<body>
<body bgcolor= "yellow">
<font color="Red">
<H1> I am Your-Name and this is my web Page!</H1>
<center><a href="Page1.html"><img
src="images/myimage.gif"></a></center>
<a href="Page1.html">Click Here for my next page</a>
<center>
<p>
<font size =5> <b> "This is a standard paragraph of text.
<br>Nothing to see here just typing some words for an HTML
formatting example. </b> </font>
<p>
</center>
<p align = right> <i> HTML formatting can be difficult for novice
users, so hopefully you will find this chapter as painless as possible.
</i> <p></align>
<p align = left> <u> This is a cheap plug in a paragraph of text for
my website www.elpassobooks.co.uk. If you find this guide helpful
then you can have a look at my website for more great web guides
written by me! </u> <p></align>
<p align = right>End of my meaningless paragraph of
text!"</align>
</font>
</body>
Here is a shot of what my page now looks like with formatting:
You will be glad to hear that that’s the end of chapter 7. Up next is
This entry was posted on . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment.
| Users' Comments (0) |
|
No comment posted
