University Information Technology Services Creating a Web Page with HTML Table of Contents Learning Objectives ...................................................................................................1 Introducing HTML:....................................................................................................2 The HTML Document Basics ....................................................................................3 HTML Tags................................................................................................................4 Creating the HTML Document ..................................................................................6 Adding Body and Text Color...................................................................................................... 7 Using Background Images .......................................................................................................... 8 Saving the HTML Document ..................................................................................................... 9 Viewing the HTML Document ................................................................................................... 9 Entering & Formatting Text.....................................................................................10 Inserting Images .......................................................................................................14 Creating Lists ...........................................................................................................16 Creating Hyperlinks .................................................................................................16 Publishing & Viewing Your HTML Document ......................................................19 Publishing ................................................................................................................................. 19 Viewing..................................................................................................................................... 19 Working with Tables ................................................................................................22 Linked Windows ......................................................................................................24 Working with Frames...............................................................................................25 Creating Forms .........................................................................................................28
The HTML Document Basics ....................................................................................3
HTML Tags................................................................................................................4
Creating the HTML Document..................................................................................6
Adding Body and Text Color...................................................................................................... 7 Using Background Images.......................................................................................................... 8 Saving the HTML Document ..................................................................................................... 9 Viewing the HTML Document................................................................................................... 9
• How the Web browser and Web server communicate via http
• Your Web server
• Understanding the required markup tags
• The knowledge to apply formatting tags, list tags, color tags
• How to insert tables, graphics, and hyperlinks
• How to publish your Web page via FTP
• How to make editing changes
• How to create tables, frames, and forms
1
INTRODUCING HTML:
What is HTML? According to the Dictionary of Computer and Internet Terms1 HTML (Hypertext Markup Language) is a set of codes that can be inserted into text files to indicate special typefaces, inserted images, and links to other hypertext documents. When you surf the Web, the actual Web page you are viewing is displayed according to how the HTML code is written. Web Servers, Web Browsers, Http, and HTML A Web server is a computer that stores files written in hypertext markup languages (such as Web pages). Other computers connect to these Web servers through a software interface called Web browsers. Examples of Web browsers are Mosaic, Netscape Navigator, or Microsoft’s Internet Explorer. When you type in a Web address, the web browser sends a request for a web page to a web server. The browser requests specific documents or services to be delivered from the Web server. If the documents or services are available, the Web server returns it to the browser using http (hypertext transfer protocol).
Your Web Server for Your Web Page To publish (see page 19 for publishing) a Web page here at Kennesaw State University, you may want to use any one of many web servers. Students can use the students server, and faculty/staff may use the ksuweb server or a department supported server such as the science server. The address of the students server is students.kennesaw.edu. The address of the ksuweb server is ksuweb.kennesaw.edu. In your account on this server there will be a folder or directory named html, this is where you need to place your web pages so that they are accessible over the Internet.
1 Covington, M.M, Covington, M.A., & Downing, D (2000). Dictionary of Computer and Internet Terms. New York: Barron’s.
2
THE HTML DOCUMENT BASICS
Skills & Tools Needed You do not have to be a programmer to code with HTML. It helps to have an understanding of Web designing to make your Web site more effective, but no prior experience is necessary to create HTML documents.
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., vi on UNIX machines; SimpleText on a Macintosh; Notepad on a Windows machine). This workshop uses Notepad, but you can use any word processing software as long as you save it as “text only with line breaks”.
Tags To format text and graphics, HTML uses “tags”. Tags are characters contained within angle brackets (e.g. <H1>). Each tag performs a particular action, such as making text a specific size, aligning an image, or inserting a hyperlink.
Many tags have a beginning tag to turn on a formatting option, and an ending tag to turn off the formatting. Beginning tags take the form <TAG>, and ending tags take the form </TAG>.
The tags are not case-sensitive. You can type them in lower case, capital case, or a mixture of the two. Generally the HTML tags are typed in all caps to distinguish the code from text.
The following section lists some the common HTML tags.
3
HTML TAGS Required Markup Tags for Creating a Page
<HTML> </HTML> Declares that the document is HTML
<HEAD> </HEAD> Contains information about the document such as the title
<TITLE> </TITLE> Title of the document (displayed in the title bar of the browser)
<BODY> </BODY> Contains all the displayed information
Color Color can be specified by the name of the color or by the RGB (Red, Green, Blue) value. RGB is the red, green, blue values specified by a two digit hexadecimal number. This number represents the strengths of the primary colors. For example, Red=FF0000.
<BODY BGCOLOR=”blue”> Background color
<BODY BACKGROUND=”filename.gif”> Background file
<BODY TEXT=”white”> Text color
<FONT COLOR=”blue”> or <FONT COLOR=”0000FF”> Text color
Preformatted Text <PRE> </PRE> Browser displays text as typed in the HTML
document.
4
Paragraphs, Fonts, Headers, Typeface Styles
<H1> </H1> Example Heading tag that formats text to approximately 24 point font size
<H3> </H3> Example Heading tag that formats test to approximately 12 point font size
<H6> </H6> Example Heading tag that formats test to approximately 8 point font size
<FONT SIZE=“+1”> </FONT> Increases font size to approximately 8-9 pts. (2= 10pts, 3=12pts, 4=14pts, 5= 16pts, 6=18pts, 7=24 pts)
<FONT FACE=“arial”> Displays the text in font Arial.
<B> </B> Displays text in a bold typeface
<I> </I> Italicizes the text
<BLINK> </BLINK> Makes the text/ image blink
<P> </P> Beginning paragraph. The ending tag is optional. Gives a double space to the next line of text.
<P ALIGN=“center”> Aligns paragraph as center.
<BR> Line break. It has no ending tag.
  Non breaking space. Gives space between letters or words (functions like the space bar).
