1 / 17

Part 3 Creating basic HTML web pages

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).

joey
Download Presentation

Part 3 Creating basic HTML web pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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.

  3. 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.

  4. 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.

  5. 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

  6. Let’s begin . . .

  7. [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.]

  8. 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.

  9. Viewing your webpage • You should now be able to see your web page on the “live” Internet. • URL: http://mysite.netfirms.com/mypage.htm

  10. Notes about revising your page.

  11. 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.

  12. [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

  13. Different input options • Radio buttons • Checkboxes • Textboxes • Textarea • Select menus

  14. [example of different input options with code]

More Related