HOW TO HTML
What is HTML?  HTML is a computer language that allows you to design a web page.  There are different types of web pages you can make (informational, educational, just for fun, etc.,).  This page should help you get started!  Scroll to the bottom of this page to find out about how to get your web host (i.e. angelfire, gurlpages, geocities, msn, etc.,).

Table of Contents

1. Images
2. Styling
       -Font Size
       -Font Face
       -Font Color (plus) Color Guide
3. Links
4. Lines
5. Tables
6. Dynamic HTML
7. Web Hosts

Images:

After uploading an image, you must write a code in order to paste the image onto your page.  If I did the following steps:

1.      Uploaded an image called:  smlogo.gif
2.      Make sure I upload under the file:   images/
3.      Everything is under the same server name.

I would write the code:

<img src="images/smlogo.gif">

And the image would look like this:

**There are 2 main types of files.  They are:  .gif   or   .jpg  >>>>   Make sure you write down the correct one or an "X" would appear instead of the actual image.

You may also come across "moving pictures".  They do not require a special code to make the pictures move.  Just use the same code as the one you use for normal images.  Moving images are called Animations.

Can you see her running?  If not, click here Thanks!

However, sometimes, you can't see moving pictures and you have to make sure that does not happen.  Because you would miss out on a lot.

Back to Top

Styling

Styling is very popular amoung all web pages.  Let's take a word:

To make the word in "bold", we do this:  

And this is what it looks like after you preview it:  

Here are some other ones:

Italic:                <i>You are cool</i>
Looks like this:        You are cool

Underline:            <u>You are cool</u>
Looks like this:        You are cool

You can also make different combinations:

<b><i><u>You are cool</u></i></b>

Looks like this:                    You are cool

Back to Top

PARAGRAPHING:

Let's take a paragraph example:

Are you looking for trouble?  Well punk, you better not be.  I am the star trainer, enemies of the star beware.  You are in for the scare of your life.  Reading?  Well, I think it is okay, considering that I am a little bit shabby.  Are you alright?  I am too.  You better be, wait a second, do you know what I know?  No you don't too bad!

Well, tomorrow is another day.  My favourite website is coming up tomorrow, you know the other day I was eating pie and... never mind.  You get the drift don't you?  I thought so!

To separate the two paragraphs:  We do this code:

<p>Are you looking for trouble?  Well punk, you better not be.  I am the star trainer, enemies of the star beware.  You are in for the scare of your life.  Reading?  Well, I think it is okay, considering that I am a little bit shabby.  Are you alright?  I am too.  You better be, wait a second, do you know what I know?  No you don't too bad!</p><p>Well, tomorrow is another day.  My favourite website is coming up tomorrow, you know the other day I was eating pie and... never mind.  You get the drift don't you?  I thought so!</p>

It should look like this:

Are you looking for trouble?  Well punk, you better not be.  I am the star trainer, enemies of the star beware.  You are in for the scare of your life.  Reading?  Well, I think it is okay, considering that I am a little bit shabby.  Are you alright?  I am too.  You better be, wait a second, do you know what I know?  No you don't too bad!

Well, tomorrow is another day.  My favourite website is coming up tomorrow, you know the other day I was eating pie and... never mind.  You get the drift don't you?  I thought so!

Back to Top

FONT wOrKs

FONT FACE
Here, we work with fonts.  If you want to change the size, color, or font.  It is really easy.  You can try different combinations.  With these basic steps, you'll be able to style your site the way you want!

To do this:        This is the testing round.

Use this code:

Different fonts you can use are:

• Times

• courier

• Arial

• Verdana
  
  Back to Top

To do this:                  Change the size of the Font

Use this code:

You can use the following different sizes:  1    2    3    4    5    6    7
1 is the smallest and 7 is the largest.  You can use this size guide to help you out:

Back to Top

FONT COLOR

Changing the color  of the font is not as easy as the last two.  Each color has a different code. I think the codes are called hexadecimals.  Here is the basic code to change the color of any word(s).

The code from up there should look like this:

 Hello

Cool eh?  Now, I have also devised a color guide.  I do not know all the names of the colors.  In this color guide, anything with a * in it means it is used very often.  This color guide is for you:

