----Lain...Disconnected v 3.1 - Tragic Dreams of Reminiscence----

Basic HTML Tutorial

What is HTML?
HTML stands for Hyper Text Markup Language. HTML is a series of codes that your browser (what you use to view pages on the Internet) uses to put together a normal-looking web page. There are two major browsers: Internet Explorer and Netscape. (There are more than this, but these two are the most often encountered.) These two browsers utilize HTML codes differently which makes coding a webpage just a bit harder than throwing tags together.

These are the main things you will see when working with HTML:
Open bracket: <
Close bracket: >
Tag: p, b, i (and many more)
Slash: /

The open and close brackets are what you use to signify a code. The tag is whatever you want the code to be. And the slash is used to signify the end of a code.

A Basic Page

This simple format is used to create all html webpages:

<body>

All of your content goes here. This is where you write about how you hope that everyone enjoys your site and so on.

</body>
</html>

That's pretty much it. It's very boring though. That's why you learn more html so you can do really cool things!

Change the Background

By default, your background will be nice and snowy white. However, this may not suit your tastes - it's never suited mine! ^^ If you're one of my kind, then I've got great news for you! YOU CAN CHANGE THE BACKGROUND COLOR!!! Yay! Simply add bgcolor="#colorofchoice" to the body tag.

The particular tag above will give you a black background. You can visit www.lissaexplains.com for a really great section on the 266 browser safe colors as well as a color wheel and color slider for those colors that must match perfectly.

You can also add an image as your background!

Add Text

Adding text is about the easiest thing to do on your page. All you have to do is write whatever you want inside a paragraph tag.

Blah, blah, blah - write your text here!

The default font for text is usually Times New Roman. The default color is usually black. And once again, I have good news. You can change that! Oh the power of HTML! First things first - you need font tags.

Then, to change the font, you'll need to add face tags. These tell the computer what font to view the text in and they look like this:

You can then add size and color tags to change the size and color of your text!

Woah, I am the font master now!

Will come out looking *something* like this:

Woah, I am the font master now!

(I'm using a style sheet, so it overrides any font color and/or face changes. That's why the text may or may not be white and not Arial, as it should be. I'm looking for a way to correct this problem, but for now I can only hope you get the general idea.)

Some computers don't have the same fonts that yours may have so this is another thing you should be careful with. Some good basic fonts that can be found on just about all computers include Arial, Verdana, Comic Sans MS, and Tahoma.

Learn how to change your text effects in later tutorials!

Make Text Links

Links are probably the next easiest thing to do after text. All you have to do is create a link tag:

<a href="page.html">Click here!</a>

Will look like this:

Click Here!

Look for more on linking pages in later tutorials!

Add Images

So, you're building your page and things are looking nice when suddenly it hits you: some pictures would look really cool scattered about. Well guess what? I'm gonna tell you how to put 'em there!

First of all, you should find the images you want to use and upload them to your server. Make sure that the filenames are lowercase with no spaces or weird characters. I've found that it's best to name them something easy - something you'll remember. For example, if you have a picture of a raver dancing, you might want to name it "dancing_raver.gif" or something. After you've taken care of that, you can add something like this to the page where you want the image to appear:

The src attribute tells the computer which image to display. Width and height are how wide and tall you want the image to be - you may not always need these. The border attribute is what you use to control whether or not your image has a border around it and how big the border is. And the alt attribute is where you can write a description of the image which users will see when they hover over the image with their mouse. Here's an example of what the tag above will do - hover over it to see the alt tag:

This is my dancing raver! Yay!

Look for more on how to utilize images in later tutorials!