Site hosted by Angelfire.com: Build your free website today!

Updates
NFAQ
Links
Link Me
My Thoughts
About me
Biographies
My Fanart
Guest Fanart
Fan Fictions
Fan Sounds
Sailor Moon Sounds
Dragonball Z/GT Sounds
Music
Sailor Moon Images
Dragonball Z/GT Images
Manga Story Collection
Scans
Wallpapers
Questionable Quotes
Obsession Confessions
Nutty Nicknames
Hide and Seek
Comedic Candids
The Dancing Floor
Pollishous Polls
Interviews
Message Board
Editorials
HTML Tutorial
Survey
Awards
Adoptions
Sailor Deneb Presents Sailor Pluto

Magisan Dreams

HTML Tutorial
Welcome my HTML Tutorial. Here you can find help on making your own webpage. You getting hold on to and make sure you are wearung clean underwear because am about to take you through my little HTML shpeel. Hope it gives you a head start.
| Idea| Web Servers||Getting Started|Formatting Text|Links|Images|Tables|
|Spiffy Tricks|Website Add-ons|Promotion|


Idea
Okay, first of all, you need and idea. Something to start on. Example: What kind of site do you plan to make? A shrine, a combo, all images.... Are you able to provide the required things for your choice? Write down your ideas. Try to plan different aspects of your future site like your layout: How will it look? Will you make your own or find one pre-made? How will you make your site different from everyone elses? There are so many possibilties for your ideas. All I can say is be creative in your thinking.

Web Servers
Unless you are rich and want to have your own domain to start out with, I suggest you find a good webserver. There are tons out there, you just have to look. Here is a short list of servers to try including comments by me beside them.
Angelfire- This is my webserver. It is pretty reliable. You should know HTML for a decent looking webpage here, their web templates...... suck.
Tripod- I don't know, never fooled with this one before.
Geocities- I store alot of my wav. files here... hehehe. It is reliable too. I suggest you not use there drag and drop program. My first web account was here and it crashed my browser everytime I attempted to use it. You should use HTML here too.
Homestead- I don't like Homestead, I really don't. There is no HTML editing place, it's all drag and drop. My poor browser couldn't take it. You also get a big fame like ad at the bottom. Very unattrative.
Stas.net- I really don't know how reliable they are, but you get unlimited space and no ad banners. I may have to check it out.
Xoom.com- I don't like Xoom either. I've never tried to make a page there but they too have a frame type ad banner. I just like Xoom for their sharehouse and nothing more.

There are many more, but that it all I can think of at the momment. Choose one, sign up, and look around.

Getting Started
Now, for you to get started, you will need some knowledge of HTML for your site to look good. I will say this again... USE HTML, NOT THE DRAG AND DROP PROGRAMS. Sorry if that was rude, but it was true. You have a lot more control over your site's design if you use pure HTML. It's not hard to learn once you get the hang of it and that is what this whole section is for. Okay, to start out you need to put the opening tag into your editor.
<html> </html>
This starts a HTML document. Next, you will need to put in the head tag.
<head> </head>
Between this tag you put your title for the title bar. Also other add-ons like Javascript calls for you to place the code between the head tag. To put the title on the title bar you use this:
<title> </title>
After you type that, you type your page's title. Example:
<html> <head> <title>My Website</title> </head>
The title "My Website" will appear on the bar. Next, you place the body tag into your document. This is where your page basically begins.
<body> </body> Everything on your page will go beneath this tag. Next, you will want to specify your background color or picture, your font size, style, and color, and your link colors and style. To put a background color into your page, you will need this tag:<body bgcolor="your color here"> To add an image instead, use this tag: <body background="image's url here"> Special note~ When using a background image, make sure it was made to be a background image. Meaning, don't use just any image, make sure is been faded so it won't clash with your text.
To give your text a different color, use this: <font color="your color here"> To change the default size of your font use: <fontbase size="some number"> To change you font's style from the default, use: <font face="style here">
Special note~ When choosing a font, try to pick one that everyone will most likely have. I use Bookman old style, even notepad has that one. Don't use fonts like "Night Sky" and such. Save those for your banners, awards, etc.

Next item up for bid, the links. Okay, you will have to specify what color you want your links. Otherwise, the default colors will be used. The following is the code I use for my links: <STYLE> <!-- A:link {text-decoration: none; color: none} A:visited {text-decoration: none; color: none} A:active {text-decoration: none; color: none} A:hover {background color: none; text-decoration: none; color: none}--> </style> The A: link is the first link color you would see on a website. When you click on the link, it's color shows the A: active color you chose. When you have already visited a link, the A: visited color will show. The A: hover is a tifty little code to make the link color change when the mouse arrow is placed over it. You can see an example of this above when I gave you the webserver list. The text-decoration is used to chage the link somewhat. You can leave it blank or you can put different commands to make the link do different things. You can put:
underline~ to make the link be underlined.
overline~ to make the link have a line over it.
underline overline~ The like will be overlined and underlined.
The backgound color is used to make the hover link have a background color.

