Beginner's Guide to HTML

This is intended as a concise introduction to very basic HTML programming for the purpose of generating simple web pages. Detailed explanations, tutorials and more advanced guides to HTML are available from the W3C website and elsewhere on the web, or visit your local bookstore for a handy reference. Another good way to learn is by example: if you see a page you like, right-click on the page and select "View Page Source" to see the underlying HTML that created it (this only helps if the page is cleanly scripted). As an example, view a simple HTML page with all the basics.

HTML documents are written in ascii (plain-text) and can be created using your favourite text editor (e.g. Emacs, vi, Notepad, SimpleText). If you are using word-processing software, be sure to save your document as "text only with line breaks".

Example markup is shown below in red, and the results are generally shown in green. Note that the tag contents are case-insensitive.

Contents:

Page essentials:

  1. The first line must be one which tells the browser that it is looking at an HTML file:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. All documents must then begin with the <HTML> tag, and end with the </HTML> tag. ALL of the document source goes between these tags.
  3. Every document should include a header. This header can include a document title (which appears on the top bar of most browsers) and various other items that we won't go into here. Include the following after the opening <HTML> tag of your document and enter whatever page title you want:
    <HEAD>
    <TITLE>This is my page title</TITLE>
    </HEAD>
  4. Next, start the body of the document with a <BODY> tag, and end it with a </BODY> tag. All of the content (text, images, etc.) of your document should go between these body tags.
You can specify certain page decorations in the opening body tag, such as background image or colour, font colour, margins and so on. For example:
<BODY background="bgimage.gif" bgcolor="#DDDDDD" text="black" link="blue" vlink="red">
would set the background image to be bgimage.gif (tiled), the background colour to light gray (#DDDDDD), text to black, links to blue and visited links to red.

--- Top ---

Headings:

Headings can be specified on a page by surrounding them with the appropriate header tag, as shown below. Font sizes may vary, depending on your local setup.

--- Top ---

How to centre:

Simply enclose the item in <CENTER> and </CENTER> tags (note the spelling). You can do this to an entire document, a single paragraph, table or heading.

--- Top ---

Spaces, line breaks and paragraphs:

--- Top ---

Example of a Basic Web Page:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>A Basic Web Page</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>My Web Page</H1>
</CENTER>
<P>Welcome to my very basic web page.
Here is my first paragraph.</P>
<P>And here is my second paragraph.</P>
</BODY>
</HTML>

Copy the paragraph above into a file called index.html, and view the file using your browser to see how it looks.

--- Top ---

Text Decorations and Colour:

To add emphasis to words: Font tags (note that you can combine colour and size settings in a given tag):

--- Top ---

Special Characters:

<, >, and & have special meanings in HTML, so you must use the following escape sequences to enter these characters. Some other useful special characters are also shown below. Note that these are case sensitive!
  • <  &lt;
  • >  &gt;
  • &  &amp;
  • ±  &plusmn;
  • ×  &times;
  • ÷  &divide;
  • ˜  &tilde;
  • é  &eacute;
  • ¢  &cent;
  • µ  &micro;
  • °C  &deg;C
  • Å  &Aring;
  • x²  x&sup2;
  • y³  y&sup3;
  • §  &sect;
  • ¶  &para;
  • ©  &copy;
  • ®  &reg;
  • ™  &trade;
  • –  &ndash;
  • —  &mdash;

Warning: Some older browsers (e.g. Netscape 4) may not render some of these characters correctly.

--- Top ---

Lists of Various Kinds:

--- Top ---

Simple tables:

Here is an example of a 2 column by 3 row table:
<TABLE>
<TR> <TH>Student</TH> <TH>Grade</TH> </TR>
<TR> <TD>Jack</TD> <TD>70%</TD> </TR>
<TR> <TD>Jill</TD> <TD>82%</TD> </TR>
</TABLE>

would appear as follows:

Student Grade
Jack 70%
Jill 82%

More table features:

<TABLE bgcolor="#BBBBBB" border="1" cellpadding="10" width="60%">
<TR bgcolor="#999999" align="center">
   <TD>Student<br> Number</TD>
   <TD>Assignment Mark<br> (40)</TD>
   <TD>Exam Mark<br> (60)</TD></TR>
<TR> <TD>555-1234</TD> <TD>36</TD> <TD>50</TD> </TR>
<TR> <TD>555-5678</TD> <TD> </TD> <TD>34</TD> </TR>
<TR> <TD>556-9912</TD> <TD>29</TD> <TD>48</TD> </TR>
</TABLE>

would appear as follows:

Student
Number		 Assignment Mark
(40)		 Exam Mark
(60)
555-1234 36 50
555-5678   34
556-9912 29 48

Additional table tips:

--- Top ---

Links:

To link to another web page, surround a relevant piece of text with a link tag as follows:
<A href="http://www.google.ca">Google Search</A>
results in the link
Google Search
Don't forget the quotes around the URL (href=""). These tags are also called "hyperlinks" or "anchors".

If you are linking to a local file, you don't need the http://www.webpage.com part, but you should include the absolute path to the HTML file (this depends on how your web server is set up). If in doubt, precede the file name with http:// and the complete URL as shown above.

--- Top ---

Embedded Images:

<A href="http://www.physics.queensu.ca/"><IMG src="stirling.gif" alt="Stirling"></A>

gives

Stirling

--- Top ---

A Few Tips:

--- Top ---

Now What?:

So, now you have enough to make up a simple HTML page. See our sample for a complete example. Now what do you do?

Your file should have a .html extension: name your front web page index.html, for example. You need to make the document and any of its embedded images accessible from a web server (a computer which "serves up" web pages) within a directory which can be read by the general browsing public. This may be a directory called public_html on the Physics web server (or your group's). You should contact your system administrator for instructions about this.

By the way, you can make separate web pages for things like research, teaching, and photos of your kids. Give each HTML page a .html extension (e.g. research.html) and link to them as specified above.

More about building a local website

More about HTML from W3C

--- Top ---