This tutorial WAS based upon using Yahoo/GeoCities as the site for a Web page because it was free and easily accessible through their File Manager. Yahoo/Geocities will no longer be available as of October 26, 2009, except for a fee. See GeoCities Closing At the moment GeoCities File Manager is still available. The best alternative is to use the Web space most ISP's provide. Contact your ISP to find out whether they provide Web space and how to establish a presence. Once a presence is available, this tutorial will show how to complete the page(s). If your ISP does not provide space you may have to buy a Web site and maybe a domain name from such as Go Daddy. Go Daddy offers very inexpensive domain names and one free host page, but the free host page carries Go Daddy advertising. To avoid the advertising there is a monthly charge.You will need at least 10 mg of space. Earthlink (my ISP) gives 10mb per identity and offers 8 identities.

You are DEFINITELY going to have some fun creating your own Web page.




Webmasters
Basic Tools Editing Basics Create Index Page Tags Editing Hidden Comments Downloads Sound Backgrounds Colors Fonts Word Art
Special Tags Alignment Tags Rules Marquees Links Home Link Frag Links Email Me Creating a New Page
Images IrfanView Images with text Images that are links Tables Double Borders Frames Forms Comments Form
Date and time of the last update to this page.

WARNING!!!
You may be tempted to print this "page" as a reference while creating your Web page,
BUT be advised that it is about 66 pages long.
Look how teeny the slider is over on the right!
If you MUST have a copy (and remember it is constantly being changed)
use Edit / Select All / Copy and paste to Word and then print.

There are two ways to build a Web page. Using a WEB PAGE BUILDER or writing the actual code (HTML). I find writing the code more creative, more flexible and (unfortunately) more addictive. There are many Page Builder programs available at reasonable prices in most stores. Some ISP's offer a free Page Builder and there are free Page Builders available on the Web. I prefer to write the code myself and the following instructions are for writing your own HTML code rather than using a Page Builder. (NOTE: A Page Builder is very different from a Page Editor. In a Page Editor, you write code!) After that, of course, you may try each. Remember that if you have built a page by writing the code and then use a Page Builder program on it, the original page will be wiped out. And vice versa.



It is possible to edit web pages online or offline. Editing offline means editing the Web pages in your personal computer and then copying the material to the Web site. The offline method has the advantage of maintaining a backup copy of all the work (just in case!) and is the recommended procedure!! Editing offline does not tie up the phone line if one is using a dial-up connection, and it cuts down on connection time if one is paying by the hour for connection time. Writing the code is the same, no matter what method is used to edit the Web pages.

There are two methods of editing the Web pages offline. One method involves editing the Web page in Explorer and the other uses an editor. I prefer the editor because the code page versus the finished page can be readily switched so you can see the changes quickly. Below is shown (1) how to set up the Explorer files and folders and (2) where to download a free Editor. After the files are edited the revised pages are transferred UP to the Web page using a program called a File Transfer Program (FTP). One of these (WS_FTP LE) can be downloaded free (see below).

The code of the Web page can be edited ONLINE using the FTP program. The method to do this will be described below. When editing is done this way, the Web page must be refreshed after each change to see the effects. Lastly after the updated page is satisfactory, the changed areas must be copied to the computer file to have a backup copy. For all of this work, some basic programs, files and folders must be downloaded or generated. How to do this is described below.



Basic Tools Needed To Get Started

Host and URL

As mentioned above, before starting a Web page a host must be found, whether that is your ISP or another. Then it must be determined what the URL for the page will be. The owner of the page should have input into the URL, perhaps containing the sign-in user name.

MyWeb Folder

In order to edit offline, a folder must be created to contain all the pages, images , midis, photos, etc. that are needed for the Web site. This folder will be the "backup" to the Web page(s). It is recommended that the folder MyWeb be created for this purpose. It is recommended that this new folder be created in your User Name folder. The following shows a typical MyWeb folder set up in the User folder (per Vista).




File Transfer Program

In order to transfer your pages, images, midis, photos, etc. to the Web one must have a File Transfer Program. The one I use, and I recommend it is WS_FTP LE by Ipswitch. The newer versions cost money, but the old version 5.08 is freely downloaded and works well. It can be downloaded from Free Downloads.
Editing is still done offline and the changes FTPed to the Website. Once the FTP program is loaded to your system, establish a shortcut to the program in the Start menu. Clicking on the Shortcut (starting the program) for the first time will bring up a group of tabs as shown below. The FTP program will need information filled in to know from where to take the data and where to transfer the data. These two sites are called the "Local System" and the "Remote Site". The following shows the typical FTP interface and the parameters of setting it up. The General tab is shown with typical information.



Profile Name: Lawfel
Host Name: ftp.www,earthlink.net
Host Type: UNIX (standard)
NOTE: Lots of sites use "Automatic Detect" instead of UNIX.
User ID: lawfel@earthlink.net
Password: ******
Account: From ISP - Generally Blank
Save Password:Checked


The following is typical information under the Startup tab :



Initial Remote Site Folder:By ISP - Generally Blank
Initial Local Folder: (in my case) C:/Users/Lawrence/MyWeb/Lawfel. The rest of the Startup tab is generally left blank.


The following is typical information under the Advanced tab:



Connection retries:0
Network timeout:65
Remote Port:Mine is 21
Passive transfer:Checked


Under the Firewall tab, nothing is usually checked.



To set "Notepad" (recommended) as the program for editing click Options\General\Text Viewer and put Notepad in the window.


Once the FTP data is entered and the local and remote folders are set up, starting the program and clicking on "Connect" loads a window such as below. Note the left side contains all the files in the Local System and the right side contains all the data in the Remote Site. See the two arrows in the middle!! These are the transfer arrows, transferring that which is highlighted in the one side to the other. Be careful when a transfer is to be made that the transfer is in the correct direction, that the newer version is being tranferred to replace the older version.




The following will describe the three ways a Web page is created and edited. The actual code is the same.


USING EXPLORER TO EDIT WEB PAGES
Click on the START button. On the right (in Vista) at the top should be the "user" account. Click on it to open the user account. The user folder should contain the folder "MyWeb" that was created. Click on the folder to open the files, which will appear on the right (as seen below). All the files needed for the Web page should be seen. If not, they must be added before editing the Web page.
All editing is done on the right side. In the beginning you will be editing the "index" page (which will be generated later). Click on the "index" page and it will load to the screen. Click on View/Source and the Code page will load. Make all the desired corrections and/or additions to the code and click on "File/Save". Close the code page, refresh the Web page and make sure the additions/corrections are correct. The Web page has just been changed..but offline!
Load the FTP program, select Connect and transfer the new page left to right (local to remote). The remote Web page has now been changed. Check it out. If any new images, etc. have been added these will have to be FTPed, also, from the local to the remote location.





