7.2 Getting Started

Reference

Developer

Tutorial
1 Introduction
2 Macros
3 Typesetting
4 Example
5 Hints
6 Examples
7 Webmaking

SEARCH

7.2 Getting Started

This page contains a brief hands-on tutorial to get you started in using FunnelWeb to make webs.

Hello Web

The best way to understand how FunnelWeb can help you make webs is to work through a simple example. Here is one:

@!************************************************

@O@<index.html@>@{
<HTML>

<HEAD>
<TITLE>Dave's Home Page</TITLE>
</HEAD>

<BODY BGCOLOR=#FFFFFF>
<P>Welcome to my home page. Check out my
<A HREF="links.html">links page</A>.
</BODY>

</HTML>
@}

@!************************************************

@O@<links.html@>@{
<HTML>

<HEAD>
<TITLE>Dave's Links</TITLE>
</HEAD>

<BODY BGCOLOR=#FFFFFF>
<P>Here are my links:

<P>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://www.dilbert.com/">Dilbert</A><BR>
</BODY>

</HTML>
@}

@!************************************************

Cut and paste the above text into a file called dave.fw and run FunnelWeb on it by giving the command:

   fw dave

Note: On my computer, when you cut and paste text from a web page, the pasted text contains a block of blanks before each line; you will have to delete these to make the example work, as FunnelWeb requires the first line of macro definitions to be in column one.

If all goes well, FunnelWeb should write out two files index.html and links.html. That's the generated web, and you should be able to browse it using your favorite web browser.

First Glimmers Of Usefulness

The sole benefit we have obtained so far is that the web is represented as a single file. This confers quite a few benefits on its own for medium-sized webs, such as the elimination of the need to perform multiple-file search and replace operations, but it's really only a start.

The next step is to recognise that the two pages above share quite a lot of text and that that text can be removed into FunnelWeb macros.

@!************************************************

@$@<Begin page@>@(@1@)@M@{
<HTML>
<HEAD>
<TITLE>@1</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
@}

@$@<End page@>@M@{
</BODY>
</HTML>
@}

@!************************************************

@O@<index.html@>@{

@<Begin page@>@(Dave's Home Page@)

<P>Welcome to my home page. Check out my
<A HREF="links.html">links page</A>.

@<End page@>
@}

@!************************************************

@O@<links.html@>@{
@<Begin page@>@(Dave's Links@)

<P>Here are my links:

<P>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://www.dilbert.com/">Dilbert</A><BR>

@<End page@>
@}

@!************************************************

Now, although the file has actually got a little longer and looks far more complicated than it did, we've actually managed to extract two significant benefits from this reorganization.

Page style: First, almost without even trying, we've created a page style. For example, to change the colour of all the pages in the web, we need just change the single body definition in the begin page macro. Similarly, if we wanted to add a copyright notice at the bottom of each page, we need change only the end page macro.

Page overhead: Second, we've reduced the amount of text required to define each page. Instead of requiring ten lines of HTML to set up each page, we need just two FunnelWeb calls (two lines); the rest is text particular to the page being defined.

These advantages may seem minor, but when scaled up to a web containing a dozen or more pages, they become very significant.

The newfound power, in the case of the example, can be demonstrated by changing the web from black on white to blue on white, and by adding another page:

@!************************************************

@$@<Begin page@>@(@1@)@M@{
<HTML>
<HEAD>
<TITLE>@1</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000033>
@}

@$@<End page@>@m@{
</BODY>
</HTML>
@}

@!************************************************

@O@<index.html@>@{
@<Begin page@>@(Dave's Home Page@)

<P>Welcome to my home page. Check out my
<A HREF="links.html">links page</A> and my
<A HREF="hobbies.html">hobbies page</A>.

@<End page@>
@}

@!************************************************

@O@<links.html@>@{
@<Begin page@>@(Dave's Links@)

<P>Here are my links:

<P>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://www.dilbert.com/">Dilbert</A><BR>

@<End page@>
@}

@!************************************************

@O@<hobbies.html@>@{
@<Begin page@>@(Dave's Hobbies@)

<P>This page is under construction!

@<End page@>
@}

@!************************************************

Now that you have a Hello World file to play with, the remaining sections of this chapter will discuss the ways in which you can use the macro power now at your fingertips.