6) Modify the (X)HTML Web Page

This section describes how to combine the various components into the final web page.

6.1 Copy the Template File

Make a copy of the (X)HTML web page template you plan to use and change the name to suit your application.

6.2 Change File References if Necessary

If you have changed the name of any of the above files (except for the SVG file), you will need to also change the name of that file in the web page file so that it will be included. All the included files are referenced near the beginning of the web page.

6.3 Set the Page Title

Set the title of the web page. This is the name which will appear in the title bar of the web browser, and also in the tab. You will find a line near the beginning of the web page which looks something like this::


		<!-- Change this title to something appropriate. -->
		<title>MB-HMI XHTML Template</title>

Change the text "MB-HMI XHTML Template" to something appropriate for the application.

6.4 Change the Page Content (Optional)

If you intend to translate the web page to another language, you will need to modify the content text. The best way to do this is to view the web page in a browser and then search for the text you intend to modify.

If you are familiar with creating web pages, you can also change the page layout and style to customise it to your needs. Colours, fonts, and other similar factors are however normally changed via the page CSS rather than setting them directly in the HTML.

6.5 Insert the SVG

Find the section in the web page which looks like the following::


		<!-- Controls display of the main SVG screen. -->
		<div id="MBT_SVGScreen">
		<!-- Put main SVG content here -->
	
	
	
		</div>
	
		<!-- End of the main page. -->

Open the finished SVG drawing file with a text editor. Copy everything *except* the first line (which should say <?xml version="1.0" encoding="UTF-8" standalone="no"?>). This line must not be included in the web page.

Paste the SVG into the web page just below where it says "Put main SVG content here".

6.6 Insert the Help Page Content

If the template includes a "help" option in the HTML menu then there will be a section in the web page which looks something like this::


		<!-- This is for application specific help. -->
	
		<div id="MBT_HelpScreen">
	
			<h1>Help:</h1>
	
			<h2>Main</h2>
			<p>Application specific help content goes here. 
			</p>
	
			<hr></hr>

This is followed by a number of paragraphs of help content describing the standard help features. The help screen ends with the following::


	
		</div>
	
		<!-- End of the help page. -->

Replace the text which says "Application specific help content goes here" with whatever text you wish to include. You may also replace any additional help content with your own version if you wish.

You may with to learn something about HTML mark-up in order to format your help text correctly. However, the following pointers will help.

The <p> and </p> tags start and end a paragraph respectively.
The <h1> and </h1> tags start and end a first level heading.
The <h2>, </h2>, <h3> and </h3> tags serve the same functions for second and third level headings respectively.
If you open a heading or paragraph, you must close it with a corresponding close tag.
Test your web page frequently as you go along to find errors. XHTML is not as forgiving of errors as HTML, so incorrect practises which HTML may ignore will be flagged as an error with XHTML. This can be an advantage in that mistakes tend to produce error messages rather than just unexpected behaviour. However it does mean you need to use correct mark-up.

Help Topics

Topic Details for HMI