Last updated: 9/17/00
Link back to course Welcome

This section added after class on Sunday, September 17:
To keep FrontPageEditor from changing your action in the form tag:

1. Right-click anywhere inside the form (that is, inside the dotted box)
2. On the menu that appears, click "Form Properties..."
3. In the Form Properties dialog box (see picture below), under "What to do with form results?", click "Send to other" and make sure that the selection box shows "Custom ISAPI, NSAPI, CGI, or ASP Script"
4. Click OK.
5. Once you have selected this, FrontPage should remember it for the computer you are working on.
6. It is now OK to change the form action and save.
   

Agenda for class 2
9/13/00
(eCommerce only)

1. eCommerce Teams
   1. Establishing teams
   2. General responsibilities - will go over these in much more detail during the next class
      1. Create working eCommerce web site with interim versions
         1. There is a first web site project that we will go over later tonight
      2. Turn in team report, with interim versions
   3. Officers - will go over these in much more detail during the next class
      1. For now, each team should choose its Chief Executive Officer or CEO. The duties of the CEO are to make sure that everything gets done, that the team communicates as it needs to (phone? F2F or Face to Face? computer conference?), to keep track of what each team member does, to coordinate production of the reports, email the reports to me, and notify me when each interim version of the eCommerce web site is ready for my inspection. However, the CEO, like each of the other team members, is supposed to make an equal contribution to the detailed work of creating the eCommerce web site.
      2. If a team member is not contributing a fair share,
         1. This should be apparent from the team reports by not listing very many things that they did. If a team member did nothing, then don't list anything for them. This will lower that team member's grade.
         2. If the team report gives people credit for things that they did not actually do, I will generally be aware of this, and that part of the report will be discounted, lowering the team's grade for the report.
         3. Also, team members that have complaints should discuss them with me, in privacy if they wish. My first choice will be to have the team take care of its own discipline, but if that is not working, I will find a way to step in.
   4. Each team has its own private computer conference, in addition to the general class conference, to use or not use as it sees fit
2. Computer Conferencing
   1. Getting set (and staying set) for the course Computer Conference - the name is eCommerce and Internet, Fall 2000 (Bowen)
      1. If you have not logged on to the computer conference before, let me know, and for now you will have to look on with someone who has done this. But do that initial login as soon as possible, tonight if possible, and let me know that you have done it (use email after tonight)
      2. If you have used the CLL conferencing system in an earlier class (probably with Lisa Maruca, Julie Klein, Jerome Reide or Marsha Richmond), the User Name and Password from that class are still valid. However, I still have to add you to the computer conference for this course.
      3. If you forget your User Name and/or Password, I can get them for you.
   2. If you are set, start Netscape, go to the course web site, follow the link to the computer conference, and log in. You should now see the name of the course computer conference, as in IIA above. We will go through the following operations, which are the minimum you will need for this course:
      1. Bringing up your new messages (new since the last time you "Marked All Conferences Read")
         1. There is a link to this list when you first log in
         2. You can bring it up later in the session by using the "MARK ALL READ" button and then the link at the bottom to "Show New Messages"
         3. The "MARK ALL READ" button also brings up a list of messages sorted by conference. By clicking on a conference, you will mark only the messages in THAT conference as read. You are only required to read the messages in the conference for this course, so clicking on the other conferences will clear their messages off of your list of new messages
         4. Reading a message does not remove it from the list of new messages! If you never "Mark All Conferences Read", your list of new messages will get bigger and bigger, and will become unusable. Periodically (weekly?) read your new messages and "Mark All Conferences Read".
      2. Bringing up the complete list of messages for a conference. (People can get the mistaken impression that they are deleting messages when the "Mark All Conferences Read". No, the message stays in the conference, but it only moves off of the list of new messages.)
      3. Reading, replying, etc.
         1. To read a message, click on it, either in the list of all messages or in the list of new messages
         2. To reply, click on the "Reply" link in the blue bar at the top of the message
         3. To include the original message in your reply (is helpful by supplying context for those who read the message, but edit out the parts of the original message that you are not replying to), click on the "Reply/Quote" link in the blue bar at the top of the message
         4. To print a message, click in the message window (but not on a link) to select the message window, then use your Browser's menu item File / Print Frame...
         5. To grab a message electronically, select (drag over) the part of the message that you want and use your Browser's menu item "Edit / Copy" (to the Windows clipboard), then start the application that you want the message in (Notepad, Word, etc.) and use "Edit / Paste" in that application.
         6. To edit a message offline, reverse the process in e above (good for long complicated messages), but you will lose most of the formatting, so don't spend too much time on formatting
         7. The "Edit" link in the blue bar at the top of the message will let you edit messages that you have written, but want to change. "Delete" works in a similar way.
         8. "Next" and "Previous" in the blue bar at the top of the message take you to the next and previous messages for that topic. "Next Topic" and "Previous Topic" take you to the next and previous topics.
         9. To Post (start a new topic), use the "Post" link in the blue bar at the top of the message, or choose the "POST" button up higher.
      4. Heirarchical message structure
         1. Messages are arranged heirarchically in an outline-like structure. "Post"ed messages are the highest level, a Reply to a Post is the next level down, then a Reply to a Reply, then a Reply to a Reply to a Reply, etc. The heirarchical structure is helpful, especially since you will need to revisit old messages during this course, but it will be useful only if everyone in the class uses it well. Help stamp out "topic creep!"
      5. Composing messages (Reply and/or Post)
         1. Enter a new topic, even if you are replying (in which case the subject that you are replying to is supplied as a default topic)
         2. Type in the message in the box. HTML tags are allowed for formatting
         3. Click the "Post" button to the right of the "Topic" line at the top of that frame
         4. After this, you will see a preview of your message. If this is OK, click the "Post" button.
         5. Your message is posted to the conference and displayed.
            1. Some people have expressed concern that when they use the Browser "Back" button to go back to the list of new messages, they do not see their new message listed there. This list of new messages is not routinely updated during a session; only at the start of a session. To force an update, use the "MARK ALL READ" button and link as in 1c above
   3. In the past, I have been very lenient about messages for this course posted in other conferences (e.g. The General Conference). When you are composing a message, the conference that it will be posted to is listed at the top of the message composition screen. This semester, messages posted to other conferences will not count towards the assignments. Be careful about this!!!
   4. There is a more complete guide to the conferencing system, with pictures, available online by following the link on the course web site, "Using the computer conferencing system", just below the link to the conference itself
