Tag Archive: HTML Tutorial

HTML Tutorial part 3

HTML Tables

Tables are an essential part of HTML. Tables can be used to organize data or to create layouts in HTML.

Tables are very helpful to organize data. Here’s an example of an HTML table:

Row 1
Row 2

The code for the above table is:

<table border="1" width="100%">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>

This may be a bit confusing so let’s slow down. The basic tag to create a table is the <table> tag. We also used certain attributes such as setting the “width” to 100%. The border=”1″ attribute displays a border around our table. If you want to change the size of the border, just change the number in the border attribute.

There are two types of tags used inside the <table> tag: the <tr> tag and the <td> tag.

The <tr> creates a table row. The <td> tag creates a table column.


You cannot create a table column without first creating a table row. Table rows always come before table columns. Likewise, you cannot create <tr> tags without first creating the <table> tag. So let’s go over this order again:

1. <table>
2. <tr>
3. <td>

<tr> and <td> tags must always be inside a table. With that said, let’s examine the <tr> and <td> tags from our example:

<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>

Notice how we created two rows. Every row must have at least one column; thus, we had to use at least one <td> tag for each row.

Now what if you want to create more columns? Simple, just create more <td> tags. Here’s an example:

<table border="1" width="100%">
<tr><td>Column 1</td><td>Column 2</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>

Once again, we still only have two rows. However, this time, we also have two columns.

The above code will produce:

Column 1 Column 2
Column 1 Column 2

Whenever you create a new column, every row in the table must have the same number of columns. For example, row #1 cannot have two rows while row #2 has three.

HTML Forms

HTML forms allow user interaction and input. Forms can be used for contacting the website owner, adding a guestbook entry, and more. Forms require a web script written in languages such as Perl, PHP or ASP in order to be processed. If you have no intention to learn these languages in the future, you can skip this section if you wish. This was written for your future reference.

Forms can contain input fields such as text boxes, password fields, and more.

The basic code to setup a form is:

<form action="/path/to/script" method="post">
Form Data Goes Here

Make sure you define the path to your script that will handle the form in your form’s “action” attribute.

In order for our form to have anything to process, we must create fields for the user to provide input. Secondly, we must also create a “submit” button that sends our form’s data to the web script. (more…)

HTML Tutorial part 2

Images in HTML

Using HTML, we can display images in our web pages. However, before we can display images, we must first upload it to our web server or have the image uploaded somewhere on the web. You cannot display an image from your local computer until you upload it to the internet.

The syntax for an HTML image is:

<image src="path/to/your/image">

The “src” attribute for the image tag defines the location of our image. Once again, make sure the image is uploaded to the web. As a rule of thumb, if the path to an image begins with “http://” then it is uploaded to the web.

We can also resize our image and enlarge or shrink it by using the “width” and “height” attributes. Here’s an example:

<image src="path/to/your/image" width="10" height="100">

The “width” and “height” properties can also be expressed as a percentage:

<image src="path/to/your/image" width="50%" height="50%">

Hyperlinks in HTML

Hyperlinks (or “links” for short) gives the user something to click that will automatically browse them to a different web page. It allows us to tie documents together and create navigation to help the user browse around our website. Links can point to both internal pages on your website or to an external page on another website.

The syntax for a link is:

<a href="/path/to/a/web/page">Link Text</a>

The “a” stands for “anchor.” The “href” attribute defines which web page or URL the user will be directed to. The “Link Text” in the above example enclosed in the <a> tags is the text for the link that your users will actually see. They will not see a URL, but when they click on the link text, they will be pointed to the URL stated in the “href” attribute.

If you want to make your link open in a new window, simply add the “target” attribute as shown below:

<a href="/path/to/a/web/page" target="newWindow">Link Text</a>

Center Tag

At times, we may want to “center” text or elements in our documents. We can do this using the <center> tag:

<center>This text is centered.</center>

This will output:

This text is centered.

It’s important to note the <center> tag can be used to center anything including images

Body Tag

In our First HTML Page Chapter, we discussed the body tag very briefly. However, what we did not tell you was that the body tag actually contains special attributes you can define to make your document more appealing.

Among these attributes include the “background” and “bgcolor” attributes. These attributes are used for your page background. The “background” attribute is to define your background image. If you do not wish to use an image but a solid color instead, you can use the “bgcolor” attribute to define the color or hex code of your background.

Here’s the “bgcolor” property in action:

<body bgcolor="#0000ff">

The “#0000ff” hex code is for the color blue. Thus, the above code will create a solid blue background for our web page.

Body tag attributes can also be used to define text and link colors. For example, the “link” tag is used to set the colors of your links. By default, browsers usually set the link color to blue. The “vlink” attribute defines the color of a link the user has already visited. The “text” property sets the text color of the text in the document.

Here’s an example of all the above attributes in action:

<body link="#0000ff" vlink="#ff0000" text="#00ff00">

This code will set all default link colors to blue, the visited links to red, and the text of the page to green.

HTML Lists

In HTML, there are two types of lists: ordered and unordered.

An ordered list numbers each list item numerically. The code for an ordered list is as follows:


The above code will produce:

  1. 1. Red
  2. 2. Blue
  3. 3. Green

The <ol> tag creates an “ordered list.” The <li> tag is used to create a list item.

To create an unordered list, we can use the following code:


The above code will produce a bulleted list.

The code for an un-ordered list is nearly the same as the order list’s syntax. However, you may notice we used the <ul> tag instead of the <ol> tag.