Introduction to HTML

HyperText Markup Language (HTML) is the markup language in which World Wide Web hypertext documents are written.

It should be noted that HTML is designed to specify the logical organization of a text document - not the visual appearance. It also provides important extensions for hypertext links and user interaction. HTML was specifically designed not to be the language of a WYSIWYG (What You See Is What You Get) word processor.

Instead HTML requires that you construct your document in terms of logical units, such as headings, sections, paragraphs, lists and so on. The interpretation, and method of display, of these logical elements is left up to the browser that views the document.

This approach offers great flexibility:

We do not need to know what readers of the HTML document will have available to them for viewing the document, what size their browser window will be, the fonts they are using, or indeed whether they are using a plain text terminal or a graphics terminal.
An HTML document is simply a text file (constructed using, say emacs or vi or MATLAB's editor) that is organized into logical components using markup tags. These tags are the instructions to the browser that indicate what each part of the document means.

Here is an example of an HTML file, and to its right is what it looks like in a web page. The main HTML file in your directory would typically be called index.html as this is the file a browser will try to open by default within a directory.


  <HTML>                  <!-- indicates that this is an HTML document -->
  <HEAD>                  <!-- The head contains information about the document.
                               Here we only provide title information -->
  <TITLE> This is the title of the document </TITLE>
  </HEAD>                 <!-- End of HEAD block -->


  <!-- Now for the body of the document, here we can specify the background 
       colour and the colour of visited links -->
  <BODY  BGCOLOR="#ffffff" VLINK="#ff0000"> 

  <H1> A Sample of HTML </H1>   <!-- a level one heading -->

  <P> This is a paragraph that is not very exciting.

  <P> This is another paragraph. 
  
  <H3> This is a level 3 heading, you can go down to level 6 </H3>

  <P> Now we will have an unordered list.

  <UL>
  <LI> Item one in the list.
  <LI> Item two <LI> Note that the format     of 
   the 
      source document
  is irrelevant, the browser is only concerned with the tag information.
  <LI> Though you can force<BR>
  line<BR> breaks<BR> manually.
  </UL>

  <OL>                  <!-- The start of an ordered list -->
  <LI> The first and 
  <LI> second items in this ordered list
  </OL>

  <HR>                             <!-- A horizontal line -->
  <P> You can draw horizontal lines.

  <PRE>
  This text is displayed exactly
  as 
        formatted in the source document using a constant width font 
    - this is the best way to display source code. 
  </PRE>

  <A HREF="http://www.cs.uwa.edu.au">Click here to go to the CS home page </A>
  <BR>
This link will take you to  <A HREF="xcylinder.m">
      xcylinder.m </A> in the same directory as this document


  <P>
  <IMG src = "robot1.gif">    <!-- This is how you insert an image -->

  <center>
  <IMG src = "robot1.gif">    <!-- This is how you centre something -->
  <P> Robot image centred
  </center>


  <p> Now for a table of robots

  <table>
  <tr>       <!-- start of table row  -->
  <td>   <IMG src = "robot1.gif">   </td>  <!-- 1st element of the row -->
  <td>   <IMG src = "robot2.gif">    </td> <!-- 2nd element of the row -->
  <td>   <IMG src = "robot1.gif">    </td> <!-- 3rd element of the row -->
  </tr>
  <tr>      <!-- start of next table row (and end of the previous one) -->
  <td>   <IMG src = "robot2.gif">   </td>
  <td>   <IMG src = "robot1.gif">   </td>
  <td>   <IMG src = "robot2.gif">   </td>
  </tr>
  </table>  <!-- End of the table -->

  </BODY>  <!-- End of the body of the document -->
  </HTML>  <!-- End of HTML -->

A Sample of HTML

This is a paragraph that is not very exciting.

This is another paragraph.

This is a level 3 heading, you can go down to level 6

Now we will have an unordered list.

Item one in the list.
Item two
Note that the format of the source document is irrelevant, the browser is only concerned with the tag information.
Though you can force
line
breaks
manually.

The first and
second items in this ordered list

You can draw horizontal lines.

  This text is displayed exactly
  as 
        formatted in the source document using a constant width font 
    - this is the best way to display source code.

Click here to go to the CS home page
This link will take you to xcylinder.m in the same directory as this document

Robot image centred

Now for a table of robots

Note that it is optional to close paragraphs and list items with corresponding </P> and </LI> tags. These logical units are implicitly closed by any subsequent tag that indicates the start of another block of text. This also applies to the <tr> and <td> tags. Note also that the tags are not case sensitive. Thus, <bOdY> is equivalent to <BODY>

Note that images can be in gif, png or jpeg format. Unfortunately MATLAB does not support reading and writing of gif images. You can convert images from one format to another using xv's save as option.

Saving Images and Plots From MATLAB

Images can be written to disk using the command

  imwrite(im,'filename.jpg');  % The image format is inferred from the ending

A plot or composite figure can be saved as an image or as a postscript file. Assuming the plot you want to save is in `Figure 2' you can do the following:

  figure(2);                  % Set the current figure to `Figure 2'
  print -djpeg filename.jpg   % Saves current figure as a jpeg image
  print -dps filename.ps      % Saves current figure as a postscript file

Do a `help' on these two commands for more details

One learns HTML by example. Simply look for a document that contains a layout that you like and choose [View, Page Source] from the browser's menu bar to see the source of document. The quality of the new HTML editors (eg Netscape Composer) means that increasingly one can avoid working directly in HTML. However, it is often important for you to understand the principles behind HTML in order to use these editors really effectively.

Normally web pages reside in your WWW directory and would be publicly accessible. However, until the assessment has been completed you should construct and keep your portfolio web pages within a private directory (say called Portfolio) within your working area. To access your portfolio pages you can use the
[File, Open Page..., Choose File...] menu sequence in your browser.

There is plenty of on-line documentation about HTML. Check out http://www.cs.uwa.edu.au/WWWinfo/html_overview.html for a start.