Web Pages with FrontPage Express 2.0

Surprisingly, authoring web pages with FrontPage Express 2.0 is a lot like creating a word processing document with Word! With a bit of understanding of a few HTML terms, you can use FrontPage Express to create basic web pages easily.

Although FrontPage Express isn’t the most powerful authoring tool out there, it does have its strong points. For one thing, it’s easy to use. It doesn’t have all the advanced features of many packages, but the average person doesn’t need advanced features. Simple pages can often make a bigger impact than an over-featured page. Perhaps the strongest point of FrontPage Express is that it’s free! Yes, you read that right, free! It can be downloaded easily with Windows Update, which is included with Windows 98 and/or Internet Explorer 5.

As I mentioned before, using FrontPage Express is a lot like using Word. There are a few terms you may encounter, however, that I feel need to be defined before you can understand exactly what FrontPage does to make the pages look the way they do. A term that has appeared in the paper already that you may not be familiar with is the acronym HTML. HTML stands for Hyper Text Markup Language. I feel a history lesson of HTML and the Internet is needed to help you understand why web pages are the way they are today. From about 1962 (or thereabouts) to 1992, the Internet as we know it now didn’t exist. The only people who understood it (or even knew what it was, for that matter) were scientist and physicists. As a matter of fact, Tim Burners Lee, a British physicist, is credited with inventing the Internet (which actually isn’t true, but I’m not even going to go there). These scientific types just wanted to transmit information with the Internet, which is actually wonderful. The only catch was that they transmitted only bland text in plain black and white, with no pictures of any kind (known as vanilla text). They felt that pictures and pretty colored pages "polluted the pureness of information."

Finally, in 1992, Marc Andersen, a college student at the University of Illinois, developed the first web browser called Mosaic. Mosaic didn’t support tables, frames, or special symbols (more explanation later), but it opened the doors for web pages as we know them. Not only did Mosaic allow Internet users to make text bold or italic or add images, it also allowed them to make hyperlinks. Hyperlinks make the Internet a true net. It allowed users to make clickable links, that, when clicked on, would take a user somewhere else in the page or to another page all together. This early markup language was known as HTML 2.0 (don’t ask me what happened to HTML 1.0; it never existed as far as I know).

Mosaic was a hit. For the first time, the scientists could link to one another’s pages and emphasize words with bold and italics. HTML 2.0 was extremely simple. It only had a few tags. Tags are pieces of information that encapsulate text you actually see on a web page which cause the text to look or behave differently (more on that later). Text could also be centered, aligned left, or aligned right. Even though images were supported, they were rarely used because no acceptable formats were out there to make images small enough to be transmitted on slow connections of the time. Marc Andersen graduated, turned his simple Mosaic over to the National Center for Supercomputing Applications (NCSA) and founded Netscape, the world’s first company that produced a browser for profit. All who were nerdy, scientific, and boring were happy.

Marc Andersen, however, was not. So he set out on a quest. In his quest, he wanted to bring colors, frames (which allow you to display two separate pages in the same window each of which has totally separate content), and the ability to separate pages into tables (much like a accountant’s ledger). Much to his credit, he succeeded. The scientist types and the Internet purists were furious, but it didn’t matter. The majority had spoken, and what they had said was that they wanted these seemingly beautiful pages full of pictures and colors. America Online and CompuServe, the first two nationally available internet service providers (ISP’s) allowed more and more people to get connected, and once they got a taste of HTML 3.0, there was no turning back to the days of vanilla pages. It supported all of HTML 3.0, so it quickly became the browser of choice.

There's a little issue that I think needs to be cleared up before I get much farther. There is a non-profit organization, called the World Wide Web Consortium (W3C), that was formed when Mosaic was developed to control standards which are acceptable for the Internet. The W3C actually designates what the included standards for each version of HTML are. Sounds simple, right? Wrong. The three biggest browser makers (Netscape, Microsoft, and Opera) like to add features that will work with their browser and their browser only. With HTML 2.0, it wasn't much of a problem. Netscape 2.0 (by the way, browser version numbers usually correspond with the most current version of HTML they comply with) was the de facto browser that every browser maker wanted to be like. IE 2.0 (Internet Explorer 2.0) was a joke. With the HTML 3.0, the standards problems really started to emerge. Microsoft added their own little twists to Netscape's scripting langauge known as JavaScript. Netscape refused to add support for the Microsoft-developed standard known as Cascading Style Sheets (CSS). The W3C wasn't providing much help either, because Netscape and Microsoft were trying to force them to include JavaScript and CSS into HTML 3.0. Everybody thought that the HTML 3.0 wars were bad, but when HTML 4.0 was annonced in 1997, the tags hit the fan. Netscape Communicator 4 and IE 4 were totally different. Both browsers rendered static HTML pages in the same manner most of the time, but the way each handled layout, mutimedia, and dynamic content was a disaster. Even with these compatibility problems, the 4.0 browsers made the web a very interesting place. Multimedia took off as faster connections became more available. Stuff like net radio stations and streaming movies became common place. The horizon is limitless as far as multimedia on the web is concerned because the W3C is now embracing third-party technologies (such as shockwave) more and more. IE 5 has been out for about six months and Communicator 5 is set to be released in the second or third quarter. The browser wars aren't nearly over. I'd say they're just beginning.

