| There are many programs available on the market to help take the
mystery out of creating web sites. In the early days of the
Internet, developers had to be programmers to understand how to
write the code for creating a web site. Today, tools such as
HomeSite, Dreamweaver (advanced users only), FrontPage, and others
are readily available. However, if you need to tweak or
understand the basics of web site editing, this information is
below. Words of caution before we start.
If you are a novice developer, beware of pitfalls when creating web
sites, or you may lose data. Here are a few examples:
1. Perform regular backups on your computer of your web site.
This is CRITICAL. Even though we provide regular backups, they
don't occur during the day and it is considered only as a second
line of defense. When you make numerous changes to your site,
keep a local backup or download from the web site to make sure you
have a recent image of what's on the server. It's a good idea
to keep several versions of your updates as you work. In
general, NEVER trust the server. This is because your uploaded
could become corrupt, or you may make a serious error by working on
a live version, or files may change intentionally or unintentionally
on the the server.
2. Always use unique folder names for your files or data that are
different from the ones used by the hosting company. Two
reasons for this are that hackers know the default names of folders
and files where valuable data is often kept such as shopping cart
data. Don't make it easy for them to hack your system in case
there are any open holes in the program. Secondly, your data
could be modified or lost if you install or remove features from the
control panel or ask us to remove features. Folders to be
careful are include "cgi-bin", "Urchin", "_private", "catalog", and
"stats". If you use unique names, you won't have to worry
about this.
Getting Started with HTML:
Skeleton of an HTML Document
HTML stands for Hyper Text Markup Language. HTML is one
of the easiest programming languages to learn. One of the best things about HTML is that it is "open",
meaning if you see someone's page you like, you can view their source code and see exactly how they
made it (which is sometimes the best way to learn HTML).
HTML documents are made up of "tags". A tag is a command enclosed in <, and > (i.e.
<HTML>). There are opening and closing tags:
| Opening |
Closing |
| <HTML> |
</HTML> |
Notice how the closing tag has a "/". Not all HTML tags need a closing tag, but if
you're not sure, it's better to include one.
There are a few tags necessary for every HTML document (the skeleton of an HTML
document). The following will show you the format of the skeleton and explain each tag:
- <HTML>
- <HEAD>
- <TITLE></TITLE>
- </HEAD>
- <BODY>
- </BODY>
- </HTML>
NOTE: We numbred the skeleton to make it easier to
refer to each line, but DO NOT number your lines when you make your HTML document.
1. <HTML>
The <HTML> tag is the first tag in your document. It tells the Internet
browser that it is reading an HTML document (without it, the browser would think it was viewing a text
document).
2. <HEAD>
We will not deal with the <HEAD> tag too much in this basic tutorial.
It is used for frames, style sheets, META tags, and scripts. We will only use it for our Title.
3. <TITLE></TITLE>
This is the only tag we will use in the <HEAD> tag. It is used to make
the title of the page. The title of the page will appear in the blue bar across the top of your active
window (the title of this page is " Basic HTML Tutorial"). To use this tag, you type your title between
the opening and closing tags.
Example:
<TITLE> Basic HTML Tutorial</TITLE>
4. </HEAD>
This is the closing <HEAD> tag.
5. <BODY>
The <BODY> tag is where the bulk of your web site will be. You will put
all your text, images, and links between the opening and closing <BODY> tags.
Before you add your text, image, and links you need to define some
parameters inside the <BODY> tag:
 | TEXT - this will determine the color of your text
