HTML Help Workshop: A Tutorial For Creating Your First .
HTML Help Workshop:A Tutorial for Creating Your First Help Systemby Lori Blough
Table of Contents12345678910Introduction . 1Download the Tutorial Files. 3 Save the Tutorial Files to Desktop . 3Remove the Sample TreeProject Files . 5 Create a Project File. 6Import Additional Files . 12 Set the Project Title . 17Set the Default Topic . 17Set up the Search Feature . 18 Create a Blank Table of Contents . 19Add Headings to the Table of Contents . 21Add Subheadings to the Table of Contents. 27Add Subtopics to the Table of Contents . 30Customize the Table of Contents . 32 Create a Blank Index . 34Create Keywords for the Index. 36Create a New Project. 6Customize the Project . 17Create the Table of Contents. 19Create the Index. 34Create the Help Window. 39Compile the Help File. 45Edit the Completed Help System . 50Further Options . 51
Tutorial for Creating a Help System1IntroductionIntroductionHTML Help Workshop (HHW) takes HTML help pages that you have created, includinggraphics, and organizes them into a help system with a two-pane window to display yourinformation (called Topics), similar to the one in Figure 1. It allows you to easily createan Index and a Table of Contents and also provides a search function. Your help systemcan be more or less complex depending on your web design skills (such as JavaScriptor CSS) and on how much you use the customization options of HHW.Figure 1: HTML Help Workshop Help System ScreenThis tutorial will cover the creation of a simple Help project, including importingnecessary HTML and other files, creating a table of contents and index, and thecompiling and editing of a completed help system.This tutorial is intended for noviceusers of HTML Help Workshop andonly provides a general overview ofthe steps necessary for creating asample help system. Otherinformation you will need to knowcan be found in the help systemembedded in HTML Help Workshop.1Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemIntroductionHHW uses HTML files to create your help system, so if you don’t know HTML you’ll haveto learn it or have someone else create the help files for you. You can write the HTMLfiles in Notepad or the text editor of your choice, or in a web authoring application likeDreamweaver or Front Page. If you want to learn HTML you can find more informationfrom the World Wide Web Consortium (W3C), the creators of the HTML standard, athttp://www.w3.org/ and some great tutorials from W3 Schools athttp://www.w3schools.com. There are many other online tutorials available as well.You can write your HTML content “on the fly” as you use HHW, or you can write it aheadof time and just import the files into HHW. For the purposes of this tutorial, some sampleHTML files and graphics files have already been written for you. The instructions fordownloading these files are in Section 2: Download the Tutorial Files. Also, if you haven’tdone so yet, you will need to download HTML Help Workshop from Microsoft’s web 169(VS.85).aspx (scroll to thebottom of the page to find the download link).2Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System2Download the Tutorial FilesDownload the Tutorial FilesFor this tutorial we will be creating a simple help system called TreeProject. SeveralHTML files have already been created for you, plus some graphical files, all of which willeventually make up the pages of the TreeProject Help System. The first thing we need todo is download the files to your desktop.Save the Tutorial Files to Desktop1. Go to the ENC 4265 class website on UCF’s Webcourses(https://webcourses.ucf.edu).2. Go to the Class Handouts section.3. Go to the folder Files for HTML Help Workshop Tutorial.4. Click on the file called TreeProject.5. A download window will appear; choose Save File and click OK.6. A Zip file called TreeProject will appear on your desktop:Zip file and choose Extract to Right-click on the7. In the Extract Window, scroll to the top of the window and choose Desktop, thenclick the Extract button.Choose tosave thefile on thedesktop.Then clickExtract.Figure 2: Extract Window for WinZip3Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemFigure 3: TreeProject Folder and Tree FileDownload the Tutorial FilesThe files will automatically be extractedfrom the Zip file and transferred to yourdesktop, creating a folder calledTreeProject and a file called Tree.chm.Delete the file called Tree.chm. This filewill not be used for the tutorial.8. A window called WinZip – TreeProject.zip may remain open on your screen; youcan close it now.9. Open the TreeProject folder to verify that the contents extracted properly. Ifeverything is in place, you can delete the Zip file and close out of your browser.Figure 4: Contents of TreeProject Folder4Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemDownload the Tutorial FilesRemove the Sample TreeProject FilesThere are a more few files included in the TreeProject folder which will not be used inthe tutorial. They are only included so that you can view the completed TreeProject HelpSystem to see what the end product should look like. To avoid confusion, let’s removethem from our TreeProject folder for now.1. Create another folder on your desktop called Sample TreeProject.2. Cut and paste all of the following files from the TreeProject folder to the SampleTreeProject folder.a.b.c.d.Tree.chmTree.hhcTree.hhkTree.hhpIf you’d like, double-click on the file Tree.chm. A completed help system for TreeProjectwill open so that you can see what your tutorial help system will eventually look like.5Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System3Create a New ProjectCreate a New ProjectNow that we have some HTML files to build a help system with we can go into HTMLHelp Workshop (HHW) and begin our sample project. If you haven’t installed HHW yet,you will need to download it from Microsoft’s web site and install it 69(VS.85).aspx.Create a Project File1. Open HTML Help Workshop.2. Select File New.A small popup window will appear.Project will be selected by default.Click OK.Figure 5: New Project Window3. The New Project Wizard screen will appear. Just click Next.Skip thecheckbox!Just clickNext.Figure 6: New Project Wizard6Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project4. The New Project – Destination window will appear. Click Browse.Click Browseto find theTreeProjectfolder on yourdesktop.Figure 7: New Project – Destination Window5. In the window that appears, choose Desktop, and then double-click on theTreeProject folder. Enter the filename TreeProject.hhp in the File Name field andclick Open.Make sure youare in theTreeProjectfolder!Figure 8: Open the Project in TreeProject7Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project6. The New Project – Destination window will change to show the path to theTreeProject.hhp file. Click Next.Here’s theTreeProject.hhppath.Click Next.Figure 9: Destination Window with Path7. The New Project – Existing Files window will appear. For this tutorial we will beusing the HTML files (Topics) that we downloaded in Section 2: Download theTutorial Files, so select the check box next to HTML files (.htm) and then clickNext.Select the HTMLFiles checkbox.Click Next.Figure 10: New Project – Existing Files Window8Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project8. The New Project – HTML Files window will appear. Click Add.Click Add.Figure 11: New Project – HTML Files Window9. In the window that appears, navigate to the Content subfolder of TreeProject.Select all of the .htm files and click Open.To select all of the .htm files at once: Select the first Topic from the list byclicking it once; then, while holdingthe Shift key down, select the lastTopic from the list by clicking it once.All of the Topic names should behighlighted. Click Open.9Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project10. A list of TreeProject Topics should now appear in the HTML Files window.Click Next.Click Next.Figure 12: HTML Files Window with Files Listed11.The New Project – Finish window will appear.Click Finish.Figure 13: New Project – Finish Window10Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project12. The HHW screen will open, and all of the TreeProject Topics files you justimported should be listed under the heading [FILES] on the Projects tab.Imported .htmfiles.Figure 14: HTML Help Workshop Screne13. Back on your desktop, open the TreeProject folder and make sure that theTreeProject.hhp file has successfully saved there.The project filemust be savedin this location.Figure 15: TreeProject Folder11Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New ProjectImport Additional FilesNow that we have imported the Topics, we need to import the other files your projectrequires – the graphics, the template, the special scripts, and the style sheet.1. On the main HHW screen, click the Add/Remove Topic Filesbutton.A Topic Files window willappear.Click Add.Figure 16: Topic Files Window2. In the Browse window that appears, navigate to the Common subfolder.3. Then navigate to the Graphics subfolder. At first the graphics subfolder willappear to be empty. In the File Name field at the bottom of the window, type *.*and click Open.Type *.* and clickOpen.Figure 17: Browse to Graphics Subfolder12Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New ProjectSeveral graphics files (ending in .gif and .jpg) should now appear in the list.Figure 18: Graphics Folder with Graphics Files Shown4. Select the first graphic file from the list by clicking it once; then, while holding theShift key down, select the last graphic file from the list by clicking it once. All ofthe graphic files should now be highlighted. Click Open.5. Back in the Topic Files window, make sure that the graphics files appear at theend of the list.Click Add once again.Figure 19: Topic Files Window with Graphic Files13Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project6. In the Browse window that appears, navigate to the Common subfolder again.Only the Graphics folder and the Deciduous on Mouseover.htm file shouldappear. In the File Name field at the bottom of the window, type *.* and clickOpen.Type *.* and clickOpen.Figure 20: Browse to Common SubfolderTwo new files should now appear in the list.Figure 21: Common Subfolder with other Files Shown14Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New Project7. Select the first file from the list by clicking on it once; then, while holding the Shiftkey down, select the last file from the list by clicking it once. All of the files shouldnow be highlighted. Click Open.Back in the Topic Files window,the new files should now appearat the end of the Topic Files list.Figure 22: Topic Files Window with Graphic Files8. At the bottom of the Topic Files window, click OK to return to HHW. All of the filesyou have imported so far should now be shown in the list under [FILES].15Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate a New ProjectFigure 23: Updated HHW Screen9. At the top of the HHW screen, click File Save Project.16Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System4Customize the ProjectCustomize the ProjectNow that all the tutorial files have been imported it’s time to customize your HTML HelpWorkshop (HHW) project a bit. The following tutorials cover changing a few importantproject options for the project such as setting the title and default topic for the project aswell as setting up the search feature.Set the Project Title1. Click on the Change Project Optionsto open the Options window.button or double-click on [OPTIONS]2. In the Options Window, choose the General Tab.General tab.Enter the titleTitle field.Set the DefaultTopic here.Figure 24: Topic Files Window with Graphic Files3. Enter the title Tree Planting in the Title field.Set the Default TopicSetting the Default Topic will tell HHW which file to use whenever the Help File is firstopened.1. Still on the General Tab, click on the drop-down arrow next to the Default File.2. From the drop-down list, choose the file Content/Main.htm.17Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCustomize the ProjectSet up the Search Feature1. Still in the Options Window, now choose the Compiler Tab.Compiler tab.Select thischeckbox.Figure 25: Options Window Compiler Tab2. From the list of checkboxes, select the “Compile full-text search information,” andclick OK.3. You will be returned to the main HHW screen. The [OPTIONS] section shouldnow show the changes you just made.4. At the top of the HHW screen, click File Save Project.18Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System5Create the Table of ContentsCreate the Table of ContentsYou can use HTML Help Workshop (HHW) to set up a Table of Contents for your helpsystem. Like any table of contents, we need to organize the titles, or headings, for thevarious pages in the order they should go in. Here we will create the Table of Contents,set up the headings, and associate the table with the help system main window.Create a Blank Table of ContentsFirst we’ll create a blank Table of Contents and associate it with our main window. Onthe HHW screen, so far we’ve only been working in the Project tab. Now let’s take alook at the second tab, the Contents tab.1. On the main HHW screen, select the Contents tab.Contentstab.Figure 26: HTML Help Workshop Screen19Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate the Table of ContentsA popup window will appear, indicatingthat no Table of Contents has beenassociated with this project yet.Choose Create a new contents fileand click OK.Figure 27: Popup WindowIn your own help systems, if youhave already created a table ofcontents and saved it in the .hhcformat, you can import the existingtable of contents into your new HHWproject. Check HHW’s Help for moreinformation.2. In the Save As window that appears, navigate to the TreeProject folder, then typeTree TOC.hhc in the File Name field. Be certain that you are in the TreeProjectfolder!3. Click Save. The Contents tab will now display on the HHW screen, but it will beblank.Blank Contentstab.Figure 28: HHW Contents Tab20Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System4. Click the Contents PropertiesCreate the Table of Contentsbutton.The Table of Contents Propertieswindow will appear.In the Default Window field, type Main,and click OK. Do not enter any informationinto the Default Frame field.Figure 29: TOC Properties Window5. At the top of the HHW screen, click File Save Project.Add Headings to the Table of ContentsNow let’s set up the headings for the Table of Contents. We have to enter eachheading, and then tell HHW where to look for the page.1. Still on the Contents tab, click the Insert a Headingbutton.The Table of Contents Entrywindow will appear.By default you will see theGeneral tab. Type Introductionin the Entry Title field and clickAdd.Figure 30: TOC Entry Window21Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate the Table of ContentsThe Path or URL window willappear.Near the bottom of the Path orURL window, click Browse.Figure 31: Path or URL Window2. In the Browse window that appears, navigate to the Content subfolder.Figure 32: Browse Window – Content Subfolder3. Select the Main.htm file by clicking it once, and then click Open. The Browsewindow will close and return you to the Path or URL window.22Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate the Table of Contents4. Back on the Path or URL window, click OK.5. Then click OK again on the Table of Contents Entry window. An Introductionfolder should now appear on the Contents tab.Figure 33: Contents Tab with New HeadingNow let’s do the next one.button, or you can also just right-click inside the1. Click the Insert a HeadingContents tab, anywhere underneath the Introduction folder.This time a popup window willappear to ask if you want toinsert the new entry at thebeginning of the Table ofContents.Figure 34: Popup WindowSelect No.23Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate the Table of ContentsThe Table of Contents Entrywindow will appear.By default you will see theGeneral tab. Type Choosing aTree in the Entry Title field andclick Add.Figure 35: TOC Entry WindowThe Path or URL window willappear.Near the bottom of the Path orURL window, click Browse.Figure 36: Path or URL Window2. In the Browse window that appears, navigate to the Content subfolder.24Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate the Table of ContentsFigure 37: Browse Window3. This time, select the Choose.htm file by clicking it once, and then click Open. TheBrowse window will close and return you to the Path or URL window.4. Back on the Path or URL window, click OK.5. Then click OK again on the Table of Contents Entry window. A Choosing aTree folder should now appear on the Contents tab.Figure 38: Contents Tab with New Heading25Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help SystemCreate the Table of Contents6. The TreeProject Help System has three more headings. Try adding the
to learn it or have someone else create the help files for you. You can write the HTML files in Notepad or the text editor of your choice, or in a web authoring application like Dreamweaver or Front Page. If you want to learn HTML you can find more information from the World Wide Web Consortium (W3C), the creators of the HTML standard, at
Intro to HTML / CSS Rachel Starry UrsinusCollege, Tech Play Day May 31, 2018 * HTML Hyper Text Markup Language * HTML is the standard language for creating web pages. What is HTML? HTML Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 HTML5 2014 * "HyperText" uses hyperlinks: these allow you
HTML i About the Tutorial HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999.
History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.
History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.
3.2 W3C: HTML 3.2 Specification 1997-01-14 4.0 W3C: HTML 4.0 Specification 1998-04-24 4.01 W3C: HTML 4.01 Specification 1999-12-24 5 WHATWG: HTML Living Standard 2014-10-28 5.1 W3C: HTML 5.1 Specification 2016-11-01 Examples Hello World Introduction HTML (Hypertext Markup Language) uses a markup system composed of elements which represent .
New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of the Web and HTML Describe HTML standards and specifications Understand HTML elements and markup tags Create the basic structure of an HTML file Insert an HTML comment Work with block-level elements
Unit B: Getting Started with HTML . Objectives Assess the history of HTML Compare HTML and XHTML Create an HTML document Set up the document head and body Add Web page text HTML 5 and CSS 3 - Illustrated Complete 2 . Objectives (continued) Preview your Web page Implement one-sided tags
HTML Timeline 1991 HTML first publicly described in a CERN document called "HTML Tags" 1993 Formally defined by IETF 1995 HTML 2.0 defined by IETF 1997 HTML 3.2 published as a Recommendation by W3C 1997 HTML 4.0 published as a Recommendation by W3C 2000 XHTML 1.0 published as a Recommendation by W3C 2001 XHTML 1.1 published as a Recommendation by W3C
