Download Using the Netscape Communicator WYSIWYG Editor

Authoring World Wide Web Pages
With Netscape Communicator
Revised: 1999 Furman-Wofford Mellon Introductory Workshop by Hayden Porter, Donnie Antonini, and David
Bykowski
Overview: Certainly few technologies have experienced the explosive growth exhibited by the World
Wide Web. While only about five years old, the World Wide Web now touches the lives of
nearly everyone who accesses or who must publish or exchange information. There has has
been explosive growth in the volume of Web-based hypertext and/or multimedia course
materials. It is interesting to note that while the sciences integrated digital computation into
instruction at a relatively early date, only recently has it become possible for the humanities to
use technology effectively. If present trends are any indication, however, it is in the
humanities where the largest impact of new information technology (including the Web) is
likely to occur. Not only has the Web enabled wide distribution of information, it is also
rapidly becoming the universal "front end" through which faculty and students alike are
gaining access to a bewildering array of on-line databases and applications. Because Web
documents are linked together in logically complex structures, the term Web faithfully captures
the logical essence of this new nonlinear and interactive form of publishing. It is important to
understand that the design and construction of course materials for the Web can be very time
consuming--not unlike the effort required to plan and shoot a movie or to write and produce a
play. At the same time, one of the labor saving aspects of Web course development is that you
can easily link to the work of others and thereby integrate these materials with your own. Of
course, if you have the motivation and time you can develop all your materials yourself.
Unlike word processors, which have been developed to provide rich formatting of text, Web
editors use the Hypertext Markup Language (HTML). HTML was designed primarily to link
documents, thereby permitting the inclusion of images, video clips, sound, images, interactive
forms, and so forth. The following tutorial will teach something about HTML and show you
how to create your own Web page using Netscape Composer, a free Web editor that comes
with the Netscape Communicator software package. Communicator makes creating Web
pages nearly painless. While Netscape Composer helps to make the construction of Web pages
simpler than marking up your own documents, as you will learn in this tutorial, it is still
essential for you to know enough raw HTML to read and modify a Web document.
Objectives: Learn the basic elements of Hypertext Markup Language (HTML) so that you can understand
what a Web browser will do when it interprets a Web document.. Use Netscape Composer to create
WYSIWYG (what you see is what you get) Web pages. At the conclusion of this tutorial you will have
constructed two Web pages that are linked and that contain text and graphics.
Conventions used: In the following, actions you are to perform appear within a shaded background.
Parenthetical remarks associated with actions are indented within the shaded areas. Where menu
operations are to be performed, they are indicated in a menu>selection format. For example, File>Save
means “open the File menu and select the Save option.”
Part I: Creating a Simple Web Page
Netscape Communicator may be used in two very different ways. It can be used as a Browser of the Web
(this is the mode you have used thus far in the workshop). To create Web documents, the Composer
component of Netscape Communicator is used. Once you become familiar with some of the basic concepts
for authoring Web pages in the Edit mode, you'll find document preparation for the Web nearly as easy as
word processing. Web page authoring makes use of the Hypertext Markup Language (HTML). The term
"markup" is the key to understanding the simplicity of HTML. HTML documents are created by merely
adding special characters, called tags, to basic text files--the same kinds of files you produce using a simple
word processor.
Marked-up documents are portable, meaning they can be interpreted by different vendors' Web browsers
running on various kinds of computers--from PCs to Macs, to Unix workstations. Portability is critical for
sharing pages over the Internet, of course. In contrast, most files produced by applications on a PC can
only be executed on another PC having the same version of the software and the same operating system.
To perform the activities in this tutorial, you will find it necessary to have both the Browser and Editor
versions of Netscape running at the same. As it turns out, you sometimes need to return to Browser mode
to view the changes that you’ve made in Editor mode. Recall that to switch back and forth between
applications you should use the Alt Tab method. (If for some reason you inadvertently start up several
copies of either the Editor or Browser (you may see several instances of either the Editor or the Browser
when you cycle through Alt Tab), just terminate the used copies.


Start up Netscape Communicator and find any page of interest to you.
Select View>Page Source.
You will suddenly find yourself looking at a frightening collection of characters, some of which
may look familiar to you--others probably do not. What you are presently looking at is the raw
HTML that is processed by Netscape to display the page. By the end of this tutorial, many of the
HTML tags used for this page should make sense to you.
As you will see, the purpose of a Web editor is to help you to avoid most, if not all, of the gruesome detail
of embedding HTML tags into a Web document. In this tutorial, the Web editing tool you'll use is
Netscape Composer, a program that students or faculty members can download Communicator free from
the Internet. It is included in the Netscape Communicator product. If you use MS Word frequently, you
might wish to investigate Internet Assistant--a program that turns MS Word into an HTML editor. It is also
available free from Microsoft. For those of you that have the Office 97 software on your computers, Web
editing is built right in to the Word 97 program.
In addition to the above, commercial programs such as PageMill (from Adobe), Front Page (from
Microsoft) and Home Page (from Claris) are also available to construct Web pages. These tools are all
WYSIWYG ("What You See Is What You Get") editors, similar in function to a word processor.
Fortunately, Netscape Communicator provides WYSIWYG features as well for free.
No matter how sophisticated such editors become, certain features of Web page authoring will always be
beyond the capabilities of the editors. Thus, it is important to know a little HTML. At the very least, it will
enable you to fine-tune pages that you create using an editor.
Installing Netscape Communicator on your office or home computer is not difficult--provided you have
access to the network. Instructions for installing Netscape Communicator can be found on the
Furman/Wofford Mellon Home page or ask one of the workshop instructors and they can explain the
process to you.




With Netscape still running, create a folder on your diskette called Web.
Recall that you may use Alt Tab to switch to the File Manger--the program you must use to create a
new folder on your floppy diskette.
Return to Netscape using Alt Tab and create a new Web page.
To create a new Web page, select File>New>Blank Page.
The Editor version of Netscape is started up and a new window for the Editor is opened on your
screen. Note: This is a separately running program.
Select File>Save As in this window and save your new file in the Web folder using the name
index.htm.
This file name is the default name for your "home" page. A home page is a special Web page that
provides access to a related collection of pages.
2
Basic HTML tags
Almost all HTML tags have the following structure:
<TAG> text, possibly including other tags </TAG>
As you'll see, there are some notable exceptions, but in general you should always think of tags as coming
in pairs. Tags can be grouped by their function. The first group of tags we'll consider are general structure
tags. Structure tags are used to identify segments of a Web document. Though not strictly required by all
browsers, their use reflects good HTML style and ensures that all browsers will be able to interpret your
page correctly. The structure tags include:
•
•
•


HTML: used to bracket an entire Web document
HEAD: identifies the descriptive portion of a document, typically including the document title
BODY: identifies the content area of your document
Before typing anything into your Web page, select View>Page Source.
This command, given at any time, will display the HTML that underlies your Web page.
Something similar to the following HTML code should appear on the page when you give this
command:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
The above is the standard HTML simple template for creating a Web page. Note how the tags are
organized into pairs. Periodically throughout the workshop you will "peek" at the developing HTML code
to understand how the various HTML tags work. Though you will primarily be using the WYSIWYG
feature of Netscape Composer to create your pages, keep in mind that the editor can also be used to edit the
"raw" HTML. Let's experiment with that idea first. (Note: The Netscape Web browser you are using in
this laboratory has been previously set up to open a simple text editor called Notepad when you choose the
option to Edit HTML. If you want to perform these same activities on your office or home computer, ask
one of us to explain how to setup your home or office browser to work like the one in this lab.)