3.  
4. eCommerce overview. This is very much a "how to" course.
   1. What is eCommerce?
      1. Business used computer networks and the Internet long before the web, but for business-to-business communications such as transferring money between banks, and manufacturers communicating with wholesalers. For a long time, this was eCommerce.
      2. This is still going on, but today we more often mean direct selling to consumers or other businesses. Taking orders using credit cards, although some customers will be. Provide an online catalog, let consumers choose products and place orders. That is the minium. But additional services such as order confirmation and tracking, and others that you can invent, are where the competitive edge comes -- the edge with respect to your online and "IRL" competition.
      3. B2B Vs B2C
   2. Why be interested?
      1. A small business can be set up on the web and run from a personal computer very inexpensively in your spare time. In a few days it will start showing up on web searches. If you do it right, cusotmers will not know it's just you. If the business grows, it can be scaled up and you can quit your day job.
      2. eCommerce is growing rapidly, along with the web itself. The web went public in 1993. By October there were 500 web servers. In January 1996 there were 75,000 servers; by December 1996, 205,000. In 1993, there was no eCommerce, in 1996 the volume was estiamted at $200,000, in 2000 one estimate is that there will be $230 billion. Today 10% of households in the U.S. have Internet connections, estimated to rise to 33% in 2000. Growth this rapid has rarely if ever been seen before.
      3. eCommerce is not local, but global. Put up your business and sell around the world. The U.S. is leading the market, but that just means the growth potential is higher abroad.
      4. An eCommerce business can be largely automated, but still provide superior customer service. If you do it right, you will make buying from you so easy that you will lock your customers in.
   3. So of course there are downsides.
      1. It is incredibly competitive. You are not just competing in your neighborhood, but the entire world is just "a mouse click away", a phrase you will no doubt read again and again in this course. Are you going to become filthy rich? Unlikely (but possible). Can you make a good living? Pay attention to what is going on around you, find and exploit a niche, and don't become complacent. In today's society, it's like that everywhere, so why not start your own business?
      2. Many potential customers are not connected yet
      3. Many who are connected have concerns about ordering over the Internet
         1. Is it too advanced or too technical for them
         2. Is their credit card information secure

         So, make this a business opportunity - make it easy, and take your customer's security seriously and ease their concerns. Put your catalog online, allow online ordering, but maybe list an 800 number also

   4. Other uses of "web interactivity"
      1. Online courses and training
      2. On-line math tutor
      3. Online tax service
      4. Club membership application
      5. College registration
      6. Conferencing / chat system
   5. What is needed? The seven components of eCommerce, from McComb. Each of these components can be obtained in many different ways, but in this course you will use one way -- not necessarily the best, but the one we have. "The best" depends upon your skills and interest and your precise business, in any case. Some major variations are: purchase (own), lease, or pay per transaction? The components we will use here are shown in parentheses at the end of each item.
      1. Web Server, or access to one. (The CLL web server)
      2. Programming capability. Some people regard producing static web HTML pages to be programming, but here there is something beyond that. To process user input from text boxes etc., you need an active system to store and act on the user's input, and to respond to that input. (For static HTML, MS FrontPage98 as a WYSIYG HTML editor and NotePad or WordPad for direct creation. For interactivity, the iHTML system -- inline HTML, requiring NotePad or WordPad. No matter how easy iHTML may be, or how I try to sugar-coat it, this is computer programming.)
      3. Email management (ability to send email, perhaps automatically, and receive it. (For sending automatic email, iHTML)
      4. Access Restriction. If you are selling content, you need some way to restrict access by people who haven't paid yet. (Several possibilities here: "blind URLs" with no links to them, you email your paid-up customers the URL. Also, access can be allowed only with a User Name and Password.)
      5. Access Logs. All web servers keep logs of hits. This is vital marketing information showing what customers and potential customers are interested in, where they are coming from, how many there are and whether or not they can use your web site. These days, you have about thirty seconds to provide a new user with what they are looking for. Then it's click and goodbye! (You will have access to the server logs for your web site. You will be using Microsoft Access database to analyze them.)
      6. Secure transactions. You must be able to demonstrate that you take customers' security seriously. The attitude that, "I don't care if they are really secure just as long as they think they are" is a marketing disaster waiting to happen. In practice, today this means encrypted (encoded) transmissions for personal information such as addresses, telephone numbers and credit card numbers. (I am currently trying to get this set up on the CLL web server. There is a chance it may not happen this semester. If it does happen, its use will just be to provide links using shttp -- Secure HyperText Transport Protocol -- instead of http.)
      7. Credit Card Validation. Don't ship until you know the card is good! How do you get paid if the customer purchases by credit card? (I haven't really sorted this one out yet, and I may not. But there are services that will do this for you on a per-transaction basis, using email. read McComb here)
         
         Three additional from Bowen:
      8. Ability to create static web pages (HTML)
      9. Ability to create web graphics (GIF or JPEG/JPG file formats). Strictly speaking, this is not required, but cool graphics are a part of the web culture, and also of selling goods.
      10. Ability to upload files to the web server

      These components will make the system function. Seybold has eight Critical Factors for Success, once the system is functioning at the basic level of McComb's components.

