Featured Worklog

Price Search



PC Apex Sponsor


PC Apex Sponsors



PC Apex RSS Feeds

RSS Feed for PC Apex Reviews & ArticlesRSS Feed for PC Apex PC Modding WorklogsRSS Feed for the PC Apex Daily DisturbanceRSS Feed for the latest PC Apex Site NewsRSS Feed for PC Apex Affiliate and Web NewsRSS Feed for PC Apex Deals and Steals

Go Back   Apex Community Forums // PC Apex Forums // PC Apex Site Content // Daily Disturbance

Daily Disturbance Articles from our entertaining editorial team.

Reply
 
LinkBack Thread Tools Display Modes
Old 04-November-03, 03:50 AM   #1 (permalink)
Etiquette & English Gentleman
Post Introductory HTML, part 4

Introduction to Part Four

If you've read the previous instalments, you'll know that I've written this series of tutorials with someone with little to no knowledge of HTML in mind - like me before I started my own pages.
The plan is that by following along at home, you should have the key concepts that will allow you to produce your own pages that are not too embarrassing to look at.

In part one we covered: Basic page creation & layout; Text fonts, colours & sizes; Text alignment; Backgrounds; Heading styles; Rulers; The new paragraph tag; Text formatting.
In part two: Capitalisation in filenames & links; (More on)Text Formatting; Lists; Tables.
In part three: Images; hyperlinks; Reserved characters.

In this part I'll be covering frames and forms.



Frames

Looking at most websites, you'll see that they have a section of the page that stays constant, no matter what you are viewing in the main section of the page, and is typically used for easy navigation around the site.
The easiest way for us amateurs to achieve this is by the use of frames.

To start off, rename your index.htm file as "home.htm" so we can recycle it later.

Create a new index.htm file with the following contents:

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<FRAMESET COLS="15%,*">
<FRAME NAME="navigation" SRC="navigation.htm">
<FRAME NAME="body" SRC="home.htm">
</FRAMESET>
</HTML>


You should already be aware of what the <HTML>, <HEAD> and <TITLE> tags are for as we've already covered them. The new bits are:
The <FRAMESET> tags. These replace the <BODY> tags we've used in previous pages, and the COLS attribute specifies what the width of the respective columns should be. In this case, the first frame will be 15% of the available page width, and the second frame will take up the remaining space, as indicated by the asterisk; and
The <FRAME> tags. These specify the name of the frame (via the NAME attribute), and which documents should be displayed initially (via the SRC attribute).

The first frame we'll call navigation, as that's what its function will be. For simplicity's sake we'll also be calling the relevant document navigation.htm.

The second frame we'll be calling "body" as it'll have the main body of the site in it, and we'll use the home.htm document we "created" earlier.

Save the file, and open it in your browser. If all is well, you should see your first page in the larger right hand frame, and a 404 error in the smaller left hand frame, as we haven't created the page it refers to yet).

If you need to need to amend your new index.htm file, you'll find that right clicking in the browser & selecting 'View Source' opens the document you were in at the time. To open the index file, you need to select 'Source' from the 'View' menu instead.



Frames - the "Navigation" Frame

If you've been playing along at home, you should already know all that you need to create the navigation frame, with the exception that your hyperlinks need to include a TARGET attribute, and that these need to refer to the body frame.
I'll cut to the chase & give you an example navigation frame. The navigation.htm file you create should have contents very similar to this (note the link to a contact.htm file - we'll be using this for a form very soon):

<HTML>
<BODY BACKGROUND="bg.gif">
<FONT FACE=ARIAL SIZE=2>
<B>My Web Page</B>
<HR SIZE=2 COLOR=#000000 WIDTH=100%>
<P><A HREF="home.htm" TARGET="body">Home</A>
<P><A HREF="images.htm" TARGET="body">My Gallery</A>
<P><A HREF="links.htm" TARGET="body">My Links Page</A>
<P><A HREF="contact.htm" TARGET="body">Contact Me</A>
</FONT>
</BODY>
</HTML>


If you create & save this, then refresh your browser, you should be able to navigate around your site by using the links in your left hand frame.

If you use the links at the bottom of your home.htm document, you'll see they work ok (but are superfluous), but that the 'Back' links in your "Gallery" and "Links" pages result in three frames. Time for a bit of tidying up: remove the links from the bottom of home.htm, and amend the links at the bottom of the "Gallery" and "Links" pages from <P><A HREF="index.htm"><B>Back</B></A> to <P><A HREF="home.htm" TARGET="body"><B>Back</B></A>.



Forms

Forms are an important aspect of webpages- without them, e-commerce and forums wouldn't exist. In keeping with the rest of these tutorials, we'll be making a very basic form.
Make a copy of your links page, & rename it contact.htm.