throughout your page. |
| LINK - This will determine the color of your links
through-out your page. |
| VLINK - This will determine the color of your visited
links through-out your page. |
| ALINK - This will determine the color of your active
links through-out your page. |
| BGCOLOR - This will determine the color of your
background through-out your page. |
| BACKGROUND - This will determine the background image
you load through-out your page. |
NOTE: None of these are required, if you
do not set them the default is TEXT=black, LINK=blue, VLINK=purple, ALINK=red, and BGCOLOR=white. Also,
when you define these, it is not necessary to use all of them. If you set a background image then you
would not need to define a background color etc...
Example using BGCOLOR:
<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple"
BGCOLOR="yellow">
Example using BACKGROUND:
<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple"
BACKGROUND="image.gif">
6. </BODY>
This is the closing tag for the <BODY> tag.
7. </HTML>
This is the closing tag for the <HTML> tag. This should be the last
line in your HTML document.
Now that you know the format of the skeleton, you're ready to start making your web
page. It is always a good idea to start out new HTML documents with the skeleton (opposed to just
filling it in as you do it). See if you can remember all the parts of the skeleton and go start your
HTML document now, or copy and paste the code below.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Formatting Tags
Formatting tags are used to format your text. If you've ever used a word processor
before, there are usually three buttons on the top tool bar. The three buttons contain one letter each;
B, I, and U (Bold, Italic, Underline). Formatting tags will let us perform those same functions, but
with our web pages instead of our word processor documents.
We will start with Bold. Since you already understand the concept of opening and
closing tags, this won't be hard.
Bold has it's own tag: <B>. It works this way:
The text will become bold <B>now and will stop being bold</B>
now.
Notice how everything between the <B> and </B> looks bold? That's all there is to it,
just enclose everything you want bold in the bold tags.
The tag for italics is <I> (there is a pattern developing here). The same rules that
applied to the bold tag apply to the italics tag:
The text will become italicized <I>now and will stop being
italicized</I> now.
The same thing happened. Everything enclosed in the italic tag was italicized.
The last tag is the underline tag; <U>. The same rules that applied to the bold and
italic tags apply to the underline tag:
The text will become underlined <U>now and will stop being
underlined</U> now.
Once again, everything between the opening and closing underline tag is underlined.
Now that we know how to change the look of your text, we'll learn how to change the
size.
Changing the size of your text is similar to changing its appearance. There are six
different tags we will use, <H1> through <H6> (largest to smallest). They work exactly like the <B>,
<I>, and <U> tags. Just enclose the text you want it to change with the opening and closing tags.
Example:
| <H1>This would be the largest text </H1>
|
| <H2>This would be the second largest text </H2>
|
| <H3>This would be the third largest text </H3>
|
| <H4>This would be the fourth largest text </H4>
|
| <H5>This would be the fifth largest text </H5>
|
| <H6>This would be the smallest text </H6>
|
So now we know how to change the appearance and size of our text, the only formatting
tags left to cover are the <P> and <BR> tags. These tags are different than the other formatting tags.
These tags change the text hard returns and spacing of sentences and paragraphs.
Hard returns:
Line one<BR>
Line two<BR>
Notice how the line ended after the <BR> tag and a new line started. It basically
performs the duties of the "Enter" or "Return" key in a word processor. Without that <BR> tag, 'Line
two' would stay on the same line as 'Line one' (HTML editors do not recognize traditional formatting.
You have to tell them when to end the line and when to start a paragraph).
NOTE: Your HTML Editor will "wrap" your text. That means
your HTML editor will fit your text to the computer screen. You do not need to type a <BR> every time
you think that the text is getting too long for the screen, only when you need the line to stop.
Paragraphs:
<P>This is a new paragraph.</P>
The paragraph tag puts a blank space above and below the text enclosed in its tags.
It is not completely apparent in the example above, but if you look at the text through out this
tutorial you will notice all the paragraphs have a blank line dividing them.
The ALIGN command can be used within the <P> tag. It has three options (LEFT, CENTER,
and RIGHT. LEFT is the default.).
Example:
<P ALIGN="CENTER">This paragraph will be centered</P>
These are the only formatting tags we will cover in this basic tutorial, if you're
interested in learning more formatting tags, visit our HTML Tag
Reference Page for a growing list of HTML tags.
Making Lists
In this section we will show you how to make bulleted and numbered lists.
The HTML tag for bulleted lists is <UL>. It stands for Unordered List.
The HTML tag for a numbered list is <OL>. It stands for Ordered List. Both the bulleted
lists and the numbered lists need another HTML tag to work; the <LI> tag. It stands for List
Item.
Bulleted Lists:
Numbered Lists:
|
Code: |
Example: |
<OL>
<LI>Item one
<LI>Item two
<LI>Item three
<LI>Item four
<LI>Item five
</OL> |
- Item one
- Item two
- Item three
- Item four
- Item five
|
There are other ways to make lists, but these are the two most supported ways. If you
are interested in finding out the other ways to make lists you can find them in our
HTML Tag Resource.
Making Links
Up until now everything has made sense. The bold tag was <B>, the italic tag was <I>,
and the underline tag was <U>. Naturally you would make the link tag <L> right? Wrong, the link tag is
<A>. It stands for Anchor. There is a good reason they made it an 'A' instead of an 'L'. The <A>
tag is used for so much more than just making links, but making links is its most popular use.
The <A> tag can be used with the commands:
| HREF - This is used as Hypertext Reference, and links
an HTML document to another HTML document. This can be linked to a WWW address, HTML file, or NAME.
|
| NAME - This is used for making the anchor the target
of a link. |
We will start with the HREF command. The three most popular uses of the HREF command
are links, E-mail links, and downloads. We will give an example of each:
| Link |
|
Code: |
Example: |
<A HREF="http://www.sturdylink.com
">sturdylink</A> |
Sturdy Link |
To make the above link, we started the <A> tag and then put an HREF command separated
by a space. HREF stands for Hyper REFerence, so we defined our HREF command by adding an
="http://www.sturdylink.com". By changing that address, you will change the destination of your
link.
| E-mail Link |
| Code: |
Example: |
<A HREF="mailto:george@bush.com">
George Bush</A> |
George Bush |
To make an E-mail link, all you have to do is define the HREF command starting with
the command 'mailto:' followed by the E-mail address (i.e.
mailto:george@bush.com).
| Download |
| Code: |
Example: |
| <A HREF="script.zip">Zipped Script</A> |
XXXXX |
To make a link download a file just define the HREF command with the file name. If
the browser can't read a certain extension (i.e. zip files, exe files, and some image files) it will
think you are trying to download it.
The only other command left for the <A> tag is NAME. The NAME tag is used with the
HREF command. The NAME tag turns the <A> tag into a target. This means you can link not only to a
specific page, but a specific part of a page as well.
The best way to explain this is by example. This tutorial is just one big two-column
HTML page. At the top I have links to the different sections of the tutorial, when
you click on the links they jump to the section you clicked on. This is done with the NAME command.
Example:
First we need to make a target:
<A NAME="TARGET">
 </A>
