Authoring: hypermedia, formatting tools

Contents

• Objectives
• Unit 1 - Introduction to XHTML
• Unit 2 - How to generate XHTML code
  • 2.1. - What is XHTML like?
  • 2.2. - Essential XHTML components
• Conclusion
• References

Objectives

At the conclusion of this topic, you should be able to:

• describe the EXtensible Hyper Text Markup Language (XHTML)
• load and use your XHTML documents in your browser
• develop your own XHTML documents

Unit 1 - An Introduction to XHTML

As you are aware a browser, for example Internet Explorer or Mozilla, allows us to view the pages of information and data available on the WWW. These pages of information are stored on the many thousands of servers (computer systems) around the world that allow us to view their data. The web actually uses a model referred to as a client server architecture. These sites or servers that contain the data are referred to the server whereas the users who request this data are referred to as the client. Examples of such servers include Charles Sturt University and Google whereas the users include people like you and I. The many pages of information residing on the servers have to be saved in a particular format before the browser that the client uses is able to display the information. More commonly now this format is referred to as eXtensible HyperText Markup Language (XHTML) although a number of you may be more familiar with the earlier term HyperText Markup Language (HTML). Basically the browser interprets the XHTML (or HTML) code and displays it to users in the format we have become familiar with when viewing pages through our browsers.

Brief History of SGML, HTML and XHTML

