Introduction to HTML - Free U 2005

I wrote this tutorial when I taught a Free University class during Winter Study in January 2005. There are lots of exhautive HTML tutorials available on the Internet, but when you're learning to write HTML, you don't need to know all that. The basics, in my opinion, appear in chapters 1-9. The sections after that are neat things that are less frequently useful. If you are only interested in blog posting, not in making an entire page from scratch, skip sections 1-3.

Note: When I give examples of how your code should look, my tags have spaces in them, like this: < pre >. This is because if I do it without spaces, your browser interprets it as a tag, and does whatever the tag tells it to do, rather than showing you the tag itself. When you type tags, or if you copy-paste code from this page to your page, make sure you don't have those spaces!

Table of Contents:
1. Basic knowledge
2. Using a text editor
3. Starting a page
4. Simple style and formatting tags
5. Text alignment
6. Using the "font" tag
7. Hyperlinks
8. Images
9. The pre tag
10. Music and videos
11. Tables
12. Calculations
13. Anchors
14. Building more knowledge

1.1 Basic Knowledge

So you want to write your own Web page, or you want to spice up your blog posts, so you've decided to learn HTML. What does that mean? Here are a few things you should know before you get started.

1.2 HTML

HTML stands for Hyper Text Markup Language. Markup language means that the coding you write affects the appearance of the text, but it doesn’t do anything else. For instance, you can make text big, or bold, or blue, or centered – but you can’t make things move, and you can’t calculate anything (calculation requires putting Javascript code into your HTML, which you will learn below). If you could do those things, it would be more of a programming language.

1.3 Tags

Most of the "coding" you will learn will be in the form of HTML tags. Tags are markers you insert around text to change its appearance. Tags use these symbols: < > with letters between them. If you scan through this document, you will see plenty of tags.

1.4 HTML is a language

And it comes from English. Thus, each time you learn a new tag, I will tell you why the tag has that name. I hope that this will help you to remember the tags, so that it you will be learning how to make a Web page, not just memorizing lots of disconnected symbols.

2. Using a text editor

To write a page in HTML, you only need to use a simple text editor, the simpler the better. Under the Windows OS, you can use Notepad or Wordpad, which you can find in Start > Programs > Accessories.

2.1 Wordpad

When you open up Wordpad, go to File > New… When it asks you to select the document type, select "Text Document." You will notice that some of the toolbars at the top disappear, because you don’t have as many formatting options with just a text document. That’s fine. If you ever copy-paste any text into your Web page document in Wordpad, then the next time you save, it will ask you: "You are about to save the document in a Text-Only format, which will remove all formatting. Are you sure you want to do this?" You should say yes. If this happens multiple times and gets annoying, just close the document and open it up again, and it won’t ask you anymore.

2.2 Notepad

Notepad is simpler to use than Wordpad because the only option is a text document, so you never have to worry about anything in the previous paragraph. It is a much simpler program, and does fewer things. When you begin learning to write HTML, I would recommend using Notepad. The only thing that makes Notepad somewhat preferable is that if you want to open a file you were recently working on, it is right in the File menu, so you don't have to go through Open and then browse to find it.

Important! For both text editors, you must save your page as something.html to turn it into a Web page. If you forget to put the .html, it will just be a text document, so you must always remember .html.

When you are learning HTML, it is good to try out everything you are learning. I have found it very useful to have both my Notepad HTML document and a web browser (i.e. Internet Explorer, Firefox) open when I am writing a page. If you open your HTML document in the browser, then every time you make a change to the Notepad document, you can refresh the Web page and see the change you made. This makes it easy to detect errors, and it capitalizes on the instant gratification of the Internet.

3. Starting a page

When you begin a page in HTML, you must put two important things at the top of your file:

3.1 < HTML >

3.2 < TITLE >Why I Love Williams College< /TITLE >

The title is the single most important element in Google’s ranking. If the title of your page is Why I Love Williams College, then it is much more likely to come up when someone searches for that than if your page discusses why you love Williams College but you don’t make it the title.

Note: Neither of these tags (or any tag at all for that matter) is case-sensitive; you can write < HTML > or < html > and < TITLE > or < title >; it makes no difference whatsoever.

4.1 Simple style tags

Here is a table of the simplest tags, what they do, and an example of the result.

