VR-T
CSS
HTML
Javascript
Paint Shop Pro
PHP
Misc.
Graphics
Interactions
Clear

HTML Basics

First, it's important to remember to open and close each html tag properly.

This is how your .html file has to start out.

In regular HTML, all the rest of the coding goes inside the BODY tags.

The header is very important. Many codes go only in the header, so it's important to know what that is.

Next, we want to specify some colors (links, text, etc) and a background.

The colors are hex codes, which you can pick from a hex codes chart, for example you can use html-color-codes.com, or use a graphics program. A hex code starts with the # sign and has 6 characters (numbers or letters). #FFFFFF is an example of a hex color code.

The background_image.file is the image picture you want to use as a background, for example, my_background.jpg. If you do not want to use one, leave this tag out completely. Depending on your image, you may want your background to stay still while only the text scrolls down the page. To do this, change the background tag to the following:

Next, we'll talk about text.

Pick a color for #COLOR that is readable and will show up over your background image or color. Pick a size that isn't too small or too big. Pick a FONT_NAME that is a default font for most browsers (ex: arial, tahoma and verdana are good choices).

Here are some ways to make a new line:

A new paragraph means the text will skip a line between the previous text and the current text. Line break simply puts the text on a new line, but does not skip a space. Center means the text will be centered on the page.

Now for some text effects.

Here's what it looks like: Italics, Bold, Underline

Links are also important. You will need them to link to other pages in your own site, and link to other people's sites as well.

There are several ways to link within your website. The best way not to get confused if your files are in different directories is to use the first. But if all your files are in the same directory, the second approach works fine.

This is how to properly link to someone else's website. The target="_blank" piece makes the link open in a new window, so your site does not go away when the link is clicked.

We can also link an email address.

Now let's add some images.

The typical image extentions are jpg, gif, bmp, and png.

If you want someone to be able to read a message about the image, you would change the code to the following:

Here is how you link and image.

The border="0" piece is to keep the image from being outlined with the link color.

Now you have learned a few basics to get you started in html.

<-back