HTML For Beginners Part 2

HTML For Beginners Part 2 Welcome back to our series in HTML For Beginners. This is the second chapter and in this section we are going to look at some of the most commonly used tags in the <body> section of a HTML Page. If you’d like to read the first entry, click here. The <body> tag As mentioned in the previous chapter, our HTML code is divided up into two main sections, the <head> and the <body>. The <body> tag is what we use to put all our HTML that we are going to use to display to the web browser. We could put our HTML tags in any order- but it will end up with messy code that sometimes doesn’t correctly display in certain web browsers, so it’s best to follow the correct protocol. First let’s look at some simple line tags. First the <br /> tag.

Hello <br /> World

When used, this tag will automatically move the next set of text onto a new line. So the output for this would be: Hello World This tag can be quite useful when you want to shift text onto a new line despite not reaching the full length of the line. You can use multiple <br /> tags to create extra spacing.

Hello <br /><br /><br />World

The next tag we will look at is the paragraph tag:

<p>This is a paragraph</p>

This tag has an opening and closing tag. The content inside the tag is moved onto a new line and given reasonably spacing around it. This allows you to neatly put blocks of text together which helps for readability.

<b>This is bold</b>

The next tag is the bold <b> tag. This tag will make the text appear in a bold font. You can also use the <strong> tag which does exactly the same thing.

<u>This is underlined</u>

The underline <u> tag can be used to put an underline underneath text.

<i>This is a in italics</i>

The italics tag <i> will make text appear in italics. These simple tags are quite useful in your day to day coding of HTML content. When you’re making word documents you are often bold-ing or underlining some text to prove a point, well now you can with HTML. And remember, we use these tags inside the <body> tag because we are outputting this information to the screen. Here is a bigger example, using all of the tags just mentioned, can you see what the code is doing?

<body>
<p>Welcome to my <b>site</b>! I hope you’re well. But <u>remember to always turn the lights off when you leave!</u></p>
<p>Oh, and if you’re thinking about leaving…<br /><br /><i>then I hope you have a nice day!</i></p>
</body>

Page Links We will now move onto linking HTML pages together. I’m sure you’ve seen links on a website before that when you click on them, move you onto another page. Well that’s what this next section focuses on. The first thing you need to do is create two HTML pages and save them as one.html and two.html. For page two.html, adding the following code:

<html>
<head>
<title>This is page two</title>
</head>
<body>
Welcome to page 2.
</body>
</html>

Save the file as two.html. First let’s take a look at the link tag:

<a href=”two.html”>Page Two</a>.

The <a> tag is used to link pages together. We can specify the target page using the href attribute as shown above (it’s targeting the two.html file). The text between the opening <a> tag and the closing </a> tag is used as our link title. When you view the link in a browser, the Page Two will have been underlined and act as a link. You can specify any domain URL for your href attribute. For example, if you wanted to create a google link:

<a href=”http://www.google.com/”>Click here to go to Google</a>.

It’s very simple to use. You can have as many links as you want on your page. For our example, we are going to link to the two.html page we created previously. Here is the code for one.html

<html>
<head>
<title>This is page One</title>
</head>
<body>
Welcome to Page One. <br /><br /> <a href=”two.html”>Click here</a> to go to page two.
</body>
</html>

Save the file as one.html and then open it up in your web browser by clicking on it. You should see the Click Here has turned into a link. Clicking on it will then take you to the two.html page. It’s quite simple and easy! Note: You will need to make sure that one.html and two.html are in the same folder/directory. Otherwise your link will point to a page that it can’t find and clicking on it will give you a 404 Page Cannot Be Found error. Images A webpage doesn’t look very good without some interesting images. HTML has a tag that we can use to display images to the user. We need to make sure the image file is on our computer or we can use an image hosted somewhere else (if you know the URL). Let’s look at the image tag.

<img src=’myimage.gif’ />

The <img> tag is a single tag with an attribute src (means source). The src attribute points to the image file, in the case above it’s the myimage.gif file. We can also use the src attribute to point to an image already on the web like:

<img src=”http://patchesoft.com/wp-content/uploads/2014/04/wordpress.png” />

The above points to an image on my WordPress site. There are some other image attributes we can use such as width and height:

<img src=”http://patchesoft.com/wp-content/uploads/2014/04/wordpress.png” width=”100” height=”50” />

This will display the image with a width of 100 pixels and a height of 50 pixels. Table Tags The table tag can be quite complex for beginners. It involves using multiple tags and putting them together in the correct order. To create an table, we use the <table> tags:

<table>
</table>

This is the base of the code. So the first thing we want to do for our table is create a new row. We use the <tr> tags (table-row)

<table>
<tr></tr>
</table>

You won’t see much with just this code. So the next we need to add columns using the <td> tag.

<table>
<tr><td>This is a column</td><td>This is another column</td></tr>
</table>

This is pretty much how we build tables. The tags <table>, <tr> and <td> make up the essential code for creating tables. We can create multiple rows too:

<table>
<tr><td>Column 1 (row 1)</td><td>Column 2 (row1)</td></tr>
<tr><td>Column 1 (row 2)</td><td>Column 2 (row2)</td></tr>
</table>

Notice that the table row tags must be placed after the corresponding closing </tr> of the previous row. If you put these tags in the wrong order, you will likely get a page with messed up results. There are some attributes we can use for the <table> tag that allows us to style our table better:

<table cellpadding=”4” cellspacing=”4” width=”400”>
</table>

The cellpadding and cellspacing attributes give our table some extra spacing and padding around the columns to make the data we present look better and less cramped. The width attribute specifies how big the table should be. We can apply the width attribute also to the <td> tag to make each column a different size. Conclusion And that wraps up part 2 of HTML For Beginners. We have looked at lots of different tags in this section, so it might take a while for you to remember how they all work. Try to make example HTML pages using these tags, just so you get used to the tag names and how they work. To leave this guide, I will present another HTML example that includes all of the tags we have been talking about. Can you figure out what is going on?

<html>
<head>
<title>HTML For Beginners Example #2</title>
</head>
<body>
<b>Welcome to my <u>page</u></b><br /><br />
Some useful links: <a href=”http://www.google.com/”>Google</a> and <a href=”http://www.facebook.com/”>Facebook</a><br /><br />
<p>Don’t forget to learn all about more HTML in the next section</p>
<p><img src=”http://patchesoft.com/wp-content/uploads/2014/04/wordpress.png” /></p>
<br /><br />
<i>My Shopping List</i><br /><br />
<table>
<tr><td><b>Food</b></td><td><b>Price</b></td></tr>
<tr><td>Apple</td><td>$1.03</td></tr>
<tr><td>Fish</td><td>$10.92</td></tr>
<tr><td>Chocolate</td><td>$3.39</td></tr>
</table>
</body>
</html>

HTML For Beginners Part 2

Enjoyed that? Check These Posts Out

Article Comments

Leave A Comment