You might be familiar with HTML (HyperText Markup Language), the code that is used to structure a web page. HTML consists of tags that define structure elements on a webpage. A tag consists of an opening character < and a closing character >. Between these two characters is the name of the element. The most common HTML element is the paragraph, defined by the <p> tag. This is the paragraph opening tag. After which goes the text for the paragraph. Then the paragraph closing tag </p>.
HTML consists of more than 100 tags to define everything from a header to a table. But despite the wide array of html elements, it's very difficult to construct complex mathematical expressions with HTML. For that reason, a whole other set of tags has been created to define the structure of a mathematical expression. These tags are called MathML, for Mathematical Markup Language.
While almost all web browsers can interpret HTML tags inherently, only the Firefox browser can interpret HTML tags inherently. To view MathML coded expressions in other browsers, you need to link to the JavaScript MathML source file in the head section of any HTML files that have mathematical expressions included. This source file is commonly called MathJax after the comity that developed it. The required link is shown below.
Be aware that although webpages are sometimes created with sophisticated word processing application, HTML itself is always just simple text. To create an HTML page containing embedded MathML, all you need is a simple text editor. In a fact a sophisticated word processing application will not work because it will place extra control and formatting codes within the document.
Shown below is a template for an HTML5 webpage containing a link to the MathJax source file that can display MathML expressions.
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/ mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML"></script> </head> <body> webpage and MathML code goes here. </body> </html>
You can enter HTML tags into this file. Anywhere you want to place a mathematical expression you need to place the opening and closing math tags as shown below.
<math> </math>
Shown below is an example to display the expression x + y = 3 on a webpage.
<math> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>=</mo> <mn>3</mn> </math>
To create this example, open a file in a basic text editor like Windows Notepad, type in the code for an HTML5 webpage containing a link to the MathJax source file, within the body section of the webpage type in the MathML code shown above. Notice that some tags are indented. This is formatting to make the code more human understandable. In future examples, as you add more elements, you will create more levels of indentation.
Save the file with a file name and the extension .htm. When you open the file in your web bowser, it will display the result shown below.
An html element is either displayed inline or block. An inline element displays itself on a baseline along with other elements as the parser works through the html code. A block element always starts on a new line, and always stretches out to the left and right as far as it can to take up the full width of the browser window. The Math element is an inline element, so the expression that you code will end up in line with any text that you enter on the page. If you want the expression to start on a new line, simply end the preceding text with a paragraph tags, or place a break tag before the Math element.
If you tried this example and it worked for you, congratulations, as you progress through this book you will be incorporating more different tags and will be building bigger and more complex expressions. If it didn't work, check for typos.
More Graphics Design Tips:
• How to Make a Video Game for your Xbox for Free
• Anti-Aliasing
• MathML File Structure
• Inkscape Basic Fill
• Inkscape Document Properties
• Coding a Matrice in MathML
• Pencil Free Open Source Cartoon Animation Drawing Program
• SVG Code to Place Text on a Curved Path
• Export Inkscape Drawing as an Image
• Graphic Design Meets Open Source