Close the window currently listing the HTML code.
Select Edit>HTML Source. (need to configure notepad)
You will see the HTML displayed again, but this time in Notepad a simple text editor provided in
Windows.
Using Notepad, position the cursor right after the <BODY> tag, and type the following information:
your name on the first line;
your Major/Year by Hours on the second line;
your campus box number; phone number, and email address on subsequent lines;
a list of classes you're going to have this fall, one to a line;
a paragraph describing your extracurricular activities
Note: Any word processor can be used for the purpose of editing raw HTML, as long as you can save files
in text-only (ASCII) format. HTML files must not include the special control characters which
regulate margins, indenting, fonts, styles, etc., that are included in a word processing document.
These special characters presently have no meaning on the Web.
Another note: If you have text already typed into a word processor, you may save it in text (ASCII) format
3
and add it to an existing Web document. Once added to a Web document, you may use Netscape
Composer to format it for you.
Next, let's add a title to your page. Every Web page needs a brief, descriptive title. The title area of your
document is accessible to Web searchers, it identifies pages stored in Bookmarks lists and the Go menu,
and it is displayed at the top of the Netscape window. The text indicating the title of your page is inserted
between the <TITLE> and </TITLE> tags in your document.




Position the cursor between the <TITLE> and </TITLE> tags. Add an appropriate title, such as "Joe
Public's Personal Page".
Now perform the following steps to return to Communicator to see what your fledgling home page
looks like.
Save your file by selecting File>Save.
You must always do this before you view your page.
Exit Notepad by choosing File>Exit.
Press Return when Netscape asks if you wish to reload the page. (Note: You must press return to
reload the page; clicking the Yes button does not cause any action to occur.)
The modifications to your page will be displayed in the browser.
Not exactly what you expected! Notice that when a browser like Netscape interprets an HTML document it
ignores all tabs, paragraph marks, sequences of spaces, etc. It simply takes the characters you have
produced and runs them all together. So what to do? You can stick with HTML and mark up the text with
more tags. Alternatively, you can use the WYSIWYG feature of Netscape Composer to create what you
want--occasionally checking up on the HTML periodically so you see which HTML tags are being used
and what effect they have.
Part II: Formatting a Page With Netscape Communicator
As with any well-organized document, you should separate related passages of text from one another,
identifying them with appropriate subtitles. The heading tags (H1 H2, ..., H6) take care of this nicely.
"Size 1" headers, indicated by the tags <H1>...</H1> are the largest. "Size 2" headers (<H2> ... </H2>) are
slightly smaller, and so on.