Bold	< b >This< /b> is bold.	This is bold.
Italics	< i >This< /i> is italicized.	This is italicized.
Underline	< u >This< /u> is underlined.	This is underlined.
Strikethrough	< strikethrough >This< /strikethrough> was bad.	This was bad. (Some browsers may not support strikethrough.)

You will notice that to use a tag, you essentially "turn it on" before you want it by using the tag, and then "turn it off" by using the same tag, but with a slash before the letter. This is the way all tags work. As you can see, it is important to remember the tag to "turn it off." If you don’t remember to type < /b>, your whole page from then on will be bold.

4.2 Simple formatting tags

Here are some more simple tags that you will probably use even more than the ones above:

Line break	Here is < br > another line	Here is another line
New paragraph	Here is < p > another paragraph	Here is another paragraph

4.3 Block quotes

If you want to quote from something that is more than a sentence or two, or if you want it to be set off from the rest of your text, use the < blockquote > tag. Within a block quote, you can use the < br > and < p > tags just as you would elsewhere.

Here is a poem:
< blockquote >Here I am -- I go to Williams: land of mountains, fields, and trees,< br >
Where the smog and smoke of cities never interrupts the breeze;< br >
Where our uniforms are purple and we proudly sport the cow;< p >
Where for discussions, nineteen is the most that they allow;< br >
Where my lecture class is fifty; my professor knows my name,< br >
And everyone I meet seems genuinely glad they came.< /blockquote >
And here is a paragraph:
< blockquote >It isn't that your classes and papers, your theses and sports teams, are unimportant. They do matter. But finding a soulmate to grow old with, someone to bear your children and ease your suffering, someone to give your life meaning and your work purpose --- this is a much more important task than raising that GPA enough to make cum laude.< /blockquote >
That is all for now.

Here I am -- I go to Williams: land of mountains, fields, and trees,
Where the smog and smoke of cities never interrupts the breeze;
Where our uniforms are purple and we proudly sport the cow;

Where for discussions, nineteen is the most that they allow;
Where my lecture class is fifty; my professor knows my name,
And everyone I meet seems genuinely glad they came.

It isn't that your classes and papers, your theses and sports teams, are unimportant. They do matter. But finding a soulmate to grow old with, someone to bear your children and ease your suffering, someone to give your life meaning and your work purpose --- this is a much more important task than raising that GPA enough to make cum laude.

5. Text alignment

The default alignment is left, but you can also align it on the right, or in the center. To do this, use the following tags:

< p align="left" >
< p align="right" >
< p align="center" >

< p align="right" >This is on the right< /p >
< p align="center" >Now it’s in the center< /p >
Now it’s back on the left, because that’s the default

This is on the right

Now it’s in the center

You don’t always have to turn it off; you can override something that’s already on:

< p align="right" >This is on the right
< p align="center" >Now it’s in the center< /p >
Right alignment is still on< /p >
Back on the left again

This is on the right

Now it’s in the center

Notice that anytime you use the < /p > tag, or the < p > tag from section 4, it makes another paragraph by moving the text down by two lines. One way to avoid that is to use < center >:

< center >This is in the center< /center > Not anymore, and only one line down!

Oddly enough, this only works for center, not for any of the other alignments.

You can also make justified text, using < p align="justify" >. If you have less than a full line of text, it is indistinguishable from left alignment, but if you have a paragraph of text, justifying makes the text line up with both edges of the page. If you resize your browser window when there is justified text on the screen, it will move more than left-aligned text in order to stay even with both edges (try resizing this browser window to see the effect). This paragraph is justified, to give you an idea of what justifying does, but the rest of this document is not.

6. Using the "font" tag

Just as in a word-processing program, you can make text in different fonts, sizes, and colors. In HTML, you use the font tag, which you can use to change (at least) three different attributes:

Font "face": This is what we would normally refer to as the "font." Most standard fonts are available; make sure that you put them in quotation marks.

Sizes: Note that font sizes on the Internet are different from the ones that you are used to in Microsoft Word. The default size is 3, while 1 is extremely small and 5 is title-sized; the sizing stops at 7 (if you specify a font larger than this, it will come out size 7.) Size 5 is big enough.

Colors: For standard colors like blue, red, green, purple, and others, you can just write the word. For other colors, you use the "hex code." This is a six-digit (hence "hex") code where each digit is either a number or a letter between A and F. In ascending order of amount of a color specified, it goes 0123456789ABCDEF. The first two digits specify the amount of red, the second the amount of green, and the third the amount of blue. So if you wanted red, you’d put < font color="FF0000" > and blue would be < font color="0000FF" >. Of course, for red and blue you could just type the words, but with hex code you can get just about any color you want.

