HTML basics

Subscribe To This Site

HTML basics

HTML graphic You'll probably need some HTML basics at some time, however you choose to make your website.

Even fully integrated sitebuilders require you to either add the odd bit of code or at least understand what's going on with the coding so that you can indentify a problem and put it right.

There's no need to worry about this however, as what you'll use on a day-to-day basis is quite limited and you don't necessarily have to understand it, just have a little knowledge.

The first question to answer is 'What is HTML?'. It stands for 'HyperText Mark-up Language' and in very simple terms is a common text language used to create web pages.

Think of it as a special language that browsers - like Firefox and Internet Explorer - can understand and convert into the nice pages you see on the web.

HTML basics 1: Common conventions

You can take a look at how any web page has been created by going to your browser and clicking on 'View' then 'Source' or 'Page Source'.

It's quite a useful habit to get into to see how other people have put their pages together, and sometimes you can 'reverse engineer' a bit of code to work out how something has been done.

If you do that for this page, you'll notice a few HTML basics that are the same on any web page:

# The page is divided into a Head and a Body section

The body is the bit that you see in a web browser, the head contains information like keywords, page desciption and page title.

# The page is full of words and numbers, each line starting with < and ending with />

These are called 'HTML tags' and every bit of code opens with a <> tag and must close with a </> tag.

In very simple terms, it tells a browser that a line of code, or instruction, is beginning and ending.

# There's a bit at the top of every page that looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

Ignore this, it's automatically generated for you and you don't need to be troubled by it.

It's a bit of basic information - unseen by the user - about your page and your code.

HTML basics 2: Frequently used code

There are many HTML basics that you will see time and time again, frequently appearing many times on one page.

Here are some common examples.

<p> and </p> ... This is a paragraph tag and creates a paragraph on a web page.

<li> and </li> ... This is a bullet point tag and is used for lists.

If I write the code:

<li>One</li>
<li>Two</li>
<li>Three</li>

It will look like this on a web page:

Three

<h2> and </h2> ... this is a heading tag, for a large headline, like the one I have used at the top of this page.

If I write <h2>This is a heading tag</h2> in my HTML code, I get this on my web page:

This is a heading tag

<h3> and </h3> ... this is a smaller heading tag, for a medium headline, like the ones I have used throughout this page.

If I write <h3>This is a heading tag</h3> in my HTML code, I get this on my web page:

This is a medium heading tag

<b> and </b> ... this tag is used to make text bold ... to create that effect I simply wrote the following code:

HTML basics 3: Tables

Using tables on web pages is moving well beyond the scope of HTML basics as they can be pretty complex things.

However, when looking at the source code for a page, it's useful to at least recognise where a table is formed on a page and the common tags which help to create it.

<table> and </table> ... indicates the beginning and the end of a table on an HTML page.

<td> and </td> ... defines a cell within a table.

<tr> and </tr> ... defines a row within a table.

I can create a very simple table using the code below:

<table width="400" border="1">
<tr>
<td>Day</td>
<td>Date</td>
</tr>
<tr>
<td>Monday</td>
<td>5th</td>
</tr>
</table>

When displayed, the table looks like this:

Day	Date
Monday	5th

HTML basics 4: Images

The final thing to demonstrate in my HTML basics 'bootcamp' is how to insert images on a page.

It will depend what HTML editor you use as to how you actually add your images to a web page, but here is an example of what the code will look like:

<img src="http://www.web-work-at-home.com/imgs/logo.gif" width="725" height="137" alt="logo for web-work-at-home.com">

This is the code for the web banner used throughout this website.

You'll notice that it is made up of:

# img src= ... this indicates to the browser that an image is placed here and the source of that image will follow.

# "http://www.web-work-at-home.com/imgs/logo.gif" ... this is the URL to the image that's used

# width="725" height="137" ... these are the dimensions of the image.

# alt="logo for web-work-at-home.com" ... this is the 'alt tag', or description of the picture.

It shows up when you hover your cursor over an image and is used mainly as an accessibility tool for people who are blind or partially sighted ... it describes what an image is on their reading software.

HTML basics 4: Web links

In the image example above, I made the words http://www.web-work-at-home.com/imgs/logo.gif 'clickable'.

That means if you click on them, you will be taken to another web page.

In addition, that web page will pop up, rather than taking you away from the page you are currently on.

This is a useful bit of knowledge for your HTML basics and this is how it's done:

# a ... the <a> tag indicates a hyperlink.

# href= ... indicates the destination web link.

# "http://www.web-work-at-home.com/imgs/logo.gif" ... is the destination web link.

# target="_blank"> ... this makes the link 'pop up' rather than take you away from the page you're already on.

The rule of thumb is that you use pop ups if you're taking a web user to an external website, you don't use them if you're moving a user within your own website.

# http://www.web-work-at-home.com/imgs/logo.gif</a> ... this is the title of the link, and it might say 'Click here' or 'Click here to see the banner image' ... in this example it just shows you the URL of the image used.

HTML basics: Summary

Don't get too worked up about HTML, you really don't need to know much more than I've shown you, and you only need to know that to help you understand how your pages work and to troubleshoot the occasional problem.

w3schools.com has an excellent free resource explaining what other common HTML tags are and I recommend that you tuck this away somewhere for ease of reference.

Return from HTML basics to How to make a website

Return to Home Internet Businesses homepage