5
Images
The main types of image files used for HTML documents are GIF and JPEG.
<IMG SRC=“filename.jpg”> Defines the image source and inserts a graphic file into the HTML document.
<IMG SRC=“filename.jpg” ALIGN=“right” > Right aligns image.
The image is centered with a defined height, width, and border. “Alt” is the text that is displayed if the image cannot be displayed.
Lists
<OL> </OL> Indicates an ordered (numbered) list.
<UL> </UL> Indicates an unordered (bulleted) list.
<LI> </LI> Indicates an item in a list.
CREATING THE HTML DOCUMENT
Exercise: Beginning Tags
1. Open the application Notepad.
2. Type the <HTML> tag. Press ENTER.
3. Type the <HEAD> tag. Press ENTER.
4. Type the title of your page between the beginning and ending <TITLE> tag (e.g.
<TITLE>My HTML Page</TITLE>). Press ENTER.
5. Type </HEAD>. Press ENTER.
6. Type <BODY>. Press ENTER 5 times then type </BODY>.
7. Press ENTER about 2 times and type the closing HTML tag (</HTML>).
Your document should look like this screenshot:
6
Adding Body and Text Color You may want to begin the body by applying a background color and a text color. To do this you need to include the color information inside the appropriate tag. The default background color is white (or light gray); the default text color is black. You can use the name of a color, such as “blue”, for common colors. For other colors, you may need to know the RGB code (e.g., 0000FF). The following Website contains a good color reference: http://gotomy.com/color.html
Exercise: Add Body and Text Color You can enter tags to determine the color of your text and background. The colors that are stated in the body tag will apply to the entire Web page.
1. Replace the <BODY> tag with <BODY BGCOLOR=“lightblue” TEXT=“4B0082” LINK=“Sienna” VLINK=“Slategray”>
• You can replace the color names or RGB code with the color of your choice. BGCOLOR is the background color of your Web page. TEXT is the text color. LINK is the color designated for your hyperlinks (discussed later). VLINK is the color your hyperlinks will change to after the browser has been to that Web address.
7
Using Background Images If you prefer, you can use an image (texture, pattern, picture, etc) for your background, rather than a solid color. To do this, you must have an image file to insert into your Web page. You can find image files on the Internet by using a search engine and entering the term “background images”. Once you have found a worthy site you must download the image file onto your computer.
1. Place your mouse pointer on top of the image you wish to down load. 2. Right-click on the image.
You should get a menu similar to these, depending on which browser you use: ) )
3. 4.
To
Re Noove At
Internet Explorer (IE
Select “Save Picture As” (IE) or “SSave the file to the same folder youfilename, but do not change the file
apply the background image to the
<BODY BAC
place “filename” with the name of
te: You cannot combine a backgrourride the color.
this point, you document should loo
Netscape Navigator (NN
ave Image As” (NN). r HTML document is stored. You can change the extension (.jpg, .gif, etc).
HTML document, type:
KGROUND=“filename.jpg”>
the image file, (e.g. yeltextr.gif).
nd color and a background image-the image will
k similar to the screenshot on the next page:
8
Saving the HTML Document From time to time you will want to see what your HTML document will look like in the Web browser. To do this you will need to save your document.
1. Click on File, Save As.
2. In the Save In box, click on the down arrow and choose the folder (e.g. DL) you wish to
save the document in.
3. In the File Name box type “index.htm”.
4. Change the Save As Type box to “All Files” by clicking on the down arrow.
5. Click Save.
Viewing the HTML Document To view your HTML document, open a Web browser and then open your HTML file.
1. Open Internet Explorer or Netscape Navigator.
2. In the Address bar, type the path where your file is located (e.g. C:\DL\index.htm). Press
ENTER.
Note: Every time you make a change to your HTML document you must save it. To view the
changes, click on the Refresh icon on the browser.
9
ENTERING & FORMATTING TEXT You can enter text into the document as you would if you were using a word processor to type a letter or report. However, all formatting that is done to the text, (e.g., font size, alignment, line spacing, etc.) must be done with HTML tags. You will place most text within a beginning and an ending formatting tag. Page 5 shows some formatting tags. How the browser displays your HTML document depends on factors such as the markup tags used, the physical page width, the fonts used to display the text, and color depth of the display. The browser will ignore extra spaces between words, lines, and markup tags. Exercise: Extra Spaces, New Lines, and Spaces between Markup Tags Type in one of fragments below exactly as it appears (note where line and space breaks are).
Line 1 Line 2 Line 3 Notice how this line is not how it looks.
Notice how this line is not how it looks.
Notice how this line is not how it looks.
Your document should look similar to this:
View the document in the browser to see if it displays as you typed it. Despite which fragment you decided to type, they will all look the same in the browser. The next exercise focuses on how the HTML document handles line spacing. As you noticed before, no matter how many line spaces you have in the actual HTML document, the browser doesn’t recognize them. The browser only recognizes line spaces and breaks when the appropriate tags are applied such as the Paragraph tag <P> and the Line break tag <Br>.
10
Exercise: Entering Text
1. Type: <H1><CENTER>Welcome To My HTML Page</CENTER></H1>
The <H1> tag makes the text the H1 header size; the <CENTER> tag aligns the text in the center of the page. Note the order of beginning and closing tags.
2. Press ENTER and type the following:
A line of text.<Br>Another line of text. The <Br> tag makes the second sentence appear one line below the first such as:
A line of text. Another line of text.
3. Press ENTER and type <Br><Br><Br> to add three blank lines. This is equivalent to hitting ENTER three times in a word processor. 4. Press ENTER and type the following:
<P>A line of text.</P> <P>Another line of text.</P>
The Paragraph tag tells the browser to skip a line and begin on a new line. This helps it to differentiate between paragraphs. 5. Save your document. Your document should now look similar (not exactly) to this:
11
6. View your document in the browser (remember to Refresh each time you save changes to
your HTML document). Your Web page should look similar to this:
Pre-formatting Text There is a way for the browser to recognize if you have pressed ENTER or TAB in your document. You can use the Preformat tag <PRE>. If the Preformat tag allows the browser to display text exactly as it is displayed in the document, why couldn’t you just use it for the whole HTML document? Two reasons:
1. The PRE tag displays text in monospaced fonts (gives each letterform the same width) such as Courier. Courier font is similar to a typewriter font. Most websites are not designed in this font.
2. The output will not display exactly as typed in the HTML document. For example, the TAB key may be .5” in one browser or .3” in another.
Alignment shows whether your text is left, right, justified or center aligned. The ALIGN attribute is assigned to the tag. For example, to center align text in a paragraph you use the opening paragraph tag with the alignment.
<P ALIGN=”center”>
You can also use a Div tag. The Div tag has no formatting properties of its own but carries the properties of whichever attribute is used with it. It won’t affect the look of your page in the browser. The W3C (World Wide Web Consortium) recommends using the Div tag.
<DIV ALIGN=”center”>
12
Exercise: Entering the Welcome Message Type a welcome message and add formatting tags such as center alignment, a 14 pt. font size, a font color of black. An example might be: “I am glad you decided to visit and I hope you will stick around and see what I have displayed here for you. Here I have listed some pictures and links I think you will find interesting. Enjoy!” Your HTML document should look similar to this:
13
INSERTING IMAGES
To insert images into your HTML document you use <IMG SCR> (image source) tag. This tag doesn’t have an ending tag so you can use a space-forward slash ( /) just before the final bracket.
<IMG SRC=”photo.jpg” ALT=”a photo” />
The two most widely supported image file types are .jpg and .gif. .jpg (pronounced jay-peg) is an acronym for joint photographers expert group and .gif (pronounced jif) is the acronym for graphic interchange format. The word “ALT” is the alternative text that displays while the image is downloading. After you insert your image tag into your HTML document, ensure you have the image file in the same folder as your index.htm file to view it in the browser. Exercise: Insert an Image Insert an image and include alternative text.
1. Type the alignment in first with the div tag: <DIV ALIGN=”center”>
2. Type in two break line tags:
<Br> <Br>
3. Now type in your image tag: <IMG SRC="MilkyWay.jpg" ALT="The Milky Way Galaxy" />
4. Save the file. 5. View it in the browser and place your mouse pointer over the image. You should see the
alternative text you typed in. The next page displays two screen shots that should be similar to your HTML document and how it looks in the browser.
14
The HTML Document
The view in the browser
15
CREATING LISTS
You can create several lists with HTML, but we will explain these two types of lists:
1. Unordered list (bulleted list)2. Ordered list (numbered list)
For example, if you wanted to list the types of fruit you eat you might write the HTML as:
<B> Fruit </B> <OL> <LI> Oranges <LI> Apples <LI> Bananas </OL>
CREATING HYPERLINKS
A hyperlink is a link that a user can click on and it will take them to another Web site or another Web page within the same site. This is part of the capability of HTML (the first and second letters of HTML standing for “Hypertext”).
To create a hyperlink you need to use the hypertext reference tag, the URL (Uniform Resource Locator) or Web address, and the text you want displayed on the Web page. For example:
<A HREF=http://www.kennesaw.edu>Kennesaw State University’s Web site</A>
Exercise: Creating Lists & Hyperlinks
Let’s create a list of three hyperlinks for our Web page. You can decide if you want the list to be ordered (numbered) or unordered (bulleted). Format the displayed text with a heading tag.
1. Enter a bold heading and add a line break after it. For example:<B> This is a list of my favorite sites</B> <BR>
2. Enter three hyperlinks of your choice as a list. For example:<UL><LI><A HREF=http://www.cnn.com> <H3>Get the News </H3> </A> <LI><A HREF=http://www.weather.com> <H3>The Weather </H3> </A> <LI><A HREF=http://www.kennesaw.edu> <H3> KSU Website </H3> </A> </UL>
3. Change the link and visited link (vlink) color.4. Save your file, view it in the browser, and check your links.
16
Your Web page should look similar to this:
You can create a hyperlinked image by adding the hyperlink reference before the image source tag. For example: <A HREF=http://www.nasa.gov>< IMG SRC="MilkyWay.jpg" ALT="The Milky Way Galaxy" /></A> The image will have a border around it in the same color you designated as your link color.
17
Creating a Mailto Hyperlink Whenever you create and publish a Web page you should always provide an email address for your visitor to contact you. This is a good idea in case something is not working correctly on your page such as a link or an image not downloading. A mailto is a hyperlink that is written with “mailto” instead of “http”. Clicking on this mailto causes the visitor’s email program to open a new message with your email address in the TO: field of that message. For example:
<A HREF=mailto:[email protected]>Email me </A> Note: This only works if your visitor has an email program setup on their computer. It will not work in the labs on campus. You can also use an image as a mailto. To do so, simple insert the mailto tag before the image source tag. For example: <A HREF=”mailto:[email protected]”>< IMG SRC="MilkyWay.jpg" ALT="The Milky Way Galaxy" /></A> Exercise: Creating a Mailto Create a mailto link and center it.
1. Type in <DIV ALIGN =“center”> <A HREF=mailto:[email protected]>Email me </A> </DIV>
2. Save your work.
3. View it in the browser.
18
PUBLISHING & VIEWING YOUR HTML DOCUMENT Publishing Publishing a Web page is the process of placing your HTML document on a Web server. Once you have established an account on a Web server, you must FTP your file to that server. FTP stands for File Transfer Protocol. It is a standard way of transferring files on the Internet. To FTP a file to a server you must have an FTP software program. At Kennesaw State University the program WS_FTP95 is available on the Start button > Owlnet > WS_FTP_95. If you do not have this software you can download a free evaluation copy at http://www.ipswitch.com/downloads. You will see WS_FTP LE at the bottom of the page. When you install this program, if you indicate that you are a student or faculty member, it will not ask you for registration information. Viewing After you have published your HTML document you can view it on the Internet by typing in your Web address in the browser:
For the Students server- http://students.kennesaw.edu/~username
For the Ksuweb server- http://ksuweb.kennesaw.edu/~username
If you need to edit the Web page certain steps need to be taken:
1. Download the HTML document from the Web server to your machine.
2. Open the HTML document.
3. Make the editing changes and save the document.
Exercise: Publishing Your Web page with WS_FTP95 When you are ready to publish your Web page, you can follow the steps below to send your files to the server.
1. Open the FTP program WS_FTP95. 2. Fill-in the fields as:
Profile Name: Students (or Ksuweb for faculty/staff) Host Name/Address: students.kennesaw.edu (or ksuweb.kennesaw.edu) Host Type: Automatic detect User ID: type in your username Password: type in your password NOTE: Do not check the boxes in front of Anonymous or Save Pwd!! Your screen should look similar to this dialog box:
3. Click OK. Clicking OK creates a connection to the Web server. Here you will see two windows: one window displays the Local System, or your computer, and the other window displays the Remote System or Web server.
20
Your file must be uploaded in the html folder.
5. Open the html folder by double-clicking on it. The address in the Remote System shouldbe “/home/username/html".
6. Highlight the HTML file you wish to upload by clicking on it once (from the LocalSystem window).
7. Upload the file by clicking on the arrow pointing right. This sends it to the server.
8. Do the same for all the files you referenced in your HTML document.
21
WORKING WITH TABLES
Tables in HTML have revolutionized Web page design because tables can be used not just for presenting data in a tabular form, but also for page layout and control over placement of various elements on a page. Tables have become so popular that most major browsers have now added table support. Using the <TABLE> tag creates the table. Inside the <TABLE>… </TABLE> tags, you define the actual content of the table. Tables are specified in HTML row by row, and contain definitions for all the cells in that row. <TABLE> </TABLE> Table – creates the table <TH> </TH> Table heading – label of the rows or columns. <TD> </TD> Table data – actual value within a cell. <TR> </TR> Table row –creates the rows of the table Using the <TABLE> tag creates the table. Inside the <TABLE>… </TABLE> tags, you define the actual content of the table and attributes associated with the content. Some attributes of <TABLE> tag:
1. BORDER – width of border around the table. 2. CELL SPACING – amt. of space between cells. That is, the width of the shaded lines
that separate the cells. Cell spacing is 2 by default. 3. CELL PADDING – amt. of space within the cell. That is, the width between the text and
the border of the cell. 4. ALIGN – attribute of the TH, TD, and TR tags. Horizontal alignment of text within cells. 5. VALIGN – Vertical alignment of text within cells.
You should plan out the dimensions of your table first then create the code for it. Determine the number of rows you will need and the headings of those rows. Think about the border you would like to apply to it. You can customize text within each cell with the formatting tags you have already learned. This is the table we will create in the next exercise:
Table 1.2: Mixing Colors
Red Yellow Blue
Red Red Orange PurpleYellow Orange Yellow GreenBlue Purple Green Blue
22
Exercise: Creating Table1 Create a table with an empty cell, a border of 5 pixels wide, and headings along the side and across the top. Save this exercises in a file called tables.htm.
Note: To create a table without a border, specify BORDER=0.
1. Open a new document in Notepad and enter beginning HTML tags. 2. Type a title such as “Table 1.2: Mixing Colors”. 3. Enter the table border tag. 4. Enter the table row tag and the headings for the table. 5. Enter the next three rows. 6. Enter the closing table tag.
Your code should look similar to this file:
7. Save the document.
23
Exercise: Creating Table2 Let’s create another table. Create a 1x2 (1 row, 2 columns) table with one cell text and one cell an image. Don’t forget to copy the image file to the same folder that your HTML file is in.
1. In the same document, enter the table tag with a cell spacing of 50 pixels.
2. Create one row and enter “This is my favorite place to go” as table data.
3. In the same row, enter the image and center align it. It should look similar to:
<TABLE CELLSPACING=50> <TR> <TD>This is my favorite place to go.</TD> <TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="fuji.jpg"></TD> </TR> </TABLE>
4. Save your work and view your document.
LINKED WINDOWS
Before looking at frames, it’s important to know about linked windows (also known as target windows). A linked window is a new browser window that is opened when clicking on a link, button, etc. You must use the TARGET attribute of the <A> tag. (The target attribute will also be useful when creating frames.)
For example, if you want your visitor to go to the Kennesaw State University website and not leave your website, you can have another browser window open to the KSU Web page. Here is what the HTML code would look like:
Exercise: Linked Windows Close out of tables.htm and create a new file called linkwin.htm in Notepad.
1. Enter the following code to create a target window: <HTML> <HEAD><TITLE>TARGET PARENT WINDOW</TITLE> </HEAD> <BODY> <H1>Target Parent Window</H1> <P> <A HREF="http://www.kennesaw.edu" TARGET="KSU_window">KSU_window </a> Opens a new window called KSU_window. </BODY> </HTML>
2. Save and name linkwin.htm 3. Preview in the Web browser.
24
WORKING WITH FRAMES
Frames are the sections of a Web page that display different text, graphics, or websites as a portion of that Web page. You must first create a frame definition document (called a frameset document) using the <FRAMESET> tag. This tag replaces the <BODY> tag in the HTML document. For the next exercise we will create a layout that displays one page on 25% of the website and the other page on the remaining 75% such as:
navigate.htm main.htm
75%
25%
Exercise: Creating the Frameset Document
1. Open a new file and create the frameset document by entering the following code: <HTML> <HEAD><TITLE>Frames</TITLE> </HEAD> <FRAMESET COLS="25%,75%"> <FRAME NAME=”leftFrame” SRC="navigate.htm" NORESIZE> <FRAME NAME=”rightFrame” SRC="main.htm"> </FRAMESET> </HTML>
2. Save and name the document frameset.htm.
If you try to view frameset.htm within your web browser you will see a blank screen. That’s because the frameset document is used to define the layout of your frames. Separate HTML documents must be created for each frame. The fourth line of code is defining two columns. The left column (frame) will take up 25% of the browser window. The second column (frame) will use 75% of the browser window. The next two lines specify the HTML document that will be viewed in each frame. Each frame has a name: the left frame (navigate.htm) is called leftFrame; the right frame (main.htm) is called rightFrame.
25
Exercise: Creating the Frame Documents From the last exercise we created the frameset document. Now let’s create the HTML documents it references.
1. Create a new document and include the required basic HTML tags in it. 2. Title it “Main Frame” and in the body type, “This is the main frame”. 3. Save and name the document main.htm. It should look like this:
4. Close this document and create another new document.
5. Type the following code: <HTML> <HEAD><TITLE>Navigation Frame</TITLE> </HEAD> <BODY> <H1>Navigation Window</H1> <P> When you click on this link it should open the web site in the right window frame. <P> <A HREF="http://www.intellicast.com" TARGET="rightFrame">US & World Weather</A> </BODY> </HTML>
6. Save, name the file navigate.htm, and close this file.
7. View the file frameset.htm within the browser.
26
The browser should look like:
8. Click on the US & World Weather link. It should open that Web site in the main frame.
27
CREATING FORMS Forms are input screens that collect information. Online forms allow users to order a product, comment on a site, or register for a service. Forms are part of standard HTML and are widely supported by just about every browser. Unlike all the previous tags you’ve learned thus far, the <FORM> tag allows users to interact with the web site through surveys, presentations, etc. Creating a form usually involves two independent steps: 1) creating the layout for the form and 2) writing a script program on the server side (called a CGI script) to process the information you get back from the form. Today you’ll learn about the HTML side of the process. To learn about CGI scripts go to:
http://its.kennesaw.edu/help/web/cgi.html Attributes of the <FORM> tag: • ACTION – indicates the CGI script that will process the form input. • METHOD – how the form input is given to the CGI script that processes the form.
The tag <INPUT TYPE=> tells the browser to expect user input. Attributes of the <INPUT> tag: • SUBMIT – creates a submit button • TEXT – creates a text box • RADIO – creates a radio button • CHECKBOX – creates a check box • RESET – creates a reset button, which resets the default values of the form, if any.
28
29
Exercise: Creating a Form In this exercise we will create a simple form that asks the name and profession of the user. We will use all the attributes listed about. Remember that you will not be able to submit the form since that involves having a CGI bin.
In a new Notepad file, create a form that posts the form input to the CGI script located at http://www.myserver.com/cgi-bin/form-name.
1. Create a new file and enter the basic HTML tags with a title as “Testing Forms”.2. Enter the following code:
<HTML> <HEAD><TITLE>Testing Forms</TITLE> </HEAD>
<BODY> <H2>Who are you?</H2> <FORM METHOD="POST" ACTION="http://www.myserver.com/cgi-bin/form-name"> <P>Enter your name: <INPUT TYPE="text"> <P>Profession (choose all that apply): <UL> <LI><INPUT TYPE="checkbox">Doctor <LI><INPUT TYPE="checkbox">Attorney <LI><INPUT TYPE="checkbox">Teacher <LI><INPUT TYPE="checkbox">Programmer <LI><INPUT TYPE="checkbox">Student </UL> <P><INPUT TYPE="reset"> <INPUT TYPE="submit"> </FORM> </BODY> </HTML>
3. Save the file, name it form.htm and view it in the browser.
