] >
The decision on whether to use HTML or XHTML lies on how much you want to do in your web page. If you just want to write a simple web page with no 'fancy' applications like mathematics, then HTML will suffice. However, since many applications such as MathML are based on XML, you must use XHTML to write your webpages if you want to implement them.
Although the GLOSS system does allow you to convert into HTML straight away, it also allows you to convert from XHTML to HTML. For this reason I will introduce just one of the two languages - XHTML. If you do then want to have a HTML page, simply convert your XHTML page into HTML. To find out how to do this please go to the Section: Transforming your XHTML
XHTML is a markup language. The markup in the XHTML language is in the form of tags. Tags look like so: <tagname> ...tagcontent... </tagname>
, and for every opening tag there must be a closing tag. The only exception is when a tag stands alone, and is written <tagname />
.
Tags cannot be overlapped. By this i mean that a tag which contains other tags must close after all the tags inside it have closed. For example, the following is illegal in XHTML:
<tag1> <tag2> </tag1> </tag2>
Tags must be nested correctly (Must not overlap). The following is the correct way to nest tags: (I have laid out the tags on different lines and with indentation to show you the inclusion. This is good programming practice, but not essential in XHTML)
<tag1> <tag2> ... tag2 content ... </tag2> <tag3> <tag4> ... tag4 content ... </tag4> </tag3> </tag1>
Most tags have attributes, which are placed inside the opening tag after the tag name, and written like so: attribute_name="attribute_value"
. An attribute is used to assign some property to the tag. For example, when writing a table you might give the border attribute the value 1 in the table tag, thus creating a border for the table. A tag with an attribute may look something like this: <tag_name attribute_name="attribute_value">...tag_contents...<\tag_name>
. Some attributes are optional while some are compulsory, you will learn which are which as you write the language.
The following code must be in every XHTML document:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> <head> <title>...</title> </head> <body> ... </body> </html>
The first line (<?xml .... ?>
) is the xml declaration and is necessary in every XML document. Since XHTML is an application of XML, it is also found at the top of every XHTML document.
The next line (<html xmlns=...>
) and its corresponding closing tag </html>
must open immediately after the XML declaration and close at the end of the document. Notice we still use the html tag even though this is an XHTML document. This is because XHTML was written as an XML compliant version of HTML, and so maintains most of the tags found in HTML, including the html tag.
We then have the head tags, which along with the compulsory title tag contain information about the page that will not appear in the page itself. The title tag places its content in the title bar of most browsers, and is compulsory.
Finally, the body tag is where we put the contents of the page that we wish to be displayed on screen.
I will now introduce a few commonly used tags that must be used inside the body tags that should help you to get started with XHTML. The internet provides a vast number of places to find out more.
Tag Name | Description | Example Code | Example | ||||
---|---|---|---|---|---|---|---|
p | Paragraph | <p>This is a paragraph</p> | This is a paragraph | ||||
i,b | Italics,Bold | <p>This paragraph contains <i>italic text</i> and <b>bold text</b></p> | This paragraph contains italic text and bold text | ||||
table,tr,td | Creates a table, table row, row entry | <table border="1"> <tr> <td><p> This paragraph contains <i>italic text</i></p></td> <td><p> This paragraph contains <b>bold text</b></p></td> </tr> <tr> <td><p> Another cell </p></td> <td><p> Another cell </p></td> |
| ||||
h1,h2,h3,... | Header 1, Header 2, Header 3,... | <h1>A large header</h1> <h2>A not-so-large header</h2> <h3>A medium header</h3> | A large headerA not-so-large headerA medium header |
This page is copyright. Web page design and creation by GLOSS.