In the last tutorial you learned about the <html>, <head>, <title>, and <body> tags. Now you will learn about the <p>, <pre>, <b>, <u>, <i>, and <h#> tags. These tags will help to add some style to your webpage and make it easier to show important phrases or terms in your web page.
So you have the start to your code from the last tutorial which looks something like
Code:
<html> <head> <title>tutorial 2</title> </head> <body> hello world </body> </html>
First we will learn about the <h#> tag (replace # with a number from 1 to 6). This tag is a header tag it is normally used for basic titles and it has 6 different sizes 1 being the largest 6 being the smallest. So lets add a <h1> tag to hello world. It should look something like this
Code:
<html> <head> <title>tutorial 2</title> </head> <body> <h1>hello world</h1> </body> </html>
Click the link to see an example
example
Remember you can make the heading smaller by using a number that is larger than 1.
Next we will add another line of text saying something else but we will use the <p> tag this time. The <p> tag basically says that it is a paragraph but it will not indent any lines unless you use the special character or use CSS but, that is for a later lesson. So lets add the <p> tag. The <p> tag will allow you to put one space between words and if you hit the enter key to move to the next line to make another paragraph or for any other reason, all it will do is continue on the same line when you display it on a webpage (I insist that you try this so that you can see it for yourself). Your code should look something like this
Code:
<html> <head> <title>tutorial 2</title> </head> <body> <h1>hello world</h1> <p>it is nice to be here</p> </body> </html>
Click the link to see the example
example
Lets add some style to the text inside the <p> tag by using the <b> and/or <i> tag. The <b> tag makes the text bold and the <i> tag makes the text in italics. Make sure you put your tags inside of each other. For example make sure if you use the <p>, <b>, and <i> tag with the same sentence or word that it looks like.
Code:
<p><b><i>This is the proper way of using tags</i></b></p>
This will prevent some browsers from becoming screwy to say the least.
So lets add those tags to our code now and see what happens. your code should look like this with the <b> and <p> tag
Code:
<html> <head> <title>tutorial 2</title> </head> <body> <h1>hello world</h1> <p><b>it is nice to be here</b></p> </body> </html>
Click below for a visual example
With the <p> and <i> tags
Code:
<html> <head> <title>tutorial 2</title> </head> <body> <h1>hello world</h1> <p><i>it is nice to be here</i></p> </body> </html>
Click below for a visual example
example
With the <i>, <b>, and <p> tags
Code:
<html> <head> <title>tutorial 2</title> </head> <body> <h1>hello world</h1> <p><b><i>it is nice to be here</i></b></p> </body> </html>
Click below for a visual example
example
Lastly we will learn about the <pre> tag. This tag allows you to input data without any spacing trouble, it will continue along the same line until you hit the enter key to move down to the next line. This is not usually a great tool because of the resolutions other people may use. It may look perfect on your screen but on someone else’s it may go outside a boundary you set (this is just an example there could be other problems). So lets see the the <pre> tag in action shall we. Your code should look like
Code:
<html> <head> <title>tutorial 2</title> </head> <body> <h1>hello world</h1> <p><b><i>it is nice to be here</i></b></p> <pre>This is what the pre tag is capable of </pre> </body> </html>
It has its uses but I find it does not come in handy as much as I wish.
Click below for an example of using the <pre> tag
example
This is the end of the tutorial in the next tutorial we will learn about using images, font color, font decoration, and centering using html.
Thank you for reading this tutorial.