Formatting Text
Okay, the next step in web design is formatting your text. There are several ways of doing this. First of all, when I say "formatting text, I mean changing it... besides the color. That was explained above. Using this, you can set apart some text from the rest, to make it more visable and such. Here are the different types of formatted text:
Bold

<b></b> Italics<i><i/> Underline<u></u> Typewriter style <tt></tt> Strike <strike></strike> You can also change the size of your text for headers and stuff. You should this only for headers because it will leave a large gap between your other text.

Big Size

<h1></h1>

Not so big size

<h2></h2>

Small size

<h3></h3>

Smaller size

<h4></h4>
Smallest size
<h5></h5> And so on and so forth. To make a break in your
text
like
this, use: <br> Formatting text is simple and really can improve a paragraph or any type of text for that matter.

Links
Links are the most important aspect of a website. They are the guides that take you around. Without them, websites would be nothing. If done correctly, links are simple and very, very helpful in making a website work. Okay, really all links are started the same way:

<a href="your url here">The title of the link here</a>And thats it. With this you can link pages, images, wavs, MP3s, and so much more. All you do is change the file extention. Example: <a href="https://www.angelfire.com/anime/sailorsolarflare/index.html"> That is the url for my index page. <a href="https://www.angelfire.com/anime/sailorsolarflare/duh.JPG"> Thats is the url to one of my images. All I did was change the file extention from .html to .JPG. You can also link your email address for your visitors. Use this: <a href="mailto: your address@whatever.com"> What ever you want it to say</a> To have a subject appear when some uses that link, type: ?subect="whatever you want it to be"> You put that right after the address. Example: <a href="mailto: little_mama523@hotmail.com" ?subject="Html help">little_mama523@hotmail.com </a> That is the code I use at the end of this section for my email address. Thats it, thats all you do. Linking is easy and really handy to know.

Images
Images are a necessity for a webpage. They can decorate you page or they can break your page. What do I mean, you ask? Images can make your page look pretty and if used correctly, can make it look quite professional. But if you scatter them carelessly across your page, it cuts into your loading time, which ticks some people off. That may prevent them from coming back. Just keep them neat and orginized for the best result. Okay, to link an image, you use the following code:

<img src="your image url here"> See....

If you want to have a gallery with your favorite images in it, you will need to know how to make thumbnails. Thumbnails are simple to make. You need to have an image editing program such as
Paint Shop Pro. Just shrink the image to a smaller size. Not only does this save space in your gallery, it also makes it load a lot faster. Never use fake thumbnails. if you don't know what that is, it's an image that has been shrunk using HTML and then the larger image linked to it. This is a very bad thing, because it takes forever and a day to load. All you do is just shrink the size of the picture, not the file size. You might as well have posted the normal size picture, it would take the same amount of time to load your gallery. So just avoid that. Okay, to make a thumbnail you use:
<a href="the url to the normal image"><img src="the url to the shrunk image"></a> And Voila!

If you want to remove that ugly border just type:
<img src="the url to the shrunk image" border=0> It's basically the same, except for the the border=0 after the thumbnail url. Also to put a little drop down message on your image add alt="what ever you want it to say"> after the shrunken image url.
See
Looky, I made a drop down!!!!
To aline text with an image use: <img src="your image url here" align="top">Write your text here</img> Here is my text
You can replace "top" with center and bottom, your choice. Images are easy and fun. They're what makes a webpage interesting. Just use them wisely and all will be right with world.

Tables

Tables are really handy to know. They are not required in order to make a webpage, but it helps you keep things orginized. At first, I thought tables were extremely confusing and thats because I tried to learn them by pulling up source codes. Thats not the way to learn stuff like this, trust me. As an example of a simple table, I will make one....
Sailor MoonDragonball Z
Sailor Mercury
Trunks
Sailor Jupiter
Vegeta
Pupulon
#17
See, all there is to it. Here's how I did it. First, I started it with the opening code: <table> That starts your table. Next, you can size your table and specify whether it will have a border or not. To size it just add this instead of the starting table code: <table width= how ever big you want it> and if you want it to have a border: <table border> Next up, you can add a heading for your table like I did. The heading can help your visitors tell the difference from one side or the other. <tr><th>your first header</th><th>your secon header</th</tr> Of course, you can add all the headers you want, I just used two for my example. Next, you make the rows and section. Start eack one just like the one above with <tr><xmp> That starts a new row for you table. Then you put: <xmp><td> To add a new column put: <td> And you just repeat that over and over until you have everything you want. Now I will show you the code for my table above: <table width=500><table border><tr><th>Sailor Moon</th><th>Dragonball Z</th></tr> <tr><td>Sailor Mercury</td><td><center>Trunks</td></tr> <tr><td>Sailor Jupiter</td><td><center>Vegeta</td></tr> <tr><td><center>Pupulon</td><td><center>#17</td></tr></table> Does it make sense now? It's really simple if you think about it. Just keep up with what you put in it and make sure you size it correctly so there won't be any side scrolling. Nobody like side scrolling. There is also a cute little trick that makes a table look really spiffy. Try this: <td bgcolor="what ever color"> Just add that beside of the <td> tag in the table and it's background color will be what ever you chose. It works really good if you don't put a border around your table. Also, to make it look even better put this tag directly beside the the width tag. <cellpadding=0 cellspacing=2> You will just have to play with that for a while to find what setting you like. Personally I use that one.

