HTML Tutorial

Text

The process of writing a paper on a word processor or in a program such as word or wordperfect is rather complex in the key strokes and menu bars that are necessary to accomplish very simple markups such as italics or bold. In HTML, ther are no key strokes or bars, it is coded, or written into the text. For example, a word or sentence is made bold by preceding it with the letter "b" encased in greater than and less than symbols (< >). I would type it out for you, but that would activate the bold command. In fact, anything placed between the carrots (< >) is not visible in the viewed document. This is how hidden comment statements can be written into the document. Once opened, the command can be revoked by repeating it with a slash (/) in front of it. So to end a bold command we would type "/b" inside of the carrots (< >). As you can now tell this is very simple, if you know what the commands are. Below I have listed some of the more common commands and what they implement.

• b - makes following text bold
• i - makes following text italicized
• center - centers the following message
• hr - creates a bar across the screen
• h# - makes following text a header of # size. (scale puts 1 at largest)
• ul - creates list, indents following text
• li - bullet for list
• strong - makes following text bold, but it's intensity can be regulated
• p - places a space for a new paragraph to begin
• br - breaks line where it is placed
• sub - makes text subscript

Again, to end any of these commands simply repeating that command with a "/" before it. The list provided above is simply a few of the many that are available. From viewing sources of others pages, you could find an endless list of useful text editing commands.

Images / Hyperlinks

Placing images into a HTML document is as simple as the editing of the text. It can almost be viewed as another command, like bold or break. In the desired location, put an "img src="image name"" within the carrots (< >). Where this appears in the text the image will appear. Of course the image name refers directly to the images file name, and the "img src" tells the HTML that an image is to be used as a source. Now, leaving it in the text will bring the picture up on the page. If you wanted to move it to its own window then we have to reference its "target". To do this we have to make a hyperlink. This can be achieved by typing "a target="target window" href="image name" " inside of the carrots (< >). This tells the HTML that you want to make a hyperlink. The target window is the window that we want to direct the image into. Leaving the target blank would make the current window the target. This would bring up the image in replacement of the text, which is not what we want to do. So we make the target a new name, that way the HTML creates a new block to put our image in. I'll do an example with an image from our visual library. To show you how obscure the target name can be I've named it Fred. Click on the word image and it should bring up a new window. Important thing to note (if you are looking at this documents source as we go along) is that the word(s) that you want to represent the hyperlink must be right after the "a target="" href="" " and before the closing "/a" . If you leave nothing between them, there will be no hyperlink, if you forget to close the "a" then everything after will be hyperlink. I've found this to be a more than common problem. This "a" command can also be used to bring up clickable maps and MPEG movies in their own windows. Also, you can make links from your HTML document to others in your window by using the "a" command without the target option.

Frames

As you probably well know, our page was viewable through frames. This was an idea originally put forth by, Chris (my partner in crime in actually formatting this site) and was utilized by Diana Farkas on her website. I'll be honest, the wonders of frames still is a bit shakey with me, so I'll give you what I know. The page is blocked off into however many sections that you desire. These are named and set by their location, as in columns and rows. They are then named so that each block has a target address. When bringing up windows in each block, the desired target should be chosen. We utilized this to make the glossary scroll to the hyperlinked term inside of the text. View the source of our titlepage under frames and you will see the way we set up our windows. You can also view Diana Farkas's setup, and get more than one viewing of frames.

Everything Else

Everything else you need to know about HTML is right in front of you ... on the internet. By visiting other people's homepages and web sites you can see how they did things, and incorporate what they did into your own needs. There are also numerous other sites that hold software that helps to develop HTML into a more applicable form. Here are a few that I found :

• HTMLed(tm) - Windows HTML Editors
• HTML Writer - HTML editors/convertors
• HTML EDITOR- Macintosh HTML Editors
• HTML Homepage - the ins and outs of HTML
• HTMLscript - HTML Based Web Development Language