NOTE - In this example we've targeted an image, but you
can target whatever you like. The most popular is text.
Next we need to make a link to the target. Linking to a target is a little different
than making a regular link. To link to a target you must include the pound sign (#) before the name of
the target. Since our target name is TARGET the link would be #TARGET.
The NAME command is extremely useful in a large HTML document.
NOTE - We made the link an image. You don't have to use
an image. The most popular link is simple text.
You can link to targets that are in a different HTML page by just including the
address followed by the pound sign and name of the target (i.e. http://www.DOMAIN_NAME.com#TARGET_NAME).
Loading Images
There are two formats of images you may use with the Internet; GIF's and JPEG's.
JPEG's are high quality, but usually have a large file size (making them slower to load). GIF's have a
smaller file size, but you give up some image quality (making them faster to load).
To load images you use the image tag (<IMG>). Just like the <A> tag, the <IMG> tag
has commands you must define inside of the tag:
SRC - This is the SouRCe of
the image. This would be the image name or location if not in the same directory as the HTML page that
is calling it.
WIDTH - Use this command to define the
width of the image in pixels.
HEIGHT - Use this command to define the
height of the image in pixels.
BORDER - Use this command to set a visible
border around your image (set it to zero when linking images if you don't want a visible border).
ALT - The ALT command stands for ALTernate
text. Use this command to place a short description on the image (used for non graphical browsers and
backup in case your image does not load).
ALIGN - By adding this tag you will make
the text wrap around the image. There are three options (left, right, and center).
Now that we know the IMG tag and all the commands, we can learn how to put it
together:
<IMG SRC="search.gif" WIDTH="239" HEIGHT="70" BORDER="0"
ALT="LOGO">
You do not need to have the image in the same directory as the HTML page to load it.
You may place an absolute address in the source command and pull an image from another site:
| Code: |
Example: |
<IMG SRC="http://microsoft.com/library/
toolbar/images/mslogo.gif" WIDTH="112" HEIGHT="40" BORDER="0" ALT="MICROSOFT LOGO"> |
 |
Making Image Links
Now that we can make links and load images, we can combine the two and make Image
links. Image links are just images that are hyperlinked to another Internet site, E-mail links, or
downloads.
To make image links, start with the <A> tag, define it just like you would a text
link, but instead of typing text in between the opening and closing tags, load an image:
<A HREF="http://www.topnotchcompany.com
.com"><IMG SRC="logo.gif" WIDTH="189" HEIGHT="58" BORDER="0" ALT="LOGO"></A>
To make an image link for E-mail or downloads just modify the <A> tag like the
Making Links section specifies.
FAQ
This section will answer some Frequently Asked Questions about
HTML.
Q: Is HTML case sensitive?
A: No. I have typed all of the tags in this tutorial in uppercase to help separate
them from the other text. This means that <HTML> is the same as <html>, <HtMl>, <hTmL>, etc... Even
though it is not case sensitive, it is good practice to stay constant with what ever you pick
through-out the HTML document. Technically "XHTML" - the next version of HTML - is case sensitive, so
it's a good practice to adopt for the future!
Q: Does every tag require a closing tag?
A: No. As I mentioned earlier in this tutorial, not every tag requires a closing tag,
but since there is no pattern to which ones require a closing tag and which ones don't, it's safer to
include one if you don't know. Again, for the future, XHTML does require all closed tags.
Q: Do you have to enclose all parameters with quotes (" ")?
A: No. There isn't a pattern for this either, so once again, if your not sure if
there needs to be quotes around something or not, it's safer to put the quotes. Also, it's good
practice to stay constant with whatever you choose.
Q: Do you offer an advanced HTML tutorial?
A: No. But we do offer an HTML Tag Reference that
explains most of the HTML tags, and HTML Guides which provides
for links to sample code, tutorials, and more. |