USING AN EDITOR TO EDIT WEB PAGES (Recommended)
Independent editors can be used to edit Web pages in much the same way Explorer is used.
The Editor program is loaded, the Web page to be edited is "Opened", corrections/additions are made and the result is Saved. This process changes the local copy of the Web page. The new local page must then be FTPed to the remote location with the FTP program. I like EditPadLite and find it more convenient to use than Explorer. (A free copy of the Program is available at http://www.editpadlite.com/editpadlite.html ). Tom uses NotePad.lite. (Free at http://www.notepad.com/ntl.htm). The image below shows EditPad open for editing this Web page.





EDITING ONLINE IN FTP PROGRAM

Editing within the FTP program is done after connecting to the remote files which gives a screen such as the one shown below. Notice the local files are on the left and the remote files are on the right. The procedure is to edit the files on the right, which edits the Web page (after saving) and then transfer the edited page(s) to the local folder using the arrow in the middle.

In the illustration below the "index" has been selected (highlighted) because that is the page that is to be edited.


Right clicking on "index" and selecting "edit" produces the code page as shown below. Editing is done, saved and The FTP program closed (but always transfer new page to local folder for safety). Refreshing the Web page will show the changes.





CREATING THE "index" PAGE.

The first page necessary for Web page presence is an"index" page. This tutorial recommends that the page be created in the page editor EditPad. Open the program. Type the following:

<HTML><BR>
<HEAD><BR>
<TITLE>Your name @ your ISP</TITLE><BR>
</HEAD><BR>
<BODY><BR>
<BR>
HELLO!<BR>
<BR>
</BODY><BR>
</HTML>


The following is how the EditPad page (we will refer to this page as the "code" page) should look after the above steps are complete. Each of the groupings of words and arrow heads is called a "Tag". Example: "<HTML>" is the initial tag of every page.



The next step is to SAVE what has been done so far.
Click on "File">"Save" on the menu bar.
At the right end of the tool bar is a green tool that will allow the viewing of the Web page as coded.
This makes the EditPad easier to check results than editing in Explorer or within the FTP. The Web page should look like the following with just the word "HELLO!" on it ...
HELLO!








Congratulations..You now have your own Web page. Not much is on it BUT it is your own.
Second BUT..the page is not on the Web yet, only in your local folder. Close EditPad and open the FTP program. Highlight "index" on the right. Click the forward arrow to transfer the "index" to the remote site. NOW, you have a Web page. The rest of adding words, pictures, sounds and links is just as easy except there are additional tags to be learned.
Remember, the Internet Browser is not smart enough to guess,
so coding must be EXACT.


REFERENCES..
There are lots of books that have instructions for writing HTML (Hypertext Markup Language). I would suggest not buying any yet. The one I found helpful is shown below. There are an infinite number of web sites devoted to Web page building. Use any search engine (search for "HTML") to find useful ones. Here's one that seems quite comprehensive.. http://htmlcodetutorial.com/
My Create A Page is aimed at giving you the fundamentals to enjoy Web page building without any other reference.




EDITING YOUR PAGES


 Tags
Now look at the code of the page so far by starting EditPad and opening yor "index" page. NOTE: This procedure, to get to the code of your page will be used every time it is necessary to write or change the HTML code.
The words and arrow heads (the less than symbol (<) and the more than symbol (>)) together are called TAGS.
There are two kinds of tags - container tags and empty tags. A container tag is really two tags. The first is an "opening" tag such as <HTML>. The second (of the pair) is the "closing" tag (with the "/"). Example: </HTML>. The HTML tag, the TITLE tag and the BODY tag are examples of container tags. Most tags are container tags.

Tag attributes tell the browser how to treat the tag.
Attributes are usually written within the tag but some stand alone.
Examples of attributes are size and color for a font or alignment for an image.
The table tag has 22 attributes.
Always nest container tags (that is, the first one to close is the last one opened).

In addition to the "less than" character (<) (arrow head left) and the "more than" character (>) (arrow head right) there are two more characters that are used extensively in writing code. They are the slash (/) (the one on the bottom line of the keyboard) and the quote sign (").
HIDDEN COMMENTS
Comments can be written on the code page that do not show on the Web page.
Generally these are for personal information for the WebMaster.
The comments are preceded by <!-- and followed by -->.
If these comments show on the Web page something has been incorrectly written.
Use comments freely to remind what and why something is done.
Add the following to your page:

<!--THIS IS A HIDDEN COMMENT-->
SOUND AND BACKGROUND

Sounds and backgrounds are added to a page to give it some individuality and interest. I enjoy using both. For this exercise the sound of the midi "wish" and a background of "smileys" shall be used. These have to be downloaded from somewhere and the following can be used to download them. Remember!!...all files being used MUST be in the MyWeb folder (and subsequently uploaded to the remote folder).Millions of sounds and backgrounds are available free on the Internet. Using Google to find a particular sound or background is the simpliest method.

To download the smileys, right click on the image and from the resulting menu select "Save Picture As" - Name it "smileys" - Save it to the MyWeb folder.
Download the SeniorNet logo the same way, naming it "seniornet".
To download the music, use "Save Target As" from the same menu, call it "wish" and save it to the MyWeb.
The MyWeb folder should now have 4 items ("smileys", "seniornet", "wish" and the "index" page).

NOTE: Some Hosts differentiate between upper case letters and lower case letters, so it is suggested that lower case letters be used at all times for naming files. Short, descriptive names also help.

Open the FTP program and upload (click right pointed arrow) the .gif background, the .jpg image and the .midi music.
The remote folder should now have the same 4 items.


ADDING SOUND
The background sound - in this case, music - is generally added directly after closing the HEAD of the page and before the BODY tag. Add sound to the index page as shown below:

<HTML>
<HEAD>
<TITLE>Your Name @ Your ISP</TITLE>
</HEAD>
<BGSOUND SRC="wish.mid">
<BODY>

<!--THIS IS A HIDDEN COMMENT-->

HELLO!

</BODY>
</HTML>



"Save" the code page and view the index page with the midi "wish" now added. The page should not change in appearance, but you should be able to hear the midi. Now the index page has a background sound (music), but should (still) look like the following:


HELLO!
BACKGROUNDS
Backgrounds to a page can be a color or an image.
Both of these are added to the page as an attribute of the <BODY> tag.
THIS MEANS THE BODY TAG CHANGES - THERE SHOULD ALWAYS BE ONLY ONE BODY TAG!!

The number of colors for a background is extremely large. Color charts are available that give the names and/or code numbers of all of them. See the links below. The following are examples of some of the colors (by name) that can be used:

 Colors
black white aqua blue fuchsia gray green lime maroon navy olive purple red silver teal yellow


The Color Cube
The Color Chart
All the Web colors by O'Reilly)


The following is an example of how to write the code for a yellow background:

<BODY BGCOLOR="yellow">

Change the BODY tag on your page and see the yellow background. It should look like the following:

HELLO!










The second style of adding background is by using an image (such as the "smileys") and this style shall be used for the Web page being created. First, make the yellow background a HIDDEN COMMENT so you have a reminder how to do it.

The finished code would be
<!--BODY BGCOLOR="yellow"-->

Then, write the following code for the "smileys" background as a new BODY tag:

<BODY BACKGROUND="smileys.jpg”>
The .jpg extension (or whatever) is always needed!!

The "index" page code should now be as follows:

<HTML>
<HEAD>
<TITLE>Your Name @ Yahoo</TITLE>
</HEAD>
<BGSOUND SRC="wish.mid">
<!--<BODY BGCOLOR="yellow">-->
<BODY BACKGROUND="smileys.jpg”>

<!--THIS IS A HIDDEN COMMENT-->

HELLO!

</BODY>
</HTML>


"Save" the code page and view the index page with the smileys.
It should look like the following:

HELLO!










Animated backgrounds make interesting pages, although they are not usually very practical. They are created by using an animated .gif. The following is an example of the page with an animated .gif background:

HELLO!


We'll stick with the "smileys" background for this instruction.




Another "body" attribute available to set before writing the actual page is the colors of the LINKS as they will appear on the finished page. This is not a requirement. IE will assign colors if the Webmaster does not. REMEMBER!! This is an addition to the existing BODY tag, not a new tag. Specify LINK colors as follows:

<BODY BACKGROUND="smileys.jpg" LINK="green" VLINK="orange" ALINK="yellow">
A VLINK is a visited link. An ALINK is an actuated link.






Now we are ready to work on the BODY of the page. See the opening and closing "BODY" tags.
ALL WORDS, IMAGES, LINKS, ETC. ARE INSERTED BETWEEN THESE "BODY" TAGS (called "body of page") such as the word "HELLO!" that has been inserted.

BUT first upload what has been done, so far, to the remote folder by using the FTP program.



Fonts

The base font can be set in the HEAD of the page- I do not recommend this but the following is how it is done:

<BASEFONT FACE="arial" SIZE="4" COLOR="black">
NOTE: IE browser default is Times New Roman, 3 and black.
A different default can be set at Tools / Internet Options / General / Fonts

The FONT tag is a container tag (one that has an opening and a closing tag).
Attributes available are FACE, SIZE and COLOR.
The "HELLO!" on the index page is at the default.
Go back and change "HELLO!" to arial, size 5 and green.
Also use the CENTER tag to center the HELLO! on the page.

The font code should now look like this:
<CENTER><FONT FACE="arial" SIZE="5" COLOR="green">HELLO!</FONT></CENTER>

The code page should look like this:
<HTML>
<HEAD>
<TITLE>Your Name @ Yahoo</TITLE>
</HEAD>
<BGSOUND SRC="wish.mid">
<!--<BODY BGCOLOR="yellow">-->
<BODY BACKGROUND="smileys.jpg”>

<!--THIS IS A HIDDEN COMMENT-->

<CENTER><FONT FACE="arial" SIZE="5" COLOR="green">HELLO!</FONT></CENTER>

</BODY>
</HTML>



The Web page should look like this:
HELLO!











A few other things that can be done with fonts are:
Emphasize the first letter:
<FONT FACE="arial black" SIZE="20" COLOR="red">E</FONT>
<FONT FACE="arial" SIZE="5" COLOR="black">mphasize the first letter!</FONT>
E mphasize the first letter!

Use an image:
<IMG SRC="e.gif">
<FONT FACE="arial" SIZE="5" COLOR="black">mphasize the first letter!</FONT>

mphasize the first letter!

WordArt - available in MSWord - can be used to create some interesting titles such as the one above.
The words created are in the form of .gif's.
The WordArt tool is available at the Insert tab of 2007 Word.
Click on the "A" and form text.
Save as Web Page in a folder (I use "HTML / Images / Cool Text / WordArt")
An HTML document and a folder will be created.
The folder will contain the image (.gif) and a file list.
Use the .gif as an image for Web pages or in a Word or Excel document.
The file list and the HTML document can be deleted.
My "WordArt" folder contains only the WordArt images I have created.

Another interesting set of fonts is the Animated Animal letters. The full set can be viewed and/or downloaded from my page "aanimals.html"

Lastly, the symbols and pictures of the fonts such as Holidays, Milestones, the Mini series and Wingdings are all available if you designate that font face.

Caution:
Despite the font face you designate, the viewer of the page will be restricted to the fonts available in that computer.
The page may look different because of the change in font.
Click here to see the fonts I like.
Does the computer you are using show all of them???


Special Tags
The<BR> tag supplies a "line break", that is, it forces the page to skip a line. It is used frequently. It is an "empty" tag - it does not require a closing companion tag. It can be used as many times as desired to skip multiple lines:
Try putting 3 <BR>'s in front of "HELLO!" and see that the <BR>'s reposition the "HELLO!" downward. There is no limit to the <BR>'s that can be used on a page.

The <P> tag is similar to the <BR> tag except it is called a "paragraph break".
I rarely use the <P> tag.

The following are three more special tags that can be used to make selections bold, italicized or underlined. They are all container tags requiring a companion closing tag:

<B>...</B>Makes text bold.

<I>...</I>Italicizes.

<U>...</U>Underlines.

The following are some "ALIGNMENT" tags:

<CENTER>...</CENTER>Centers text or image horizontally on page.

<P ALIGN="left">...</P>Left aligns new text or images.

<P ALIGN="center">...</P>Centers new text or images. (I prefer <CENTER>)

<P ALIGN="right">...</P>Right aligns new text or images.

RULES

Rules (Lines across a page) are great for page emphasis and decoration:
The RULE tag is an "empty" tag (no closure needed):

The following is the code for the default Rule which has virtually no HEIGHT, and stretches across the entire page.

<HR>

It will appear on the page as the following:


The following is the code for the default Rule but adding a "SIZE" of 20 (pixels).

<HR SIZE="20">

It will appear on the page as the following:


The following are the codes for Rules adding WIDTH, ALIGNMENT & COLOR:

<HR SIZE="4" WIDTH="80%" ALIGN="left" COLOR="red">

<HR SIZE="10" WIDTH="60%" ALIGN="center" COLOR="blue">

<HR SIZE="20" WIDTH="40%" ALIGN="right" COLOR="green">



Vertical Rules (Horizontal Rules with the SIZE and WIDTH adjusted to make it look like a vertical line:

<HR SIZE="100" WIDTH="5" ALIGN="center" COLOR="red">


Vertical and Horizontal Rules:







 MARQUEES

Marquees are moving messages or images and are inserted in the body of the page. Marquees are fun. They can be made to go left to right, right to left, part of the page, all of the page, up or down, and the area of the movement can be restricted.
We shall look at the code for these different behaviors.
The default (no attributes) is a marquee that travels across the whole page continuously and from right to left.
The code for the default consists of just the opening and closing tags with the message between, as follows:

<MARQUEE>Default </MARQUEE> Default



Now lets change from the default font to an Arial, 5 and red. The code would be:

<MARQUEE><FONT FACE="arial" SIZE="5" COLOR="red">
Arial, 5 and red - Still right to left!</MARQUEE> Arial, 5 and red - Still right to left!


Some of the attributes available for Marquees:
BEHAVIOR - alternate, scroll (default)
DIRECTION - left (default), right, up, down
HEIGHT - in pixels
BGCOLOR
WIDTH - in pixels or percent of screen
SCROLLDELAY - in milliseconds
LOOP - number of loops - default is continuous
<MARQUEE BEHAVIOR="alternate"> Alternate Loop</FONT></MARQUEE> Alternate Loop


<MARQUEE DIRECTION="right"> Right Loop</MARQUEE> Right Loop


<MARQUEE DIRECTION="up"> Up Loop</MARQUEE> Up Loop (Default is a right position)


<MARQUEE DIRECTION="down"><P ALIGN="right">
<FONT FACE="arial" SIZE="5" COLOR="red"> Down Loop</FONT></P></MARQUEE>

Down Loop





<MARQUEE DIRECTION="down" HEIGHT="40">
Down Loop With Height Attribute</MARQUEE> Down Loop With Height Attribute



<MARQUEE BEHAVIOR="alternate" BGCOLOR="red">
<FONT FACE="arial" SIZE="5" COLOR="white">
Alternating Marquee with background color attribute</MARQUEE> Alternating Marquee with background color attribute



<CENTER> <MARQUEE BEHAVIOR="alternate" BGCOLOR="red" WIDTH="200">
<FONT FACE="arial" SIZE="5" COLOR="white">
Using the WIDTH attribute (in pixels)</MARQUEE>
Width=200



<CENTER> <MARQUEE BEHAVIOR="alternate" BGCOLOR="red" WIDTH="50%">
<FONT FACE="arial" SIZE="5" COLOR="white">
Using the WIDTH attribute (in percent)</MARQUEE>
Width="50%"



<MARQUEE BGCOLOR="red" SCROLLDELAY="900">
<FONT FACE="arial" SIZE="5" COLOR="white">
Using "SCROLLDELAY" (milliseconds)</MARQUEE> 900 millisecond delay







LINKS

Links are a large part of any Web page. They are words or images that when clicked on, bring up another page, another part of another page, another part of the same page or in some cases a music target.
LINK TAGS ARE CONTAINER TAGS!!! This means there MUST be a closing tag. Many problems are caused when the closing tag is forgotten or either tag has the SLIGHTEST error.
The following shows links that use text as the link.
Later, in the Images instruction, links that use images will be reviewed.
NOTE!! WORDS THAT ARE LINKS ARE UNDERLINED!!


Links to other HTML documents:

Put the following on the code page:<A HREF="http://www.seniorsnoworlando.org"> Seniors Now Orlando</A>
The following link should now be on the "index" page.
Seniors Now Orlando


Links to sub-pages in other HTML documents:

Put the following on the code page:<A HREF="http://home.earthlink.net/~lawfel/acursor-circles.html"> Sub page</A>
The following link should now be on the "index" page.
Sub page


Links to sub-pages in same HTML document:

Put the following on the code page:<A HREF="amynotes.html">My Notes</A>
The following link should now be on the "index" page.
My Notes
NOTE: There is no "My Notes" page at this point!!
The creation of one follows this section.


Link from a sub-page to "index" page of same HTML document:

Put the following on the code page:<A HREF="index.html">My Home Page</A>
The following link should now be on the "index" page.
My Home Page


Links to music in same HTML document:

Put the following on the code page:<A HREF="phantom.mid">Phantom Of The Opera</A>
The following link should now be on the "index" page.
But their will be no action until the target midi is uploaded to the File Manager!!
Phantom Of The Opera

"Frag" Links
"Frag" links are links to another part of a page.
All the links near the top of this page are "frag" links to other parts of this tutorial.
As an exercise the following will establish a "frag" link to the "Hello" initially put on your "index" page.
There are two tags to be written. One at the pointing spot and the other at the target spot.

Add the following at the lowest spot on the "index" page, within the BODY tags. This will be the "pointing spot".
<A HREF="#hello">Back to Hello</A>.

Back to Hello!

Add the following next to the Hello above. This is the Target spot. <A NAME="hello">.

Next, click on the "Back to Hello" link above.

Email Me Link
Here's how to put a link on the page for readers to email anyone:

<A HREF=mailto:lawfel@earthlink.net> Email Me</A>
(WARNING!! - This link works!!!)

Email me






The next exercise is to create a second page (which is simplier than most of what we've already done).
The second page will be called "amynotes" and will contain all the work we have done so far plus all future notes and exercises.
The "index" page will be cleaned up to "look nice" for anyone that might click on it.
The "amynotes" page will be linked to the "index" page and v.v.
---------------------------------
Open the "index" page in EditPad.
Click on File > Save As and name it "amynotes.html"
NOTE: The naming of pages is important since the name becomes part of the URL.
NO SPACES ALLOWED!!
Click on the "New" button.
Name the new page "index.html".
In the EditPad white area add the basic tags of a new page as done initially to create the first page.
This time, instead of "Hello" insert a link to the "amynotes" page, and a BODY color of yellow as follows:

<HTML>
<HEAD>
<TITLE>Your Name @ WhoEver</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">

<A HREF="amynotes.html">My Notes</A>

</BODY>
</HTML>


Insert a picture of Mickey Mouse by copying the image below and using the tag shown below.
Instead of the Mickey image you might want to insert a picture of this class.
Also add to the "amynotes" tag to force it to the right bottom corner of the page.
The code of the "index" page should now look like the following:

<HTML>
<HEAD>
<TITLE>Your Name @ WhoEver</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">

<CENTER><IMG SRC="mickeywflowers.gif">

<BR><BR><BR>

<P ALIGN="right"><A HREF="amynotes.html">My Notes</A>

</BODY>
</HTML>



The new "index" page should look like the following:

My Notes




Thats all there is to it.
An alternate new index page!!
IMAGES

Images are also a large part of a Web page - if the Webmaster desires. Images can be animated, non-animated or photos. Using the WIDTH and HEIGHT of an image is not a requirement BUT it gives the Browser advance knowledge of the spaces needed and generally speeds up the page loading. Images are fairly easy to add to a page. The tricky part, addressed below, is the positioning of the image(s). Another consideration when adding images or pictures (especially pictures) to a page is to size them BEFORE they are uploaded to the File Manager.
An extremely useful (and free) program is IrfanView. IrfanView allows resizing of images and pictures and can be used for many other operations such as changing color depth, cutting or cropping, sharpening, making a slideshow and can be used as a multimedia player. See IrfanView on classroom computers by clicking on a file of an image. Download a free copy from the following link:

IrfanView.com



Image at left of page (default):

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">






A well used attribute of IMAGES is ALIGN, used to place the IMAGE in a specific place on the page.


Image at center of page:

<IMG ALIGN="center" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">



I find it easier, for centering an image to use the CENTER tag:

<CENTER><IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">



Image at right of page:

<IMG ALIGN="right" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">





Another attribute used with Images is BORDER, which adds a border to the Image. A BORDER generally improves the appearance of the image, but is up to the WebMaster. The following code adds a border to the Seniors Now image.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" BORDER="5">




The BORDER can be any size. The following is the code for a larger BORDER:
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" BORDER="20">




MULTIPLE IMAGES

Two images - left and right.

<IMG ALIGN="left" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG ALIGN="right" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
A<BR>may be needed to align 2nd image vertically.






Two images centered.

<CENTER><IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">




Three images - left, right and center.

<IMG ALIGN="left" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG ALIGN="right" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG ALIGN="center" SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">




Three images centered.

<CENTER><IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">




Adding space between images.

<CENTER><IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" HSPACE="45">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" HSPACE="25">





ANIMATED IMAGES

Animated images are coded onto a page the same as stationary images.
Download the following to your HTML file and call it "hello".

Add it to your page with the simple code:
<CENTER><IMG SRC="hello.gif"></CENTER>
One difference - Animated images usually do not have WIDTH or HEIGHT attributes.

IMAGES WITH TEXT

Text on right at bottom(default):

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">Text

Text


Text on right at top:

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" ALIGN=top>Text.

Text.


Text on right at middle:

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" ALIGN=middle>Text.

Text.


Text centered under image.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55"><BR>Text.


Text


Text to left of image.

Text.<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">

Text.


Text above image.

Text.<BR><IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55">

Text.



Adding space between image and text.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" HSPACE="10">Text

Text

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" HSPACE="30">Text

Text


Text wrapping to left of image.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" ALIGN="right">(The "right" is for the image.)<P ALIGN="right">(This one is for the text.) Text. Text. Text Text. Etc.

Text. Text. Text Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.


Text wrapping to right of image.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" ALIGN="left"> (The "left" is for the image.)<P ALIGN="left">(This one is for the text.) Text. Text. Text Text. Etc.

Text. Text. Text Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.

Using HSPACE between image and text.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" ALIGN="left" HSPACE="30"> Text. Text. Text Text. Etc.

Text. Text. Text Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.

Using VSPACE between image and text.

<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" ALIGN="left" VSPACE="30"> Text. Text. Text Text. Etc.

Text. Text. Text Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.




Now lets put our knowledge of LINKS and IMAGES together.
The next examples use IMAGEs (mostly animated) as the links .
NOTE!! IMAGES THAT ARE LINKS HAVE A BORDER UNLESS .. "BORDER="0"!!


LINK TO SENIORS NOW ORLANDO
<A HREF="http://www.seniornsnoworlando.org">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55" BORDER="0"></A>



LINK TO A SUB-PAGE OF MY WEB PAGE
<A HREF="http://home.earthlink.net/~lawfel/acursor-circles.html">
<IMG SRC="computerman.gif" BORDER="0"></A>



LINK TO HOME PAGE
<A HREF="index.html"><IMG SRC="home93.gif"></A>
NOTE!! Here "BORDER="0" was not used resulting in the small red border.



LINK TO MY ORLANDO SCENES PAGE - WITH TEXT AND USING A PICTURE AS THE IMAGE
<A HREF="aorlandoscenes.html">
<IMG SRC="orlando-swanboat1a.jpg" WIDTH="80" HEIGHT="55" BORDER="0">
<FONT FACE="algerian" SIZE="3" COLOR="blue">Scenes Of Orlando</FONT></A>


Scenes Of Orlando


Email Me Link
(THESE ARE FOR EXAMPLE ONLY!! THEY DO NOT WORK!!)
(USE EMAIL ME LINK AT VERY BOTTOM TO MESSAGE ME)

<A HREF=mailto:youremailaddress> <IMG SRC=email1.gif BORDER="0"></A>
<A HREF=mailto:youremailaddress> <IMG SRC=email2.gif BORDER="0"></A>
<A HREF=mailto:youremailaddress> <IMG SRC=email3.gif BORDER="0"></A>











THE TABLE TAG

Tables are constructed like spread sheets with rows and columns.
Each block of data is called a CELL.
To add a TABLE to a page requires a TABLE tag, a ROW tag and a DATA tag.
Each of these tags is a container tag (requiring an opening and a closing).
The TABLE tag is <TABLE>. The ROW tag is <TR>. The DATA tag is <TD>.

The simpliest of tables would be:
<TABLE BORDER="1"><TR><TD>Simple Table</TD></TR></TABLE>

Simple Table

The attribute "BORDER="1" was added above so that the table would be visible .
Without the "BORDER="1" the table would look like the following.
Someone looking at the following would not know there was a TABLE in the code.
The technique is useful to columnize data without lines or align data on a page.

Simple Table Without Border


More about Borders later. Now we will stick with BORDER="1".

A second data cell on the same row would be added as follows:

<TABLE BORDER="1"><TR><TD>Cell 1</TD><TD>Cell 2</TD> </TR></TABLE>

Cell 1Cell 2

A second row of data cells would be added as follows:

<TABLE BORDER="1"><TR><TD>Cell 1A</TD><TD>Cell 1B</TD> </TR>
<TR><TD>Cell 2A</TD><TD>Cell 2B</TD> </TR> </TABLE>

Cell 1ACell 1B
Cell 2ACell 2B

In the same way our table can be expanded as follows:

<TABLE BORDER="1">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C




The TABLE tag can use many different attributes (enhancements added into the tag).
Additionally the CELLS can use many different attributes.
This page shall review the following 9 Table attributes and 7 Cell attributes.
Table attributes
Border
Border color
CellSpacing
CellPadding
Alignment
Width
Height
Background color
Background image

Cell attributes
Background color
Background image
Alignment
Spanning rows
Spanning columns
Font
Header font


===========TABLE ATTRIBUTES============

The BORDER attribute is added as follows:

<TABLE BORDER="1">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


The BORDER is enlarged as follows:

<TABLE BORDER="20">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>
1A1B1C
2A2B2C
3A3B3C


The BORDER COLOR attribute is added as follows:

<TABLE BORDER="10" BORDERCOLOR="red">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


The CELLSPACING attribute adds space between cells.

<TABLE BORDER="10" CELLSPACING="20">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


The CELLPADDING attribute adds space within each cell.

<TABLE BORDER="10" CELLPADDING="30">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


The ALIGN attribute horizontally aligns table on page (left, center, right).

<TABLE BORDER="10" ALIGN="left">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


1A1B1C
2A2B2C
3A3B3C


1A1B1C
2A2B2C
3A3B3C






The WIDTH attribute is used to set the width of a table.
The WIDTH can be set in % of the page or pixels.
The following is an example using % width of the page.

<TABLE BORDER="10" WIDTH="50%">
<TR><TH>1A</TH> <TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD> <TH>3B</TH> <TD>3C</TD></TR>
</TABLE>

1A and 3B are using TH rather than TD.
1A1B1C
2A2B2C
3A3B3C


The HEIGHT attribute can be used to set the height of a table.
The HEIGHT attribute is rarely used.
The easiest method is to use pixels as the setting.
The following is an example using 300 pixels as the height of the table.

<TABLE BORDER="10" WIDTH="50%" HEIGHT="300">
<TR><TH>1A</TH> <TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD> <TH>3B</TH> <TD>3C</TD></TR>
</TABLE>

1A and 3B are using TH rather than TD.
1A1B1C
2A2B2C
3A3B3C


The BACKGROUND of a table can be designated similarly to how the BACKGROUND of a page is designated, i.e. by color or by image.

The BGCOLOR attribute designates a table background color.

<TABLE BORDER="10" BGCOLOR="green"> <TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>
1A1B1C
2A2B2C
3A3B3C


The BODY BACKGROUND attribute designates a table background image. The following uses a non-animated image.

<TABLE BORDER="10" BODY BACKGROUND="crinkle.jpg">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>
1A1B1C
2A2B2C
3A3B3C


The following uses an animated image.

<TABLE BORDER="10" BODY BACKGROUND="animgreen.gif">
<TR><TD>1A</TD><TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>
1A1B1C
2A2B2C
3A3B3C


===========CELL ATTRIBUTES============

The BGCOLOR or the BODY BACKGROUND attributes can be used in individual cells to designate a color or an image as the cell background. The following code and table show both.

<TABLE BORDER="10" ALIGN="center" WIDTH="50%">
<TR><TD BGCOLOR="red">1A</TD>
<TD>1B</TD>
<TD BODY BACKGROUND="animgreen.gif">1C</TD></TR>
<TR><TD>2A</TD>
<TD BGCOLOR="white">2B</TD>
<TD>2C</TD></TR>
<TR><TD BODY BACKGROUND="animgreen.gif">3A</TD>
<TD>3B</TD>
<TD BGCOLOR="blue">3C</TD></TR>
</TABLE>
1A1B1C
2A2B2C
3A3B3C


Horizontally aligning cell contents:

<TABLE BORDER="10" WIDTH="50%">
<TR><TD>1A</TD>
<TD ALIGN="right>1B</TD>
<TD>1C</TD></TR>
<TR><TD ALIGN="center">2A</TD>
<TD ALIGN="center">2B</TD>
<TD ALIGN="center">2C</TD></TR>
<TR><TD ALIGN="right">3A</TD>
<TD>3B</TD>
<TD ALIGN="right">3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


Spanning rows:

<TABLE BORDER="1"><TR><TD ROWSPAN=3>1A</TD> <TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


Spanning columns:

<TABLE BORDER="1"> <TR><TD COLSPAN=3>1A</TD> <TD>1B</TD><TD>1C</TD></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C


A FONT attribute can be used in cells by bracketing the text with the font tags.

<TABLE BORDER="10" ALIGN="center" WIDTH="50%">
<TR><TD BGCOLOR="red">1A</TD> <TD>1B</TD> <TD>1C</TD></TR>
<TR>2A</TD> <TD BGCOLOR="white">
<FONT FACE="stencil" SIZE="5" COLOR="green"> Stencil font in green</TD>
<TD>2C</TD></TR>
<TR><>3A</TD><TD>3B</TD> <TD BGCOLOR="blue">3C</TD></TR>
</TABLE>
1A1B1C
2A Stencil font in green2C
3A3B3C

A HEADER row highlights top row:

<TABLE BORDER="1">
<TR><TH>1A</TH><TH>1B</TH><TH>1C</TH></TR>
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>

1A1B1C
2A2B2C
3A3B3C



WHAT CAN YOU PUT IN THE CELLS???


TEXT
IMAGES
IMAGES AND TEXT
TEXT AS A LINK
AN IMAGE AS A LINK
AN IMAGE AND TEXT AS A LINK

Text in cell:

<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER> <FONT FACE="jester" SIZE="3" COLOR="black">
TEXT IN CELL</CENTER></TD></TR></TABLE>
TEXT IN CELL

Image in cell:

<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER><IMG SRC="hello.gif"> </TD></TR></TABLE>

Image & text in cell:

<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER><IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55"><BR>
<FONT FACE="jester" SIZE="3" COLOR="black">
IMAGE & TEXT</CENTER></TD></TR></TABLE>

IMAGE & TEXT

Text as link in cell:

<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER><A HREF="http://www.seniornetorlando.org/links.htm">
<FONT FACE="jester" SIZE="3" COLOR="black">
Useful links compliments of<BR>SeniorNet Orlando
</CENTER></A></TD></TR></TABLE>
Useful links compliments of
SeniorNet Orlando

Image as link in cell:

<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER><A HREF="http://www.seniornetorlando.org">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55"></A></TD></TR></TABLE>

Image & text as link in cell:

<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER><A HREF="http://www.seniornetorlando.org">
<IMG SRC="seniorsnow.jpg" WIDTH="200" HEIGHT="55"><BR>
<FONT FACE="jester" SIZE="3" COLOR="black">
ORLANDO, FLORIDA LEARNING CENTER</CENTER></A></TD></TR></TABLE>

ORLANDO, FLORIDA LEARNING CENTER

Triple frames across:

<TABLE BORDER=3 ALIGN="left" WIDTH=20%>
<TR><TD> <CENTER>TRIPLE</TD></TR></TABLE>
<TABLE BORDER=3 ALIGN="right" WIDTH=20%>
<TR><TD> <CENTER>ACROSS</TD></TR></TABLE>
<TABLE BORDER=3 ALIGN="center" WIDTH=20%>
<TR><TD> <CENTER>FRAMES</TD></TR></TABLE>

TRIPLE
ACROSS
FRAMES


Adding colors:

<TABLE BORDER=3 ALIGN="left" WIDTH=20% BGCOLOR="red">
<TR><TD> <CENTER>TRIPLE</TD></TR></TABLE>
<TABLE BORDER=3 ALIGN="right" WIDTH=20% BGCOLOR="blue">
<TR><TD> <CENTER>ACROSS</TD></TR></TABLE>
<TABLE BORDER=3 ALIGN="center" WIDTH=20% BGCOLOR="white">
<TR><TD> <CENTER>FRAMES</TD></TR></TABLE>

TRIPLE
ACROSS
FRAMES


Using one table:

<TABLE BORDER=3 WIDTH=50% ALIGN="center">
<TR><TD BGCOLOR="red" ALIGN="center"> TRIPLE</TD>
<TD BGCOLOR="white" ALIGN="center">FRAMES</TD>
<TD BGCOLOR="blue" ALIGN="center">ACROSS</TD>
</TR> </TABLE>

TRIPLEFRAMES ACROSS

No table border, white background:

<TABLE BORDER="0" BGCOLOR="white" ALIGN="center">
<TR><TD><FONT FACE="jester" SIZE="3" COLOR="red">
No table border, white background</TD></TR</TABLE>

No table border, white background


No table border, no background:

<TABLE BORDER="0" ALIGN="center">
<TR><TD><FONT FACE="jester" SIZE="3" COLOR="red">
No table border, no background</TD></TR</TABLE>

No table border, no background


No table border, special background, image inserted:

<TABLE BORDER="0" ALIGN="center" BODY BACKGROUND="crinkle.jpg" CELLPADDING="50">
<TR><TD><IMG SRC="orlando-lakeeola4a.jpg" WIDTH="442" HEIGHT="290" > </TD></TR</TABLE>



Small table border, special background, image inserted with small border:

<TABLE BORDER="1" ALIGN="center" BODY BACKGROUND="crinkle.jpg" CELLPADDING="50">
<TR><TD> <IMG SRC="orlando-lakeeola4a.jpg" WIDTH="440" HEIGHT="290" BORDER="1"> </TD></TR</TABLE>



Double row with image and text:

<TABLE BORDER="4" CELLSPACING="6" CELLPADDING="4" ALIGN="center">
<TR><TD><IMG SRC="gatorwalking.gif"> </TD></TR>
<TR><TD><B>GO GATORS </TD></TR></TABLE>
GO GATORS


Two tables - text below image:

<TABLE BORDER="4" CELLSPACING="6" CELLPADDING="4"
ALIGN="center" BGCOLOR="red">
<IMG SRC="gatorwalking.gif" BORDER="0"> </TD></TR></TABLE>
<TABLE BORDER="4" CELLSPACING="6" CELLPADDING="4"
ALIGN="center" BGCOLOR="red">
GO GATORS</TD></TR></TABLE>
GO GATORS



Double border technique:

<TABLE BORDER="12" CELLSPACING="8" CELLPADDING="8" ALIGN="center" BODY BACKGROUND="animdots1.gif">
(Cell Padding of outside border determines space between borders.)
<TR><TD><TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4" ALIGN="center" BGCOLOR="blue">
<TR><TD> **Double Border Technique**
</TD></TR></TABLE>
</TD></TR></TABLE>
**Double Border Technique**

Back to "Links"





FRAMES
A Frameset page uses the FRAMESET container tags INSTEAD OF the BODY tags.
The <FRAMESET> tag is a container tag requiring closing.

A basic frameset page code would look like:

<HTML>
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET>
</FRAMESET>
</HTML>

Frameset pages can be set up by Rows, then Columns or by Columns, then Rows.
The page that is being created should be sketched to determine which setup is best.

A basic frameset page code with 2 equal columns would look like:

<HTML>
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET COLS="50%, 50%">
</FRAMESET>
</HTML>

The asterisk "*" is used to designate all that's left over to help fit any size display.
Using the asterisk "*" the above would look like:

<HTML>
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET COLS="50%, *">
</FRAMESET>
</HTML>

Within the frameset FRAMEs are set up to tell the Browser what to put in the frames.
The <FRAME> tag is a stand alone tag not requiring closing.
Generally images or HTML pages are put in the frames.

A basic frameset page code with 2 equal columns with an image in the first column and a HTML page in the second would look like:

<HTML>
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET COLS="50%, *">
<FRAME SRC="seniornet3.jpg">
<FRAME SRC="acreateapage.html">
</FRAMESET>
</HTML>

If a blank frame is desired..use quotes with nothing between them. i.e. "".
If no FRAME SRC's are designated the area will be blank.

FRAMES can contain LINKS and if no "target" is designated, the link will "fetch" in the same frame as the link.
If it is desired to "fetch" in another frame the other frame must have a FRAME NAME.
The tag would look like <FRAME NAME="_other>".
The link would then "fetch" in the "other" frame.
The link can also "fetch" as a total browser window:
TARGET="_top" Link opens in new browser window, closing old one.
TARGET="_blank" Link opens in new browser window leaving old one intact.

An example of the code of a frameset page with 2 equal columns with an image in the first column and a HTML page in the second and the second column "named" would look like:

<HTML>
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET COLS="50%, *">
<FRAME SRC="seniornet3.jpg">
<FRAME SRC="acreateapage.html" NAME="_2ndcolumn">
</FRAMESET>
</HTML>

Some attributes available for the Frameset tag are:
BORDER=pixels
BORDERCOLOR=color
COLS=col-widths
FRAMEBORDER=no/yes/0/1
FRAMESPACING=spacing
ROWS=row-heights

Some attributes available for the Frame tag are:
BORDERCOLOR=color
FRAMEBORDER=no/yes/0/1
HEIGHT=n
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=_name
NORESIZE
SCROLLING=auto/no/yes(default)
SRC=url WIDTH=n

The following are examples of pages where I have used "frames".
The first example is set up as frames by rows, then columns.
The second example is set up as frames by columns, then rows.
Review their code and specially look at the TARGET designations.
See how some of the above attributes are used.
The third example is set up as rows, then columns but only one main column
(and I have used thumbnails to link the HTML pages being fetched.)
To view the code of any of the following, click on View/Source on the Menu Bar.

Frames by rows, then columns.
Frames by columns, then rows.
Frames by rows, then columns - with thumbnails.






FORMS
Forms are tricky to add to a page and require close attention to details to get right.
AND!!
various authors give different instructions.
I have chosen to use a simple email format (not the most widely favored one).

The following is a small example of a sendable FORM (inside a table!):

I used Create A Page to:

Create my own page
Solve a problem on my page
Learn something new

Comments::


Name:
email:


The example above uses what are called "Radio Buttons" ,
a "Text Area Box" , two "Text Boxes,a "Send" button and a "Reset" button:

The HTML code for the above example is as follows
(Note: I have enclosed the form inside a table for presentation!):

<TABLE BORDER="1" BGCOLOR="silver" ALIGN="center"><TR><TD>

<FORM METHOD="POST" ACTION="mailto:lawfel@earthlink.net">

<P ALIGN="left"><B><U>I used Create A Page to:</B></U><BR>
<CENTER> Create my own page
<INPUT TYPE="radio" NAME="USED TO" VALUE="Create my own page"><BR>
Solve a problem on my page
<INPUT TYPE="radio" NAME="USED TO" VALUE="Solve a problem"><BR>
Learn something new
<INPUT TYPE="radio" NAME="USED TO" VALUE="Learn something new"><BR>

<P ALIGN="left"><B><U>Comments:</B></U>:
<CENTER>
<TEXTAREA NAME="OTHER COMMENTS" ROWS=8 COLS=40></TEXTAREA><BR>
First name: <INPUT TYPE="text" NAME="firstname"><BR>
Last name: <INPUT TYPE="text" NAME="lastname"><BR>
email: <INPUT TYPE="text" NAME="email"><BR><BR>

<INPUT TYPE="submit" VALUE="Send"><INPUT TYPE="Reset">

</FORM>

</TD></TR></TABLE>


The code above (exclusive of the Table coding) starts with the following tag:
<FORM METHOD="POST" ACTION="mailto:your email address">
All forms start with this type of opening tag.

Then the form sets forth a threesome of "Radio Buttons" (Only one can be chosen).

The following code is used for each "Radio Button":

Create my own page.
<INPUT TYPE="radio" NAME="USED TO" VALUE="Create my own page.">
The preceding code will produce the following Radio Button:
Create my own page.

Then the form sets forth a "Text Area Box".

The following code is used for a "Text Area Box" (Note..needs closing tag):

<P ALIGN="left">Comments:

<TEXTAREA NAME="Comments:" ROWS=3 COLS=40></TEXTAREA>
The preceding code will produce the following Text Area Box:

Comments:



Then the form sets forth three "Text Boxes".

The following code is used for a "Text Box":

First name..<INPUT TYPE="text" NAME="name" SIZE="30">
The preceding code will produce the following Text Box:
First name..

Then the form sets forth "Send and Reset Boxes".

The following code is used to produce Send and Reset buttons:

<INPUT TYPE="submit" VALUE="Send"><INPUT TYPE="Reset">
The preceding code will produce the following Send and Reset buttons:



And finally a closing tag (REQUIRED!!):

</FORM>

TWO OTHER WIDELY USED FORM INPUTS ARE:

Checkbox..use the following code for Checkboxes:

Clear instructions.<INPUT TYPE="checkbox" NAME="comment" VALUE="clear instructions">
Good examples.<INPUT TYPE="checkbox" NAME="comment" VALUE="good examples">
The preceding code will produce the following Checkboxes:
Clear instructions.
Good examples.
Checkboxes in contrast to Radio Buttons afford multiple choices!
Try and see that you can check TWO boxes!

Pop Up Box (Note..needs closing tag)..use the following code for each Pop Up Box:

Pop Up Boxes can be grouped if all the "NAMEs" are identical.

<SELECT NAME="Course Curriculum" SIZE="1">
<OPTION SELECTED>Curriculum
<OPTION>Week 1...
<OPTION>Week 2...
<OPTION>Week 3...
<OPTION>Week 4...
<OPTION>Week 5...
</SELECT>
The preceding code will produce the following Pop Up Box:




The Comment Form at the bottom of this page is a WORKING
example of some of the form types above.
Try filling it out and sending it!!



COMMENTS FORM

I used "Create A Page"
and submit the following comments:

I used Create A Page to:

Create my own page
Solve a problem on my page
Learn something new

My page is up and running:

Yes No Needs work

My problem was solved:

Yes No Need help

I learned something new:

Yes No Need help

Create A Page has (Select as many as you want):

Clear instructions Good illustrations Good examples
Good coverage Good quality Good value Needs work

Any other comments??:


Name:

Web page URL:

Email:

Last chance for more comments:




These are Send and Reset Buttons (Select one and click it): WARNING: They WORK!!!






Email me

Happy Webmastering!!