HTML forms have been the bane of web developers for years. Not anymore!
With HTML5 you may learn to love forms. Imagine a day when you can validate a form without any JavaScript. Date pickers, place holder text, pattern matching, required fields, auto focus, error handling, all without JavaScript? That day is not as far off as you think. In this session we'll discuss new to HTML5 form input types and attributes. We can't promise that you'll love creating web forms, but you will gain a new, exciting appreciation.
We'll learn all about creating dynamic web forms with form validation without the use of javascript.
Sneak peak into the presentation...
The new HTML5 input types
Controlling what keyboard types gets displayed on touch keyboards, including the iPad and iPhone,
Placeholder Attribute: Adding native placeholder text and clearing on focus
Native form validation: Error messages with no javascript
Date & time input types: The jQuery datepicker, without jQuery.
Providing focus to a form element, including focus on invalid input without javascript.
CSS & Forms: Stylizing form elements based on current states of required and invalid
Pattern attribute - Pattern matching for form input: with regular expressions and no javascript
element and list attribute- providing autosuggest on inputs, again no javascript.
Browsers are beginning to support HTML5 web forms. In this session we'll learn how to implement them.
HTML forms have been the bane of web developers for years. Not anymore!
With HTML5 you may learn to love forms. Imagine a day when you can validate a form without any JavaScript. Date pickers, place holder text, pattern matching, required fields, auto focus, error handling, all without JavaScript? That day is not as far off as you think. In this session we'll discuss new to HTML5 form input types and attributes. We can't promise that you'll love creating web forms, but you will gain a new, exciting appreciation.
We'll learn all about creating dynamic web forms with form validation without the use of javascript.
Sneak peak into the presentation...
The new HTML5 input types
Controlling what keyboard types gets displayed on touch keyboards, including the iPad and iPhone,
Placeholder Attribute: Adding native placeholder text and clearing on focus
Native form validation: Error messages with no javascript
Date & time input types: The jQuery datepicker, without jQuery.
Providing focus to a form element, including focus on invalid input without javascript.
CSS & Forms: Stylizing form elements based on current states of required and invalid
Pattern attribute - Pattern matching for form input: with regular expressions and no javascript
element and list attribute- providing autosuggest on inputs, again no javascript.
Browsers are beginning to support HTML5 web forms. In this session we'll learn how to implement them.
More than 90 questions we have solved. This is an exam preparation guide for fiverr.com. Solution links are provided there so that you can check every answer. We uploaded scripts to sololearn.com as well. My students getting 9 and above with the help of this guide. If you find any error on my document please let me know. Hope for the best.
If you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.
This tutorial will guide you through the steps of getting your business listed on Apple Maps. Having a business listing on Apple Maps for your small business is critical to your online visibility.
More than 90 questions we have solved. This is an exam preparation guide for fiverr.com. Solution links are provided there so that you can check every answer. We uploaded scripts to sololearn.com as well. My students getting 9 and above with the help of this guide. If you find any error on my document please let me know. Hope for the best.
If you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.
This tutorial will guide you through the steps of getting your business listed on Apple Maps. Having a business listing on Apple Maps for your small business is critical to your online visibility.
Active Directory Domain Services Installation & Configuration - Windows Ser...Adel Alghamdi
- Windows Server 2012
Active Directory Domain Services Installation & Configuration
this is my first time making guide it hope it help someone
feel free to share and like :)
Link your HTML Form to Google Sheet in just 3 Steps.pdfBe Problem Solver
One of the most frustrating things about HTML forms is that you have to do a lot of work before extracting any helpful information from them. But in this article, we show you how you can link an HTML form to Google Sheets.
Now, let’s jump straight to the coding part of the HTML form to Google Sheets:
Typeform - Build Conversational Forms And Collect DataKaviyarasu Pugaz
◾Typeform is an online form builder which helps to collect and share data. Typeform differs from other form builders by collecting data in a conversational form with its unique design.
http://www.softorwebapp.com/2018/05/typeform-build-conversational-forms.html
INFO-6053 Fall 2017 Project 3 Page 1 of 6 .docxjaggernaoma
INFO-6053 Fall 2017
Project 3
Page 1 of 6
Title INFO-6053 Project 3 – Automated Testing with Selenium
Due Date Monday, January 8th
2018 by 11:59 PM
Submission
To
Project 3 drop box on FOL
Project
Structure
This is a group project. Each group may consist of 3 to 6
members. Each member of a group will receive the same
mark for the project
Marking Scheme
Available
Marks
Item Score
5 Selenium IDE test of add contact form
5 Selenium IDE test of edit contact form
5 Selenium IDE test of error form
10 Selenium Web Driver test of either the edit contact
OR error form (only one of these forms needs to be
tested using Web Driver)
5 Project report
5 Grammar, spelling, following instructions.
35 Total
Background Information
Your testing team is part of a new company that is developing a set of web-
based applications for home and business use. While none of the
applications are anywhere near ready for release, the development team
has completed its first prototype of the contacts module that will be part of
the core of all of the new applications.
INFO-6053 Fall 2017
Project 3
Page 2 of 6
The company’s management have decided, after investigating a number of
options, that a large portion of the testing of its applications will be done
using the Selenium tool suite. Management have left the decision about
which Selenium tools to the testing team. They have also decided that the
testing team will perform some tests on the contacts prototype for two
purposes:
To assess the current state of the contacts module.
To help the testing team to determine which Selenium tools to
use by performing some automated tests on the prototype.
The prototype of the contacts module consists of the functionality to add,
edit and view contact information via a web interface. While the basic form
structures and page layouts are correct, no CSS has yet been applied to
the pages, although some simple formatting has been put in the HTML tags
to make the pages easier to read. There is no JavaScript on any of the
pages and none is planned for the finished version of this module.
The application consists of 3 main forms, one to add new contacts, one to
edit and existing contact and one to allow the user to correct any data input
errors made while using the other two. The basic layout of all 3 is the same
although the underlying functionality is different. There is also a simple
HTML page that lists all of the data for a selected contact. Another page
displays a list of all contacts and includes buttons for viewing or editing the
details of each contact. A fourth form is used to display the results of
saving/updating the database.
The data gathered and displayed by this module is stored in a single
MariaDB (MySQL equivalent) database table with the following structure
(shown as an SQL table create command):
CREATE TABLE `addresses` ( .
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
The Indian economy is classified into different sectors to simplify the analysis and understanding of economic activities. For Class 10, it's essential to grasp the sectors of the Indian economy, understand their characteristics, and recognize their importance. This guide will provide detailed notes on the Sectors of the Indian Economy Class 10, using specific long-tail keywords to enhance comprehension.
For more information, visit-www.vavaclasses.com
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
2. Creating Web Forms and Frames
1.
What is a Web Form
2.
What is a CGI Script File
3.
Initiating the HTML File
4.
Composing the Form Tags
o Get and Post
o Input Text
o Input Password
o Input Checkbox
o Input Hidden
o Input File
o Input Radio
o Input Option Select
o Input Submit
o Input Reset
5.
Saving Your HTML Form
6.
Testing Your Web File
7.
Uploading the HTML File
8.
What is a Frame
9.
Frame tags
o Frameset
o Frame
o NoFrames
Revised 9/01 PAR
2
3. What is a Form
Forms are a simple way that a person viewing your Web page can send you
data. This is done by the user filling in various parts or input lines within the
form designated by you.
Forms are supported by almost every browser and make it possible to create
documents that collect and process user input and formulate personalized
replies. Once a user fills out a form, it is submitted to a server or e-mailed to
a specific address. If sent to a server, that server passes that information to a
supporting program or application that processes the data.
What Software is Needed
The software you will need for generating the web form includes:
♦ Web browser to view a web page, such as Netscape or Internet Explorer.
♦ Text editor to create the HTML file; such as WordPad, or Notepad.
♦ FTP (File Transfer Protocol) program to upload a page. There are several
available for a Mac or a PC.
.
CGI
CGI is the supporting program to process the data entered in the form.
Server-side data-processing aspects of forms are not part of the HTML
standard. They are defined by the server's software. The CGI behind this
form creates an E-mail message by copying each form field's contents to a
separate line. It mails the information to the specified E-mail address.
There is a generic CGI script available for use at Ohio University.
Information on this script is available at:
http://www.ohiou.edu/pagemasters/memo85/append5.html
3
4. Mailto:
Mailto forms allow the programmer to set up a form such that all data
collected from the form will be e-mailed to you or another e-mail address in
simple text format. The data is not processed at all. This is a simpler
method than the CGI format but can be more problematic because the user
filling out the form must have their browser correctly set up to send e-mail.
Therefore it is recommended that if your site is housed on an OU server you
use the CGI method, but if it is a site at another server it is easier to use the
Mailto method.
Initiating the HTML File
Click the Start button, trace to Programs option, then trace to Accessories,
and click on Notepad to open it. Once in the Notepad program, enter the
following commands to start an HTML document :
Create your HTML file so that it looks something like this. The HTML tags
do not have to be in uppercase. The spacing between commands is up to
you. However, the spacing within the brackets is important.
<HTML>
<HEAD>
<TITLE> Web Form </TITLE>
</HEAD>
<BODY>
There will be a form here soon.
</BODY>
</HTML>
Now we need to save the file as an HTML file. To do this click on the File
menu and then choose Save As. Choose where you want to save the file. In
this class we will be saving to the Public folder for convenience. Then
choose a File Name to save it as. The name must end in .htm or .html.
Next select the down arrow next to the Save as Type. Choose All Files.
Finally, click on the Save button.
4
5. Now we will see what our HTML file will look like in a web browser. First
we'll open Internet Explorer by clicking on the blue "E" on the Desktop, or
under Programs in the Start menu choose Internet Explorer.
Once in Internet Explorer open your file. Click on File in the top left
corner, then on Open, and then on Browse. Navigate to the Public file
folder by double clicking it or highlighting it and choose your file. Click
Open. You will see this:
"There will be a form here soon."
Throughout this class we will be making a series of changes to our HTML
document, saving that document, then looking at it in the browser to see if
those changes yielded the desired results. This is an important part of the
web desing: learning how to make changes and saving those changes, then
checking to see what the new changes look like, then making more changes.
Composing the Form
We'll compose our form assuming it is for an O.U. web page, using the
generic CGI. The command <FORM> initiates a form section of a web
pages and </FORM> ends that section. To begin a form we must tell the
browser to send the information that a user enters into to a CGI script file
and tell where that file is. We do that with the ACTION attribute:
<FORM action="http://ouvaxa.cats.ohiou.edu/htbin/genform.com">
Another attribute of the FORM tag is the METHOD, which is how the form
input will be sent to the gateway. The method can be either "get" or "post".
Post means to send the form entry results as a e-mail document. This is the
most common method. Get is usually used with search engines. However,
this is the method used by the OU CGI script. So the FORM command
would look like this:
<FORM action="http://ouvaxa.cats.ohiou.edu/htbin/genform.com"
method="get">
5
6. Next we must input the code to send the information from the form to the
appropriate e-mail address. This is done with:
<INPUT type="hidden" name="mailto" value="youremail@ohiou.edu">
The Type="hidden" attribute hides this from the user. The name="mailto"
attribute names this Input tag. The value="youremail@ohiou.edu" attribute
tell the CGI program where to send the information from the form. So now
our HTML Form commands should look like:
<BODY>
<FORM action="http://ouvaxa.cats.ohiou.edu/htbin/genform.com"
method="get">
<INPUT type="hidden" name="mailto" value="youremail@ohiou.edu">
</FORM>
</BODY>
Input Commands
The CGI script is a generic script program provided by Ohio University.
This means that it is set up to e-mail you the data from the form. Since it is
a generic script, there are some limitations. See:
www.cats.ohiou.edu/pagemasters/memo85/append5.html
Input Limitations
•
Text fields are limited to single lines. If you attempt to use multi-line text fields, any
time a user enters more than 255 characters, none of them will be transcribed into
the E-mail you receive. You can work around this limitation by also including a
standard mailto link.
•
Every field is limited to a maximum length of 80 characters!
•
The Web page containing the form must be on an Ohio University server (contains
".ohiou.edu"). To test, upload the HTML file to your OU server, but use a different
name or folder.
6
7. •
The E-mail destination of the information must be one user of an OU system
(contains ".ohiou.edu").
•
The total number of fields defaults to 20. If you want to change this, you must include
a hidden field specifying the number of fields your form uses.
•
The names of the visible fields for data entry must be a lower case letter "f" followed
by two or three digits from 01 to 999, inclusive.
•
If you include fields numbered beyond 20, you must include a hidden form-field
named "maxlines" with value equal to the highest field number used.
•
You must include a valid Ohio University E-mail address in the hidden form-field
named "mailto"!
•
You may choose to provide an absolute URL in the hidden form-field named
"nexturl" and appropriate link text in the hidden form-field named "nextname". If you
do, they will be used to construct the return link.
•
The visible fields can be text, radio-button, check-box, or pop-up-selection. Value for
these fields must be at most 80 characters.
•
The hidden form-field named "subject" is optional but strongly recommended; it
identifies the Web page where the E-mail originates.
•
If you do not use a particular field, or if the user leaves a field blank, a blank line will
be included at that place in the message.
•
You do not have to number the fields sequentially. You should organize the form in a
way that will be logical and convenient for the user and number the fields so that the
resulting e-mail will be easiest for the recipient to use.
Input Text
To create a single line of text for the user to enter we use the Input
command, with the Type attribute equal to Text. For example:
<INPUT type="text">
That will create a box for text input. Using the OU CGI we have to name
the input command appropriately:
7
8. <INPUT type="text" name="f01">
Then when the form is mailed to us we will get a line that say f01= whatever
they entered in that text box. If we wanted something in the text box for the
user to overwrite we would use the Value attribute. For example:
<INPUT type="text" name="f01" value="(###) ###-####">
(###) ###-####
The size of the text box can also be changed. To do this we use the Size
attribute. The default size is 20. Here are some options, but remember that
using OU's CGI script we can not go above size=80.
<INPUT type="text" name="f01" value="(###) ###-####" size="14">
<INPUT type="text" name="f01" size="30">
Now that we've seen a few text line options, let's make some changes to our
HTML document and see what it looks like.
<FORM action="http://ouvaxa.cats.ohiou.edu/htbin/genform.com"
method="get">
<INPUT type="hidden" name="mailto" value="youremail@ohiou.edu">
What is your Name? <INPUT type="text" name="f01" size="20"> <BR>
What is your Phone Number? <INPUT type="text" name="f02"
value="(###) ###-####"> <BR>
Do you like my web page? <INPUT type="text" name="f03" size="10">
</FORM>
The new command above is <BR> for Break. It is like hitting the enter key.
The different text lines in our form will now be on separate lines.
8
9. Checkboxes
Checkboxes are an option on a form that allows users to select a line of text
in an on/off yes/no method. On screen they appear as a small box that
either has a check in it or does not. The command for a checkbox is as
follows.
<INPUT type="checkbox" name="f11" value="checkbox a">
Checkboxes can be checked by default with the addition of the keyword
CHECKED in the INPUT tag. Here is an example.
<INPUT type="checkbox" CHECKED name="f12" value="checkbox b">
Now we put the two tags together and add some text afterward like this:
<INPUT type="checkbox" name="f11" value="checkbox a">This is a
checkbox.
<P>
<INPUT type="checkbox" CHECKED name="f12" value="checkbox b">
This is a checkbox that is automatically checked.
Option Select Lists
These lists are drop-down windows in which a user selects a choice from a
list of options selected by the programmer. The code for an option select list
with three choices follows.
<SELECT type="text" name="f05" size=1>
<OPTION value="first">Your first choice
<OPTION value="second">Your second choice
<OPTION value="third">Your final answer
</SELECT>
Your final answer
Your first choice
Your second choice
Your final answer
9
10. If you want one of the choices to be automatically selected, add the code
SELECTED after the OPTION command like this.
<OPTION value="first" SELECTED>
Radio Buttons
Radio buttons are similar to checkboxes. However, they ;have some
limitations that checkboxes do not. This limitation is that is forces the user to
choose one and only one of the choices. One may be selected by default.
Below is the code for two radio buttons with text following them. The
second of these buttons has been selected by default the same way a
checkbox was selected with the SELECTED feature inserted after the
INPUT command.
<INPUT type="radio" name="f07" value="radio1"> This is a radio button.
<P>
<INPUT type="radio" CHECKED name="f07" value="button2"> This one
has been selected by default.
Hidden
A Hidden input is a name/value pair that is returned to you but does not
show up anywhere on the web page. The text for a Hidden input is simple.
<INPUT type="hidden" name="Location" value="USA Form">
When the form is returned to us we would get:
Location=USA Form
When using the OU CGI form, the Hidden type is needed by the CGI
program stating where to send the data from the form. For example,
<INPUT type="hidden" name="mailto" value="youremail@ohiou.edu">
10
11. Reset and Submit Buttons
The Reset button allows the user to clear the data they have entered in the
form and start fresh. These buttons are created with the INPUT command
and the TYPE and VALUE features. The INPUT starts the tag. The TYPE is
either Reset or Submit. The VALUE is the words that you want to appear in
the box. Standard reset and submit buttons are as follows.
<INPUT type="reset" value="clear fields">
<INPUT type="submit" value="submit">
clear fields
submit
The &NBSP command means non-breaking space and is just a way to space
your buttons better.
Mailto Forms
If you want to make a form on a web page that is not on an OU server and
do not have access to your servers CGI programs you can use the "mailto"
method. If available the CGI method is preferred as the user accessing your
page must have their mail preferences set up correctly for the mailto form
data to successfully reach you. However the mailto form does allow for
more freedom than the OU generic CGI script.
The best advantage of the mailto form over the OU script is that the OU
script has length and character limitations and the mailto form allows text
areas, not just single lines for text. The mailto form is initiated with the
following command.
<FORM method="post" action="youremail@ohiou.edu"
enctype="text/plain">
11
12. Password
This feature allows the user to enter a password that does not appear on
screen but will be sent to you. The command for the password is similar to a
text line and can be edited the same way.
Please enter your password.
<INPUT type="password" name="UserPass">
Textarea
This command allows you to generate a text box on your form for user input,
not just a line of wrapping text. The basic command for this is:
<TEXTAREA name="anyname">
</TEXTAREA>
We can edit this by adding more attributes within the tag. Columns and rows
can be described. Also text added between the starting and ending Textarea
tags appear within the text box. This text is formatted exactly as typed
including tabs, spacing and returns. Below is an example of this.
Please add any comments you may have about this form class here
<P>
<TEXTAREA name="Comments" rows="9" cols="44">
Constructive criticism carries more clout
than negative does.
Tabs and
returns work within TEXTAREAS.
</TEXTAREA>
Constructive criticism carries more clout
than negative does.
Tabs and
returns work within TEXTAREAS.
12
13. Submit Image
Earlier we learned how to create a submit button on the form. We also saw
how to edit the text within that submit button. Now we will learn how to use
an image instead of a button to send the form. Note, you can only make a
Submit button, not a Reset image button.
<INPUT type="image" src="submit.gif">
SUBMIT
Saving
Every time changes have been made to your simple text documents they
should have been saved. The method to save as an HTML file has been
discussed earlier. To save you would go to the File menu and choose Save
or Save As. Make sure that the file extension (ending) is .htm or .html.
Testing and Uploading
Initial stages of testing are done after changes are made to see the effects of
text and HTML changes on the view of the page. To fully test the form it
needs to be uploaded to a server. We will be using our OAK accounts
provided by the university. File uploading is done using an FTP program
and is covered in more detail in Part One "Creating Web Pages with HTML"
Once the HTML file containing the form has been uploaded it can be
accessed on the Internet and further tested by you, the programmer, filling it
out and then sending the results to yourself.
13
14. Frames
Frames are an easy way to make any page look more professional. The
frame commands tells the browser to split the screen into two or more parts,
each with a separate web page. To do this we need to create a web page
with the commands to tell the browser how to split the screen. You begin
with the FRAMESET section which is in place of the BODY section.
<HTML>
<HEAD>
<TITLE>Sample </TITLE>
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC="pageone.html">
<FRAME SRC="pagetwo.html">
</FRAMESET>
</HTML>
In this FRAMESET tag we tell the browser to split the window vertically
with the attribute COLS. There will be two pages shown. The first one
taking up 25% of the screen, and the second one taking up the remainder of
the screen. To split the window horizontally, use the ROWS attribute.
<FRAMESET ROWS="75%,*">
<FRAME SRC="pageone.html">
<FRAME SCR="pagetwo.html">
</FRAMESET>
We also need to tell the browser the names (URLs) of the web pages to go
into the separate windows. The FRAME command tells the browser the
location of the page to be viewed in a particular frame. The first page source
will be displayed on the left column or the top row and the remaining pages
will follow.
14
15. Frames can be used as a navigational tool for the users to browse through
our pages. To do this we need to create several web pages. One page to
hold the navigational links on the left, one as the default page and a couple
to practice navigating. First, to generate the page that tells how to set up the
frames, enter the following. Save this file as "Frame.html".
<HTML>
<HEAD>
<TITLE>Start Frames </TITLE>
</HEAD>
<FRAMESET COLS="20%,*">
<FRAME SRC="Contents.html">
<FRAME SRC="Default.html" name="main">
</FRAMESET>
</HTML>
This will create the main page that will hold our other pages in its frames.
Naming the second, or right hand window frame "main" will allow us to
switch this frame for others depending on which link our users click on.
Now we need to create a page that will be held in the larger right window as the default
before the user selects which page to view. Enter the following text. Save this file as
"Default.html".
<HTML>
<HEAD>
<TITLE> My Default Page </TITLE>
</HEAD>
<BODY bgcolor="white">
<FONT size=6 color="blue">
<CENTER>
This is my main page.
<P> From here you will be able to navigate to
my different sites by choosing my links on the left.
</CENTER>
</BODY>
</HTML>
15
16. Now we need to create the Contents page. This page will be seen in the first
or left hand window. Enter the following into Notepad and save as
"Contents.html".
<HTML>
<HEAD>
<TITLE> My Contents Page </TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
<B> Pick An Animal </B>
<P><A HREF="dog.html" TARGET=main>DOG</A>
<P><A HREF="cat.html" TARGET=main>CAT</A>
<P><A HREF="bird.html" TARGET=main>BIRD</A>
<P>
</BODY>
</HTML>
Within each anchor tag notice the "TARGET=main" addition. This tells the
browser to put the page signified by the link address into the Frame named
"Main". You may choose any name you wish, but it must match.
For time saving purposes, the pages dog.html, cat.html, and bird.html are
already on your lab computer. Please copy them and the images with the
same names, to wherever your html file is located. Once all this is done, you
should get the following:
16