Open it, and amend the heading from <H2>My Links Page</H2> to <H2>Contact Me</H2> and remove the tags that make up the table.

I've found that the sort of webspace that ISPs give out for free don't allow any processing on their servers, and as a consequence I've never learned just how to actually process these forms.

My recommendation is to cheat, and get someone else to do it for you. I signed up for a free account at www.formbuddy.com - the service they give you is pretty basic, but it goes get the job done & is free. Any submissions made on your site will be either stored on their website or emailed to you depending on your preference.

Let's imagine we want a form to allow users of our site to send us the following information:
Their name and email address (and for these two fields to be compulsory);
To select a rating for our site via radio buttons;
To select a rating for Pimprig.com via a drop down list/combo box; and
Any questions or comments in a free format field.
This would be very convenient for the purposes of my tutorial, so that's what we'll do ;-)

The basic tag for the start of a form is, perhaps not surprisingly, <FORM>, and it has a closing tag of </FORM>. Like other tags, it can have attributes applied to it. For example: <FORM ACTION="http://www.formbuddy.com/cgi-bin/form.pl" METHOD="POST"> passes the information to formbuddy.com.


Hidden Fields

Formbuddy requires your username to accompany any forms sent to it. This is achieved with the following tag:
<INPUT TYPE="HIDDEN" NAME="username" value="myusername">
where HIDDEN means the user will not see it, NAME is what the field is passing in ("username" is what formbuddy specify), and VALUE is what your username actually is.
Our second HIDDEN field allows us to specify which fields are compulsory - i.e. the fields that must be completed in order to accept the form submission:
[b]<INPUT TYPE="HIDDEN" NAME="reqd" value="1,2,3,4,5">[b]
Note that 5 fields are made compulsory by this tag - the first three are the required HIDDEN fields, the fourth and fifth will be the two we talked about making compulsory earlier - the "name" and "email" fields.

Our third and final HIDDEN field is a web address to return to after the form has been submitted. I'll be covering "going live" in the next installment, for the moment just bung in a site you wouldn't mind visiting anyway, or just garbage. E.g.:
<INPUT TYPE="HIDDEN" NAME="url" value="http://www.somethingorother.com">


Basic Fields

Take a look at this tag, which allows for basic text input:
<INPUT NAME="name" TYPE=TEXTBOX VALUE="" MAXLENGTH=50 SIZE=30>.
There a few things to note here:
NAME="name" the name of the field;
TYPE=TEXTBOX the type of input;
VALUE="" allows you to enter a default, but we'll leave it blank;
MAXLENGTH=50 the maximum number of characters that can be entered; and
SIZE=30 the maximum number of characters that will be displayed.

In this example, I've made the second (email) field exactly the same, apart from the NAME and maximum number of characters allowed, i.e.:
<INPUT NAME="e-mail" TYPE=TEXTBOX VALUE="" MAXLENGTH=40 SIZE=30>


Radio Buttons

For our site rating fields we opted to use radio buttons. The tags look something like this:
<INPUT TYPE=RADIO NAME="rating" VALUE="Great!" CHECKED>
<BR><INPUT TYPE=RADIO NAME="rating" VALUE="Average">
<BR><INPUT TYPE=RADIO NAME="rating" VALUE="Sucks">


The pertinent bits from the first line are:
TYPE=RADIO specifies that radio buttons are to be used;
NAME="rating" the name of the field;
VALUE="Great!" one of the values that will be passed;
CHECKED makes this the default selection.

Note that there are 3 lines - one for each option we want to allow the user to select from.


Drop down list/Combo box

For our Pimprig rating field, we opted to use a drop down list/combo box. Let's assume that we're asking the question "Is Pimprig.com the greatest modding site?", and want to have 4 possible answers: "Of course!", "Yes", "Maybe", and "What's Modding?".
The tags for this are:
<SELECT NAME="pimprig" VALUE="Of course!"><OPTION VALUE="Of course!">Of course!<OPTION VALUE="Yes">Yes<OPTION VALUE="Maybe">Maybe<OPTION VALUE="What's Modding?">What's Modding?</SELECT>

Note that this time we're using the <SELECT> (and </SELECT>) tag instead of <INPUT>, and the VALUE attribute sets the default - "Of course!", of course.
The 4 <OPTION> tags specify that we want 4 different answers to select from, and the different VALUE attributes for each one specify what those answers are. Note that each answer is repeated after the relevant <OPTION> tag - if we didn't do this, our list would consist of 4 blank options.


Text Area

For our final field, we wanted a free text field. The tags for this are:
<TEXTAREA NAME="info" MAXLENGTH=600 ROWS=6 COLS=60 WRAP=SOFT></TEXTAREA>
Note that this time we're using the <TEXTAREA> (and </TEXTAREA>) tag.
We've set the to maximum number of characters that can be entered to 600, but also specified the number of ROWS high and columns (COLS) wide we want the field to appear on our page.


