Basic HTML tutorial for web editors

Commenting your Code

Before we move on let's look at commenting your code.

This sounds silly, but when you have pages of HTML, commenting sections or lines of code can be useful when you come to edit the code. So its good practice to comment your code, especially if someone else will edit it later.

This is how you comment (viewers will not see these).

HTML Bullet Points

Say we wanted to format this:

Cheese
Ham
Fish
Eggs

<ul>

<!-- This is my shopping list -->

<li>Cheese</li>
<li>Ham</li>
<li>Fish</li>
<li>Eggs</li>
</ul>

The <ul> tag stands for unordered list, and the <li> tag stands for list.

Cheese
Ham
Fish
Eggs

<ol>

<!-- This is my shopping list -->

<li>Cheese</li>
<li>Ham</li>
<li>Fish</li>
<li>Eggs</li>
</ol>

The <ol> tag stands for ordered list.

Displaying Images in HTML

Lets put an image on our page.

To do this you need to know a few things about the image you want to display.

Firstly the filename of your image and its location.
Secondly the height and width of your image (obtained through a paint package).

To display your image on the web your image should be in one of two formats.

GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)

The difference between these two formats is the way they compress the image files for viewing on the web. Use JPEGs for photographs and use GIFs for logos, cartoons and flat coloured images (This is a general rule of thumb).

The line of code above uses the <img> tag to display the image on the web page. In the above example the image mypicture.gif is located in the same directory as the HTML file. If the image was in a separate folder, say a folder called images then you have to change the src parameter.

The alt parameter is used to describe the image, this is what you see when you move your mouse over the image in your browser.

Lets look at HTML Hyperlinks

A hyperlink is just a piece of text or an image that when clicked takes you to a different web page.

<a href="http://www.yahoo.co.uk">Click here to search the web!</a>

The anchor tag <a></a> is used for links, whatever you put between the anchor tags is used as the link, be it some text or an image.

The href parameter is used to specify where you wish the user to be taken when he or she clicks the link.

If you want the link to go to a new site, like www.yahoo.co.uk then you will need to put the http:// prefix before otherwise it will not work.

However if you want the user to go to another page on your site; html_basic_1.asp for example. Then you would write this.

All you see on the screen is what's between the <a></a> tags.

Page 1

To make an image link, simply put the <img> tag between the <a></a> tags like so:

<a href="html_basic_1.asp">

<img src="mypicture.gif" width="80" height="70" border="0" alt="This is my picture">

</a>

This would display your image on the screen and it would take your users to html_basic_1.asp if they click on it.

Opening the link in a new window

To open your link in a new browser window, you need to add the target attribute. Set the target attribute to _blank.

Email Hyperlinks

Adding an email hyperlink to a page is easy.

<a href="mailto:myemail@hotmail.com">Click here to email me!</a>

You may recognize this as being similar to the hyperlink. Only you specify it's an email link by typing mailto: before the email address in the href parameter.

As before we use the anchor <a> tag. Between the <a></a> tags you can put text or images just as you can in a standard hyperlink.

<a href="mailto:myemail@hotmail.com">

<img src="mypicture.gif" width="80" height="70" border="0" alt="Email me!">

</a>

When the user clicks on the link, it opens their default mail program and a new email addressed to the persons' email you specify in the link.

HTML Tables

Lets look some basic HTML tables. Lets say we want to format a table like the one below. I've just put numbers in the cells for now so you can follow the code.

There are a few tags needed when you create a table.

The <table></table> tag. The table row tag <tr></tr>, and the table data tag <td></td>

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

<table><tr>
<!-- Row 1 -->

<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>

<tr>
<!-- Row 2 -->

<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>

<tr>
<!-- Row 3 -->

<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

<tr>
<!-- Row 4-->

<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr></table>

The <table> tag has various attributes, these are

Border - adds a border to the table.
Cellpadding - adds space inside the table so the contents don't touch the sides of the cell.
Cellspacing - separates the cells (like mortar between bricks)

By default if you leave the table tag as <table> it will add cellpadding and cellspacing and place a border of 1.

Add the table parameters as above. Experiment with these settings to see what effect they have.

Extended HTML Characters

For Example

Displays this to the screen:

Here are some common extended characters.

Character	HTML code
&	&
©	©
®	®
™	™
€	€
£	£