<- 2XOD.com


HTML is the language web sites are written in. Everything is written in what are called 'tags'. All tags begin with a "<" and end with a ">". If you know enough HTML anything you can think of is possible. This guide will cover the basics.

Creating Links

To make a link, you use this tag:
<a href="http://2zod.com/">2zod.com</a>

The green part is the location you want the link to go to, and the red part is what the person will see. That tag will look like this on a website:


To make a link open up in a new window, you add in this part:

<a href="http://2zod.com/" target="_blank">2zod.com</a>


Go ahead and click on it, it will open in a new window!

Creating Images

To display an image you use this tag:
<img src="http://2zod.com/2zod_sm.gif">

"src" points to the path of the file, but you don't always need to add the entire 'http://2zod.com/' part. You only need that if it's pointing to an image on another website.

For all the images you upload in the admin page, you can put the path in as "news/imagename.jpg".

The image "2zod_sm.gif" is saved on this website, so src="2zod_sm.gif" and src="http://2zod.com/2zod_sm.gif" will show the same image.

You can also change the width and height of an image. All you need to add is width="xxx" height="xxx". You can make any image, no matter how big it is, what ever size you want.

NOTE: A very large image that might take a few minutes to load will take just as long even if you make the size very small. Keep this in mind on a page with a lot of images.

Here's that same image, except making the width and height both 50:
<img src="2zod_sm.gif" width="50" height="50">

You can also add title text to an image. This is the little box of stuff that appears when you hold your mouse over an image for a second. Try it here:

Hold your mouse still over this picture for a second, you will see it.

For that picture this tag was used:
<img src="2zod_sm.gif" title="2ZOD.COM OWNS YOU">


You can change a font's face, color, or size. Font face just means the font, such as "Times New Roman" or "Arial". To change any font attributes the <font></font> tags are used.

<font face="Comic Sans MS">This is Comic Sans MS</font>
<font face="Times New Roman">This is Times New Roman</font>
<font face="Arial">This is Arial</font>

This is Comic Sans MS
This is Times New Roman
This is Arial

You can change that to nearly any font you like. The default for just about everything is "Times New Roman", but on this website the default (what you're seeing right now) is "Verdana".

The size of the font can also easily be changed.
<font size="1">This is font size '1'</font>
<font size="2">This is font size '2'</font>
<font size="3">This is font size '3'</font>
<font size="4">This is font size '4'</font>
<font size="5">This is font size '5'</font>

This is font size '1'
This is font size '2'
This is font size '3'
This is font size '4'
This is font size '5'

Changing the color is pretty much the same way:
<font color="red">This is RED!</font>
<font color="green">This is GREEN!</font>
<font color="blue">This is BLUE!</font>
<font color="yellow">This is YELLOW!</font>

This is RED!
This is GREEN!
This is BLUE!
This is YELLOW!

Any and/or all the options can be used together, just put a space between the different parameters:
<font size="4" color="yellow" face="Arial">THIS IS CRAZAY!!</font>


You can make font BOLD like this:
<b>This is bold!</b>

This is bold!

You can make font UNDERLINED like this:
<u>This is underlined!</u>

This is underlined!

All of these can also be added into the mix:
<font size="3" color="green" face="Comic Sans MS"><u>underlined & <b>bold</b> with other crap too !</u></font>

underlined & bold with other crap too !


The alignment of text and images can also be changed, you can make it centered. By default all text is aligned to the left side:
<center>This will be centered</center>


This is not centered.
(default, no tags needed)


This is centered.
(using the <center> tags)

And it is the same with images:
<center><img src="2zod_sm.gif" width="50" height="50"></center>



Another thing you may want to know how to do is skip lines. For this use the <BR> tag



The tags to make that were:

To just skip to the next line, put one <BR> where you want one line to end, to double space, and put a line in between the next one, put two <BR>'s there.

Try It!

I made this little section so you can test these different tags, when you click 'view' it will open in a new window with what you put in the box.

(You must have a JavaScript enabled browser for this to work properly.)

<- 2XOD.com

All Images and Content ©2006 2XOD.com
All Rights Reserved

Comments? Questions?