Part 3 Creating basic HTML web pages Psychological Science on the Internet: Designing Web-Based Experiments From the Ground Up R. Chris Fraley | APS 2005

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 [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-research-design.net/APS2005/files/self-esteem.htm

Different input options Radio buttons Checkboxes Textboxes Textarea Select menus

[example of different input options with code]