This short tutorial on building a Mathcad Website is excerpted from the Author’s Reference in Mathcad, under the Help menu. Topics include:
- Introduction to Mathcad-Generated Web Sites
- Creating Mathcad Files for HTML Export
- Adding Hyperlinks Between Files for HTML Export
- Creating an HTML Template File
- Setting your HTML Output Preferences
- Finishing your Web Site
Education appropriate templates are provided and explained at the end of the tutorial.
Introduction to Mathcad-Generated Web Sites
Mathcad is known for the ease with which math equations, text, and graphics can be combined in a single document. For authors and publishers, these documents can form the basis of a typeset, formatted, mathematics-based Web site for online distribution. Mathcad documents can be exported as HTML, with a variety of options for displaying equations and graphs. Documents are then viewable by anyone with a standard web browser (Netscape 4.7 or greater, or IE 5.0 or greater). In addition, all documents exported by Mathcad can be read back into Mathcad for further calculation.
Special Features of Mathcad Generated Web Sites
Mathcad makes it easy to publish mathematics online, formerly an arduous task involving the creation of many images and complicated markup by hand. When you use Mathcad to generate HTML pages, the following features apply:
- Every equation retains information about its content, not just how it looks on screen; this means you can read the documents back into Mathcad as if they were native .mcd files, with all calculations intact.
- Because HTML documents behave like Mathcad documents within Mathcad, it’s easy to edit them: just open the .htm version and edit in Mathcad, then Save As… or Save As Web Page… in HTML format again.
- Embedded images and hyperlinks will be preserved as you go from Mathcad to the Web. Links to .mcd files in Mathcad will be converted to links to .htm files in HTML.
- Anyone can browse your documents.
- HTML documents can include any additional markup, Javascript, or other Web features you wish to create in the exported document. We recommend you use HTML templates for additional content, so this content will be preserved as you bring documents in and out of Mathcad.
The following sections discuss the steps to create your own Mathcad Web Sites.
Images vs. Presentation MathML
Two formats are available for storing equation regions: you can choose images, which are viewable by everyone but require additional files, or presentation MathML in one of several versions, which will require a MathML renderer or a browser which is capable of rendering MathML. In either case, content MathML is stored in the file, so it can be read back into Mathcad.
What is MathML?
MathML is the math markup language developed to the XML standards of the W3C. MathML markup can exist in the same document with standard HTML for text and graphics. Mathcad will do all the HTML and MathML markup for you, based on the equations, text, and graphics in your existing Mathcad document. You can even apply an export template, if you choose, that creates the navigation, headers and other stylistic elements for a Web site.
If you wish to use presentation MathML for equation display, you and your readers will require a MathML renderer. Some browsers can also render MathML natively, for which you’ll have to use the inline MathML option. Check www.mathcad.co.uk for information on rendering options.
Creating Mathcad Files for HTML Export
First, create the Mathcad worksheets that, when exported, will comprise your Web site. Place all the worksheets into a folder designated for your Web Site. When you are naming files, you may wish to use some organized naming scheme, such as topic0.mcd, topic1.mcd, topic2.mcd, etc…, and retain these names when you export to the .htm versions of the file. Some of the sample templates included with Mathcad use Javascript to keep track of files in the site, but require them to have sequential naming structures such as this.
To create a consistent look for your worksheets, you can create and use templates and text styles. Note that Mathcad templates are used for setting styles within Mathcad, and are different from HTML templates that are used to create HTML navigation and wrappers for HTML content. The use of Mathcad templates to set styles in your document is recommended, as these styles will be translated to an inline Cascading Style Sheet in the output HTML document.
When you are using an HTML template, you will have to use relative layout in your documents, as selected in Preferences on the “HTML Options” tab. Mathcad regions are exported into an HTML table that tries to maintain horizontal and vertical positioning between regions through rows and columns. The more consistent you are about aligning regions to several well-defined vertical guides, the quicker and cleaner this export will be. We suggest you use Guidelines every 1.5 inches or so. See Mathcad Help on aligning regions and using the Ruler guidelines.
Once you have created your worksheets, you can hyperlink documents for your Web site.
Tip: If you want to include data from a data file in a worksheet, you should insert an input table and import the data into it. This will ensure your Web page is readable when it comes back into Mathcad. Refer to Mathcad Help on Importing Data from a Data File for information on importing data to an input table.
If you are using Referenced Files in your worksheets, be sure to save the Referenced File as HTML as well, so it goes along with your project. References will be turned into hyperlinks on export. Note that collapsed Areas will not be visible or accessible in a Web browser, but the information within them will be retained if the page is read back into Mathcad.
Tip: You may edit your HTML pages as Mathcad worksheets right in Internet Explorer. Simply choose Edit with Mathcad Application from the File menu, make your changes, and update the page, all within the browser window.
Adding Hyperlinks Between Files for HTML Export
You can insert hyperlinks to Mathcad files from each of the topics in a Mathcad table of contents, or from specific areas in individual files, to allow users to quickly browse the contents of your documents. Mathcad hyperlinks are exported as .htm anchor links in standard HTML markup. Be sure to export all linked and referenced documents, or these links won’t have a file to point to.
Note that in order for hyperlinks to export meaningfully to HTML, you must choose the “Use Relative Path” box in the Insert Hyperlink dialog. It is also best to specifically select a few important words or phrases for the link, rather than linking from a whole region. When links are displayed in HTML, you’ll find whatever text you chose rendering with color changes and underlining, so choose your link text carefully.
After creating the Mathcad worksheets, aligning them properly, linking them together, and creating a table of contents, if necessary, you may wish to create an HTML Template file to specify any HTML wrapping for your exported documents.
Creating an HTML Template File
HTML templates are used when you save a document as HTML. You can extend the collection of templates by creating your own. For example, you may want to create a template for a Web site that contains navigation buttons in the header and footer, images or dates in certain places, or you may want to apply an external CSS style sheet in the head of every Web file. A sample HTML template is provided in the templates directory.
To create a new template:
- Open a new file or the existing sample template file in any text or HTML editor.
- Make sure the following comment regions are in your file:
In the document <HEAD> tags:
<!– #BeginEditable “Title” –>
<title>sample title goes here</title>
<!– #EndEditable –>
<!– #BeginEditable “HTMLheaders” –>
META tag information written here
<!– #EndEditable –>
<!– #BeginEditable “HTMLstyles” –>
Cascading styles written here
<!– #EndEditable –>
Be sure to fill in a title between the title tags. This title is only overwritten when you specify a new title in the Save As Web Page dialog box. If you do not specify a new title, the template title tags will be used.
In the document <BODY> tags:
<!– #BeginEditable “HTMLcontent” –>
HTML Content from Mathcad worksheet written
<!– #EndEditable –> - Add any additional HTML markup you want to appear on every page you export to HTML.
- Save the file with your chosen template name and an .mlt extension.
Your template is browsable from the HTML Options tab in the Preferences dialog box.
Setting your HTML Output Preferences
When preparing to export Mathcad documents as HTML, you’ll want to set a preferences for formatting and images, and select your output template, if desired. The Preferences dialog box is displayed by choosing Preferences… from the Tools menu. Click the “HTML Output” tab to set HTML export choices.
Equation Export
Choose to display your equations as images or MathML. If you choose images, equation regions will be saved according to the image choices set for the document (see below). If you choose MathML, select whether it will be wrapped in <OBJECT> tags for display with IBM techexplorer, or if it will be placed inline with the HTML as additional markup. The second option requires a specialized browser that reads MathML tags. The first requires an Active-X component to be downloaded and installed on the browser.
Image Export
You can set the format for image export to JPEG or PNG. PNG is a “lossless” format that often results in clearer images for graphs and drawings, while JPEG images are often smaller and usually compatible with older browser versions. Note that all Mathcad objects that are not equations (graphs and data tables in particular) cannot be expressed as HTML. These objects are exported as images.
Layout Style
You can choose whether a document will use relative or absolute positioning when exported to HTML. If the Save layout as option is set to “Relative” your Mathcad regions will be output into an HTML table which attempts to retain relative horizontal and vertical placement between regions. This makes it possible to edit the HTML document outside of Mathcad to include additional HTML-navigation links, images, etc., as all positions of text and math on the page will reflow depending on what comes before them. Relative layout must be selected to use HTML templates.
If you check the fixed layout radio button, each HTML expression will be precisely positioned on a Web page, mimicking the original Mathcad document as precisely as possible, but making it difficult to add new items to the page outside of Mathcad. Choice of template will be ignored in this case.
When you are satisfied with your choices, you can save your files as HTML. You can also set these preferences at save time by choosing Save as Web Page from the File menu.
Note: Changes to your template file will only affect future Mathcad documents saved out as HTML, it won’t retroactively change files already saved.
Finishing your Web Site
To check your finished Web Site:
Save all Mathcad documents to be included in the site as HTML files, making sure that the file names are what you expect them to be given any interdocument hyperlinks or scripting in your templates.
Open the first page (probably called index.htm or default.htm) containing your table of contents, and click around to the other pages on your site using your hyperlinking structure. You should find all links correctly translated to .htm files, and all content from your templates inserted around the HTML from your Mathcad documents.
Correct any filenames, template problems, or alignment problems for Mathcad regions that aren’t exporting as expected.
That’s it, you’re done. You can put your .htm files, and their associated image directories, on any internal or external Web server.