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 preceeding 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 visable in the viewed document. This is how hidden comment statements can be written into the document. Once opened, the command can be revocked 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 impliment.

• b - makes following text bold
• i - makes following text italisized
• 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 subscipt

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. Impportant 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 affter the "a target="" href="" " and before the cloisng "/a" . If you leave nothing between them, there will be no hyperlink, if you forget to clse 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 thier 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 thier 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.

Everthing Else

Everthing else you need to know about HTML is right in front of you ... on the internet. By visiting other people's hompages 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 hompage - the ins and outs of HTML
• Webber(tm) - HTML converter and publishing utility
• HTMLscript - HTML Based Web Development Language