How to Create a Web Page using a WYSIWYG Editor

Module

Contents
Overview: What does it take to create Web pages The process of putting a page on the Web Getting started: choosing an editor Organizing a Web Page	Putting text in a Web page Normal text Headings Lists Descriptions Preformatted text	Creating tables Adding links Adding graphics Prettying the page Saving the file Viewing the page in a browser Audience and Objectives

Wherever you see this separator line in the document, clicking on it will return you to the Contents.

Overview: What does it take to create a Web page?

In most cases, a Web page is a file containing HTML code (that's HyperText Markup Language). Web browsers can show other kinds of files - such as plain text, graphics, or Flash files - but the heart of the Web is HTML.

When the Web was new, there was one way to create a Web page: learn HTML and code it yourself! Fortunately that's no longer necessary...most word processors can save a file as HTML code, and browsers such as Netscape have an integrated Web-page editor. You can also get very specialized Web page editors, capable of creating some startling effects - like Microsoft FrontPage, Adobe PageMill, and Macromedia Dreamweaver.

This module does not teach about HTML, but if you're interested, you can do a cool Web-based HTML tutorial by John Rinn. Oh, yes, and...

By the way, What in the World is WYSIWYG???

WYSIWYG, "What You See Is What You Get", a term allegedly coined by Steve Jobs, co-founder of Apple Computer, to describe the philosophy behind the Macintosh. These days, all word processors are WYSIWYG, so unless you're using a word processor from before 1990, you've got one! What makes it WYSIWYG is that your formatting is visible on the screen pretty much the way it will come out on paper. (It hasn't always been that way, kids!)

The Process of Putting a Page on the Web

Herre's what people need to do to get a Web page "up":

Create the HTML code for your page, making sure all the main elements are there.
Add any links or graphic elements to the page.
Preview your page in at least one web browser, or more if possible. Check that the words are spelled right, the links work, and the graphics look OK.
Transfer your file to the server on which it will be housed.
Check the graphics and links again, to make sure they are still valid.

Getting Started: Choosing an Editor

These WYSIWYG editors are likely to be easily available to you:

Corel Word Perfect
Mircosoft Word
Microsoft Office (including Word, Excel, Powerpoint, and Access)
Netscape Composer (part of all recent releases of Netscape)

For serious work creating Web pages, most people prefer to use professional Web design software. The most popular of these are:

Macromedia Drewamweaver
Microsoft FrontPage
Adobe PageMill

Though this module can't give you the details of all these editors, we can give you the general idea, and you can get details from the Help menu and various "wizards" that assist in automating tasks.

Organizing a Web Page

When it comes to designing a Weg page, we have lots of flexibility, but a well-designed Web page has a number of elements that give it unity and make it part of the greater whole, the World Wide Web itself.
Here are the parts that every Web page has:

Title

Not actually visible as part of the page, the title is usually shown in the browser's title bar (the top-most part of the window). The title is important because that's what you see first when a search engine presents information about your page. The title is often set using a menu item. For example, Netscape Composer lets you set the title from the Format menu's Page Colors and Properties item. Dreamweaver features a Title window in the main toolbar.

Author

Like the title, the Author name is not part of the displayed page. It is usually set using the same menu selection as the Title.

Headings

A large-print title at the top of the page (or anywhere) is called a "heading". The main heading is often the same words as the title, but it need not be.

Body

The main part of your page. This will often contain links, graphics, and tables.

Links to related documents

A page is part of a web of interrelated documents because of links to it and from it. If your page is part of a larger Web site, it should always have links to the home page of its site. If might also have links to other related sites, and often sites of interest to the author.

Document and author information

Usually at the bottom of the document is information about the author or webmaster, including the date of last revision and a "mailto" link - the kind of link that lets viewers send email directly to someone.

Putting Text in a Web Page

The quickest and simplest way to get your thoughts on a Web page is by writing them down. HTML provides several ways of making the text expressive and aesthetically pleasing. The multiple options shown here (and others we don't have time to show) are available in WYSIWYG editors either on the toolbar or through menu items or keyboard shortcuts.

Normal Text

Normal text is displayed by most Web browsers using Times New Roman font, 12 point, left aligned. The default font and size can be changed by the viewer, using preference settings, and the Web author can suggest fonts to be used in display as well. The text of this paragraph is "normal." Normal text can also be made bold or italic. Some browsers will show underlined text in addition to links, but I always find it confusing to see underlined text in a Web page when it's not a link.

Headings

HTML provides six levels of headings (only four of which are of much use), as well as the ability to set the size of the font as being larger or smaller than the default "normal" size. Here are some samples:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Since Heading 5 and 6 are smaller than "Normal" in most browsers, they aren't of much use!
Here are the usual font size changes:
Normal +2
Normal +1
Normal
Normal -1
Normal -2
Since these are relative to the size of the default font, they change when the user changes the default font size. Newer browsers can also show fonts specified by point-size, and these (supposedly) remain the same regardless of the user-set default font size.

Lists

HTML can be quite versatile in handling lists. It provides two basic types: "ordered" and "unordered". For example:

An ordered lists numbers each element.
You can add elements at the end or in the middle without worrying about changing the numbers...
...because the numbers are only generated when the Web page is displayed.

An unordered list uses "bullets:"

The individual browser decides what the "bullets" will look like, or you can specify which of three default shapes you want.
You can have lists within lists, like this:

This is a list inside another
The bullets may be different in shape, depending on the browser or your specification

Here is a third list ...
...embedded in the second

Descriptions

Description or "Definition" title

As in this example, the title above is usually shown flush with the left margin, while the definition text (this part) is indented.

Each title is made to stand out in some way...

...while the definition text hangs from it distinctively.

Preformatted Text

Ordinarily, Web browsers take text and arrange the line length and spacing to fit well in the screen window. This means they freely reformat any incoming text. But what if you have worked hard to get the text lined up just right, and don't want browsers to mess with it? That's what "Preformatted" is for. Not only does it prevent reformatting, it displays in fixed-width type, which makes it easier for you to get things lined up. Here's an example:

******                    *******                     ******
********                ***********                 ********
**********            ******** ******             **********
************        **********  *******         ************
**************    **********     ********     **************
**************************         *************************
************************************************************

Creating Tables

One of clearest ways to arrange text on a Web page is by creating a table. We'll just demonstrate the simplest form of table, though there are many variations.

A table is an arrangement of cells in rows and columns, rather like a spreadsheet.

This table has a visible border, though the border need not be shown. An example of a table without visible borders is in the contents of this page.

Adding Links

Links are what give the World Wide Web its power and flexibility. Fortunately, adding them in a WYSIWYG editor is fairly simple.

Highlight the text for your viewers to click on
Click on the Link button in the toolbar of many Web editors, or use a panel or shortcut keys (in Dreamweaver, <Ctrl>+<L>).
A dialog box appears. You can then type in the URL of the page you want to link to...or better yet, copy it from a browser window that's open to that page, and paste it in. You can also type or select an "anchor" to a location in the current page. (That's how the Contents section of this page is set up.)
Press <Enter> or click the OK button, and your link should be ready to go.

Once a link is place in a page, it can be copied to other parts of the page, if you like, just by using copy-and-paste techniques.

Adding Graphics

Graphics are the other factor (in addition to links) that make the World Wide Web so popular. Again, WYSIWYG editors make them pretty easy to add in, but there are a few ground rules having to do with the type of graphic files and their location.

Types of Graphic Files

GIF (Graphic Interchange Format) is good for diagrams and fancy text displays, but it is limited to 256 colors. Fortunately, that's enough for most purposes. Animated GIFs are also available, for everything from funny little moving images to short video clips.
JPEG (Joint Photographic Experts Group) as the name implies, is best for photos. It can show millions of colors, but lines and figures tend to get a little blurred.

Location of the Files

But

Finding Graphics

It is also possible to save any image you see on a Web page. Right-click on it (double-click if you're using a Mac) and a pop-up menu will appear. You can then use the "Save Image As" option to capture the picture on your disk. For more information about getting images to use on your Web pages, see module W47c, "Basic Web Graphics".

Be sensitive to copyright violation, though! Don't take any image that is obviously proprietary or personal in nature, especially if the owner has taken the trouble to put a copyright notice on it! For more information about copyright, see "The Computer User's Guide to Copyright", module A05c.

Putting the Files in your Page

Once you've found files of the right type, and have them in the right directory, it's easy enough to place them in your Web page. Most editors have an image button on the toolbar, or you can use a menu selection - usually "Insert". You'll get an "Open" dialog just as you usually do when you go to open a file, except that you can also put in a complete URL. Once a picture has been inserted, it can be copied to other locations by the copy-and-paste method.

Prettying the Page

There are a number of things you can do to make your page look nicer. The simplest are setting the colors of the text and the background, and using a graphic image as the background. These options are available through menu choices, such as "Format" ... "Page Colors and Properties." From there, you can set the colors by picking from a palette, or choose a background picture just as you would choose an image for in-line display.
Here are a few tips:

Dark backgrounds with light text can look very impressive on the screen, but won't show up well in print.
The most stunning background images are often hardest to read - keep them simple so your text will show.
Experiment with several combinations of images or background colors and text colors, so you can see how it looks both on the screen and in print.

There are also sites the provide resources specifically for Web design, including graphics.

A wonder-filled gallery of graphics at Pixelgirl Presents: http://www.pixelgirlpresents.com/index.html
This one provides links to several such resources: http://teklite.freeservers.com/barofree.html
Here's a site lots of people find interesting: it has very artistic resources:
http://www.enchantress.net/graphics.htm
For sheer variety of background colors and textures, try Julianne's:
http://www.sfsu.edu/~jtolson/textures/textures.htm

Saving and Publishing the File

If you are using a Web editor like Dreamweaver or Netscape Composer, a simple Save command is all you need to save the page on your computer. But if you're using a word processor, you'll need to let it know that you want your output to be HTML. In some cases, you may need to do this through a special Save For Web command under the File menu, in which case a wizard or similar automated process may take you through step-by-step. In other cases, it's a matter of looking carefully at the "Save As" dialog box and finding (usually toward the bottom) an item that lets you specify what kind of file to save. A list box will give you the options, and you may have to scroll through it looking for the HTML. (You won't find HTML as an option on word processors released much before 1996!)

Publishing a Web page involves moving it to the server where it is to be on display, assuming you have a server on which to display your page. If not, don't worry too much! You can still view your file from a local disk.

Assuming you have a server on which to display your work: some Web page editors have a Publish command, usually under the file menu. If you can get this to work, great! But often, they provide insufficient information, and the publishing process does not work. In that case, you will need to transfer the file using an FTP-type program, or by attaching it to email and mailing it to your account on the server. This process varies from one server to another, but there is an explanation for doing this on the WCC Student Server in module W55h, Uploading and Updating your Web Site.

Viewing the Page in a Browser

It's always smart to look at the results of your efforts in a browser - or better yet, in two browsers. Editors often display the pages differently than browsers do, so check it out: you might be surprised (pleasantly, let's hope!). It often turns out that if you're trying something special, it will work in one browser but not in another. You may have to go back to the design of the page several times, but after some effort and experience, you'll get a Web page to be proud of.

Audience:

This is for people who already know how to use a Web browser with some degree of proficiency (see module W10c), and who have some experience with WYSIWYG word processors or editors (for background information, see module T01c), and who want to know how to get started creating Web pages.

Objectives

When you successfully complete this lesson, you will be able to...

Explain the difference between creating a Web page directly, using HTML, and using a WYSIWYG editor;
Recognize the more common WYSIWYG editors that can be used to create Web pages;
Explain how to start a Web page in at least one editor;
List the primary parts of a Web page;
List information every Web page should have;
Explain how to create a link in at least one Web page editor;
Explain how to insert graphics into at least one Web page editor;
Explain how to save a Web page in at least one editor;
Explain the process of publishing a Web page.

About this document...

Module W30c: How to Create a Web Page using a WYSIWYG Editor

This document is part of a modular instruction series in Computer Information Systems. For more information, see the overview or the list of modules in this series, W- (World Wide Web). This document has been used in the following classes: CIS 160, Explore the Internet; INP 140 Building a Web Site.

Author:: Laurence J. Krieg
Institution:: Internet Professional Department, Washtenaw Community College
History:: Original: 29 Nov 97; Revised 2 Sep 2004;; This version uploaded Monday, 31-Aug-2009 11:48:06 EDT