Transcript AMASS 2006 - workshop part 3

Part 3
Creating basic HTML web pages
Psychological Science on the Internet:
Designing Web-Based Experiments From the Ground Up
R. Chris Fraley | AMASS 2006
HTML web pages
• Most web pages are written in a language called
HTML (hypertext markup language).
• HTML files exist on a web server. When a person
types in the URL for a specific file in his or her
web browser, the person is essentially retrieving
that pre-existing file from the web server.
HTML
• There are many programs that are designed to
help you create HTML files
– Macromedia’s Dreamweaver
– Microsoft’s FrontPage
• These kinds of programs are often called
WYSIWYG programs. They allow you to create
web pages in the way in which you want them to
appear; the HTML code is generated in the
background.
WYSIWYG
• There are two reasons for NOT using these kinds
of programs if you’re going to be conducting
research over the Internet.
– Not dynamic. We’ll be writing CGI scripts that
create the code on-the-fly (i.e., web programs that
create web pages). As such, a WYSIWYG program
cannot help us.
– Code bloat. These programs often create
unnecessary and confusing code if you revise your
pages or make changes.
EditPlus
• Although there are good reasons not to use
WYSIWYG programs, there are good reasons to
use programs that will make HTML coding easier
for you.
• The perks of EditPlus
(http://www.editplus.com/)
– Free trial version
– Works in a lot like MS Word (e.g., buttons for
placing text in bold), but creates the HTML code for
you rather than doing so in the background.
– Built-in browser so you can see what your code
looks like as you write it
– Color-coding
– Spell checking
• Let’s begin . . .
• [Live examples of creating HTML code using
EditPlus. Review use of text, basic formatting
(bold, italics), line breaks, colors. Inserting
images, links, and sound files. Using CSS to
format things in a global fashion.]
Transferring your web page to the web
server
• Save your file with the *.htm extension.
Example: mypage.htm
• Go to the Netfirms web page and login to your
account.
• Go to the File Manager.
• Click the “www” folder to open your www
directory (i.e., the directory where your web
pages will reside)
• Click the “upload” button.
• Find mypage.htm on your computer using the
“browse” option.
• Upload the file.
Viewing your webpage
• You should now be able to see your web page on
the “live” Internet.
• URL: http://mysite.netfirms.com/mypage.htm
• Notes about revising your page.
Forms: How to collect data
• The majority of web pages simply exist to
provide content.
• It is also possible to use web pages to collect
information through the use of forms.
• Forms are special segments of a web page that
tell the browser that information is to be
collected.
• [Example of a web page using a form]
• The live page is at:
• http://aps2005.netfirms.com/self-esteem.htm
• The original HTML code can be copied and pasted
from the following location:
• http://web-researchdesign.net/APS2005/files/self-esteem.htm
Different input options
•
•
•
•
•
Radio buttons
Checkboxes
Textboxes
Textarea
Select menus
• [example of different input options with code]