You can change several attributes at once, like this:

< font face="Comic Sans MS" size="5" color="blue" >Hi.< /font >

< font face="Comic Sans MS" >< font size="5" >< font color="blue" >Hi.< /font >< /font >< /font >

Hi.
and
Hi.

Notice, though, that in the second method, you turn off the font three separate times. The first turns off the color, the second turns off the size, and the third the "face": The first one to get turned off is the last one you turned on. Look at the following examples:

(a) < font face="Comic Sans MS" >< font size="5" >Learning HTML< /font > is fun.< /font >

(b) < font size="5" >< font face="Comic Sans MS" >Learning HTML< /font > is fun.< /font >

(c) < font face="Comic Sans MS" size="5" >Learning HTML< /font > is fun.

 (d) < font size="5" face="Comic Sans MS" >Learning HTML< /font > is fun.

In examples (a) and (b), the order of the font tags matters, because it allows you to change different attributes of the font. But in (c) and (d), the order makes no difference.

7. Hyperlinks

Linking to another page is easy, and uses a slightly different tag.

Here is < a href="http://www.williams.edu" >my college< /a > where I am learning HTML.

Now if someone clicks on the words "my college," they will go to the Williams home page. Whichever words you want them to click on, you put the tags around those words. Simple!

In case you are wondering, "href" probably stands for "hyperlink referral," though I’m not sure.

If you are linking to another page on the same site, you don’t need the whole URL. For instance, this page is hosted on the site http://wso.williams.edu/~ddavis and this page is called http://wso.williams.edu/~ddavis/html_1.html. If I want to link to the page http://wso.williams.edu/~ddavis/html_2.html, I can do this:

< a href="http://wso.williams.edu/~ddavis/html_2.html" >Here is page 2< /a>

< a href="/html_2.html" >Here is page 2< /a>

More about hyperlinks: You don’t technically need the quotation marks around the URL. It works just fine without them, because Internet browsers are written to be forgiving about errors in page coding. But you’re supposed to, so it’s best to get into the habit of using them.

If you choose not to use quotes, though, you must be consistent. If you do this:

< a href="http://wso.williams.edu/~ddavis/html_2.html >Here is page 2< /a>

< a href=http://wso.williams.edu/~ddavis/html_2.html" >Here is page 2< /a>

If you happen to be writing a page that references another file on your computer – and you can do that, so long as you don’t expect it to work when you put it on the Internet – you must have quotes. For instance, the following is a fine way to link to another page on your computer:

< a href="file:///C://My%20Documents/html/purplecows.html" >Purple cows< /a>

7.2 Fun with links

Links are arguably the most fun part of creating a page. The default is for hyperlinks to be blue and underlined if you haven't visited the page they link to, and maroon and underlined if you have. You are probably very familiar with these styles, and maybe you thought they couldn't be changed. But they can! You will notice that on this page, links are maroon and not underlined, and when you hold your mouse over them, they become underlined. Look at the source code for how this works; again, it won't show up on the page (like the Javascript in the computing section).