5. HyperText Markup Language - HTML
   1. HTML is "the language of the web", the coding used to make web pages. Web pages have the extension html or htm (the latter on the CLL web server that you will be using in this course). There is a special filename defined on each web server, the default file name. On most web servers the default file name is index.htm(l), but here the default file name is welcome.htm. If the user specifies a URL without a filename at the end (the giveaway on this is that there is no extension), then the server fetches the default filename. The ability to do this makes life a little easier for the user. So, the home page for each web site, including your eCommerce web site, should be default.htm(l).
   2. Web pages have at least two types of content (graphics, audio, video, scripts etc. are in addition)
      1. Plain text, which is what appears on the screen
      2. HTML Tags, which format the text and link to other content, such as another web page, a graphic, audio, a script (program), a comment, etc. HTML tags are enclosed in angle brackets <>. If you want to include angle brakcets in your HTML file as regular text, there are special codes.
      3. If you see a web page that you like, look at its HTML to see how it was done. Learn from everybody!
         1. In Netscape Navigator, pick the menu item View / Document Source (or for "Frames, where parts of the web page move independently, click in the area you want to examine and choose View / Frame Source)
         2. In MS Internet Explorer choose the menu item View / Source
         3. To analyze a script, you have to learn the scripting language, such as JavaScript, Jave, etc. That is beyond the scope of this course.
   3. There are several ways to generate web pages for your eCommerce web site:
      1. Use a simple text editor such as NotePad or WordPad in Windows (under Start / Programs / Accessories). Type in the text and the tags by hand. Example (note that HTML tags themselves are case-insensitive, but that the plain text is not.):
         

         HTML Source	Browser View
         <HTML> <HEAD> <TITLE> Test Web Page </TITLE> </HTML> <BODY  BGCOLOR="#FFFFFF"> <H1>This is my test web page.</H1> </BODY> </HTML>	Test Web Page (in title bar) This is my test web page.

      2. Note in #1 above that many HTML tags come in pairs with TAG and then /TAG. The effect of the TAG applies until /TAG cancels it. These are sometimes called "containers". If you are applying several tags at the same time you must close the second tag before the first -- tags cannot be overlapping. Example: <BIG><EM>Some text.</EM></BIG>, NOT <BIG><EM>Some text.</BIG></EM>
      3. Use a tag editor such as HotMetalPro that still shows you the tags, but "knows" the tags so that you can click on them to inser them, and keeps track of things like having a /H1 to balance an H1.
      4. Use a WYSIWYG HTML editor such as MS FrontPage98 editor that makes HTML like word processing, but which sometimes needs tweaking. Netscape Composer and MS Word can also create and edit HTML, if the HTML features were installed, but are not as complete as FrontPage98 editor
      5. Use a "complete solution" such as Microsoft FrontPage98 (full version)
      6. Hire someone to write your pages. (But on the other hand, you may want your eCommerce business to be the creation of web sites.)
      7. Since HTML is a public standard, not a proprietary format, all of these tools will interoperate. Here we will start with #3 and then move to #1 for iHTML.
   4. As a web designer, you have to accept a loss of control over the graphical appearance of your web pages, compared to the control you may be used to, for example, in a word processor.
      1. Users can change your fonts, font sizes and colors from within the browser (Edit / Preferences / General in Netscape Navigator, for example)
      2. Users control the pixel resolution of their monitors, for example from the Display section of Control Panels, reached by Start / Settings. Many Windows monitors are set for 640 (horizontal) by 480 (vertical) pixels, but values up to 1280 by 960 are also common. Web screen elements are written by the pixel, so a picture that files the screen at 640 by 480 occupies only one quarter of the screen at 1280 by 960. Similar things happen to text.
      3. Users can turn off graphics if they want to see the text even faster. Large graphics with many different colors mean large files and slow download times, so use them at your peril.
         1. Here is where a feature in your browser designed to speed up loading times, can work against you as a web designer. Your browser keeps copies of recent web pages you have viewed, both in RAM and on your hard drive. These copy spaces are called "cache". When you request a web page from a web server, your bowser request first information about the page. If it is not newer than the copy in the cache, then the cache copy is used for faster response. As a user, great. As a designer, this can give you an overly optimistic view of how fast your web page will load. You can override the cache and get a true of idea of your user's experience by
            1. Netscape Navigator: hold down <Shift> and click on the Reload button. NOTE: Refresh just reloads from the cache.
            2. MS Internet Explorer: click on the Refresh button.
      4. You can specify an exact font to use, but if the user does not have a font by that name on his/her computer, the default font is used.
      5. Different browser versions support different versions of HTML. The last major revision was HTML 3.2, and that is now fully supported by the 3.0 versions and higher for Netscape Navigator and MS Internet Explorer. Most people seem to have upgraded to these versions by now. The current level of HTML is 4.0, which includes HTML 3.2 as a subset, but is as yet only partially supported by Navigator and Internet Explorer. A properly designed browser, as these are, will ignore tags that it cannot deal with. If you use HTML 4.0 features, which do give you more control over the screen, what your users see will be quite variable at this time. In this course, I will assume HTML 3.2. Castro notes that many of the HTML 3.2 tags are "deprecated" in HTML 4.0, but still supported. My belief is that there is so much HTML 3.2 out there that it will always be supported. Some advanced web surfers may want you to use all of the latest bells and whistles. At any rate, all of this is another source of loss of control.
   5. The basic tags
      1. <HTML> starts and HTML file and </HTML> ends it, appears nowhere else within the file
      2. <HEAD> starts the first or "head" section of an HTML document, which is not seen by the user, but which contains "meta information" -- information about the information in the file. </HEAD> ends the head. The head can be empty, but you should always put in a TITLE (see below)
         1. <TITLE> and </TITLE> contain the title of the HTML document. The title appears on the title bar of the browser window. Without a title, you are not sure what will go up there. Always include a title. In the example in C.1. above, the title is "Test Web Page", and would appear on the title bar.
      3. <BODY> starts the main, second, last, or "body" section of an HTML file, which contains all of the content that the user sees. This section is ended by </BODY>
         1. A plain body text results in a default background color, usually "browser grey". For a white background, use the attribute BGCOLOR="#FFFFFF" for <BODY BGCOLOR="#FFFFFF">. The Fs come in three pairs. Each pair is 255 in the hexadecimal (base 16) number system and represents the intensity of color  for RGB. FFFFFF means the highest intensity in Red, Green and Blue, which results in white. You could also use the attribute BGCOLOR="white".
         2. To use an image for a background, use the attribute BACKGROUND="filename" where filename is the name of the image file (gif or jpeg/jpg), including any directory information if the image file is not in the same directory as the HTML file. The image will "tile" or fill up the background. Beware of large single images for backgrounds.
      4. Character formatting tags
         1. <H1> and </H1> through <H6> and </H6>. Heading tags from big to small. Also insert space above and below, for emphasis.
         2. <BIG> and </BIG> bump enclosed text up one size. Can be repeated for a double bump, etc.
         3. <SMALL> and </SMALL> bump text down one size. Can be repeated. Also cancels <BIG>.
         4. <EM> and </EM> makes enclosed text emphasized (in practice, italics).
         5. <U> and </U> makes enclosed text underlined.
         6. <B> and </B> makes enclosed text bold-faced
         7. <FONT COLOR="color"> and </FONT> makes enclosed text the specified color. Supported colors are listed on the back inside cover of  Castro. RED, BLUE, GREEN, and TEAL are dark colors that contrast well with most background colors.
      5. Paragraph formatting tags
         1. <P> and </P> enclose a paragraph, skipping a line before the next paragraph. Many web pages ignore the </P> and use only <P> to start a new paragraph with a line skip, but this is not recommended and may not work with future browser versions (but probably will because it is so common). Physical line breaks will be ignored by a browser, except in the presence of the <PRE> tag. For paragraph alignment (left, center and right) include the ALIGN="alignment", where alignment is the desired alignment (right, center or left). "Right" is the default and is never needed. There is no "justify" to align on both margins.
         2. <BR> starts a new line, without starting a new paragraph, so there is no skipped line. There is no </BR> tag.
         3. <UL> and </UL> enclose an unordered (bulleted) list, but require the use of the <LI> tag below. Use bulleted lists! If users get impatient, they will skip to the end of a paragraph, and so perhaps miss a critical feature of your product. But in a bulleted list they will usually read at least the beginning of each bulleted item.
            1. <LI> and </LI> (list item) enclose each item in a bulleted list. Most browsers will work without the </LI>.
            2. <BR> can be used to start a new line within a list item without getting a new bullet.
            3. A <UL> within a <UL> indents a second level and generally uses a different bullet style. Can be repeated for multiple levels.
         4. <OL> and </OL> enclose an ordered (numbered) list, but require the <LI> tag as well. Can be indented as in the bulleted list. The default is numbering each item (1, 2, 3, 4 etc.) successively. To produce an outline like this, include the following WITHIN the OL tag, but not the /OL tag
            1. TYPE="I" for capitalized roman numerals in the correct order
            2. TYPE="A" for capital letters in alphabetical order
            3. TYPE="a" for lower case letters in alphabetical order
            4. TYPE="i" for lower case roman numerals in the correct order
            5. For ordinary numbers, again, just use the <OL> tag by itself.
      6. Hypertext elements
         1. <IMG SRC="filename"> inserts the graphics image in filename into the web page at the location of the tag. E.g., <IMG SRC="david.jpg" inserts my picture file. There is no </IMG> tag.
         2. <A HREF="URL">Some text</A> makes Some text into a link (underlined and blue) which will lead to URL. If the URL is to another web page in the same folder (i.e. in the same web site), only the file name is required. If the file is in a subfolder, include the folder name and a forward slash (/) before the file name. If you have defined bookmarks in the file (see below), you can link to a bookmark by using #name in place of the URL, where name is the bookmark name. If you are linking to another web site, include the full URL including the http://
            1. Define named bookmarks within a file, that you can link to, by using <A NAME=#name">, where name is the name of the bookmark
6. Using MS FrontPage98 Editor to create static web pages
   1. Starting MS FrontPage98 Editor. We will not use FrontPage Explorer here, which is the normal start-up for FrontPage. If there is no desktop icon for the FrontPage Editor, make one as follows:
      1. Open Start / Programs / Windows NT Explorer (just plain Windows Explorer in Windows 95 and 98)
      2. Click on C: to select (highlight) it, then choose menu item Tools / Find / Files or Folders...
      3. In the Find dialog, in the Named: text box, type fpeditor.exe and click the Find Now button
      4. When the search is done, there should be an icon with fpeditor.exe to its right. Right-click on the icon, and pick the Create Shortcut menu item.
      5. If an error dialog pops up, saying that Windows cannot create a shortcut there, pick to create one on the desktop.
      6. You should end up with an icon labeled Shortcut to fpeditor.exe on your desktop. If you click once on the text, wait for a second or two, and then click again, the text will be highlighted but the highlight will be smaller than the box containing it. You can type in new text, if you want, and <Enter> to accept it
      7. Double-click on your new icon to start the FrontPage Editor.
      8. FrontPage opens with a new blank page on the screen.
         1. You can use File / Open... to open an existing HTML file, and the New Page 1 will still be available through the Window menu item.
         2. You can start new pages as desired using the File/ New menu item
         3. When saving your file, choose File / Save As... the first time, to choose the drive, folders and filename of your file. On the CLL web folder, the extension must be htm, not html.
         4. After the first save, use File / Save As... to change any of that information. Other wise use File / Save or even the floppy diskette icon.
   2. Before you begin, set the page properties using File / Page Properties... Because of the large volume of content, and its lack of organization, most users rely on web searches to find what they are looking for. Here is how web searches work:
      1. Most search sites have a web "spider", "crawler" or "bot" (robot) -- a program that, at night, follows HTML links, reporting back what it finds. The report includes the URL, keywords, and a summary of the page. The default keywords are chosen differently by each search site. The default summary is the first section of the file, outside of the tags. You, the web developer, can
         1. Let the program decide the keywords and summary (oooh -- could be risky!)
         2. Tell the program what the keywords and summary are (you control it)
      2. The search site compiles all of these pages into a database
      3. When someone searches, the keywords in the database are examines. If a match is found, the URL and description are presented to the user.

      So -- you should use the methods that HTML gives you to control the keywords and summary. Both are done in the HTML head, using the "meta" tag. Also, the title that appears on the browser window and the page color are set in the head. In MS FrontPage98, all of these are set using the File / Page Properties... menu choice and the Page Properties dialog.

      

      The document title (appears on the browser title bar) is set on the "General" tab. The background color is set on the "Background" tab. The keywords and description are set in the User Variables window of the "Custom" tag as shown above. FrontPage automatically sets GENERATOR to display its own name and version. Click on the Add button to open up new Name - Value pairs.

   3. The Undo (counter-clockwise arrow) button and the Edit / Undo menu item are very useful for undoing a step that did not turn out the way you expected. Just realize that something bad happened, and then you can Undo it and try another way.
      
      Another way to protect yourself is to save regularly, but avoid saving changes if they do not turn out the way you want.
   4. Text
      1. Type text to put it in your document
      2. The flashing vertical bar is where the text will go when you type -- the bar is known as the "insertion point". Move the insertion point with the arrow keys, or click with the mouse to move it. Inside the text area, the mouse cursor takes on the shape of an "I Beam". Again, click with the mouse to move the insertion point to the I Beam, or drag over text to select it.
      3. The <Enter> key starts a new paragraph with a space above it. HTML 3.2 does not support indented paragraphs. In a list (see below), <Enter> starts a new list item
      4. <Shift><Enter> (hold down the first key, then tap the second while keeping the first down) starts a new line but not a new paragraph. In a list (see below) <Shift><Enter> starts a new line but not a new list item.
      5. Multiple spaces are ignored by browsers, so you cannot use the space bar to indent paragraphs or align text to the center or left. You should not use these methods, anyway, since they can be difficult to maintain.
      6. Similarly, multiple <Enter>s are ignored by browsers, meaning that the <Enter> key cannot be used to increase the distance between paragraphs.
   5. Graphics
      1. Insert graphics into your web documents using the menu item Insert / Image.... A "Select File" 
      2. Web images do not become part of the HTML file. What goes in the HTML file is a reference <IMG> tag. If the image cannot be found, a "broken image" icon is used instead. I like to keep image files in the same folder as the HTML file. This has to do with relative Vs absolute links and URLs (see below). If you are following my advice, on the "Select File" dialog, make sure that there is no drive, folder or URL information  in the "File name:" text line, before you click OK - just the file name and extension.
      3. You can reduce the displayed size of a graphic by selecting (clicking on) the graphic, and using the Edit / Image Properties... menu item, and then the Appearance tab. To change the displayed size, click on the Specify Tab check box. Clicking on the Keep Aspect Ratio box will keep the proportions the same as you change the width or height.
         1. Changing the "natural" size of a graphic often degrades its quality. A graphics program can often do a better job of changing the size.
         2. Reducing the size of an image does not reduce the file size. The image still takes the same time to download. If you really want a smaller graphic, reduce it size and file size in a graphics program.
   6. Formatting text. Formatting text means changing its appearance - bigger, smaller, bold, italics, underlined, or set the color. You can make format changes without any text selected. These changes will affect the text you type next. Or, you can select text by dragging over it (highlight). If text is selected, formatting changes are applied to the selected text
      1. Font changes are possible but not recommended -- see Agenda 1.
      2. You can format text at the level of individual letters by using the Format / Font... menu item or the buttons on the Format tool bar. The "bigger" and "smaller" buttons undo each other, while the buttons for Bold, Italics and Underline a second time undo those effects.
      3. You can right align, center or left align paragraphs using the buttons on the Format toolbar, or by choosing the corresponding items in the "Format / Paragraph ... menu item.
      4. HTML does not support
         1. Justification -- aligning on both borders
         2. Tabs
      5. I do not recommend normally using the Heading 1 through Heading 6 formats, since the Bigger and Smaller items accomplish the same font sizes with greater flexibility. The Heading formats do, however, include space above and below, and indent levels, so you may find these useful in some situations.
      6. Format / Remove Formatting removes character-level formatting from selected text. I find this most useful when it becomes difficult to remove multiple formatting.
   7. Lists. Lists are good in web pages. If a user sees a long list of information, s/he will often skip to the end of a paragraph. A list will alert the user that there is a new type of information, so they will often skip within an item, but not skip over list items. HTML provides for two types of lists -- unordered (bulleted) and ordered (numbered).
      1. To start a bulleted list, click on the bullet icon on the Format toolbar. The indent button indents the list (use it twice). Select a list item at a given level, and use the menu item Format / Bullets and Numbers... to change the bullet style for that entire level.
      2. To start a numbered (or lettered) list, click on the number icon on the Format Toolbar. The indent button works the same here. By changing the Format / Bullets and Numbers... settings, you can make a traditional outline, or follow a custom sequence.
      3. To stop the list function, tap <Enter> to start a new item, then click the bullet or number icon to turn the list off.
   8. Tables. In ordinary documents, tables are used to hold information or data with a repeated form, such as the catalog number, price, and weight of similar items. But you may find yourself using tables even if you do not have such information. This is because, aside from left, center or right alignment, a table is the only method for placing elements (text or graphics) on the page. The raw HTML tags for tables are complicated, but FrontPage makes tables easy. To make a table,
      1. Place the insertion point (flashing vertical bar) where you want the table
      2. Drag on the Table icon to get the number of rows and columns that you want (worry about their size and shape later). This creates a table with cell borders. For page alignment you most likely want a table with invisible borders.
      3. Drag the column borders to the locations that you want.
      4. Set the borders using the Table / Table Properties menu item.
         1. Make borders invisible by setting "Border Size" to zero. The table borders will show as dashed in FrontPage, but will be invisible in browsers.
         2. Cell Padding is the distance from the edge of a cell to the start of its contents
         3. Cell Spacing is the distance between border lines
      5. By using the Table / Table Properties and Table / Cell Properties menu items, you can change many features of a table, such as border color and background color.
      6. Graphics and lists can be placed inside table cells
   9. Links / URLs. Links (OK, and color. And graphics.) are what make web documents different from the print documents you create. Links come in two varieties -- relative and absolute. But first, the anatomy or a URL (Universal Resource Locator, what you type into the Location or Address window of your browser.
      Example:
      http://www.cll.wayne.edu/isp/drbowen/internet/welcome.htm
      1. http:// - The method (of transfer). http is optional. Other methods are
         1. ftp:// (File Transfer Protocol)
         2. telnet:// (Logging into a computer with a command line interface)
         3. gopher:// (Earlier test-based protocol without links inside documents)
         4. file:// (You can open a file directly in your browser to check it out, without going through the web server, and this is the method used in that case. If this appears in a link or an IMG tag, the web server will give users an error message, so be careful if you see it in these circumstances.)
      2. www.cll.wayne.edu - Domain Name of the web server. You can also use the numerical IP address, e.g. 141.217.142.149
      3. /isp/drbowen/internet/ - The path of folders to the requested file, from the "document root" folder of the server.
      4. welcome.htm - The name of the requested file. The browser displays files with extensions of htm, html, gif, jpeg, and jpg, and for others, asks if you want to download the file. If no file is listed, web servers are configured with a default file name, which is sent from the folder in the URL.
      5. What is shown above is an absolute URL.
      6. A relative URL drops at least some of the information above.
         1. If only the filename appears, it is assumed to be on the same server and in the same folder as the present document. I strongly recommend this for
         2. If folders are shown, preceded with a slash, the requested file is assumed to be on the current server, and the path is from the document root of the present server
         3. If folders are shown, without a preceding slash, the folders are assumed to be subfolders of the present folder on the present server
         4. The symbol ".." means one level up from the present folder (the parent folder of the present folder). This can be repeated to go up several levels. subfolders can be specified to down from that level, also.
      7. Relative URLs allow much greater flexibility in restructuring a web site, since files can simply be moved, and the URLs do not have to change. The files can even be moved to a different server without being changed. Keep a web site in one folder (or a few folders at most), and use relative URLs whenever possible.
      8. Links and IMG tags contain the URL of the referenced files. Wherever possible, these links should be relative, not absolute.
      9. To create a link in FrontPage98,
         1. Select (drag over) the link text; that is, the text that will turn blue and be underlined. You can use an image for a link by selecting (clicking on) it as well.
         2. Click on the Link button or choose the menu item Link / Hyperlink...
         3. Type in the destination URL for the link. Alternately you can open an Explorer window with the folder icon, or browse the web using the globe-and-magnifying-glass icon, and select the item (file or URL) you want to link to.
         4. Check that the URL is absolute or relative as desired, and click OK.
         5. You can link to a location within a file if you have define a Bookmark. Select or type the bookmark name in the Optional / Bookmark text line. If there is no URL, the bookmark is assumed to be in the present file.
      10. To create a bookmark, select the bookmark text and select the menu item Edit / Bookmark. The default bookmark name is the selected bookmark text, but you can type in anything else you want. An image can also serve as a bookmark.
   10. Frames. HTML frames are document windows that act independently of each other. The right and left halves of the screen can scroll independently, or clicking on a link in the right half can replace the document in the left half (or the right half). For the CLL computer conferencing system, the are three frames -- a frame across the top of the screen for the row of black and white buttons, a left half showing the list of conferences, and a right half that can show various elements including the notice about new messages, the list of new messages, or  messages themselves. Another common use of frames is to have a "navigation panel" on the left that stays fixed, and loads the content into the right frame. HTML frames (framesets) are defined by an HTML document (file) containing only the definitions of the frames, and which files to load into each frame. The content within the frames is always in separate HTML files.
       1. To create a frameset, choose the menu item Frame / New Frames Page... FrontPage then displays a list of layouts; choose the one that is closest to your plan and click OK.
       2. You can drag the frames boundaries around to get the proportions that you want.
       3. Choose the buttons in each frame to either load an existing file into the frame, or create a new HTML file to load into the frame.
       4. Each frame has a name that FrontPage supplies by default. To set your own names, use the menu item Frame / Frame Properties. You can also set several other properties here. For example, should the frame have scrollbars if the content overflows the frame? Should the user be able to drag the frame boundaries around, or should they be fixed?
       5. With frames, links have targets. The target is the frame name that the document should be loaded into. You specify the target frame in the Create Hyperlink dialog, along with all of the other link information.
   11. Forms. What with colors and images, even animated images, and scrolling and links and frames, web pages can seem pretty dynamic. Not to mention sound and video which we haven't touched on. However, all of the elements above are referred to as "static HTML" and the pages as "static pages." This is opposed to "interactive" where the user as opposed to the web designer can have some say over what is going on. With a form, which contains various input elements, the user enters data and makes choices and sends them in to the web server. The web server reacts, according to a script or program, and returns a web page which may be customized and depend on the information submitted by the user. This is called web "interactivity." It is necessary for eCommerce for the following purposes: (i) the user must select one or more item(s) to purchase, (ii) the user must choose a delivery method, and (iii) the user must submit a payment method (e.g. credit card and credit card number. More information may be requested or required. For example, the online bookseller Amazon.com has a choice of wrapping paper patterns if the book is a gift.
       
       An form is marked at its beginning with a <form> tag and at its end with a </form> tag. Between these two tags are input elements or "widgets" and one or more "Submit" buttons, with perhaps a "Reset" button to clear all of the input widgets if the user wants to start over. The <form> tag has an "action" attribute that tells the web server what to to with the form information. The user fills out the input widgets, or at least those that s/he wishes to, and clicks on (one of) the Submit button(s) (which can have any text on its surface). The browser sends all of the information -- form action, contents of the widgets, and which button was pressed -- back to the web server. What happens next is called the "Common Gateway Interface", or CGI. The form action information tells the web server to start a specified computer program -- the CGI program. (Different forms can specify different CGI programs.) The web server passes all of the form information to the CGI program. The CGI program processes the form information as it has been programmed to do, perhaps storing it in a database file. The CGI program also creates a response HTML file for the user, which may also contain some of the form information, for example confirming which book was ordered if this is an online bookstore. When the CGI program ends, the web server looks for the response HTML file and sends it back to the user. This ends the CGI process. It is worth noting that this a very flexible and multi-purpose process, since the CGI program can do virtually anything with the data, and prepare the response file can also have content and formatting that is without limit. The form input widgets are defined by tags chosen using the menu item Insert / Form Field / type. Ordinary HTML outside of these form element tags can label the widgets for the user. The various types are
       1. One-line Text Box, into which the user can type.
       2. A scrolling Text Box for multiline input
       3. A check box which can be checked or unchecked. If there are several checkboxes, any number of them may be checked, from zero to all.
       4. Radio buttons, which are grouped, and only one in each group can be checked.
       5. A Drop-Down Menu or "pick list"; the user picks on of the pre-defined items. The list can also be set up so that the user can pick more than one item on the lists.

       When the first form filed is inserted, Submit and Resent buttons are inserted also, along with the <form> and </form> tags, indicated by dotted lines. Thereafter, additional form widgets should be inserted inside the dotted lines; otherwise they start a new, second form. The form widgets and the text that labels them can be positioned by any valid HTML means, including <Enter>, <Shift><Enter>, tables and frames.
       
       Each input widget has two additional properties, its Name and its Value. The Name is not seen by the user, and identifies the input for you, the web designer, and for the CGI program. The Value is what the user enters, although this can be set to a default value by the web designer. Both are most easily specified by right-clicking on the element and choosing the Form Field Properties menu item. The dialog supplied the default values for Name and Value, but these can be replaced by clicking in the fields and typing. Click OK when done.
       
       Example: The user is supposed to type in her/his credit card number. Insert a One-line Text Box for this purpose. Label it "Credit Card Number" so the user will know what to type in. The Name could be "CardNumber" and the Value would initially be blank, and take on whatever number the user types in. Suppose the user types in 123456789. Then the Value of CardNumber would be 123456789, which the web browser would send to the web server, and thereby to the CGI program. Most likely the CGI program would store this in a database, along with the other purchase information.

7. Uploading files to the CLL web server.
   1. Links on course web site to uploading files
      1. Each Team will have its own User Name and Password for its own web site. This information is in your team computer conference.
   2. Using FTP
      1. Address to FTP to is www.cll.wayne.edu
8. Forms and scripts - go to handout