Position the cursor between your name and your major.
Press return to separate the lines.
Highlight your name.
Select Heading 1 in the Style Window.
Separate your title from the rest of the text by pressing return.
Again select Heading 1 for the style.
View the HTML again, by selecting View>Document Source.
Your name and title should now be surrounded with <H1>...</H1> tags, like so:
<H1>Joe Public</H1>
<H1>Computer Science/Junior</H1>


Proceed by adding subtitles in your document for the information in each of the remaining sections.
Type “Campus Address” at the appropriate place in your document, press return to separate it from the
remaining text and define its paragraph style as Heading 2.
Then type "Class Schedule" and "Education" in the appropriate places and make these paragraph styles
Heading 2 also.

Now let's focus on formatting the content of each section of your document. HTML provides two types of
tags for separating lines, the paragraph (<P> tag) and the line break (<BR> tag). Each causes the next
character following the tag to be placed on a new line. The difference is that the <BR> tag places the
4
character on the very next line while the <P> tag adds a blank line before the next character is written.




Move the cursor to the position between your box number and phone number.
Press Shift Enter.
This key combination inserts a <BR> tag after your office location. Note that there is no extra
blank line inserted between items this time.
Continue this process to create separate lines for each of the remaining items you've listed.
Observe the HTML to see how your page has been marked up.
You can probably begin to see a pattern in way the HTML tags are used.
Adding links to other documents
What makes HTML special is the ability to include hypertext links to other Web pages. Hypertext links are
the highlighted words (and images) on a page that can take you to other places in the current document or,
just as easily, to another page located on a computer halfway around the world.
Links are implemented as HTML tags. The general format of a link tag is:
<A HREF="resource URL">text or image</A>
It's that easy! The A stands for "anchor", and HREF stands for "hypertext reference." URL stands for
"Universal Resource Locator." Let's discuss briefly the structure of a URL. Consider for example, the
URL for the Porter and Rogers CS16/ENG11 paired course homepage "Communicating in the Digital Era."
This URL has the form,
http://www.furman.edu/~porter/MAINPAGE.htm
and breaks down as follows:
http:// — identifies the resource to be accessed as a hypertext page
www.furman.edu — identifies the server address on the Internet
~porter/ — identifies the directory path to the resource
MAINPAGE.htm — identifies the file name of the resource
There are numerous variations of URLs. The resource identifier may be other things besides "http" for
instance. (You should notice some other options as your surf the net.) Sometimes the path may be omitted,
as well as the file name. This is because certain paths and file names are accepted as defaults by Netscape
and other Web browsers (index.htm is one of the default file names that is assumed).
It is important at this point to note that URLs come in two forms: absolute and relative. The easier of the
two to understand is the absolute form. In short, an absolute URL is one that is fully specified, including
http:// (or another resource identifier) and the machine name. The "MAINPAGE" example is an absolute
URL.
Specification of URLs can sometimes be simplified by using the relative form. This is possible whenever a
link to another resource on the same computer is to be included. In short, the resource identifier and
machine address can be omitted in this case. As long as Netscape can figure out where a resource is—
based on where you currently "are"—what you should specify for a URL is the minimal information
necessary. For example, if I am currently accessing a page in my own directory (~porter) and want to
access the MAINPAGE page, the relative URL simply reduces to
MAINPAGE.htm
This rule of thumb may be helpful: use relative URLs when you are creating links to pages of your own,
and use absolute URLs when you are creating links to pages elsewhere on the Web.
5
Let's add some links to your home page.
People often include a list of interesting Web sites on their personal pages. Let's start a list on your page.