I have put it in this section so that you can find it in context, but usually you would put it at the top of your document so that it could be found easily, so I put it there too. (If you don't look at the source code, nothing I say next will make any sense.)

A { color:green sets the color that the link will be normally, while text-decoration:none tells the browser that it should not be underlined or anything of that sort.

A:hover { color:red sets the color that the link will be when you hold your mouse ("hover") over it, and text-decoration:underline tells the browswer that when your mouse hovers over the link, it should become underlined.

A:active sets what the text will look like when you are pressing on the link. Hold down the mouse button when you are clicking on the link, without releasing it, to see how this works.

Go to top

8.1 Images

Suppose that you have found a picture of a cow on the Internet at the address called http://www.williams.edu/athletics/images/cow.gif. You can put it on your page like this (or better yet, upload it to your own site and then reference it from there, because referencing it from williams.edu is called "remote linking" and is essentially stealing bandwidth from Williams College):

< img src="http://www.williams.edu/athletics/images/cow.gif" >

Then there will be a picture of a cow on your page. In case you are wondering, "img src" stands for "image source," because you are telling the page where to get the image from. There are two types of images in widespread use: JPEG, such as cow.jpg, and GIF, such as cow.gif. JPEG stands for "joint photographic experts group," and GIF stands for "graphic interchange format." Photos are generally JPEGs, and icons or graphics like this cow are GIF (though there is some crossover). If you want to put a caption under your picture, you can probably guess how:

< img src="img src="http://www.williams.edu/athletics/images/cow.gif" >
< br >This is a cow.

As above, you can just type < img src="/cow.gif" > if you are putting your image on a page on the site http://www.williams.edu/athletics/images. The entire discussion about quotes applies here, too: You don’t need them for your page to function, but you should have them; you can’t use one and not the other, and you need them if you’re doing things within your computer.

To be perfectly correct, you must include the width, height, and alternate text to display if the picture is unavailable:

< img src="img src="http://www.williams.edu/athletics/images/cow.gif" width="111" height="87" alt="Cow" >

That looks exactly the same, but it conforms to the standards for HTML. This is what happens if the picture is unavailable and the "alt" text is used:

Note that the width and height are still specified, so that a correctly-sized box appears.

8.2 Changing the image size

Sometimes, you might have a picture that is exactly the size you want to display on your page. But more often than not, you will want it to be a different size than it currently is. Rather than editing the picture in Photoshop, you can just specify how big you want it to be when you put it on the page.

Suppose that instead of the size we saw above, you want your cow to be small, say only 40 pixels wide, but in the same proportions. Then do this:

< img src="http://www.williams.edu/athletics/images/cow.gif" width="40" >

To get an idea of how many pixels wide you want your image to be, you can right-click on the image and select the bottom option, "Properties." This will tell you how many pixels comprise its current height and width. For instance, if you right-click on the normal-sized cow above, you will find that its width is 111 pixels and its height is 87 pixels. Knowing this, some people choose to display images like this:

< img src="http://www.williams.edu/athletics/images/cow.gif" width="111" height="87" >

Looks awfully similar to the first version, doesn't it? That's because you didn't introduce any new information. I would advise against doing this, because it's unnecessary, and if you type the wrong numbers, your image will be out of proportion. For instance, suppose you accidentally type 187 instead of 87 for the height:

< img src="http://www.williams.edu/athletics/images/cow.gif" width="111" height="187" >

This isn't the end of the world, but you do have to go back and figure out what you did wrong, and it's just terribly unnecessary, except of course as explained above, it conforms to the standard.

On the other hand, if you do want to stretch your image, you now know how. For instance, suppose you want to stretch out your cow to be a section divider:

< img src="http://www.williams.edu/athletics/images/cow.gif" width="1024" height="15" >

Kind of dumb-looking, but that's the extreme case, and now you know how to handle it.

Go to top

8.3 Wrapping text around images

The methods discussed in section 8 are perfectly good for almost all image-posting purposes. When you put images on your page, you will usually want to put the image on one line, and then put some text below it. But if you want to put text beside and around your image, do this:

< img src="http://www.williams.edu/athletics/images/cow.gif" align="left" >
This is a cow.
< br >Yes, it is.
< br >< br >It appears to be a rather disgruntled cow, in fact.

This also works for right alignment. Center alignment centers the text vertically on the image:

< img src="http://www.williams.edu/athletics/images/cow.gif" align="center" >
This is a cow.
< br >Now we’re on the next line

8.4 An image as a hyperlink

Suppose you want people to click on the picture of the cow in order to go to http://www.williams.edu. Then you put together the two things you just learned, but this time, instead of choosing words that you want people to click on, you put the image there instead:

< a href="http://www.williams.edu >
< img src="http://www.williams.edu/athletics/images/cow.gif >< /a>

This will both put the picture of the cow on the page, and make it into a hyperlink. Note that the picture of the cow has a blue border around it, analagous to the blue underline on text links, to show that you can click on it. If you click on the cow, it will take you to http://www.williams.edu -- try it!

Notice that I have put this code on two different lines, because it wouldn’t fit on one line. When you type your page, you might choose to put it on the same line – but interestingly, it doesn’t matter. In fact, you can go to the next line anytime you want, and it won’t affect the appearance of your page! It is best to go to the next line any time that it would make your code easier to read. If you want, you can type your entire page in one line, and never use the “ENTER” key. But then if you need to find something, it will be very difficult. It is best to use new lines often, because then your page will be much easier for you to read and edit later.

Go to top

9. The pre tag

If you want your formatting to remain just as you type it, use < pre > tags.

Examples of uses:

(a) When you want more than one space:

Williams         is    cool.

(b) When something requires formatting to be kept exactly as it is:

SUCKSUC:   SUCKKSUCK.  SUCKKK
SUC: SUCK  :SUCKKSU  .SUCKSUC
S.    SUCK. :SUCKK  :SUC    K
SU,    SUCK  SUCK: ,SUC   :KK
SUCK  S.. S,  UU. .UCK:  .SUK
SUCK  SUC.:    .:  SUCK   SUC
SUCK  ,SUCK;     SUCKK   SUCK
SUCK  ;SUCKKK    :SUCK.  SUCK
SUCK  SUCKSUC   SU .CK,  SUCK
SUC   SUCKKKK   SUCK...  .SUC
SU:  ,SUCKKKK   SUCKK:    SUC
S.   SUCKSUCK   SUCCCKK    ,S
U   ,UCSUCKK;   SUCKSUC,    K

(c) When you are trying to keep things in columns, especially when you want to use the Tab key:

Institution			Founded
Harvard University		1636
Phillips Exeter Academy		1781
Williams College		1793
Amherst College			1821

Note that even if columns seem to line up on your code page, they might not line up on the Web page; this is annoying, but there it is.

(d) When you want to be

really really really really really really really really really really really really really really really annoying and make things go way way way way way way way way way way way way way way way way way way way way way  off the page.

Williams         is    cool.

Go to top

10.1 Music

If you want to put music on your site, make certain that you have the right to put it on the Internet. If you buy a CD of your favorite band, copy the music to your computer, upload it to your page, and then put it on the Web for anyone to hear, that's against the law. However, if you wrote, produced, and recorded a sound file yourself, you are free to do what you like with it. The audio file on this page is something I wrote, produced, and recorded, so I have every right to put it on my Web page. (Note that this song is silent for the first few seconds.) If in doubt, be safe and check before you put something on your site.

The simplest way to put an audio file on your page is just to link it. Then when someone clicks on the link, their browser will open up a music program (usually Windows Media Player) and that program will play the music. This works just like a regular hyperlink:

Click < a href="http://wso.williams.edu/~ddavis/dame.wma" >here< /a> to hear my song

You can click on the link yourself to see what happens.

It is possible to put nice music controls on your site, so that people can press play and stop and pause and whatnot. For a tutorial on music players, try Annabella, 2 create, code tutorial (beware, music plays automatically on this last one).

Go to top

10.2 Videos

You can also display a video on your page. As before, the easiest way to do this is with a simple link:

Click < a href="http://math.exeter.edu/rparris/images/sch04vstart.avi">here< /a> for my video

You can also make your video appear neatly on the page, without having to open another program. The formatting is less elegant, but it is perhaps more user-friendly:

< OBJECT ID="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab# Version=5,1,52,701" 
STANDBY="Loading Microsoft Windows® Media Player components..." TYPE="application/x-oleobject" width="280" height="255">
< param name="fileName" value="http://math.exeter.edu/rparris/images/sch04vstart.avi">
< param name="animationatStart" value="true">
< param name="transparentatStart" value="true">
< param name="autoStart" value="false">
< param name="showControls" value="true">
< param name="Volume" value="-300">
< embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
src="http://math.exeter.edu/rparris/images/sch04vstart.avi" name="MediaPlayer1" width=280 height=255 autostart=0 showcontrols=1 volume=-300>
< /OBJECT>

If you post a video in this way, try it out with different browsers (i.e. Internet Explorer, Mozilla Firefox, Netscape, Opera) to make sure that the video does not automatically play when someone arrives at your page. Strangely, such things can happen.

Go to top

11.1 Tables

Using < pre > tags works fine for some tables, but there are nicer ways to put things into columns. Here is an alternative way to display the same information as above in 9(c):

< table border="0">

< tr>
< td width="200">< b>Institution< /b>
< td>< b>Founded< /b>
< td>

< tr>
< td>Harvard University
< td>1636
< td>

< tr>
< td>Phillips Exeter Academy
< td>1781
< td>

< tr>
< td>Williams College
< td>1793
< td>

< tr>
< td>Amherst College
< td>1821
< td>

< /table>

Go to top

11.2 Tables with lines

If you want lines separating the cells of your table, set the table border (on the first line) to something other than 0, say 5. This has the following result (source code omitted, as it is identical to the above except that 0 is changed to 5):

Institution	Founded
Harvard University	1636
Phillips Exeter Academy	1781
Williams College	1793
Amherst College	1821

Go to top

11.3 Tables with colors

If you want your cells to be different colors, do this:

< table border="5">

< tr>
< td width="200">< b>Institution< /b>
< td>< b>Founded< /b>
< td>

< tr>
< td bgcolor="maroon">Phillips Exeter Academy
< td bgcolor="gray">1781
< td>

< tr>
< td bgcolor="purple">Williams College
< td bgcolor="yellow">1793
< td>

< /table>

You can do this even without a border, as you will find at the top left of the Williams College home page:

	Admission
	Academics
	News & Events
	About Williams
	Administration

I just copied that from the Williams home page, and it has some things on that page that change its appearance from what you see here -- the text is white on that page and there are squares on the edges here that there aren't there -- but you get the idea: real and important pages use this stuff!

Go to top

12. Calculations

Using a language called Javascript, you can make input boxes where people can put numbers, and then push a button to calculate things. Test out the example below. Unfortunately I cannot get the code to appear on this page (it seems to enjoy remaining hidden) but if you right-click and select "View Page Source," you will see it. (Scroll down or do Edit > Find... until you see something that says script language="javascript")

Of course, you can do more complicated calculations; here are links to calculators for running and crew.

Go to top

13. Anchors

Anchors are useful if you have a variety of sections on your page and you would like people to be able to quickly go to whichever section they are interested in. At the top of this page, you will notice a table of contents. If you click on the link for a section, it automatically scrolls down to that section. Here's how it works:

< a href="#1" >1. Basic knowledge< /a>< br >
< a href="#2" >2. Using a text editor< /a>< br >
< a href="#3" >3. Starting a page< /a>< br >
(...)

< b >< a name="1" >1.1 Basic Knowledge< /a>< /b >

Your browser will scroll down to wherever the < a name=... (called the "anchor") that matches the hyperlink is, and will put the anchor at the top of your browser window. The exception occurs when the anchor is close to the bottom of the document, so you can't scroll down that far, and in that case your browswer will scroll down as far as it can, to the bottom of the document.

You need not put the < a name... > and < /a> tags around any words; you can put them wherever you like on your page. It may seem odd to put the < /a> after the < a name=... since you need not put it around any words. In fact, omitting the < /a> sometimes won't affect the functioning of your page at all. However, if you omit it, occasionally you will find your entire page turned a different color, or turned into a hyperlink, or all the links after it will be messed up -- so it is wise to put the < /a>, even if it seems odd when there are no words to put it around.

You can link directly to an anchor on another page, so that when you click on the link it brings you to a place other than the top of the other page. An example is here.

Go to top

14. Building more knowledge

There is probably something that you want to do that I didn't talk about. Chances are, somebody has written a tutorial on how to do it. To find it, type whatever you want to learn along with the word html (and possibly the words "code" or "tutorial") into Google. I have found this to work well. See section 10.

Better yet, just find a page that has the thing you want. For instance, if you want to know how to make columns, find a Web page that has columns -- the simpler the page, the better. Right-click on the page (on text, not on an image or hyperlink) and select "View Source" or go to the View menu (up there with File and Edit) and select "Source." There you will find the "source code" of the Web page, which should look remarkably similar to what you have been typing here. It may be more complex, and there may be tags that are unfamiliar, but you will certainly see < a href=... and < img src=... and < font... and other tags you recognize. Scan through the source code until you find something that seems to describe the feature you are looking for -- in this case, columns -- and copy a whole piece of the code into your document, making sure that you have everything that could possibly be relevant to the making of the columns. Then change small pieces of it, deleting what you think is unnecessary (and undoing it if it turns out not to be) until you have your columns. This is how I learned how to do new things in HTML.

Web pages made by students in my Free U class (all unavailable as of 30 March due to hacking of WSO):
Jerry He '08
Delwar Hossain
Maksym Kepskyy
Lily Li '08
Irina Zhecheva '08

Credits: As always, I credit Mr. Parris for teaching me the basics -- bold, center, image posting, and hyperlinks -- over spring break of my Upper year. Those two hours of teaching gave me the background and the interest to do everything that I have done ever since.

Return to Diana's Web Page