NEO's COLOR GUIDE

For very basic colors (i.e. black, white, blue, red, green, yellow, maroon, etc.,), you do not have to put the hex  number.  So the code could look like this:

It should look like this:                    Testing

Back to Top

Links

Links are probably the most important things you need on your web page!  If you want to make a link, here is the basic code:

<a href="https://www.angelfire.com/">Angelfire!</a>

So when I preview it, it should look like this:        Angelfire!

If you click on the link, it should lead you into a website called Angelfire.

If you wanted to put a different website, you could do that too.  Just change the URL (the code in gray) to another one and you'll be fine.  NEVER forget the http://  part, okay?  Also, make sure you put the </a> after or else it won't work!

Back to Top

Link-o-matic

There are other ways to make your links.  If you want to change the color of the link, do this:

Angelfire!

The Link is now a different color.  Make sure you put the </font>  or else the rest of your words would turn orange.  You can also change the font (the style of the word).

Images

What you can also do is make an image as your link.  Here is an example:

If you click on that picture, it should take you to another page.  Here is the code:

Some websites put blue borders around the image once you make it a link.  That's okay as well!

Back to Top

Lines

There are different types of "lines" you can use to separate information on your website.  The most common one is:

The code for that is:                                                        <hr>

Now, if you want to get more "flexible", you should try:

<hr size=5 width=100%>

And this is what you get:

The line is a little larger than the other lines, but it is more fancy and looks better than the normal lines.  Sometimes you can be more flexible and use this code:

<hr size=5 width=100%>
<hr size=5 width=75%>
<hr size=5 width=25%>

And when you are done, you should get something like this:

Does it look more fancy?  Thought so, I like it too!  You can also use images as lines.  For example:

or

They do look a lot better than the usual ones.

Back to Top

Tables

No, tables are not "tables and chairs".  Tables are like little charts you can make.  The Most basic table you can make is a one cell one row table.  It looks like this:

HERE IS THE CODE:

There are more "complicated" types of tables.  Like this:

Here is the code:

If you were able to read that, you are very good!  Okay, Here is another one:

Here is the code:

Next, if you want to put both together, you get this:

Use this code:

Here is a more complicated version of the one above.  It is more detailed, and more fun!

My "Day" Report

I hate to say this, but the tables are very complex.  Unless you know tables inside out, this may be confusing for you!

Here is the code:

If you want to add a background image to the table, it should look like this:

USE THIS CODE:

If you want a background color only, it should look like this:

Dynamic HTML

Okay, here the codes get a little more extreme and the special effects, even better.  If you copy down this code, every time a person has their mouse on a link, the link changes color!  It's a sense of style.

Here is another one, the button glows when you put your mouse on it.   Here is an example:

Here is the code for it:

This is an applet and may not work on all computers, but it's got great affects and will amaze your guests!  You can change the color if you'd like.

BLINK

If you have NETSCAPE NAVIGATOR, you should be able to use the blink tag.  If you have Internet Explorer, it won't work.  What the Blink tag does is make the words appear, then disappear, then appear, then disappear, etc.,  It's really cool.  
Here is a word  which should blink:

.:. Hello .:. My Name is Bub, I live in a pizza box...

Here is the code:

MARQUEE

Okay, marquees are moving words.  They are very cool and can only work on Internet Explorer, not Netscape Navigator.  Sorry!   There are different types of Marquees you can do.  one is where the "scroll"

This is a Marquee, the Words move back and forth

Back to Top

This Marquee is "alternate" and is different from the one you saw above.  The words appear to bounce back and fourth on the sides of the page.   This is what it looks like:

This Marquee is called the "alternate"

Here is the code:

If you want to play around with the codes and stuff, try it out, IT'S FUN!!!  Alright, there are other things you might want to consider.

You can add links in the marquee, so you can have something like this:

 Click here to see Sailor Moon!

Here is the code:

Images are allowed to.  So if you want to add "stuff", go ahead.

I can't show you the stuff, because my "browser" won't let me!  I'll give you the code anyway:

Back to Top

Web Hosts

