HTML Tutorial

(Written by David Martin)

For the writeups, my only requirement is that you hand in HTML that I can (1) view on my computer, and (2) print in a reasonable manner. You may use any word processor or HTML authoring software that can generate HTML documents.

My personal preference is simply to write the HTML using a text editor. For example, here is an example project writeup that you may use as a template.

If you are just learning HTML, first print out the HTML source for the template. To do this, navigate to it using your browser, and either ask the browser to "View Source" or save the page to your computer and open it in a text editor. The file is called "index.html", and should begin as follows: 

<html>
<head>
</head>
<body style="width:750px;">

<h3>
CS342 Computational Photography / Fall 2007 / Prof. Martin<br>
Project Name<br>
.
.
.

You'll see that HTML "code" is mostly normal text, with some formatting commands in angle brackets. These formatting commands are called tags. For example, the text for the page is entirely inside the "<body>...</body>" tags.

Formatting Text

Begin every new paragraph with "<p>". If you need to force a line break, use "<br>".

In the template, you'll see that the header text for the page is within the "<h3>...</h3>" tags. You can use any of the header tags (h1,h2,...h6) to define section headers of various sizes.

To create an automatically numbered ordered list of items, use the "<ol>...</ol>" tags, and begin each list item with a "<li>" tag. You can control the type of numbers used with a parameter to the ordered list tag, e.g. "<ol type=a>...</ol>".

Displaying Images

To include an image in your writeup, use the following HTML command:

<img src="imageName.png">

where "imageName.png" is in the same directory as your "index.html" file. If your image is in a subdirectory, then include the path:

<img src="someSubDir/anotherSubDir/imageName.png">

If your image is too large, then make sure to set its width (or height):

<img width=300 src="someSubDir/anotherSubDir/imageName.png">

If you also want to link to the original high resolution image (which you may as well always do), then wrap the "img" tag in an hyperlink tag:

<a href="someSubDir/anotherSubDir/imageName.png">
<img width=300 src="someSubDir/anotherSubDir/imageName.png">
</a>

Special Characters

Because HTML uses the less than sign to begin a tag, you need to use a special command to generate a less than sign. This command is "&lt;".

Likewise, because HTML uses the ampersand to begin the command for a special character like less than, use the following command to generate an ampersand: "&amp;".

Equations

HTML is really bad for typsetting mathematics. For this class, any homework problem that requires you to write equations can be submitted on paper. If you want to use typeset equations, then you have a few options. First, you can simply use plain text, such as MATLAB syntax. Second, you can supplement plain text with the few equation commands that exist in HTML (explained more below). And third, you can generate the equations as images using some other program. This last option is what sites such as Mathworld use. If you have a Mac, I recommend any of the following great little tools: LaTeX Equation Editor, PDF Equation, or LaTeXiT.

That there are a couple of HTML commands that help with simple equations. Here are some examples:

Here is a more comprehensive list of HTML commands for both greek letters and math symbols.

More Information

Want to learn more? I've discussed only a few HTML commands here. There are many more commands available, all of which you may use, and none of which you need to use. The web is well populated with HTML tutorials. I find http://www.htmlcodetutorial.com to be a particularly useful reference for HTML tags. Also check out the course links webpage.