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.
Im am now going to show you the basics of fomatting.
Im am now going to show you the basics of fomatting.
1. Try and copy the following paragraph into your html document, then run it and see what result you get:
"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
Dont 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 dont 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)
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>
<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:
Here is what mine now looks like:
If you are struggling here is my code, have a look at the yellow parts and see if yours is the same: (notice I have also centered the image)
<html>
<head>
<head>
<title>My Own Home Page </title>
</head>
</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>
<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>
</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:
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, dont 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>
<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, Itallic and Underlined.
This is incredible simple, these are the following tags used:
This is incredible simple, these are the following tags used:
<b>Look at me im Bold</b>
<i>Look at me im Itallic</i>
<u>Look at me im Underlined</u>
<i>Look at me im Itallic</i>
<u>Look at me im Underlined</u>
Just like our other tags, the text you want to format goes inbetween 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:
Again if you are struggling below is my HTML code:
<html>
<head>
<head>
<title>My Own Home Page </title>
</head>
</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>
<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>
<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>
</font>
</body>
Here is a shot of what my page now looks like with formatting:
You will be glad to hear that thats the end of chapter 7. Up next is Chapter 8 - Tables!
0 comments: