LINKS
CraZy SheZy ProductionZ
CSP- Related
About us
Staff
Members
Newsletter
Disclaimer
Free Stuff
Webspace
E-mail Accounts
Shorter Urls
Graphics
Plain Dividers
Fancy Dividers
Animated Dividers
Bullets & Buttons
Animated Bullets
Animated Buttons
Animations
Homepage Sets
Tutorials
HTML
Frames
DHTML
Java Script
CSS
Other
Links
WebDeZign Service
CSP Sponsors:
Miss Banner's
Free Banner Creation Service.
1999 CraZy SheZy ProductionZ inc.
All rights reserved.
HTML Tutorial
~ Advanced ~
In this second part of the tutorial I will cover frames and forms.
These are three of the hardest things to get the hang off, but I hope my tutorial helps.
FRAMES
Now frames are one of the most annoying things because if you get one thing wrong usually everything goes wrong. I needed help on my first frames page but luckily I am fine now.
Just to let you understand the tutorial I am going to use a basic frames set out. There is a frame on a third of the left side and the rest of the page is another frame (I hope that makes sense!).
To create a frames page you first need to create the pages that you want to put into each section. I would suggest calling them 'sidepage.html' or 'main.html'. This way you won't get confused. Once you have done this you will need to edit the very main page on your site, usually named
'index.html'.
The basic structure for a frame page is this:
<html>
<head>
<title>Title of Page</title>
</head>
<frameset cols="30%,70%>
<frame name="side_frame" src="sidepage.html">
<frame name="main_frame" src="main.html">
</frameset>
</html>
Now let me explain this piece by piece.
By now you should know <HTML> and <HEAD> but now we come onto <FRAMESET> or in this case <FRAMESET COLS="200,*">
This is the tag all things to do with frames goes in. To set the column sizes you want you use percentages. Make sure they add up to one hundred or 99. When they add upto 99 the last one is shared among all frames.
Next comes <FRAMES NAME="....> In between the " and the " you have to write a name for that frame. You need to do this for targeting links, that comes later.
Then to determine what page you want to appear in each frame put in the name in the SCR="pagename.html" tag. For instance if you want to put a page called "index.html" in a frame called "sideframe" it would look like this:
<FRAME NAME="sideframe" SRC="index.html">
Do that for both and then close the <FRAMESET> tag with
</FRAMESET>
Complex Frames
If you are wanting to do a more complex frames page and wanting to add rows as well then this is the basic frames structure:
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET ROWS="*,30%">
<FRAMESET COLS="25%,75%">
<FRAME SRC="pagename.html" NAME="main">
<FRAME SRC="pagename.html" NAME="side">
</FRAMESET>
<FRAME SRC="pagename.html" name="Bottom">
</FRAMESET>
</HTML>
Everything is the same except that a new <FRAMESET ROWS="*,30%"> has been added and also some extra info at the bottom. You need to fill it in the same way as before.
When they use * it just means that is was is left. For instance if it was "*,40%" it would be "60%,40%" really.
Linking in frames
If you want the link from one frame to go into another you need to use page targets. These are really very simple. If you were linking to a page in the sidepage and you wanted it to show up in the mainpage (and the link was called index.html) then this is what you would do.
<A HREF="index.html" target="mainpage">
Put this in all the links so they all show up in the right frame.
Forms
Forms are when you fill in a few elements for a questionnaire or to sign up for something. I will show you how to create your own in this tutorial.
First I will show you the basic format of a form structure and an example.
<FORM METHOD="POST" ACTION="shezzz@slands16.freeserve.co.uk">
<INPUT TYPE="TEXT" WIDTH="40" NAME="UserName" VALUE="Sheryl Willson"><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
This is what it would look like:
The "FORM METHOD" is what you want it to do. The most popular is POST because you are collecting data. The other answer to use is GET. But I never use that. It is used for search engines because they are querying something from pre-established data.
IMPUT TYPE is a TEXT field. It can be other things but we will get onto that.
The WIDTH os obviously how wide it is.
VALUE is just an example value. You could put things like 'youre-mailhere" or "http://" in your form.
The IMPUT is either SUBMIT or RESET. Then the VALUE is what the button will say.
Next I'm going to put a list of all elements possible. When you are e-mailled the answers to the form when you have one the NAME of the element will show like this:
NAME1: answer
NAME2: answer
So naming one e-mail would look like this:
E-mail: shezza@hotmail.com
Anyway here's the list:
TEXT FIELD:
Code:
<INPUT TYPE="TEXT" WIDTH="20" NAME="Data1">
PASSWORD FIELD:
Code:
<IMPUT TYPE="PASSWORD" WIDTH="20" Name="Data2">
CHECK BOXES
Code:
Option 1 <INPUT TYPE="CHECKBOX" NAME="Check1"><BR>
Option 2 <INPUT TYPE="CHECKBOX" NAME="Check2"><BR>
Option 3 <INPUT TYPE="CHECKBOX" NAME="Check3"><BR>
RADIO
Code:
Option 1 <INPUT TYPE="RADIO" NAME="LIST" VALUE="Option1"><BR>
Option 2 <INPUT TYPE="RADIO" NAME="LIST" VALUE="Option2"><BR>
Option 3 <INPUT TYPE="RADIO" NAME="LIST" VALUE="Option3"><BR>
*Note: In a list of radio buttons, the name of each button must be the same, and the "VALUE" attributes must be different.
RESET/SUBMIT Buttons
Code:
<INPUT TYPE="SUBMIT" VALUE="What the button says!">
<INPUT TYPE="RESET" VALUE="Clear Info">
(If using an image for your submit button:)
<INPUT TYPE="IMAGE" SRC="../images/findit.gif">
DROP DOWN MENUS
Code:
<SELECT NAME="Menu1">
<OPTION SELECTED>Selected Choice
<OPTION>Choice 2
<OPTION>Choice 3
<OPTION>Choice 4
</SELECT>
Text Area
Code:
<TEXTAREA NAME="Area1" ROWS="5" COLS="30" WRAP="VIRTUAL">
</TEXTAREA>
Note: The "WRAP" attribute decides how the text should wrap. There are three possibilites:
WRAP="OFF" -- Wrapping doesn't happen. Lines are sent exactly as typed.
WRAP="VIRTUAL" -- The display word wraps, but long lines are sent as one line without new lines.
WRAP="PHYSICAL" -- The display word wraps, and the text is transmitted at all wrap points.
DHTML