At the end of your page, insert the following using the Header 2 format:
Links to check out
After that, type the following as regular text:
Useful Site
Now, you’ll make the words "Useful Site" into a hypertext link.
Select the text using the mouse.
Then invoke the Link Editor by clicking the Link button—identified by a segment of chain on the
toolbar.
Look in the segment labeled "Link To" and find the box labeled "Link to a page location or local file".
In this box, type the following URL: http://www.furman.edu/academics/grants/mellon/netrsc.html
Finally, click Okay.
In your browser, the "Useful Site" text should now appear blue and underlined, identifying it as a
link.
Save your modifications.
To test the link, you'll need to view your page in the Netscape Browser.
Use Alt Tab to return to the Browser. Select File>Open File in Browser and open your page.
Clicking your new link will take you to interesting Web sites.
Try it out. Then return to the Web page editor using Alt Tab.
View the HTML source again. You should see the following in your file now:
<A HREF="http://www.furman.edu/academics/grants/mellon/netrsc.html">Useful Site</A>
Using the Web searching techniques you learned earlier in the workshop, find the home page of your
alma mater and link your page to that of your alma mater.
Find and make a note of the URLs of other interesting pages and add new links to your list.
Be sure to separate the items with either line breaks or paragraphs.
You can also make a link out of any text on your page by following the same steps as above.
Useful Hint: Copy and Paste can be invaluable when creating links to existing Web pages. If you find a
page you want to link to, highlight the URL of the page in the Netscape window and select Edit>Copy.
Then return to the Link Editor of Composer and Paste the URL into the link box. This process is much
easier than jotting down those tedious URLs and it means you'll have the correct links too! Failure to
obtain the correct URL will mean the browser will not be able to locate the desired page.
You will no doubt want to create more pages of your own during this workshop and link your home page to
these new pages. All you need to start this process is use Netscape to create one or more new files having
an extention .htm in your Web folder. Once created, you may easily link your home page to these files.
For instance, you might wish to create a page named mellon that your home page will linked to. If you
place this new page in the same folder as your index.htm file, to create the link, all you need is something
like the following:
<A HREF="mellon.htm">Mellon Workshop Page </A>
Compare this use of a relative URL to the absolute form you have used thus far. Much simpler, right?
That is because mellon.htm is stored in the same folder as index.htm.
Let's try it.


Use Alt Tab to return to the Netscape Browser window.
Select File>New>Blank Document to create a file mellon.htm and save it in your Web folder.
6









