Friday, July 30 2010

Technical Support
Account Management
Dialup Configuration
WWW Browsers
E-Mail
Newsgroups
Website Design Information
HTML Basics
 
HTML Structure
 
My First Webpage
Publishing your site
 
Using FTP
Advanced Resources
 
Password Protecting your site
 
Web Counter CGI
 
Form Mail CGI
 
Guestbook CGI
 
Simple Search CGI
 
Webboard CGI
Misc Configuration

The Hypertext Markup Language Structure

HTML is a very powerful scripting language which is simple to learn but powerful enough to tackle complex tasks. The following topics should be enough to start you on the webmastering path:

Building blocks: the Tags

HTML is like any other text file, except for one thing, you can use HTML tags to modify the contents of the text file. How do you recognize HTML tags? They are enclosed within less-than and greater-than signs, and are usually found in pairs.

For example: <TAG>This is some sample text.</TAG>

Notice that similar tags are at either end of the sample text? They are similar but not identical. The first tag in the pair, turns on that particular html tag. The end-tag, containing a slash "/" character, marks the end of the tags' area of effect, turning it effectively off.

This basic syntax covers all HTML code, as illustrated by the following example:

<HTML>
  <HEAD>
    <TITLE>My Webpage</TITLE>
  </HEAD>
  <BODY>Welcome to my webpage</BODY>
</HTML>

Font tags

One of the most common things that you will do when you are creating webpages will most likely be altering text in some way. The FONT tag lets you do just that. The tag is applied in the following fashion:

<FONT attributes>Text to be affected</FONT>

The attributes that are the most common are the following:

  • color = value : You can either specify a color using plain words (like "red") or using an RGB(Red Green Blue) hexadecimal value (like "#CC0000").
  • size = value : You can specify relative size(like "+2" or "-1") or absolute size (like "1" or "5").
  • face = value : You can also change the font that is displayed using this attribute (Like "Arial, Helvetica"). Stringing more than one font between quotation mark give alternate typefaces if the previous ones in the list are unavailable.

As an example the following code:
<FONT color="magenta" size=5 face="Times New Roman, Times, serif">
This text is affected by the font tag
</FONT>

would create: This text is affected by the font tag

Image Tags

Another very common tag, one that you will use constantly when creating websites, is the IMG tag. This tag is what makes websites pretty, and not just page after page of plain text. Unlike other HTML tags, this one doesn't appear in pairs. It is instead used as a place-holder for the images it represents. This is how you would call up your images:

<IMG src=imagename.jpg attributes>

The most common attributes for images are:

  • height = value : You can specify the height of an image in pixels. (Like height = 54) This is usually used to reserve space on your webpage for your image, preventing the text from shifting with each image loaded.
  • width = value : The width attribute functions the same way as the height attribute. It is used for the same reasons.
  • Alt = value : With this attribute you can make a text label that will be used on your webpage before an image loads. (Like alt = "Main Menu Button"). It is usually used to explain what kind of image it is, or its function.
  • Border = value : Sometimes you want to have a border around your image, with this attribute you can specify the width, in pixels, of the border. (Like border = 2)

Linking to other pages

This is the true power of the World Wide Web. Any documents can be linked to any other, wherever they may be. This is done through the A HREF tag. It's usage is with a standard tag pair like so:

<A HREF=yourpage.html>Text that will appear as a link</A>

As you can see, the link tag is very simple, not requiring attributes to function. You can also use this tag on images. This is how people create buttons on their webpages.

<A HREF=yourpage.html>
<IMG src=menubutton.jpg height=10 width=10 border=0 alt="Menu Button 1">
</A>

'Net Resources

With the above tags, you should be well on your way to creating webpages with amazing visuals and exciting content. But if you wish to learn more about HTML and webdesign, you may wish to visit the following sites:

©2002, Isterra Services offered by Primus. All rights reserved.
Acceptable Use Policies
Rates and General Service Agreement