Website Design / HTML

[rfornal]

Sample Index.html

Before you begin, create a folder where you will store the web-pages we are going to create and develop. I would recommend creating a folder called Internet Files on your desktop (this is what I will refer to in future posts.

Now, let's copy the following and paste it into a Notepad document:

<HTML>
     <HEAD>
          <TITLE>{Enter Your Name Here}</TITLE>
     </HEAD>

     <BODY>
          <b>{Enter Your Name Here}</b> <br>
          This is my first Index File.
     </BODY>
</HTML>

[hr]
Notice the new Tag in the code listed, <br>. This is a Break Tag that tells HTML to place a line-break (same as pressing the Enter Key in a word processor) at this location.

[hr]
Read the following COMPLETELY before executing this process:

Once you have pasted this file into Notepad, use the following process to save the file:

1. Click File, then Save As ...
2. Change the Save As Type to All Files
3. Change the File Name to Index.html (YES, the filename is case sentitive)
4. Make sure that Encoding is ANSI
5. Make sure that you are saving into the correct folder
6. Click the Save button to finish this process.

Now that you have saved the file, close Notepad ... open the Internet Files folder ... double-click on the Index.html file to see what you have created.

[JamesBianco]

Bob, this is fun. You are so making my day here

[wldspirit]

Ok.......created the folder, saved as you said........when I click on the folder it opens the index.......but is it supposed to appear in Internet Explorer when I click on the index?

Lisa

[wldspirit]

No fair James......you have experience......LOL.....I am truly fumbling my way thru this.....
Lisa

[rfornal]

Yes, when you double-click the file it should open in Internet Explorer. You just created a basic web-page; it just hasn't been placed on the Internet yet.

Congrats!

[wldspirit]

Woo-Hoo!!!!!!!

It list my name and states this is my first index file!!!!!!!

This is soooo much fun!!!!

Lisa

[rfornal]

Modifying the Index.htm File

Let's re-open the file with Notepad and make some modifications. Right-Click on the file and select Open With, then Notepad. This should open the file and you should now see the code you entered previously.

Locate the <BODY> Tag and change the next few lines to read ...
     <BODY BGCOLOR=lightgray>
          <FONT FACE="Arial, Tahoma" COLOR=blue>
          <b>{Enter Your Name Here}</b> <br>
          This is my first Index File.
          </FONT>
     </BODY>

OK, here we've added a few parts. Within the <BODY> Tag, there is a modifier that changes the background color (BGCOLOR) to light grey.

Also, notice the <FONT> Tag and the modifier that sets the Font Face to Arial (Tahoma, if Arial does not exist on the system) and the Font Color to blue.

Now, click File, then Save to save the changes you just made (notice that it is MUCH easier to save after doing the Save As process the first time).

Finally, double-click the file to see what these changes did to the Index.html file.

[wldspirit]

My whole page is blue....with lighter blue writing??
Lisa

[rfornal]

Correction:

BGCOLOR=lightgrey (not BGCOLOR=lightgray) ...

Sorry

[wldspirit]

That worked!!!!!!!!
Lisa

[rfornal]

Cool - next one in about an hour or so.

[rfornal]

Adding Images

Placing images on a web-page is easy, but keep a couple of things in mind. Often, it is the images that make pages load slowly - smaller is better, but maintain a good balance of size and clarity - smaller is better until you can't tell what the picture was when you started.

There are three basic types of images allowed (there are others, but these are the most common):

1. bmp - Windows Bitmap, very clear and often VERY LARGE.
2. jpg - JPEG, often clear and good size with complex images, but can pixelize (odd fuzzy effect) at times.
3. gif - Compuserve GIF, excellent small file sizes and allows for simple animation types, but often drops clarity because it uses 256 colors maximum.

The best thing that I can tell you until you get more familiar is to use a graphics program like Paint Shop Pro (PSP) to save an image that you want to use in all three formats, then look at the file sizes and view the images on your local page to see how clear they are and choose what fits the situation best (size or clarity).

Select any image and place it into the Internet Files folder.

change ...
This is my first Index File.
... by adding two <br>s ... <br><br>, which we now know means Line Break.

Then, on the next line, add the following code ...
<img src="{image name here}" alt="{short description}" border=1>

OK, now let's take a look at what you just added.

This statement reads, Image Source equals {filename}, Alternate Description equals {description}, Border Size=1.

The alternate description is handy if the image does not load for some reason and also for the vision-impaired.

Border=0 turns the border off.

ENJOY

[rfornal]

I'll post more later tonight ... let's let all this sink in ...

[wldspirit]

All I get is a box with a red x........no picture........
wldspirit

[rfornal]

What is the name of the image file?
     Names must match.
Is it in the same folder as the Index.html file?
     Must be in the same folder.
What code did you add (<img ... >)?
     If those don't work, I need to see that 1 line of code (without the <-> signs).

Going out for dinner, back within 1.5 hrs.