Volume 11, Part 1, February 1997

CREATING A MYCOLOGICAL SITE ON THEINTERNET

PAUL F. HAMLYN

British Textile Technology Group, Shirley Technology Centre,Didsbury, Manchester M20 2RB, UK

e-mail: 100256.2256@compuserve.comNWFG Home Page http://ourworld.compuserve.com/homepages/pfh2/nwfg.htm

Keywords: Fungi, Home Page, HTML, Internet,Mycology, World Wide Web.

Previous articles have reviewed some of the morepopular mycological sites on the Internet andoffered advice for getting on-line (Hamlyn, 1995;1996). Many Service Providers now provide freeWeb pages for their subscribers, so why not usethis opportunity to promote your own localmycology group. This article explains how tocreate a Web site using basic HTML documentswith reference to the experience of putting theNorth West Fungus Group (NWFG) on-line(Hamlyn & Cook, 1996).

The first thing to decide is what you're goingto put on your home page and its basic layout.You can get plenty of ideas from visiting othersites. With the NWFG site it seemed appropri-ate to start with a picture of the Group's logo,followed by an index and then details about theaims and objectives of the Group. The NWFGproduces two newsletters a year and many of thearticles are likely to be of interest to mycologistsall over the world. As a start, we have includedselected articles from the current newsletter thatcan be downloaded as text files (i.e. no need toconvert the articles into HTML documents)from the home page. Eventually, articles fromall of the newsletters will be included. TheNWFG site also includes a 'fungus facts' section,images of fungi and links to other mycologicalsites. Most Service Providers restrict homepages to 1 or 2 Mb per subscriber. To overcomethis size limitation you can spread your siteacross two or more Internet accounts on differ-ent Web servers. Of course, you should onlyhave one home or index page to avoid confusion.

BasicHTML

Web pages are written in HTML (HyperTextMark-up Language) which is not a complicated

programming language, but a system for markingup documents with tags, that indicate to a Webbrowser how it should display text, load graphicsand jump to new locations. You can create aWeb page with any text editor or word processorthat lets you save as plain text (also known asASCII). Each page is basically just a text filesaved using .htm as the extension (or .html forMac users) so that the Web browser recognises itas an HTML document. There are programsavailable that will automatically create a multi-page Web document for you such as the HomePage Wizard (HPWiz) which is free to membersof CompuServe. However, HPWiz has its limita-tions in that you can't put text and a picture onthe same line or put links in the middle of a sen-tence. More complex HTML editors such asWebEdit (which is a shareware program) supportadvanced features such as tables, and Microsofthave brought out a free add-on for Word, theInternet Assistant. Essentially, the InternetAssistant takes a Word document and togetherwith the formatting instructions that you addcreates an HTML file. But HTML is not thatdifficult and you can quickly learn enough to pro-duce a very presentable home page without usingthese programs. Get a good book on HTML,and examine the source code behind Web pagesthat you have downloaded from the Internet, byopening them up in your text editor. The NWFGpages were written using Notepad, the text edi-tor which comes with Windows 3.1. By openingthe Web browser as well as Notepad and keepingthe two programs running alongside one another,its easy to keep track of what your page actuallylooks like as you modify the source code.

Every HTML document starts with the<htmI> mark-up tag and is split into two mainparts, the head containing the title of the docu-ment which is inserted in the title bar of the Webbrowser and the body containing the text and

•

Volume 11, Part 1, February 1997

other components of the page. The end of thedocument is indicated by the <Jhtml> tag andthe basic layout of an HTML document lookslike this:

A few more basic HTML tags are describedbelow to get you started (note: tags are enclosedin <angled brackets> and most tags are used inpairs to mark sections of text):

<html><head><title>North West Fungus Group,England, UK<Jtitle><;head><body>{THE MAIN CONTENT OF THE PAGEGOES IN HERE}<;body><Jhtml>

<hn> <Jhn> Specifies a heading which isdisplayed in larger fonts thannormal body text. HTML hassix levels of headings wheren is a number between 1 and 6,with 1 being the largest.

<p'> <Jp> Use to enclose separateparagraphs of text (many peopleuse <p> on its own to indicatethe end of a paragraph.

<hr> Horizontal rule (draws ahorizontal line across the page).

Including links to other pages and sites