Give the page a title.
You can do this by editing the HTML directly as you did before, or by selecting
Properties>Document.
Put in an appropriate header for your page and list the courses for which you plan to create materials.
(You can enter more information about your course later.)
Switch to your index.htm file (use the Window menu to select this page)
After the Useful Site link, add a Heading 2 header named Mellon Workshop Materials.
As you begin typing, you may find that the text is underlined as an extension of the Useful Site
link. Don’t be alarmed. The following steps will reset the link correctly.
Now you’ll create a link to your mellon.htm page using the following commands.
Highlight the text Mellon Workshop Materials, then invoke the Link Editor again.
Click the Browse File button and navigate the file system to locate your mellon.htm file.
Click OK.
Save your modifications.
View the page in the Netscape browser and then try out your new link.
To assist those who navigate through your pages, you should also include a link on the mellon page that
returns to your home page (index.htm).

Using the methods you've learned so far, create a link from your mellon.htm file back to the
index.htm page.
Note: The ability to link different documents on your diskette permits you to create hypertext, multimedia
presentations easily and conveniently even if you have no network connection to the actual
Internet! These documents may be accessed with you Web browser just as you are doing now.
A Bit More HTML
Before moving on to the inclusion of images in your document, lets apply a bit more polish using some
additional features of HTML.
Horizontal rules
You have already separated the different segments of your page using subtitles (headers). Often a non-text
separator is also desirable. HTML includes a facility for including horizontal lines as dividers. These are
implemented using a non-pair tag, <HR>, which stands for "horizontal rule."



Prior to each Heading 2 header on your page, include a horizontal rule.
Just position the cursor and click on the Horizontal Line button—identified by a short horizontal line
in the toolbar.
View the HTML source to observe that the <HR> tag has been inserted prior to the header tags.
The tag has the form <HR WIDTH=100%>. Many tags have attributes, which specify additional
properties for the tag. In this case the WIDTH=100% attribute specifies that the horizontal rule will
extend 100% across the page.
Lists
Web page information is often organized into lists. HTML provides tags for implementing three types of
lists: unnumbered, numbered (or ordered) and descriptive. Let's implement the first two, and leave the
third to your reading and experimentation.

On your index.htm page, create a list of your hobbies using an unnumbered list.
Unnumbered lists indent all items and prefix each with a bullet (•). The basic tag for such lists is
<UL>. An additional tag for each list item is required also. This tag is <LI>.
7