As mentioned above, HTML has been around for quite a few years, however the forerunner to this mark-up language was the Standard Generalised Markup Language (SGML). "SGML is a language for describing mark-up languages, particularly those used in electronic document exchange, document management, and document publishing" (reference: http://www.w3.org/TR/2000/REC-xhtml1-20000126/). Let me state this slightly differently. SGML is not a language per se it is, what is known as a meta-language, a language that contains rules from which other languages are developed. One of the most popular languages that SGML developed was HyperText Markup Language (HTML) which contained a simple and easy to use subset of SGML tags plus it included a hypertext support (with multimedia capabilities being offered at a later time). Therefore HTML is an example of a language defined in SGML. It is interesting to note that SGML existed long before HTML and was the first mark-up language that was accepted as being platform and program-independent.

In a very short period of time, because of its simple subset of tags, we saw the popularity of HTML rapidly expand with new tags and features being added with each subsequent version developed. HTML 4.01 [HTML] was the last and latest version of HTML however it is important to be aware that it was developed from a SGML (Standard Generalized Markup Language) application conforming to International Standard ISO 8879 , and was widely regarded as the standard publishing language of the World Wide Web. Please refer to The SGML History Niche for more information on the history of SGML. Another language that SGML defined was XML (Extensible Markup Language - ISO 8879 ) which also is a meta-language (yes this is getting confusing isn't it ....). Therefore when the limitations of HTML were considered it was the meta-language rules of XML that came to the rescue. So XHTML is an XML application (in much the same way as HTML is a SGML application) that has basically modified HTML.  That is why XHTML is defined as 'a reformulation of HTML as an XML application'. This means that if you're authoring a document in XHTML you are applying the rules and concepts inherent to XML to your Web markup.

So if HTML is so popular why aren't we still using it? One of the main reasons was that HTML was not very flexible when it came to add additional tags for mark-up - XHTML offers this flexibility. A second and important reason is that in the future people will want to access the WWW not just through their browsers but by other platforms as well (e.g. your fridge or handheld Internet device) - again XHTML offers this flexibility.  Basically HTML was too simple an application for the many complex operations that we now expect it to perform for us through the WWW. Therefore rather than totally reverting back to SGML, the World Wide Web Consortium (W3C) recommended a new standard scripting language be proposed. As mentioned above, XHTML became the new standard W3C recommendation in December, 2000. It is expected that XHTML will quickly become the main language in which future World Wide Web documents are written. The W3C has been responsible for setting the standards for XHTML with XHTML being a reformulation of HTML (hypertext mark-up language) version 4.01. The most current version of XHTML is version 1.0 with version 2.0 in development.

The most important differences between HTML and XHTML are:

• XHTML elements must be properly nested
• XHTML documents must be well-formed
• Tag names must be in lowercase
• All XHTML elements must be closed

These will be further explained in the next Unit but remember that the rules are quite strict and you must write the correct code because your browser will not correct the code for you.

Unit 2 - How to generate XHTML code

For those students who may have used HTML before it may, on first appearance, seem to be little difference between HTML and XHTML. The big difference is that the rules for writing XHTML are much stricter as HTML was a very forgiving language. What I mean by this is, is that if you made an error in writing HTML, the browser tended to automatically correct these for you. I am not saying this will not occur in the future, however XHTML will be used by many more Internet connected devices that may not be as forgiving as our current sophisticated Internet browsers. Therefore XHTML has a stricter structure which ensures your code is more technically correct (which I am sure you agree is a good thing).

The rules associated with XHTML are steeped in technical jargon however we will not be going into this in any depth although we need to make sure we are clear on the general structure expected in this subject. I am sure there will be a number of you who will want to delve deeper into XHTML but this subject is only meant to give you the basics. Therefore, it is important that you follow this step-by-step tutorial below to ensure that you understand the fundamentals of XHTML. You are ONLY expected to understand XHTML to the level that it is presented in this topic - you are NOT required to understand more advanced features than those presented here.

The topic will provide you with the basics of XHTML by:

• demonstrating generic pieces of XHTML code
• providing examples to highlight some of this code
• asking you to write some basic code
• getting you to complete one of the many XHTML tutorials available on the WWW.

What software program will I need to create XHTML?

This question could be answered by naming many of the XHTML editors that are available. For instance, you could use Netscape Composer, Microsoft Front Page, Macromedia Dreamweaver and even Microsoft Word, Microsoft Publisher, or any number of HTML editors to create your HTML/XHTML pages. A word of warning, if you do use any one of these code generators/editors, you need to be aware that the code they generate can be extremely complex and difficult to modify, and is definitely not XHTML.

As this unit is an introduction to XHTML you will learn the syntax of each instruction. You are therefore required to use a text editor (e.g. the Windows Notepad.exe or Wordpad.exe programs). Examples of code included in these notes can be cut and pasted into either of these two programs. Remember you will be required to write XHTML code in your examination, therefore, you need to know the exact syntax of XHTML instructions - do not use XHTML code generators for this subject.

2.1 - What is XHTML like?

Those of you who have been involved in computing a long time ago may remember a word processing package called WordStar. This early package was not WYSIWYG (What You See Is What You Get) because it used anchors to inform the package how you wanted to display the appearance of the text.

The elements, sometimes called tags, used in XHTML are essential components that informs a XHTML browser (e.g. Netscape or Explorer) that the text between tags will be displayed in a particular format. For example the statement <b>John Atkinson</b> shows that the <b> activates bold, while </b> deactivates bold. In other words, everything between the <b> and </b> tags will be displayed as bold. These tags specify the formatting required for your XHTML documents - in other words, the way the information looks.

    <Simple Code on> insert the text required </Simple Code off>

The majority of tags have on and off codes and in many cases additional attributes. An off code is similar to an on code with the inclusion of an '/' to indicate off ( e.g. <b>...</b>). Attributes contain additional information for tags. In the case of the <font > tag you specify what it is about the font that you want to change. You can change for instance, the font face, it's size or color (note the American spelling).

For a full list of XHTML elements and which DTD they can be used refer to the following w3schools site. This site has done all the hard work in summarising in which WWW browsers the elements can be used and will become a essential source for you to reference.

2.2 - XHTML components

Before going any further we need to discuss what constitutes the basic components of an XHTML document. These are:

• an XML declaration (although depending on the document type this may not be essential - see below)
• a DOCTYPE (which is like defining a style-sheet in a Word Document)
• the element <html> must be the first one in your XHTML document
• the XML namespace (xmlns) and its appropriate value
• tags and attributes contained within the <body> of your XHTML document.

2.2.1 - Essential structure for every XHTML document

There are a number of essential components that must be included in every XHTML document that you create, these will be illustrated in the following section.

2.2.1.1. an XML declaration

This is simply a statement to state that it is an XML application. It is important that this statement is included in the first line of the XHTML document.

<?xml version="1.0" encoding="UTF-8"?>

 

2.2.1.2. A DOCTYPE

As mentioned a DOCTYPE is similar to the way you use a style sheet in Word. That is, it is a means to define how the overall document will appear. The DOCTYPE used is referred to a DTD (Document Type Definition) and there are three that you can select from:

1. Strict- basically follows XHTML definition exactly:
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
2. Transitional- allows some flexibility in the elements used and should be used in older browsers that do not understand Style Sheets:
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
3. Frameset - is the DTD that can use either a strict or transitional DOCTYPE and is the one that must be used if you want to include frames (we will mention these later to you) in your web pages.
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

For this subject we will require you to use the strict DOCTYPE - this will mean that you will need to be very particular in the Web pages that you generate. As this is probably your first taste at a programming type language we need to have no allusions that you need to be very exact in how you write your code. You will therefore need to ensure be careful about the code that you write to ensure that it conforms according to the strict DTD.

Let's look at the a minimal XHTML document:

Explanation of the XHTML document is:

REMEMBER every XHTML document that you create in this subject must contain at least the following code:

To save you time simply, copy the above code into each XHTML document that you create.

Steps to create a Web page from your text editor

1. open either Microsoft Explorer or Netscape (you do not have to be connected to the Internet to do this) - there should be an icon on the main Windows screen (that is, the Desktop).
2. reduce this program (that is, make it smaller) by clicking on the minus symbol in the top left hand corner of your browser - this should take you back to your desktop.
3. open the program notepad (or similar). To start the notepad program
       - click on Start, Run
       - type in the word notepad and click OK (this will activate the text editor).
4. type the XHTML code into the notepad screen - ensure that the respective tags are indented and are aligned with one another - refer to the following link. Please make sure that your document is properly indented (or formatted). 
5. you must then save the file to your disk - this is done as follows:
   • click on File, Save
   • enter a meaningful name such  a:assign1.html
     • a:- will force it to be saved onto a floppy disk (you can save it elsewhere but remember where you save it).
     • assign1 - is the name that you have called your file (note it is case sensitive meaning that Assign1 is a different name to assign1).
     • .html - must be added so your browser recognises the file as a WWW document (it is a bit like .doc for a Word document or .xls for a Excel document).
     • Please note that if you are using Word rather than Notepad to create your Web page then you must also select the option to Save As Type and then select - Text. The reason for this is that many programs like Word add many additional characters that your browser will not understand if you try and save it as a Word document. Finally to be entirely sure that there are no additional characters make sure that the Encoding option is UTF-8 which is that same as the XHTML code is saved in. (To view these options click here).
     • The above step has saved the XHTML code that you created in Notepad. The affect of this code can now be observed by viewing it in your browser (Microsoft Explorer or Netscape).
   • Remember that Microsoft applications do not differentiate between uppercase and lowercase file names whereas the Unix operating system does. Any web pages you post to your CSU account will use either the Linux or UNIX operating system and therefore what may work at home on your Microsoft based PC (Windows operating system) may not necessarily work on your CSU account. Its a good practice to use lowercase always when you are saving your XHTML files. (I can assure you - most of us have learnt the hard way!)
6. Now re-make Microsoft Explorer (or Mozilla) the active window (remember that you opened this application in Step 1 above) by pressing the ALT key and then touch the TAB key once on your keyboard - this will then remake the browser active on your desktop (that is the screen in the foreground).
7. You can now display the affect of your XHTML code that you saved in notepad (Step 4). Remember that this was saved as a html (or htm) document) and you can now view the affect of this code through your browser. To do this:
   • simply click on File, Open (or Ctrl + O) - a dialogue box will open requesting you to enter the file to view.
   • Let's assume you saved it as indicated in Step 5 - that is on the A drive (floppy disk) so you simply specify this exact filename (a:assign1.html)
   • click on OK
   • the file will open and display the output of your code entered at Step 4.
8. If necessary you may need to make a change to what you have created  by repeating steps 3 - 7.

I appreciate that the above is very verbose but once you have done it a number of times it will be relatively straight forward. The following diagram may also assist in the above explanation:

The remainder of unit 2.2 will discuss XHTML elements required for this subject. You will be asked to duplicate this code into a text editor (Notepad) and display it in your browser.

Remember, this is an introduction to XHTML and does not include every tag or attribute that can be used in XHTML. It is a starting point, that will enable you to develop your first XHTML documents. A list of some of the very basic XHTML code can be found at the Webpage Workshop - refer to this as a good starting point to what code you can use.

2.2.2 - Headings and subheadings

You are able to define the pitch or size of the heading fonts to appear on the screen. The most common approach is to use the heading elements. They range from <h1> .. </h1>(very large) to <h6> .. </h6> a small heading. These elements are referred to as heading elements and have also been referred to as block-level elements (because they describe blocks of information). 

All tags (elements) MUST have both opening and closing tags. For example you will notice above that the opening <h6> has a corresponding closing </h6> etc. Please note that the <align> tag DOES NOT work in the strict DTD of XHTML (even though it did work in HTML) - the align tag should therefore be avoided when writing your XHTML code (as a side issue - when a tag is not used say from HTML to XHTML the term deprecate is used which means that it is basically now out of date with the latest version of XHTML although it remains backwards compatible with the browsers).

Another way to increase and decrease the size of your onscreen text is to use the <big> and the <small> elements - these result in the font size increasing or decreasing one size. You should try this for yourself:

2.2.3 - Special effects

As with any documents you can include effects such as bold, italics and underline.  Avoid underlines as they can be confused with a hypertext link (something you click on to take you to another Web page.

2.2.4 - Line breaks and paragraph breaks

In XHTML the normal ENTER (or carriage return) is not recognised. Paragraphs are inserted by using the <p>.. </p> tags. A <p> tag indicates to the browser to start a new paragraph. You MUST end a paragraph with </p> tag.

If you want to start a new line the <br /> tag is used. This is similar to a line break (or carriage return) with your word processor.

You will note that the tag <br /> has been used. What does this mean? XHTML requires all empty elements (ones like <p> or <br> to have an end tag such as </p> or </br>). However there is an alternative, an empty element can also end with /> That is <p> and </p> tags are the same as <p />; and similarly <br> and </br> tags are the same as <br /> - for this subject we would like you to use the latter alternative <br />.  Because the <br> is basically only used for at the point it is inserted it and is an empty element then all we need to display is <br />.    

2.2.5 - Horizonal rules

A horizontal rule is a physical line that separates your text. Use the <hr /> tag to insert a horizontal rule and is another example of an empty element although additional attributes can be included to specify the lines width, length, alignment and colour (depending on the browser you are using). By default a <hr /> tag without attributes is from edge to edge. You may see on many web pages nice graphical rules - this is achieved by creating an appropriately sized graphic and inserting as an image - See section 2.2.11.

2.2.6 - Lists

You can use a variety of lists in a XHTML document. These include ordered lists, unordered lists and definition lists. Including lists in your XHTML enhances the appearance of the final document.

a. Ordered lists (numbered)

Each <li> tag indicates a new list item and must have an accompanying </li>. Items are separated by line breaks not paragraph breaks.  It is possible to 'nest' lists within lists by starting a new <ol> list within a <li> tag.

b. Unordered lists (dot or bullet points)

c. Definition lists (names a term and then indents its definition)

2.2.7 - Preformatted text

This option allows you to display text in a WWW browser (e.g Internet Explorer) as a fixed width (typewriter) font. Most importantly it allows you to include formats such as TABS which allows you to align material.

        text will display exactly as typed
      

2.2.8 - Tables

By using tables you can dramatically change your page layouts along with the placement of text and images. We will cover the basics of table tags and attributes but you should then investigate them further via one of the suggested tutorials.

Tables are defined within the <table> and </table> tags. Each table will contain at least one row and one column. Row tags contain the column tags within them.

<table> attributes:

• border="n" - sets size of the table border, for a standard one line border then set border = "1".
  (if you do not want a border in your table, you can either set the border size to zero, ie. style="border:none", or simply leave out the border option from the opening table tag. For a very thick border try border = "15")
• cellpadding="n" - sets the amount of space between the broader of the table cell and the data contained in the cell,
• cellspacing="n" - sets amount of space between cells - it can be expressed either as a percentage or pixels.
• width="n" - specifies the size of the table. By default the width is determined by the text within the table. You can set a specific number of pixels, e.g. 200 or a specific percentage of width of the browsers screen, e.g. 100%, 75%.

For example, the definition for each table in this unit is:
<table border="1" cellpadding="5" cellspacing="1" width="90%">

Using the <caption> ... </caption> is an optional element that allows you to give your table a caption or a heading to assist in describing the data in your table. The caption element should be positioned immediately after specifying the <table> element and before your first <tr> element.

Deprecated tags for tables in HTML 4.0 (and therefore should not be used in strict XHTML):

• align - positioning of the text.
• bgcolor - to set the background colour.
• text - used to set the colour of the text of the document.
• link - used to set the colour for hyperlinks. The default for links is blue.

2.2.8.1 Structure of your table

For each row in your table you specify <tr> and </tr> tags. Once you have defined a row, you then define each of the columns with the <td> and </td> elements.

There are three main elements to each table (note: all three elements MUST be included - you can not only complete one or two and not the rest - although you can leave one blank). These elements are used to group the various parts of the table, that is a heading section, the body and finally a footer section  However these elements MUST appear in the following order between the <table> .... </table> tags.

1. A heading section defined using the <thead> element. It specifies the first line of the table and indicates the names of the columns in the table.
2. A footer section defined using the <tfoot> element. It is used as the last line of the table - usually to highlight totals for your table.
3. A body section defined using the <tbody> element. This is the main section of the table and includes all other rows except the last one in the table.

A common mistake that students make is that they define their tables with a <thead>, <tbody> and <tfoot> however this is WRONG, the correct order is <thead>, <tfoot> and <tbody>. Please ensure that you remember this order (refer to the example below) however to help you observe the order of the elements I have made them bold in the following example (note: this is for example only and is not required for your code).

We have only touched the surface for tables. There are many other tutorials explaining the use of tables for XHTML - please do a search on the Web to locate materials that may be of assistance to you in your further understanding of this area.

In the exercises at the end of this topic you will complete further examples of XHTML and you will be required to understand some additional features including the attributes that can be included for the <td> or the <th> element:

• colspan - is the attribute to specify the number of columns that are combined or merged e.g. colspan = "3"  - means that three of columns in the table will be merged into one column. Remember that columns go across the table (I always remember a column because of the Roman column which are stands up and is vertical compared to a row which is horizontal) and if you merge one or more columns using this attribute will result in the current column merging into the next columns.
• rowspan - is the attribute to specify the number of rows that are to be combined or merged e.g. rowspan = "2" - means that two rows in the table will be merged into one row. Remember that rows run down the table and again if you merge one or more rows using this attribute will result in the current row merging with the rows below it.
• valign - is the attribute to allow you to specify the vertical alignment in the cell (the point where a row and a column intersect) where you want the text to appear e.g. <tr valign = "top"> means that the text will appear at the top of the cell, or <tr valign = "bottom"> means the text will appear at the bottom of the cell.
   

2.2.8.2. Table example

An example for you to consider (the XHTML code commences at the <body> element).

<body>
  <table border = "2" cellpadding= "3">

  <thead>
    <tr>
       <th rowspan="2">Student ID</th>
       <th colspan="2">Name</th>
       <th rowspan="2">Town</th>
    </tr>

    <tr>
       <th>First Name</th>
       <th>Last Name</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
       <td colspan="4">Charles Sturt University</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>1123456</td>
      <td>John</td>
      <td>Atkinson</td>
      <td>Albury</td>
    </tr>

    <tr>
      <td>1112345</td>
      <td>Mary</td>
      <td> </td>
      <td>Wodonga</td>
     </tr>
   </tbody>

</table>

Exercise:

1. on a piece of paper draw out what you would expect to result from the above code
2. next copy the code into notepad (don't forget to add the <html> and <body> tags) and save it with a .html document and then view it in your browser - check what is displayed with what you drew on the piece of paper in the previous exercise - how did you go?.

2.2.9 - Links to other documents

One of the main advantages of XHTML is its ability to link to other resources on the WWW. This is achieved by using the anchor tags, <a> .. </a>. Such links appear as hypertext (text that generally appears underlined in the browser) - all you have to do is click on this hypertext and you will automatically link to that resource.

To establish a hyperlink requires two items - one the page address where you wish to link to, and two the text you will click on to activate the link. Note: You must include the full address of the web page required. For example the
<a href="http://www.csu.edu.au/australia/">Guide to Australia</a> tag has the following structure:

2.2.9.1 - Linking to another section within the current document (internal linking)

You can create links to other sections within your XHTML document. The classic example is where you wish to include a table of contents in your document so that you can click on a hypertext link at the top of your document and jump to a section further down in your document. To do this you need to define two things, first a name for the place you wish to jump to, then actually reference this place by its name. To do this there are two separate pieces of code required:

1. <a href="#contents">Jump to this Part</a>
   this will create a hypertext link to allow you to jump to another section in the same document. Notice the # in front of the link name - this indicates a named section of the page. Typically this code is placed in the top section of your XHTML code.
2. <a name="contents">Place to jump to Heading</a> - this segment of HTML code indicates where the browser jumps to. 

It is also possible to link to specific sections within other documents, for example,
<a href="http://www.coke.com/index.html#S10">Link to section S10 </a>

2.2.9.2 - Absolute and relative links

Hypertext links can be expressed in either absolute or relative format.
 

• An absolute link is where the complete URL or location is specified, for example,
     <a href="http://www.csu.edu.au/australia/"> ... </a>.
   
• A relative link is where a link is specified to another document whose location is relative to the linking document. In other words, if you wanted to link to another html file in the same directory, all only need to specify the filename:
     <a href="home.html"> ... </a>

If the file you wish to link to is in a directory under the one you are currently in, you need to specify the directory as well as the filename:
   <a href="week1/lecture.html"> … </a>
 
If the file you wish to link to is in a directory above the current directory, or on the same level as the one you are currently in, you need to use the .. notation to return to the previous directory, similar to the following:
   <a href="../itc1xx/outline.html"> … </a>

Exercise:

1. in your own words record what the difference absolute and relative link are?
2. what are the advantages of using a relative link over and absolute link?
3. finally above copy the code into notepad (don't forget to add the <html> and <body> tags) and save it with a .html document and then view it in your browser.

2.2.10 - Including images in your document

Images (graphics), are of course, the reason WWW has became so popular - no longer does the user have to browse through just text based material. Including graphics has 'improved' the overall presentation and dynamics of web pages. However, if you are not careful, they can dramatically slow down the loading of your web page so please, avoid the over use of large graphics files. Many images tend to be very large (greater than 50 Kbytes) in size and therefore can take a considerable amount of time to load. Therefore the two main file formats recommended for web pages are:

• JPEG (used primarily for photographic images) and
• GIF (used primarily for illustrations).

Both JPEG and GIF use mathematical calculations to reduce the size of their image format compared to other image types (e.g. bmp files). Most graphics software programs have the ability to save or export your images in either of these two formats. The web site WDVL: Graphics Tools is well recommended as a good starting point for information about developing graphics for web pages.

The tag required for images is the opening tag <img src ..> and the closing tag  < /> tag. This tag (or remember that it is officially called an element) contains many attributes, however with the exception of the src element, all others are optional. For example: <img src="mypic.gif" /> - this refers to a local gif image called "mypic.gif". If you wanted to specifically specify the location of the image you can include the complete address, for example:
<img src="http://csusap.csu.edu.au/~jatkinso/mypic.gif" />.

Additional attributes include:

• alt="MyPicture" - shows the words "My Picture" when browsers have the display images turned off
• width="n" - specifies the width of the image in pixels
• height="n" - specifies the height of the image in pixels. By using both the width and the height attributes you will speed up the load time of your pages - as you are specifying to the browser the size of the image before it is actually loaded.
• border="n" - specifies the pixel size of a border around the image, default is no border.

Note: Images can also be hypertext links to other documents on the Web.

2.2.11 - Meta data

Some very important information that we need to include in all our XHTML documents is metadata. The material for this section has been taken from a number of sources including the Dublin Core Metadata Initiative and also a site called Introduction to Metadata. For this subject you are not expected to have a comprehensive knowledge of metadata rather a knowledge of the basic components we expect in a XHTML document and how they can be used. You are not expected to have a detailed knowledge as provided at the Dublin Core site rather the detail below is the level of detail expected.

2.2.11.1. What is metadata

'The simplest useful definition of metadata is "structured data about data". This very general definition includes an almost limitless spectrum of possibilities ranging from human-generated textual description of a resource to machine-generated data that may be useful only to software applications.' The metadata tags are placed within the <head> tags of the XHTML document.

In a library context Library catalogues represent a well established variety of metadata that has served for decades as collection management and resource discovery tools.

2.2.11.2. What is the purpose of the Dublin core metadata?

Dublin Core metadata is specifically intended to support resource discovery. It is a means to be assist in the effective location of information on the World Wide Web. Metadata can be used either by an HTTP server or indexed by a search engine.

2.2.11.3. Where is the Dublin Core site located?

The DC directorate is located in Dublin, Ohio at the Online Computer Library Center, a non-profit organization that serves the networking needs of libraries in the US and some 70 other countries.

2.2.11.4. What are the types of metadata that can be included?

Metadata is referred to as element. Each Dublin Core element is defined using a series of 10 attributes.

• name - The label assigned to the data element
• identifier - The unique identifier assigned to the data element
• version - The version of the data element
• registration authority - The entity authorised to register the data element
• language - The language in which the data element is specified
• definition - A statement that clearly represents the concept and essential nature of the data element
• content -information that search engines use to catalogue pages
• obligation - Indicates if the data element is required to always or sometimes be present (contain a value)
• datatype - Indicates the type of data that can be represented in the value of the data element
• maximum occurrence - Indicates any limit to the repeatability of the data element
• comment - A remark concerning the application of the data element

2.2.11.5. What metadata is required in your XHTML documents?

Within this subject we have only started to introduce metadata into our XHTML documents so there is a chance that you will not find it in every document that you view. However, it is a vital component that should not be left out of future XHTML documents. The number of elements is growing and can include non-specific metadata tags.

Meta tags have two attributes:

1. the meta tag. e.g. <meta name="keywords"
2. the data or content of the tag. e.g. content ="XHTML, syntax, tutorial"

For this subject the minimum amount of metadata that should be included in your XHTML document is shown below. An example is given to assist you understand the respective tags. Remember the metadata tags are placed within the <head> tags at the start of your XHTML document.

• <meta name="title" content ="ITC125 - The Information Superhighway"/>
• <meta name="source" content="Charles Sturt University"/>
• <meta name="description" content="A tutorial on how to use XHTML"/>
• <meta name="keywords" content="XHTML, syntax, tutorial"/>
• <meta name="url" content="http://www.csu.edu.au/itc125/module2/topic1.html"/>
• <meta name="date" content="1 August 2006"/>
• <meta name="author" content="John Atkinson"/>
  
  

2.2.12 - Comment tags

A comment tag is an explanation of a piece of your XHTML. It is only meant for a person reading your code and it assists that person to better understand what you have written. Comment tags are not viewable in your browser but as I mentioned only by someone wanting to better understand the XHTML code that you have written.

It is critical that you include comment tags throughout your XHTML document and it is expected that comment tags be included for your assignment one (marks will be deducted if they are not included).

What does a comment tag look like?

A comment tag begins with a <!-- and ends with a -->. Remember a browser does not display the contents of a comment tag. Example:

So how  many comment tags do I need to include?

There is no answer to this question however where you include major blocks of XHTML code or perhaps where you use some unique XHTML then you should include a comment tag to explain this.

2.2.13 - Cascading Style Sheets (CSS)

The W3C recommend the use of Cascading Style Sheets (CSS). A CSS is a means to control the appearance of material on your web page (spacing, margins etc) from the structure of the document (headers, links, body text etc), that is, to separate the structure from the presentation of the material. These are very similar to the style sheets that are using in common word processing packages such as MS-Word. Basically a style sheet is concerned with formatting and the presentation of the information.  These CSS can be applied to multiple web pages which means that if you want to change the appearance of these pages you only need to update or change the associated CSS.

To summarise, a CSS:

1. separates the information or content that we are providing in the web page from
2. the way we want it to appear on the web page (the format and the presentation of the information).

It is the CSS that helps us specify the way we want the information or content to appear in the browser. The CSS is information that tells the browser how to display the information or content. This means that if you want to change the way the content of the XHTML file appears in the browser then all we need to do is to change the CSS.

A fantastic tutorial to CSS is located at w3school site - we encourage you to visit this site to give you a clearer understanding of CSS. For this subject we will only be touching the sides of CSS however you come to appreciate the power and versatility of CSS and how they can be applied to your web pages.

A style for a web page can be defined according to four possible ways:

1. inline style (within the XHTML document)
2. within the <head> element of a XHTML document
3. within an linked CSS file - this is a separate file from the XHTML document.
4. by the browser (Explorer or Mozilla)

A cascading style sheet is one that when defined will over-ride earlier ones. In the above, point 1 is the over-riding style, followed by 2, 3 and 4. Therefore if you want to be assured of how your Web page will appear then the inline style should be defined rather than within the <head>, or as a CSS. However the one that offers you considerable versatility is the external DSS file which allows you to be able to have one style sheet that can be associated with many web pages. Therefore when a browser loads a web page it will format (display) the document according to a style sheet - if there is not a defined style sheet it will use the one defined for the browser (point 4 above).

Understanding the syntax of a style sheet

    selector {property: value}

        where:
            - selector - XHTML element you want to redefine
            - property - is the attribute you want to change
            - value - is the new value for the attribute

Examples:

    h1 { font-family: arial}
    p { font-size: 12pt}
 

2.2.13.1 Inline style sheet

This style sheet is defined within the <body> of your XHTML document. It is a good way to define the style of a specific element within your Web page. Note that the inline style uses ' <' rather the ' {'. Example:

<p style = "font-size: 12pt">
<h1 style = "font-family: arial; font-size: 20pt">
<h2 style= "color: green">
<hr style= "color: blue">

The inline style sheet are not to be encouraged as if you want to change a particular style you have to work your way through the XHTML document and change each of the respective styles. This is in comparison to the internal and the link style sheets where the change only has to be made once. The inline style also goes against the principles of XHTML which attempts to separate the content (information) from the format (way it is presented). Therefore we do not want you to use the inline style sheet in any of your XHTML documents.

2.2.13.2. Internal style sheet

This style sheet is included in the head section of the XHTML document. This type of style sheet is only specific to the web page that it is contained in. The format of the internal style sheet is:

<head>
<title> This is an example of an Internal style sheet </title>

   <style type="text/css">
      body {background-color: orange}
      h1 {font-size: 200%}
      h2 {font-family: wingdings; text-align: center}
      h3 {font-style: italic}
      p {text-indent : 2cm}
      p.times {font-family: times}
   </style>

</head>

<body>

  <h2>This is header 2 in wingdings font</h2>
  <h3> This is a header in italics </h3>
  <p class ="times">
     This is a paragraph</p>
  <p>This paragraph</p>
  <h1>This is double the normal size of h1</h1>

</body>
 

As you can see the <style type="text/css"> will define the formatting style that you want to apply to the information provided in the <body>.   This is achieved by defining the specific style for each of the elements within the <head> ..... </head> tags which can then be used within the body of the XHTML document - makes sense doesn't it?. Note that the <p class ="times"> element is a specific format of the <p> element.

Exercise

• Copy the section of code provided above into a XHTML document and observe the affect.
• Next change some of the styles within the <head> to different attributes and observe what happens.
• Make any additional notes that may assist you to better understand an internal style sheet

2.2.13.3 Linked style sheets

A linked style sheet is a file containing instructions for how the browser should display the related web pages. Using this type of style sheet will result in your web pages must be linked to one of these external style sheet using the <link> element which must be placed within the <head> element. The advantages of a linked style sheet according to the W3C are:

• Authors and Web site managers may share style sheets across a number of documents (and sites).
• Authors may change the style sheet without requiring modifications to the document.
• User agents may load style sheets selectively (based on media descriptions).

The format of the link element is as follows:

 <head>
    <link rel ="stylesheet" type ="text/css"
       href="css_master.css"/>
</head>

Here is an explanation of the above style definition:

• The <link> element is used to define the style sheet which in this example is called css_master.css
• The rel attribute specifies that the <link> element to be a link to a style sheet.
• The <href> attribute specifies the location of the style sheet. 
• The <type> attribute states that the style sheet is a plain-text file.

Also it is worth noting that when you make a Comment (being with /* and end in */) in a CSS the format is:

/* This CSS is used to define the font and text properties for this XHTML document
      and it should be changed and modified as required */

Typically the style sheet is written using a text editor (such as notepad) and must not contain any XHTML tags. An example of the content of a linked style sheet could be as follows:

body
{background-color: #FFFFF0;
font-family: Times;
font-size: 16px; color: #00008B;
}

h1
   {font-family: Arial, Verdana, sans-serif; font-size: 32px; color: blue }
h2
   {font-family: Arial, Verdana, sans-serif; font-size: 24px; color: red }

hr
   {color:brown; background-color:tan; width:90%; height:2px; }

table
  {font-family: Arial, Verdana, sans-serif;
  font-size: 18px;
  color: black;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px
  }

2.2.14 More Specific Information on Cascading Style Sheets .

As was indicated above, we should totally avoid inline style sheets and therefore the following comments relate to either internal style sheets or to linked style sheets. Lets now look at the types of definitions that can be included in the style sheets that we might create. Actually there are quite a few components that can be defined:

1. Text properties - including layout of blocks of text, words or characters. This can include spacing and alignment
2. Font properties - includes font family, size and weight
3. Colour and image properties- this allows for the definition of the colour and background formats for text and images.
4. Border properties.
    

Lets look at some specific examples

XHTML is evolving and not all of the elements that were included in HTML have been incorporated into XHTML. Two of those that have not yet been defined as part of XHTML relate to background and colour elements. Therefore the material contained in Section 2.2.11 relates to HTML 4 but still can be used as elements within XHTML. However remember only those HTML 4 elements and XHTML elements that are stated in this web site are ones that you can use in your assignments / examinations (this will result in the XHTML validator in 2.2.15 identifying these as none XHTML elements).

The examples shown in the following section need to be included within a CSS - we will use an internal style-sheet. See if you can work out what each of the respective elements in the style-sheet does. You should copy this into notepad and alter some of the attributes and observe the affect that results.

<html>
<head>

    <style type="text/css">

        body
            {
                background-color: yellow
            }

        h1
            {background-color: green;
              color: red;
              font: times italic 60px;
              font-weight: bold}
        h2
            {background-color: white;
              color:black}
        p
            {background-color: blue;
              color:white}

    </style>

</head>

<body>
 <h1>My name is John</h1>
 <h2>Charles Sturt University</h2>
 <p>The university is located in three main locations: Albury, Bathurst and Wagga</p>

</body>

</html>
 

For excellent tutorials on CSS please refer to the W3.Schools site however please remember that we are only expecting very basis CSS for this subject. The main aim of this section of the subject is that you can start to see the value of cascading styles sheet and how they can be used.

How do I know what the Hex value is for a colour? There are various web sites that have established tables for you to lookup the value you need. The following links will provide you with a good starting point:

• RGB Hex Triplet Color Chart
• W3school site

2.2.15 - Tutorials

The following tutorials for developing XHTML pages might be of interest:

• XHTML Tutorial
• Learning XHTML
• Converting HTML documents to XHTML
• Extensible Hypertext Markup Language

This is not a definitive list and we would recommend that you search the Web for additional tutorials. We recommend that you search the Web to try and find a tutorial that most suits your needs. However remember that you are specifically after a tutorial that is specifically for XHTML (not HTML).

2.2.16 - Validation Service - requirements for your assignment.

There is a process that you can follow to check to see whether your XHTML is well formed and valid - this is by using the W3C Markup Validation Service.  For your assignment one you are required to validate the correctness of your XHTML code by using this validation service.  This service allows you to present your XHTML code to the validation service and it will inform you of how closely it conforms to the XHTML standard.  The location of this service is at:

http://validator.w3.org/

 

MarkUp Validation Service

Welcome to the W3C MarkUp Validation Service; a free service that checks documents like HTML and XHTML for conformance to W3C Recommendations and other standards.

Validate Files

You can enter a URI in the Address field below, and have the page validated:

Address:

If you want to upload a file from your computer and have it validated, you can use this form:

Local File:

There is also an Extended Interface available if you want to set any advanced options, and a Extended File Upload Interface if you want to validate uploaded files with advanced options.

Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

 

 

 

 

 

The W3C Validator Team
Date: 2005/08/08 03:18:01 

(Copyright) 1994-2005 W3C (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use
and software licensing rules apply. Your interactions with this site are in accordance with our public and Member
privacy statements.

 

For assistance in using the validator please refer to the following help guide. You will notice there is a section in the help guide on hints to consider if your code will not validate.

Remember for the assignment task, you are required to run your XHTML code through this service and submit the outcome of the validator as part of the assignment submission. This will require you to include the appropriate DTD (strict) in your XHTML code and provide this as part of your assignment submission. The validator will return to you some valuable information to assist you to better understand why your code is not in the correct strict DTD format. The problem is that many of you will run the validator when you have completed your assignment and there is every possibility that you will be confronted with many errors. Therefore I strongly recommend that you work methodically through each of the errors and correct them. Do not be concerned with the overall number of errors that result because often you will find the same error will generate multiple errors by the validator. Once you start correcting those errors identified by the validator it will often quickly reduce the overall number of errors.

It is also important that you are aware of the correct elements that you can use in your tutorial and assignment work in this subject. Therefore it is worth providing a comparison between HTML and XHTML however the W3C site describing XHTML is far from user friendly particularly when comparing these two. Fortunately an excellent comparison of HTML and XHTML has been completed by the W3schools site. This lists clearly illustrates which tags can be used and with which DTDs. I suggest that you bookmark this link and use it as a guide in your studies in this subject.

How do I submit the outcome of the validator in my assignment?

The easiest way to achieve proof of the outcome of your validator is to paste the screen output into a WORD document. I will explain this below:

1. On your keyboard you will find a key PrtSC (or something very similar which is short for Print Screen). Sometimes this key will be shown with another key (on my keyboard it is combined with SysRq (but it will most likely be different for your keyboard). It is the Print Screen key that allows you to copy the output of the Validator to a WORD document.
2. There are two options as to how to activate the Print Screen function:
   If the key that contains the Print Screen option is on a key with:
   1. no other functions on it (that is, it is a key that only contains the PrtSC option) then it is simply a matter of pressing this key once when you are looking at the screen containing the output from the validator.
   2. two functions on it (e.g. with SysRq and PrtSC) then to activate Print Screen key depends on its position the command on the key:
      1. if the PrtSC option is on the top of the key, then to activate the Print Screen feature you will need to first hold down the SHIFT key and then at the same time press the key with the PrtSC. By pressing it, the contents of the screen you are looking at (the validator output screen) will be copied to the computer memory.
      2. if the PrtSC option is at the bottom of the key, then to activate the Print Screen feature you will only need to press the key with PrtSC once and it will copy the contents of the screen that you are looking at (the validator output screen) to the computer memory.
3. Once you have copied the output of the validator to memory (as explained in Step 2 above) then you need to copy this to a Word processor document so that it can be submitted as part of your assignment. To do this open a new word document and then click on the Menu option Edit, Paste. The result of this action will be the screen showing your Validator results which will be submitted as part of this assignment. You can add other comments to this WORD document and it is this document that will be submitted as part of your assignment.

Conclusion

The eXtensible HyperText Markup Language is a powerful tool to enable you to prepare and present a wide range of educational information and ideas, in an easy to use and intuitive format.

Although not within the scope of this topic, the use of graphics, video and sound on the WWW offers enormous potential for developing effective and efficient on-line educational courseware, particularly for distance education.

Your introduction to authoring and publishing on the Web is the first of many stepping stones which we hope will guide your path to understanding the power of the Internet.

• Last amended - 06/02/2011
• Maintained by - Michael Antolovich
• CSU 1997-2011