| Webmasters |
|---|
| Create Account | Create Index Page | Tags | Editing | Hidden Comments | Downloads | Sound | Backgrounds | Colors | Fonts | Word Art |
|---|
| Special Tags | Alignment Tags | Rules | Marquees | Links | Yahoo SIP | 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. |
BUT be advised that it is about 43 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. |
|
You are going to have some fun creating your own Web page. First you need a Web host willing to display your page. I suggest Yahoo, since it offers FREE space in return for a little advertising. Your ISP may offer free Web space but this instruction will use Yahoo. Your first step is to create a Yahoo account (if you do not already have one). Follow the instructions below to create a Yahoo account |
Log on to http://www.yahoo.com. Click on "GeoCities" on the left. Click on "Geo Cities FREE .... Web Hosting".."Sign Up $0/mo". Click on "Sign up now..." on the left. Fill out application and select a Yahoo ID and password. You will then have a Yahoo identity, which, in addition to allowing a free Web site offers Web mail, My Yahoo, etc. |
| 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. Yahoo offers a free Page Builder when building Yahoo pages. I prefer to write the code myself and the following instructions teach writing the HTML 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. You may want to ask your Internet provider if they offer Web space and how to use it. You will need at least 5 mg. Yahoo offers 10mg. per ID. |
Log on to http://www.yahoo.com. Click on "GeoCities" on the left near the top. Sign in with your ID and password. Click on "GeoCities Control Panel". Click on "Manage". Click on "File Manager". Click on "Open File Manager". The File Manager page should come up. Click on the little pencil to the left of "Index.html". The HTML Editor page should come up. This is the page on which you will write the code. Right now it contains the coding that Yahoo has put on it. Delete everything on the page and then type in <HTML> <HEAD> <TITLE>Your name @ Yahoo</TITLE> </HEAD> <BODY> HELLO! </BODY> </HTML> |
The "code" page should look like this...
|
<HTML> <HEAD> <TITLE>Your Name @ Yahoo</TITLE> </HEAD> <BODY> HELLO! </BODY> </HTML> |
The next step is to SAVE what has been done so far.
Click on "Save" at the top or bottom of the HTML Editor page.
The screen should then return to the File Manager page.
View the page at this point.
Remember to bookmark the address of the page.
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.
The File Manager page should have only one item - the "index.html".
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.
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.
Click on "GeoCities Control Panel" and then "Manage".
Click on "File Manager" and then "Open File Manager".
The File Manager page should open. Click on the little pencil to the left of "index.html". The HTML Editor should open showing the code, so far, of the "index" page (that you put there).
NOTE: This procedure, to get to the File Manager and the HTML Editor 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 (").
Yahoo's free Web pages can only be edited online, so that method will be used for this instruction. Yahoo offers offline editing AND no ads for $4.95 per month. It's up to you if you want to continue to use Yahoo and if you feel the $4.95 service is valuable to you. Writing the code is the same, no matter whether online or offline.
A separate page has been developed to offer instructions on offline editing.
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-->
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 Yahoo File Manager file. Millions of sounds and backgrounds are available free on the Internet. Using Google to find a particular sound or background is the simpliest method.
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 Desktop, again.
The Desktop should now have the 3 items ("smileys" , "seniornet" and "wish").
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 help, also.
Sign in at Yahoo using http://geocities.yahoo.com/home.
Open the File Manager and upload the .gif background, the .jpg image and the .midi music.
The File Manager page should now have 4 items.
|
<HTML> <HEAD> <TITLE>Your Name @ Yahoo</TITLE> </HEAD> <BGSOUND SRC="wish.mid"> <BODY> <!--THIS IS A HIDDEN COMMENT--> HELLO! </BODY> </HTML> |
|
HELLO! |
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:
The following is an example of how to write the code for a yellow background:
|
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.
<!--BODY BGCOLOR="yellow"-->
Then, write the following code for the "smileys" background as a new BODY tag:
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> |
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! |
A VLINK is a visited link. An ALINK is an actuated link.
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.
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:
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:
|
|
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:
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: The <P> tag is similar to the <BR> tag except it is called a "paragraph break".
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:
The following are some
"ALIGNMENT"
tags: The following is the code for the default Rule which has virtually no HEIGHT, and stretches across the entire page. The following is the code for the default Rule but adding a "SIZE" of 20 (pixels). 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: Links to other HTML documents: The following link should now be on the "index" page. Links to sub-pages in other HTML documents: The following link should now be on the "index" page. Links to sub-pages in same HTML document: The following link should now be on the "index" page. Link from a sub-page to "index" page of same HTML document: The following link should now be on the "index" page. Links to music in same HTML document: 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!! "Frag" links are links to a fragment (other than the top) of a page.
The following are examples of tags to link to the Links Tables near the bottom of my index page: Here's how to put a link on the page for readers to email anyone: Image at left of page (default): Image at center of page: I find it easier, for centering an image to use the CENTER tag:
Image at right of page: Two images - left and right. Two images centered. Three images - left, right and center. Three images centered. Adding space between images. Text on right at bottom(default): Text on right at top: Text on right at middle: Text centered under image. Text to left of image. Text above image. Adding space between image and text. Text wrapping to left of image. 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.
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.
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.
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. A second data cell on the same row would be added as follows: A second row of data cells would be added as follows: In the same way our table can be expanded as follows: The BORDER attribute is added as follows: The BORDER is enlarged as follows: The BORDER COLOR attribute is added as follows: The CELLSPACING attribute adds space between cells. The CELLPADDING attribute adds space within each cell. The ALIGN attribute horizontally aligns table on page (left, center, right).
The WIDTH attribute is used to set the width of a table.
The HEIGHT attribute can be used to set the height of a table.
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. The BODY BACKGROUND attribute designates a table background image. The following uses a non-animated image. The following uses an animated image. 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. Horizontally aligning cell contents: Spanning rows: Spanning columns: A FONT attribute can be used in cells by bracketing the text with the font tags. A HEADER row highlights top row: Text in cell: Image in cell: Image & text in cell: Text as link in cell: Image as link in cell: Image & text as link in cell: Triple frames across: Adding colors: Using one table: No table border, white background: No table border, no background: No table border, special background, image inserted: Small table border, special background, image inserted with small border: Double row with image and text: Two tables - text below image: Double border technique: A basic frameset page code would look like: <HTML> A basic frameset page code with 2 equal columns would look like: <HTML> <HTML> 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> 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> Some attributes available for the Frameset tag are: Some attributes available for the Frame tag are: The following code is used for each "Radio Button": The following code is used for a "Text Area Box" (Note..needs closing tag): Comments: The following code is used for a "Text Box": The following code is used to produce Send and Reset buttons: And finally a closing tag (REQUIRED!!): TWO OTHER WIDELY USED FORM INPUTS ARE:
Checkbox Pop Up Box
<IMG SRC="e.gif">
<FONT FACE="arial" SIZE="5" COLOR="black">mphasize the first letter!</FONT>
mphasize the first letter!
The words created are in the form of .gif's.
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.
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???
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.
I never use the <P> tag.
<B>...</B>Makes text bold.
<I>...</I>Italicizes.
<U>...</U>Underlines.
<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.
The RULE tag is an "empty" tag (no closure needed):
It will appear on the page as the following:
It will appear on the page as the following:
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:
Now lets change from the default font to an Arial, 5 and red. The code would be:
Arial, 5 and red - Still right to left!</MARQUEE>
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
<FONT FACE="arial" SIZE="5" COLOR="red">
Down Loop</FONT></P></MARQUEE>
Down Loop With Height Attribute</MARQUEE>
<FONT FACE="arial" SIZE="5" COLOR="white">
Alternating Marquee with background color attribute</MARQUEE>
<FONT FACE="arial" SIZE="5" COLOR="white">
Using the WIDTH attribute (in pixels)</MARQUEE>
<FONT FACE="arial" SIZE="5" COLOR="white">
Using the WIDTH attribute (in percent)</MARQUEE>
<FONT FACE="arial" SIZE="5" COLOR="white">
Using "SCROLLDELAY" (milliseconds)</MARQUEE>
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.
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!!
The following tags are required to link to the "Double Border" area of this page:
Use <A NAME="doubleborder">at fragment spot.
<A HREF="#doubleborder">To Double Border Technique</A>
To Double Border Technique
Use <A NAME="linkstables">at fragment spot (On index page).
<A HREF="index.html#linkstables">To "Links Tables" on my Home Page</A>
To "Links Tables" on my Home Page
The second page will be called "mynotes" 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 "mynotes" page will be linked to the "index" page and v.v.
Open Yahoo's File Manager for your Web page.
Click on the little box to the left of the "index" page and rename it "mynotes.html"
NOTE: The naming of pages is important since the name becomes part of the URL.
NO SPACES ALLOWED!!
Yahoo will warn you that there is now no "index" page. BUT!! that is what you are now going to create (a new "clean" "index" page).
Click on the "New" button.
Name the new page "index.html".
In the white space below add the basic tags of a new page as done initially to create the first page.
This time, instead of "Hello" a link to the "MYNOTES" page, and a BODY color of yellow is suggested.
<HTML>
<HEAD>
<TITLE>Your Name @ Yahoo</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
<A HREF="mynotes.html">My Notes</A>
</BODY>
</HTML>
A suggestion is to insert a picture (perhaps of the class) at the top (well above the link to My Notes). The link to a picture, such as the picture of the class or the image of Mickey is shown below (and continued in the next section of this instruction).
The code of the "index" page should now look like the following:
<HTML>
<HEAD>
<TITLE>Your Name @ Yahoo</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
<CENTER><IMG SRC="mickeywflowers.gif">
<BR><BR><BR>
<P ALIGN="right"><A HREF="mynotes.html">My Notes</A>
</BODY>
</HTML>
The new "index" page should look like the following:
Thats all there is to it.
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
<IMG ALIGN="right" SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49">
A<BR>may be needed to align 2nd image vertically.
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49">
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49">
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49">
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49">
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49" HSPACE="25">
Download the following to your HTML file and call it "hello".
<CENTER><IMG SRC="hello.gif"></CENTER>
Text
Text.
Text.
Text
Text.
Text.
Text
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49" HSPACE="30">Text
Text
The next examples use IMAGEs (mostly animated) as the links .
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49" BORDER="0"></A>
<IMG SRC="computerman.gif" BORDER="0"></A>
<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
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".
Cell 1 Cell 2
Cell 1A Cell 1B Cell 2A Cell 2B
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
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
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
1A 1B 1C 2A 2B 2C 3A 3B 3C
1A 1B 1C 2A 2B 2C 3A 3B 3C
The WIDTH can be set in % of the page or pixels.
The following is an example using % width of the page.
<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.
1A 1B 1C 2A 2B 2C 3A 3B 3C
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.
<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.
1A 1B 1C 2A 2B 2C 3A 3B 3C
<TR><TD>2A</TD><TD>2B</TD><TD>2C</TD></TR>
<TR><TD>3A</TD><TD>3B</TD><TD>3C</TD></TR>
</TABLE>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<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>
1A 1B 1C 2A
Stencil font in green 2C 3A 3B 3C
<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>
1A 1B 1C 2A 2B 2C 3A 3B 3C
<TR><TD><CENTER>
<FONT FACE="jester" SIZE="3" COLOR="black">
TEXT IN CELL</CENTER></TD></TR></TABLE>
<TABLE BORDER="16" CELLSPACING="6" CELLPADDING="2" ALIGN="center">
<TR><TD><CENTER><IMG SRC="hello.gif">
</TD></TR></TABLE>
<TR><TD><CENTER><IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49"><BR>
<FONT FACE="jester" SIZE="3" COLOR="black">
IMAGE & TEXT</CENTER></TD></TR></TABLE>
IMAGE & TEXT
<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>
SeniorNet Orlando
<TR><TD><CENTER><A HREF="http://www.seniornetorlando.org">
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49"></A></TD></TR></TABLE>
<TR><TD><CENTER><A HREF="http://www.seniornetorlando.org">
<IMG SRC="seniornet3.jpg" WIDTH="200" HEIGHT="49"><BR>
<FONT FACE="jester" SIZE="3" COLOR="black">
ORLANDO, FLORIDA LEARNING CENTER</CENTER></A></TD></TR></TABLE>
ORLANDO, FLORIDA LEARNING CENTER
<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>
<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
<TR><TD BGCOLOR="red" ALIGN="center">
TRIPLE</TD>
<TD BGCOLOR="white" ALIGN="center">FRAMES</TD>
<TD BGCOLOR="blue" ALIGN="center">ACROSS</TD>
</TR>
</TABLE>
TRIPLE FRAMES
ACROSS
<TR><TD><FONT FACE="jester" SIZE="3" COLOR="red">
No table border, white background</TD></TR</TABLE>
No table border, white background
<TR><TD><FONT FACE="jester" SIZE="3" COLOR="red">
No table border, no background</TD></TR</TABLE>
No table border, no background
<TR><TD><IMG SRC="orlando-lakeeola4a.jpg" WIDTH="442" HEIGHT="290" >
</TD></TR</TABLE>
<TR><TD>
<IMG SRC="orlando-lakeeola4a.jpg" WIDTH="440" HEIGHT="290" BORDER="1">
</TD></TR</TABLE>
<TR><TD><IMG SRC="gatorwalking.gif">
</TD></TR>
<TR><TD><B>GO GATORS
</TD></TR></TABLE>
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
(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**
The <FRAMESET> tag is a container tag requiring closing.
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET>
</FRAMESET>
</HTML>
The page that is being created should be sketched to determine which setup is best.
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET COLS="50%, 50%">
</FRAMESET>
</HTML>
Using the asterisk "*" the above would look like:
<HEAD>
<TITLE>Your Name</TITLE>
</HEAD>
<BGSOUND SRC="pearls.mid">Sound attribute can be added.
<FRAMESET COLS="50%, *">
</FRAMESET>
</HTML>
The <FRAME> tag is a stand alone tag not requiring closing.
Generally images or HTML pages are put in the frames.
<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 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.
<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>
BORDER=pixels
BORDERCOLOR=color
COLS=col-widths
FRAMEBORDER=no/yes/0/1
FRAMESPACING=spacing
ROWS=row-heights
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.
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!):
a "Text Area Box" , two "Text Boxes,a "Send" button and a "Reset" button:
(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:
All forms start with this type of opening tag.
Then the form sets forth a threesome of "Radio Buttons" (Only one can be chosen).
<INPUT TYPE="radio" NAME="USED TO" VALUE="Create my own page.">
Then the form sets forth a "Text Area Box".
<P ALIGN="left">Comments:
Then the form sets forth three "Text Boxes".
Then the form sets forth "Send and Reset Boxes".
Checkboxes in contrast to Radio Buttons afford multiple choices!
Try and see that you can check TWO boxes!