Charmed Ones Guild

H T M L   B A S I C S

This tutorial was originally created for Immortal-Illusions, used with permission.

This is a very basic guide of the standard HTML codes you need if you want to start your own website. As said in the title - I will concentrate on the very basics of building your own page, so if you have no idea how to use HTML and never heared of it before - this is where you can get started ;)

Backgrounds
Now, lets start with backgrounds, after all every page needs them, right?
if you want to have a background in a certain color, all you have to do is use this code:

<body bgcolor=NumberOfColorYouWish>

Thats all fine and dandy, but sometimes having just a plain old color for a background can be boring. To personalize your webpage a little more, you can even pick a certain image that will display at the background! However with HTML, you won't be able to center it or stop it from tiling - so make sure you have all the correct height and width that you're looking for before doing anything.

<body background=http://UrlOfYourImage>

Make sure to upload your image on a site, so other people could see it to! (some quite good sites for that are ripway and freewebs).

Fonts and Text
If you're planning on having your own site, writing stuff is probably one of the first and most basic things you'd want to do, no? Well, here is how you can cascade your text with all sorts of different fonts, colors and sizes...

<font face=verdana color=green size=2>your text will go here</font>

As you can guess, with the above code the font would look something like this. You can change each of these to suit your mood and style, and even delete them if you think you don't need one of them (for example to have the basic color for your site remove the 'color=green' line etc').
If you wish to turn the entire text on the page into a certain color, you can use this code: <body text=#CodeNum>

You can also make your text go bold, italic or even underlined, using these codes: <b>bold</b> <i>italic</i> <u>underlined</u>

In addition to all of the above, you can also change the direction in which your line will start in.

<div align=left>something</div>
<div align=center>like</div>
<div align=right>this</div>

Or, if you wish to use a shorter code for centering, you can use:
<center>your text</center>

Want to add a new line but dont know how? Its quite simple really, and one of the easiest codes to remember ;)
<br> will give you the same effect as the Enter key on your keyboard, and if you wish to start an entirely new paragraph, its even easier!
<p> will help you to break through 2 lines in a row (the same effect as 2 brs) and start a whole new subject.
NOTE: If you have a certain font code in your first paragraph, and then break it with the p code, the effects wont apply for the second paragraph - so you'll have to either copy and paste the font code again or use 2 brs.

For linking to different pages everywhere in the internet database, you can use the code below:
<a href=http://UrlOfThePage>the text that will lead to the page</a>

You can add a title to your link, that once someone will hover over it he will see whatever it is you wish him to read. simply add title=description of link before the ending tag and see how it works out ;)

Images
Every site needs some nice images to spice it up so it wont look too boring... To add cool pictures to your site you can use the following code (please note that the same rule that applies for image backgrounds applies here - you MUST upload the picture on the web first so other people could see it to!)

<img src=http://UrlOfYourImage>

To change the width and height of your image, you can add width= and height= codes before the ending tag, but sometimes it will disort the way your picture looks and will ruin its quality, so its not highly recommended. You can, however, use PS to change your picture size - look for it on the tutorial list ;)

You can even use most of the codes that are used on fonts on the your images to, for example making them centered, or linked and such. Here is an example of centering your image:

<center><img src=http://UrlOfYourImage></center>

In the same way you can add description to your linked text, you can do so with images, only here instead of title use alt= ;)

You can even link an image to a different page, like with text. Here is the code for it:

<a href=http://UrlOfThePage><img src=http://UrlOfYourImage></a>

NOTE: when linking an image, a border can appear and sometimes it can really ruin the way your picture looks. To remove it, you can add border=0 inside the img code (after the url but before the ending tag [>]). In the same way, you can add a border to your already linked image and change its thickness, using any number you wish (try not to over due though, we wouldn't want our border to be larger than the image itself ;)).

To change the color of your border, add the following code after the border thickness: <border-style=color:#YourColor

Text Areas
If you wish to display codes on your own site for others to copy and use, you can use the following option to display them:

<textarea>whatever code or text you wish to display</textarea>

You can use cols= and rows= in order to change the way your textarea looks, stretch it and make it look differently.

NOTE: if you wish to use this code on NeoPets pets-pages, you will have to change textarea to text_area

Bye Bye
Thats about it, I hope this guide helped you out to get to know the HTML language a little more, and if you already knew it - then at least I filled a little of your time =P Enjoy building your own website, and good luck!

Back

Copyright 2002-2012 Charmed Ones Guild | Terms | Contact | Credits