Telecommunications - Internet, Telephone and Bundled ServicesIntertech Country HomepageMembers AreaSupport
Home Page : Helpdesk
 

 
Tutorial HTML

Introductory HTML Tutorial
HTML stands for HyperText Markup Language. HTML is a simple set of commands or tags that tell a web browser how to display a webpage.

Even if you get the website design software it is a good idea to look at the source of the webpages you are designing to see what the different HTML tags do.

Below we have set out the basic HTML behind all webpages which if you can understand, will go a long way towards your web design skills.

HTML is written using "tags" where are normally found in pairs, an opening tag and a closing tag - which surround text or references to other webpages or graphics. For example:

<P>Welcome to my home page</P> will tell the browser to display:

Welcome to my homepage

You don't see the tags. The P here stands for new paragraph. The closing tag is different from the opening tag by the addition of a forward slash "/".

Other tags can tell the browser to display the text as bold or as a different font or size.

<b>text</b> will show the text in Bold for example.

Every webpage is made up of a <HEAD> </HEAD> section and a <BODY></BODY> section.

The HEAD section contains information that the search engines pick up when someone is searching on the internet for a particular word or phrase. It contains the "title" and "description" of the page which is what shows up on the search engines - shown like this:

<TITLE>My webpage</TITLE>

The "description" is found in <META> tags. The most common meta tags are the description and the keywords and they are shown like this (these tags are not in pairs):

<META name="description" content ="description of website">

<META name="keywords" content="keyword1, etc">

It can also contain code such as Javascript whch can for example:
- preload graphics to be used on button rollovers.
- tell the browser to load a different page.
- identify which browser and platformis being used to view the page.

The BODY section is what is seen by people looking at your website. This is also where you can specify the background colour or background image for the page.

<BODY bgcolor="#FFFFFF"> for example will display a white background. If you do not display a background color it will default to grey. #FFFFFF is the red green blue code for white (full, full, full). Black would be #000000, red would be#F F0000. You can experiment with different colors by changing the red green and blue values.

<BODY background="backpic.jpg"> would show the background a picture called "backpic.jpg" as the background of the page and tile it to cover the whole page. IMPORTANT - See note at bottom of page about referencing pictures in folders.

Then you can type the contents of your page and separate them into paragraphs by using the <p></p> tags surrounding each paragraph.

You can also display information in a table with cells.

The table is defined by a pair of <table></ table> tags and each table row by <tr></tr>. Inside each table row there can be any number of cells separated by table data tags <td></td>.

If you want to link to another page you use a "hyperlink" which is defined inside a pair of <a HREF=></a> tags. Inside the hyperlink you type the address of the webpage you want to link to such as: <a HREF="http://www.domainname.com/pagename.htm"> new page </a> What is seen by the viewer is 

new page

This is in blue and underlined indicating that it is a hyperlink. The colour can be different but the default colour is blue for hyperlinks unless specified otherwise by the designer.

Or if you want the link to be an email to you you type <a HREF="mailto:name@isp.com">Company</a>. What is shown to the viewer is 

Company

If you want to display a graphic or image you need to specify the location with the <IMG SRC=""> tag where the filename of the graphic or image goes inside the "".

Remember to finish your page with the closing </BODY> tag.

If you understand these basics you will be able to figure out the rest by looking at the source code of different webpages and seeing how an text or an image is aligned to the right, left or centre for example.

Naming and Referencing Your Files
"index.htm" or "default.htm" is what a browser will pick up if you do not specify the page. It is usually your home page. If you type in www.website.com in your browser it will automatically look for the index page.

When referencing another page or image, the code assumes that it is in the same folder as the page you are working on.

For example if your website is located at http://www.domain.com then domain.com is the root folder and all pages in that folder will be able to reference each other relative to each other without putting the"http://www.domain.com" in the hyperlinks. For example:

<a HREF="index.htm">HOME PAGE</a> would link the home page to the page you are working on.

However if you are referencing a page on another site you will have to include the full web address i.e "http://www.anothersite.com/page.htm".

If you have a large site you might want to have sub-folders. The images could be kept in http://www.domain.com/images for example

A picture in this folder would be located at: http://www.domain.com/images/mypic.jpg

If you keep images in an image folder the image source code would be for example:

<IMG src="images/mypic.jpg">

If you are referencing a page in the root of your website you would have to preface a hyperlink by ../

For example <a HREF="../index.htm>HOME PAGE</a> would reference the home page from a page in a sub-folder.

If you find you are not able to link pages it is almost certainly because you are not referencing the right folder.

Making a HTML Document
You already have a program on your computer system that can create simple text files. On Windows systems it is called Notepad.

Windows 95/98:

  • click Start
  • click Programs
  • click Accessories
  • click Notepad

Windows 3.1

  • Go to Accessories in the Program Manager
  • click Notepad

On Macintosh the program is named TeachText.

You can also use any desktop publishing program that allows you to save files as plain text (no formatting).

Open Notepad on your screen, and type (or cut and paste) the following commands:

<html>
    <head>
        <title>Learning HTML</title>
    </head>

    <body>
        I'm learning HTML!
    </body>
</html>

Save the file with the file extention html (i.e. webpage1.html) and make a note of its location.

Open the page in your web browser to view your handiwork.

  • Open the FILE tab on the top menu bar of your browser.
  • Click OPEN (Internet Explorer) or OPEN PAGE (Netscape)

In the popup window

  • Type your filename into the textbox, including the .html   or
  • Click BROWSE (IE) or CHOOSE FILE (NS) to search for it
  • Select OPEN

You've already learned four HTML commands (tags) and the structure of every HTML document.

  • The <html> tag tells the web browser that the document contains HTML formatting code.
  • The <head> area of the document contains information about the document, including the title which is displayed at the top of the browser window.
  • The text and code between the <body> and </body> tags is what will be displayed on the screen in a web browser.

Most HTML tags must be both 'opened' and 'closed'. You close a tag by adding a forward slash at the beginning of the command word, i.e. /html, all enclosed within the < >'s

Now, back In Notepad, let's make some changes to your document. Substitute this body tag:

<body bgcolor=ffffcc>

Substitute the following for the text between the <body bgcolor=ffffcc> and </body> tags:

<a href="http://www.icisp.net.au /support/tutorial_html">
<img src="http://www.icisp.net.au /images/www.gif"></a>

Save and view the document again

You've changed the background color of the page by specifying the hex color number, added a link to the Intertech Country HTML Tutorial and added a linked image to your document. You've learned the commands for adding links and displaying images. By changing or adding to text, adding more links to sites and images, you can already build a basic webpage. See how easy it can be?

Learning More
You'll certainly want to learn and experiment with other HTML tags. It's time to take a step-by-step HTML tutorial. Choose from:

Intertech Country Home Page | Contact Us | Terms & Conditions |