Notes for a basic HTML lesson

References

Key Concepts

HTML files consist only of plain printable text and thus can be created with any text editor or wordprocessor.

There are WYSIWYG editors which allow you to design HTML pages without learning the HTML language. If you find such an editor you like then use it but learn the language first!

All HTML files can be created and tested on your personal computer before transfering them to the WWW server.

All the major browsers allow you to look at the source (HTML) that was used to create that page. Therefore one way of finding out how to achieve a particular result is to find some other page that has what you want and "view the source".

HTML was designed to be a machine and software independent method of publishing on the WWW. As such the page design tags generally specify the "style" rather than the specific implementation. For example, you specify a certain type of heading using the <h1> tags instead of choosing a 24 point character size. Exactly how big and what font is used to display a particular heading can and most likely will be different on different computers and with different browsers.

HTML is intentionally a minimal definition. A comprehensive and complicated page layout language, of which there are many possible contendors, would have made writing browsers for each hardware platform difficult.

The browser manufacturers have introduced HTML tags unique to their product and not part of the standard. Don't use those tags! Generally tags not supported on a particular browser are just ignored.

Minimal HTML document

   <html> 
   <head> 
   <TITLE>A title goes here</TITLE> 
   </head> 
   <body bgcolor="#ffffff"> 
   The content of the document goes here
   </body> 
   </html>

Most Commonly Used Formatting Tags

Headings <h1> <h2> <h3> <h4> <h5> <h6>
Line and paragraph break<br> <p>
Emphasis (bold)<strong> <b> </b> </strong>
Horizontal rule<hr>
Center<center> </center>
Anchor (links)<a href="aurl"> </a>
Images<img src="apicture.gif">
Preformatted Text<pre> </pre>
Font<font size=+1 color=#ff0000"> </font>
Unordered list<ul> <ll> </ul>

Specific Examples

Links
Links to other HTML documents can be either relative or absolute. Relative requires that the linked page resides on the same server, for example, a relative link to a page on this server is
<a href="../../index.html">
An absolute links specify the whole URL starting with "http://. A link to the same page as the last example is
<a href="http://astromony.swin.edu.au/pbourke/">
Links to remote servers must be absolute.
Links can also be made to email addresses as follows
<a href="mailto://paul@bourke.gen.nz">

Images
Images are typically stored on the WWW server as either "gif" or "jpeg" files, these two formats can be automatically displayed using all the prevalent browsers. As with links the specification of the location of an image may be absolute or relative. For example, to include the image shown at the bottom of this page
<img src="http://www.mhri.edu.au/~pdb/internet/htmllesson.gif">
or as a relative reference
<img src="htmllesson.gif">

Tables
Tables are about as hard as things get in HTML. The three basic tags for creating tables are

Each of these has many options, a few will be explained in the following example which has the HTML on the left and the resulting table on the right.
<table border=1 width=40%><tr><td width=50%>
Row 1 Column 1
</td><td width=50%>
Row 1 Column 2
</td></tr><tr><td width=20%>
Row 2 Column 1
</td><td width=50%>
Row 2 Column 2
</td></tr></table>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Color Specification

Colour is specified as the combination of 3 components, red, green, and blue. Each component is 2 digits in hexadecimal notation (a bit of historical computer lingo) ranging from 00 to ff. 00 is hexadecimal for 0, ff is hexadecimal for 255, counting proceeds 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
Examples
#000000 (Black)
#ff0000 (Red)
#00ff00 (Green)
#0000ff (Blue)
 #777777 (Grey)
#ffff00 (Yellow)
#00ffff (Cyan)
#ff00ff (Magenta)

Definitions

WWW Server
World Wide Web Server. A combination of software and hardware running on a computer connected to the Internet. The server software communicates with remote client (user) browser software enabling the user to view HTML documents amoung other things.

WWW browser
Software running on a client (users) computer which communicates with a remote WWW server. It retrieves and displays HTML files amoung other things. The two most prevalent examples are NetScape and MSIE.

HTML
HyperText Markup Language. A formatting language which describes the layout of pages published on the WWW.