Neon-komputadór

Extendable Hypertext Mark Up Language (xhtml)

This section provides an introduction to xhtml coding, using the Ministry of Foreign Affairs and Cooperation website as an example. It begins with describing the history and main features of xhtml before moving into explaining the code itself. Coding is introduced initially in terms of structure and design, the elements of the xhtml head and then the elements of the xhtml body. This section then discusses Cascading Style Sheets and finally designing dynamic webpages and webscripting languages. The default example throughout the discussion is the website for the Ministry of Foreign Affairs and Cooperation.

As described in the second chapter of this manual, the early 1990s saw the introduction of the World Wide Web to the Internet. Since then most of the billions of documents that we know as webpages have been written in what is called Hypertext Mark-Up Language, or html. This is described as a sgml (Standard Generalized Markup Language) application that conforms to the International Standards Organization ISO 8879, sgml has been about since the mid-1980s and has proven to be quite stable. However, it is not particularly complex and this has inhibited its development. Whilst html has worked well for many years its limitations have led proprietary organizations to add their own standards to suit their needs (for example the Dynamic Hypertext Markup Language, or DHTML). Not surprisingly, this has led to compatibility problems.

The new mark-up language xhtml seeks to solve these problems of compatibility and complexity. It is very new and nearly all webpages don't actually fully comply with xhtml standards. Nevertheless xhtml itself is backwards compatible. xhtml agent applications can read html documents and xhtml documents can utilize applications (scripts and applets) that rely upon either the html Document Object Model or the xml Document Object Model (DOM). The key conceptual differences between xhtml and html is that:

(a) xhtml is a consistent coding tool
(b) xhtml is modular in design so that the more capable the application agent, the more features of the xhtml document it can use and
(c) xhtml is the next step in the evolution of the World Wide Web - as the variety of type of machines that can access the web increases (PDA's, mobile 'phones, computers, fridges) the need for modular and consistent web documents will also increase.

The East Timor Ministry of Foreign Affairs and Cooperation, despite the fact that its website is very simple, is ahead of most other government and corporate websites because of its use of xhtml.

As mentioned in the previous chapter, the easy way to design a webpage is to use one a webscription tool, such as Microsoft FrontPage (not recommended), Mozilla's Composer (better) or Macromedia's Dreamweaver (best). Whilst these tools are useful for helping an aspiring website designer in terms of layout, and the size and location of graphics there are two major problems. Firstly, none of these tools are xhtml compatible and as such, even when webpages are designed with these applications, the code should still be checked. Whilst it may be true that many webpages are very forgiving of poor html code, this is hardly good practice and in time less browsers will be forgiving of such code. Secondly, being an automated program they are usually inefficient, especially MS-FrontPage, and produce code that is difficult to read and edit.

Some very brief comments must be made about layout and design of webpages. Following some simple rules, a webpage can become far more accessible to others, which is ultimately the purpose of having a webpage in the first place. The first basic rule is that a simpler website is a better website and a simpler webpage is a better webpage. Websites should be organized in a clear and logical manner, with all major pages accessible from the FrontPage. Websites should be kept within the scope of activities of the site - don't include information that is not directly relevant to the topic that the site is specialized in. With regards to webpages, multiple frames, animated logos, a rainbow of colours - all these distract the user from the content of the site and are best avoided.

The next rule is to keep the bandwidth down to a minimum. Assume that you're designing a website for people in a fourth world country with a low bandwidth Internet connection (like East Timor). Avoid gratuitous use of graphics and sounds as these are very bandwidth consuming. As a general rule of thumb, try to keep at least the major pages of the website down to 30 kilobytes in size, and certainly no more than 60 kilobytes. Thirdly, where a different colored background is used, ensure that any text contrasts well with it. For example, dark blue or red text on a black background has poor contrast whereas lime green, lilac or gold on black has strong contrast. Finally, when a webpage is completed check the compatibility with the xhtml verifier (http://validator.w3.org) and on a variety of browsers (Lynx, Arachnid, Opera, Mesilla and Internet Explorer are recommended).

The structural components of an xhmtl document are a document type definition, an xhtml declaration, a head element and a body element. Elements are those commands which the document sends to the webbrowser - an element consists of an open tag and a closed tag (e.g., <html> </html>). All xhtml documents must begin with a document type definition. Following that, all xhtml code must follow four important rules. Firstly, it must be "well formed" which means that all elements must be nested within the <html>, </html> element. All elements must be properly nested, meaning that tags cannot overlap in their declaration. A tag that is declared first must close last, second must close second-last and so forth. All tags names must be in lower case, and finally, all element tags must close.

There are three types of xhtml documents; strict, transitional and frameset. These definitions define the structure, facilities, elements and attributes that are available to a particular document. An attribute is a parameter to an element that is defined in the document type that includes the attributes type and value and possible default values. An element is a unit that structures the document consisting of element tags. Facilities are the elements, attributes and meaning associated with those elements and attributes. The three types of documents are quite similar, with the most important difference being that the transitional DTD (document type definition) allows some formatting features for older browsers that the strict version doesn't provide. The frameset document type is used when one wants to partition a webpage into multiple frames. For the next few years, the transitional document type is recommended with conversion to the strict document type. The frameset document type is not recommended.

All html documents require a document type definition. Following this the next items include the html, head and body elements. The title of the document must be present inside the head. The head should also include meta tags that make it easier for the various search engines (google, altavista, hotbot etc) to find and determine the content of the website. Meta tags have no effect on what is displayed on the webbrowser.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.mfac.gov.tp">
<head>
<title>Minitsry of Foreign Affairs and Cooperation Index Page (English)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
  <meta name="maintained-by" content="Lev Lafayette, [email protected]"></meta>
  <meta name="authorised-by" content="IT Policy Advisor"></meta>
  <meta name="author" content="Lev Lafayette"></meta>
  <meta name="description" content="Ministry of Foreign Affairs and Cooperation, Democratic Republic of East Timor (English page)"></meta>
  <meta name="keywords" content="East Timor, Timur Timor, Timor Lorosa'e, Timor Leste, Foreign Affairs, Cooperation"></meta>
  <meta name="last-modified" content="2003-03-31"></meta>
  <meta name="distribution" content="global"></meta>
</head>

<body>

</body>

</html>

After determining the contents of the <head> </head> element to display anything on the webbowser body, content must be placed in the <body> </body> element. The most common type of content is paragraph and text content and formatting, tables, insertion of images, hyperlinks to other files, hyperlinks to material within the same page, and input forms. Whilst there are over one hundred different elements, this discussion is somewhat limited, but it certainly provides an introduction to most xhtml coding requirements. Formatting elements are trivially easy: <p></p> for paragraph markers, <i></i> for italic, <b></b> for bold, <h1></h1> for big header text (down to <h6></h6> for very small headers), <center></center> to centre text, <ul></ul> and <ol></ol> for unordered and ordered lists, <li></li> for list items, <hr></hr> for horizontal rule separators, <br></br> for line breaks, preformatted text with <pre></pre> and so on. Tables are a little more tricky. The key characteristics are the declaration of the table and its body (<table></table>, <tbody></tbody>), rows of the table <tr></tr>, and the contents expressed within columns as <td></td> (table data).

The insertion of images requires the declaration of the image and the location of the image source and very importantly an "alt" or alternative text declaration, e.g., <img src="image.jpeg" alt="image name"></img>. Hyperlinks to other files can be within the same server (relative) or on a different webserver (absolute). In both cases, the reference comes first followed by the link item (which may be an image or some other object), e.g., <a href="hypertextlink.html">Linkname</a>. It is worth noting that email links work as hypertext links (e.g., <a href="mailto:emailaddress">EmailAddressName</a>. Hyperlinks within the same document operate within an anchor name marker from one point a point further in the page (e.g., <a href="#AnchorName>Linkname</a> and at the link location <a name="AnchorName">Linkname</a>.

Within these formatting and linking elements there are further commands which further format the specific elements. For example, images or columns of a table can be presented with a particular size, either as absolute pixels or as a percentage of the page. A user may want characters may have a preferred font, or at least font-type. The following code, frontpage of the Ministry of Foreign Affairs and Cooperation, displays all these options as examples:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>Ministry of Foreign Affairs and Cooperation, East Timor: Index Page (English)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
  <meta name="maintained-by" content="Lev Lafayette, [email protected]"></meta>
  <meta name="authorised-by" content="IT Policy Advisor"></meta>
  <meta name="author" content="Lev Lafayette"></meta>
  <meta name="description" content="Ministry of Foreign Affairs and Cooperation, Democratic Republic of East Timor (English page)"></meta>
  <meta name="keywords" content="East Timor, Timur Timor, Timor Lorosa'e, Timor Leste, Foreign Affairs, Cooperation"></meta>
  <meta name="last-modified" content="2003-04-16"></meta>
  <meta name="distribution" content="global"></meta>
</head>

<body>
<table width="100%" border="0">
  <tbody>
    <tr>
      <td width="17%"><a href="index.html"><img src="TLlogo.jpg"
 alt="Logo" width="115" height="119"></a></td>
      <td width="83%">
      <h1 align="center"><font face="Arial, Helvetica, sans-serif">Ministry
of         Foreign Affairs and Cooperation<br></br>
East Timor</font></h1>
      </td>
    </tr>
  </tbody>
</table>

<hr></hr>

<p align="center"><font face="Arial, Helvetica, sans-serif"><a href="index.html">Index 
  Page</a> | <a href="about.html">About The Ministry</a> | <a href="travel.html">Travel 
  Information</a> | <a href="frelations.html">Foreign Relations</a> | <a href="archive.html">Document 
  Archive</a> | <a href="links.html">Links</a></font></p>
<p align="center"><font face="Arial, Helvetica, sans-serif"><a href="indexp.html">Portuguese</a> 
  | <a href="indext.html">Tetun</a> | <a href="indexb.html">Bahasa</a> | <a href="index.html">English</a> | <a href="search.html">Search</a></font></p>
<p align="center">Please note not all language links are operative at this stage</p>
<hr></hr>
<p align="center"><b><font face="Arial, Helvetica, sans-serif">Community Self Help Program In Gleno</font></b></p>
 
<p>The New Zealand Aid funded US$10,000 for the rehabilitation of Kinder Garden in Gleno. A Community Management Committee, under the auspice of the District Administration of Ermera, was set up to manage the fund.<a href="media0304.html"> More</a></p>

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Ramos-Horta Pleased With Discussions in Rome</font></b></p>
 
<p>Foreign Affairs and Cooperation Minister Dr. Jose Ramos-Horta ends his first official visit to Italy on 28 March on a "very positive note" with meetings with the Speaker of the Italian Parliament, the Hon. Pierre F.Casini, followed by a working lunch in the Ministry of Foreign Affairs, hosted by the Deputy Minister for Foreign Affairs Ms Margheritta Boniver.<a href="media0303.html">More</a></p>

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Foreign Affairs Minister Ramos-Horta Meets Vatican's Counterpart</font></b></p>
 
<p>Dr. Jose Ramos-Horta, the 1996 Nobel Peace Prize Laureate and Senior Minister of Foreign Affairs and Cooperation, met this morning in the Vatican City with his counterpart, Cardinal Tourain.<a href="media0303.html">More</a></p>

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Timor-Leste to Attend the Second Bali Ministerial Conference</font></b></p>
 
<p>Lisualdo Gaspar, Office in charge (OIC) for Regional Affairs, will leave on 26th March 2003 to Jakarta to attend the Preparatory Meeting (PREMET) of the Second Bali Ministerial Conference on People Smuggling, Trafficking in Person and Related Transactional Crimes, which will held in Jakarta on 27th March 2003.<a href="media0303.html"> More</a></p> 

<p align="center"><b><font face="Arial, Helvetica, sans-serif">Dr. Ramos-Horta to Attend the 7th Intenational Students Festival in Trondheim</font></b></p>

<p align="left">The Senior Minister Dr. Jose Ramos-Horta, Minister for Foreign Affairs and Cooperation, Nobel Peace Price Laureate will be attending the 7th International Students Festival in Trondheim  (ISFiT) Oslo Norway, on 13th and 14th of March 2003.<a href="media0303.html"> More</a></p>

<p></p> 
<hr></hr>

<p><center>Ministry of Foreign Affairs and Cooperation, GPA Building #1, Ground Floor, Dili, East Timor</center></p>
<p><a href="http://validator.w3.org/"><img src="valid-xhtml10.gif" alt="valid XHTML 1.0!" width="96" height="32"></img></a>
   <a href="http://www.anybrowser.org/"><img src="enhanced.gif" alt="use any browser!" width="96" height="32"></img></a></p>
<p>Site scripted by <a href="mailto:[email protected]">Lev Lafayette</a>. Last update May 6, 2003</p>
</body>
</html>

Some special characters in xhtml that a user should be aware of include the following: © for the copyright sign, ™ to the trademark sign, < for the less than sign, > for the greater than sign, & for the ampersand (&), and a number from the Latin-1 character set, including, á Á é É í Í ó Ó ñ Ñ õ Õ for á, Á, é, É, í, Í, ó, Ó, ú, Ú, ñ, GĬ õ ,Õ. Comments are expressed by <!-- comments here -->.

One method to standardize formatting across a website is Cascading Style Sheets (CSS). These are preset styles that define how xhtml elements are displayed. They are stored independently of the actual webpage which links to the css files. They are so-named because multiple style definitions "cascade" into one, according to the browser default, the external style sheet, the internal style sheet (inside the <head> element) and finally the inline style (anything else inside the <html> tag. In general it is much better however to have only one style sheet per website, which can be achieved through careful design.

External stylesheets are linked in an xhtml document within the <head> element with the <link> element, with"rel" and "type" attributes, e.g., <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>. Stylesheets can be written in any text editor and should not contain any html elements. They must be saved with the file extension .css. Internal style sheets by comparison, exist within the <head> element and are marked by the beginning and end of the <style> element. The element opens with a type="text/css" attribute. Inline style are invoked as an attribute to an element (e.g., <p style = "color: green"></p>. Their use is not recommended as they confuse presentation with content.

Cascading style sheets are made of a selector, a property and a value. Selectors are the html elements that are to be defined, e.g., <p>, <body> or, properties are the attributes of the element being defined, e.g., font or text-align, and values are the information parsed to the property, e.g, "sans serif" or "black". The property and value are separated by a colon and surrounded by curly brackets e.g., p {text-align : "left"} or body {background : black} . Multiple values can be ascribed to properties with a semicolon separating them. Multiple selectors may be grouped with each separated by commas. For example, the following is the set of header elements being displayed as centered and red: h1, h2, h3, h4, h5, h6 {color : "red", text-align : "center"}

Multiple styles may be determined for each element through the class selector, which defines a new html attribute. Obviously, an html element cannot have two classes at the same time - text in a paragraph cannot be aligned to the left and to the center at the same time! Class selectors are noted by adding a ".classname" to to the selector (e.g., p.right) and noting the class in the xhtml script as an attribute (e.g., <p class="right"></p>. The html attribute is actually optional - one could, for example, declare ".center" in a CSS and thus have all "class=center" html attributes centred. In comparison, whilst the class selector applies to several elements on a page, the id selector applies to one element only. It is defined in the style sheet by a "#idname" to the selector (e.g., #heading {color : "red"} and in the webpage as an attribute (e.g., <h1 id=heading>Red Header</h1>.

Finally, in relation to CSS, there are also "pseudo-classes". These are declared as selector:pseudoclass {property: value}. One useful example is their use as anchors that change the colour of text when a mouse moves over the text e.g., a:link {color: blue}, a:visited {color: green}, a:hover {color: red}, a:active {color: gold}. Note that a:active must come after a:hover and a:hover must come after a:link.

Forms in xhtml, dynamic webpages and webscripting languages are all related. Forms allow users to enter data, when is then sent to the server and processed by a Common Gateway Interface (CGI) program or script. Thus, the webpage becomes dynamic, that is, its content and presentation changes according to data processed by the CGI program, which then outputs the information back to the webserver. The xhtml elements relating to forms include <form></form>, which opens and closes a form and includes the attributes action, method and enctype', <input></input>, which defines an input field and includes the attibutes name, type, value, checked, radio, size, maxlength, submit, reset <select></select> which defines a selection list with the attributes name, multiple and size, <option></option> within a <select> defining an selection list selection and with the attribute selected and <textarea></textarea> defining a text-input window with the attributes name, rows, cols.

A very simple example comes from the Ministry of Foreign Affairs website:

lt;form method=get action="http://www.google.com/search"gt;
lt;pgt;Search the Ministry of Foreign Affairs and Cooperation using the Google search engine:lt;brgt;lt;/brgt;
lt;input type=text name=q size=40 maxlength=255 value=""gt;lt;/inputgt;
lt;input type=submit balue="search Ministry of Foreign Affairs and Cooperation"gt;lt;/inputgt;
lt;input type=hidden name=domains value="www.mfac.gov.tp"gt;lt;/inputgt;
lt;input type=hidden name=sitesearch value="www.mfac.gov.tp"gt;lt;/inputgt;lt;brgt;lt;/brgt;
lt;a href="http://www.google.com/advanced_search?site:www.mfac.gov.tp&hl=en&lr=&safe=off&domains=www.mfac.gov.tp&sitesearch=www.mfac.gov.tp"gt;Advanced Searchlt;/Agt; lt;/pgt; lt;/formgt;

Because a CGI program is executable, it basically is the equivalent of letting a program run on the client machine, which is sometimes a security risk. CGI programs can be written in any of the popular programming languages available including C/C++, Visual Basic, PERL or AppleScript. Later in this chapter there is a discussion on the two most common programming languages available today, C and Visual Basic.