It's easy to create Web pages in a page-view editor -- but a look
at the formatting codes sometimes helps.
This overview summarizes the various sections of this page. Other Webshop pages related to this one discuss the software used for making Web pages, guidelines for pages intended for the public Web, putting pages up on the Web, keeping them up to date, and letting people know about them.
TOPICS IN MAKING PAGES
Special Programs for Web Page Making covers two different ways to work with Web pages, Page View Editors and Code View Editors; and the three Web editors we use, AOLpress, Arachnophilia. and Netscape's Composer.
Test Drive Your Pages talks about the
fact that you must, absolutely must, make an effort to look at your
pages the way others will be looking at them, if you want to put them up
on the Web.
RELATED TOPICS ON OTHER WEBSHOP PAGES
Software: Building basic Web pages requires several kinds of programs -- a Web page editor to create the pages, browsers to view the results, and possibly some kind of graphics software. Finally, another type of program puts the pages up on the World Wide Web. (Sometimes two or more of these functions are integrated into a single software package with a single name.) Selecting inexpensive software tools of good quality is the topic of our Webware page.
With a Web-page editor and a browser installed on your system, you can develop Web pages without actually being connected to the Internet. You can write, test, and modify your pages before making them public on the World Wide Web. When your pages exist only on your local disk; you can browse them, but no one else can -- so it's a good way to develop skills or work out difficulties with a design, without having to worry about an audience.
In fact, on our Web Notepad page we suggest that people who don't even have an internet connection may find Web pages to be an excellent way to use the power of hypertext in research and writing projects. We also point out a way for people who have limited access to the Internet to publish pages on the Web .
Our Guidelines page focuses on getting pages ready for the public Web.
Pages can go up on the Web in many ways (practically speaking) -- we point out some of the options on our Connections page -- and once the're published there's still more work to do. Our Weblishing page looks at getting pages onto the Web, and keeping them up to date, while our Weblicity page discusses the problem of how to let people know about them.
This page is about how we actually make Web pages.
Page View Editors - Front Page Express - Netscape's Composer
Page-view Web page editors let you manipulate text and images directly, on a display that shows something like what one would see in a browser. These programs work like word processors, and can be used without knowing anything about HTML (HyperText Markup Language), the formatting language used for writing Web pages. Code-view editors let you work with the HTML code directly -- many provide easy ways to insert the necessary formatting codes (called 'tags').
Page-view editors are often called WYSIWYG editors. That acronym, for "What You See Is What You Get," is misleading when applied to Web editing. Since WYSIWYG is also unpronouncable without special training, and incomprehensible to the uninitiated -- we've decided to call them 'page-view editors.'
Page-View editors are easier to learn, though not necessarily easier for an experienced user to work with (and certainly not faster) than code-view editors. Many expert Web authors prefer to use a code-view editor, for several reasons.
We use both.
Some page-view editors, like Amaya and Netscape Composer (formerly Netscape Navigator Gold), more or less successfully integrate a browser with the editor. Others, like FrontPage Express (which is included with Wiindows 98) require that you use an external browser.
Composer is the Web editor from Netscape's Communicator
suite (replaces Netscape Navigator Gold.) Browse pages in Navigator
and edit them in Composer. Lets you work with HTML directly using
the text editor of your choice. (Windows; Macintosh; Unix; free.)
WORKING WITH HTML CODES
HyperText Markup Language is the language used for writing Web pages. Code-view editors let you work with the HTML code directly -- many provide easy ways to insert the necessary formatting codes (called 'tags').
distributed free of charge; available for Windows 95 systems only.
An excellent tutorial is provided as part of the on-line help system.
Saving pages and images from the Web: Many Web pages are based on other pages from the Web. Browse to a Web page on the Internet and edit a copy on your own machine: Keep the format, and use your own text, images, and links.
AOLpress downloads pages whenever you surf to them. To edit the active page (the one you see in the window) you begin by saving a local copy, on your hard drive, using the "Save As" function from the "File" menu. To download an entire Web page in Navigator Gold, click the "Edit" button on the toolbar, or select "Edit Document" from the "File" menu. For learning work with the pages, there is a good Tutorial in the "Help" menu.
Before beginning to download programs, think about where you're going to put them. Where did MY Files Go? is a clear introduction to basic hard-disk mamagement. "When you press 'Save,' where is the file being saved? You should know -- you should make a conscious decision to place files of a particular kind in a particular place." For Web pages, we use the main (directory) folder "Web Pages," with a "Temp" subfolder for the pages being downloaded from the Web. Don't give each page it's own folder.
(If you do this, try it in a temporary directory first - you get all the text and the images and can really make a mess by downloading a lot of web pages into the wrong directory.)
Most of the images on the Dharma Haven pages were downloaded from the
Web. Most browsers provide a way to do this. For example, In Netscape
Navigator, just right-click on the image and select "Save Image As..."
Cropping and resizing of images, and some adjustment of colors, and so
on, are done in an image editor (discussed in the Graphics
section of our Webware page).
Your word processor documents can be easily converted into Web pages. Recent versions of many word-processing programs provide an option for saving the document as an HTML page. Word processors that don't offer to convert the document directly to HTML will probably let you save the document in the standard Rich Text Format (RTF), and if you drop an RTF document onto the Arachnophilia program window, Arachnophilia will turn it into a web page for you.
To find out how to create an HTML-format copy of a word-processor document,
look up "HTML" in your word processor's Help index. If there is no
entry for HTML, look for "RTF" to find out how to save the file in a format
that can be converted to HTML by Arachnophilia.
To use Arachnophilia to create a blank document that includes the basic structure of HTML, choose "File" and then "New HTML Document." The "HTML Page Setup" dialog allows you to choose text and background colors and an optional background graphic as well as other options. For details see "Creating Your First HTML Page" under "Help Topics" on the "Help" menu.
In AOLpress, to start from scratch, open the "File" menu and select "New;" then choose "New Page." There is a good Tutorial in the "Help" menu.
In Netscape Composer, to start from scratch with a blank page, open the "File" menu and select "New;" then choose "Blank Page."
Whatever program you're using, you'll need to give the new file a name and tell the program where to put it, using the "Save" or "Save As" functions from the "File" menu.
Before beginning to save pages, think about where
you're going to put them. Where
did MY Files Go? is a clear introduction to basic hard-disk mamagement.
"You should make a conscious decision to place files of a particular kind
in a particular place." For Web pages, we use the main folder (directory)
"Web Pages," with subfolders for each major category of pages ("Workshop,"
"Tibetan," etc.) Don't give each page it's own folder.
Do give each page a title. In AOLpress there is a separate title bar for this purpose. Arachnophilia gives you a chance to enter a title for your page as the first option in the "HTML Page Setup" dialog. In Netscape Composer, select the "Format" menu and choose the "Page Colors and Properties" option. Under the "General" tab, enter your Title in the "Title:" field.
The title will show up on the title bar of you browser and editor windows,
and if you publish the page on the Web, the title will appear at the beginning
of the listing for your page in Web search services like Alta Vista
and Web directories like Yahoo! It will also serve as the
bookmark label when people bookmark your page.
For working directly with the formatting codes of Web pages, some basic knowledge of HTML is required. Since HTML is a simple, straightforward notation system, it is easy to learn enough to start making pages with links to other pages.
Arachnophilia's clear, brief HTML Tutorial should be enough to get you started. Another very clear introduction is the Guide to Html from the New Mexico Tech Computer Center -- or try HTML 4 Rookies. For information on more advanced features, see the links provided in the HTML section of our Guidelines page.
One good way to learn how various things are done in HTML is to look
ar the HTML source of a page that has that feature. Web browsers typically
provide a way to display the HTML code for the page you are currently viewing.
In Netscape Navigator, for example, you open the "View" menue and select
AOLpress has a particularly convenient feature: When you highlight something
in your page and leave your mouse cursor motionless over the selection
for a couple of seconds, the program shows the HTML code behind the selection,
in a pink popup window. .
The more involved you get in making pages, the more likely you are to need something- or- other, or wish you had it, anyway. Today I needed an image with a text label for use as a button - the colors had to be appropriate for a particular page.
First I jumped to Searches and Stuff, which is a tool I use ten times in a typical one-hour work session. Looking down to the third line, COMPUTER STUFF:, I jumped to the web-lishing section, to the links for page-making resources.
Selecting the Web Developer's Virtual Library leads to a menu with Graphics as the obvious choice for this problem. Looking down the resulting page we find Graphics Tools and Collections -- getting close now! "These tools will be particularly useful for web developers. Some are online and can be used by filling in a form; they either create images from scratch or manipulate existing images."
What I want is something that will let me make a couple of small button images, and choose The Banner Generator -- I've never used it before, but it looks promising. (If it turns out to be unwilling to make images as small as I want, there are several options to try, but I start with this one.) I pick "Make a Banner," and in a few minutes I'm looking at my first creation.
Exploring some of these sites is a rainy day activity that will richly reward one with ideas of what is available for free on the Internet, and with reviews and instructions for obtaining and using various software tools.
Want to putting audio on the Web? Many methods are available, and the Web Audio Guide covers the advantages and disadvantages of many of them. They also offer a Multimedia Guide.
Pages made for public consumption on the World Wide Web require special care, right from the beginning. The author must go to some lengths to experience the pages the way visitors will experience them, and this aspect of the work can't be left till a final check before the pages are published. The sooner you begin getting a sense of what your various visitors will be seeing, the sooner you can be confident that much of the work won't have to be redone.
The sources of potential problems are many: Visitors to a page
on the Web can use any of several different browser programs, on computers
with different modem speeds, screen sizes, color settings, and so on.
For example, did you know that many experienced Web users turn off the
automatic loading of images, because pages load much faster
that way? Authors are often shocked when they see how their pages will
look to some of their visitors.
Different Web browsers display the same pages differently, so you have to look at your pages using all of the common browsers if you want to understand what various visitors are seeing. You'll at least need to use both Netscape Navigator and Microsoft Internet Explorer. This is discussed in detail in the Web Browsers section of our Webware page.
Other differences are important too. Did you know that Mac users and PC users typically see Web pages differently, even if they use the same browser? Mac systems often have a screen that is longer, top to bottom, than it is wide (like the pages in most paper documents), while PC screens tend to be wider than they are long.
With all these options in use among your visitors, you can't really expect to explore all the combinations of variations, especially not if you have very many pages to evaluate. You can, though, get a good idea of the range of possibilities.
One way to get a look at your pages as they would appear at different screen sizes and resolutions is to use the Web Page Monitor Tester. Choose a size and new window will appear opened at the specified size. You can use this new window to view your web page designs.
Perhaps the most valuable tool you could give yourself, to help in this effort, is a 17 inch or larger monitor. That will make it relatively easy to view pages in nearly all of the various combinations of variables that are in common use.
Then you have to try to remember that most of your visitors do not have
17 inch monitors. We try todo most of our work with the browser window
set to 640 by 480 pixels, which is what most visitors will be using.
Test Driving Your Site:
"It's imperative to test out your site before you announce it to the world
WHY WYSIWYG IS A MISLEADING
Great WYSIWYG Debate. "some advantages, some disadvantages,
and tips on deciding if WYSIWYG is right for you
Dharma Haven Home Page
Revised on December 27, 1997
Copyright © 1997, Dharma Haven