The most important feature of the WWW is theability to create links from one piece of informa-tion to a related item anywhere on the Internet.It's easy to spot a link. If a word or line oftext isin a different colour to the surrounding text andunderlined, this means that it's a link. Simplyclick on the link to jump to a new location. Linksare encoded using HTML mark-up tags knownas anchors and you can use them to jump toother pages or files on your Web site, to anyother Web site or even to different parts of thesame page. For example, ,if you load the NWFGhome page into your browser and look for theline which reads 'We are affiliated to the BritishMycological Society and .', then clickingon British Mycological Society takes you to the'Links to Other Sites' section on the same pagewhere you can find further information about theBritish Mycological Society (BMS) and an exter-nal link to the BMS home page maintained byRoy Moore. The <a href attribute indicates thestart of a link and to jump to a specific point inthe same document simply include a hash signfollowed by the name of the anchor to jump to asindicated in the following example:

You can add lists, tables, feedback forms,clickable image-maps, icon navigation buttons,and background colours or graphics to your Webpages using more advanced techniques but theseare outside the scope of this article. Not allService Providers support feedback forms socheck with your Service Provider beforehand.Backgrounds can make text difficult to read onsome browsers and should be chosen with care.

Used to enclose comments thatyou don't want to appear on thedocument (i.e. like REM inDOS).

->

Tag Description

<!-

<br> Force line break (use like theReturn key in a word processor).

<a href="#BMS">British MycologicalSociety<Ja> and ..

The <a name attribute specifies the destinationto jump to and must exactly match the anchor atthe source of the link as indicated below:

<a name="BMS"> Founded mainly by .A hypertext link to another document requires

that the address of that document is given as thevalue of href so to link to another site, for exam-ple the BMS home page you must include thefull URL as follows:

<a href=..http://www.ulst.ac.uk/faculty/sciencejbmsj">British Mycological Society<ja>

Place around text orlinks to images tocentrally align themon your Web page (notrecognised by allbrowsers but works withNetscape and theInternet Explorer).

<strong> <Jstrong>

<center> <Jcenter>

For strong emphasis(typically displays textin bold).

<em> <jem> For emphasis (typically displaystext in italics).

II

To set up an e-mail link from your Web pageso that people can send you comments about thesite use the mailto command as in:

<a href="mailto:100256.2256@compuserve.com">NWFG</a>

You can also put a counter on your page torecord the number of times that it has been visit-ed. If your Service Provider does not provide afacility for counting visitors include a link to oneof the sites that provides a counter service. Oneof the most popular sites is at http://www.dig-its.com and the service is free providing yoursite does not get over 1000 hits a day (if it does,become a Web page designer!). Visit the site tosign up for a counter and find out how to imple-ment the counter in your home page.

Putting images on your page

Most Web browsers recognise images as long asthey are saved in GIF or JPG format. JPG usu-ally works better for photographs and GIF fordrawings (see Glossary). The use of a flatbedcolour scanner for creating electronic images offungi (see Fig 3 on back cover) from photographs,slides or even whole fruit bodies was covered in aprevious article (Evans, 1996). You'll need to usea graphics program to convert the scanned image(probably in TIF format) into a JPG or GIF file.There are several good shareware programsaround that can do this such as Paint Shop Pro.

Images are included in your Web page by ref-erence. They are represented by HTML linkswhich cause the browser to download the imagefile and insert it into your page at the appropri-ate position. If you put the GIF or JPG files inthe same directory as your HTML file, you cancode the link with just the filename (i.e. no pathelements required). The following line will dis-play the picture encoded by the file nwfglogo.gif:

<img src="nwfglogo.gif" alt="North West FungusGroup Logo">

The 'img' stands for image, 'src' gives the filename and location of the image, and 'alt' pro-vides alternative text which is displayed by aWeb browser that does not display pictures orwhen the downloading of pictures has beenturned off. One problem with putting a drawingsuch as the NWFG logo onto a Web page is that

Volume 11, Part 1, February 1997

the image normally appears in a rectangular boxwhich has a background colour different fromthat of the page itself. However, one of the fea-tures of the GIF 89a format (see Glossary) is theability to make the background colour of theimage transparent so that the image can appearas if it were directly on the browser's surface.Many browsers now support transparent back-grounds and you can create a transparent back-ground using Paint Shop Pro. Use theeye-dropper on the background of your image toselect the right colour. Another feature of GIF89a is that you can save images in an interlacedformat such that a low-resolution version of theimage appears to fade into focus on browsersthat recognise this format.

It's not a good idea to put large images direct-lyon your home page because people will tire ofwaiting for the page to download and move on toanother site. You can put the images on a sepa-rate page linked to your home page or alterna-tively you can make small images, calledthumbnails, using a graphics program such asPaint Shop Pro and link it to the full-sized image,which people can download if they want to. Usethe 'resample' (not the 'resize') command whenusing Paint Shop Pro to get the best results. Thefollowing line will display the thumbnail pictureencoded by the file volvtn.jpg and by clicking onthis image you can download the full size pictureencoded by the file volv.jpg:

<a href="volv.jpg"><img src="volvtn.jpg"><ja>

Paint Shop Pro also allows you to place textdirectly onto an image and this can be used toinclude a copyright statement on your pictures ifdesired.

Advertising your site on the Internet

Now that you have created a new mycologicalsite how do you let the world know about it?First post a message to Bionet.mycology, theUsenet newsgroup devoted to mycology, aboutthe site. Be sure to give details about whataspects of mycology are covered by your Webpages. Next you can register your site withKathie Hodge at khll@cornell.edu for inclusionin the Really Big Index to Mycology Resourceson the Internet. Finally you can fill in a simpleform available from http://www.submitit.com/to submit the URL of your site to 16 search

•

Volume 11, Part 1, February 1997

engines including Yahoo and Alta Vista.Don't forget to contact Roy Moore(rt.moore@ulst.ac.uk) if you want your site con-sidered for inclusion on the BMS Home Page.

Future developments

Just imagine a virtual foray in a three-dimen-sional (3-D) landscape complete with early morn-ing mist! Not as exciting as the real thingperhaps, but there wouldn't be any geographicallimitations and you could visit a tropical rainfor-est without leaving your home. The VirtualReality Modelling Language makes it possible tocreate 3-D objects and worlds on Web pages. It'sstill early days but already sites are starting touse 3-D animation and images. Another revolu-tionary application is the Java programming lan-guage which allows Web pages to include smallprograms or applets that are executed by thebrowser bringing real-time animation and inter-activity to the Internet. The latest browsersfrom Netscape and Microsoft have beendesigned to encourage the creation of good-look-ing and multimedia enhanced Web pages withsupport for fonts, video and sound. However, allthese features require plenty of computing powerand bandwidth so that ideally you need a fastPentium or Power Mac together with 28.8K bpsmodem or ISDN access to take full advantage ofthem.

Acknowledgements

The author is grateful to Rita Cook, MikePalmer, Mike Walton and other members of theNWFG for their help and encouragement.

ReferencesEvans, S. (1996) Electronic fungi - a virtual possibility.

Mycologist 10: 8-10.Harnlyn, P. F. (1995) A mycologist's guide to the Internet.

Mycologist 9: 165-167.Hamlyn, P. F. (1996) Mycological resources on the

Internet. Mycologist10: 7.Hamlyn, P. F. & Cook, R. (1996) North west fungus group

goes on-line. Mycologist 10: 177-179.

SoftwareInternet Explorer and the Internet Assistant can be

downloaded onto your computer fromhttp://www.microsoft.com/

Netscape's Navigator is available from http://www.netscape.com/

Paint Shop Pro (version 3.11 or later): Shareware graph-ics conversion program for Windows with photo-edit-

ing facilities which has many features normally foundonly in expensive professional graphics packages.,Available from JASC Inc., at http://www.jasc.com/product.html

WebEdit (version 1.4 or later): Shareware HTML editoravailable from Kenn Nesbitt's home page athttp://www.nesbitt.com/

The Web Page Design Cookbook (W. Horton, L. Taylor,A. Ignacio & N. L. Hoft; 1996; John Wiley & Sons:Chichester & New York) includes a CD-ROM withhundreds of Web templates for home pages andentire clusters.

Glossary

Browser is a program that is used for, findingand displaying documents on the WWW.Popular browsers include Netscape's Navigatorand the Internet Explorer from Microsoft.

GIF and JPG are methods of compressingimages used extensively on the Internet. GIFimages are limited to 256 colours and work wellfor line art and images with large areas of solidcolour. JPG (or JPEG) allows over 16 millioncolours and is best for colour photographs. GIFcomes in two versions; 87a and 89a. The lattersupports interlacing and transparent back-grounds.

Java is a programming language developed bySun Microsystems loosely based on C++ (note:Java programs or 'applets' use long filenamesand PC users need Windows 95 or NT to runthem). A cut-down version of Java calledJavaScript can be included in HTML documentsto produce 'intelligent' Web pages. To find outmore about Java you can visit the Java Centre athttp://www.java.co.ukj.

Shareware refers to programs that can be usedfor a period of time (normally around 30 days)without payment. Shareware programs are gen-erally good value for money and many can bedownloaded directly from the Internet.

Tags are formatting codes used in HTML docu-ments.

VRML or the Virtual Reality ModellingLanguage makes it possible to create three-dimensional objects and worlds on Web pages. Itis based on ASCII text files similar to HTML.

..