Now that we got this long, boring history lesson over with, we can start actually learning FrontPage Express 2.0. FrontPage Express 2.0 is supposedly optimized for HTML 4.0, but in all actuality, I'm sure that HTML 3.2 compatible browsers can handle it just fine.

To get to FrontPage Express 2.0, first click the Start Menu, then go to Programs, Accessories, Internet Tools, and (finally), FrontPage Express. The first thing you'll see (hopefully) is a white screen with a cursor flashing in the upper left-hand corner. Take note that the toolbar at the top includes all the standard word processor buttons including the font box, font color button, font size buttons, the open button, orientation buttons, embelishment buttons, and the save button. There are some strange looking buttons that you may not have seen before Don't worry, though, because I'll go over these.

After your eyes give the interface a good look over, click on File, then Page Properties... This is where you can define the color of your background, text, links, visited links, and active links. The background sounds, encoding standard, and page margins are also defined here. I highly reccomend that you go here first and set all these parameters before you actually get started on what people see. The title referrs to the writing you see at the top of the browser window in the title bar. The background color and text color are self-explanatory really. Link color referrs to the color of an unvisited link that you can click on. Visited link referrs to the color of a link after its been visited. Active link color referrs to the color a link turns the momment you click on it. Setting a background image or background sound requires a bit of knowlwedge of paths, which I'm not going to cover in this written guide. I will, however, touch on paths in the workshop. For general purposes, margins and encoding should be left as they are.

After you set your desired parameters in the Page Properties section, you're now set to add content. Changing font, font color, and alignment are pretty basic: these actions are done just as you would in a word processor. Inserting links can be a little difficult. If you click directly on the Insert Link button (which looks like a globe with a chain on it), it'll bring up a box asking you the URL you wish to link to then make some text based on the title of the page you've linked to that when clicked on takes you to that page. The best way to insert a link, in my opinion, is to type out the text that you want to make "clickable," then click on the insert hyperlink button. Type the URL you wish to link to, and press ok. This seems to give you more control over how the links are named. If this sounds confusing, don't worry. By the time the workshop is over, everybody will have a concept of how inserting links works.

Inserting images is another biggie. To insert images, click on the button that looks somewhat like a stamp with a little pointer beside it. Then you must enter a path. I'll spend a lot of time on paths in the workshop, because without knowledge of paths, web pages are hard. After you define the path of the image either from file or a URL, then you can make it a clickable link. To do this, you can right click on the image, go to image properties, and enter the URL of the page you wish to link to.

The final topic, and probably the most difficult part of HTML, is tables. Tables were the first attempt at layout controls, and they're still used heavily to put images and text on the same line. They look just like a table that you'd make in Word. Making them is a bit different however. When you click on the insert table button, which looks like a calendar of some kind, you're presented with a grid. Highlight the number of rows and columns you wish for your table to have. This inserts a pitiful looking grid into your document with the desired number of rows and colums you chose. To make this table look how you want, right-click inside the little grid, and go to table properties. Table border indicates how thick the border will be on your table. A value of 0 means there will be no border. Cell spacing controls the amount of space between individual cells and cell padding controls the space between the actual content of a table and the cell. There's a property that can be applied to individual rows and columns called spanning, but it's too hard to explain. A visual example will prove much more useful.

I apologize for the crudeness of this document. It's not the most descriptive piece of documentation ever composed, but it will help you remember how to get to all the basic components of the editor. Please excuse the grammar and sentence structure also. If nothing else, this little piece of digital papyrus gave you some history of the web and a little insight as to the parts of a web page. Thanks for being patient and please, never let web pages stress you out! Have fun! :)