Spiffy tricks
These are really neat little things I had to put some where. I'm going to state this now, these may be neat little tricks and you might end up liking them alot, but use the in moderation.... don't go over board. Okay, the first little trick shows how to have background music.

<object Border=2> <Embed src="what ever you want to play" autostart="false" Loop="true" Height=25 width=144 Mastersound controls=smallconsole> </object> .. and thats it! If you want it to start automatically replace "false" with true in the code. I do not recommend this though(reason is stated below). Here is an example:

See? Easy, eh?

Special Note~ Always use this code. Never just have a background sound. Some people like to listen to music while surfing(me!) and running across a midi that you can't turn off is really agitating. Also never use a wav. file for your background music. It really cuts in on the loading time and we don't want that now do we?

Next little trick is called a fixed background. This may not be a trick, but I think it is spiffy and if I think it is spiffy, it goes here. Just add

<bgproperties="fixed"> ...after your background color or image and then your background will be like this pages. Everything will move but the background. Told ya it was spiffy... ~_^.

Website add-ons
Every website needs some add-ons such as counters, guestbooks, messageboards, etc. There basically necessary... in my opinion. So I thought I would post links to some good places to get such things.

Bravenet- I personally like this place. I use it for a lot of things including my counter, guestbook, messageboard and all of my forms. I'm not going to go into form in this section until I can do them properly, so if you would like forms for your site I suggest using their email form. They are very simple. If I were you I would go with them.
HTML gear - This is a neat little place. it has several really spiffy things to provide you with like my quote generator was made from there. They also have guestbooks, polls, and more.
These are all very reliable and are very handy in making a successful page.

Promotion
When you are finished with you page, you will want to promote it, right? Well, they're are several ways of doing this, so here is my list in order of what you should start with:

1. Sign guestbooks- This is a great way of getting promotion when just starting out. It worked for me, at least. Just sign as many as you can and it will give you a head start!.
2. Sign meassage boards- Another great way to get attention. Just don't over do it and sign a board bunches and bunches of times with your url. That waistes space and could make other people very unhappy with you.
3. Sailormoon.org forum: your site section- Yes this is a wonderful place to advertise your site. People are so nice in there. They will review your page and tell you what you did wrong. It's also a good place to meet fellow web mistresses/masters and talk to them and visit their sites.
4. Linking and asking for links- This can be useful too. Asking for a link to your page can help more than you think. In my opinion, when asking a site owner, you should have already linked them back. I thinks it's polite and the owner of the site will see that are truely sincere about them linking you. Just email them asking very politely and using the best English you know. This makes a very good impression. When I ask, I always end each request with "Thank you for you time". That too makes a good impression. All I can say is be polite and if you are not accepted, don't ask again until your site has improved.
5. Sisters and affiliation- This is also a great way not only to get more hits, but to make friends. Basically, girls have Sister sites and boys have Afiliates... makes since. It would be funny if boys had brother sites... ah, maybe not. Anyway, just be polite as well, just refer to #4 when applying.
6. Just flat out working hard- Believe it or not, this is the best and most satisfying way to get hits. People linking you without you asking is a great reward in my opinion.
7. Search engines- This also a good way, but no quite as easy as the others. Some search engines you have to be accepted into like
Yahoo for example. There are others that will just add you. I will have a list when I begin submitting to engines.
8. Webrings- I know nothing about webrings. I belong to none and really know beans about them. All I know is they help a little in getting you hits, but not very much.
These are all good ways in promoting your site.

Special Note~ Don't try to promote your site too earily. Make sure your site has more than just a link to a guestbook and your email address. Thats not a good site. Have something for your guests to do and make them want to come back.

Well, you made it, you now know HTML! There is so much more out there to learn, just keep your eyes open and be willing to learn more. If you would like to have some good tips on what to do and what not to do on your new site, read my editorial "Good website, Bad website". Well, hope this was of help to you. If you have any special question for me, email me: little_mama523@hotmail.com and I will try to personally answer your question.