What is a web host?  A web host is a company who will let you build a website for free. They provide a certain amount of space (some companies allow you unlimited web space).  You must make sure the web host you are signing up for allow you to use their services for FREE.  There are several catches though.

• You must build your website under their name (i.e. instead of http://www.bunnies.com/  It has to be http://www.geocities/Tokyo/34526/myname/index.htm)
• Other companies let you have your own domain name (i.e. http://www.myname.com/ but you would have to pay for it!)
• A lot of websites (like angelfire) have annoying banners.  They try to advertise their company as much as they can, they have advertisements popping up each time you guests visit.  It seriously is annoying!

I'll try to think of as many catches as I can. Although I can't guarantee everything I said is... umm.... never mind.  Anyway, here is a list of web hosts, you can choose one, or try them all out.  I have given some critique on the web hosts I have tried.  Oh yeah, one other thing, when you sign up for a web host, DO NOT put your real name, address, phone number, etc., because hackers can track you down after "finding out" your personal information.  If you do not put your real name, phone number, address etc., it doesn't really matter, because the service is free!  

Anyway, the list of web hosts:

Angelfire [http://www.angelfire.com]
Angelfire is the one I am using right now.  It has annoying banners and stuff but the service is great!  It's really easy to organize all your files.  They have great building guides, picture galleries, tools, and plus an ANIMATION STATION.  At the Animation Station, you can select animations for your own website for free and you can edit them.

Freeservers [http://www.freeservers.com/]
Freeservers is really cool.  They give you 20 Megabytes of space and uploading is really fast on ALL internet things (i.e. modem).  They also give you a short URL, like: http://icedragon.iwarp.com  or http://guyjob.8u.com they have templates for beginners and they feature sites every week.  You should try it!

Alloy [http://www.alloy.com]
Alloy is great too.  I tried it.  Organizing your files are easy.  They don't have as many tools and services as Angelfire, but it is still pretty good. 

Stormloader [http://www.stormloader.com]
Stormloader is a pretty good web hoster!  Umm....  It's got great tools you can use.  Also, they offer great services, but I don't think they offer a picture gallery.  No, only Angelfire.  Organizing files are really easy with Stormloader and they have a beginner and advanced feature to it.

Gurlpages [http://www.gurlpages.com]
Gurlpages is made by LYCOS, the same as Angelfire.  Gurlpages are strictly for girls.  I don't really know how to describe it, but Gurlpages is more for beginners because the way it's designed is really simple.  They have beginners and advanced things.  So if you're a beginner, they have special tools for you to use if you do not not HTML that well, although I don't think you can do as many things as you could if you were advanced.  In advanced, it is strict HTML.  You have to know all the special codes (all the codes on this page that I have shown is HTML).

OTHER ONES:

Sphosting [http://www.sphosting.com]

Asianavenue [http://www.asianavenue.com]
This site is really cool. They have great tutorial pages (HTML help pages like this) and they have this member points system (you don't have to do it).  It's a great way to organize your files.  The only problem is... only Asian avenue members can see it.  So in other words, if you haven't joined Asian avenue.com, then you view other member's pages.

Geocities [http://www.geocities.com]

Angelcities [http://www.angelcities.com]

MSN [http://www.msn.com]

Netscape Hosting [http://sites.netscape.net]

FOR BEGINNERS:

Homestead [http://www.homestead.com]
No HTML required.  Recommended for beginners.

I hope these recommendations have helped.  Meanwhile, don't hesitate to visit my website.  I have gone through approximately 68 hours, well honestly 5 hours working on this page for you.  I will keep adding to it.  So why don't you click here to visit my website.  Thanks!

Back to Top

.:.mAjOr HiNt.:.

Okay, I know this may seem bad, or not bad. I guarantee you one thing, if you do this, it will help you greatly.  If you don't, well, that doesn't really matter.  Okay, when you are surfing on the internet and you come across a great website, here's what you do:

1. On the file bar, click View

2. Scroll down to Source and select it.

3. Something should appear.  Look at it what do you see?

You would see HTML codes!  Millions and trillions and ... you know what I mean.  They are great ways of seeing how other people build their own home pages.

HOME

Copyright © 2001 NEO guide. All rights reserved.
Revised: .