All About Coding - Programming and Software Tutorials

Introduction To HTML

Introduction:

In this simple tutorial you will learn how to setup the basic structure of a web page. You will learn the Head, Title, Body, Table, Div, Img and Hyperlink tags before the end of the tutorial.

Let's Get Started:

1. Lets start from the top. Where else would you start right? HTML or Hyper Text Markup Language is a very simple programming language who's primary purpose if to organize a layout of text and images in a web browser. First lets start off with a rule. For most items when you have a opening tag you will also need a tag to show that that area is complete. (<body> </body>).

2. What is a tag?
A tag is a special piece of code telling the browser to so something special with the next set of text. All tags open with a <tagname> and almost all have an accompanying ending tag like </tagname>.

3. Samples of Tags:
<HTML></HTML> - Opening and closing tags of all HTML pages. This is the first and last lines of code in a web page.
<head></head> - Opening and closing tags to the heading area of a web page. Inside here goes the title of your document among other things.
<body></body> - Opening closing of Body area. This is where the meat of your page goes.
<table></table> - Opening and closing tags of a table. Very usefully to setup simple structures for data layout.
<div></div> - Opening and closing of an area of code. This is usually used to setup styles or positioning for code between them.
<a></a> - Opening and closing for an Anchor tag. This is what you use to make links to other pages.
<img> - Used to insert an image into the page
<br> - Used to place a break. (move to next line)

4. Lets make a sample web page based on the above tags then well go over the code line by line. Copy this into a file with your favorite HTML editor or notepad then save it as test.html

<html>
<head>
<title>Sample Web Page</title>
</head>

<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Row 1 Column 1</td>
    <td width="150">Row 1 Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
  </tr>
<tr>
  <td colspan="2">
    <div align="center">
      <a href="http://www.allaboutcoding.com">
        <img src="http://www.allaboutcoding.com//images/title.jpg" width="275" height="50">
      </a>
    </div>
  </td>
</tr>
</table>
</body>

</html>

5. <HTML>
This line is the opening of any HTML page and must be here.

6. <head>
This is the opening of the heading section

7. <title>Sample Web Page</title>
This line is the the title of the web page. This is the name that will appear in the top of your browser. Don't forget this or leave it named Untitled Document as most HTML editors set it as default.

8. </head>
This line closes the heading section

9. <body>
This line is the starting of your body section. While in this sample it is blank this tag can have many attributes applied to it. What's an attribute? An attribute is a piece of code telling the browser to do something to this area of code. Some of the things you may want to do here would be to set the background color of the web page, set a repeating background image and the list goes on. Just incase you are wondering if I will show you how to do this never fear here is a sample line for each item.
<body bgcolor="#000000"> - This will make the background of the web page black
<body background="images/background.jpg"> - This will place the image background.jpg tiled as my web page background.

10. <table width="300" border="0" cellspacing="0" cellpadding="0">
This line sets up a table, think excell......or not! You can see here with a few attributes we control the total width, tell it it has no border lines, tell it to have to spacing between cells and have no text offset in the cells. You can play around with these values to see the outcome. The purpose of this table is to be invisible and is only used to display our text and image in a pleasing way.

11. <tr>
This starts a new row for our table. You can use this as many times as you want to produce multiple rows.

12. <td width="150">Row 1 Column 1</td>
This line you will see actually contains three elements. The first being the TD or table data tag with its attributes, the second being the text in the table cell, and then the closing of the table cell.
First you will see that I use an attribute tag to set this cells width to 150 pixels. Remember that we set the entire table to 300 pixels wide so this will take up half of the total width. Next I enter in the text I want to be placed in the cell. I placed wording to help you visualize the structure when you open the html file. Last i close the cell with final tag. The following line is identical with the exception of the text i placed in the cell. You could continue placing cells in this row, but you would need to adjust the cell sizes or the table size to match. Also each row in a table must be the same width and same number of cells, so what ever you setup on the first row will carry over to each other row.

13. </tr>
This line completes the table row. The next section is almost identical so I will not go through each line. You will notice that on the cells that I did not tell them to be a specific width. This is because we have already setup the width of all cells in the previous row. It's not a bad idea to add the width tag, but it is not necessary. Now you will have two rows with two cells in them each.

14. <tr><td colspan="2">
Again here we are creating another row but wait! You notice that there is only one cell not two, but I thought you said that it had to stay the same all the way throughout the table. It does, but you have the ability to make one cell take up the space of multiple cells. In a TD tag you can add the attribute colspan="" to tell it that the cell is actually multiple cells wide. By the way that stands for column span. You can also do a row span, but I have very rarely needed to use this ability as it makes reading the code very difficult.

15. <div align="center">
This division tag tell the browser that everything between this and the </div> needs to be centered in its container. The container holding this is our double wide cell, so our image is going to be centered inside it.

16. <a href="http://www.allaboutcoding.com">
This line tells the browser that when the text or image inside this and its closing </a> tag is clicked on to go to the URL listed. There is an extra attribute you should be made aware of here. It is the target attribute. This allows you to specify whether to open the link in the current window or in a new window. The following should be self explanatory.
target="_blank"
target="_self"

17. <img src="http://www.allaboutcoding.com//images/title.jpg" width="275" height="50">
This line simply displays an image. You will notice that there is no closing tag for this. There are several attributes that I use here. The first is the src="", this is required and points to the location of the image. It can be either local or a absolute URL like I chose to use. Next I set the width and height of the image. This serves two purposes. First the browser will no how much space to set aside to place your image before it actually loads your image. This means that when someone views you page it will look right from the beginning as the pictures fill in as they are downloaded, otherwise the page will jump all around as its being loaded and resized. The second purpose will scale the image. If i told it that the width was 100 by 50 it would distort the image to go in this space. ***NOTE*** This is a very poor way to code your page. The image its self if still 275x50 and takes up the same about of memory. Something like this example wouldn't be too bad, but I have seen pages where the coder put a 1024x768 image into a tiny little thumbnail. While this may look ok it is bad on bandwidth being that the larger image may take up 10 times the space.

18. That's really about it. All you have left is the closing tags for the link, div, td, tr, table, body and HTML. You do want to make sure that everything pairs up. Its really easy if you are typing everything in to forget to close a tag. Sometimes you may get a page that looks just fine, other times you will get a seriously deformed page.

Conclusion:

Your Done! You have now created a VERY simple HTML Page. Go ahead an play with the attributes and see what you can do. There's a lot more to learn about HTML so stay tuned for more tutorials.