Type your list of hobbies.
Note: Press return to separate list items. Netscape will remove the extra space between lines when
creating the bulleted list.
Use the cursor to highlight your list. Then click the Bullet List button. The HTML resultant tags
created might look something like:
<UL>
<LI> Photography </LI>
<LI> Hiking</LI>
</UL>
Now add a title such as Hobbies in front of the list.
Note: If you want to create an unordered list from scratch (i.e., you haven't already typed in the data),
this is also easy. Position the cursor where the list is going to go and click on the Bullet List button.
Then simply type, pressing the return key at the end of every list item. When you are through with the
list, click the Bullet List button again.


Next make your list of interesting links a numbered list.
This employs the tags <OL> ... </OL> in a fashion analogous to the creation of unordered lists.
Use the Numbered List button on the control panel.
Note that the actual numbers won't appear until you view the page in the Netscape browser.
Character formatting
Some rudimentary character formatting abilities are provided in HTML, but we won't spend much time on
them. The tags <I>...</I> and <B>...</B> are used for italic and bold text, respectively. In Composer, you
just highlight the text you wish to change and click either the Italic or Bold button, respectively. Another
feature is the ability to center text. This uses the HTML <CENTER> ... </CENTER> tags.


Center your Heading 2 headers by clicking on them, and then clicking on the Center button.
View your developing HTML file again.
The raw HTML should make lots more sense now!
Using images
Finally, let's add an image to your page. Images that are interspersed with your text when displayed on the
screen are called in-line images. A special kind of tag, called IMG, is used to include these. This tag uses
the following basic format:
<IMG SRC="URL for image">
Let's add a picture to the beginning of your page, just before your name.
The first thing you will need, of course, is a digitized image of some kind. Fortunately, these are easy to
come by. A scanner or a digital camera could be used. Drawing or painting software could be used to
create original images. Furthermore, any image that you find displayed on the Web can be downloaded to
your diskette and re-used (with the permission of the owner, if necessary). To see how it's done, let's get a
copy of the Furman-Wofford Mellon Program logo from the Mellon page.



First, use Netscape to access the Mellon home page
(http://www.furman.edu/mellon/ academics/grants/mellon)
The logo is at the top of the page.
To get a copy of it, simply click on it and hold the right button down.
A menu will pop up on the screen.
Select Save Image As.
8












You will then be presented with a dialog box like those you have seen before.
Navigate to your Web folder and save the image.
It's as simple as that!
Now add the image to your own page as follows.
Return to Composer.
Position the cursor before your name and press the Enter key to insert a new line.
Position the cursor at the beginning of this new line (i.e., move it up one line from its current position.)
Click the Insert Image button on the toolbar—identified by a small square, triangle and diamond--or
select Insert>Image.
This opens the "Image Properties" window.
By the box labeled "Image Location" click Choose File.
Navigate the file system to select the fwmellon.jpg image that you just downloaded.
Click OK.
The image should now appear on your page!
Completion of these steps will insert an IMG tag into your document.
Save your modifications.
Use Alt Tab to return to the Browser and click the reload button to see your page.
Select View>Page Source to see the form of the IMG tag that Netscape has inserted in your document.
Note: Numerous options are available for the display of images. These are accessible through the "Image
Properties" window. Try experimenting with some of these if you like. Consult an HTML text or ask me if
you'd like to know more.
Other sources of images
There are numerous sources of "generic" images that you can use to make your pages more visually
appealing. These include buttons, icons, fancy lines, backgrounds, etc. Several of these resources are
accessible from the Mellon home page. (Remember that anything that you can view using Netscape—
anywhere in the world—can be downloaded and used in your own pages. Take advantage of this!)
You can create your own original images using a drawing or painting program. Paint Shop Pro is available
free for a 30 day trial period. (See the Mellon Home page for a link to this site.) Finally, you can digitize
existing pictures with the use of a scanner or use a slide scanner to convert slides to digital form. These
images may then be added to your pages. Detailed instructions for digitizing images may be found on the
Mellon home page. See the URL reference at the end of this document.
Images as Hypertext Links
As mentioned earlier, hypertext links need not always be text. You can make the Furman-Wofford Mellon
Program logo into a link easily. The following will illustrate how.






Highlight the Furman-Wofford Mellon Program image by clicking it.
Then click on the Make Link button just like you did before for text.
Enter the Web URL for the Mellon Home page.
Click OK.
Save your modifications
Use the Netscape browser to try out the "image link."
Images are often used in place of <HR> tags to separate parts of a Web page.
 Repeat the image-copying exercise by copying an interesting separator-line image from the Web.
An excellent source for these is http://www.ender-design.com /rg/index.html
 Click "Realms Graphic Archive," click "Lines," then pick one and copy it to your folder.
9


To use it, replace the horizontal rules on your page with the appropriate downloaded image.
This is a good test of whether or not what you've done so far makes sense.
To delete a horizontal rule, just position the cursor immediately after it and hit the Backspace key.
In general, in-line images should be used with care. Cluttering your pages with too many images is not
only unattractive, but also it may be a source of considerable inefficiency for those trying to access your
page. Images can take a significant amount of memory to store. Each time your page is accessed that data
must be transmitted over the Internet. The more data your page requires, the longer it takes for someone to
receive it. For persons connected via a modem, the long times necessary to load a page can be prohibitive.
Sounds
In addition to images and text, you may also include sound files on your Web page. You may digitize
sound and distribute the files via the Internet. Ask me for details and/or read about sound files in the
Advanced Mellon Workshop tutorials. The URL is listed at the end of this tutorial.
Backgrounds
Suitable images can also be used as backgrounds to your pages to make them more eye-catching.
Repositories of these images can be found all over the Web. Instead of using an image for the background
of your page, you can use a solid color. You can also change the color of your text, your links, and your
previously visited links. Examine the Web sites listed at the end of this tutorial or use Netscape Help to
learn how to do this.
Fonts
Within the confines of Netscape Composer, you will find that many of the font options work like those of
Microsoft Word and similar word processors. There are drop boxes in the tool bar that allow you to alter
the font size, color, style (such as headings), and even the font itself. Just remember that not changing the
font allows for fewer problems when others are trying to view your page. However, for the purposes of
learning these tags, you will instead be using Notepad.





Click Edit>HTML Source.
Note that if you have not yet saved your work, it will ask you to. Go ahead and save accordingly.
It will then open up Notepad displaying the code for your web page.
Go to a section of text that you would like to show a different color and a different size. At the
beginning of this section type <FONT SIZE = “+3” COLOR = “00FFFF”>.
At the end of that section, type </FONT>.
Click File>Save.
Close Notepad.
Note that the changes you made have now taken place also inside the Netscape Communicator.
Also be aware of the fact that you do not need to go through Netscape to use Notepad to make
changes. You can simply open the file using Notepad and make the changes there.
Anchors and Targeting
Anchors and targets are tags within HTML that allow you to place a specific portion of a web page at the
top of the browser. Targets are nothing more than modified links and anchors are tags that indicate what is
going to be at the top of the browser.


Click Edit>HTML Source.
Note that if you have not yet saved your work, it will ask you to. Go ahead and save accordingly.
It will then open up Notepad displaying the code for your web page.
Go to a section of text that you would like to appear at the top of the web browser. At the beginning of
10
this section place the following tag: <A NAME=”target1”></A>
The set of tags above set the anchor, meaning that at the moment there is no apparent change in the way the
page functions. However, the anchor can now be used in conjunction with a target. As I mentioned earlier,
a target is a specialized link.





If you have closed Notepad, click Edit>HTML Source.
Somewhere in the web page, preferable a distance from the anchor, type a word or string of words that
will lead to the anchor.
Before these words place the following tag:
<A HREF=”#target1”>
On the other end of the string of words, place the following tag:
</A>
Be sure to remember that targets are case sensitive.
Save and close Notepad, then test this new link.
Targets can also be created outside of the web page of the anchor.





Open a different web page using Notepad.
Somewhere add a string of text much like you did above.
Before this string of text, place the following tag:
<A HREF=”index.htm#target1”>
Following that set of text, place the following tag:
</A>
Save and close Notepad, then test this new link.
Advanced topics
You now have a strong foundation for understanding HTML and the writing of multimedia, hypertext Web
pages. Nonetheless, there is a lot more to HTML, including the use of images, sounds and movies as
external resources, writing fill-out forms and "clickable" image maps, incorporating other Internet tools
such as e-mail, FTP, Gopher and News, along with various and sundry small features of HTML. To learn
about these features you have access to various textbooks and the best teacher of all—the Web itself.
Just as we can access images from other pages, we can access HTML ideas too. When you are using
Netscape Communicator to browse the Web and you see an appealing page layout somewhere, simply use
File>Edit Page and the HTML for that page will be downloaded to your computer for easy editing.
Alternatively, you can use the Source option of the View menu to view how that page was created. If you
see something interesting and you would like to know how to accomplish it, you know how to get a look at
the HTML code itself! Simply save a copy of the HTML source to use as a template, filling in your own
information where appropriate using Composer.
There is no substitute for experience and experimentation when it comes to learning HTML. We'll try to
build some more experience in the remaining time, but we hope that you'll continue to explore after this
workshop concludes.
Making Your Page Internet Accessible
Thus far your page can’t be accessed by anyone but you (and that's probably just the way you want it right
now!). To make your pages accessible to other Internet users, you will have to upload (copy) your pages to
a special computer that is called a Web server. A Web server has special software running on it that
permits others to access your pages over the Internet. You will learn to how do up load your pages in a
11
later tutorial.
12