'Submit' Button

All of these fields are no use without a way of indicating that we've completed the form & want to send the information - we need a "submit" button. The tag for this is:
<INPUT TYPE="SUBMIT" VALUE="Submit">
Note that the VALUE attribute specifies the text that will appear on the button.



Putting all of that together, putting in labels for our fields, and using a table for the sake of alignment would give us a block of tags that looks something like this:

<FORM ACTION="http://www.formbuddy.com/cgi-bin/form.pl" METHOD="POST">
<INPUT TYPE="HIDDEN" NAME="username" value="myusername">
<INPUT TYPE="HIDDEN" NAME="reqd" value="1,2>
<INPUT TYPE="HIDDEN" NAME="url" value="http://www.somethingorother.com">
<TABLE CELLPADDING=5>
<TR>
<TD VALIGN=TOP ALIGN=LEFT><FONT FACE=ARIAL SIZE=2>Your Name <B>*</B></FONT></TD>
<TD VALIGN=TOP ALIGN=LEFT><INPUT NAME="name" TYPE=TEXTBOX VALUE="" MAXLENGTH=50 SIZE=30></TD>
</TR><TR>
<TD VALIGN=TOP ALIGN=LEFT><FONT FACE=ARIAL SIZE=2>Your Email Address <B>*</B></FONT></TD>
<TD VALIGN=TOP ALIGN=LEFT><INPUT NAME="e-mail" TYPE=TEXTBOX VALUE="" MAXLENGTH=40 SIZE=30></TD>
</TR><TR>
<TD VALIGN=TOP ALIGN=LEFT><FONT FACE=ARIAL SIZE=2>How do you rate this site? </FONT></TD>
<TD VALIGN=TOP ALIGN=LEFT><INPUT TYPE=RADIO NAME="rating" VALUE="Great!" CHECKED> <FONT FACE=ARIAL SIZE=2>Great!</FONT>
<BR><INPUT TYPE=RADIO NAME="rating" VALUE="Average"> <FONT FACE=ARIAL SIZE=2>Average</FONT>
<BR><INPUT TYPE=RADIO NAME="rating" VALUE="Sucks"> <FONT FACE=ARIAL SIZE=2>It Sucks!</FONT></TD>
</TR><TR>
<TD VALIGN=TOP ALIGN=LEFT><FONT FACE=ARIAL SIZE=2>Is Pimprig.com the greatest modding site?</FONT></TD>
<TD VALIGN=TOP ALIGN=LEFT><SELECT NAME="pimprig" VALUE="Of course!"><OPTION VALUE="Of course!">Of course!<OPTION VALUE="Yes">Yes<OPTION VALUE="Maybe">Maybe<OPTION VALUE="What's Modding?">What's Modding?</SELECT></TD>
</TR><TR>
<TD VALIGN=TOP ALIGN=LEFT><FONT FACE=ARIAL SIZE=2>Any other information or questions</FONT></TD>
<TD VALIGN=TOP ALIGN=LEFT><TEXTAREA NAME="info" MAXLENGTH=600 ROWS=6 COLS=60 WRAP=SOFT></TEXTAREA></TD>
</TR><TR>
<TD VALIGN=TOP ALIGN=LEFT> </TD>
<TD VALIGN=TOP ALIGN=LEFT><P> <BR><INPUT TYPE="SUBMIT" VALUE="Submit"></TD>
</TR>
</TABLE>
</FORM>


Yikes!





Summary

If you've been playing along at home, your "site" has now pretty much reached the limit of what I know, even if it is on a small scale. As before, I've attached all the supporting files, including the HTML text files as they should look so far.

In the fifth & final part I'll be covering publishing - making your site "live".



Supporting Files (right click & select 'Save As'):

bg.gif
index.htm
images.htm
links.htm
navigation.htm
home.htm
360_modena.jpg
diablo_sv.jpg
gt1.jpg
maclaren_f1.jpg
r500.jpg
vantage.jpg
xj220.jpg
Jonny English is offline     Reply With Quote
Sponsored Links
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
anyone know HTML? Peters_Princess Anything Goes 5 22-November-04 11:13 PM
Introductory HTML - last one Jonny English Daily Disturbance 0 08-November-03 04:57 AM
Introductory HTML pt 3 Jonny English Daily Disturbance 1 02-November-03 05:52 PM
Introductory HTML, part 2 Jonny English Daily Disturbance 0 26-October-03 03:15 AM
Introductory HTML, part 1 Jonny English Daily Disturbance 5 19-October-03 09:33 PM


All times are GMT -5. The time now is 12:37 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC5
Copyright PCApex.com, GameApex.com, ForumApex.com 2001 - 2008
Advertisements

Page generated in 0.28280 seconds with 9 queries